React 入门不迷路：从“会写 HTML”到“理解组件化”的完整指南本文以通俗易懂的方式带零基础读者入门 React，

🚀 从零认识 React：小白也能看懂的组件化世界

如果说 HTML + CSS + JS 是前端的“三件套”，
那 React 做的事情，就是把这三件套重新打包，
变成一个个 可以复用、会自己更新的“组件” 。

很多初学者在学习 React 时，一上来就被这些问题困住：

React 是什么？它解决了什么问题？
JSX 是不是在 JS 里乱写 HTML？
函数为什么能当组件？
页面为什么会“自动更新”？

本文将从最基础的概念开始，一步一步解释 React、JSX、组件、状态，并结合代码，把这些抽象概念变成能看懂的东西。

一、React 是什么？为什么会出现 React？

1️⃣ 没有 React 时，前端是怎么写的？

在最原始的前端开发中，流程通常是：

HTML 写结构
CSS 写样式
JS 获取 DOM
JS 修改 DOM

比如：

document.querySelector('#title').innerText = 'Hello'

问题在于：

页面一复杂，DOM 操作会越来越多
数据和页面容易不同步
一个小改动，可能牵一堆代码

👉 页面变复杂，人就开始崩溃

2️⃣ React 的核心思想

React 并不是一个“操作 DOM 的工具”，
而是一个**“用数据描述界面”的库**。

React 提出一个非常重要的理念：

UI = 数据的函数

也就是说：

页面不是“改”出来的
页面是“根据数据算出来的”

只要数据变了，页面自然就变了。

二、什么是 JSX？为什么 React 要发明它？

1️⃣ JSX 是什么？

JSX 是 React 提供的一种语法扩展。

官方定义可以翻译成人话：

JSX 是一种在 JavaScript 中描述 UI 结构的方式

举个最直观的例子：

<h1>Hello React</h1>

看起来像 HTML，但它其实是 JS 代码的一部分。

2️⃣ JSX 并不是 HTML

给出一段示例：

const element = <h2>JSX 是React 中用于描述用户界面的语法扩展</h2>

const element2 = createElement(
  'h2',
  null,
  'JSX 是React 中用于描述用户界面的语法扩展'
)

这两段代码效果完全一样。

👉 JSX 最终都会被编译成 createElement

所以可以这样理解：

JSX = 写起来更像 HTML 的 JS

3️⃣ 为什么要用 JSX？

<div> 
<h1>Hello React</h1> 
</div>

而浏览器不能直接运行 JSX。在构建过程中（比如通过 Babel），JSX 会被编译成 React.createElement() 调用。

所以上面的 JSX 实际上会被转换为：

createElement(
  'div',
  null,
  createElement('h1', null, 'Hello React')
)

不用JSX导致：

可读性差
嵌套复杂
不利于维护

JSX 的作用就是：

让 UI 结构一眼就能看懂

三、什么是组件？为什么函数可以当组件？

1️⃣ 组件的本质是什么？

在 React 中，有一句非常重要的话：

返回 JSX 的函数，就是组件

比如：

function JuejinHeader(){
  return (
    <header>
      <h1>Juejin首页</h1>
    </header>
  )
}

这里的 JuejinHeader：

是一个 JS 函数
返回一段 JSX
就是一个 React 组件

2️⃣ 为什么要组件化？

可以用搭积木来理解：

🧱 1. HTML 标签 = 砖头

<div>、<p>、<button> 这些是 HTML 的基本构建单元，就像盖房子用的单块砖头。
它们功能简单、通用，但不能直接表达业务逻辑或复杂 UI 结构。
比如：一个“登录按钮”不只是 <button>，它可能包含样式、点击逻辑、加载状态、权限控制等。

🔸 砖头本身不能构成房间，只能用来砌墙。

🏠 2. 组件 = 一个完整模块（比如“房间”）

组件是将多个 HTML 标签 + 样式 + 逻辑 + 状态封装在一起的可复用单元。
比如：
- Header 组件：包含 logo、导航栏、用户菜单
- ProductCard 组件：包含图片、标题、价格、“加入购物车”按钮
- Modal 组件：包含遮罩层、弹窗内容、关闭逻辑

🔸 就像“厨房”是一个功能完整的房间，里面有水槽、灶台、橱柜——它们被组合在一起，完成一个特定任务。

React 希望你做的不是：

“把所有 HTML 写在一起”

而是：

“先拆分，再组合”

3️⃣ 组件如何组合成页面？

给出一个完整示例：

function App(){
  return (
    <div>
      <JuejinHeader />
      <main>
        <Articles />
        <aside>
          <Checkin />
          <TopArticles />
        </aside>
      </main>
    </div>
  )
}

这个结构非常重要，因为它体现了：

React 页面 = 组件树

🌲 什么是“组件树”？

在 React 中，整个用户界面是由一个个组件嵌套组成的层级结构，就像一棵树：

根节点：App（应用的入口）
子节点：JuejinHeader、Articles、Checkin、TopArticles
嵌套关系：App → main → aside → Checkin / TopArticles

这棵树的每个节点都是一个 组件（Component） ，而不是原始 HTML 元素（虽然底层最终会渲染成 HTML）。

💡 就像 HTML 的 DOM 树一样，React 有自己的一棵 虚拟 DOM 树（Virtual DOM） ，而这棵树的节点就是组件。

四、什么是 State？为什么页面会自动更新？

1️⃣ State 是什么？

State 可以理解为：

组件内部的“数据状态”

在代码中：

const [name, setName] = useState("vue");

含义是：

name：当前数据
setName：修改数据的方法

2️⃣ 为什么不能直接改数据？

在 React 中，不能这样写：

name = 'react'

必须这样写：

setName('react')

因为：

React 需要知道“数据变了”
才能重新计算 UI

3️⃣ 数据变了，页面为什么会变？

setTimeout(()=>{
  setName("react");
},3000)

3 秒后发生了什么？

state 变化
组件重新执行
JSX 重新计算
页面更新

👉 你没有碰 DOM，一切自动完成

五、条件渲染：页面是“算出来的”

{isLoggedIn ? <div>已登录</div> : <div>未登录</div>}

这行代码说明了一件事：

页面不是写死的，而是根据数据动态计算的

六、完整代码：

import { useState, createElement } from 'react';
import './App.css';

function App() {
  const [name, setName] = useState("vue");

  const [isLoggedIn, setIsLoggedIn] = useState(false);

  setTimeout(() => {
    setName("react");
  }, 3000);

  const ToggleLogin = () => {
    setIsLoggedIn(!isLoggedIn);
  };

  const element = <h2>JSX 是React 中用于描述用户界面的语法扩展</h2>;
  const element2 = createElement('h2', null, 'JSX 是React 中用于描述用户界面的语法扩展');

  return (
    <div>
      {element}
      {element2}
      <h1>Hello{name}!</h1>
      {isLoggedIn ? <div>已登录</div> : <div>未登录</div>}
      <button onClick={ToggleLogin}>
        {isLoggedIn ? "退出登录" : "登录"}
      </button>
    </div>
  );
}
export default App;

演示结果：

未命名的设计 (4).gif

六、总结：React 的世界观

到这里，其实你已经理解了 React 的根基：

React 是一个用数据驱动 UI 的库
JSX 是写 UI 的方式
组件是开发的基本单位
State 决定页面长什么样