Tweet
Tweet

Slide 1

Slide 1 text

bolierplate react

Slide 2

Slide 2 text

.｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆)

Slide 3

Slide 3 text

.｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆)

Slide 4

Slide 4 text

Reactの⼊れ⽅

Slide 5

Slide 5 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。)

Slide 6

Slide 6 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる

Slide 7

Slide 7 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる

Slide 8

Slide 8 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる

Slide 9

Slide 9 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する

Slide 10

Slide 10 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる

Slide 11

Slide 11 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる

Slide 12

Slide 12 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する

Slide 13

Slide 13 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる

Slide 14

Slide 14 text

Reactの⼊れ⽅ (簡単にする爲省略してゐます。) 1. Babel⼊れる 2. bebel-preset-env⼊れる 3. babel-react⼊れる 4. Babel設定する 5. ESLint⼊れる 6. babel-eslint⼊れる 7. ESLint設定する 8. Flow⼊れる 9. webpack⼊れる

Slide 15

Slide 15 text

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⼊れる

Slide 16

Slide 16 text

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⼊れる

Slide 17

Slide 17 text

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設定する

Slide 18

Slide 18 text

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⼊れる

Slide 19

Slide 19 text

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⼊れる

Slide 20

Slide 20 text

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⼊れる

Slide 21

Slide 21 text

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⼊れる

Slide 22

Slide 22 text

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⼊れる

Slide 23

Slide 23 text

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⼊れる

Slide 24

Slide 24 text

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書く

Slide 25

Slide 25 text

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書く

Slide 26

Slide 26 text

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書く

Slide 27

Slide 27 text

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書く

Slide 28

Slide 28 text

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書く

Slide 29

Slide 29 text

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書く

Slide 30

Slide 30 text

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書く 要る？

Slide 31

Slide 31 text

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書く 要る。 (普通の事を普通にやるには)

Slide 32

Slide 32 text

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書く

Slide 33

Slide 33 text

git clone https://github.com/react-boilerplate/react-boilerplate.git app cd app npm run setup

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

npm run generate

Slide 36

Slide 36 text

npm run generate ├Component ├ Action ├ Reducer ├ Saga └Selector

Slide 37

Slide 37 text

Quick scaffolding Predictable state management Next generation JavaScript Next generation CSS Industry-standard routing Industry-standard i18n internationalization support Offline-first SEO

Slide 38

Slide 38 text

個⼈的に氣に成ったやつ reselect

Slide 39

Slide 39 text

Control.Lensだ此れ

Slide 40

Slide 40 text

Control.Lensだ此れ Haskell