前言
还在用原生 JavaScript 一点点 createElement、appendChild 拼页面吗？
还在为了 HTML 和 JS 的频繁切换 感到头疼吗？
在学完一段时间 JavaScript 之后，我也遇到了同样的问题： 会写 JS，但写页面又累又乱。
于是我开始接触前端框架，而 React，几乎是所有前端学习路线里绕不开的一站。
这篇文章是一份 React 入门学习笔记，带你理解 React 在“爽”什么。
一、React 是什么？一句话先立住
如果用一句话来形容 React，它就是一个让你可以像搭积木一样写网页的 JS 框架：把页面拆成组件，用 JSX 把 HTML 和 JS 写在一起，再用声明式的方式描述界面，而不用自己频繁操作 DOM。写页面时，你只需要关心——当前的数据，应该对应什么样的界面。
二、开局第一步：搭建 React 项目
想玩 React，第一步一定是：把项目跑起来。
2.1create-react-app（CRA）
官方提供的“傻瓜式”脚手架，一条命令就能创建项目：
npx create-react-app my-react-app
cd my-react-app
npm start
优点是不用关心 webpack / babel，非常适合第一次上手 React
缺点则是项目偏重，启动速度相对慢一些
2.2Vite（更推荐）
现在更主流、也更轻量的选择：
npm create vite@latest
# 选择 React + JavaScript
cd my-vite-react
npm install
npm run dev
Vite 的特点就是一个字：快 。冷启动、热更新体验都非常好。
三、JSX：React 真正“爽”的地方
JSX 看起来像 HTML，其实是 JavaScript 的语法扩展。
3.1一个核心规则
JSX 中只能写“表达式”，不能写“语句”
- 表达式：变量、三元运算、
map✅ - 语句：
if、for、switch❌
JSX 里如果要写 JS，必须用 {} 包起来。
3.2实战一：列表渲染
原生 JS 写列表，通常要这样：
<ul id="list"></ul>
<script>
const arr = ['1', '2', '3'];
const ul = document.getElementById('list');
for (let i = 0; i < arr.length; i++) {
const li = document.createElement('li'); // 创建元素
li.textContent = arr[i]; // 设置内容
ul.appendChild(li); // 插入到页面
}
</script>
可以看到，哪怕只是渲染一个最简单的列表，也需要手动创建元素、设置内容，再逐个插入到 DOM 中，步骤相对固定且偏繁琐。
而在 React 里，用 map 就能搞定：
export default function App() {
const arr = ['1', '2', '3'];
return (
<ul>
{arr.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
React 的写法更像是在描述结果：“我需要一个由这些数据组成的列表”，
而不是一步步告诉浏览器如何操作 DOM。
3.3实战二：条件渲染
JSX 里不能直接写 if，但可以用 三元表达式 或 逻辑与：
export default function App() {
const flag = true;
return (
<div>
<h2>{flag ? '我比她高' : '她比我高'}</h2>
<p>{flag && '只有 flag 为 true 才能看到我'}</p>
</div>
);
}
四、样式处理：React 中怎么写 CSS？
4.1行内样式
注意两点：样式是 对象，属性名是 小驼峰。
export default function App() {
const styleObj = {
color: 'red',
fontSize: '20px'
};
return <div style={styleObj}>玉米</div>;
}
另外，JSX 要求返回的元素必须被同一个父节点包裹，否则会直接报错。
4.2className
import './index.css';
export default function App() {
return <div className="home">首页</div>;
}
JSX 中不能用 class，要用 className。
4.3动态类名
export default function App() {
const isActive = true;
return (
<div className={`box ${isActive ? 'active' : ''}`}>
动态样式
</div>
);
}
className 本质是一个字符串，因此可以配合条件表达式，按需拼接不同的样式类名。
五、事件绑定：从 onclick 到 onClick
事件名使用 小驼峰：onClick，绑定的是 函数本身，而不是字符串，JSX 中用 {} 来包裹 JS 表达式
5.1最常见写法：绑定一个事件函数
export default function App() {
const handleClick = () => {
console.log('点击了');
};
//<div onClick={handleClick()}>点我</div>❌
return <div onClick={handleClick}>点我</div>;
}
注意：不要加 () ，否则会立刻执行。
5.2事件传参：为什么一定要包一层箭头函数？
实际开发中，事件函数几乎都会用到参数，比如点击某一项列表。
export default function App() {
const songs = [
{ id: 1, name: '稻香' },
{ id: 2, name: '夜曲' }
];
const handler = (name) => {
console.log(name);
};
return (
<ul>
{songs.map(item => (
<li
key={item.id}
onClick={() => handler(item.name)}
>
{item.name}
</li>
))}
</ul>
);
}
onClick 接收的是一个函数，所以需要用 箭头函数包一层，点击时再调用真正的处理函数。
六、组件化：React 的灵魂
React 的核心思想之一就是 组件化 ：
鼓励把页面拆成独立组件，每个组件只负责一块界面。这样的结构更清晰，也更容易维护，页面复杂度增加时优势尤为明显。
6.1定义组件
// Head.jsx —— 头部组件
export default function Head() {
return (
<header>
<h1>我的 React 博客</h1>
</header>
);
}
// Main.jsx —— 主体内容组件
export default function Main() {
const songs = [
{ id: 1, name: '稻香' },
{ id: 2, name: '夜曲' }
];
return (
<main>
<h2>热门歌曲</h2>
<ul>
{songs.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</main>
);
}
6.2组合组件
// App.jsx（根组件）
import Head from './Head';
import Main from './Main';
export default function App() {
return (
<div>
{/* 引入并使用头部组件 */}
<Head />
{/* 引入并使用主体组件 */}
<Main />
</div>
);
}
6.3组件是如何渲染到页面上的？
前面我们写的所有组件，最终都需要通过一个入口文件渲染到页面中。在使用 Vite 或 create-react-app 创建的 React 项目中，这个入口文件通常叫做 main.jsx（或 index.jsx）。
// main.jsx —— 项目入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
// 将 App 根组件挂载到 index.html 中的 root 节点
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
);
这段代码只做了一件事： 找到页面中的 #root 容器，然后把 App 组件渲染进去。
之后我们写的所有组件，都会通过 App 这一层逐级展示到页面上。
最后
React 并不是“魔法”，它只是帮我们把 重复、繁琐、容易出错的 DOM 操作 封装了起来。
React 的开发流程非常清晰：首先，使用 CRA 或 Vite 创建项目，并在 main.jsx 中挂载根组件；
然后，通过 JSX 编写组件，使用表达式处理列表渲染、条件判断和事件绑定；
最后，将页面拆分成多个小组件，按需组合成完整页面。
当你开始用 组件 + JSX 思考页面时，写前端就像搭积木一样顺畅，不再困扰于复杂的 DOM 操作。
如果你和我一样，是在学完 JS 后第一次接触 React，希望这篇文章能帮你少走一些弯路。
