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?

回答1:

Preqrequisites:

Node.js (npm) installed on your computer

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-dev ...
- react
- react-dom
- 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 * 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"]
}

来源：https://stackoverflow.com/questions/55166789/how-to-manually-configure-a-minimal-setup-for-react-without-create-react-app

标签

node.js

reactjs

npm

create-react-app

react-scripts