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

Create React App

9a3e3b2f5f1f4d5a3258ebe38b3693b7?s=47 se_kamo
August 29, 2016

Create React App

Grand Frontend Osaka での LT資料です。

9a3e3b2f5f1f4d5a3258ebe38b3693b7?s=128

se_kamo

August 29, 2016
Tweet

Transcript

  1. Create React App Wakai Shinichiro @se_kamo

  2. Wakai @se_kamo ؔ੢ϑϩϯτΤϯυUG GFO 2016 ౷ׅ ݉ ࣮ߦҕһ௕ ަ໺ϲݪ ೔ຊҨ࢈ϓϩδΣΫτ

    ٕज़෦௕ גࣜձࣾάϥουΩϡʔϒ ΤϯδχΞ
  3. React Λ࢖͍͍ͨʂ

  4. ͨͩɺ؀ڥ͕੔͑Εͣɺ அ೦ɻɻ

  5. ͙͢ʹίʔυΛॻ͖͍ͨʂ

  6. Create React App

  7. Reactͷ؀ڥΛ 1෼ͰߏஙͰ͖Δπʔϧ

  8. 7݄ʹFacebook͕ެ։ ES6΍JSXʹରԠ

  9. ߏஙͯ͠Έ·͠ΐ͏

  10. npm Πϯετʔϧ

  11. npm install -g create-react-app

  12. None
  13. ίϚϯυͨͨ͘

  14. create-react-app <σΟϨΫτϦ໊>

  15. None
  16. ؀ڥ׬੒ʂʂʂ

  17. ReactΞϓϦΛ্ཱͪ͛Δ

  18. npm start

  19. None
  20. ্ཱ͕ͪͬͨ

  21. ެ։ϑΝΠϧͷ ग़ྗ΋؆୯

  22. npm run build

  23. None
  24. build ͷ௚Լʹ ެ։ϑΝΠϧΛग़ྗʂ

  25. ͳͥ͜Μͳ͜ͱ͕Ͱ͖Δͷ͔ʁ

  26. Create React App Ͱ ࢖ΘΕ͍ͯΔٕज़

  27. • webpack • webpack-dev-server • style-loader • Babel • Autoprefixer

    • ESLint
  28. webpack • ࠷దͳܗʹ࡞Γม͑ΔҝͷπʔϧʢϏϧυπʔ ϧʣ • Jade΍CoffeeScriptΛίϯύΠϧ, ϑΝΠϧͷ minifyͯ͘͠ΕΔ • Create

    React App Ͱ͸ES2016΍JSXͷτϥϯ εύΠϧΛͯ͘͠Ε͍ͯΔ
  29. webpack-dev-server • ϩʔΧϧαʔόʔΛىಈͯ͘͠ΕΔ • ϑΝΠϧΛมߋͨ͠ࡍ͸ݕ஌ͯ͠ɺϒϥ΢β ΛࣗಈతʹϦϩʔυͯ͠Δ

  30. style-loader • JavascriptͷίʔυதͰstylesheetΛrequireग़ དྷΔΑ͏ʹ͢Δπʔϧ • ෦඼ཁૉʹඞཁͳελΠϧΛɺඞཁͳ͚࣌ͩ ద༻͢Δ͜ͱ͕Ͱ͖Δ • ϦΫΤετ਺ΛݮΒ͢͜ͱ͕Ͱ͖Δ

  31. Babel • ES6΍ES7, JSXΛτϥϯεύΠϧ͢Δπʔϧ • Ұ෦ͷϒϥ΢β͕ES5·Ͱ͔͠ରԠͯ͠ͳ͍ͷ Ͱɺ։ൃ͞Εͨͷ͕Babel

  32. ESLint • ߏจʹϛε͕ͳ͍͔ΛνΣοΫͯ͘͠ΕΔ੩ తݕূπʔϧ • ؆୯ʹߏจνΣοΫΛΧελϚΠζͰ͖Δ • ES6, ES7, JSXͷه๏Λαϙʔτ͍ͯ͠Δ

  33. ·ͱΊ ؆୯ʹͰ͖ΔΑʂ

  34. ಓ۩͸ἧ͍·ͨ͠

  35. ޙ͸ั·͑Δ͚ͩͰ͢Ͷ

  36. ͝੩ௌ͍͖ͨͩɺ ͋Γ͕ͱ͏͍͟͝·͢ɻ