[react family bucket learning] JSX grammar rules in react

Table of contents

Definition of JSX

The meaning of XML

Syntax Rules for JSX

(1) Define the class name, use className instead of class

(2) How to use inline styles to set styles

(3) The virtual dom must have only one root tag

(4) Using variables in react components

Summary of jsx grammar rules:

How to loop list in react

Definition of JSX

Full name: JavaScript XML
A JS extension syntax similar to XML defined by react : JS +XML
The essence is the grammatical sugar of the React.createElement(component,props,...children) method, function: to simplify the creation of virtual DOM
a. Writing: var ele =<h1>HelloJSX!</h1>
b. Note 1: It is not a string, nor is it an HTML/XML tag
c. Note 2: It finally produces a JS object
Any tag name : HML tag or other tags

The meaning of XML

XML was used to store and transmit data in the early days

Syntax Rules for JSX

(1) Define the class name, use className instead of class

(2) How to use inline styles to set styles

Some people say that you can’t just write it directly, let’s try it

You can see that an error was reported, translated as:

The value of the "style" attribute, not a string. For example, when using JSX, style={{marginRight:spacing+'em'}} should be written.

So we know that the style style needs to be wrapped in double curly braces

Effect:

Multiple styles can be separated by commas. Note: the attribute name is in camel case

(3) The virtual dom must have only one root tag

Multiple root tags will report an error

(4) Using variables in react components

Summary of jsx grammar rules:

1. When defining virtual DOM, do not write quotation marks.
2. Use {} when mixing JS expressions in tags .
3. The class name of the style is specified not to use class, but to use className .
4. Inline styles should be written in the form of style={ {key:value}} .
5. Only one root tag
6. Tabs must be closed
7. Label initials
(1). If it starts with a lowercase letter , the tag will be converted to an element with the same name in html . If there is no element with the same name corresponding to the tag in html, an error will be reported.
(2). If react starts with a capital letter , it will render the corresponding component . If the component is not defined, an error will be reported .

Supplement: The difference between JS expressions and JS statements

Let's use a small example to add some jsx grammar knowledge points:

How to loop list in react

In vue we can use v-for to directly loop through the tags. How to achieve it in react?

Method 1 (use map loop to return label):

Note: map calls can be written in tags, because calling map is a JS expression

Method 2 (use the for loop to return the label):

Note: the for call cannot be written in the label, because calling the for loop is a JS statement and not an expression

import React, { Component } from 'react'
import './index.css'

export default class index extends Component {
  render() {
    const arr = ['张三', '李四', '王五']
    var result = []
    for (let i = 0; i < arr.length; i++) {
      result.push(<li key={i}>{arr[i]}</li>)
    }
    return (
      <div>
        <h2 style={
   
   { color: 'blue', fontSize: '24px' }} className="btitle">
          今天才周一！
        </h2>
        <h1>人员名单</h1>
        <ul>
          {arr.map((item, i) => {
            return <li key={i}>{item}</li>
          })}
        </ul>
        <ul>{result}</ul>
      </div>
    )
  }
}

The effect is as follows: From the above code, it is indeed much more complicated than Vue. Therefore, we should pay attention to the way of writing react, so as not to confuse