从0开始学习React-3-开始使用pnpm管理react项目

打工人阿景

2024-03-09 459 阅读1分钟

项目初始化

项目结构

public
- index.html
src
- index.js
package.json

使用pnpm进行package.json初始化

在终端输入pnpm init
输入命令安装
- pnpm install react react-dom react-scripts
安装完成后，修改package.json中scripts字段
- "start": "react-scripts start" 进行开发环境启动
- "build": "react-scripts build" 进行生产环境打包
react-scripts内置了webpack相关配置，让我们可以傻瓜式快速的搭建起React项目，但是要记住，这个并不是我们开发项目的最优解，在实际项目中，我们应该使用create-react-app或者vite来进行项目的搭建。

代码编写

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

src/index.js

import React from "react";
import ReactDOM from "react-dom/client"; // React18需要这样引入，否则会报警告

// 创建一个React元素，使用JSX语法
const div = <div>
    我是一个div1
</div>

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(div)

启动项目

在终端输入npm run start

页面展示