React recently very hot, turned out an old article, and share with you.

Brief introduction

React is Facebook's open source, a JavaScript library for building user interfaces that has been applied to Facebook and its Instagram.

Unlike the huge angularjs, react focuses on V, the view, in the MVC architecture. This makes it easy for react to fuse with developers ' existing development stacks.

React conforms to the trend of web development components. When applying react, you should always abstract different components from the UI and assemble them like bricks:

However, react defines components in a very different way than angularjs. If the HTML is a wheel, AngularJS's instructions/directive the wheel with a Phnom Penh, and react, re-created a wheel: JSX.

One of the reasons react abandoned HTML is performance considerations: DOM operations are very slow. React introduces the concept of virtual DOM: Developers manipulate virtual dom,react to render them to the true DOM when necessary-a bit like a double buffer/double in game development, to redraw buffer frames.

Another benefit of introducing virtual DOM is that it is easy to introduce different rendering engines. For example, render your application code to the real DOM, or the headless DOM on the Nodejs server, or the Ios/android platform component-This is React Native:

Hello react!

Compared with ANGULARJS, the react is simple enough to make people shocked.

After the introduction of the React Library, the development API is exposed through the react object. What we do and can do is:

Create elements on the virtual DOM and render them to the true DOM.

The two methods of the react object are used in the sample code:

CreateElement (Type,[props],[children ...])-Creates a specified react element on the virtual DOM
The parameter type is used to specify the type of element to create, which can be a string or a react component type. When using strings, this parameter should be the standard HTML tag name, such as: P, Div, canvas, and so on.

The parameter props is an optional JSON object that specifies additional attributes of the element, such as styles, CSS classes, and so on. We simply set the null in the example.

All parameters starting from the third parameter, children, are considered to be child elements of this element. Considering that the virtual DOM is also DOM, it is easy to understand that react needs to pass these child element parameters, so that we can construct the virtual DOM tree:

 
var el = React.createElement( "ul", null,
    React.createElement("li",null,"China"),
    React.createElement("li",null,"Japan"),
    React.createElement("li",null,"Korea")
);

The above example creates a UL element with three Li elements in the virtual Dom and looks a bit tired. But think, build a wheel, always pay some price.

In the example, we simply passed in a text child element as the content of the P element.

• Render (Element,container,[callback])-renders objects on the virtual Dom to the true DOM

The parameter element is the react element we created using the createelement () method, note that it is not an HTML element!

The parameter container is the HTML element in the real DOM, and as the target container for rendering, its contents will be changed by the render () method execution.

The callback parameter is an optional function that is executed when rendering is completed or updated, usually without it.

Virtual DOM

Virtual DOM is the cornerstone of react.

The introduction of virtual DOM is a performance consideration on the one hand. Unlike Web applications and Web sites, a Web application typically has a large number of DOM operations in a single page, and these DOM operations are slow.

In react, the application operates on the virtual DOM, which gives react an opportunity to optimize. To put it simply, react the difference between the current DOM content and the content to be rendered each time it needs to render, and then decide how best to update the DOM. This process is called reconciliation.

In addition to performance considerations, the react introduction of virtual DOM is more important in providing a consistent way to develop server-side applications, Web applications, and mobile-side applications:

With a layer of virtual DOM, you can render the contents of the virtual DOM to different platforms by equipping them with different renderers. and application developers, using JavaScript, can take all the platforms.

Quite a good idea!

React components

It is also quite easy to define a component in react, which is a JavaScript class that implements a predefined interface:

React.createClass(meta)

The parameter meta is a JavaScript object that implements a predefined interface to extend the React component prototype.

In Meta, at least one render () method needs to be implemented, and this method must and can only return a valid react element.

This means that if your component is composed of more than one element, you must wrap a top-level element outside and return to the top-level element. For example, we create a layout component:

render:function(){ return React.createElement( "div",null,
        React.createElement("div",null,"header"),
        React.createElement("div",null,"content"),
        React.createElement("div",null,"footer")
    );
}

Note: The first letter of your react component name should be capitalized and you will find the difference in case.

In the example code, we implemented a liquid crystal display component Ezledcomp (in order to be more realistic, define a simple style, don't forget to look over), you should notice that the style class of the DIV element is declared with classname instead of class, because the class is a reserved word for JavaScript, and after rendering, the real Dom will also be:

<divclass="ez-led">Hello, React!</div>

After a component is defined, as with standard HTML tags, you can use the createelement () method to create elements, but at this point, the first parameter is the component class that we define, not the tag name string:

React.createElement(EzLedComp);

Here comes the wheel: JSX

React the introduction of virtual DOM, the creation of a DOM tree to write code in JavaScript makes the interface definition quite cumbersome. For example, we create two rows of liquid crystal components to write this:

 
render: function(){ return React.createElement( "div",null,
        React.createElement("div",{className:"ez-led"},"Hello, React!"),
        React.createElement("div",{className:"ez-led"},"2015-04-15")
    );
}

The corresponding declarative HTML is straightforward when rendered:

<div>
    <div class="ez-led">Hello, React!</div>
    <div class="ez-led">2015-04-15</div>
</div>

This is only a two-storey tree, if you need a big tree?

Fill a hole and need to dig another hole. So, Jsx came.

JSX is an extension of JavaScript syntax that allows us to create react elements in JavaScript code in an HTML-like manner. To put it simply, whenever you need to use createelement (), replace the function call part with the render target HTML (the reminder is not exactly the same, such as the class attribute is replaced with classname):

 
//JavaScript var e = React.createElement( "ul",null,
        React.createElement("li",null,"China"),
        React.createElement("li",null,"Japan"),
    ); //JSX = JavaScript + XML like extension var e = 

*   China
*   Japan;

To be honest, this kind of writing makes the code seem rather annoying. But it is at least efficient to create a DOM tree compared to writing large scripts. Fortunately, react does not force the use of JSX, if you are obsessive-compulsive patients, do feel uncomfortable, then, it can not be used.

Using JSX

Obviously, the addition of these XML syntax scripts can no longer be called JavaScript, the use of a slightly different.

Specify script type
The JSX script introduced in the HTML file needs to specify a type of TEXT/JSX:

//Inline script
<script type="text/jsx">...</script>
//External script
<script src="a.js" type="text/jsx"></script> 

Introducing the JSX Syntax conversion Library
Using JSX in HTML also requires the introduction of JSX Syntax Conversion Library jsxtransform.js. After the library is loaded, the JSX script is processed after the DOM tree is constructed (by listening for the domcontentloaded event):

1. Searches the script node in the DOM tree for subsequent processing if the type is TEXT/JSX
2. Read the contents of the script node and convert it into JavaScript code
3. Constructs a new script element, sets its content as the conversion result code, and appends it to the DOM tree head element
   Jsxtransform.js introduced the API interface through the global object Jsxtransformer, we can use the transform () method to simulate the process of automatic conversion of this grammar.

In the example code on the right, to avoid automatic conversion, we set the type of the script element to TEXT/JSX2, and add an ID to simplify the DOM element positioning.

Click on the button and you will see the result of the conversion. Review the code to understand the steps for automatic conversion.

More content and free matching online exercises can be seen here!

React recently very hot, turned out an old article, and share with you.