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>
1.8 KiB
1.8 KiB
sidebar_position
| 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插件
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已经成功引入。