boilerplate react

react-boilerplate

Transcript

1. bolierplate react
2. .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆)
3. .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆)
4. Reactの⼊れ⽅
5. Reactの⼊れ⽅ (簡単にする爲省略してゐます。)
6. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる
7. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる
8. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる
9. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する
10. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる
11. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる
12. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する
13. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる
14. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる
15. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10.babel-loader⼊れる
16. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10.babel-loader⼊れる 11.webpack-dev-server⼊れる
17. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10.babel-loader⼊れる 11.webpack-dev-server⼊れる 12.webpack設定する
18. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる
19. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる
20. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる
21. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる
22. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる
23. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる
24. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く
25. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く 20. action書く
26. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く 20. action書く 21. reducer書く
27. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く 20. action書く 21. reducer書く 22. saga書く
28. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く 20. action書く 21. reducer書く 22. saga書く 23. test書く
29. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く 20. action書く 21. reducer書く 22. saga書く 23. test書く
30. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く 20. action書く 21. reducer書く 22. saga書く 23. test書く 要る？
31. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く 20. action書く 21. reducer書く 22. saga書く 23. test書く 要る。 (普通の事を普通にやるには)
32. Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる 10. babel-loader⼊れる 11. webpack-dev-server⼊れる 12. webpack設定する 13. React⼊れる 14. react-dom⼊れる 15. Redux⼊れる 16. react-redux⼊れる 17. react-router⼊れる 18. redux-saga⼊れる 19. Component書く 20. action書く 21. reducer書く 22. saga書く 23. test書く
33. git clone https://github.com/react-boilerplate/react-boilerplate.git app cd app npm run setup
35. npm run generate
36. npm run generate ├Component ├ Action ├ Reducer ├ Saga └Selector
37. Quick scaffolding Predictable state management Next generation JavaScript Next generation CSS Industry-standard routing Industry-standard i18n internationalization support Offline-first SEO
38. 個⼈的に氣に成ったやつ reselect
39. Control.Lensだ此れ
40. Control.Lensだ此れ Haskell