初めての create-react-app へ

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 … <!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>

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}

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") );

Do it from scratch webpack conﬁg 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 conﬁg 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 conﬁg 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 • ….

初めての create-react-app へ

初めての create-react-app へ

Asuka Wang

Other Decks in Programming

Featured

Transcript

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

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

͖͔͚ͬ React ͸ਓؾ React ײ૝ 8% 12% 8% 72% ܦݧ͋Γɺڵຯ͋Γ

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

͖͔͚ͬ ΞυόΠεΛ΋Βͬͨ • ʮॳ৺ऀͩͬͨΒ create-react-app Ͱ͍͍͡Όͳ͍ʯ • ͦΕ͔Β޾ͤʹ฻Β͠·ͨ͠ͱ͞ɻΊͰͨ͠ΊͰͨ͠ • create-react-app

npm run eject • TL;DR: ͓͢͢Ί͠ͳ͍ (લఏ͋Γ) • create-react-app default

npm run eject

npm run eject • npm script ίϚϯυͰ͸ͳ͘ script ϑΝΠϧͰ start

Do it from scratch • ࣗ෼Ͱ react Λ build ͢Δ؀ڥΛઃఆ

Do it from scratch Architecture

Do it from scratch Dependencies • react • react-dom •

Do it from scratch HTML template node_mobules public index.html favicon.ico

Do it from scratch Basic React App node_mobules public index.html

Do it from scratch React entry node_mobules public index.html favicon.ico

Do it from scratch webpack conﬁg node_mobules public index.html favicon.ico

Do it from scratch webpack conﬁg node_mobules public index.html favicon.ico

Do it from scratch Babel conﬁg node_mobules public index.html favicon.ico

Do it from scratch npm script commands build static react.bundle.js

End This is just the beginning.

This is just the beginning • CSS Loader / CSS-in-JS

End.