React learning basic grammar in JSX

JSX Profile

Reference: REACT official introduction jsx 

JavaScript JSX is a syntax for describing the UI expansion, is still essentially the JavaScript
React that a component should be provided with UI and UI description data totality, they should not be treated separately, so the JSX invention, as described UI bridge between UI and data. Thus, labels can be used similar to the components described in the HTML of the internal components of the UI, UI so intuitively clear structure.
Babel translator JSX will be converted into a method named React.createElement () call, after compiling it,

JSX will actually be converted to plain JavaScript objects

 

React in JSX common grammar

1 . The basic syntax

JSX same basic XML grammar and syntax are paired tag data constituting a tree structure

const myElement = (
  <div>
    <h1>Hello JSX</h1>
  </div>
);

2. Type label

Tag syntax are two types of DOM tag (div, p, h1), the other is a type of label React assembly,  when using the DOM type of tag, the tag must be in lower case first letter; when used React component type tag when the first letter of the component name must be capitalized. React It is also the first letter of the case by the judgment rendered DOM is a type of label or a label React component type  . 

// DOM类型标签
const dom_element = <h1>Hello, JSX</h1>;

// React组件类型标签

const react_element = <HelloWorld />;

// 二者可以互相嵌套使用

const my_element = (
  <div>
    <HelloWorld />
  </div>
);

3. JavaScript expression

JSX can use JavaScript expressions, because the JSX still essentially JavaScript.

JSX using JavaScript expression requires the expression with the braces "{}" wrap.

Expressions used in the scene JSX mainly two: by the expression, and assignment to tag attributes defined by the expression subassembly

// 通过表达式给标签属性赋值
const element = <MyComponent foo={1 + "Hi"} />;

// 通过表达式定义子组件(map虽然是函数，但它的返回值是JavaScript表达式)
const todos = [10, "hello", 50];

const element = (
  <ul>
    {
      todos.map(message => (
        <Item key={message} message={message} />
      ))
    }
  </ul>
);

Note, JSX can only use JavaScript expressions, you can not use multiple lines of JavaScript statements

// 错误     
const element = <MyComponent foo={const val= 1 + 2; returnval; } />;
    
let complete;

const element = (
  <div>
    { 
      if(complete){
        return < CompletedList />;
      }else { 
        return null;
      }
    }
  </div >
)

 

JSX may be used ternary operator or logic (&&) operator instead if statement effect

// 正确
let complete;
const element = <div>{complete ? <CompletedList /> : null} </div>;

//正确
let complete;
const element = <div> {complete && <CompletedList />} </div>;

4. Tag attributes

When the tag is a DOM JSX type of tag, the corresponding tag attributes supported JSX DOM supports, e.g. id, class, style, onclick like. However, part of the name of the property will change, there are major changes: class should be rewritten className, attribute names take the hump event format, such as onclick to write onClick. The reason is, class is a JavaScript keyword, so changed className; React to tag supports DOM events to re-do the packaging, using a more conventional hump nomenclature event package

<div id='content' className='foo' onClick={() =>{console.log('Hello, React')}} />

When the tag is JSX React component type, from the attribute name may be arbitrarily defined tag.

<User name='React' age='4' address='America' >

5. Note

JSX comments in need braces "{}" will / ** / wrap.

 const element = ( 
    <div> 
        {/* 这里是一个注释 */} 
        <span>React</span> 
    </div>
 )

6. depth JSX

JSX used in reference to the dot notation React assembly. You can easily export a lot of components from a module React

import React from 'react';

const Compments= {
  DatePke: function DatePke(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function Picker() {
  return <Compments.DatePke color="blue" />;
}

Property defaults to "True", if you do not pass a value to the property, it defaults to true, 下边俩组件等价

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Use  ... as "expand (Spread)" operator to pass the entire attribute object

function App1(props) {
  return <div>{props.children}</div>
}

function App2() {
  return (
        <App1>
            <div>hello world</div>
        </App1>
    )
}

jsx the progeny passed using props.children