2-4

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

const rootContainerElement = document.getElementById('root-container');

const root = ReactDOM.createRoot(rootContainerElement);

const reactElement=React.createElement('div', 
    {id: 'wrapper',className:'foo'}, 
    React.createElement('ul', {id: 'list-01'},
        React.createElement('li', {className: 'list-item'}, 'Item 1'),
        React.createElement('li', {className: 'list-item'}, 'Item 2'),
        React.createElement('li', {className: 'list-item'}, 'Item 3')
        ),
    React.createElement('button', {id: 'button1'},'I am a button'))

        root.render(reactElement)

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

const rootContainerElement = document.getElementById('root-container');

const root = ReactDOM.createRoot(rootContainerElement);

const reactElement=(
    <div id='wrapper' className='foo'>
        <ul id='list-01'>
            <li className='list-item'>item 1</li>
            <li className='list-item'>item 2</li>
            <li className='list-item'>item 3</li>
        </ul>
        <button id='button1'>I am a button</button>
    </div>
)

        root.render(reactElement)
        

使用jsx語法在經過開發工具的自動轉譯後就會變成前者，因此撰寫jsx語法就是在寫React.createElement方法的呼叫

在build time的時候 babel就將jsx語法轉成createElement語法

react17以前 若沒有寫import React from 'react’ 可能會因為找不到React這個變數而出錯

2-5-1嚴格標籤閉合