CODEWITHSUNDEEP
node.jsreactjsnpmcreate-react-appreact-scripts
rugk
rugk

Reputation: 5523

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:

I do want:

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?

Upvotes: 16

Views: 7299

Answers (1)

Fredrik
Fredrik

Reputation: 5108

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:

import React from 'react';

export function App() {

  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"]
}

Upvotes: 21

Related Questions