react勉強会 #2 の資料です。

1. react勉強会#2
本⽇のテーマ
コンポーネント指向の実装を体験してみよう
本⽇の達成⽬標
TODOアプリの完成
本⽇の流れ
1. 環境構築
node (8.1.0以上)、 npm (5.6.0以上) が必要となります。
確認
※Mac はターミナル、Windows はコマンドプロンプトにて以下コマンドで確認
nodeのバージョン確認
node --version
npmのバージョン確認
npm --version
nodeがインストールされていない⽅
(上記確認でバージョンが表⽰されなかった⽅)
1. https://nodejs.org/en/ を開く
2. 左側の LTS 版をダウンロードする
3. ダウンロードしたインストーラーを実⾏
4. 「次へ」を選択していきインストール
nodeまたはnpmのバージョンが条件を満たしていない⽅
アップデートして問題ないかご⾃⾝の環境を考慮の上、アップデートしてください。
2. TODOアプリの実装
1. https://qiita.com/rioc/items/8723c236e10d989e827d を開く
2. 「3. 現状のソースの確認」まで進める
3. 各⾃実装開始
最低限として以下を満たすTODOアプリを作る
TODOの内容を⼊⼒するためのフォームがあること
タスク⼀覧の場所を⽤意し、フォームの内容を確定すると、そこに掲載されるこ
と
タスク⼀覧で完了したタスクを削除できること
主に以下のような進め⽅がありますので、ご⾃⾝のレベルに合ったもので進めてください。
サンプルコードを⾒ずに1から実装する
css はサンプルを⽤い、js 部分は⾃⼒で⾏う
サンプル通りに作成する

2. ※サンプル通り作成いただいたあと、そこからソースコードをいじっていくのも⾯⽩いか
もしれません。
また、早めに終わった⽅は機能の追加等を⾏なっていただければと思います。
react チュートリアル (https://ja.reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial)
を⾏なったことがない⽅はこちらもオススメします。
3. 感想・意⾒等の募集 (20:50~)
各⾃、1つ以上コメントいただいて解散とさせていただきます。
今後の勉強会の参考にさせていただきます。
本⽇の勉強会の感想
(分かりにくかった・簡単すぎたなど)
意⾒
(こういう勉強会をやってみたい)
などひと⾔いただければ幸いです！
まとめ
今回は TODO アプリという基礎的なものを題材にしましたが、 react の特徴であるコンポーネント指向、
状態管理に基づいた実装を⾏うことで、react の書き⽅を⾝につける第⼀歩になればと思います。もし、難
しく感じた⽅は react チュートリアル (https://ja.reactjs.org/tutorial/tutorial.html) に取り組まれてか
ら、コードを⾒直してみると理解しやすいかもしれません。
お知らせ
チャットツール「discord」で勉強会の告知や、やりとりの場を設けております。
もしよろしければ下記 URL からご参加ください。
https://discordapp.com/invite/fr8CqPH