如何在没有创建-反应-应用程序的情况下手动配置反应的最小设置？ [英] How to manually configure a minimal setup for React without create-react-app?
本文介绍了如何在没有创建-反应-应用程序的情况下手动配置反应的最小设置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不想使用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/foldernpm 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"]
}
这篇关于如何在没有创建-反应-应用程序的情况下手动配置反应的最小设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
