Detailed React in JSX syntax

1, the basic concepts:

ReactUse JSXinstead of regular JavaScript.

JSXIn accordance with the XMLsyntax specification of JavaScriptsyntax extensions.

JSXThe syntax of nature: not directly JSXrendered on the page, but first converted into an internal createElementform, and then rendering.

2, JSXthe advantages of:

• JSX Execute faster because it is optimized at the compiled JavaScript code;
• It is type-safe, you can find errors during compilation;
• Use JSXwriting templates easier and faster.

3, JSXfundamentals of grammar:

JSXNote: The recommended {/* 这是注释 */};

JSXClass class name added: need classNameto replace class; htmlForreplace labelthe forattribute;

In the JSXtime of creation of the DOM, all nodes must have a unique root element wrapped;

In the JSXsyntax, the label must appear in pairs, if a single label, it must be self-closing and;

Code Example:

const mydiv = <div>这是一个Div标签</div>;
ReactDOM.render(mydiv, document.getElementById('root'));

Use of Component Development Code Example:

App.js Component file code

import React from 'react';

class App extends React.Component{
  render(){
    return (
      <div>
        {1+1}
        <hr/>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

Use in other documents JSXsyntax reference components:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

4, JSXApplication:

Digital rendering

import React from 'react';
import ReactDOM from 'react-dom';

let a = 10;

ReactDOM.render(
    <div>{a}</div>
, document.getElementById('root'));

Rendering string

import React from 'react';
import ReactDOM from 'react-dom';

let str = 'hello react';

ReactDOM.render(
    <div>{str}</div>
, document.getElementById('root'));

Rendering Boolean

import React from 'react';
import ReactDOM from 'react-dom';

let rel = true;

ReactDOM.render(
    <div>{rel ? '结果为真' : '结果为假'}</div>
, document.getElementById('root'));

Rendering property values

import React from 'react';
import ReactDOM from 'react-dom';

let title = "this is a div";

ReactDOM.render(
    <div title={title}>Hello React</div>
, document.getElementById('root'));

Rendering label object

import React from 'react';
import ReactDOM from 'react-dom';

const h1 = <h1>Hello React!</h1>;

ReactDOM.render(
    <div>
        {h1}
    </div>
, document.getElementById('root'));

Rendering Array

import React from 'react';
import ReactDOM from 'react-dom';

const arr = [
    <h1>第1行</h1>,
    <h2>第2行</h2>,
];

ReactDOM.render(
    <div>
        {arr}
    </div>
, document.getElementById('root'));

The ordinary arrays into JSXan array, and render to the page

解决 Warning: Each child in a list should have a unique "key" prop.

method one:

import React from 'react';
import ReactDOM from 'react-dom';

//原数组
const arr = ['html','css','vue'];
//新数组
const newArr = [];
//forEach()方法没有返回值
arr.forEach((item,index) => {
    const temp = <h2 key={index}>{item}</h2>
    newArr.push(temp);
});

ReactDOM.render(
    <div>
        {newArr}
    </div>
, document.getElementById('root'));

Method Two:

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import './style.css';

//原数组
const arr = ['html','css','vue'];

ReactDOM.render(
    <div>
        {/* map()方法有返回值 */}
        {arr.map((item,index) => {
        return <h2 key={index}>{item}</h2>
        })}
    </div>
, document.getElementById('root'));