第二关：编写第一个react应用程序

第一步：

• 清空src 目录，并在里面重新创建一个index.js,并写入代码：

import React from 'react'  // React 导入可以不写
import {createRoot} from 'react-dom/client'

createRoot(document.getElementById('root')).render(<div>啦啦啦啦啦</div>)

效果如下

注意：以上是react18 的写法,react17是：

import React from 'react'  // React 导入可以不写
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>啦啦啦啦啦</div>，
document.getElementById('root') )

JSX语法

import React from 'react'
import {createRoot} from 'react-dom/client'

class App extends React.Component { 
  render () { 
    return ( 
      <div className='app' id='appRoot'> 
        <h1 className='title'>欢迎进入React的世界</h1> 
        <p>React.js 是一个构建页面 UI 的库 </p>
      </div>
    ) 
  } 
}

createRoot(document.getElementById('root')).render(<App></App>)