• Modify the contents of src/index.js:

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component{
    render () {
        return (
            <div>
                <h1>my-react</h1>
            </div>
        )
    }
}
ReactDOM.render(
    <Header/>, document.querySelector('#root')
)

To write react component, the parent class of react and react.js must be introduced
React DOM can render the react component to the page

jsx principle

• Use JavaScript objects to represent the structure of a dom element:

<div class='box' id='content'>
  <div class='title'>Hello</div>
  <button>Click</button>
</div>

{
    tag: 'div',
    attrs: {className: 'box', id: 'content'},
    children: [
        {
            tag: 'div',
            attrs: {className: 'title'},
            children: ['Hello']
        },{
            tag: 'button',
            attrs: null,
            children: ['Click']
        }
    ]
}

The structure and information of HTML and JavaScript are the same. Using JavaScript to write is too long and unclear, react.js extends the syntax of JavaScript and directly writes the syntax of HTML tag structure in JavaScript code
*Code below:

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component{
    render () {
        return (
            <div>
                <h1>my-react</h1>
            </div>
        )
    }
}
ReactDOM.render(
    <Header/>, document.querySelector('#root')
)

• After compilation, it will become:

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component{
    render () {
        return (
            React.createElement(
                'div',
                null,
                React.createElement(
                    'h1',
                    null,
                    'my-react'
                )
            )
        )
    }
}
ReactDOM.render(
    React.createElement(Header, null), 
    document.querySelector('#root')
)

• The so-called JSX is actually a JavaScript object
• The function of react dom. Render is to render the component and construct the DOM tree, and then insert it into a specific element on the page (in this case, the div element with id as root).