First day of React

This is the 17th day of my participation in the August More text Challenge. For details, see more text Challenge

Introduce the react

The characteristics of

Efficiency: React minimizes interaction with the DOM by simulating it

Componentization: React adopts componentization development to maximize the reuse of components and facilitate development, management and maintenance

Applicable to multiple: a development, multiple applications, will subvert the entire Internet industry

github

Go to React’s Github site, React

The current version of the demo is version 16,

We’re going to do version 16 of React based on ES6 syntax

In version 16, only ES6 development is supported.

Two libraries

React divides the entire library into two libraries for multi-port adaptation

Core library: React. Js, which creates components and virtual DOM

Rendering libraries: We’ll look at the Web side, using the React-DOM, to create components or virtual DOM that can be rendered on this side.

Core library

The core library provides the createElement method to create the virtual DOM

The first parameter represents the virtual DOM name, which can also be the component class

The second parameter represents the property object

Starting with the third parameter, it represents the subvirtual DOM

This is also created using the createElement method, but the text node can be written directly

The return value is the virtual DOM

Virtual DOM

The virtual DOM is a JS object

Key indicates the ID of the virtual DOM

Props indicates a property object for the virtual DOM

Ref is used to reference the virtual DOM in JS

Type Indicates the type of the virtual DOM

Rendering library

For example, on the Web side, we use the React-DOM rendering library, which provides the render method for rendering the virtual DOM

The first parameter represents the virtual DOM

The second parameter represents the container element

The third argument is the callback function, which represents the function to execute when the render is successful.

// Import {render} from 'react'; // Import {render} from 'react'; // import * as A from 'react' // console.log(A) // create virtual DOM var h1 = createElement('h1', {title: // Render the virtual DOM to the page (h1, document.getelementById ('app'), (... args) => { console.log(args) })Copy the code

component

The virtual DOM is a simulation of the real DOM, so the development project needs to define a lot of virtual DOM. In order to reuse the virtual DOM, React provides components.

Starting with version 16, projects can only be developed using ES6 syntax

In ES5 development, the component is defined using the React. CreateClass method

In ES6 development, a Component is a class, so defining a Component is defining a class. In order for a Component class to behave like a Component, we need to make the Component class inherit from the base Component class

Extends Component {}

The purpose of using the parent component is to reuse the virtual DOM, so we can render the virtual DOM through the render method

The return value is the rendered virtual DOM tree

To render the virtual DOM to the page, we use the Render method, but the first parameter of the Render method is that the virtual DOM is not a component. So we’re going to turn the component into a virtual DOM

You can convert a component into a virtual DOM with the createElement method

Note:

Components are classes, so capitalize the first letter

The render method returns a virtual DOM tree with only one and only one root node.

Class Demo extends Component {// Render () {return createElement('ul', null, CreateElement ('li', null, 'Teach you '),)}} var demo = createElement(demo); // access the element render(demo, app) by idCopy the code

JSX grammar

The React team decided that defining the virtual DOM using the createElement method was too cumbersome. Therefore, the JSX syntax is implemented by referring to the XHTML syntax specification. To simplify defining the virtual DOM

Define div in XHTML:

Define div in JSX:

Define input in XHTML:

Define input in JSX:

In JSX syntax, defining the virtual DOM is the same as defining the real DOM, but the browser does not allow us to use the JSX syntax in JS, so we compile. (JSX syntax has been incorporated into the ES7 specification)

The JSX syntax is incorporated into the ES specification, so it can also be compiled with the Babel tool.

To compile JSX syntax, we will introduce the Babel-Presets-React plug-in

We developed the project based on THE ES6 syntax, so to compile the ES6 syntax, we will introduce the Babel-PRESET – ES2015 plug-in

So to use JSX syntax in ES6, we will introduce these two plug-ins

To distinguish between JSX syntax and JS syntax, it is recommended that we define the extension name of the file as.jsx

Sometimes, you can use JSX syntax in ES6 by adding an X to the extension name

For example:.jsx,.esx,.es6x

In react development, JSX was recommended.

JSX syntax is designed to refer to the createElement method

Compile the results

Class Demo extends Component {// render() {return (<li> </li>)}} class Demo extends Component {// render() {return (<li> </li>)}}Copy the code

The interpolation

Interpolation syntax we’ve learned:

Ejs: < % = % >

MVC: <%%>

Es6: ${}

less: @{}

scss: #{}

WeChat: {{}}

vue: {{}}

If we want to use js expressions in a non-JS environment, we can use interpolation syntax

The JSX environment is not a JS environment. In JSX syntax, we cannot use JS expressions, so to use JS expressions in JSX syntax, we need to use interpolation syntax: {}

The interpolation syntax provides a real JS environment, so YOU can use JS expressions