步骤 1: 安装构建工具
第一步是安装一个构建工具，如 Vite、Parcel 或 rsbuild。这些构建工具提供了打包和运行源代码的功能，提供本地开发的开发服务器，以及部署应用到生产服务器的构建命令。
npm create vite@latest my-app -- --template react-tsVite 采用约定式设计，开箱即提供合理的默认配置。它拥有丰富的插件生态系统，能够支持快速热更新、JSX、Babel/SWC 等常见功能。你可以查看 Vite 的 React 插件 或 React SWC 插件 和 React 服务器端渲染示例项目 来开始使用。
Vite 已经作为构建工具在我们 推荐的框架 之一 React Router 中使用。
{/tabs-pane}
{tabs-pane label="Parcel"}
Parcel 结合了出色的开箱即用开发体验和可扩展的架构，可以将你的项目从刚开始的阶段推向大规模的生产应用。
Parcel 支持快速刷新、JSX、TypeScript、Flow 和开箱即用的样式。请查看 Parcel 的 React 教程 以开始。
npm create vite@latest my-app -- --template react-tsParcel 支持快速刷新、JSX、TypeScript、Flow 和开箱即用的样式。请查看 Parcel 的 React 教程 以开始。
{/tabs-pane}
{tabs-pane label="Rsbuild"}
Rsbuild 是一个基于 Rspack 的构建工具，旨在为 React 应用程序提供无缝的开发体验。它配备了精心调优的默认设置和现成的性能优化。
Parcel 支持快速刷新、JSX、TypeScript、Flow 和开箱即用的样式。请查看 Parcel 的 React 教程 以开始。
npm create vite@latest my-app -- --template react-tsRsbuild 内置了对 React 特性的支持，如快速刷新、JSX、TypeScript 和样式。请查看 Rsbuild 的 React 指南 以开始使用。
{/tabs-pane}
安装TypeScript支持
npm install --save-dev @types/react @types/react-dom
然后在 tsconfig.json 中设置以下编译器选项：
必须在 lib 中包含 dom（注意：如果没有指定 lib 选项，默认情况下会包含 dom）。
jsx 必须设置为一个有效的选项。对于大多数应用程序，preserve 应该足够了。 如果你正在发布一个库，请查阅 jsx 文档 以选择合适的值。
安装React Compiler
npm install -D babel-plugin-react-compiler@latest{/tabs-pane}
{tabs-pane label="Yarn"}
yarn add -D babel-plugin-react-compiler@latest{/tabs-pane}
{tabs-pane label="pnpm"}
pnpm install -D babel-plugin-react-compiler@latest{/tabs-pane}
我使用的是Vite,vite.config.ts的配置如下：
集成流行的组件库：
引入Ant Design
npm install antd --save然后在App.tsx中填写如下代码
import React from 'react';
import { Button } from 'antd';
const App = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
评论 (0)