cqh963852andCopilot
b487f44cd7
- 新增 practice docs 实例（路由 /practice）与 sidebarsPractice.ts - docs/full_guide 迁移至 practice/alin.hu - 导航栏新增“实践经历”入口 - 修复文档内指向旧 /docs/full_guide 路径的链接 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1.8 KiB
1.8 KiB
sidebar_position
| sidebar_position |
|---|
| 1 |
使用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插件
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
3. 修改入口文件
把index.html中的入口指向react组件文件
<script type="module" src="/src/main.tsx"></script>
编写src/main.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中添加挂载点
<div id="app"></div>
4. 运行项目
npm run dev
看到页面输出Hello React，说明react已经成功引入。