React18基础（手动创建react项目）_react18全家桶搭建项目

作者：小小林熬夜学编程 | 2024-02-25 05:27:57

踩

react18全家桶搭建项目

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/138984?site