>首页> IT >

【全球热闻】什么是react?什么是Ant Design?

时间:2022-07-13 18:56:54       来源:PHP中文网

本教程操作环境: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 (                            Content of Tab Pane 1                Content of Tab Pane 2                Content of Tab Pane 3                    )    }}export default MyTabs;

效果:

到此,我们已经掌握了antd组件的基本使用。

【相关推荐:Redis视频教程】

以上就是什么是react?什么是Ant Design?的详细内容,更多请关注php中文网其它相关文章!

关键词: 用户界面 开始使用 相关文章