サポートslack

https://join.slack.com/t/frontend-j/shared_invite/enQtNDgxNjEyMTEwNzUzLTZkZmFkMWY4Mzg4MGY0YjMxMGNlZjc4ODJkZjU2ZDZmNjE0MmI3OWU5MGE4Y2NmNjIxMzRiMWU5NTgwYWFmNTM

イベント概要

こんな方が対象

• アプリ開発者
• フロントエンドエンジニア

こんなことやります
このReact入門では、MATERIAL-UI を使って、React.jsの基本的な部分を学んでいきます。 デザインやマークアップが苦手でも見栄えのあるデザインのUIが作れます。

Reactとは
「React」はFacebookが開発したjavascriptのライブラリです。見た目のviewに特化しているため、webシステムやアプリのUI開発に多く採用されています。またiOSやAndroidの青売り開発向けの「React-native」では、Reactと同じ設計思想でスマートフォンのアプリの開発も行えます。

MATERIAL-UIとは
Googleが提唱するマテリアルデザインをReactで扱えるようにしたコンポーネントライブラリです。

• 公式サイト https://material-ui.com/

予定表

参加条件

• 開発環境を準備し当日PCを持参できる方

必須スキル

• html,css,javascriptがある程度わかる

駐車場

• コリンザ横の無料市営駐車場
• そのほかのコザ周辺の駐車場はこちらです

事前準備

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の拡張機能

microsoft VScodeでreact開発を行うための便利な拡張機能です。

• 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

沖縄フロントエンド塾とは

沖縄県内のフロントエンドエンジニアのスキル向上を目的に、実際にコーディングをしながら学ぶためのコミュニティです。フロントエンド開発にはデザイン、UI/UX、エンジニアリングなど幅広いスキルが求められます。フロントエンド塾ではフロントエンド全体を横断した知識やスキルを習得できることを目指して、なるべく各パートに合った学習テーマでイベントを行います。

講師

* 黒川正裕 : Baidu,DeNA,OceansなどでUI/UXデザイナー、フロントエンドエンジニアを経て、UI/UXエンジニアリングのバッカム株式会社(http://backham.me)を設立。Reactを使ったコンポーネント指向のUI開発で大規模なシステムのUIからアプリのUIまで対応してます。

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