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

1. with
Created Admin System

2. About me
フロントエンドエンジニア
鬼澤 徹也

3. Why?
• プロジェクトのユーザー等の管理画面がなかった。
• システムを触れないメンバーから可視化したい。
• 普段の案件で使えない技術を使いたい。

4. Member
• バックエンドエンジニア： 2名
• フロントエンドエンジニア：2名

5. Todo
• トップページ
• ユーザーの検索・詳細ページ
• 商品の検索・詳細ページ

6. Web Framework

7. Front

8. Front
• React-Router
• superagent.js

9. TaskRunner

10. TaskRunner
• Gulp.js
• Laravel-Elixir

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

16. Require
Requireコード

17. Component

19. Component

20. Components

21. Components

22. ReactDOM.render

23. JSX

24. JSX

25. JSX
• JavaScript XMLの略
• HTMLのように構造の可視化
• 最終的にはJavaScriptにコンパイルされる

26. props state

27. props
• プロパティ
• コンポーネントに渡される任意のデータ

28. state
• 内部状態を持つもの
• コンポーネントの内部でのみ使用される
• 単純なデータのみをstateに保存する

29. use state

30. use props App

31. use props Headline

32. change state

33. Coding

34. Require

35. Component

36. getInitialState

39. with
Created Admin System