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 used to build user interfaces. It originated from Facebook's internal project. Because the company was not satisfied with all the JavaScript MVC frameworks on the market, it decided to write its own one to build 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. Using React, you can 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 that are rendered into HTML. React views are typically rendered using components that contain other components specified in custom HTML markup. 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 UI 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 application and keep state separate from the DOM.
Features
Declarative design: React adopts a declarative paradigm, which makes it easy to describe the application.
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. React development doesn't necessarily use JSX, but we recommend it.
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 React Native native App development and back-end development of server-side rendering. So whether you are engaged in front-end development or not, learning React will be of great help to skill improvement 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
characteristic:
The interactive language and visual style extracted from enterprise-level mid- and back-end products.
High-quality React components ready to use 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 is a design system that serves enterprise-level products. The component library is its React implementation. 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 antdIn 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, // Enable dva function antd: true // Enable Ant Design function}] ]};Test your skills
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 example, use it, and create the 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.