先决条件：
- 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 ...
- react
- 反应-dom
- webpack
- webpack-cli
- @babel/核心
- 巴别塔装载机
- @babel/预设反应
npm install --save react react-dom
npm install --save-dev webpack webpack-cli @babel/core babel-loader @babel/preset-react
- Create
.babelrc
{
"presets": ["@babel/preset-react"]
}
- 创建 webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
- Edit
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>
);
}
}
- 将你的 ReactDOM 渲染器写入
src/index.js（注意 .js，而不是 jsx - 否则，如果没有更多配置，webpack 将找不到该文件）：
import ReactDOM from "react-dom";
import { App } from "./components/app.jsx";
ReactDOM.render(
<App />,
document.getElementById("root")
);
- Build:
npm run build
- 打开你的
path/to/my/folder/index.html在现代浏览器中
你就完成了！您现在可以添加任何您想要的方便的附加组件，而不会出现任何不良的膨胀。我建议打字稿.
对于任何需要阅读的人支持旧版浏览器，只需执行以下两个步骤：
npm install @babel/preset-env- Edit
.babelrc并将 @babel/preset-env 添加到您的预设中：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
