お知らせ 成長し続けるエンジニアを支援するサービス「Forkwell」と勉強会プラットフォーム「connpass」が連携し、connpass上で開催されるITエンジニア向け勉強会の懇親会への支援を拡大いたします。詳しくはこちら

このエントリーをはてなブックマークに追加

9月

15

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

Organizing : SUPER-HACKATHON / Lebe Inc.

Registration info

参加枠1

Free

FCFS
39/46

Description

概要

「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)の2パターンを用意しています。

  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.

協力・共催


ハンズオンのねらい

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

Presenter

河野 純也 河野 純也 宮澤 了祐 宮澤 了祐

Media View all Media

If you add event media, up to 3 items will be shown here.

Feed

Masaaki Fujii

Masaaki Fujii published 2時間で学ぶ React ハンズオン in Osaka.

09/06/2016 19:30

2時間で学ぶ React ハンズオン in Osaka を公開しました!

Group

super-hackathon

Number of events 12

Members 308

Ended

2016/09/15(Thu)

19:00
21:00

Registration Period
2016/09/06(Tue) 18:30 〜
2016/09/15(Thu) 18:30

Location

大阪イノベーションハブ

大阪府大阪市 北区大深町3番1号 グランフロント大阪 ナレッジキャピタルタワー C7階

Organizer

Attendees(39)

ymgn

ymgn

2時間で学ぶ React ハンズオン in Osaka に参加を申し込みました!

44

44

2時間で学ぶ React ハンズオン in Osakaに参加を申し込みました!

がっちゃん

がっちゃん

2時間で学ぶ React ハンズオン in Osakaに参加を申し込みました!

Takahiro Morimoto

Takahiro Morimoto

2時間で学ぶ React ハンズオン in Osaka に参加を申し込みました!

fuchi_ll

fuchi_ll

2時間で学ぶ React ハンズオン in Osakaに参加を申し込みました!

shimael

shimael

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

takamichi

takamichi

2時間で学ぶ React ハンズオン in Osaka に参加を申し込みました!

tomoki_kikichi

tomoki_kikichi

2時間で学ぶ React ハンズオン in Osakaに参加を申し込みました!

chataro

chataro

2時間で学ぶ React ハンズオン in Osakaに参加を申し込みました!

misumi_takuma

misumi_takuma

2時間で学ぶ React ハンズオン in Osaka に参加を申し込みました!

Attendees (39)

Canceled (11)