react是Facebook推出的一个用来构建用户界面的JavaScript开发框架,主要用于构建UI,可使创建交互式UI变得轻而易举。Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用;它它使用TypeScript构建,提供完整的类型定义文件。
本教程操作环境:Windows7系统、react18版、Dell G3电脑。
什么是react?
React是用于构建用户界面的JavaScript库, 起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。
由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
React 是一个为数据提供渲染为 HTML 视图的开源 JavaScript 库。React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件的模型,数据改变时对 HTML 文档的有效更新,和现代单页应用中组件之间干净的分离。
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。
React 特点
声明式设计:React采用声明范式,可以轻松描述应用。
高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
灵活:React可以与已知的库或框架很好地配合。
JSX:JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
组件:通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
单向响应的数据流: React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
掌握 React 不仅可以帮你应对前端应用开发,而且它的编程思想还可以应用到 React Native 原生 App 开发和服务器端渲染的后端开发。所以不论你是否从事前端开发工作,学习 React 对技能提升和职业发展都有很大的帮助。
什么是Ant Design?
Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用。
官网:https://ant.design/index-cn
特性:
提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 React 组件。
使用 TypeScript 构建,提供完整的类型定义文件。
全链路开发和设计工具体系。
开始使用
引入Ant Desig
Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用。
可使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。
$ npm install antd --save $ yarn add antd
在 umi 中,你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件,antd 插件会帮你引入 antd 并实现按需编译。
在config.js文件中进行配置:
export default { plugins: [ ['umi-plugin-react', { dva: true, // 开启dva功能 antd: true // 开启Ant Design功能 }] ] };
小试牛刀
接下来,我们开始使用antd的组件,以tabs组件为例,地址:https://ant.design/components/tabs-cn/
效果:
参考官方给出的示例,进行使用,创建MyTabs.js文件:
import React from 'react' import {Tabs} from 'antd' const TabPane = Tabs.TabPane; const callback = (key) => { console.log(key); } class MyTabs extends React.Component { render() { return ( <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane> <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane> <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane> </Tabs> ) } } export default MyTabs;
效果:
到此,我们已经掌握了antd组件的基本使用。
【相关推荐:Redis视频教程】
以上就是什么是react?什么是Ant Design?的详细内容,更多请关注php中文网其它相关文章!
已抢17479个
抢已抢50273个
抢已抢121385个
抢已抢184682个
抢已抢66446个
抢已抢351008个
抢