Create React App

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. ͝੩ௌ͍͖ͨͩɺ ͋Γ͕ͱ͏͍͟͝·͢ɻ