declarative

React makes creating interactive UIs a breeze. Design concise views for each state of your app. React effectively updates and renders components correctly when data changes. Data-driven views.

Writing your UI declaratively makes your code more reliable and easy to debug.

componentization

Create components that have their own state, and from those components make up a more complex UI.

Component logic is written in JavaScript rather than templates, so you can easily pass data around your application and keep state separate from DOM.

The life cycle

Basic usage

Github.com/ruanyf/reac…

Web ecological

React and React-dom are two libraries that are used to develop the React Web side. Why not use a library like Vue?

React’s ambitions have never been limited to the Web. In theory, nodes sorted out by the scheduler can be applied to different renderers to achieve rendering on different platforms.

State manager

React is just the UI layer, and The Flux architecture proposed by Facebook for managing application state has been the basis of a series of state management frameworks, such as Redux, Reflux, mobx and so on, in the React ecosystem.

Redux and Mobx are undoubtedly the most popular. But their application scenarios are quite different. Mobx is good for simple applications, prototyping, and small teams. Mobx has the advantage of responding to changes in state.

Redux is suitable for complex applications, large teams, and changing requirements. It has the advantage of responding to actions and events. Redux works with React as well as angular, Vue and other frameworks, but redux works best with React.

In addition, the front end team of Ant Financial built another front end framework — DVA based on Redux and React-Router. Dva is simply the integration and expansion of REDUx scheme. It breaks through the framework itself and forms a slightly complete front-end architecture, which deals with a series of problems including project construction, asynchronous processing, unified request, unified error handling and so on.

If you choose the REdux solution, it is recommended to use DVA directly.

Mobx vs. Redux: juejin.cn/post/694311…

routing

There are several routing solutions for React. The most popular one is the React-router

Tutorial: reactrouter.com/web/guides/…

The way CSS is written

  1. Use style directly in components

    import React, { Component } from “react”;

    Const div1 = {width: “300px”, margin: “30px auto”, backgroundColor: “#44014C”, // backgroundColor: “#44014C”,};

    class Test extends Component { render() { return (

    123

    <div style={{backgroundColor:”red”}}>

    ); }}

2. Traditional pre-compiled languages such as SASS /less

import React, { Component } from "react"; import "@/assets/css/index.scss"; class Test extends Component { render() { return ( <div className="link-name">123</div> ); }}Copy the code

3. Import the [name].module. SCSS file into the component

import React, { Component } from "react"; import moduleCss from "./test.module.scss"; class Test extends Component { render() { return ( <div className={moduleCss.linkName}>321321</div> ); }}Copy the code

Styled components 4. Css-in-js scheme: Styled – Components

import styled from 'styled-components'; // ' ', like (), can be used as a token to accept arguments as functions in js. This is similar to HOC, wrapping a layer of CSS over h1 to generate a new component. text-align: center; color: palevioletred; `; // While making full use of the functions of CSS, it is very convenient to implement dynamic CSS, and you can even call props! const Wrapper = styled.section` padding: 4em; background: ${props => props.bgColor}; `; const App = () => ( <Wrapper bgColor='papayawhi'> <Title>Hello World, this is my first styled component! </Title> </Wrapper> )Copy the code

UI library

Vue, Angular, react’s UI library is certainly the richest and most excellent. At present, There are many REACT UI libraries, the most famous of which is Ant Design of Ant Financial

Some tools

Immutable_mutable_js is a completely independent javascript library from Facebook, which focuses on Immutable data structures in functional programming. Using immutable_js improves performance of react applications by a large amount. _

React Devtools — react_debug tool

React – DevTools is a debugging tool from Facebook. This will help increase the efficiency of your React application development.

TypeScript is a superset of Microsoft’s open source _JavaScript_ that provides the type system and support for ES6. TypeScript is a key component of Angular’s success. Can react work? JSX just react. createElement(Component, props,… React uses all of TS’s features, unlike Vue’s template.

The project build

There are many front-end building tools, such as the most popular WebPack, Baidu’s open source FIS3, and gulp. While developing react applications, it is recommended to use the powerful WebPack to build projects. Official of the create – react – app webpack scaffold is used, combined with some rewired plug-in, such as: www.npmjs.com/package/rea…

Server-side rendering

Different from traditional Web projects that directly obtain HTML rendered by the server, single-page applications use JavaScript to generate HTML on the client to present content. Users need to wait for the completion of JS parsing to see the page, which makes the loading time of the first screen longer and affects user experience. In addition, when a search engine crawls the HTML file of a website, the HTML of a single page application has no content, thus affecting the search ranking. In order to solve these two defects, the industry draws lessons from the traditional HTML directly from the server. It proposes to execute the front-end framework (React/Vue/Angular) code on the server side to generate HTML, and then return the rendered HTML to the client side to achieve the server-side rendering of CSR front-end framework.

React is implemented using renderToString API. The most commonly used framework in the community is next.js

The react mobile terminal

React is not only dominant on the Web, but also on mobile. I have to say RN, which is _react-native_.

_react-native_ is the best mobile framework for non-native development. At the same time, it has excellent performance, support hot update and other super advantages, making _react-native_ suddenly stand at the forefront of the storm.

The MRN system of Meituan is based on React Native, which mainly realizes the separate packaging and deployment of full-link logs and projects. It is similar to the micro-front-end architecture commonly referred to as web architecture, and this architecture is currently used in Meituan APP

Vue and Angular are also successful on mobile, with Weex and Ionic + Cordova. However, its overall cost performance is still inferior to _react-native_.

The technology stack used to develop RN applications is roughly the same as that used on the Web side, which also needs to be combined with redux, React-Router, MOBx and other surrounding ecosystems.

There are also mobile UI libraries suitable for RN. Examples include ant-Design-Mobile, the mobile version of Ant Design, and the responsive Material – UI.

conclusion

This paper mainly introduces the basic concepts, usage, practices and related ecology of React, aiming to help people quickly get started and learn react. In the future, if there is an opportunity, more in-depth research will be conducted, such as scheduling process, Fiber architecture and so on