お知らせ 9月24日(木)10:00から2時間ほど、サーバーのメンテナンス作業を予定しております。作業の間はconnpassのご利用が出来ません。ご迷惑をおかけしますが何卒ご了承ください。

新機能 イベントメッセージの予約機能を追加しました。イベント主催者様は、参加者へのメッセージ送信を事前に予約できます。詳しくはこちらをご確認ください。

新機能 イベント詳細画面に「参加者への情報」欄を追加しました。イベント管理者、発表者、参加者(抽選中や補欠は除く)だけに表示されるフィールドです。詳しくはこちら

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

Nov

17

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

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

Organizing : 沖縄フロントエンド塾

Registration info

参加枠1

Free

FCFS
6/8

Description

サポート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による多くの開発に携わる。

Media View all Media

If you add event media, up to 3 items will be shown here.

Feed

クロカワマサヒロ

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

11/07/2018 18:52

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

Ended

2018/11/17(Sat)

01:00
03:45

You cannot RSVP if you are already participating in another event at the same date.

Registration Period
2018/11/07(Wed) 18:52 〜
2018/11/17(Sat) 03:45

Location

Startup cafe Koza

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

Attendees(6)

itomu

itomu

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

HiroyukiKinjo

HiroyukiKinjo

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

fukuhara121

fukuhara121

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

taigee

taigee

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

ねるね

ねるね

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

suzurider

suzurider

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

Attendees (6)