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

11月

17

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

Atomic design でUIのコンポーネントを作りながらReactを学びます!

主催 : 沖縄フロントエンド塾

ハッシュタグ :#react #ui #okinawa #frontend
募集内容

参加枠1

無料

先着順
6/8

イベントの説明

サポート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開発では、

  1. UIデザイン
  2. html,cssコーディング
  3. javascriptコーディング

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

  1. UIデザイン
  2. 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をある程度理解している

駐車場

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

事前準備

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

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

参考記事など

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

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

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

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

フィード

クロカワマサヒロ

クロカワマサヒロ さんが コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 を公開しました。

2018/11/07 18:52

コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 を公開しました!

終了

2018/11/17(土)

01:00
03:45

開催日時が重複しているイベントに申し込んでいる場合、このイベントには申し込むことができません

募集期間
2018/11/07(水) 18:52 〜
2018/11/17(土) 03:45

会場

Startup cafe Koza

沖縄県沖縄市中央1-7-8

参加者(6人)

itomu

itomu

コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 に参加を申し込みました!

HiroyukiKinjo

HiroyukiKinjo

コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾に参加を申し込みました!

fukuhara121

fukuhara121

コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザに参加を申し込みました!

taigee

taigee

コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザに参加を申し込みました!

MinamiSaeki

MinamiSaeki

コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザ に参加を申し込みました!

suzurider

suzurider

コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザに参加を申し込みました!

参加者一覧(6人)