概要

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を飛ばしてご参加ください。

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

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

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

課題内容は前回からアップデートします。詳細は後日公開します。

【この課題で学ぶ事】

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

課題Lv2 SPA開発

課題内容は前回からアップデートします。詳細は後日公開します。 Fluxなどの実践的な知識についても解説する予定です。

【この課題で学ぶ事】

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

参加費

無料 [学生大歓迎！]

定員

30名

↓

50名

(初級者の参加者多数のため、増員しました。3/18)

当日の流れ

開場18:30,19:00スタート

後日公開します。

講師

• 河野 純也 (Lebe Inc. フロントエンドエンジニア)
• 宮澤 了祐 (Lebe Inc. CTO)
• 藤井 正明 (Lebe Inc. 代表)

主催

• SUPER-HACKATHON / Lebe Inc.

協力・共催

• 大阪イノベーションハブ

ハンズオンについて

初学者にはReactのようなフレームワークを学習する上でハードルとなる、最初の一歩目をクリアするためのハンズオンです。中級者以上には、独学でJavaScriptフレームワークを利用している方にとって、再学習する機会として実施します。ぜひ気軽に参加いただけると嬉しく思います。