react es2015

with

Created Admin System

About me

フロントエンドエンジニア

鬼澤徹也

Why?

• プロジェクトのユーザー等の管理画面がなかった。

• システムを触れないメンバーから可視化したい。

• 普段の案件で使えない技術を使いたい。

Member

• バックエンドエンジニア： 2名

• フロントエンドエンジニア：2名

Todo

• トップページ

• ユーザーの検索・詳細ページ

• 商品の検索・詳細ページ

Web Framework

Front

• React-Router

• superagent.js

TaskRunner

TaskRunner

• Gulp.js

• Laravel-Elixir

Laravel-Elixir

• sass コンパイル

• Browserify: React es2015 コンパイル

• CSS/JS minify & 結合

• CSS/JS のバージョニング

Laravel-Elixir

とは？

• SPA (シングルページアプリケーション)

• 「View」の特化している

• 仮想DOMにより更新を最小限に

• Facebookが開発

Use React.js

Require

Requireコード

Component

Components

ReactDOM.render

JSX

• JavaScript XMLの略

• HTMLのように構造の可視化

• 最終的にはJavaScriptにコンパイルされる

props state

props

• プロパティ

• コンポーネントに渡される任意のデータ

state

• 内部状態を持つもの

• コンポーネントの内部でのみ使用される

• 単純なデータのみをstateに保存する

use state

use props App

use props Headline

change state

Coding

Require

Component

getInitialState

with

Created Admin System

Internet