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