做蜂蜜上什么网站,网站建设的ppt,wordpress 如何调整,怎么注册网站的步骤一、专栏介绍 #x1f606;#x1f606;
欢迎加入本专栏#xff01;本专栏将引领您快速上手React#xff0c;让我们一起放弃放弃的念头#xff0c;开始学习之旅吧#xff01;我们将从搭建React项目开始#xff0c;逐步深入讲解最核心的hooks#xff0c;以及React路由、…一、专栏介绍
欢迎加入本专栏本专栏将引领您快速上手React让我们一起放弃放弃的念头开始学习之旅吧我们将从搭建React项目开始逐步深入讲解最核心的hooks以及React路由、请求、组件封装以及UIAnt Design框架的使用。让我们一起掌握React开启前端开发的全新篇章
二、Ant Design
antd 是基于 Ant Design 设计体系的 React UI 组件库主要用于研发企业级中后台产品。
Ant Design是蚂蚁金服团队推出的一款企业级UI设计语言和React组件库旨在为开发者和设计师提供更优秀、更完整的设计解决方案。它能够满足现代企业复杂的设计需求以细致和完整的将用户体验融入服务里从而实现极致的交互效果和服务质量。
Ant Design主要用于中后台系统的使用它提供了丰富的组件和工具可以帮助开发人员快速构建出美观、易用的界面。同时Ant Design还提供了详细的文档和示例方便开发者学习和使用。
总的来说Ant Design是一款非常优秀的UI设计和开发工具可以帮助企业和开发者提高工作效率和质量。
三、安装依赖
npm install antd --save
四、使用
在React中使用UI组件通常比在Vue中更为直接和简便。当我们在React中安装好Ant Design UI框架后我们可以在组件内部直接引用和使用这些组件无需像在Vue中那样进行额外的注册和引入。这种简洁的组件使用方式使得开发过程更加高效减少了不必要的步骤使得开发人员能够更快地构建出用户界面。
import React from react;
import { useAppSelector } from ../../hooks/useAppSelector;
import { selectUserInfo } from ../../store/userInfo;
import { Alert, Button, Descriptions, DescriptionsProps, message } from antd;const Home: React.FC () {const userInfo useAppSelector((state) state.userInfo);const items: DescriptionsProps[items] [{key: 1,label: 姓名,children: span{userInfo.name}/span,},{key: 2,label: 年龄,children: span{userInfo.age}/span,},];return (divstyle{{width: 100%,height: 100%,}}AlertmessageSuccess Tipsdescription这里是首页Home路由/当前的用户信息是typesuccessshowIcon/Descriptions titleUser Info items{items} /Buttontype{primary}onClick{async () {message.success(成功获取用户信息);console.log(-----------------, selectUserInfo({ userInfo }).name);}}获取用户信息的name/Button/div/);
};export default Home;import React from react;
import { useAppSelector } from ../hooks/useAppSelector;
import { useAppDispatch } from ../hooks/useAppDispatch;
import { initWhole, updateAge, updateName, updateWhole } from ../store/userInfo;
import { Button, Descriptions, DescriptionsProps, Space } from antd;const ReduxDemo: React.FC () {const userInfo useAppSelector((state) state.userInfo);const dispatch useAppDispatch();const items: DescriptionsProps[items] [{key: 1,label: 姓名,children: span{userInfo.name}/span,},{key: 2,label: 年龄,children: span{userInfo.age}/span,},];return (divDescriptions items{items} /SpaceButton type{primary} onClick{() dispatch(initWhole())}初始化用户信息/ButtonButton type{primary} onClick{() dispatch(updateWhole({ name: 王五, age: 23 }))}更改用户信息/ButtonButton type{primary} onClick{() dispatch(updateName(张三))}更改名称/ButtonButton type{primary} onClick{() dispatch(updateAge(26))}更改年龄/Button/Space/div/);
};export default ReduxDemo;五、使用表单
import React from react;
import { useAppSelector } from ../hooks/useAppSelector;
import { useAppDispatch } from ../hooks/useAppDispatch;
import { updateName } from ../store/userInfo;
import { Button, Checkbox, Descriptions, DescriptionsProps, Form, Input, Space } from antd;const ReduxDemo: React.FC () {const userInfo useAppSelector((state) state.userInfo);const dispatch useAppDispatch();type FieldType {name: string;password?: string;remember?: string;};const items: DescriptionsProps[items] [{label: 用户名,children: span{userInfo.name}/span,},{label: 年龄,children: 28,},];return (Descriptionstitle当前用户信息borderedcolumn{{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}items{items}/FormFieldTypenamebasiclabelCol{{ span: 8 }}wrapperCol{{ span: 16 }}style{{ maxWidth: 600 }}initialValues{{ remember: true }}onFinish{(values) {console.log(-----------------, values);dispatch(updateName(values.name));}}onFinishFailed{(errorInfo) {console.log(-----------------, errorInfo);}}autoCompleteoffForm.ItemFieldTypelabel用户名namenamerules{[{ required: true, message: 请输入用户名! }]}Input //Form.ItemForm.ItemFieldTypelabel密码namepasswordrules{[{ required: true, message: 请输入密码! }]}Input.Password //Form.ItemForm.ItemFieldTypenameremembervaluePropNamecheckedwrapperCol{{ offset: 8, span: 16 }}Checkbox记住我/Checkbox/Form.ItemForm.Item wrapperCol{{ offset: 8, span: 16 }}SpaceButton typeprimary htmlTypesubmit提交/ButtonButton typeprimary htmlTypereset重置/Button/Space/Form.Item/Form/);
};export default ReduxDemo;六、总结
Ant Design还是是很重要的。它是一个成熟的前端框架提供了丰富的组件库包括按钮、表单、表格、图标、菜单、对话框等等可以满足各种常见的界面需求。此外它还支持国际化可以根据不同的语言和地区自动切换组件的文本和样式。 因此对于前端开发人员来说学习Ant Design是非常有必要的。它可以帮助你提高开发效率和质量打造出令用户满意的前端应用。同时Ant Design的活跃社区和丰富的案例教程也可以帮助你学习和交流。
本专栏的学习旅程已暂时告一段落接下来我们将开启全新的React进阶之旅。在这个过程中我们将深入学习使用Umi Max框架同时掌握Ant Design Pro模板的使用精髓。对于仅仅是React初学者的你也无需担忧因为接下来的专栏内容将写得深入浅出注重实践以确保每位读者都能轻松理解并掌握。期待与你共同探索React的更多精彩之处
我是Etc.End。如果文章对你有所帮助能否帮我点个免费的赞和收藏。
