一. React-18版本脚手架使用
(1)首先:创建脚手架
npx create-react-app my-app
(2)其次:在index.js文件内 导入react 和 react-dom/client 以及 APP.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.js'
(3)然后使用 ReactDOM.createRoot获取 id为root id名并定义 root名,然后 root.runder以标签形式导入 App.js
const root = ReactDOM.createRoot(document.querySelector(`#root`))
root.render(<App />)
(4)App.js文件内 声明函数 并 默认导出,然后打开页面就可以看到 “你好世界”
function App () {
return <div>你好世界</div>
}
export default App
二. React-17 与 React-18 入口与卸载区别
入口和卸载 ReactDOM的引入不一样
// React 17采用的
import ReactDOM from 'react-dom'
ReactDom.render(<APP />, rootNode)
// React 18采用的是
import ReactDOM from 'react-dom/client'
ReactDOM.createRoot(rootNode).render(<App />)
依然保留了legacy模式
// 卸载组件
React 17
ReactDOM.unmountComponentAtNode(root);
React 18
root.unmount();