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

提到前端框架，React 就像前端圈的“流量明星”——出道早，粉丝多，生态繁荣，连面试官问问题时都喜欢加一句：“会 React 吗？”

别慌！今天这篇文章，不讲玄学，不吓人，我们用通俗易懂的语言带你快速认识 React。

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 reactcd my-appnpm installnpm run dev

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

React 适合做啥？

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

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

总结

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

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

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

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

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

评论区0