如何在没有 create-react-app 的情况下为 React 手动配置最小设置？

Question

我不想使用 create-react-app。那么我如何为一个简单的 React 应用程序配置一个最小工作开发环境？

注意： 我知道我可能只包含所有内容 at runtime as JS（有据可查），但我不想要这个，因为我仍然想要一个版本可用于生产 !

我不想要：

进行任何缩小 ()
进行任何串联（或者，如果这样做更容易，我可以将所有 JS 例如串联在一个文件中）
任何比我写的 JS 更旧的浏览器支持（所以没有这样做的转译）
任何开发服务器（我可以手动重新加载。）
任何实时重载或高级开发功能

我想要：

使用 React 组件
（可选）包括 JSX（I know it's possible to use React without it，但假设这是我想从 React 中获得的最小优势。但是，请务必告诉我，setup/config 这将需要哪些额外步骤"cost" 包括在内，所以这个答案适用于那些想要 JSX 的人和那些不需要的人。）

基本上，我只是想使用 React。没有其他花哨的东西！*

我只是问这个，因为the official React docs没有提到这种可能性。

注意：为那些想知道为什么我想要这个的人推理。

* 实际上，忽略这些方便的开发功能等听起来很疯狂。但我声称有合法的 reasons/use 案例。我的是所有这些都不适用于 me/breaks 事物，如 .

是 I saw this very similar question，但不幸的是，那里的用户比我先一步，答案只是针对 他们的 问题的非常具体的答案。我想先了解一般情况，即 我需要什么 和 如何设置?

Answer 1

先决条件：

Node.js (npm) 或 yarn 安装在您的计算机上或作为可执行文件

因此，对于一个非常简单的设置，您需要...

初始化文件夹

cd path/to/my/folder
npm init

创建一个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>

那么你想要 npm install --save ...

反应
反应-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

创建.babelrc

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

创建webpack.config.js

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

编辑package.json 个脚本以构建

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

写下你的根组件

创建一个 src/components 文件夹，然后创建您的 src/components/app.jsx：（编辑 2021：使用函数，而不是类！）

import * as React from "react";

export class App extends React.Component {

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

在 src/index.js 中编写你的 ReactDOM 渲染器（注意 .js，而不是 jsx - webpack 不会找到文件，否则，没有更多配置）：

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

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

构建：npm run build
在现代浏览器中打开 path/to/my/folder/index.html

大功告成！您现在可以添加任何您想要的方便的附加组件，而不会出现任何不受欢迎的膨胀。我推荐 TypeScript.

对于需要支持旧版浏览器的任何阅读者，只需按照以下两个步骤操作：

npm install @babel/preset-env
编辑 .babelrc 并将 @babel/preset-env 添加到您的预设中：

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

如何在没有 create-react-app 的情况下为 React 手动配置最小设置？

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

node.js

npm

reactjs

react-scripts

create-react-app

先决条件：