如何在没有创建-反应-应用程序的情况下手动配置反应的最小设置？

本文介绍了如何在没有创建-反应-应用程序的情况下手动配置反应的最小设置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

注意：我知道我可能只包括所有at runtime as JS(这是有详细记录的)，但我不想要这样，因为我仍然需要一个可用于生产的版本！

我不想不想：

进行任何小写(see related question here)
进行任何连接(或者，如果这样做更容易，我可以将所有的JS连接在一个文件中)
任何比我编写的JS更旧的浏览器支持(因此不会进行转换)
任何开发服务器(我可以手动重新加载。😉)
任何实时重载或高级开发功能

我确实想：

使用Reaction组件
(可选)包括JSX(I know it's possible to use React without it，但假设这是我希望从Reaction获得的最小优势。但是，请务必告诉我，设置/配置需要包括哪些额外的步骤，因此这个答案适用于那些想要JSX的人和不想要JSX的人。)

基本上，我只是想使用Reaction。没有周围所有花哨的东西！*

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

注意：对于那些想知道我为什么想要这个的人来说，推理如下。

*事实上，忽略这些方便的开发功能等听起来太疯狂了。但我认为这是有合法理由/用例的。我的是，例如，所有这些对我来说都是不可用的/破坏了一些东西，如I am trying to build a browser extension with React。

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

必备条件：

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

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

初始化文件夹

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...

反应
反应域
webpack
webpack
@babel/core
巴别塔装载机
@Babel/Preset-Reaction

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
您的工作完成了！你现在可以添加任何你想要的方便的附加组件，而不会有任何不必要的膨胀。我推荐打字稿。
如果读者需要支持较旧的浏览器，只需执行以下两个步骤：
npm install @babel/preset-env
编辑.babelrc并将@babel/preset-env添加到您的预设中：
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

这篇关于如何在没有创建-反应-应用程序的情况下手动配置反应的最小设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

babel