React、React-dom 与 Babel

三者分工明确：React 负责描述 UI，React-dom 负责渲染到浏览器，Babel 负责编译 JSX 和现代语法。

一、React 核心库

提供组件系统和虚拟 DOM，与平台无关。

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

核心能力：组件定义、Hooks（useState、useEffect 等）、虚拟 DOM diff。

二、React-dom 渲染库

将 React 组件挂载到真实浏览器 DOM，仅用于 Web 平台。

import { createRoot } from 'react-dom/client'
import App from './App'

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

React 18 用 createRoot 替代了旧的 ReactDOM.render。

核心能力：挂载/卸载组件、事件系统、客户端水合（hydration）。

三、Babel 编译工具

将 JSX 和 ES6+ 语法编译为浏览器可执行的 JS。

// 编译前（JSX）
const el = <h1 className="title">Hello</h1>

// 编译后
const el = React.createElement('h1', { className: 'title' }, 'Hello')

常用配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

四、为什么要拆分 React 和 React-dom

React 核心库与渲染器分离，使同一套组件逻辑可以跑在不同平台：

渲染器	平台
`react-dom`	Web 浏览器
`react-native`	iOS / Android
`react-three-fiber`	Three.js WebGL

三者关系

React 定义"画什么"，React-dom 决定"画在哪"，Babel 让浏览器能读懂 JSX。三者缺一，React 应用就跑不起来。