What is react? What is Ant Design?

react is a JavaScript development framework launched by Facebook for building user interfaces. It is mainly used to build UIs, making it easy to create interactive UIs. Ant Design is a UI component developed by the Alibaba Ant Financial team based on React. It is mainly used for middle and back-end systems. It is built using TypeScript and provides a complete type definition file.

#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

What is react?

#React is a JavaScript library for building user interfaces. It originated as an internal project at Facebook. Because the company was not satisfied with all the JavaScript MVC frameworks on the market, it decided to write its own Set, used to set up the Instagram website. After making it, I found that this set of things is very useful, so it was open sourced in May 2013.

React is a declarative, efficient and flexible JavaScript library for building user interfaces. React allows you to combine short, independent code snippets into complex UI interfaces. These code snippets are called "components".

Because the design idea of ​​React is extremely unique, it is a revolutionary innovation, has outstanding performance, and the code logic is very simple. Therefore, more and more people are beginning to pay attention to and use it, thinking that it may be the mainstream tool for web development in the future.

React is an open source JavaScript library that provides views of data rendered into HTML. React views are typically rendered using components that contain other components specified in custom HTML tags. React provides programmers with a model in which child components cannot directly affect outer components, efficient updates to HTML documents when data changes, and clean separation between components in modern single-page applications.

React makes creating interactive UIs a breeze. Design concise views for every state in your app so React can efficiently update and render components correctly when data changes. Component logic is written in JavaScript rather than templates, so you can easily pass data around your app and keep state separate from the DOM.

Features of React

• Declarative design: React adopts a declarative paradigm, which makes it easy to describe applications.

• Efficient: React minimizes interaction with the DOM by simulating the DOM.

• Flexible: React plays well with known libraries or frameworks.

• JSX: JSX is an extension of JavaScript syntax. JSX is not required for React development, but it is recommended.

• Components: Building components through React makes it easier to reuse code and can be well applied in the development of large projects.

• One-way response data flow: React implements one-way response data flow, thereby reducing duplicate code, which is why it is simpler than traditional data binding.

Mastering React can not only help you deal with front-end application development, but its programming ideas can also be applied to back-end development of React Native native App development and server-side rendering. So whether you are engaged in front-end development or not, learning React will be of great help to improve your skills and career development.

What is Ant Design?

Ant Design is a UI component developed by the Alibaba Ant Financial team based on React. It is mainly used for the use of mid- and back-end systems.

Official website: https://ant.design/index-cn

##Features:

• Extracted from the interactive language and visual style of enterprise-level middle and back-end products.

• High quality React components out of the box.

• Built using TypeScript, providing complete type definition files.

• Full-link development and design tool system.

Get started

• Introducing Ant Desig

Ant Design Yes A design system serving enterprise-level products, the component library is its React implementation, and antd is published as an npm package for developers to install and use.

You can use npm or yarn for development. Not only can you easily debug in the development environment, you can also safely package and deploy it in the production environment, enjoying the many benefits brought by the entire ecosystem and tool chain.

$ npm install antd --save
$ yarn add antd

In umi, you can open the antd plug-in by configuring antd in the plug-in set umi-plugin-react. The antd plug-in will help you introduce antd and implement on-demand compilation.

Configure in the config.js file:

export default {
    plugins: [
        ['umi-plugin-react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ]
};

• Little test

Next, we start using antd Components, taking the tabs component as an example, address: https://ant.design/components/tabs-cn/

Effect:

Refer to the official one Example, use it, create MyTabs.js file:

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;

Effect:

At this point, we have mastered the basic use of antd components.

[Related recommendations: Redis video tutorial]

The above is the detailed content of What is react? What is Ant Design?. For more information, please follow other related articles on the PHP Chinese website!