Reactjs Reading notes One: Deep understanding JSX

This series is a note on the React Guide to future User Interface development framework.
JSX Grammar is a highlight of react. I did not like to write templates in JS, because the JS string line is very troublesome, so we are accustomed to the template with script tags written in HTML. Later found that this is actually very pit, especially when your site is the front and back of the separation, if you change the template to find the back end of the development, very waste of time. Jsx the emergence of a more perfect solution to the problem of JS writing template. The simple thing is that JS and HTML are mixed and written together.
first, JSX basic principles
First, let's look at one of the official simplest examples

React.render (
 

 

 

And then he compiles it and it's actually like this:

 
React.render (React.createelement ("H1", {color: "Red"}, "Hello, world!"), document.getElementById (' example '));
 

 

 

The most critical part of this is that the HTML code is converted to react.createelement. This is the basic principle of jsx, he will automatically identify the HTML code, and all converted to react.createelement, so compiled is the native JS code. If you are not too troublesome, you can write your own react.createelement to create a template, so you do not need to jsx.

The way JSX distinguishes HTML code is the HTML code that is inside the front brackets and the first letter is lowercase. If the first letter is the react component, then the react component will be mentioned later.

JSX will have a detailed grammar check, if your label is not closed will be a direct error. Unlike the browser, it may be repaired automatically or just out of the way.

Because JSX is compatible with JS syntax, so in HTML if there is a JS keyword do not write, such as class to use ClassName to replace. For the htmlfor to replace

 
two, use JS in HTML template 

The use of JS in the HTML template is very convenient, you need to use curly braces to enclose the JS code.

 
var names = [' Alice ', ' Emily ', ' Kate '];

React.render (
<div>
{
names.map (function (name) {return
<div>hello, {name}!</div >
})
}
</div>,
document.getElementById (' example ')
);
 

 

 

The compiler becomes this:

 
var names = [' Alice ', ' Emily ', ' Kate ']; 
React.render ( 
  react.createelement ("div", NULL, Names.map (function (name) {return
    react.createelement ("div" , NULL, "Hello,", Name, "!") 
  }),
 document.getElementById (' example '))
;
 

 

 

Note that the curly braces are actually a variable output expression, jsx the end is directly in the curly braces as the third parameter of the react.createelement passed directly (without any changes directly to pass in), so that only one line of expression, And any writing that cannot be used directly as a third parameter is wrong,

Then you are wrong to write this:

 
React.render (
<div>
{
var a = 1;
Names.map (function (name) {return
<div>hello, {name}!</div>
})
}
</div>,
document.getElementById (' example ')
);
 

 

Because it is obvious that the contents of the curly braces are placed directly on the third parameter, the syntax is incorrect.

This is also wrong to write:
React.render (
<div>
{
var a = 1;

}
</div>,
document.getElementById (' example ')
);
 

 

 

Because React.createelement ("div", null, var a = 1;) is a grammatical error. Then you can also understand why the JS expression in curly braces cannot end with a semicolon.

Note that if you output the JS variable in the attribute, it cannot be quoted, or it will be treated as a string without being parsed. It should be like this:

<a title={title}> Links </a>

 
Three component nesting 

JSX supports nesting of components in XML syntax:

 
<Nav><Profile>click</Profile></Nav>
 

 

 

It actually generates:

 
React.createelement (Nav,
  react.createelement (profile, NULL, "click")
);
 

 

 

You can also use the JS syntax to write child nodes:

 
<nav>{login? <Profile>click</Profile>: <Login>login</Login>}</Nav>
 

 

 

 
four, extended properties spread attributes 

I'll talk about how to create the React component later:

 
var hellomessage = React.createclass ({
  render:function () {return
    
 

 

 

Where props can be considered to be a configuration interface, any HTML attribute passed in will be saved in the this.props when using the HelloMessage component. This property is not necessarily a string oh, it can be any JS variable, such as:

 
var hellomessage = React.createclass ({
  render:function () {return
    
 

 

 

Then notice that this this.props should be read-only and not be allowed to make any changes to him, such as you can't this.props.name = ' Lily '. This is not in line with the specification. Because he will cause inconsistent components and templates.

In addition, sometimes you will need to direct a normal JS object as a props to the react component, for example, you get a character from the database, then you can use the Extension property operator to do:

 
var hellomessage = React.createclass ({
render:function () {return
 

 

 

Note that the {... Lucy} has been compiled into:

 
React.__spread ({}, Lucy)
 

 

 

The principle is not very simple, is a similar $.extend operation.

 
five places to pay attention to 

There are a few points to be aware of when writing JSX.

Do not write the JS keyword in the HTML template, so class should use classname,for should use the HTMLFOR all DOM standard attributes are hump named, such as OnClick, but Data-x and aria-x are separated by dashes. The Style property receives a Key-value JS object, rather than a string. All events are consistent with the rules of the consortium. Because the react is encapsulated inside the event. Form input properties, such as value and checked, and textarea. Here are more information.

 

Reference: Http://reactjs.cn/react/docs/jsx-in-depth.html http://www.ruanyifeng.com/blog/2015/03/react.html