$30 off During Our Annual Pro Sale. View Details »

boilerplate react

boilerplate react

react-boilerplate

さっちゃん

June 15, 2017
Tweet

More Decks by さっちゃん

Other Decks in Programming

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

  34. None
  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