# vite-react-demo

**Repository Path**: kayanchan/vite-react-demo

## Basic Information

- **Project Name**: vite-react-demo
- **Description**: vite使用 + react19 新特性体验
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-09
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, React, React19

## README

# Vite-React-Demo

## Vite的使用

- [x] 安装运行
- [x] 浏览器兼容 - 添加兼容插件 `@vitejs/plugin-legacy`
- [x] 引入静态资源
- [x] 动态导入 `new URL(url, import.meta.url)` `import.meta.glob`
- [x] 代码分割策略
- [x] 多页面应用

## React 19 的新特性

- [x] `<Activity mode="visible"></Activity>` 条件渲染方案
- [x] `useEffect` && `useEffectEvent` 将事件处理逻辑从useEffect副作用中分离
- [x] `useActionState` 基于表单操作的结果来更新组件的状态
- [x] `useOptimistic` 乐观更新，允许在异步操作完成之前，立即更新 UI
- [x] `useTransition` && `startTransition` 在不阻塞 UI 的情况下更新状态的 React Hook
- [x] `<form action={...}></form>` 支持原生 form action
- [x] `useFormStatus` 提供当前表单提交状态信息的 React Hook
- [x] `refs` 允许 ref 作为 props 传递，替代 forwardRef
- [x] `use` 简化异步数据获取 Promise 的值 和 条件读取 Context 的值
- [x] `<meta />` 支持原生 meta标签

## Install 安装

- `node=22.12.0`
- `create-vite@8.0.1`
- `vite^7.1.7`

```bash
yarn create vite vite-react-demo --template react
```

- Use rolldown-vite(Experimental)? : Yes | `No`
    (这是 Vite 5.2+ 版本中引入的一个实验性功能。rolldown 是使用 Rust 编写的下一代 JavaScript 打包工具，由 Rollup 团队开发。rolldown-vite 是 Vite 中集成 rolldown 的实验性功能。)

- Install with yarn and start now? : `Yes` | No

## 添加浏览器兼容插件 @vitejs/plugin-legacy

```bash
# Vite v3 版本之后，terser 成为了可选依赖，需要手动安装才能使用
# @vitejs/plugin-legacy 需要 terser 来进行代码压缩
yarn add -D @vitejs/plugin-legacy terser
```

```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import legacy from "@vitejs/plugin-legacy";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ["defaults", "not IE 11"], // 兼容所有主流浏览器的最近两个版本，但明确排除 IE 11
    }),
  ],
});

```

## 静态资源

**源码**
```javascript
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg' // public目录下 用“/” 访问
```

**开发**
```
http://localhost:5173/src/assets/react.svg
http://localhost:5173/vite.svg
```

**生产**
```
http://localhost:4173/assets/react-CHdo91hT.svg
http://localhost:4173/vite.svg
```
---
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
该模板提供了一个最简化的配置，让 React 能够在 Vite 中运行，支持热模块替换（HMR）和一些 ESLint 规则。

Currently, two official plugins are available:
目前有两个官方插件可供选择：

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
    `plugin-react` 使用 `Babel` 实现快速刷新（Fast Refresh）
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
    `plugin-react-swc` 使用 `SWC` 实现快速刷新（Fast Refresh）

## React Compiler

The React Compiler is not enabled on this template. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
该模板默认没有启用 React 编译器。 如需添加，请参考 React 官方文档。

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
如果你正在开发生产环境应用程序，我们推荐：使用 TypeScript，启用类型感知的 lint 规则。