先决条件：
- Node.js (npm) 或 yarn 安装在您的计算机上或作为可执行文件
所以对于一个非常小的设置，你想要......
- 初始化文件夹
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
- react域
- 网络包
- webpack-cli
- @babel/核心
- babel-loader
- @babel/预设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>
);
}
}
- 将你的 ReactDOM 渲染器写入
src/index.js（注意 .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"]
}