イベント概要

こんな方におすすめ!!

• フロントエンドに興味がある
• サーバサイドもフロントエンドも自分で開発したい
• Reactに興味があるがどこから手をつけたらいいかわからない
• フロントエンドのスキルもつけて業務に生かしたい
• 手広く儲けたい

第2回はアプリを実装します。Reactでこんなことやります。

コンポーネント設計
- Atomic Design解説
- コンポーネント作成

SPA実装ハンズオン
- SPAをつくる
- ルーティング
- ソケット通信
- フォーム

そんなサーバサイド開発者が手っ取り早くReactを覚えるための集中講座を2回に渡って開催します。 前後編でReactのstate/propsを理解してアプリを作れるレベルになります。 ゆるい勉強会ではありません！最低限必要なことを詰め込んだ前編・後編の怒涛の6時間！

• 前編：10月27日　「JavascriptとReactの基本」終了しました

• 後編：11月10日　「Reactアプリ開発」

後編ではReact+Node+Expressでアプリを開発します。 本気で学習、確実にスキルを身につけるために、前編・後編必ず両方にご参加ください。 参加者には沖縄フロントエンド塾Slackでフロントエンド学習をサポートします。

参加条件

• サーバサイドのエンジニアリング経験者なら誰でも
• 開発環境を準備し当日PCを持参できる方

必須スキル

• javascriptをある程度理解している ( jQueryなどを使ったことがある )
• node.jsの環境構築ができる
• HTMLをある程度理解している( 簡単なホームページを作れるくらい )

事前準備

1. nodeをインストール
2. npmをインストール ( yarnでも可 )
3. npmでcreate-react-appをインストール
4. 使用するエディタにeslintをインストール

すぐにReact開発がはじめられる状態でＰＣを持参ください。

参考記事など

Node.js インストール方法

• window : https://qiita.com/Masayuki-M/items/840a997a824e18f576d8
• Mac : https://qiita.com/akakuro43/items/600e7e4695588ab2958d

※ node.js をインストールすると、npmもインストールされています。

npm で create-react-app の インストール方法

• コンソール画面で、以下を実行

$>npm install -g create-react-app

VScodeの拡張機能

• Reactの便利な拡張をまとめたもの

https://marketplace.visualstudio.com/items?itemName=burkeholland.react-food-truck

• Reactのスニペット

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

• HTMLの入力補助

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

• eslint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

主催

バッカム株式会社 http://backham.me

講師

• 黒川正裕 : Baidu,DeNAなどでUI/UXデザイナー、フロントエンドエンジニアを経て、UI/UXエンジニアリングのバッカム株式会社(http://backham.me)を設立。

• 内田辰貴：フロントエンドエンジニア。バッカムにてJavascript/Reactによる多くの開発に携わる。