reactチュートリアル

React入門②React開発環境の準備

1/24 分かりにくかったので説明と図を追加&変更

1/29 アドバイスを頂いたので変更

こんばんは。まつあきです。

前回に続き、2回目です。開発環境を作っていきましょう。

今回は開発環境を準備しますが、仮想環境というのを作って、その中に開発環境を準備します。

仮想環境を間に挟む理由ですが、端的に言うと学習効率と運用効率を上げるためです。WindowsやMacの中に開発環境を用意すると、

もっとみる

React入門①Reactとは

01/23 図を追加

自己紹介

初めまして。

広島県の東にある福山市というところで、福山IT座談会を主催しているまつあき(@_matsuaki)と申します。

普段は自営でLaravelやWordpress関係のお仕事をしつつ、ネットワークよりのこともしつつといった平凡な感じです。

きっかけ

座談会が次で5回目になるんですが、要望を拾っていくと「Reactやりたいぜ~」って欲が高まって

もっとみる

React.js チュートリアル[超入門] 後半まとめ

後半部分のダイジェストです。ザックリと内容を知ってから購入したい人やチュートリアルを終えて、何をしてきたか振り返りたい人に向けて書きました。まず完成品はこちら↓。

では早速始めます。

# 06 新しいプロジェクトを始める

ここでは、create-react-appで生成されるフォルダーを自分で開発しやすい状態に変更する作業をしました。

# 07 ヘッダーの作成

React流のinput

もっとみる

React.js チュートリアル[超入門] #06から#14(最終章)

前半ではReact.jsの基礎を学びました。後半では、YouTubeAPIを使って猫動画検索サービス「NekoTube」を作っていきます!他のReact.js用チュートリアルは「to-doリスト」や「カウンター」などのシンプルな作品をテーマにすることが多いので、敢えてより複雑で実践的な動画サイトを作ることにしました。完成物がこちら。

このYouTubeAPIを使ったチュートリアルは、udemyで

もっとみる

React.js チュートリアル[超入門]  前半まとめ #1-5

このレッスンでは、今まで進めてきたチュートリアルの前半部分をざっくりまとめていきます。必要のない人はスキップしていただいて結構です。

# 01プロジェクトの始め方

ここでは、React.jsの最初の課題である環境構築を行いました。といってもnode.jsとnpmのインストール以外は、create-react-appが一発でやってくれるので楽勝でしたね。

// よく使うnpmのコマンド$ np

もっとみる

React.js チュートリアル[超入門] #05 Stateを使った情報管理

前回のレッスンでは、stylingの方法について学びました。今回は、React特有のコンセプトであるstateをつかった情報管理を学習します。

前回までの作業用フォルダーは、僕のgithubから確認/ダウンロードできます。

このレッスンの目標
・Stateのコンセプトを理解する
・Class component vs functional component
・Stateを初期化してみる
・S

もっとみる

React.js チュートリアル[超入門] #04 Stylingの仕方

前回のレッスンでは、Propsについて学びました。今回は、React.jsでどうStylingしていくかを学習します。

前回までの作業フォルダーは、僕のgithubから確認/ダウンロードできます。

このレッスンの目標
・React.jsで選べる4つのstyling方法を知る
・CSS Stylesheetでボタンを装飾する

1. React.jsで選べる4つのstyling方法を知る

HT

もっとみる

React.js チュートリアル[超入門] #03 Propsを使ってみる

前回のレッスンでは、Componentを一から自分で作ってみました。今回は、propsについて学びます。

このレッスンの目標
・Propsを理解する
・Title.jsにテキストをpropsとして渡してみる
・inline-styleを渡してみる
・event handlerを渡してみる
・props.childrenを使う

前回までの作業フォルダーは、僕のgithubから確認/ダウンロードで

もっとみる

React.js チュートリアル[超入門] #02 Componentについて

前回のレッスンでは、プロジェクトの始め方を学びました。今回は、Componentについて学習していきます。React.jsを理解する上で、必要不可欠な知識です。

このレッスンの目標
・Componentの定義を理解する
・Atomic Designに触れる
・Componentを作る・組み込む

前回までの作業フォルダーは僕のgithubからダウンロードできます。
もしコードに不具合が起きたり、

もっとみる

React.js チュートリアル[超入門] #01 プロジェクトの始め方

前回のレッスンでは、コースの概要と目標を確認しました。今回からいよいよReact.jsの開発を実際に学んでいきます。

このレッスンの目標
・プロジェクトフォルダーの作成・環境構築
・デフォルトで生成されるファイルの確認
・ブラウザーで開いてみる
・JSXを編集してみる

レッスンを始める前に
このボーナスレッスンに目を通しておくと、サクサク進めます。このチュートリアルで当たり前のように使われてい

もっとみる