react18

创建一个react18项目，注意ReactDOM引入与之前不同，另外ReactDOM.createRoot的使用与之前不同。

import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

• 之前版本

//React负责逻辑控制，数据 -> VDOM
import React from "react";
//ReactDom渲染实际DOM，VDOM -> DOM
import ReactDOM from "react-dom";
import App from "./App";
// React JSX => React.createElement(...)
// babel-loader把JSX 编译成相应的 JS 对象，
// React.createElement再把这个JS对象构造成React需要的虚拟dom。
ReactDOM.render(<App />, document.getElementById("root"));

警告

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

const element = <div tabIndex="0"></div>;