JavaScript in the react framework of the JSX Grammar Learning Introductory Tutorial _ Basics

What is JSX?

When you write a component in react, you usually use the JSX syntax, which looks like it's written directly in the JavaScript code, essentially a syntactic sugar, and every XML tag is converted into a pure JavaScript code by the JSX conversion tool, Of course you want to write directly using pure JavaScript code, but using JSX, the structure of the component and the relationship between the components look clearer.

var mycomponent = React.createclass ({/*...*/});
var myelement = <mycomponent Someproperty={true}/>;
React.render (MyElement, document.body);

What does an XML tag, such as <mycomponent someproperty={true}/>, be converted to by the JSX conversion tool?

Like what:

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, in other words, we write an XML tag that essentially calls the React.createelement method and returns a Reactelement object.

Reactelement createelement (
 string/reactclass type,
 [object props],
 [children ...]
)

The first parameter of this method can be a string representing an element within an HTML standard, or an object of a Reactclass type, representing the custom component we had previously encapsulated. The second argument is an object, or a dictionary, that holds all of the intrinsic attributes of the element (that is, a value that will not change after it is passed in). Starting with the third argument, subsequent arguments are considered to be child elements of the element.

JSX Converter

To translate code with JSX syntax into pure JavaScript code, there are a number of ways to add type= "TEXT/JSX" to the script label for inline and HTML code or for an outside file that has not been transformed. and introduce the Jsxtransformer.js file, but this way is not recommended in the production environment, the recommended approach is to the code before the launch of the code, you can use NPM Global installation React-tools:

NPM install-g React-tools

and use the command-line tool to convert it (specific use can refer to jsx-h):

JSX src/build/

If you use automation tools, such as gulp, you can use the appropriate plug-in gulp-react.

Using JS in HTML templates

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>

Using HTML tags

To create an element that exists in an HTML standard, just like writing HTML code:

var mydivelement = <div classname= "foo"/>;
React.render (Mydivelement, document.body);

But note that class and for are the two properties, JSX syntax is ultimately to be converted to pure JavaScript, so to the same as in the JavaScript dom, with classname and htmlfor.

Also, when creating elements within the HTML standard, the JSX converter discards those non-standard attributes, and if you must add custom attributes, you need to add the data-prefix before these custom attributes.

<div data-custom-attribute= "foo"/>

namespace-type Components

For example, when developing a component, a component has multiple subcomponents, and you want these subcomponents to be properties of their parent component, you can do this like this:

var Form = myformcomponent;

var App = (
 <Form>
 <Form.Row>
  <form.label/>
  <form.input/>
 </ form.row>
 </Form>
);

So all you need to do is reactclass the subassembly as a property of its parent component:

var myformcomponent = React.createclass ({...});

Myformcomponent.row = React.createclass ({...});
Myformcomponent.label = React.createclass ({...});
Myformcomponent.input = React.createclass ({...});

The creation of child elements can be directly given to the JSX converter:

var App = (
 react.createelement (Form, NULL,
  react.createelement (Form.row, NULL,
   react.createelement ( Form.label, NULL),
   react.createelement (form.input, NULL)))
;

This feature requires 0.11 and more versions

JavaScript expressions

Writing a JavaScript expression in JSX syntax requires only {}, such as the following example using the three-mesh operator:

Input (JSX):
var content = <container>{window.isloggedin? <nav/>: <login/>}</container> ;;
Output (JS):
var content = react.createelement (
 Container,
 null,
 Window.isloggedin?) React.createelement (NAV): React.createelement (Login)
);

Note, however, that the JSX syntax is just a syntactic candy, and it's behind the call to the Reactelement construction method React.createelement, so writing like this is not possible:

This JSX:
<div id={if (condition) {' msg '}}>hello world!</div>

/are transformed to this JS:
   react.createelement ("div", {id:if (condition) {' msg '}}, "Hello world!");

You can see the obvious syntax errors from the converted JavaScript code, so don't use the three-mesh operator, or write this:

if (condition) <div id= ' msg ' >hello world!</div>
else <div>hello

Propagate properties (spread Attributes)

In Jsx, you can use the ... operator that represents the merging of the key value pairs of an object with the Reactelement props property, this ... The implementation of the operator is similar to the ... in the ES6 array. The attributes of the operator.

var props = {foo:x, bar:y};
var component = <component {... props}/>;

This is equivalent to:

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

It can also be mixed with ordinary XML attributes, requiring the same name, which overrides the former:

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