初めての create-react-app へ

Transcript

1. asukachikaru ॳΊͯͷ୤ create-react-app ΁
2. About me • @asukachikaru • ୆࿷ग़਎ • झຯɿϒϩάͱϙʔτϑΥϦΦαΠτͷॻ͖௚͠
 ɹɹɹesports
 ɹɹɹήʔϜ
3. ͖͔͚ͬ React ͸ਓؾ React ײ૝ 8% 12% 8% 72% ܦݧ͋Γɺڵຯ͋Γ ܦݧ͋Γɺڵຯͳ͠ ܦݧͳ͠ɺڵຯ͋Γ ܦݧͳ͠ɺڵຯͳ͠ Ref: state of js 2019 https://2019.stateofjs.com/front-end-frameworks/ Front-end framework ຬ଍౓ 0% 22.5% 45% 67.5% 90% 38% 78% 87% 88% 89% React Svelte Vue Preact Angular
4. ͖͔͚ͬ React ·Ͱͷಓ͕௕͔ͬͨ
5. ͖͔͚ͬ ΞυόΠεΛ΋Βͬͨ • ʮॳ৺ऀͩͬͨΒ create-react-app Ͱ͍͍͡Όͳ͍ʯ • ͦΕ͔Β޾ͤʹ฻Β͠·ͨ͠ͱ͞ɻΊͰͨ͠ΊͰͨ͠ • create-react-app ͷίϯϑΥʔτκʔϯ͔Βग़ͨ͘ͳͬͨ·Ͱ
6. npm run eject • TL;DR: ͓͢͢Ί͠ͳ͍ (લఏ͋Γ) • create-react-app default script • ύοΫ͞Ε͍ͯΔ babel, webpack, env ͳͲͷઃఆΛղ์ • ෆՄٯత
7. npm run eject
8. npm run eject • npm script ίϚϯυͰ͸ͳ͘ script ϑΝΠϧͰ start ΍ build Λ࣮ߦ • ·ͩ create-react-app ͷείʔϓ͔Β཭Ε͍ͯͳ͍ • ΑΓϓϩδΣΫτΛίϯτϩʔϧ͍ͨ͠ਓʹର͓ͯ͢͢͠Ί͠ͳ͍
9. Do it from scratch • ࣗ෼Ͱ react Λ build ͢Δ؀ڥΛઃఆ • TL;DR: ͓͢͢Ί
10. Do it from scratch Architecture
11. Do it from scratch Dependencies • react • react-dom • webpack • webpack-cli • @babel/core • @babel/preset-react • babel-loader
12. Do it from scratch HTML template node_mobules public index.html favicon.ico … src components/ utils/ … App.jsx index.js package.json webpack.config.js .babelrc … <!DOCTYPE HTML> <html> <head> <title>Not built by create-react-app</title> … </head> <body> </body> </html> <div id="app-root"></div> <script src=“react.bundle.js"></script>
13. Do it from scratch Basic React App node_mobules public index.html favicon.ico … src components/ utils/ … App.jsx index.js package.json webpack.config.js .babelrc … import React from "react"; const App = () => { return ( <div> Hello, world! </div>; }; export default App; const time = new Date().toLocaleTimeString(); <br /> {time}
14. Do it from scratch React entry node_mobules public index.html favicon.ico … src components/ utils/ … App.jsx index.js package.json webpack.config.js .babelrc … import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render( <App />, document.getElementById("app-root") );
15. Do it from scratch webpack config node_mobules public index.html favicon.ico … src components/ utils/ … App.jsx index.js package.json webpack.config.js .babelrc … const path = require("path"); const webpackConfig = { mode: "development", entry: "./src/index.js", output: { path: path.resolve(__dirname, "build"), filename: "react.bundle.js", }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: "babel-loader", }, ], }, ..
16. Do it from scratch webpack config node_mobules public index.html favicon.ico … src components/ utils/ … App.jsx index.js package.json webpack.config.js .babelrc … .. resolve: { extensions: [".js", ".jsx", ".json"], }, devServer: { contentBase: path.resolve(__dirname, “public"), port: 3000, }, }; module.exports = webpackConfig;
17. Do it from scratch Babel config node_mobules public index.html favicon.ico … src components/ utils/ … App.jsx index.js package.json webpack.config.js .babelrc … { "presets": ["@babel/preset-react"] }
18. Do it from scratch npm script commands build static react.bundle.js index.html node_mobules public index.html favicon.ico … src components/ utils/ … App.jsx index.js package.json webpack.config.js .babelrc … npm start: webpack —-mode development serve npm build: webpack —-mode production —-config webpack.config.js \ && cp ./public/* ./build
19. End This is just the beginning.
20. This is just the beginning • CSS Loader / CSS-in-JS • Env variables • Optimizer • SSR • TypeScript • ….
21. End.