お知らせ ビープラウド、機械学習・データ分析の問題をオンライン学習サービスPyQにて提供開始

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

9月

15

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

主催 : SUPER-HACKATHON / Lebe Inc.

募集内容

参加枠1

無料

先着順
39/46

イベントの説明

概要

「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にチャレンンジしてみてください。

発表者

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

資料 資料をもっと見る/編集する

資料が投稿されると、最新の3件が表示されます。

フィード

Masaaki Fujii

Masaaki Fujii さんが 2時間で学ぶ React ハンズオン in Osaka を公開しました。

2016/09/06 19:30

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

グループ

super-hackathon

イベント数 11回

メンバー数 298人

終了

2016/09/15(木)

19:00
21:00

募集期間
2016/09/06(火) 18:30 〜
2016/09/15(木) 18:30

会場

大阪イノベーションハブ

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

大阪イノベーションハブ

管理者

参加者(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 に参加を申し込みました!

参加者一覧(39人)

キャンセルした人(11人)