The JSX Grammar of react

1. Introduction of JSX

?? JSX (JavaScript XML)--a class XML syntax for building tags inside a react component. React works just as well without using JSX, but using JSX can improve the readability of the component, so JSX is recommended.

1. A new feature based on ECMAScript
2. A syntax for defining a tree structure with attributes

?? Features of the JSX:

?? It has the following benefits:

1. More familiar with
2. More semantic
3. More intuitive
4. Abstraction of
5. Focus on the separation point

Use of 2.JSX

1. React is case sensitive, if it is a custom component, it must be capitalized, if it is the DOM comes with a label, then lowercase (such as div p span, etc.), otherwise it may be wrong, this is also a specification.
2. Nesting
3. An evaluation expression. (You can use expressions, such as ' > ', ' < ', trinocular expressions, etc., but the function cannot be used, such as If......else)
4. Hump naming
5. Htmlfor ClassName

To use CSS styles for components:

The JSX syntax only supports evaluation expressions and does not support functions, here are four ways to judge the condition:

1. Trinocular operator
   

2. Use a variable and reference it in a property
   

3. Calling functions directly, translating logic into functions
   

4. Comparison Operators (| | &&)
   

?? There is also a universal function expression:
??

3. Non-dom properties

Three non-dom attributes were introduced in JSX: dangerouslysetinnerhtml, ref, key

1.dangerouslySetInnerHTML

function createMarkup() { return {__html: ‘First &middot; Second‘}; };<div dangerouslySetInnerHTML={createMarkup()} />

Insert the HTML code directly into the JSX.
may be increased by cross-site attack (XSS)

Case:
If this is the case:

<DivId="Demo" ></Div><ScriptType= "Text/babel" > var Test = React.createclass ({getinitialstate: function () {return {html:  I want it to show <br/> I want it to wrap. <br/> '}; }, Render: function () {return (<div>{ This.state.html}</div>);}); Reactdom.render (<test/>, document.getElementById (' demo ')) ; </SCRIPT>         

The browser will display:

?? As we can see, react does not help us to <br> parse the label into HTML, but instead treats it directly as a string, which is for security reasons and avoids XSS attacks.
?? And if we have ensured that the statement is safe and want to implement the <br> label, then we need dangerouslySetInnerHTML :

<div id="Demo1" ></div> <script type="Text/babel" >  var rawhtml={__html:"I want it to be displayed <br/> I want it to be wrapped in a line showing <br/>"}; Reactdom.render ( <div dangerouslysetinnerhtml={rawhtml}></div> document.getElementById (' demo1 ')); </script>                 

The browser will display:

?? As we can see, this is already a newline, which means that react has <br> parsed the tag into the HTML we want.

2.ref

?? A component is not a real DOM node, but rather a data structure that exists in memory, called the virtual Dom. Only when it is inserted into the document will it become the real DOM. According to the design of React, all DOM changes occur first on the virtual DOM, and then the actual changes are reflected in the real DOM, which is called Dom diff, which can greatly improve the performance of the Web page.
?? However, sometimes it is necessary to get the node of the real DOM from the component, then the ref attribute is used.

var MyComponent = React.createClass({  handleClick: function() {    this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <MyComponent />, document.getElementById(‘example‘));

3.key

<DivId="Demo3" ></Div><ScriptType="Text/babel" > var Usekey=react.createclass ({render:function(){Return<ul> <li key= "1" >a</ li> <li key= "2" >b</ li> <li key= "3" >c</ li> </ul>}}); Reactdom.render (<usekey/>, document.getElementById (' Demo3 ‘) ); </SCRIPT>          

Browser display:

?? Note: Within the same component, cannot appear the same key, list and other components, preferably with the key attribute, can improve performance

Quote Original: http://blog.csdn.net/deeplies/article/details/52641073

Blog is to remember that they are easy to forget things, but also a summary of their work, the article can be reproduced, without copyright. Hope to do their own efforts to do better, we work together to improve!

If there is any problem, welcome to discuss together, code if there is a problem, you are welcome to the great God!

The JSX Grammar of react