react es2015
Post on 16-Jan-2017
385 Views
Preview:
TRANSCRIPT
with
Created Admin System
About me
フロントエンドエンジニア
鬼澤 徹也
Why?
• プロジェクトのユーザー等の管理画面がなかった。
• システムを触れないメンバーから可視化したい。
• 普段の案件で使えない技術を使いたい。
Member
• バックエンドエンジニア： 2名
• フロントエンドエンジニア：2名
Todo
• トップページ
• ユーザーの検索・詳細ページ
• 商品の検索・詳細ページ
Web Framework
Front
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
Component
Components
Components
ReactDOM.render
JSX
JSX
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
top related