从零开始，用 React 写出你的第一个前端应用

大家好，我是一个干了五年后端开发的工程师，主要用 Java 写业务系统。但最近三年，我越来越频繁地和前端打交道——尤其是 React。很多后端同学（包括我当初）一看到“前端”就头大：JS、框架、打包工具……一堆新概念扑面而来。

但其实，React 并没有想象中那么难。今天我就用最直白的语言，带你从零安装到写出第一个 React 应用。哪怕你连 HTML 都不熟，只要跟着做，也能跑起来！

---

为什么后端开发者也该懂点 React？

先说个真相：现在前后端分离是主流架构。Java 后端负责提供 API 接口，而前端用 React 调用这些接口展示数据。如果你完全不懂前端，和前端同事沟通时就会像“鸡同鸭讲”。

我当初学 React 的契机，就是被一个 bug 折磨了一周——后来发现是前端传参格式不对。如果早点懂点 React，能省下多少时间！

所以，这篇教程特别适合：

• 会写 Java，但对前端陌生的后端开发者
• 想快速上手 React 的零基础新手
• 想验证“React 到底难不难”的好奇者

---

第一步：搭建开发环境（别怕，三分钟搞定）

React 项目依赖 Node.js，但它和 Java 一样，只是个运行环境。我们不需要深入理解，只要装好就行。

安装步骤

1. 下载 Node.js
   访问 https://nodejs.org，下载 LTS 版本（长期支持版，更稳定）。

2. 验证安装
   打开终端（Windows 用 CMD 或 PowerShell，Mac 用 Terminal），输入：

   node -v
   npm -v
   

   如果看到类似 v18.17.0 和 9.6.7 的版本号，说明装好了。

💡 小贴士：npm 是 Node 的包管理工具，类似 Java 的 Maven，用来下载 React 等依赖。

3. 创建第一个 React 项目
   在终端执行：

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

   这条命令会自动创建一个叫 my-first-react-app 的文件夹，并生成项目骨架。

   ⚠️ 注意：npx 不是拼写错误！它是 Node 自带的工具，能直接运行远程包，无需全局安装。

4. 启动项目

   cd my-first-react-app
   npm start
   

   浏览器会自动打开 http://localhost:3000，看到一个旋转的 React Logo —— 恭喜，你已经跑起第一个 React 应用了！

---

第二步：React 核心概念，用 Java 类比讲清楚

很多新手卡在“组件”“状态”这些词上。其实，用 Java 的思维理解 React 很简单：

React 概念	Java 类比	说明
组件 (Component)	一个类（Class）	比如 UserCard 组件 ≈ UserCard.java
Props	方法参数	父组件传数据给子组件，就像调用方法传参
State	对象的字段（Field）	组件内部可变的数据，比如计数器的值
JSX	字符串模板	用 JS 语法写 HTML，类似 String.format()

举个例子：一个简单的计数器

// src/Counter.js
import React, { useState } from 'react';

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

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        点我加 1
      </button>
    </div>
  );
}

export default Counter;

• useState(0) 相当于声明一个初始值为 0 的字段
• setCount 就是修改这个字段的方法
• {count} 是把变量插入到 HTML 中，类似 Java 的 System.out.println("count=" + count)

是不是没那么玄乎了？

---

第三步：动手实战——做个“待办事项”小应用

光看不练假把式。我们现在来做一个极简的 Todo List，只需 50 行代码。

步骤 1：修改 App.js

删掉 src/App.js 里的默认内容，替换成：

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

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

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

  return (
    <div style={{ padding: '20px' }}>
      <h1>我的待办事项</h1>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入任务"
        onKeyPress={(e) => e.key === 'Enter' && addTodo()}
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

步骤 2：保存并查看效果

保存文件后，浏览器会自动刷新。现在你可以：

• 在输入框打字
• 点“添加”或按回车
• 看到任务出现在列表中

代码解析

• todos 存所有任务，input 存输入框内容
• onChange 监听输入变化，实时更新 input
• setTodos([...todos, input]) 是“不可变更新”——这是 React 的最佳实践（类似 Java 的不可变集合）

---

新手常踩的坑 & 解决方案

❌ 问题1：改了代码，页面没更新？

• 原因：可能漏了 export，或文件名大小写不对（Linux/Mac 区分大小写）
• 解决：检查文件是否保存，控制台是否有红字报错

❌ 问题2：useState 不生效？

• 原因：直接修改 state，比如 count = count + 1
• 正确做法：必须用 setCount(count + 1)

❌ 问题3：列表渲染警告“缺少 key”

• 原因：React 需要唯一 key 来高效更新 DOM
• 解决：map 时加上 key={index}（正式项目建议用唯一 ID）

❌ 问题4：和 Java 后端联调跨域？

• 临时方案：在 package.json 同级创建 setupProxy.js：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  module.exports = function(app) {
    app.use('/api', createProxyMiddleware({
      target: 'http://localhost:8080', // 你的 Java 后端地址
      changeOrigin: true,
    }));
  };
  

  然后重启 npm start，前端请求 /api/xxx 会自动转发到 Java 服务。

---

下一步怎么学？我的建议

1. 先别碰复杂工具：Vite、Webpack、TypeScript 这些先放一放，先把 React 核心搞懂。
2. 多写小项目：比如天气查询、博客列表、简易聊天室。
3. 结合你的 Java 优势：用 Spring Boot 写个 REST API，再用 React 调用它——这才是真实开发场景！
4. 推荐学习路径：
   • 官方文档 React 快速入门
   • 免费视频：B站“React 零基础入门”
   • 实战书：《React 学习手册》

---

最后说两句

我当初学 React 时，也觉得 JSX 奇怪、state 难搞。但坚持写完三个小项目后，突然就“开窍”了。前端不是魔法，只是另一种编程思维。

你现在看到的这个待办事项，虽然简单，但已经包含了 React 的核心思想：数据驱动视图。只要掌握这一点，后面学 Hooks、路由、状态管理都会轻松很多。

别怕，动手敲一遍代码，你离“全栈开发者”又近了一步。加油！