2時間で学ぶ React ハンズオン in Osaka

概要

「OIH オールナイトハッカソン in 勝尾寺」( http://www.innovation-osaka.jp/katsuojihack/ ) の開催を記念して、ハッカソンのメンターが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）の２パターンを用意しています。

1. Reactの解説と開発環境構築
2. Hello React　初めてのReactコンポーネントを作成します。
3. 課題解説（Lv1）ハンズオンで作成する課題について解説します。
4. Lv1開始
5. 課題解説（Lv2）Lv2の課題について解説します
6. （Lv1が完了した人）Lv2開始

物足り無い人向けの追加課題も用意してあります。

課題Lv1 Reactコンポーネントの作成

次のReactコンポーネントを作成します。

• クリックするとコインがアニメーションで表示されるブロックを作成します。
• コインは一定数（10個）以上出てくると出てこなくなります。
• ※ 素材とスタイルは事前に準備してあるものを使います。

jQueryで同じものを作るとどうなるか、についても解説します。

【この課題で学ぶ事】

• Reactコンポーネントの作り方
• データの受け渡し方法
• jQueryとの作り方の違い

課題Lv2 Todoアプリの作成

Reactチュートリアルでも解説されているTodoアプリを作成します。 Lv1の課題以上にJavaScriptの基本知識が必要です。

今回は使いませんが、Fluxなどの実践的な知識についても解説する予定です。

【この課題で学ぶ事】

• Reactらしい設計手法
• Reactでのデータの取り扱い
• 実践的な内容への導入

参加費

無料 [学生大歓迎！]

定員

12名

↓

16名 (予定より早く定員に達したので増員しました。 9/6 21:26)

↓

36名

(予定より多くの参加希望があったため、部屋を変更して増員いたします。 9/7 19:45)

↓

46名

(予定より多くの参加希望があったため、増員いたします。 9/9 18:23)

講師

• 河野 純也 (Lebe Inc. フロントエンドエンジニア / 学生メンター)
• 宮澤 了祐 (Lebe Inc. CTO)

主催

• SUPER-HACKATHON / Lebe Inc.

協力・共催

• 大阪イノベーションハブ (予)
• ※ 「OIHオールナイトハッカソン in 勝尾寺」( http://www.innovation-osaka.jp/katsuojihack/ )は大阪イノベーションハブが主催いたします。

ハンズオンのねらい

Reactのようなフレームワークを学習する上でハードルとなる、最初の一歩目をクリアするためのハンズオンです。ハッカソンに参加する方もそうでない方も、ぜひこれを機会にReactにチャレンンジしてみてください。