Предисловие

Поскольку я раньше изучал среду React, но не использовал ее в работе, недавно я начал использовать популярные технологии, такие как Vite, TypeScript, React Router, Redux, Axios, Ant Design и SpringBoot, для создания проекта блога для консолидации результатов моего обучения. . Этот проект включает в себя общие функции, такие как список статей блога, сведения о статьях, классификация тегов и функции поиска. В рамках этого проекта я расскажу, как использовать Vite, TypeScript, React Router и Ant Design для создания проекта блога, а также продолжу рассказывать о проблемах, с которыми я столкнулся, и о том, как их решить. Я надеюсь, что мой практический опыт поможет вам лучше понять экосистему React и более эффективно разрабатывать приложения React.

В современной веб-разработке,ReactСтал одним из самых популярных интерфейсных фреймворков.。Его компонентная конструкцияимощный виртуальныйDOMПозволяет разработчикам легко создавать сложныеUIинтерфейс。И вReactв экосистеме,Существует много мощных инструментови Библиотека,Это может помочь нам более эффективно разрабатывать приложения React. В этом блоге,Мы покажем вам, как использовать,vite、TypeScript、React Роутер и Ант Инструменты проектирования и библиотеки для создания проекта React.

Текстовый контент

1. Что такое Вите?

ViteэтоEvan Новый инструмент для создания внешнего интерфейса, разработанный You (основателем Vue.js). В отличие от традиционных инструментов сборки, таких как Webpack и Rollup, Vite использует современную систему модулей ES для повышения эффективности разработки. Он обеспечивает быструю разработку и горячее обновление, а также поддерживает TypeScript, препроцессоры CSS и другие современные интерфейсные инструменты.

2. Что такое TypeScript?

TypeScriptЭто проверка статического типа, разработанная Microsoft.JavaScriptсуперсет。Это помогает нам обнаруживать ошибки типа при написании кода.,и обеспечить лучшееIDEподдерживатьи Советы по коду。существоватьReactв экосистеме,TypeScript стал очень популярным выбором,Потому что это помогает нам лучше организовыватьиподдерживатьReactкод приложения。

3. Что такое React Router

React Routerэто дляReactприложениемаршрутизация Библиотека。Это помогает нам реализовывать одностраничные приложения.（SPA）функция маршрутизации,Это нормально одновременноподдерживатьдинамическая маршрутизация、Расширенные функции, такие как вложенная маршрутизация и разделение кода. Реагировать Router стал одной из самых популярных библиотек маршрутизации в экосистеме React.

4. Что такое муравьиный дизайн?

Ant Designэто Разработано АлибабаReact Библиотека компонентов пользовательского интерфейса. Он предоставляет множество современных компонентов пользовательского интерфейса, таких как кнопки, формы, всплывающие окна и визуализация данных. Муравей Стиль дизайна Design очень элегантный и лаконичный, он также может предоставлять такие функции, как многоязычная поддержка и пользовательские темы.

5. Создайте проект React.

Теперь, когда мы узнали о некоторых часто используемых инструментах и ​​библиотеках React, мы можем приступить к созданию проекта React. В этом блоге мы будем использовать Vite, TypeScript, React. Роутер и Ант Дизайн для создания проекта React.

1. Установите Вите

Сначала нам нужно установить Vite. Vite можно установить с помощью npm или пряжи:

npm install -g vite

или

yarn global add vite

2. Создайте проект React.

После установки Vite мы можем использовать Vite для создания нового проекта React. Вы можете использовать следующую команду для создания нового проекта React:

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-dom

4. Установите Ant Design

Наконец, нам нужно установить Ant Design. Ant Design можно установить с помощью следующей команды:

npm install antd

или

yarn add antd

5. Настройте React Router

Теперь, когда у нас установлен React Router, мы можем приступить к настройке маршрутизации. Создайте новую папку с именем «pages» в каталоге src. Создайте в папке страниц два новых файла с именами «Home.tsx» и «About.tsx». Эти файлы станут нашими двумя страницами.

В Home.tsx вы можете написать следующий код:

import React from 'react';

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

export default Home;

В About.tsx вы можете написать следующий код:

import React from 'react';

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

export default About;

Теперь нам нужно настроить React Router в App.tsx. Можно написать следующий код:

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;

В этом коде мы используем компонент BrowserRouter React Router для переноса всего приложения. Затем мы создали меню в шапке, которое можно использовать для переключения между разными страницами. Наконец, мы используем компоненты Switch и Route для настройки маршрутизации.

6. Используйте Ant Design

Теперь, когда у нас установлен Ant Design, мы можем начать использовать Ant Design для создания нашего пользовательского интерфейса. В App.tsx вы можете написать следующий код:

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 для создания красивого пользовательского интерфейса. Мы также использовали компонент значков Ant Design для добавления значков к пунктам меню.

7. Описание каталога проекта React

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  // Файл readme проекта

Подвести итог

В этом блоге мы покажем, как использовать Vite, TypeScript, React. Роутер и Ант Дизайн для создания проекта React.Мы узнали об этих инструментахи Библиотека Характеристикиииспользовать,и продемонстрировалнравиться Как использовать эти инструментыи Библиотекапостроить современныйReactприложение。Надеюсь, этот блог поможет вам лучше понятьReactэкосистема,И может помочь вам более эффективно разрабатывать приложения React.,Мой блог-проект также находится в постоянной разработке.,Время от времени я поделюсь некоторыми из своих подведенных итогов о React.,Увидимся в следующий раз.