React Study (iii) Introduction JSX

Reference: https://facebook.github.io/react/docs/introducing-jsx.html

I. Introduction of JSX

Reactdom.render (<div>hello world</div>, document.getElementById (' root '));
If the red part adds a layer ', it will go wrong, jsx is neither a string nor HTML, it is a JavaScript syntax extension

Second, the use of JSX

1. Use curly braces to embed JS expressions

Let a = "Hello World"; Reactdom.render (<div>{a}</div>, document.getElementById (' root '));

2.JSX compiled after the JS object, that is, can be assigned to variables, as parameters, or function return value, etc.

Let a = ' Hello world '= <div>{a}</div>reactdom.render (b, document.getElementById (' root '));

3. Assigning a value to a property using JSX

Let A = ' world 'className={a}>hello</div>// here should use the hump named Reactdom.render (b, document.getElementById (' root '));

4.JSX can prevent XSS attacks, because before rendering, he will convert the content to a string

JSX will be compiled into react.createelement () form to create the element

React Study (iii) Introduction JSX