2時間で学ぶReactハンズオン
URL: 2時間で学ぶReactハンズオン
概要
2016年の秋にも実施した「2時間で学ぶ React ハンズオン」の第二弾を実施いたします。
ReactはFacebookとInstagramで作られた、UIを作るためのJavaScriptライブラリです。複雑な構造データをシンプルにUIへ反映することや、再利用可能なコンポーネントを作るために開発されています。
JSX構文と呼ばれる、JavaScriptとHTMLを組み合わせた独自の書式でコンポーネントを作成し、複数のコンポーネントを組み合わせていくことでWebアプリケーションを構築していきます。
Reactは FacebookMessengerやInstagramなどで、ネイティブアプリと同等のUIを実現するために使われています。
対象者
初級者と中級者以上両方が楽しめるハンズオンにします
このハンズオンはjQueryを使ったことがあるデザイナーから、モダンなJavaScript開発を仕事に取り入れてみたいと考えているエンジニアを対象にしています。また前回の参加者を考慮し、初級者と中級者以上の両方が楽しめる教材を開発する予定です。
準備するもの
- Node.js（v4以降）がインストールされたPC（Windows/Mac/Linux）をご準備下さい。
- インストール方法がわからないという方は当日スタッフにお声かけ下さい。
- お気に入りのエディタ（Sublime Text、Atomなど）
ハンズオンの流れ
ハンズオンスタート後、課題を一緒に開発していきます。 課題は初心者向け（Lv1）、中級者向け（Lv2）の２パターンを用意します。中級者以上はLv1を飛ばしてご参加ください。
- Reactを含めたJavaScript開発環境の背景解説
- Reactの解説と開発環境構築
- Hello React 初めてのReactコンポーネントを作成します。
- 課題解説（Lv1）ハンズオンで作成する課題について解説します。
- Lv1開始
- 課題解説（Lv2）Lv2の課題について解説します
- （Lv1が完了した人）Lv2開始
物足り無い人向けの追加課題も用意します。
課題Lv1 try! React.js Koans
Koansを利用したReactの練習プログラムです。
全部で7個の課題があり、順番に課題を解いていくことでReactの開発の流れや実装方法がわかるようになっています。
課題Lv2 SPA開発（画像加工SPA）
Fluxパターンを導入した本格的なシングルページアプリケーションの作成をします。
フィルターで画像を加工できるSPAをつくります。
時間の都合上、FLuxパターンの実装はしません。コンポーネントの作成に集中していただけます。（Fluxパターンの説明はREADMEに記載しています。）