分类 React 下的文章 - 数字国际

登录 / 注册

标签搜索

李胤

累计撰写 26 篇文章
累计收到 32 条评论

搜索到 1 篇与的结果

React教程：开始第一个程序
- 2025年12月23日
- 2 阅读
- 0 评论
- 0 点赞
2025-12-23
步骤 1: 安装构建工具第一步是安装一个构建工具，如 Vite、Parcel 或 rsbuild。这些构建工具提供了打包和运行源代码的功能，提供本地开发的开发服务器，以及部署应用到生产服务器的构建命令。{tabs}{tabs-pane label="Vite"}Vite 是一个构建工具，旨在为现代网络项目提供更快更简洁的开发体验。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}{/tabs}安装TypeScript支持 npm install --save-dev @types/react @types/react-dom 然后在 tsconfig.json 中设置以下编译器选项：必须在 lib 中包含 dom（注意：如果没有指定 lib 选项，默认情况下会包含 dom）。jsx 必须设置为一个有效的选项。对于大多数应用程序，preserve 应该足够了。如果你正在发布一个库，请查阅 jsx 文档以选择合适的值。安装React Compiler{tabs}{tabs-pane label="React"}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}{/tabs}我使用的是Vite,vite.config.ts的配置如下：集成流行的组件库：引入Ant Designnpm 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;