node.js reactjs npm create-react-app react-scripts

How to manually configure a minimal setup for React without create-react-app?

I do not want to use create-react-app. So how can I configure a minimal working dev environment for a simple react app?

Note: I know I could likely just include everything at runtime as JS (that is well documented), but I do not want this, as I still want a version that is usable for production!

I do not want:

to have any minification (see related question here)
to have any concatenation (or, if it is easier to do, I may have all JS e.g. concatenated in a file)
any older browser support than what I write as JS (so no transpilation that does this)
any dev server (I can reload manually.😉)
any live-reload or advanced dev features

I do want:

to use React components
(optionally) include JSX (I know it's possible to use React without it, but let's say that is the minimal advantage I want to take from React. Please do avise me, however, what additional steps for setup/config this would "cost" to include, so this answer is applicable to those who want JSX and those who do not.)

Basically, I just want to use React. Without all the fancy other stuff that comes around it!*

I am just asking this, because the official React docs do not mention that possibility.

Attention: Reasoning following for those that wonder, why I'd wanted this.

* Actually, it sounds crazy too dismiss these convenient dev features etc. But I claim there are legitimate reasons/use cases for this. My is e.g. that all of this just is not usaable for me/breaks things, as I am trying to build a browser extension with React.

Yes I saw this very similar question, but unfortunately the user there is one step ahead of me and the answers are just very specific ones to their problem. I want to know the general things first, i.e. what do I need and how to setup?

Solution

Preqrequisites:

Node.js (npm) or yarn installed on your computer or as executable file

So for a pretty minimal setup you'd want to...

Initialize a folder

cd path/to/my/folder
npm init

Create an index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="./dist/main.js"></script>
    </body>
</html>

Then you'd want to npm install --save ...

react
react-dom
webpack
webpack-cli
@babel/core
babel-loader
@babel/preset-react

npm install --save react react-dom
npm install --save-dev webpack webpack-cli @babel/core babel-loader @babel/preset-react

Create .babelrc

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

Create webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

Edit package.json scripts to build

"scripts": {
    "build": "webpack --mode development"
  },

Write your root component

Create a src/components folder and then create your src/components/app.jsx:

import React from 'react';

export function App() {

  return (
    <div>
      Hello, world!
    </div>
  );
}

Write your ReactDOM renderer in src/index.js (note .js, not jsx - webpack wont find the file otherwise, without more configurations):

import ReactDOM from "react-dom";
import { App } from "./components/app.jsx";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

Build: npm run build
Open your path/to/my/folder/index.html in a modern browser

And you're done! You can now add any convenient add-ons you wish without any undesirable bloat. I recommend TypeScript.

For anyone reading that need to support older browsers, simply follow these two steps:

npm install @babel/preset-env
Edit .babelrc and add @babel/preset-env to your presets:

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