01 JSX Initial Experience

When you define a component, you can have only one root tag after the return, but you can have multiple tags inside the tag

2. When using components, the first letter must be capitalized

3. If the outermost layer really doesn’t want to put a layer of div root, use an empty tag instead

// JSX expressions must have one parent element.ts(2657)

When you write two tags, you can add div around them, but empty tags are recommended

02 JSX points to note

1. Features of JSX

JSX executes faster because it is optimized after being compiled into JavaScript code. It is type-safe and errors can be found during compilation. Using JSX to write templates is much easier and faster.

2, JSX several note format:

React JSX uses uppercase and lowercase letters to distinguish native components from HTML components

(such as: HTML div P H1, components use MyButton App Home List, etc.)

2. The difference between JSX and HTML tag attributes

HTML Tag attributes JSX why
for htmlFor For is the for loop keyword in JS
class className Class is a declarative class keyword in JS
style Need to use JS object (use double curly braces –{{}}) 
import React, { Component } from 'react'
var MyImg = require('./assets/01.jpg')

export default class App2 extends Component {
    render() {
        return (
            <>
                <label htmlFor="ipt">label</label>
                <input type="text" id="ipt" className="ipt" style={{background: 'pink', color: 'green'}} / >
                <hr/>
                <img src={MyImg} alt=""/>
            </>)}}Copy the code

Note: The image lookup path is in the SRC directory, so the import triggers the lookup file from the SRC directory

React JSX creates a virtual DOM, not HTML

Js: in the index.

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

ReactDOM.render(
    <App />.document.getElementById('root'));const virtualDOM = React.createElement('div')
const realDOM = document.createElement('div')

let virtualNum = 0;
for(var key in virtualDOM){
    virtualNum++;
}

let realNum = 0;
for(var key in realDOM){
    realNum++;
}

console.log('Number of virtual DOM attributes:'+virtualNum)	/ / 7
console.log('Number of real DOM attributes:'+realNum)		/ / 298
Copy the code

4. JSX variable references, ternary operators, for loops

In JSX, to call a variable, you use a single curly brace –**{}** in the return

Index. In js:

Use of variable references, trinary operators, and for loops in JSX

import App3 from './App3'

//2. Render the tag/component to the specified tag using JSX syntax
ReactDOM.render(
    <App3 />
    , document.getElementById('root')); App3. Jsimport React, { Component } from 'react'

let name = "Xiao Ming", num1=20, num2=30, arr=[1.2.3.4.5]

export default class App3 extends Component {
  render() {
    return (
      <div>{/* This is the format of the comment */} {/* Reference variables in JSX need single curly braces */}<p>{name}</p>{/* Use of the ternary operator */}<p>{num1>num2? num1: num2}</p>
        <p>{gender === 0 ? Male: (Gender === 1? 'Female' : 'confidential ')}</p>{/* For loop use */}<ul>Map (function) */} {/ / Format 1: arr.map((v,k)=>(<li key={k}>{v}</li>Arr.map ((v,k)=>{return (v,k)=>{return (v,k))<li key={k}>{v}</li>})}</ul>

      </div>)}}Copy the code

Summary: In JSX syntax, when you need to write JS code, please add {} before writing JS syntax