コンポーネント指向UI開発で学ぶReact入門沖縄フロントエンド塾 in スタートアップカフェコザ

2018/11/17(土)01:00 〜 03:45 開催

ブックマーク

JavaScript, UX, HTML

イベント内容

サポートslack

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

イベント概要

こんな方が対象

Webデザイナー
マークアップエンジニア
アプリ開発者
UIデザイナー

こんなことやります
このReact入門では、UIのコンポーネント設計をReactで行うことで、Reactとコンポーネント指向、Atomic Designを同時に学習していきます。0からUIをコンポーネントを組み合わせて実際に動くUIを作ります。

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

コンポーネント指向
UIを構成する部品をコンポーネントとして管理し、それらを組み合わせてUIを設計する手法です。コンポーネントにすることでアプリのスケーラビリティに対応することができます。またこれまでのweb開発では、

UIデザイン
html,cssコーディング
javascriptコーディング

という流れが主でしたが、コンポーネント指向では、

UIデザイン
html,style,javascriptコーディング

というhtml,style,javscriptコーディングを同時に行うことで素早い開発を行うことができます。

時間	内容
13:00	挨拶・自己紹介
13:10	React について
13:20	React 環境設定
13:35	Atomic Designによるコンポーネント設計
14:00	Reactの基礎ハンズオン
14:30	休憩
14:45	ReactコンポーネントとUIの作成
15:45	終了

参加条件

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

必須スキル

html,scssをある程度理解している

駐車場

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

事前準備

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

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

参考記事など

Node.js インストール方法

※ 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まで対応してます。