React实践：使用Vite+TS+Antd构建React项目

发布于：2024-10-24 编辑：匿名来源：网络

前言由于之前学习过React框架，但由于工作中没有使用过，所以最近开始使用Vite、TypeScript、React Router、Redux，使用axios、Ant Design、SpringBoot等流行技术搭建了一个博客项目来巩固我的学习成果。本项目包括博客文章列表、文章详情、标签分类、搜索功能等常用功能。

通过这个项目，我将分享如何使用Vite、TypeScript、React Router和Ant Design构建博客项目，并继续分享我遇到的问题以及如何解决。希望我的实践经验能够帮助您更好地了解React生态系统，帮助您更高效地开发React应用。

在现代Web开发中，React已经成为最流行的前端框架之一。其组件化设计和强大的虚拟DOM让开发者可以轻松构建复杂的UI界面。

在React生态系统中，有许多强大的工具和库可以帮助我们更高效地开发React应用程序。在这篇博客中，我们将介绍如何使用 vite、TypeScript、React Router 和 Ant Design 工具和库来创建 React 项目。

文字内容 1.什么是Vite？ Vite 是由 Evan You（Vue.js 创始人）开发的一款新型前端构建工具。与Webpack、Rollup等传统构建工具不同，Vite采用现代ES模块体系来提高开发效率。

它支持快速开发和热更新，同时还支持 TypeScript、CSS 预处理器和其他现代前端工具。 2.什么是TypeScript？ TypeScript 是 Microsoft 开发的 JavaScript 的静态类型检查超集。

它可以帮助我们在编写代码时捕获类型错误，并提供更好的IDE支持和代码提示。 TypeScript 已经成为 React 生态系统中非常流行的选择，因为它可以帮助我们更好地组织和维护 React 应用程序的代码。

3.React路由器是什么？ React Router 是 React 应用程序的路由库。它可以帮助我们实现单页面应用程序（SPA）的路由功能，还可以支持动态路由、嵌套路由、代码分割等高级功能。

React Router 已成为 React 生态系统中最流行的路由库之一。 4.什么是Ant Design？ Ant Design 是阿里巴巴开发的 React UI 组件库。

它提供了许多现代的 UI 组件，例如按钮、表单、弹出框和数据可视化。 Ant Design 的设计风格非常优雅简洁，还可以提供多语言支持、自定义主题等功能。

5.创建React项目现在我们已经了解了一些常用的React工具和库，我们可以开始创建React项目了。在本博客中，我们将使用 Vite、TypeScript、React Router 和 Ant Design 创建一个 React 项目。

1.安装Vite 首先，我们需要安装Vite。您可以使用npm或yarn来安装Vite：代码语言：bash copy npm install -g vite或代码语言：bash copy yarn global add vite2。

创建React项目安装完Vite后，我们可以使用Vite创建一个新的React项目。你可以使用以下命令来创建一个新的React项目：代码语言：bash copy vite create my-react-app --template react-ts 该命令将创建一个基于React和TypeScript的项目，并且有一些常用的预置安装了 React 库和工具。

3.安装React Router 接下来，我们需要安装React Router。 React Router 可以使用以下命令安装： npm install react-router-dom @types/react-router-dom 或 yarn add react-router-dom @types/react-router-dom4 。

安装Ant Design 最后，我们需要安装Ant Design。 Ant Design 可以使用以下命令安装：代码语言：bash copy npm install antd 或代码语言：bash copy yarn add antd5。

配置React Router 现在我们已经安装了React Router，我们可以开始配置路由了。在 src 目录中创建一个名为“pages”的新文件夹。

在页面文件夹中创建两个新文件，名为“Home.tsx”和“About.tsx”。这些文件将成为我们的两个页面。

在 Home.tsx 中，可以编写如下代码：代码语言： ts copy import React from 'react'; const Home : React.FC= () => { return (

欢迎来到首页！

);};export default Home;在About.tsx中，可以这样写代码如下：代码语言： ts copy import React from 'react'; const About : React.FC= () => { return (

欢迎来到 About 页面！

);};export default About;现在，我们需要配置 React Router在 App.tsx 中。可以编写以下代码：代码语言：ts 复制 import React from 'react';import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';import { Layout, Menu } from 'antd';import Home from './pages/Home';import About from './pages/About';const { 标题, 内容 } = 布局;const App : React.FC= () => { return ( <标题> <菜单主题=“暗”模式=“水平”defaultSelectedKeys = {['1']}> <链接到=“/”>主页 <链接到="/about">关于 <内容样式={{ 填充： '0 50px' }}>

<路线确切路径="/"> <路线路径="/about"> <关于/>

);};export default App;在这段代码中，我们使用React Router的BrowserRouter组件来包装整个应用程序，然后，我们在Header中创建一个可以使用Switch的菜单。

最后，我们使用 Switch 和 Route 组件来配置路由。 6. 使用 Ant Design 现在我们已经安装了 Ant Design，我们可以开始使用 Ant Design 来构建我们的 UI 界面。

在App.tsx中，可以编写以下代码：代码语言：ts复制import React from 'react';import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';import { Layout, Menu } from 'antd';导入 { HomeOutlined, InfoCircleOutlined } from '@ant-design/icons';导入主页 from './pages/Home';导入关于'./pages/About';const { 标题, 内容 } = Layout;const App: React.FC = () => { return (

}> <链接到="/">首页 }> <链接到="/about">关于

<路线精确路径=“/”> <首页/> <路线路径=“/about”> <关于/> );};导出默认App;在这段代码中，我们使用Ant Design的Layout和Menu组件来创建一个漂亮的UI界面。我们还使用 Ant Design 的图标组件向菜单项添加图标。

7.React项目目录描述代码语言：ts copy my-app├── public // 存放公共文件，如`index.html`、`favicon.ico`和`manifest.json`│ ├── index.html │ ├── favicon.ico│ └── manifest.json├── src // 存放项目源代码 │ ├── Components // 存放UI组件，如Header、Footer等│ │ ├── Header │ │ │ ├ ──index.js│ │ │ └── style.css│ │ └── Footer│ │ ├──index.js│ │ └── style.css│ ├──containers // 存放容器组件，如Home以及关于│ │ ├── 首页│ │ │ ├── index.js │ │ │ └── style.css │ └── 关于│ │ ├── index.js │ └── style.css ├ ── router // 存放路由配置，如index.js│ │ └── index.js│ ├── utils // 存放工具函数和常量，如api.js、constants.js│ │ ├── api .js│ │ ├──constants.js│ ├── App.js // React 应用的主要组件 │ ├── App.css // React 应用的全局样式 │ ├── index.js // React 应用的入口文件React application │ └─ ─ index.css // 全局样式文件 ├── .gitignore // 存放被 Git 忽略的文件和目录 ├── package.json // 存放项目的元数据和依赖信息 └── README.md // 项目自述文件摘要在这篇博客中，我们介绍了如何使用 Vite、TypeScript、React Router 和 Ant Design 创建一个 React 项目我们了解了这些工具和库的特性和用途，并演示了如何使用这些工具和库构建现代 React 应用程序。希望这篇博客可以帮助您更好地了解React生态系统，帮助您更高效地开发React应用程序。

我的博客项目也在不断的开发中。我会时不时分享一些我对React的总结。

下次见。

站长声明

标签：

上一篇：推荐系统顶级俱乐部RecSys2020大奖出炉了！腾讯荣获最佳长论文奖

下一篇：曝光去重设计与实践

为什么大量制药和器械公司整合+、++、+++……轮次？

由于产品研发周期长、投资金额大，几乎所有医疗领域的初创企业都无法回避融资的话题。对于企业来说，最理想的状态是快速获得每一轮融资，顺利进行研发、商业化，成功上市，进入新的增长阶段，实现商业和社会价值。投资者最理想的状态是找准项目并及时投资，使被投资公司的业

06-18
新闻 -北京中汇科技完成数千万元Pre-A轮融资，专注于医疗虚拟现实技术

投资界8月23日消息，近日北京中汇虚拟现实技术研究院有限公司（以下简称“中汇”）中汇科技（简称“中汇”）宣布完成数千万元Pre-A轮融资，由金科君创投领投，科信资本跟投。本轮融资将主要用于引进高端人才、优化产品系列、拓展国内外市场。　　中汇科技于今年9月成立。是

06-18
ZAKER创始人李森和：重点布局泛生活信息

早上8点，人们在公交车、地铁上习惯性地打开手机，利用这段碎片化时间阅读新闻。手机上的新闻客户端包括聚合移动应用程序ZAKER。与腾讯、网易等新闻客户端相比，ZAKER在聚合信息的细分领域具有更大的优势。目前，ZAKER国内激活用户1.3亿，日活跃用户1万。在APP死亡率高达

06-18
阿里云与创兴动力发布《专精特新进阶宝典2.0》

去年12月12日，阿里云与创兴动力推出“百城千企专精特新企业扶持计划”（以下简称“百城千企”） “万企”专特新扶持计划）旨在为每个市0家中小企业提供专特新省级和国家级小巨人扶持服务。 2020年12月12日，值此“百城万企”专项新扶持计划一周年之际，阿里云与创兴动力再次

06-18
首次发布 -武汉飞恩微电子完成超亿元战略融资，海尔资本领投

据6月22日消息，武汉飞恩微电子有限公司（以下简称“飞恩”）近期完成超百笔战略融资万元。本轮融资由海尔资本领投，三花宏道、长石资本跟投。武汉飞恩微电子成立于2017年，专注于提供MEMS传感器和系统产品以及ODM/OEM服务。基于独特的工艺应力模型封装技术和高效的批量校

06-17
创新抗体研发公司“时健生物”完成Pre-A轮融资

据投资界8月24日消息，上海时健生物科技有限公司（以下简称“时健生物”）公告据了解，其已完成数千万元Pre-A轮融资，本轮融资由国科嘉和、德通资本、中信建设资本共同投资。实健生物是一家创新型抗体研发公司，由原嘉禾生物的首席科学家周清博士和原嘉禾生物的质量负责人（

06-18
Windows 11可以运行Android应用程序，但微软的野心远不止于此

Windows 11可以运行Android应用程序！上班钓鱼更方便！火灾警告！微软在Windows 11发布会上宣布新系统将支持Android应用程序后，社交媒体上的相关梗纷纷开始。不过，这并不是Windows第一次支持运行Android。微软早在Windows Phone时期就尝试兼容Android应用程序。虽然这个

06-21
通信企业的客户服务场景及服务质量提升

.wp-block-column h3{margin-left:0} 在当今的数字时代，通信企业的客户服务已经成为企业竞争力和用户体验的重要指标。。良好的客户服务可以提高客户满意度，增强用户忠诚度，为公司带来更多的口碑宣传。本文将探讨通信公司的客户服务场景以及如何提高服务质量。首先，通

06-18
会稽山上市盛万1号、涌金中富和绵阳基金获得退出

会稽山上市盛万一号、涌金中富、绵阳基金退出。 2019年8月25日，会稽山绍兴酒股份有限公司在上海证券交易所挂牌上市。会稽山绍兴酒业有限公司成立于2018年10月18日，会稽山绍兴酒业有限公司原名“云记酒厂”。 2007年，酒庄被人民政府接管，更名为“云记酒庄”； 2007年，云

06-18
不能说的薪资秘密

第一个秘密是，35岁的白领来找我，她需要在两份工作中做出选择。一个是年薪30万元的制片人总监，另一个是年薪10万元的营销策划师。她喜欢后者的节奏和内容，却被前者的薪水所吸引。我仔细计算了她的工作时间：前者每天加班，包括节假日，每天工作近15个小时，而后者则有8个

06-17
方源资本领投作业帮E轮7.5亿美元融资

方源资本领投作业帮7.5亿美元E轮融资。北京，2020年6月29日——中国用户规模最大的在线教育平台作业帮今日宣布完成7.5亿美元E轮融资。本轮融资由方源资本、老虎环球领投，卡塔尔投资局、红杉资本、软银愿景基金、天图投资、祥禾资本等新老股东跟投。作为主要投资者，方源资

06-18
Meta 计划加入 NFT 市场，更名后的 Facebook 越来越元宇宙

1 月 21 日消息，Facebook 母公司 Meta 计划允许客户创建和推广 NFT（不可替代代币）。据了解，Facebook 和 Instagram 团队正在开发一项功能，允许客户在其账户个人资料上显示他们的 NFT。此外，团队正在开发一个原型，旨在帮助客户创建可收藏的代币。另外，Meta 计划推出

06-18