React Study Notes

React originated in Facebook's internal project because the company was dissatisfied with all the JavaScript MVC frameworks on the market and decided to write a set of Web sites that would be used to erect Instagram. After doing it, found that this set of things very useful, in May 2013, open source

The project itself is getting bigger and larger, from the earliest UI engine to a full range of front-end Web App solutions. Derivative of the React Native project, the goal is more magnificent, want to write a Web app to write the Native app. If it can be achieved, the entire Internet industry will be subverted, because the same group of people only need to write once the UI, it can run at the same time on the server, browser and mobile phone (see "Perhaps, DOM is not the answer").

It is necessary to note that React can be run in a browser or on a server, but this tutorial only covers browsers. On the one hand is to try to keep simple, on the other hand the React syntax is consistent, server usage and browser is not very different.

First, HTML templates

The use of React Web source, the structure is roughly as follows.

<! DOCTYPE html>
　　
The above code has two places to be aware of. First, <script> the property of the last label type is text/babel . This is because React's unique JSX syntax is incompatible with JavaScript. Wherever you use the JSX, add it type="text/babel" .
Second, the above code altogether uses three libraries: react.js , react-dom.js and Browser.js , they must first load. Among them, react.js is the core library of React, react-dom.js is to provide DOM-related functions, Browser.js the role is to convert the JSX syntax to JavaScript syntax, this step is very time-consuming, in fact, the line should be placed on the server to complete.
Second, Reactdom.render ()
Reactdom.render is the most basic method of React for converting a template to an HTML language and inserting a specified DOM node.
Reactdom.render (  
　　
Third, JSX (Javascript XML syntax transform) syntax
The HTML language is written directly in the JavaScript language without any quotation marks, which is the JSX syntax. JSX is the syntax for writing XML directly in Javascript code.
var names = [' Alice ', ' Emily ', ' Kate '];  Reactdom.render (    <div style={{color: ' #f00 ', Height: ' 40px ', lineheight: ' 40px '}}>      {        Names.map ( function (name) {          return <div>hello, {name}!</div>        })      }    </div>    document.getElementById (' example ')  );
The above code embodies the basic syntax of the JSX: The HTML tag is encountered (to < begin with), the HTML rules are parsed, and the code block ( { starting with) is parsed with JavaScript rules.
JSX allows JavaScript variables to be inserted directly into the template. If the variable is an array, all the members of the array will be expanded
　
var arr = [  
The variable of the above code arr is an array, and the result JSX will add all its members to the template and run the result as follows.
Iv. components
React allows the code to be encapsulated as a component (component) and then inserted into a Web page like a normal HTML tag. The React.createclass method is used to generate a component class.
var hellomessage = React.createclass ({  render:function () {    return 
In the above code, HelloMessage a variable is a component class. When a template is inserted <HelloMessage /> , an instance that is automatically generated HelloMessage (the "component" below refers to an instance of the component Class). All component classes must have their own render methods for exporting components.
Note that the first letter of the component class must be capitalized, otherwise it will be an error, such as HelloMessage not written helloMessage . In addition, the component class can contain only one top-level label, otherwise it will be an error.
var hellomessage = React.createclass ({  render:function () {    return 
The code above will cause an error because HelloMessage the component contains two top-level tags: h1 and p .
The usage of the component is exactly the same as the native HTML tag and can be arbitrarily added to the attribute, for example <HelloMessage name="John"> , the HelloMessage component adds an name attribute with a value of John . The properties of a component can be obtained on the object of a component class this.props , such as a name property that can be this.props.name read. The results of the operation are as follows:
　　
To add component properties, there is a place to note that attributes need to be class written, className attributes need to be for written htmlFor , because class and is a for reserved word for JavaScript.
Wu, This.props.children
React Study Notes