React little demo of getting started with comparison

2. What is JSX?
   JSX is the two-word abbreviation for JavaScript XML, XML and HTML are very similar, simply can be understood to use a variety of tags, you can self-Baidu. So jsx is writing in JavaScript that looks like XML, which is just like, in essence, not the same.
   JSX is a new feature based on ECMAScript,
   is a syntax that defines the structure of a property tree, which is our DOM structure, and attributes are attributes in the DOM node, such as the Class,id
   JSX is not XML or HTML,
   is not a limitation. In react, we can use JSX to write code, or we can use plain JavaScript to write code, so even if you don't learn jsx you can use react normally, but Facebook's official leg armor is written using JSX.
   
   
   
3. Why should we use JSX?
   Because JSX has five features
   The first: Class XML syntax is easy to accept, in the actual project, there are other people touch front-end code, such as designers, testing, and so on, many of them may not be familiar with JavaScript, but many people are familiar with XML
   
   Second: Enhance the semantics of JS, JS is mainly embodied in the interface logic, but for the interface elements of the performance, JS is relatively weak, before using JSX, most of the time we use a template, template is actually a string, you can write in the template is possible, The problem with the template is that the content of his page is separate, and the template itself is a string, which is difficult to extend, but JSX is written directly on the JS basis.
   HTML, his nature is not a string, is the JS language itself, so that he can enhance the semantic level JS
   
   Third: With a clear structure and using JSX to write code, we can tell by code what the result of the build is, just like looking at HTML code.
   
   Fourth: High degree of abstraction, the first advantage is that react shielded all the manual dom operation, the reason is able to block the DOM operation, because he provides a new layer of abstraction, as a developer we
   Only need to pay attention to this abstraction layer, and do not care about the abstraction layer below exactly how to achieve, thereby shielding out the manual Dom operation, the second advantage of abstraction is cross-platform, thus born react native. Why is it possible to cross the platform? When you use JSX to write, in fact is independent of the platform of the syntax, you design is the platform itself, react can be completely on different platforms to provide the interpreter, so that your code can be executed on different platforms, so we say that abstraction is the core of JSX.
   
   Fifth: Code modularity, in the traditional MVC development, MVC is actually separate, both conceptually, or in the actual code, they are often not put together, but in react, we found that when writing a component, his related code is all put together, jsx in the, Can not only JS logic, there can write the structure of the page, at first glance, it seems that is not appropriate, we have learned the experience is different from the experience is to help development. Is it a good choice for the react to mix them all together? In fact, the part of react is a horizontal division, the things that MVC does is vertical division, that is, hand MVC the whole project from top to bottom cut two knives, cut it into three parts, but the thing react do is to put a project from left to right, cut into a lot of parts, or he combines from top to bottom , combined from left to right, a large project to break up into a lot of small projects, so as to achieve the modularity of the code, when the strength of the code becomes very small, we can focus on a very specific function, in this case, put their code together, more conducive to understanding, and to help the organization of the code itself is, is to think about, if you put your project into dozens of hundred know the module, you have to use the MVC method on each module, divided into three or even more files, then the project itself will maintain hundreds of files, this is a very terrible thing, So when we discuss the rationality of code division, we must study the prerequisites, that is, the size of the code.
   
   
   
4. The syntax of JSX
   

   <script type= "TEXT/JSX" >       var hellomessage=react.createclass ({           render:function () {              return <div Classname= "Test" >Hello{this.props.name}</div>;           }       );       React.render (
   See this example, very simple, just implement the Render function, from the above code, we can see that jsx is actually JS, he and JS is the difference between the right to write HTML tags, which in the ordinary JS is impossible to achieve, The implementation can only be used in the form of strings to join the label, but in the JSX, it is possible to native support HTML tags.
   
   The first knowledge point: HelloMessage, the element name, we write each component is actually an element name, here we declare a hellomessage tag, in the last row, we render it into the mountnode, we can see that When rendering the syntax is the standard HTML syntax, directly in the label to fill in the tag name, but this signature is our custom.
   The second point of knowledge: is the child node This.props.name, tags and tags can have a nested relationship, as we write in HTML, each tag can be nested in other tags, he can also have a lot of tags as his child nodes, in Jsx, The difference between JSX and HTML nesting is that you can use evaluation expressions in child nodes, and we can see that the child nodes in the diagram are essentially a text node, except that the text node consists of two parts, the first part is the Hello string, followed by a space, The second part is an expression enclosed in curly braces, and what this expression does is take out the value of the Name property in the component's property, put it in this node, and hello+ the space into a complete text node, as to what is the attribute, we say later. As long as you know that each component has a property, that is, props, there are many properties and property names stored inside the property.
   
   The third point of knowledge is the node attribute, 
   
   

5. Supplement several key elements of react grammar.
   First: The first letter is case-sensitive. React is sensitive to the case of the first letter, if the first letter of a component is capitalized, then react knows that he is a custom component, and if it is lowercase, react will take it as its own element name with Dom. For example, in our code above the HelloMessage first letter is uppercase, is a custom component, the following div is lowercase, because he is a component in the DOM, if your custom component first letter is lowercase, then the words render rendering error, Because react will look for it in the DOM, it's obvious that your custom component will not exist in the DOM standard component, so there will be an error.
   
   Second: nesting. Between components and components, like DOM and DOM, can be nested, the above code we have only a layer of nesting, that is, in the div nested a text node, in fact, can be nested inside a variety of countless nodes
   
   Third: the evaluation expression. The evaluation expression is actually not related to the JSX itself, he is a feature of JS itself, JS has several grammatical elements, such as keywords, statements, expressions and so on, so what is the meaning of the evaluation expression? Is that he is an expression, he will return a value, here we need to emphasize that the evaluation expression and statement is essentially different, that is, when we write jsx, curly braces, can not use statements, such as if statements, for statements, switch statements, etc., are not possible, But the evaluation expression is okay, so how do we differentiate between evaluation expressions and statements? Multiple expressions can be used in conjunction, but statements are not possible, The this.props.name is a string expression, he will return a string, we can do some operations on him, for example, to add an ABC, string addition, to connect them together, this is possible, but if it is an if statement, you can not operate in the IF statement, the statement cannot be operation, but the expression can be, so the way to differentiate between expressions and statements is to see if he can do the arithmetic. Although we cannot directly use an if statement, we can wrap it in a function evaluation expression to use the statement inside the function evaluation expression, but the function itself is an expression, so we can use it in the JSX curly braces. This allows us to run various statements in curly braces, but in practice this is not a good situation, and if so, it is advisable to separate it and then call it in curly braces.
   
   Four: Hump name. JSX tags use the hump name, the function name is also.
   
   Five: two special attributes. HTML tags can use HTML attributes and class attributes, but we are now in the context of JS to write HTML files, HTML and class is JS reserved words and keywords, so we can not directly write him in JS, JSX to solve this problem is to use two aliases instead of them, namely htmlfor and classname, if we want to use HTML and class attributes, we actually write htmlfor and classname, when the interpreter explained, will automatically have them all correspond to the past, you can see the above code, Div is the class is written classname. Direct use will be an error.
   
   
   
6. JSX Syntax Instance---comments
   There are two ways to add comments, the first being a multiline comment, using/**/, and the second is a single-line comment, using//,
   Comments can be placed in two sections.
   The first part: the child node, which is the part of the label package, where the curly braces are used to wrap the notes. In the following code, HelloWorld is behind.
   

   <! DOCTYPE html>
   
   The second part: The attribute, that is, the label itself here
    <! DOCTYPE html>
   
   
   

7. JSX syntax Example--how to write CSS styles in jsx.
   

   <! DOCTYPE html>
   It is important to note that the assignment of other properties is generally a string, but the assignment of the style property is generally an object, because the Style property is special, and react will apply the custom attributes in the style to the style correctly.
           React.render (<div style={style}>
   
   
   

9. JSX Syntax Example: nesting
   The example in 6 shows the following code
   

           React.render (<div style={style}>
   We put our custom component HelloWorld in the Div, and in practice we can nest countless.

10. Four ways to interpret conditional interpretation
    If statement is not an expression, he is a statement, so when writing JSX code, we cannot use the IF statement directly, but we can use four kinds of expressions to achieve the same effect
    
    We implement this function, if we pass in the value of the property name, we will output the value of name, if not, we will output the world
    
    8.1 Using three-dimensional expressions
    If we directly use the IF....ELSE statement will directly error, the code is as follows.
    Click to view Code
    
    So here we use the ternary expression, the following code, can be HelloWorld, the name of the property removed later, look at the effect
    

    <! DOCTYPE html>
    8.2 Using a variable, we assign a value to the variable through the function, and finally use the value of the variable directly in curly braces.
    <! DOCTYPE html>
    
    8.3 Change the example in 8.2, directly remove the curly brace, call directly
    
     <! DOCTYPE html>
    8.4 Using the comparison calculation character
    
    <! DOCTYPE html>
    

11. All-purpose function expressions
    Normally, a function declaration is not an expression, but a statement, but we can change it to an expression in a special way, so that we can call the function directly to get the return value, because he is an expression, we can use it in curly braces, we look at the following example.
    

    <! DOCTYPE html>
    This example should pay attention to the understanding of the force evaluation operation, that is, the parentheses that enclose the function, the function in the parentheses is forced to evaluate the operation, he will return a reference to a function, and then we added a later (this), with () to call him, And pass in a this, you can achieve the effect we want.
    (function (obj) {               }) (this)
    This parenthesis also has a way of writing, is to put (this) in front of the parentheses in the back, specific to the code, it is also possible.
    <! DOCTYPE html>
    The brackets are placed outside and inside the difference, when placed inside, the parentheses after the execution of the function to get a reference, and then call him, but the parentheses on the outside, the direct is the return value, rather than the function reference itself. We recommend that you look at the usage of this.
    

React little demo of getting started with comparison