** This is the third day of my participation in the Gengwen Challenge. For details, see: Gengwen Challenge **

Why learn React?

Learning any language costs time and money, so is React worth learning? We should consider it from the following aspects:

  1. The use of componentized development, in line with the trend of modern Web development; Enterprise front and back end project separation, only React is the first choice;

  2. Mature technology, perfect community, complete accessories, suitable for large Web projects (sound ecosystem)

  3. Maintained by a dedicated Facebook team with reliable technical support;

  4. ReactNative – Learn once, write anywhere: Build mobile apps with React;

  5. Simple to use, very high performance, support server rendering;

  6. React uses front-end technology in a very comprehensive way, which is conducive to the overall improvement of technology level; In addition, it is conducive to job hunting, promotion and participation in projects with high potential.

First, React Quick Start

React started as an internal project at Facebook, because the company wasn’t happy with all the JavaScript MVC frameworks on the market, so they decided to write one of their own to build their own Instagram site. After making it, I found it was very easy to use and opened source in May 2013. Have become the front end of the three mainstream framework.

1.1 What is React?

React is a JavaScript library for building user interfaces. The Technology stack around React includes: React, Redux, rect-redux, React-router,…..

Reactjs.org/

React Chinese: react.docschina.org/

What are the characteristics of React?

  1. Using JSX syntax to create components and realize componentization development opens the door to functional UI programming.

  2. High performance: Efficient rendering and updating of views through DIFF algorithm and virtual DOM;

JSX –> HTML

JSX –> Native components in ios or Android (XML)

JSX –> VR/AR

JSX –> Blockchain/Internet of Things

JSX –TO–> EveryThing

React Core: Virtual DOM and Diff algorithm

1.2 Understanding the Virtual DOM?

React abstracts DOM into virtual DOM, which is actually a description of DOM using an object. By comparing the differences between the two objects, only the changed part is finally rendered again to improve the rendering efficiency.

Why virtual DOM?

When the DOM changes, the properties of the DOM object need to be traversed, but the native DOM can traverse more than 200 properties, and most of the properties are not related to rendering, resulting in too much cost to update the page.

How is the virtual DOM handled?

1) Use JS object structure to represent the structure of the DOM tree, and then use this tree to build a real DOM tree, inserted into the document.

2) Reconstruct a new object tree when the state changes. The new tree is then compared with the old tree, and the differences between the two trees are recorded.

3) The view is updated by applying the recorded differences to the real DOM tree built in Step 1.

1.3 Simple Understanding of Diff Algorithm?

Minimize page redrawing

When we use React to create a React tree in the function render(), the function render() will create a new React tree when the next state or props is updated.

React will compare the differences between the two trees and figure out how to efficiently update the UI (only updating changes), using the Diff algorithm.

First experience of React

2.1 Comprehensive introduction to JSX syntax

1) Demo1: Insert a span label into the container and set clssName and myCnotent. Two ways of implementation: a) through typical JS mode; B) JSX?

Const DOM = React. CreateElement ('span',{className:myClass},myContent); 2. Rendering virtual DOM ReactDom. Render (vDom, document getElementById (" app ")); <span ClassName = {myClass.toupperCase ()}{myContent}></span ReactDOM.render(Dom,document.getElementById('app'))Copy the code

Conclusion:

1. JSX is just high-level syntax sugar, which will be converted to native JS at the end of execution, via Babel, etc.

2. More semantic, more intuitive, more readable code;

3. Performance is better than native mode!

2) Demo2: common interface operation mode of JSX?

A. Multiple tags are nested

The core code is as follows:

<img SRC ="" Alt ="" width="200" /> <p></ div> document.getelementById ('app'))Copy the code

B. Js variables, expressions should be written inside {}

The core code is as follows:

ReactDOM.render( 
<div>
    <p>{2+5+6}</p>
</div>
document.getElementById('app'))
Copy the code

C. Inline styles are introduced through objects

The core code is as follows:

const MyStyle={ backgroundColor:'blue', color:'green', <p style={MyStyle}> </p> </div> Document.getelementById ('app')Copy the code

D. Array traversal

The core code is as follows:

Const Arr = [{name: "jay Chou, age: 38}, {name:" Andy lau, age: 48}] ReactDOM. Render (< ul > {Arr. The map ((data, the index) = > < li > {index + 1} - name: </li> </ul> document.getelementById ('app'))Copy the code

Page effect display:

1- Name: Jay Chou, age: 38

2- Name: Andy Lau, age: 48

The case is summarized as follows:

1. When adding attributes to JSX, use className instead of class. For example, use htmlFor in label.

2. When JSX creates the DOM, all nodes must have a unique root element for wrapping;

3. In JSX syntax, tags must appear in pairs. If they are single tags, they must be self closed and sum.

4. In JSX, you can directly use JS code. You can directly write JS code through {} in JSX.

5. In JSX, only expressions can be used, not statements.

6. Comment syntax in JSX: {/* with comment content */} in the middle.

3. Components/modules in React, componentization/modularization

3.1 components

An application/section/page is used to implement some local functions (including HTML, JS, CSS, etc.), and these local functions are assembled together to form a complete big function. The main purpose is to reuse code and improve project operation efficiency.

3.2 componentization

An application is a componentized application if it is developed in an integrated manner with multiple components.

3.3 module

Multiple components form a module, or a JS file that provides specific functions, which is characterized by low coupling, high portability and good execution efficiency.

3.4 modular

An application is modular if it is built entirely in the form of modules.

3.5 How to create components in React

A. The constructor creates the component

When creating a component using a constructor, if you want to receive data passed from the outside, use props in the constructor’s argument list.

You must return a valid JSX-created virtual DOM outward;

4. State in React

4.1 What is State?

React sees components as State Machines that operate State Machines through State. In development, we implement different states through interaction with the user, and then render the UI to keep the user interface consistent with the data.

In React, you simply update the component’s state and then re-render the user world based on the new state (without manipulating the DOM).

4.2 How to Use State?

Demo: Changes the interface content

Core code:

Running result:

Click on the effect: