React-----学习笔记-----使用 JSX 描述 UI 信息(三)

• 修改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')
)

编写react组件必须引入react和react.js的组件父类
ReactDOM 可以把 React 组件渲染到页面上去

jsx原理

• 使用JavaScript对象来表现一个dom元素的结构：

<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']
        }
    ]
}

HTML 的信息和 JavaScript 所包含的结构和信息是一样的，使用JavaScript写起来太长且结构不清晰，于是react.js把JavaScript的语法扩展了一下，直接在JavaScript代码里编写HTML标签结构的语法
* 下边的代码：

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')
)

• 经过编译后会变成：

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')
)

• 所谓的 JSX其实就是 JavaScript 对象
• ReactDOM.render 功能就是把组件渲染并且构造 DOM树，然后插入到页面上某个特定的元素上（在这里是 id 为 root 的 div 元素）。