This is the 11th day of my participation in the August More Text Challenge

1. The JSX understanding

  • Full name: JavaScript XML
  • React defines an XML-like JS extension syntax, JS + XML
  • React.createelemet () is essentially a syntactic sugar

🚀 Learn about XML’s early use for storing and transferring data (more structure than data)

<Student>
		<name>Tom</name>
		<age>18</age>
</Student>
Copy the code

json

{
	"name":"Tom"
	"age"19} :Copy the code

Parse: Used to convert JSON to JS objects stringfy: Used to convert JS objects to JSON

2. JSX grammar rules

  • When defining the virtual DOM, do not write quotes
  • To use variables in the tag, use {}
const myId ="aBCd"
const VDOM = <h1>Hello React{myId}</h1>
ReactDOM.render(VDOM,document.getElementById('root'))
const TDOM = document.getElementById('root'); 
Copy the code
  • Instead of using class for external styles, use className
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const myId ="aBCd"
const VDOM = <h1 class="title"><span>Hello React{myId}</span></h1>
ReactDOM.render(VDOM,document.getElementById('root'))
const TDOM = document.getElementById('root'); 
Copy the code

index.css

.title{
  text-align: center;
  background-color: aqua;
}

Copy the code

It worked, but it turned out to be a cuddle. What does it mean to report an error? Because you can’t use class, what? Using the className

  • To use inline styles, write in the style={{}}. And styles use the hump rule.

The way we wrote it before

const VDOM = <h1 style="background:red">Hello React{myId}</h1>
Copy the code

Well, it would be a mistake to write that. The correct way to write it is as follows. Use double curly braces. The outermost curly braces indicate that you want to write js expressions inside. The curly braces inside indicate that we’re writing an object.

const VDOM = <h1 style={{background:"red",color:'white'}} >Hello React{myId}</h1>
Copy the code

If we want to write multi-letter attributes, we need to use the hump rule, such as fontSize.

const VDOM = 
<h1 style={{background:"red",color:'white',fontSize:'20px'}} >
	Hello React{myId}
</h1>
Copy the code
  • You cannot have multiple root tags, you must have only one root tag.

So you need to wrap a label around the outermost layer

const VDOM = (
    <div>
        <h1 style={{ background: "red", color: 'white', fontSize: '20px' }}>
            Hello React{myId}
        </h1>
        <h1>sdsds</h1>
    </div>

)
Copy the code

  • Tag must be closed

  • Label first letter

    • If the tag starts with a lowercase letter, the tag is converted to the HTML element with the same name. If the HTML does not have the tag element with the same name, the tag is misaligned.
    • React renders the component if it starts with a capital letter. If the component is undefined, an error is reported.

3. JSX exercises

Dynamic traversal list rendering

// Modular syntax in ES6
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const data = ["React"."Vue"."Angular"]
const VDOM = (
    <div>
        <h1>List of front-end frameworks</h1>
        <ul>
            {data.map((item,index)=>{
                return( <li>{item}</li>)})}</ul>
    </div>

)
ReactDOM.render(VDOM, document.getElementById('root'))
const TDOM = document.getElementById('root');



Copy the code

Error: there is no unique key, because it is iterated, we need to add unique key.

return( <li key={index}>{item}</li>)
Copy the code

An aside:

[JS expression] and [JS statement (code)]

  1. Expression: An expression produces a value that can be placed wherever it is needed. These are all expressions:
  • a
  • a+b
  • demo(1)
  • arr.map()
  • function test() { }

  1. Statement (code)

  • if(){ }

  • for(){ }

  • switch(){ case:xxx }