项目结构
- 创建项目，目录结构如下：
根目录
- public
- index.html（<div id="root"></div>）
- src
- App.js
- index.js- 进入项目所在目录，执行命令：npm init -y 或 yarn init -y
- 安装项目依赖 npm install react react-dom react-scripts -S 或 yarn add eact react-dom react-scripts
- 运行 npx react-scripts start 启动项目（首次启动需要输入 y 确认）
- 或者将 react-scripts start 设置到 package.json 的scripts 选项中，然后通过 npm start 启动
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react项目</title>
</head>
<body>
<!-- public/index.html是首页的模板，webpack在编译文件时，会以此为模板 -->
<div id="root"></div>
</body>
</html>index.js
// index.js是webpack在编译时js的入口文件
// 引入reactDOM
import ReactDOM from 'react-dom/client' // react18
// 创建一个JSX
const App = <div>
<h1>这是一个react项目</h1>
</div>
// 创建一个根容器
const root = ReactDOM.createRoot(document.getElementById('root'))
// 渲染
root.render(App)
扫一扫
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
