4.2.3.6 简单实操：使用 Vite+React+TypeScript+AntD 快速构建一个小应用

VSCode 代码编辑器

Visual Studio Code（简称 VSCode）是由微软开发的一款现代化、轻量级的代码编辑器，支持多种编程语言（如 JavaScript、Python、C++、Java、Go 等），并通过扩展提供更广泛的语言支持。

VSCode 可以在 Windows、macOS 和 Linux 操作系统上运行，为开发者提供了一个统一的开发环境。

官网地址

Node.js 运行环境

Node.js 提供了一个独立于浏览器的运行环境 (runtime environment)，前端构建工具几乎都使用 Node.js 运行。

这里我们假设你已经按照 4.2.1.2 开发环境配置 配置了我们的开发环境。 开发环境配置

Vite 脚手架

首先找个你想创建项目的文件夹，运行下面的命令，输入项目名称，选择 React 然后是 TypeScript。

npm create vite@latest

Ant Design 组件资源

Ant Design 是阿里开源的一个组件库，国内用的人很多，而且有中文文档，因此我们选择这个。如果你特别钟爱 Material Design 风格，可以使用 MUI: Material Design。

你可以查阅 Ant Design: 组件总览 来使用他们提供的组件，用法就像普通的 React Component。

Ant Design 还提供了不少图标资源可以使用。

安装：

npm install antd

实操开始

项目简介：点击按钮次数加 1，并可以用输入框改变标题。

步骤：

1. 引入 AntD 组件：

将 import 的代码放在 App.tsx 的最上面

App.tsx

import { Button } from "antd";
import { Input } from "antd";
import { Space } from 'antd';

2. 选择自己喜欢的按钮样式：

具体例子如下，可自行前往 AntD 官网学习。

App.tsx

<Button color="primary" variant="solid">
  按钮一枚
</Button>

3. 使用 useState：

引入 count 和 setCount 并在按钮组件中使用 onClick

App.tsx

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>点击按钮次数加1</h1>
      <div className="card">
        <Button color="primary" variant="solid" onClick={() => setCount((count) => count + 1)}>
          你按了 {count} 次按钮
        </Button>
      </div>
    </>
  )
}

4. 加入输入框：

将 Input 和 Button 放入 Space 之中，这三个都是 AntD 的组件。

App.tsx

<Space.Compact style={{ width: '100%' }}>
  <Input placeholder="这是一个输入框" />
  <Button color="primary" variant="solid"> 提交 </Button>
</Space.Compact>

5. 实现改标题功能：

下面是完整的代码

App.tsx

import { useState } from 'react'
import './App.css'
import { Button } from "antd";
import { Input } from "antd";
import { Space } from 'antd';

function App() {
  const [count, setCount] = useState(0)
  const [bt, setBT] = useState("点击按钮次数加1") 
  const [newTitle, setNewTitle] = useState('');
  return (
    <>
      <h1>{bt}</h1>
      <div className="card">
        <Button color="primary" variant="solid" onClick={() => setCount((count) => count + 1)}>
          你按了 {count} 次按钮
        </Button>
      </div>

      <Space.Compact style={{ width: '100%' }}>
        <Input placeholder="改标题" onChange={(e) => setNewTitle(e.target.value)}/>
        <Button color="primary" variant="solid" onClick={() => setBT((bt) => newTitle)}>提交</Button>
      </Space.Compact>
    </>
  )
}

export default App

在终端里输入下面指令试试

npm run dev