Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
React es2015
React es2015
React es2015
Upcoming SlideShare
Loading in …5
×

React es2015

585 views

Published on

Adminシステムを作るにあたり、React.js、Gulpなどを使用し、es2015で記述した際のスライド

Published in: Internet
  • Be the first to comment

React es2015

  1. 1. with Created Admin System
  2. 2. About me フロントエンドエンジニア 鬼澤 徹也
  3. 3. Why? • プロジェクトのユーザー等の管理画面がなかった。 • システムを触れないメンバーから可視化したい。 • 普段の案件で使えない技術を使いたい。
  4. 4. Member • バックエンドエンジニア: 2名 • フロントエンドエンジニア:2名
  5. 5. Todo • トップページ • ユーザーの検索・詳細ページ • 商品の検索・詳細ページ
  6. 6. Web Framework
  7. 7. Front
  8. 8. Front • React-Router • superagent.js
  9. 9. TaskRunner
  10. 10. TaskRunner • Gulp.js • Laravel-Elixir
  11. 11. Laravel-Elixir • sass コンパイル • Browserify: React es2015 コンパイル • CSS/JS minify & 結合 • CSS/JS のバージョニング
  12. 12. Laravel-Elixir
  13. 13. とは?
  14. 14. • SPA (シングルページアプリケーション) • 「View」の特化している • 仮想DOMにより更新を最小限に • Facebookが開発
  15. 15. Use React.js
  16. 16. Require Requireコード
  17. 17. Component
  18. 18. Component
  19. 19. Components
  20. 20. Components
  21. 21. ReactDOM.render
  22. 22. JSX
  23. 23. JSX
  24. 24. JSX • JavaScript XMLの略 • HTMLのように構造の可視化 • 最終的にはJavaScriptにコンパイルされる
  25. 25. props state
  26. 26. props • プロパティ • コンポーネントに渡される任意のデータ
  27. 27. state • 内部状態を持つもの • コンポーネントの内部でのみ使用される • 単純なデータのみをstateに保存する
  28. 28. use state
  29. 29. use props App
  30. 30. use props Headline
  31. 31. change state
  32. 32. Coding
  33. 33. Require
  34. 34. Component
  35. 35. getInitialState
  36. 36. with Created Admin System

×