Summary of JSX grammar basics

Title: First of all, we need to understand what jsx is and what is the difference between it and js. In fact, it is the grammatical sugar of js, plus the syntax of xml, which makes it more convenient to generate virtual dom. Simply put, xml is the format for storing data. If you want to understand xml, you can compare it with json format.

Example:

//用js去写

let Dom = React.creatElemnt('h1',{id:'header'},'你好啊');
let Doms = React.creatElemnt('h1',{id:'header'},React.craetElement('span',{id:'center'},"你好啊")


//用jsX写
let Dom = (
    <h1 id='title'>
        你好
    </h1>
)

let Doms = (
    <h1 id='title'>
       <span>
        你好
       </span>
    </h1>
)

jsx syntax rules:

01. Unordered quotation marks when defining.

let Doms = (
    <h1 id='title'>
       <span>
        你好
       </span>
    </h1>
)

02. The expression mixed in the label is wrapped with {}.

      Note: Expressions are different from code statements, that is to say, if statements and for statements cannot be wrapped by {}; functions and variables are expressions, and for and if are called code statements.

let name = 'title'
let commins = '你好'

let Doms = (
    <h1 id={title}>
       <span>
        {commins}
       </span>
    </h1>
)

let name = 'title'
let commins = '你好'
let arr = ['a','b','c]
let Doms = (
    <div id={title}>
       <span>
        {Array.map((item,index)=>
            {
             return <li key={index}>{item}</li>      
            )}
       </span>
    </div>
)

 

03. The type of style designation does not use class, but className;

let name = 'title'
let commins = '你好'
let niu = 'niuniu'
let Doms = (
    <h1 id={title} className={niu}>
       <span>
        {commins}
       </span>
    </h1>
)

04. Add { {}} to the inline style ;

let name = 'title'
let commins = '你好'

let Doms = (
    <h1 id={title}>
       <span style={
   
   {margin:20px}}>
        {commins}
       </span>
    </h1>
)

05. There is only one root tag, the same as Vue2;

06. The label must be closed;

07. Label initials

        1. If it starts with a lowercase letter, it will be converted to an html tag;

        2. If it starts with a capital letter, it will find the corresponding component. If there is no such component, an error will be reported, combined with the Vue component naming convention;