前段时间系统学习了React，这里做一个知识梳理和技术要点总结。本文将以React项目入口文件为切入点，深入解析框架的核心运行原理，并重点探讨JSX的本质与实现机制。

一、项目入口文件解析

在基于React 18+创建的项目中，main.js作为应用入口文件承担着初始化的重要职责。其典型结构如下：

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

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

这个入口文件中，在 createRoot 函数中传入根节点，并调用 render 函数，最终实现将组件<App />挂载到根节点root上。

由此最为出发点，不难理解createRoot函数的大概逻辑是这样的

const createRoot = (container) => {
	return {
		render: (app) => {
			// to do thind...
		}
	}
}

这里我们可能会有疑问，传进render中的函数组件 <App /> ，是怎么处理的？

这里我们就需要简单解释一下，什么是jsx？为什么需要jsx？