Create React App

Grand Frontend Osaka での LT資料です。

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
13. ίϚϯυͨͨ͘
14. create-react-app <σΟϨΫτϦ໊>
16. ؀ڥ׬੒ʂʂʂ
17. ReactΞϓϦΛ্ཱͪ͛Δ
18. npm start
20. ্ཱ͕ͪͬͨ
21. ެ։ϑΝΠϧͷ ग़ྗ΋؆୯
22. npm run build
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. ͝੩ௌ͍͖ͨͩɺ ͋Γ͕ͱ͏͍͟͝·͢ɻ