跳到主要内容

React 学习之旅 3 - 使用 Vite 创建 React 应用

概述

本文介绍为什么使用 Vite,以及如何使用 Vite 快速创建 React 应用。

Why Vite?

官方已不再推荐之前的 Create React App(CRA),参考 逐步淘汰 Create React App – React 中文文档

不推荐原因有:维护停滞、社区态度、构建速度慢、配置复杂、过时的依赖、缺乏现代功能

取而代之的是 Vite

推荐原因:极速的启动/热更新,开箱即用的 TypeScript 支持、配置简单,非常适合 SPA、需要快速开发的纯前端项目

详细可参考 为什么选 Vite | Vite 官方中文文档

使用 Vite

Vite 采用约定式设计,默认配置合理,插件丰富,支持热更新、JSX、Babel/SWC 等功能。

目前官方 React 插件有:@vitejs/plugin-react@vitejs/plugin-react-swc(推荐)

什么是 SWC? SWC(Speedy Web Compiler)是一个基于 Rust 编写的高性能 JavaScript/TypeScript 编译工具,旨在替代传统的 Babel 和 Terser,提供更快的构建速度和更低的资源占用。

对于 React:Awesome Vite 仓库也有很多社区维护的 React 模板,可按需选择使用

使用 Vite 创建 React 项目命令如下:

npm create vite@latest my-app -- --template react
# 或
npm create vite@latest my-app -- --template react-swc

提示:双横线 -- 表示将后面的参数传递给工具而不是 npm

DEMO: xiezipei/react-journey/03/my-app/

创建成功,打开如下:

资源

参考

从零开始构建 React 应用 – React 中文文档