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

2024-01-03 23:41:09 浏览数 (2)

前言

由于我之前学过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项目。

正文内容

一、什么是Vite？

Vite是一个由Evan You（Vue.js的创始人）开发的新型前端构建工具。与传统的构建工具（如Webpack和Rollup）不同，Vite使用了现代的ES模块系统来提高开发效率。它可以实现快速的开发和热更新，同时还可以支持TypeScript、CSS预处理器和其他现代化的前端工具。

二、什么是TypeScript？

TypeScript是一种由微软开发的静态类型检查的JavaScript超集。它可以帮助我们在编写代码时捕获类型错误，并提供更好的IDE支持和代码提示。在React生态系统中，TypeScript已经成为了非常流行的选择，因为它可以帮助我们更好地组织和维护React应用程序的代码。

三、什么是React Router

React Router是一个用于React应用程序的路由库。它可以帮助我们实现单页应用程序（SPA）的路由功能，同时还可以支持动态路由、嵌套路由和代码分割等高级功能。React Router已经成为了React生态系统中最受欢迎的路由库之一。

四、什么是Ant Design

Ant Design是一个由阿里巴巴开发的React UI组件库。它提供了许多现代化的UI组件，如按钮、表单、弹出框和数据可视化等。Ant Design的设计风格非常优雅和简洁，同时还可以提供多语言支持和自定义主题等功能。

五、创建React项目

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

1. 安装Vite

首先，我们需要安装Vite。可以使用npm或yarn来安装Vite：

代码语言：bash复制
npm install -g vite

或者

代码语言：bash复制
yarn global add vite
2. 创建React项目

在安装完Vite之后，我们可以使用Vite来创建一个新的React项目。可以使用以下命令来创建一个新的React项目：

代码语言：bash复制
vite create my-react-app --template react-ts

这个命令将会创建一个基于React和TypeScript的项目，并且已经预装了一些常用的React库和工具。

3. 安装React Router

接下来，我们需要安装React Router。可以使用以下命令来安装React Router：

代码语言：bash复制
npm install react-router-dom @types/react-router-dom

或者

代码语言：bash复制
yarn add react-router-dom @types/react-router-dom
4. 安装Ant Design

最后，我们需要安装Ant Design。可以使用以下命令来安装Ant Design：

代码语言：bash复制
npm install antd

或者

代码语言：bash复制
yarn add antd
5. 配置React Router

现在，我们已经安装了React Router，可以开始配置路由了。在src目录下创建一个新的文件夹，名为“pages”。在pages文件夹中创建两个新的文件，名为“Home.tsx”和“About.tsx”。这些文件将会成为我们的两个页面。

在Home.tsx中，可以编写以下代码：

代码语言：ts复制
import React from 'react';

const Home : React.FC= () => {
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
    </div>
  );
};

export default Home;

在About.tsx中，可以编写以下代码：

代码语言：ts复制
import React from 'react';

const About : React.FC= () => {
  return (
    <div>
      <h1>Welcome to the About page!</h1>
    </div>
  );
};

export default About;

现在，我们需要在App.tsx中配置React Router。可以编写以下代码：

代码语言：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 { Header, Content } = Layout;

const App : React.FC= () => {
  return (
    <Router>
      <Layout>
        <Header>
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/about">About</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <div className="site-layout-content">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
            </Switch>
          </div>
        </Content>
      </Layout>
    </Router>
  );
};

export default App;

在这个代码中，我们使用了React Router的BrowserRouter组件来包装整个应用程序。然后，我们在Header中创建了一个菜单，可以用来切换不同的页面。最后，我们使用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';
import { HomeOutlined, InfoCircleOutlined } from '@ant-design/icons';
import Home from './pages/Home';
import About from './pages/About';

const { Header, Content } = Layout;

const App: React.FC = () => {
  return (
    <Router>
      <Layout>
        <Header>
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<HomeOutlined />}>
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<InfoCircleOutlined />}>
              <Link to="/about">About</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <div className="site-layout-content">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
            </Switch>
          </div>
        </Content>
      </Layout>
    </Router>
  );
};

export default App;

在这个代码中，我们使用了Ant Design的Layout和Menu组件来创建一个漂亮的UI界面。我们还使用了Ant Design的图标组件来为菜单项添加图标。

7.React 项目目录说明
代码语言：ts复制
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 和 About
│   │   ├── Home
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   └── About
│   │       ├── 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 应用的入口文件
│   └── index.css  // 全局样式文件
├── .gitignore  // 存放 Git 忽略的文件和目录
├── package.json  // 存放项目的元数据和依赖信息
└── README.md  // 项目的自述文件

总结

在本篇博客中，我们介绍了如何使用Vite、TypeScript、React Router和Ant Design来创建一个React项目。我们了解了这些工具和库的特点和用途，并且演示了如何使用这些工具和库来构建一个现代化的React应用程序。希望这篇博客可以帮助您更好地了解React生态系统，并且能够帮助您更加高效地开发React应用程序，我的博客项目也在持续开发中，我将不定期分享我的一些关于React的总结，我们下期再见。

react vite

0 人点赞