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

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: (Edit 2021: use functions, not classes!)

import * as React from "react";

export class App extends React.Component {

  render() {
    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"]
}

Tags:

Node.Js

Npm

Reactjs

Create React App

React Scripts

Related