React 极速入门怎么学：三个实战示例带你上手

你听说 React 很火，想学却又被 webpack、babel、虚拟 DOM 这些词劝退，下载了一堆资料却连一个能跑的页面都没写出来。React 极速入门的核心就一句话：别先啃配置和术语，直接用三个能运行的小例子建立手感。本文带你写完计数器、列表渲染、条件切换三个最小可用示例，每一步都给可直接复制的代码，照着敲你就能跑出第一个 React 页面。编程狮把门槛压到最低，零基础也能跟着做。

React 极速入门怎么学：三个实战示例带你上手封面图

一、react 极速入门到底怎么开始

react 极速入门最怕一上来就陷进环境配置。对新手最友好的做法，是先理解"一个 React 组件 = 一段返回界面的函数"这个最小模型，再补工具链。你不需要先搞懂虚拟 DOM 原理，只要会写函数、会返回 JSX，就已经在写 React 了。

把组件想象成一个"做蛋糕的模具"：你丢进去不同的料（数据），它就吐出不同的蛋糕（界面）。同一个模具可以反复用、可以传不同的料，这就是组件化思想的精髓。先建立这个直觉，后面遇到的概念都会自动归位。

三个必备的最小概念先记住：第一，useState 是让界面"记得住变化"的钩子；第二，{ } 里可以塞 JavaScript 表达式，用来把数据填进界面；第三，点击事件用 onClick 触发函数。只要这三样，就能写出绝大多数交互页面。

如果还没装环境，建议先过一遍 React 入门教程，照它的步骤把项目跑起来；本文的三个例子，直接放进它的示例文件里就能看到效果。别纠结"哪个构建工具最好"，先把第一个例子跑通比什么都重要。

二、第一个可运行例子：计数器

计数器是认识 useState 最好的起点：点一下按钮，数字加一。它展示了 React 最核心的"数据变、界面跟着变"。

import { useState } from 'react'

function Counter() {
  const [n, setN] = useState(0)
  return (
    <button onClick={() => setN(n + 1)}>
      点击了 {n} 次
    </button>
  )
}

export default Counter

useState(0) 返回当前值 n 和修改函数 setN。点击时调用 setN(n + 1)，React 会重新渲染组件，界面上的数字就更新了。注意不能直接写 n = n + 1，必须走 setN，React 才知道"数据变了要刷新界面"。

useState 是 React 专门给函数组件准备的钩子，名字里的 state 就是状态的意思。它把"会变化的数据"和"界面自动刷新"这两件事绑在一起：你只管调用 setter 修改数据，重新渲染交给 React 自动完成。理解了这一点，后面所有的交互都建立在它之上，它也成了你写 React 时用得最频繁的钩子。

💡 小提示：把 n 当成"只读的当前值"，永远通过 setN 去改它。这个习惯养成就不会再为"界面不更新"抓狂。

三、列表渲染：把数组变成一排元素

真实页面里最常见的就是"数据列表"，比如商品、评论、菜单。React 用数组的 map 方法，把每个元素映射成一个 JSX 节点，一次性渲染出一排。

function FruitList() {
  const items = ['苹果', '香蕉', '橘子']
  return (
    <ul>
      {items.map((name, i) => (
        <li key={i}>{name}</li>
      ))}
    </ul>
  )
}

export default FruitList

items.map 把数组里的每个名字变成一个 <li>。这里有个关键点：key 是每个节点的唯一标识，帮助 React 高效定位变化，写列表时一定要带上，通常用数据的唯一 id，示例里用下标 i 只是图省事。要系统补 HTML 基础，HTML 速查手册里的标签清单能随时对照。

⚠️ 注意：真实项目里尽量别用数组下标当 key，一旦列表会增删排序，下标会错位。数据有 id 就用 id，这是 React 官方明确建议的做法。

四、条件切换：点击切换显示内容

第三个例子把"状态 + 事件 + 条件"合在一起：点按钮切换一段文字的显隐。这里用到 && 短路，条件为真就渲染，为假就什么都不显示。

import { useState } from 'react'

function Toggle() {
  const [open, setOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setOpen(!open)}>切换显示</button>
      {open && <p>这段文字现在显示出来了</p>}
    </div>
  )
}

export default Toggle

点"切换显示"会把 open 在 true/false 之间翻转，open && <p> 随之决定那段文字出不出。注意这里的 open 本身是布尔值，所以 && 很安全；如果换成可能为 0 的数字，就要先写成 数字 > 0 再短路，否则会误显示"0"。

把计数器、列表、切换这三个例子合起来，你就已经掌握了 React 日常开发的骨架：用 useState 记状态、用 map 出列表、用 && 做条件。想看更系统的讲解，React 官方教程的后续章节能接着往下练。

五、react 极速入门的三条学习建议

走完三个例子，给你三条能少走弯路的建议。第一，先跑通再求懂：环境一时配不对就先用官方最简模板，让代码先动起来，兴趣比完美配置更重要。第二，改了就看效果：每写一个例子都故意改个数、换个条件，观察界面怎么变，手感是改出来的。第三，遇错先读报错：React 的报错信息很友好，红字里通常直接告诉你哪一行、什么原因。

react 极速入门不是"速成精通"，而是先建立能跑、能改、能调试的最小闭环。闭环一旦转起来，后面学路由、状态管理、组件拆分都会顺理成章。把今天这三个文件留着，明天试着把它们组合进一个页面，你就已经不再是"只看教程不写代码"的旁观者了。

React 三个入门示例分别练什么

总结

React 极速入门的关键，是先跑通最小闭环、再补概念：一个组件就是返回界面的函数，用 useState 记状态、用 map 渲染列表、用 && 做条件切换。三个示例覆盖了日常开发的骨架。

你应当带走的要点：别一上来陷进配置，先让代码动起来；改了就观察效果，手感是改出来的；遇错读红字报错。下一步建议把三个示例组合进同一个页面，再去跟配套课程系统学路由与状态管理，基础就稳了。

延伸学习

想把这块知识系统补齐，可以按这个顺序来：

先跟着 React 极速入门指南课程把示例串成完整学习路径；
碰到父子组件传值疑问，回看这篇 React Hooks 父子调用笔记补充细节；
想从零打基础，用前端零基础实战课程把 HTML、JS 与 React 一起补齐。

常见问题

Q：完全没学过 JavaScript 能直接学 React 吗？

不太建议。React 大量复用 JavaScript 的语法（函数、数组 map、箭头函数），没这些底子会处处卡。先用一两天过一遍 JS 基础，再回来学 React，理解速度会快很多，也更不容易半途放弃。

Q：为什么我改了数据界面却没更新？

多半是直接修改了状态变量，比如写了 n = n + 1。React 只认通过 setN 这类 setter 触发的更新。记住：状态是只读的，永远用 setter 去改，界面才会跟着刷新。

Q：必须用 webpack 或 vite 才能写 React 吗？

初学阶段不必。官方提供的在线最简模板或脚手架能让你免去配置直接写代码。等三个示例都跑熟了，再了解 vite 这类工具在做什么，就不会被一堆配置文件吓退。