React基础-使用Vite创建项目

Vite 是现代化的前端构建工具，以快速的启动速度和开发体验著称。与传统的构建工具相比，它提供了即时的模块热更新和搭建生产环境准备的优化打包，为现代的前端开发模式提供了强大支持。本教程将带您了解如何使用 Vite 快速开始一个新的 React 项目。

步骤 1: 使用 Vite 创建项目

vite提供了 4 种 react 模板，即 react，react-ts，react-swc，react-swc-ts

• React (JavaScript): 创建一个标准的 React 项目，使用 JavaScript 作为开发语言。适用于不需要 TypeScript 类型支持的项目或者那些首选 JavaScript 的开发团队。在这个模板中，.jsx 文件用于包含 JSX 代码。
• react-ts: 创建一个 React 项目，其中使用 TypeScript 作为开发语言。TypeScript 是 JavaScript 的一个超集，它提供了可选的静态类型检查和最新的 ECMAScript 功能。在这个模板中，.tsx 文件用于包含 JSX 代码，并且已经配置好了 TypeScript 的编译器选项。
• react-swc: SWC 是一个超快的编译器，类似于 Babel 但它是用 Rust 编写的，旨在极大提高构建和编译速度。创建一个 React 项目时，选择 SWC 版本意味着 JavaScript/TypeScript 的转译和打包将由 SWC 处理，而不是 TypeScript 原生的编译器或者 Babel。这可以为大型项目带来显著的构建性能提升。
• react-swc-ts: 集成了上面提到的 react-ts 与 react-swc

这里选择 react-swc-ts 作为创建项目的模板，需要打开命令行并执行以下命令：

npm init vite@latest learn-react-app --template react-swc-ts

# 或者如果您使用Yarn:
yarn create vite learn-react-app --template react-swc-ts

# 或者使用 PNPM:
pnpm create vite learn-react-app --template react-swc-ts

其中 learn-react-app 是我们要创建的项目名字，你可以改为你想要的项目名，这将创建一个包含 Vite 和 React 的项目模板。

步骤 2: 安装依赖

进入您新创建的项目目录，并安装项目依赖：

cd learn-react-app
npm install

# 或者如果您使用 Yarn:
yarn

# 或者使用 PNPM:
pnpm install

步骤 3: 运行开发服务器

成功安装依赖之后，您就可以启动开发服务器了。执行以下命令：

npm run dev

# 或者如果您使用 Yarn:
yarn dev

# 或者使用 PNPM:
pnpm dev

其中 dev 命令对应的 package.json 文件script部分

"scripts": {
  "dev": "vite",  <- 这里
  "build": "tsc && vite build",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
},

现在，Vite 会启动一个本地开发服务器，默认端口为 5173（如果该端口被占用，则会选择下一个可用的端口）。在浏览器中打开 http://localhost:5173，您应该可以看到您的 React 应用正在运行。