在 React 项目中，React、React-dom 和 Babel 各自扮演什么角色？请分别说明它们的功能定位，并解释它们如何协作完成一个组件从编写到渲染的过程。
考察说明
考察对 React 生态中核心库与构建工具职责分工的理解，以及前端工程化基础认知。
回答思路
- 【回答框架 1】React 是核心库，提供组件化开发的基础 API，例如 createElement、Component、Hooks 等。它负责定义组件结构和管理组件状态，但不负责实际的 DOM 渲染。
- 【回答框架 2】React-dom 是渲染器，将 React 组件树映射到浏览器 DOM。它提供 render 和 hydrate 等方法，处理挂载、更新与卸载，并将 React 元素转换为真实节点。
- 【回答框架 3】Babel 是 JavaScript 编译器，主要将 JSX 语法和 ES6+ 代码转换为浏览器可识别的 ES5 代码，同时可通过插件支持 TypeScript 等特性。它让开发者能使用更现代的语法编写组件。
- 【回答框架 4】三者协作流程：源码通过 Babel 转译，React 负责构建虚拟 DOM，React-dom 将虚拟 DOM 同步到真实 DOM，从而完成渲染。React 与 React-dom 的分工使 React 能跨平台渲染。
- 【关键点 1】React 负责组件化与虚拟 DOM 构建
- 【关键点 2】React-dom 负责将虚拟 DOM 渲染到浏览器
- 【关键点 3】Babel 负责转换 JSX 与高级语法
- 【关键点 4】分离设计支持跨平台渲染（如 React Native）
- 【易错点 1】混淆 React 与 React-dom 职责，误认为 React 包包含 DOM 操作
- 【易错点 2】忽视 Babel 的作用，以为 JSX 被浏览器原生支持