☰ Dup Ver Goto 📝

Basic1

PT2/webdev/react/basics/starting-points does not exist
To
233 lines, 465 words, 3725 chars Page 'Basic1' does not exist.

Summarised from this at jsramblings

Full code on his github

mkdir react-webpack
cd react-webpack
npm init -y
mkdir public
cat >| public/index.html <<END
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React + Webpack</title>
</head>
<body>
    <h1>Hello React + Webpack!</h1>
</body>
</html>
END
npx serve public

Adding webpack

npm install webpack webpack-cli --save-dev
mkdir src
touch src/index.js
cat >| src/index.js <<END
// index.js

const helloDiv = document.createElement("div");
helloDiv.innerHTML = "Hello from Javascript!";
document.body.append(helloDiv);
END
cat > webpack.config.js <<END
// webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "build"),
  },
};
END
Add to package.json
// ...
"scripts": {
    "build": "webpack"
},
npm install html-webpack-plugin --save-dev
cat > webpack.config.js <<END
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "build"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
  ],
};
END
npm run build
npx serve build

Adding webpack dev server

npm install --save-dev webpack-dev-server
Add to webpack.config.js
{
  // ...,
  devServer: {
    static: {
      directory: path.join(__dirname, "build"),
    },
    port: 3000,
  }
}

Add to package.json

{
  // ...,
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --mode development"
  }
}

Adding babel

npm i @babel/core @babel/preset-env babel-loader --save-dev

Add to webpack.config.js

{
 // ...,
 module: {
    // exclude node_modules
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  // pass all js files through Babel
  resolve: {
    extensions: ["*", ".js"],
  }
}
cat > .babelrc <<END
// .babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}
END

Add React

npm i react react-dom --save
npm i @babel/preset-react --save-dev

Add to .babelrc

// .babelrc

{
    "presets": [
      "@babel/preset-env",
      ["@babel/preset-react", {
      "runtime": "automatic"
    }]
    ]
}

add to webpack.config.js

// webpack.config.js

{
  // ...,
  module: {
    // exclude node_modules
    rules: [
      {
        test: /\.(js|jsx)$/,         // <-- added `|jsx` here
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  // pass all js files through Babel
  resolve: {
    extensions: ["*", ".js", ".jsx"],    // <-- added `.jsx` here
  },
}

Create react component

// src/Hello.jsx

const Hello = () => <h1>Hello from React!</h1>;

export default Hello;

add to main app file

// index.js

import React from "react";
import { createRoot } from "react-dom/client";
import Hello from "./Hello";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<Hello />);

add to index.html

<!-- index.html -->
<!-- ... -->
<body>
    <div id="root"></div>
</body>
npm run start
npm run build
npx serve build