JavaScript and React,react use a lot of syntax sugar, make JS writing more convenient.

https://reactjs.org/docs/jsx-in-depth.html

JSX in Depth

Https://babeljs.io/JS Compiler, learn the direct conversion of react and JS.

JSX only supports syntactic sugar syntactic sugar:

react.createelement (component, props, ... children) function,

JSX Code:

 <MyButton Color ="Blue"  shadowsize ={2} >Click Me  </MyButton> 

Compiling compiles into:

React.createelement (

MyButton,{color: ' Blue ', shadowsize:2},' Click Me ')

You can also use the self_closing form of the tag if there is no children. So:

<div className="sidebar" />

Compiles into:

React.createelement (' div ',{className: ' sidebar '},NULL)

In the form of a function:

function Hello () {

return <div>hello world!</div>;

}

Convert to:

function Hello () {return react.createelement (' div ', null, ' Hello world! ') );}

About the format of the REACT element:

React must be within scope.

Use . Dot Notaiton , you can use dot notation in JSX. This is convenient if a module is to bring up some react components. Example:

import React from ' React ';Const Mycomponents = {datepicker:function DatePicker (props) {return <div>imagine a {props.color} datepicker here.</div>;  }}function Bluedatepicker () {Return <Mycomponents.datepickercolor= "Blue"/>;}

A custom component must be capitalized (unless it is assigned a variable with an initial capital letter). function HEllo (props) {...}

Select type at run time choosing the type at runtime

An expression cannot be used as a REACT element type. But you can assign it to a variable with an uppercase letter, and then you can use the JSX format indirectly.

import React from ' React ';Import {photostory, videostory} from './stories ';Const COMPONENTS = {Photo:photostory,video:videostory};function Story (props) {//wrong! JSX type can ' t is an expression.return<components[props.storytype] Story={props.story}/>;}function Story (props) {//correct! JSX type can be a capitalized variable.  Const specificstory = Components[props.storytype];return <specificstory story={props.story}/>;}

Props in JSX

With {}, any JS expression can be used as a props. For example <mycomponent Foo={1 + 2 + 3 + 4}/>

If statements and for loops is not a JS expression, it cannot be used directly for JSX. But {} can be used.

function Numberdescriber (props) {Let description;if (props.number% 2 = = 0) {Description = <strong>even</strong>;} else {Description = <i>odd</i>      }return <div>{props.number} is an {description} number</div>;}

Conditions to determine the wording of the inline:

{true && expression}// If true, execution of expressions.

{condition? True:false}

Prevent components from being rendered:

return null;??, the component's lifecycle method hook method, still valid componentwillupdate and componentdidupdate.

Children in JSX

String literals

<div>this is valid HTML &amp; JSX at the same time.</div>

&amp; Is &

Compile:

React.createelement ("Div",NULL,valid HTML & JSX at the same time. ");

JSX remove spaces at the beginning and end of a line

JSX Children

Supports inline JSX elements as children. is useful in nested components.

The react component also returns an array element. return [,,];

JS expression can also be used as a child.

function Item (props) {return <li>hello,{props.message}</li>; //props.children}function ToDoList () {const TODOS = [' Finish ', ' Submit ', ' Review '];Return (<ul>

This is the function as Props.children.

{todos.map (message =<item key={message} message={message}/>      )} </ul>  );}

Function as children

See the code for the Yellow label. React.createelement (component, props,... child)

function Repeat (props) {

Let items = [];For (let i= 0; i < props.numtimes; i++) {Items.push (Props.children (i));  }return <div>{items}</div>;}function listoftenthings () {Return (<repeat numtimes={10}>    {(index) = <div Key={index}>{index}:this is item {index}</div>}</Repeat>  );}

Booleans, Null, and Undefined are ignored.

False, null, undefined, and true are all validated children, but they are not rendered.

So you can judge condition && expression as a condition.

Renders

<div>{showheader && <content/></div>

?? 0 will be rendered

If you want to let true render use type conversion, String ().

Let description;      if (props.number% 2 = = 0) {Description = <strong>even</strong>; } else {description = <i>odd</i>} return <div>{props.number} is an {description} NUMBER&L T;/div>;} Z

JavaScript and React,react use a lot of syntax sugar, make JS writing more convenient.