零基础也能上手！React入门：从安装到跑起你的第一个应用

大家好，我是小程，一名在一线互联网公司干了三年前端开发的工程师。业余时间，我在B站做技术UP主，经常收到粉丝私信问：“我完全没接触过前端，能学React吗？”“React到底难不难？”

我的答案是：完全可以，而且比你想象得更简单！

我当初学React的时候，也是一头雾水——什么虚拟DOM、组件、状态管理……听起来像天书。但只要你一步步来，很快就能写出自己的第一个React应用。今天这篇教程，就是为零基础小白量身打造的。我会用最直白的语言，带你从安装环境开始，亲手做出一个能运行的React项目。

别担心“后端”“GitHub”这些词，即使你没听过也没关系，我会解释清楚。这篇教程的目标只有一个：让你成功跑起第一个React应用，并理解它为什么这样工作。

---

一、React 是什么？能用来做什么？

React 是由 Facebook（现在叫 Meta）开发的一个 JavaScript 库，专门用来构建用户界面（UI）。你可以把它理解成“搭积木”的工具——把网页拆成一个个小模块（比如按钮、导航栏、商品卡片），每个模块独立开发，最后拼成完整页面。

🌰 举个例子：
你在淘宝看到的商品列表页，顶部有搜索框，中间是商品卡片，底部有分页器——这些都可以做成 React 的“组件”，组合起来就是整个页面。

谁在用 React？
几乎所有大厂都在用：阿里、腾讯、字节、美团……产品经理（简称“产品”）提需求时，经常会说“这个功能用 React 实现”。所以，学 React 不仅是技术选择，更是进入大厂的敲门砖。

---

二、准备工作：搭建你的开发环境

别被“环境搭建”吓到！现在工具很智能，我们只需要三步：

第一步：安装 Node.js

React 依赖 Node.js 运行。去官网 https://nodejs.org 下载 LTS 版本（长期支持版，最稳定），一路默认安装即可。

安装完后，打开终端（Windows 用 CMD 或 PowerShell，Mac 用 Terminal），输入：

node -v
npm -v

如果看到版本号（比如 v18.17.0 和 9.6.7），说明安装成功！

💡 小贴士：npm 是 Node 自带的包管理工具，用来下载 React 等第三方代码库。

第二步：创建你的第一个 React 项目

在终端中运行以下命令（别手动敲，直接复制粘贴）：

npx create-react-app my-first-react-app

• npx：临时运行一个工具（不用提前安装）
• create-react-app：官方提供的脚手架工具，一键生成项目结构
• my-first-react-app：你的项目文件夹名字（可自定义）

等待 2~5 分钟（看网速），你会看到提示 “Happy hacking!” ——恭喜，项目创建成功！

第三步：启动项目

进入项目目录并启动开发服务器：

cd my-first-react-app
npm start

浏览器会自动打开 http://localhost:3000，看到一个旋转的 React logo 和欢迎文字。这就是你的第一个 React 应用！

---

三、核心概念：React 到底怎么工作的？

别急着改代码！先理解三个关键概念，它们是 React 的地基。

1. 组件（Component）：UI 的基本单位

React 页面由组件组成。每个组件是一个 JavaScript 函数，返回一段 HTML（实际是 JSX，后面讲）。

比如，默认项目中的 App.js 文件就是一个组件：

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, React!</p>
      </header>
    </div>
  );
}

• function App()：这是一个函数式组件
• return (...)：返回要显示的内容（注意用小括号包裹）

✅ 新手友好提示：你可以把组件想象成“乐高积木”，App 就是最大的那块底板。

2. JSX：在 JS 里写 HTML

JSX 是 React 的语法扩展，让你能在 JavaScript 中写类似 HTML 的代码。

对比一下：

普通 HTML	React 中的 JSX
<div class="title">Hello</div>	<div className="title">Hello</div>

注意两点：

• class 要写成 className（因为 class 是 JS 保留字）
• 所有标签必须闭合，比如 <img /> 不能写成 <img>

3. 状态（State）：让页面“动”起来

静态页面谁都会做，真正的交互靠“状态”。比如点击按钮，文字变颜色——这就是状态变化。

React 用 useState 钩子（Hook）管理状态：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 声明状态

  return (
    <div>
      <p>你点了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我加1
      </button>
    </div>
  );
}

• useState(0)：创建一个初始值为 0 的状态
• count：当前状态值
• setCount：修改状态的函数

🎯 关键理解：状态变了，React 会自动重新渲染组件，你不用手动操作 DOM！

---

四、实战：做一个简单的待办事项（Todo）应用

光看不练假把式！我们现在动手做一个极简 Todo 应用，包含：输入任务、添加任务、显示列表。

步骤 1：清理默认代码

打开 src/App.js，替换成以下干净模板：

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>我的待办清单</h1>
    </div>
  );
}

export default App;

步骤 2：添加状态和输入框

import { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);       // 存储所有任务
  const [inputValue, setInputValue] = useState(''); // 输入框内容

  return (
    <div className="App">
      <h1>我的待办清单</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入新任务"
      />
      <button>添加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

步骤 3：实现“添加”功能

给按钮加上点击事件：

<button onClick={() => {
  if (inputValue.trim()) {
    setTodos([...todos, inputValue]); // 添加新任务
    setInputValue(''); // 清空输入框
  }
}}>
  添加
</button>

完整代码如下：

import { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  return (
    <div className="App">
      <h1>我的待办清单</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入新任务"
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

保存文件，回到浏览器——试试输入任务并点击“添加”！是不是立刻显示出来了？

🔍 技术细节：[...todos, inputValue] 是展开运算符，表示“把 todos 的所有元素拿出来，再加上新的 inputValue”。

---

五、新手常见问题解答（FAQ）

Q1：报错 “Module not found” 怎么办？

• 原因：可能删了 src 目录下的某些文件（如 logo.svg）
• 解决：检查 App.js 是否还引用了已删除的文件，删掉相关代码即可

Q2：为什么修改代码后浏览器没更新？

• 确保终端里 npm start 进程还在运行
• 检查代码是否有语法错误（终端会报红）

Q3：React 和 Vue/Angular 有什么区别？

框架	特点	适合人群
React	灵活、生态庞大、JSX 语法	想深入前端底层
Vue	简单易上手、文档友好	快速开发中小型项目
Angular	全功能框架、TypeScript	企业级大型应用

💬 我的建议：如果你目标是进大厂，React 是必选项。

Q4：需要懂后端才能学 React 吗？

完全不需要！
React 只负责“前端展示”。后端（比如用 Java、Python 写的服务器）提供数据接口，前端通过 API 获取数据。初学阶段，你可以用假数据模拟，等 React 熟练后再学前后端联调。

---

六、下一步学习建议 & 技术分享

恭喜你完成了第一个 React 应用！但这只是起点。接下来我建议：

1. 动手改造 Todo 应用

   • 加个“删除”按钮
   • 用 localStorage 让任务刷新后不丢失
   • 尝试用 CSS 美化界面

2. 学习核心进阶概念

   • Props（组件间传数据）
   • useEffect（处理副作用，比如发请求）
   • 路由（React Router）

3. 参与开源 & 技术分享
   把你的 Todo 项目上传到 GitHub（全球最大的代码托管平台）：

   git init
   git add .
   git commit -m "first commit"
   # 在 GitHub 创建仓库后
   git remote add origin https://github.com/你的用户名/项目名.git
   git push -u origin main
   

   分享到朋友圈或技术社区，不仅能获得反馈，还能积累作品集！

🎁 最后送你一句我常对 B 站观众说的话：“编程不是记住语法，而是解决问题的能力。” 遇到 bug 别慌，99% 的问题 Google 都有答案。

---

如果你觉得这篇教程对你有帮助，欢迎关注我的 B 站账号「小程的技术笔记」，我会持续更新 零基础友好的前端实战教程。下期预告：《用 React + Mock 数据模拟真实电商首页》！

记住：每一个大神，都曾是从 “Hello World” 开始的。你，也可以！