💬 “HTML 写得好好的，为啥要往 JS 里塞 HTML？”
这是我第一次看到 React 代码时的灵魂拷问。
function App() {
return <h1>Hello React!</h1>;
}
什么？<h1> 居然可以直接写在 JavaScript 里？这不是“混搭”吗？这不乱套了吗？
但当我真正用它做出了第一个页面后——我悟了。
原来，React 不是把 HTML 塞进 JS，而是让我们用 JS 的力量去“驾驭” UI。
今天，就让我以一个初学者的身份，带你走进 React 的世界，看看它是如何用“函数 + JSX”重新定义前端开发的。
🧱 传统前端 vs 现代前端：从“搬砖工”到“包工头”
以前，我们写网页就像在工地搬砖：
- 写一堆 HTML 标签
- 加点 CSS 美容
- 最后用 JS 绑定事件、操作 DOM
整个过程像是在拼图，哪块缺了补哪块。但随着项目变大，代码越来越乱，改一处可能崩三页。
而现代前端框架（如 React、Vue）给了我们一把“上帝视角”的工具 —— 组件化。
📦 什么是组件？
你可以把它想象成乐高积木。
- 每一块积木（组件）都独立完成一个小功能
- 它们可以被重复使用
- 搭在一起就能建成一座城堡（完整页面）
比如我在学习 React 时写的这个掘金首页：
function JuejinHeader() {
return (
<header>
<h1>掘金首页</h1>
</header>
);
}
function Articles() {
return <div><h2>文章列表</h2></div>;
}
function Checkin() {
return <div><h2>签到</h2></div>;
}
function App() {
return (
<div>
<JuejinHeader />
<main>
<Articles />
<aside>
<Checkin />
<TopArticles />
</aside>
</main>
</div>
);
}
看！我不再关心“哪个 div 在哪”，而是思考：“这个页面由哪些功能块组成？” → 然后把它们像搭积木一样组合起来。
我从搬砖工，变成了包工头。
✨ JSX：XML in JS？其实是 JS 的“语法糖外衣”
React 最让人震惊的就是 JSX —— 允许我们在 JS 中写类似 HTML 的结构。
但它不是 HTML！也不是字符串！
🔍 JSX 到底是什么？
其实，每一段 JSX 都会被编译成这样的 JS 调用：
<h1>Hello React</h1>
等价于：
React.createElement('h1', null, 'Hello React');
是不是瞬间觉得“哦～原来是函数调用”？
所以说，JSX 是 React.createElement() 的语法糖，让我们的代码更直观、更易读。
就像给苦药裹上糖衣，吃起来甜，疗效不变 😄
🌀 函数即组件：React 的极简哲学
在 React 里，一个返回 JSX 的函数，就是一个组件。
function TopArticles() {
return (
<div>
<h2>文章排行</h2>
</div>
);
}
就这么简单？对！这就是 React 的魅力：没有 class，没有模板引擎，只有函数和数据。
你不需要先学会“类”才能写 UI，只要会写函数，就能开始做组件。
这就像：
- HTML 是文字
- CSS 是化妆
- JS 是大脑
- React 是把这些统一指挥的“指挥官”
⚡️ 数据驱动视图：告别手动操作 DOM
以前我们要动态更新内容，得这样写：
document.getElementById('title').innerText = '新的标题';
而在 React 中，我们只关心“数据是什么”，React 自动帮你更新界面。
function App() {
const [name, setName] = useState('React');
setTimeout(() => {
setName('Vue'); // 3秒后自动变成 "Hello Vue!"
}, 3000);
return <h1>Hello {name}!</h1>;
}
👉 这里的 useState 就是 React 的“状态钩子”。它让函数也能拥有“记忆”。
你不用再去查 DOM、改 innerText，只需要说：“我现在想显示 Vue”，React 就知道该怎么刷新页面。
这就是所谓的 响应式（Reactive）编程：数据变了，UI 自动跟着变。
🔄 条件渲染 & 列表循环：用 JS 写 UI 逻辑
在 React 里，控制结构不再是模板指令（如 v-if），而是直接用 JS 表达式。
✅ 条件渲染
{isLogin ? <div>已登录</div> : <div>未登录</div>}
✅ 列表渲染
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
你看，完全就是 JavaScript 的三元运算符和数组方法！自由度拉满！
而且因为是 JS，你可以随时加判断、过滤、排序：
{todos.filter(t => !t.done).map(...)}
想想看，在传统模板里实现这种逻辑得多麻烦？
🔐 注意事项：JSX 的几个小脾气
虽然 JSX 很强大，但它也有自己的规则：
-
必须有一个根标签
// ❌ 错误 return ( <h1>标题</h1> <p>内容</p> ); // ✅ 正确 return ( <div> <h1>标题</h1> <p>内容</p> </div> );或者使用空标签
<>...</>（叫 Fragment）：return ( <> <h1>标题</h1> <p>内容</p> </> ); -
JSX 中不能使用
class，要用className<div className="container"></div>因为
class是 JS 关键字。 -
内联样式要用对象形式
<div style={{ color: 'red', fontSize: '16px' }}></div>
🌟 为什么 React 更“激进”？
相比 Vue 的渐进式设计（你可以只用一点点），React 更像是“全有或全无”：
- 你需要接受 JSX
- 你需要理解函数式编程思想
- 你需要拥抱 JS 而不是逃避它
但也正是这种“激进”，带来了极致的灵活性和强大的抽象能力。
🎯 总结：React 给我的三大震撼
| 震撼点 | 我的理解 |
|---|---|
| 组件化思维 | 页面不是一堆标签，而是一组可复用的功能模块 |
| JSX 的自由 | 让我用 JS 的全部能力来描述 UI，不再受限于模板语法 |
| 数据驱动 | 只需关注状态变化，UI 自动同步，告别手动 DOM 操作 |
🚀 下一步：我要继续探索…
- 如何用
useEffect处理副作用？ - 如何用 Context 实现跨组件传值？
- React Server Components 是什么？
- 和 Next.js 搭配能做什么？
前端的世界很大，React 只是起点。
但我知道，我已经找到了那把打开现代前端大门的钥匙。
❤️ 写给同样入门的你
如果你也刚接触 React，别怕那些陌生的术语。
试着写一个最简单的组件，让它显示一句话，然后点击按钮改变它。
那一刻，你会感受到：UI 原来可以这么“活”过来。
“代码不是冰冷的逻辑，而是会呼吸的生命。”
—— 某个正在学 React 的你
#React #前端开发 #JavaScript #组件化 #JSX #新手向 #掘金创作 #前端入门
