JSX grammar in the React framework of JavaScript

What is JSX?

At the time of writing component in React, usually use JSX grammar, coarse, look like in Javascript code directly write up XML label, it is essentially a syntactic sugar, 1 per XML label will be JSX conversion tool into pure Javascript code, of course you want to directly use pure Javascript code also can write, just use JSX, components of the relationship between the structure and component seems to be more clear.

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

1 XML tag, for example < MyComponent someProperty={true} / > What will be converted by the JSX conversion tool?

Such as:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

Will be converted to:

var Nav = React.createClass({/*...*/});
var app = React.createElement(
 Nav,
 {color:"blue"},
 React.createElement(Profile, null, "click")
);

So, by writing an XML tag, we are essentially calling the method React.createElement and returning an ReactElement object.

ReactElement createElement(
 string/ReactClass type,
 [object props],
 [children ...]
)

The first argument to this method can be a string representing an HTML element, or an object of type ReactClass representing a custom component that we encapsulated earlier. The second argument is an object, or dictionary, that holds all of the intrinsic attributes of the element (that is, values that don't change much when passed in). Arguments starting at the third parameter are considered children of the element.

JSX converter

To code into pure Javascript with JSX grammar, there are a variety of ways, for inline with the code in the HTML or not after transformation of external file, in script label with type = "text/jsx", and introduce JSXTransformer. js file, but this way does not recommend to use in a production environment, proposed approach is to convert the code before the code online, you can use npm global installation react - tools:

npm install -g react-tools

And use the command line tool to convert it (see jsx-h for specific usage) :

jsx src/ build/

If you are using an automated tool such as gulp, you can use the corresponding plug-in gulp-react.

JS is used in the HTML template

It is convenient to use JS in the HTML template by enclosing the JS code in curly braces.

var names = ['Alice', 'Emily', 'Kate']; 
 
React.render( 
<div> 
{ 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

It compiles to something like 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 is a variable output expression actually, JSX would eventually directly. The contents of the curly braces as React createElement third parameter directly into the (without any modification direct incoming), so one can only put 1 row expression, and any written cannot directly as a third parameter is wrong, then you write is wrong like this:

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

Because it's obvious that the curly braces are placed directly on the third argument, which is syntactically incorrect.

It is also wrong to write:

React.render( 
<div> 
{ 
var a = 1; 
 
} 
</div>, 
document.getElementById('example') 
); 

Because React.createElement(" div ", null, var a = 1;) It's a grammatical error.
Then you can see why the js expression in braces can't have a semicolon ending.

Note that if you print the JS variable in an attribute, it should not be enclosed in quotes, otherwise it will be treated as a string and not parsed.
It should look like this:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

0

Use the HTML label

To create an element that exists in the HTML standard, simply write HTML code 1 as if it were:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

1

The JSX syntax will eventually be converted to pure Javascript, so use className and htmlFor as in Javascript and DOM.

Another point is that when creating HTML elements, the JSX converter discards non-standard attributes. If custom attributes must be added, the data- prefix must be added before these custom attributes.

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

2

Namespace components

For example, when developing a component, one component has more than one child component, and you want the child component to be a property of its parent component, you can use it like this:

var Form = MyFormComponent;

var App = (
 <Form>
 <Form.Row>
  <Form.Label />
  <Form.Input />
 </Form.Row>
 </Form>
);

In this way, you can simply use the child component's ReactClass as the parent component's property:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

4

Creating child elements can be handed directly to the JSX converter:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

5

This feature requires version 0.11 or higher

Javascript expression

To write Javascript expressions in JSX syntax, simply use {}, as in the following example using the 3-element operator:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

6

The JSX constructor React.createElement is called by the ReactElement constructor React.createElement, so something like this is not allowed:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

7

You can see the syntax error in the converted Javascript code, so don't use the 3-element operator, or just write:

if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

Propagation properties (Spread Attributes)

In JSX, you can use... Operator that merges the key-value pair of an object with the props property of ReactElement, which... The implementation of the operator is similar to that in ES6 Array... The properties of the operator.

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

9

This is equivalent to:

var component = <Component foo={x} bar={y} />

It can also be used in combination with the regular XML attribute, requiring a property with the same name, which will override the former:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'