14

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?

rugk
  • 4,755
  • 2
  • 28
  • 55
  • Right, I know links are not a good example, but this quide is actually what I followed a while ago : **https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75**. Also, it took me 2 seconds to find how to build a browser extension with react: https://medium.com/@gilfink/building-a-chrome-extension-using-react-c5bfe45aaf36 and finally, take a look at your question, split it into small problems and solve them one bit at a time. – squeekyDave Mar 14 '19 at 15:53
  • 1
    you might want to look at [htm](https://github.com/developit/htm) ..and a random blog post.. [htm-2-for-javascript](https://matwrites.com/htm-2-for-javascript/) – lecstor Mar 15 '19 at 01:46
  • 1
    Check this tutorial for React v17 setup without create-react-app: https://frontendguruji.com/blog/how-to-setup-a-react-js-project-from-scratch-without-create-react-app/ – Mandeep Pasbola Jan 02 '22 at 08:32

1 Answers1

19

Preqrequisites:

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

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

  1. Initialize a folder
  • cd path/to/my/folder
  • npm init
  1. 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>
  1. 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

  1. Create .babelrc
{
  "presets": ["@babel/preset-react"]
}
  1. Create webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
  1. Edit package.json scripts to build
"scripts": {
    "build": "webpack --mode development"
  },
  1. 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>
    );
  }
}
  1. 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")
);
  1. Build: npm run build
  2. 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:

  1. npm install @babel/preset-env
  2. Edit .babelrc and add @babel/preset-env to your presets:
{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Fredrik Schön
  • 4,888
  • 1
  • 21
  • 32
  • 1
    Thanks, you are just not really covering whether I can "save" some complexity/JS files if I do not use JSX. Or is it always included in react and thus I may not even use it without React? – rugk Mar 15 '19 at 06:40