Upgrade to Pro — share decks privately, control downloads, hide ads and more …

boilerplate react

boilerplate react

react-boilerplate

さっちゃん

June 15, 2017
Tweet

More Decks by さっちゃん

Other Decks in Programming

Transcript

  1. bolierplate react

    View full-size slide

  2. .。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

    View full-size slide

  3. .。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

    View full-size slide

  4. Reactの⼊れ⽅

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. npm run generate

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Control.Lensだ此れ

    View full-size slide

  39. Control.Lensだ此れ
    Haskell

    View full-size slide