cqh963852andCopilot
54990b3dfc
- 文档移至 alin.hu/ 根目录（visit、vite、vite_vanilla_ts、react_ts、react_todo_list） - 图片按板块前缀重命名（html-console.png、vanilla-result.png、react-result2.png 等） - 更新图片引用、交叉链接与 sidebar_position 排序 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
95 lines
1.8 KiB
Markdown
95 lines
1.8 KiB
Markdown
---
|
|
sidebar_position: 4
|
|
---
|
|
|
|
# 使用vite创建react ts工程
|
|
React 应用程序是由组件组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。
|
|
|
|
## 项目初始化
|
|
### 1. 创建react+ts项目
|
|
按下快捷键`Ctrl + ~`,打开终端，运行以下命令
|
|
```
|
|
npm create vite@latest
|
|
```
|
|
|
|
根据提示，输入项目名字并选择react，再选择TypeScript
|
|
|
|
### 2. 打开项目
|
|
运行以下命令，进入项目
|
|
```
|
|
cd react-ts-test1
|
|
```
|
|
|
|
### 3. 安装依赖
|
|
运行以下命令，安装依赖
|
|
```
|
|
npm install
|
|
```
|
|
|
|
### 4. 运行项目
|
|
输入以下命令,运行项目
|
|
```
|
|
npm run dev
|
|
```
|
|
|
|
## 按步引入react包
|
|
|
|
除了直接用脚手架创建react工程，也可以在一个已有的vanilla工程中，按步引入react包。这个过程可以帮助理解react工程的最小组成。
|
|
|
|
### 1. 安装依赖
|
|
|
|
在vanilla工程目录下，运行以下命令
|
|
|
|
```
|
|
npm install react react-dom
|
|
npm install -D @types/react @types/react-dom @vitejs/plugin-react
|
|
```
|
|
|
|
### 2. 配置vite
|
|
|
|
修改`vite.config.ts`，添加react插件
|
|
|
|
```ts
|
|
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
})
|
|
```
|
|
|
|
### 3. 修改入口文件
|
|
|
|
把`index.html`中的入口指向react组件文件
|
|
|
|
```html
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
```
|
|
|
|
编写`src/main.tsx`
|
|
|
|
```tsx
|
|
import React from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
|
|
function App() {
|
|
return <h1>Hello React</h1>
|
|
}
|
|
|
|
createRoot(document.getElementById('app')!).render(<App />)
|
|
```
|
|
|
|
同时在`index.html`的`body`中添加挂载点
|
|
|
|
```html
|
|
<div id="app"></div>
|
|
```
|
|
|
|
### 4. 运行项目
|
|
|
|
```
|
|
npm run dev
|
|
```
|
|
|
|
看到页面输出`Hello React`，说明react已经成功引入。
|