三、手动创建React项目
小于 1 分钟约 232 字
（一）public 目录
1. index.html
public/index.html是首页的模板webpack在编译文件时，会以该文件为模板生成index.html
<!DOCTYPE html>
<html lang="en">
<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项目</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
（二）src 目录
1. index.js
- 该文件是
JS的入口文件
// 引入ReactDOM
import ReactDOM from "react-dom/client";
// 创建一个JSX
const App = (
<div>
<h1>这是一个React项目</h1>
<p>我终于有了第一个React项目！</p>
</div>
);
// 获取根容器
const root = ReactDOM.createRoot(document.getElementById("root"));
// 将App渲染进根容器
root.render(App);
（三）package.json文件
{
"name": "03_ReactProject",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1"
},
"browserslist": {
"production": [">0.2%", "not dead", "not op_mini all"],
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
}
}