asukachikaru ॳΊͯͷ୤ create-react-app ΁ 

About me • @asukachikaru • ୆࿷ग़਎ • झຯɿϒϩάͱϙʔτϑΥϦΦαΠτͷॻ͖௚͠
 ɹɹɹesports
 ɹɹɹήʔϜ 

͖͔͚ͬ 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 

͖͔͚ͬ React ·Ͱͷಓ͕௕͔ͬͨ 

͖͔͚ͬ ΞυόΠεΛ΋Βͬͨ • ʮॳ৺ऀͩͬͨΒ create-react-app Ͱ͍͍͡Όͳ͍ʯ • ͦΕ͔Β޾ͤʹ฻Β͠·ͨ͠ͱ͞ɻΊͰͨ͠ΊͰͨ͠ • create-react-app ͷίϯϑΥʔτκʔϯ͔Βग़ͨ͘ͳͬͨ·Ͱ 

npm run eject • TL;DR: ͓͢͢Ί͠ͳ͍ (લఏ͋Γ) • create-react-app default script • ύοΫ͞Ε͍ͯΔ babel, webpack, env ͳͲͷઃఆΛղ์ • ෆՄٯత 

npm run eject 

npm run eject • npm script ίϚϯυͰ͸ͳ͘ script ϑΝΠϧͰ start ΍ build Λ࣮ߦ • ·ͩ create-react-app ͷείʔϓ͔Β཭Ε͍ͯͳ͍ • ΑΓϓϩδΣΫτΛίϯτϩʔϧ͍ͨ͠ਓʹର͓ͯ͢͢͠Ί͠ͳ͍ 

Do it from scratch • ࣗ෼Ͱ react Λ build ͢Δ؀ڥΛઃఆ • TL;DR: ͓͢͢Ί 

Do it from scratch Architecture 

Do it from scratch Dependencies • react • react-dom • webpack • webpack-cli • @babel/core • @babel/preset-react • babel-loader 

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 … Not built by create-react-app … 

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 ( ; }; export default App; const time = new Date().toLocaleTimeString();
{time} 

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( , document.getElementById("app-root") ); 

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", }, ], }, .. 

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; 

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"] } 

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 

End This is just the beginning. 

This is just the beginning • CSS Loader / CSS-in-JS • Env variables • Optimizer • SSR • TypeScript • …. 

End.