在前端开发领域，React和Vue的出现，标志着前端开发者可以“Say goodbye to DOM coding”，即不必再直接与DOM元素频繁互动，他们引领着我们告别传统的DOM操作时代，迈入MVVM（Model-View-ViewModel）模式的崭新天地。

通过上一篇文章 [初识React框架](https://juejin.cn/post/7385752495534522383)，我们能知道React是一个由Facebook开发并维护的开源JavaScript库，并以其高效、灵活的组件化思想，成为了构建用户界面的首选工具之一。它通过采用组件化的方式来组织代码，使得复杂的UI结构变得易于管理和维护。本文将从一个简单的React项目入口文件`index.js`出发，逐步揭开React的神秘面纱，探索其核心概念与机制，直至深入组件化的精髓。

一、React入门

我们来到React项目入口文件index.js中，这是React应用的起点。

import ReactDOM from 'react-dom/client';

const root=ReactDOM.createRoot(

document.getElementById('root')

);

root.render(<h1>征程</h1>)

通过import ReactDOM from 'react-dom/client';引入了React的DOM渲染库，而ReactDOM.createRoot()方法则标志着React接管DOM的第一步。这个方法接收一个DOM元素作为参数（如document.getElementById('root')），为React创建了一个挂载点。从这一刻起，React将独立管理这部分DOM，也就是这里将成为React展示的舞台，根节点root 内部就是react的世界了，此后的所有React组件将在这个根节点下进行渲染。root.render()方法接收一个React元素作为参数，并将其渲染到与root关联的DOM节点上。

二、JSX：让JavaScript拥抱HTML

在React的世界里，JSX是最具特色的语法糖。通过允许在JavaScript中直接编写类似HTML的代码，极大地提升了代码的可读性和编写效率。

import ReactDOM from 'react-dom/client';

import React from 'react';

const root=ReactDOM.createRoot(

document.getElementById('root')

);

// react 的法宝 ： JSX语法

const element1 = (<h1>正大会</h1>)

const element2 =React.createElement('div',{id:'name'},'正小会')

// root.render(element1)

root.render(element2)

<h1>正大会</h1>这样的JSX表达式，不仅直观地描述了UI结构，而且与React.createElement()相比，更加简洁明了。JSX背后，是编译器将其转换为React元素（如React.createElement('h1', null, '正大会')）的过程，从而确保了JavaScript引擎的正常解析执行。也就是说明，在react中我们只要运用JSX，就可以在JavaScript直接编写HTML。

三、职责分离

React鼓励我们以函数或类的形式定义组件，每个组件负责渲染一块UI，这种设计模式大大促进了代码的复用和维护。

import ReactDOM from 'react-dom/client';

import React from 'react';

// module 模块化的导入

import APP from './app/app';

const root =ReactDOM.createRoot(

// 就做这一次DOM查找，ReactDOM来做查找

// DOM编程 性能很差

document.getElementById('root')

)

root.render(<APP/>)

将index.js就用于生成一个root节点，而其他的东西就交给其他的组件APP，但是要注意的是，root.render()接受的是一个参数，所以根组件里必须返回一个值。

// 根组件

// react 使用函数创建一个组件，一定要返回JSX

// 页面由组件组成（更利于复用）

const APP = ()=>{

const element = (

<div className='container'>

<h1> classname='title'>周老板</h1>

</div>

)

return element

}

// module 模块化的输出

export default APP

通过定义const APP = ()=>{...}这样的函数创建一个组件，而在组件中我们可以写一堆的HTML、css、js，而页面将由组件组成，更利于复用。而组件内部可以继续嵌套其他组件（AppHeader组件），如<AppHeader />，形成了一个组件树结构，这便是React应用的核心架构。

import AppHeader from './components/app-header';

const APP = ()=>{

const element = (

<div className='container'>

<AppHeader/>

<AppHeader />

</div>

)

return element

}

export default APP

四、组件化

组件化是React的灵魂。它允许我们将界面拆分成多个独立、可复用的部分，每个部分都有自己的状态和生命周期。

const AppHeader = (props)=>{

const {name}= props;

return (

<div className="app-header">

<h1 className="title">{name}</h1>

</div>

)

}

export default AppHeader

AppHeader组件是可以传入参数的，别忘了他是由函数来创建的。通过属性(props)传递数据（如name），这样就可以获取调用AppHeader的那个组件中的name值，更加利于复用。

import AppHeader from './components/app-header';

const APP = ()=>{

const element = (

<div className='container'>

<AppHeader name='吴彦祖'/>

<AppHeader name='彭于晏'/>

</div>

)

return element

}

export default APP

组件之间可以进行通信，同时保持各自的纯净性，降低了耦合度。组件化不仅提高了代码的组织性和可测试性，也为大规模应用的开发提供了有力支撑。

结语

React不仅仅是一个库，它代表了一种全新的前端开发范式。通过ReactDOM.createRoot与JSX的巧妙结合，React让我们能够在JavaScript中以声明式的方式描述UI，通过组件化思想实现界面的模块化开发。这一系列机制，不仅提升了开发效率，也使得代码更易于理解和维护。不愧是“前端第一框架”，这可不是虚名昂。接下来，我将持续学习并分享，让我们一起加油！！