React 是啥？

React 是 一个用来写界面的 JavaScript 库，由 Facebook（现在叫 Meta）开发和维护。

注意，这里不是“框架”，React 自称是“库”，它只关心界面层。换句话说：

Angular 是一个“包办婚姻”，啥都管；
Vue 是个“贴心小棉袄”，轻巧灵活；
React 就像“单身贵族”，只管界面渲染，其它事你自己配。

React 的核心思想

一句话总结：界面 = 状态的函数。

举个例子：

你钱包里有 💰100 块，界面显示“余额：100”；
你买杯咖啡花掉 30 块，状态变成 70，界面自动更新为“余额：70”。

不用自己去改 DOM，React 会帮你“算”出来。

必须掌握的几个概念

组件

React 最小的颗粒是组件，就像乐高积木。一个按钮、一个表单、甚至整个页面，都是组件。

jsx

function Hello() {
  return <h1>Hello, React!</h1>;
}

JSX

JSX 就是“JavaScript + XML”的缩写，看起来像 HTML，其实是 JS 语法糖。

jsx

const name = "小明";
const element = <h1>你好，{name}</h1>;

Props 和 State

Props：外部传进来的数据，像参数。
State：组件自己管的数据，像存钱罐。

jsx

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

jsx

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点我</button>
    </div>
  );
}

React 的工具链

想快速上手，可以用 Vite 或 [Create React App]：

bash

# 推荐 Vite，更快更轻量
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

浏览器里打开 http://localhost:5173，你就能看到 React 欢迎页面啦！

React 适合做啥？

各种 Web 应用（后台管理系统、官网、社区……）
移动端（配合 React Native）
桌面应用（配合 Electron）

一句话：哪里有界面，哪里就能用 React。

总结

React 并不神秘，核心就三点：

组件化（像乐高搭界面）；
声明式（界面自动随状态更新）；
生态大（配套库多、文档多、工作机会也多）。

入门之后，你就会发现：React 其实是个“傻瓜式 UI 工厂”，它帮你省掉了操作 DOM 的繁琐，剩下的就是愉快地“拼积木”了。

💡 下期如果你想，我可以写一篇 《React 进阶：Hooks 全解》，带你把 React 玩得更溜。

React 简明教程：写给“想入坑又怕坑”的你

评论区 0