文章描述了如何一步步搭建React应用的开发环境，包括创建public和src文件夹，编写HTML和JSX，初始化package.json，安装React依赖，修改配置，打包和运行项目，以及使用LiveServer预览页面。
1.在根目录下新建文件夹 public，在该文件夹下创建 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>reactDemo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>2.在根目录下新建文件夹 src，在该文件夹下创建 js 入口文件 index.js
// js入口文件
// 引入ReactDom
import ReactDOM from "react-dom";
// 创建一个JSX
const App = <div>
<h1>react</h1>
</div>
// 获取根容器
const root = ReactDOM.createRoot(document.getElementById('root'))
// 将App渲染进根容器
root.render(App)3.打开控制面板，输入 npm init -y 进行 package.json 初始化
4.安装 react 核心包 npm i react react-dom react-scripts -S
5.修改 package.json 中的 scripts (打包运行)
6.在控制台执行 npm run build，（第一次打包会出现让你选默认配置，写y）等待打包完成后会出现文件夹 build
7.打开 build 文件夹中的 index.html 拉到最后，把 src 中的绝对路径改为相对路径（加个点）
8.右键 index.html 选 Open with Live Server 在网页中打开
9.修改 package.json 中的 scripts (测试运行) npm run start
扫一扫
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
