文章目录
1,初始化npm
新建文件夹react-admin,在该文件夹下打开cmd执行命令
npm init -y
2,安装webpack和webpack-cli
npm install --save-dev webpack webpack-cli
3,安装react和react-dom
npm install react react-dom
4,安装babel相关依赖和创建.babelrc文件
安装依赖
npm install --save-dev babel-loader @babel/preset-react @babel/core @babel/preset-env
创建.babelrc文件
{
presets: [
[
'@babel/preset-env',
{
modules: false
}
],
'@babel/preset-react'
]
}
5,创建项目目录并编写代码
项目目录
react-admin
dist
index.html
src
App.js
index.js
.babelrc
webpack.config.js
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react admin</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
App.js
import React from "react";
class App extends React.Component {
render() {
const { title } = this.props;
return (
<h1>hello { title }</h1>
)
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App title="react"></App>, document.getElementById("root"));
webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.(js|jsx)/,
use: "babel-loader",
exclude: /node_modules/
}
]
}
};
6,修改package.json文件
在scripts里新增一条语句
"dev": "webpack"
执行 npm run dev,之后会在dist文件夹下面自动生成一个bundle.js的文件。然后在浏览器打开dist文件夹下的index.html文件会看到页面上显示 hello react
package.json依赖
“devDependencies”: {
“@babel/core”: “^7.17.2”,
“@babel/preset-env”: “^7.16.11”,
“@babel/preset-react”: “^7.16.7”,
“babel-loader”: “^8.2.3”,
“webpack”: “^5.68.0”,
“webpack-cli”: “^4.9.2”
},
“dependencies”: {
“react”: “^17.0.2”,
“react-dom”: “^17.0.2”
}