React basic learning notes -jsx introduction and examples of basic grammar

1. Introduction to JSX

A simple declaration instance

  const element = <h3>Hello, React!</h3>

The tag syntax in the above example is neither string nor HTML. It is called JSX and is a syntax extension of JavaScript.
We suggest using JSX in React. JSX can well describe that the UI should present the essential form of interaction it should have.
JSX may be reminiscent of a template language, but it has all the functionality of JavaScript.
JSX can generate React "elements"

2. Reason and purpose of using JSX

React believes that rendering logic is intrinsically coupled with other UI logic. For example, it needs to bind and process events in the UI, notify the UI when the state changes at some time, and display the prepared data in the UI.
Instead of artificially separating tags and logic into different files, React realizes the separation of concerns by storing them together in a loosely coupled unit called "component"
React doesn't force JSX, but most people find it visually helpful to put JSX and UI together in JavaScript code.
It also enables React to display more useful error and warning messages.

3. Common operation demonstration in JSX

3.1 embedding expressions in JSX (equivalent to interpolation syntax in Vue)

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

// Step 1: declare data
const str = 'hello react'
const gender = true
const price = 15

// Step 2: declare JSX objects
const jsxDemo = <div>
        <h3>{str}<h3>
        <h3>{price}<h3>
        <h3>{gender ? 'male' : 'female'}<h3>
        <h3>{price + 20}<h3>
        <h3>{price - 10}<h3>
        <h3>{price * 2}<h3>
        <h3>{price / 3}<h3>
    </div>

// Step 3: use ReactDOM object to generate and render elements
ReactDOM.render(jsxDemo, document.getElementById('root'))

3.2 assign values to tag attributes in JSX (equivalent to one-way data binding in Vue)

// Step 1: declare data
const attrType = 'text'
const attrName = 'username'
const attrVal = 'admin'
const attrClsName = 'uCls'
const attrPType = 'password'
const attrPName = 'password'
const attrPVal = '123123'
const attrClsPName = 'pCls'

// Step 2: declare JSX objects
const jsxDemo = <div>
    // When assigning a value to the class attribute, the attribute name must be written as className
    <input type={attrType} name={attrName} value={attrVal} className={attrClsName} />
    <input type={attrPType} name={attrPName} value={attrPVal className={attrClsPName} /> } />
    </div>

// Step 3: use ReactDOM object to generate and render elements
ReactDOM.render(jsxDemo, document.getElementById('root'))

3.3 nesting JSX in JSX

// Step 1: declare child JSX objects
const subJSX = <h3>I'm a son JSX</h3>

// Step 2: declare the parent JSX object
const jsxDemo = <div>
        <h3>I am the father JSX</h3>
        <hr />
        {subJSX}
    </div>

// Step 3: use ReactDOM object to generate and render elements
ReactDOM.render(jsxDemo, document.getElementById('root'))

3.4 nesting JSX arrays in JSX

// Step 1: declare child JSX objects
const subJsxArr = [<h3>I'm a son JSX Number one</h3>, <h3>I'm a son JSX Number two</h3>, <h3>I'm a son JSX Number three</h3>]

// Step 2: declare the parent JSX object
const jsxDemo = <div>
        <h3>I am the father JSX</h3>
        <hr />
        {subJsxArr}
    </div>

// Step 3: use ReactDOM object to generate and render elements
ReactDOM.render(jsxDemo, document.getElementById('root'))

3.5 two methods of generating JSX objects and rendering by looping data arrays in JSX

Method 1: Mr. into a jsx array, rendering the jsx array

// Step 1: declare array data
const dataArr = ['zhangsan', 'lisi', 'xiaocao']

// Step 2: declare jsx array
const subJsxArr = dataArr.map((item, key) => {
    return (
        <h3 key={key}>{item}</h3>
        )
    })

// Step 3: declare the parent JSX object
const jsxDemo = <div>
        <h3>I am the father JSX</h3>
        <hr />
        {subJsxArr}
    </div>

// Step 4: use ReactDOM object to generate and render elements
ReactDOM.render(jsxDemo, document.getElementById('root'))

Method 2: directly use expressions to generate jsx arrays in jsx for rendering

// Step 1: declare array data
const dataArr = ['zhangsan', 'lisi', 'xiaocao']

// Step 2: declare the parent JSX object
const jsxDemo = <div>
        <h3>I am the father JSX</h3>
        <hr />
        {dataArr.map((item, key) => {
            return (
                <h3 key={key}>{item}</h3>
                )
            })}
    </div>

// Step 3: use ReactDOM object to generate and render elements
ReactDOM.render(jsxDemo, document.getElementById('root'))

4. JSX summary

The essence of jsx syntax: instead of directly rendering jsx to the page, it is internally converted to the form of createElement before rendering. React and ReactDOM must be introduced first, and react is called by default when parsing and running CreateElement ('tag name', 'tag attribute value object (key value pair)', 'text content') to create an element, so react must be introduced first
In jsx syntax, to write JS code to {}, all tags must have an end
When JSX creates DOM, all nodes must be wrapped with unique root elements;
In JSX syntax, tags must appear in pairs. If it is a single tag, it must be self closing and self closing!
To add a class name to an element in jsx, you need to use className instead of class
Use {/ * this is the comment * /} to write comments in jsx

Keywords: Javascript React

Added by Andrew W Peace on Mon, 20 Dec 2021 11:21:55 +0200

Programming VIP