image.png
React 通过 JSX 提供灵活的组件化开发，将 HTML 与 JavaScript 逻辑结合，使开发更直观。其虚拟 DOM 和 Fiber 架构提升性能，通过高效的差异对比和异步渲染，使复杂应用更流畅。
React 拥有庞大的生态系统和社区支持，丰富的第三方库和工具（如 Redux、React Router）以及广泛的企业采用（如 Facebook、Netflix）推动其发展。Create React App 简化项目初始化，内置现代开发配置。React Developer Tools 提供强大调试功能，React Native 扩展技术栈到移动端，Hooks API 推动函数式编程，使代码更简洁和可重用。
React系列系列：
前端React系列一: React简介
前端React系列二: create-react-app简介
前端React系列三: TypeScript简介
前端React系列四：Ant Design简介
前端React系列五：React+CRA+TS+Ant Design高效开发前端
前端React系列六：ant-design-pro简介
前端React系列七：ant-design-pro架构
前端React系列八：ant-design-pro辅助开发命令
前端React系列九：Umi简介
前端React系列十：Umi环境变量
前言
进过前面几篇文章，简单的介绍了React，CRA，TS，和 Ant Design，目的是为这篇文章做铺垫，这几个库的组合使用，应该是国内头部大厂开发前端的惯用伎俩（我进不去就简单调侃一下吧）。
虽然国内暂时还是Vue占据着大部分市场，不过随着几个大佬厂的all in，相信未来，国内也会逐步向React的天下过渡，我们尽早掌握，就会比别人先行一步，笨鸟先飞嘛，先占坑总会比一动不动的要好的。
安装并创建项目
在开始之前，你可能需要安装 yarn 或者 pnpm 或者 bun。
npx create-react-app antd-demo --template typescript
# 或者
yarn create react-app antd-demo --template typescript
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
然后我们进入项目。
$ cd antd-demo
这是 antd-demo 生成的默认目录结构。
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── App.test.tsx
│ ├── index.css
│ ├── index.tsx
│ └── logo.svg
└── yarn.lock
编译并启动项目
然后, 启动项目。
$ npm run start
#或
$ yarn start
启动后，会先进行编译，编译完毕后，可以看到如下提示
Compiled successfully!
You can now view antd-demo in the browser.
Local: http://localhost:3000
On Your Network: http://172.28.144.1:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
webpack compiled successfully
No issues found.
此时按提示，在浏览器会访问 http://localhost:3000/ ，看到如下 Welcome to React 的界面就算成功了。
image.png
引入 antd
现在从 yarn 或 npm 安装并引入 antd。
npm install antd --save
# 或者
yarn add antd
等待一段时间就可完成antd引入，完成提示如下
$ yarn add antd
yarn add v1.22.22
[1/4] Resolving packages...
……
├─ rc-tree-select@5.22.1
├─ rc-upload@4.6.0
├─ rc-virtual-list@3.14.5
├─ scroll-into-view-if-needed@3.1.0
├─ string-convert@0.2.1
├─ stylis@4.3.2
└─ toggle-selection@1.0.6
Done in 17.97s.
使用第一个antd 组件
修改 src/App.tsx，引入 antd 的按钮组件。
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'antd';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<body>
<Button type="primary">使用第一个antd 组件Button</Button>
</body>
</div>
);
}
export default App;
保存后，会自动编译，并且刷新到页面
image.png
好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件
总结
本文，简单介绍如何结合React+CRA+TS+Ant Design，从零开始创建项目，并且首次使用了antd的组件Button，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档。
网友评论