零基础也能学会的React入门：从安装到跑起第一个应用

大家好！我是一名从培训班出来的前端开发，现在也带过不少新人。回想我当初学 React 的时候，光是装环境就卡了三天——文档看不懂、命令报错、依赖冲突……简直怀疑人生。所以今天，我决定写一篇真正新手友好的 React 入门教程，手把手带你从零开始，跑起你的第一个 React 应用。

更重要的是，很多同学会问：“React 和后端有关系吗？比如 SpringBoot？”别急，我们最后也会聊聊前后端怎么配合，让你心里有底。

---

什么是 React？它能做什么？

React 是由 Facebook（现在叫 Meta）推出的一个前端 JavaScript 库，专门用来构建用户界面（UI），尤其是复杂的单页面应用（SPA）。比如你刷的抖音网页版、淘宝的商品详情页，背后很可能就用了 React。

简单理解：

• 前端 = 用户看到的页面（按钮、文字、图片）
• 后端 = 服务器处理数据（比如登录验证、商品库存）
• React 就是帮你高效地“组装”前端页面的工具

📌 注意：React 只负责前端！它不处理数据库、用户登录这些后端逻辑。但你可以用 React 做前端，用 SpringBoot（Java 后端框架）做后端，两者通过 API 通信。

---

第一步：搭建开发环境（别怕，超详细）

要写 React，你需要先装两个东西：

1. Node.js（提供 JavaScript 运行环境）
2. npm 或 yarn（包管理工具，用来安装 React）

安装 Node.js

1. 打开官网 https://nodejs.org
2. 点击 LTS 版本（长期支持版，最稳定）下载
3. 一路“下一步”安装即可

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

node -v
npm -v

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

💡 我当初就是因为装了太新的版本导致兼容问题，建议新手就用 LTS 版！

---

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

我们用官方推荐的工具 Vite（比老的 Create React App 更快），它能一键生成项目模板。

在终端执行以下命令：

npm create vite@latest my-react-app -- --template react

然后按提示操作：

1. 进入项目目录：cd my-react-app
2. 安装依赖：npm install
3. 启动开发服务器：npm run dev

你会看到类似这样的输出：

  VITE v4.4.9  ready in 234 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

打开浏览器，访问 http://localhost:5173，恭喜！你已经跑起了一个 React 应用！

---

第三步：看懂 React 项目结构

刚创建的项目长这样：

my-react-app/
├── public/          # 静态资源（如 favicon.ico）
├── src/             # 核心代码目录
│   ├── App.jsx      # 主组件
│   ├── main.jsx     # 入口文件
│   └── index.css    # 全局样式
├── package.json     # 项目依赖和脚本
└── vite.config.js   # Vite 配置

重点看 src/App.jsx，这是你看到的页面内容来源。

// src/App.jsx
function App() {
  return (
    <div>
      <h1>Hello React!</h1>
    </div>
  )
}

export default App;

这个函数 App 就是一个 React 组件——它是 React 构建 UI 的基本单位。

🔍 小知识：.jsx 是 React 特有的语法，允许你在 JavaScript 里写 HTML 标签（叫 JSX）。

---

第四步：动手改一改，理解核心概念

现在我们来做一个简单的计数器，顺便理解几个关键概念。

修改 App.jsx

// src/App.jsx
import { useState } from 'react'

function App() {
  // 使用状态（state）
  const [count, setCount] = useState(0)

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h1>我的第一个 React 应用</h1>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        点我加 1
      </button>
      <button onClick={() => setCount(0)}>
        重置
      </button>
    </div>
  )
}

export default App;

保存后，浏览器会自动刷新！点击按钮试试，数字会变化。

关键概念解释（用大白话）

概念	解释	类比
组件（Component）	一个可复用的 UI 模块，比如按钮、导航栏	像乐高积木，拼起来成完整页面
状态（State）	组件内部的数据，变了页面就更新	像手机电量，变了图标就变
useState	React 提供的“钩子”，用来声明状态	像给组件装个“记忆芯片”

💬 我当初死记硬背“状态驱动视图”，后来才明白：只要状态一变，页面自动跟着变，不用手动操作 DOM！

---

第五步：React 怎么和后端（比如 SpringBoot）配合？

很多新手以为 React 能直接连数据库，其实不行！React 是纯前端，必须通过 HTTP 请求 和后端通信。

典型工作流程

用户操作 (React) 
    → 发送请求 (fetch / axios) 
    → 后端接收 (SpringBoot) 
    → 查询数据库 
    → 返回 JSON 数据 
    → React 接收并更新页面

举个例子：获取用户列表

假设 SpringBoot 后端有一个接口：GET /api/users，返回：

[
  { "id": 1, "name": "小明" },
  { "id": 2, "name": "小红" }
]

在 React 中这样调用：

import { useState, useEffect } from 'react'

function UserList() {
  const [users, setUsers] = useState([])

  // 页面加载时自动请求
  useEffect(() => {
    fetch('http://localhost:8080/api/users')
      .then(res => res.json())
      .then(data => setUsers(data))
  }, [])

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}

⚠️ 注意：实际开发中要处理跨域问题（CORS），SpringBoot 需要配置允许前端域名访问。

---

新手常见问题 & 解决方案

问题	原因	解决方法
npm install 报错	网络慢或权限问题	用国内镜像：npm config set registry https://registry.npmmirror.com
页面没更新	忘了保存文件或浏览器缓存	检查是否保存，或强制刷新（Ctrl+F5）
useState is not defined	忘了导入	在文件顶部加 import { useState } from 'react'
端口被占用	其他程序占用了 5173	改端口：npm run dev -- --port 3000

---

学习建议：接下来该学什么？

你已经迈出了第一步！但 React 只是前端的一部分。结合你的兴趣，可以这样规划：

1. 巩固基础

   • 学习 JavaScript ES6+（箭头函数、解构赋值等）
   • 理解组件通信（props、事件传递）

2. 进阶 React

   • useEffect 处理副作用
   • 自定义 Hook 封装逻辑
   • 路由（React Router）

3. 连接真实后端

   • 学一点 SpringBoot 基础（哪怕只会写 API）
   • 用 Axios 替代 fetch（功能更强）
   • 学会调试网络请求（浏览器 DevTools → Network）

4. 部署上线

   • 用 npm run build 生成静态文件
   • 部署到 Vercel、Netlify（免费！）

✨ 我的真心话：培训班教得太快，很多同学只记命令不理解原理。不要死记代码，多问“为什么”。比如“为什么要用 useState 而不是普通变量？”——因为普通变量变了页面不会自动更新！

---

最后的话

React 看似复杂，其实核心思想很简单：用组件搭页面，用状态驱动变化。你不需要一开始就懂所有概念，先跑起来，再慢慢深入。

记住：每个大神都是从 Hello World 开始的。你现在写的每一行代码，都在为未来的全栈之路打基础。

加油！如果你跑通了第一个应用，欢迎在评论区打卡 👇 下一篇我可以写《用 React + SpringBoot 实现登录功能》，想看的扣 1！

---

作者：一名从培训班逆袭的前端开发者
本文共约 2600 字，适合收藏反复查阅。禁止搬运，但欢迎分享给正在挣扎的新手朋友！