Upgrade to Pro — share decks privately, control downloads, hide ads and more …

初めての create-react-app へ

20b44456df1c0448213943e4148132bd?s=47 Asuka Wang
December 11, 2020

初めての create-react-app へ

20b44456df1c0448213943e4148132bd?s=128

Asuka Wang

December 11, 2020
Tweet

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.