零基础也能上手：React从安装到写出第一个应用

大家好，我是一名从培训班走出来的前端开发者。刚入行那会儿，我也曾对着命令行发懵、被“组件”“状态”这些词绕得晕头转向。后来当了讲师，带过不少和我当初一样迷茫的新手，深知零基础学前端最怕什么——不是代码难，而是没人告诉你“第一步该点哪里”。

今天这篇教程，就是专门写给完全没碰过 React 的你。我会像当年带我的老师那样，手把手带你从安装开始，一步步做出你的第一个 React 应用。而且，我会特别注意安全意识——比如不随便让你全局安装可疑包、提醒你检查依赖来源等。毕竟，现在求职市场对开发者的安全素养越来越看重。

顺便提一句：虽然标题里有 Java，但别担心！React 是用 JavaScript 写的，和 Java 没有直接关系（很多人容易混淆这两个名字）。不过如果你以后想走全栈，学完前端确实可以再学 Java 做后端——这在求职时是个加分项！

---

为什么学 React？它到底能干啥？

简单说，React 是一个用来构建用户界面的 JavaScript 库。你可以用它做：

• 网页应用（比如后台管理系统、电商页面）
• 手机 App（配合 React Native）
• 甚至桌面软件（用 Electron）

它的核心思想是“组件化”：把页面拆成一个个小积木（比如按钮、导航栏、商品卡片），每个积木独立开发、组合使用。这样代码更清晰，也更容易维护。

我当初学的时候，最震撼的就是：改一个组件，其他地方完全不受影响！再也不用担心改一处崩全站了。

而且，React 是目前前端求职市场的硬通货。打开招聘网站，80% 以上的前端岗都要求“熟悉 React”。哪怕你只会基础，也比完全不会强得多。

---

第一步：搭建安全可靠的开发环境

安全提示：所有工具我们都通过官方渠道安装，避免使用第三方修改版或不明来源的脚本。

你需要准备什么？

工具	作用	安装建议
Node.js	运行 JavaScript 的环境	从 nodejs.org 下载 LTS 版
npm 或 yarn	包管理器（安装 React 等库）	Node.js 自带 npm，也可选装 yarn
代码编辑器	写代码的地方	推荐 VS Code（免费、插件多）

安装步骤（以 Windows/macOS 为例）

1. 安装 Node.js

   • 打开 https://nodejs.org/
   • 点击 LTS（长期支持版）绿色按钮下载
   • 安装时全部默认选项即可，不要勾选不明附加软件

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

   node -v
   npm -v
   

   如果显示版本号（如 v18.17.0），说明安装成功。

3. 安装 Create React App（官方脚手架）

   警告：不要全局安装 create-react-app！官方已不推荐这种方式。

   正确做法：直接用 npx（Node.js 自带）创建项目：

   npx create-react-app my-first-app
   

   这条命令会：

   • 自动下载最新版脚手架
   • 创建名为 my-first-app 的项目文件夹
   • 安装所有必要依赖（包括 React、Webpack 等）

   安全提示：npx 会从 npm 官方仓库拉取包，确保来源可信。如果网络慢，可配置淘宝镜像（但要确认镜像安全性）。

4. 启动项目

   cd my-first-app
   npm start
   

   浏览器会自动打开 http://localhost:3000，看到 React 默认欢迎页！

---

核心概念：用大白话讲清楚 React 怎么工作

别被术语吓到！React 其实就三个核心概念：

1. 组件（Component）—— 页面的“乐高积木”

在 React 里，一切皆组件。比如：

// src/App.js
function App() {
  return (
    <div>
      <h1>你好，React！</h1>
      <p>这是我的第一个组件</p>
    </div>
  );
}

• App 就是一个组件（函数形式）
• 它返回一段类似 HTML 的代码（叫 JSX）
• 组件名必须首字母大写

我当初学的时候总忘记大写，结果报错“App is not defined”，查了半小时才发现是大小写问题……

2. JSX —— 在 JS 里写 HTML

JSX 看起来像 HTML，但其实是 JavaScript 的语法扩展。规则很简单：

• 用 {} 插入 JS 表达式
• 属性名用驼峰（如 className 代替 class）
• 必须有闭合标签（<img /> 而不是 <img>）

示例：

function Welcome() {
  const name = "小明";
  return <h1>你好，{name}！</h1>; // 输出：你好，小明！
}

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

静态页面谁都会做，难点在于交互。React 用 useState 管理状态：

import { useState } from 'react';

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

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

• count 是当前值
• setCount 是更新函数
• 点击按钮 → 调用 setCount → React 自动重新渲染

新手常见误区：直接写 count = count + 1！这是无效的，必须用 setCount。

---

实战：做一个简单的待办事项（Todo List）

现在，我们用上面的知识做一个真实小项目。跟着敲，别只看！

步骤 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(''); // 输入框内容

  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>
      {/* 待办列表将在这里显示 */}
    </div>
  );
}

export default App;

步骤 3：渲染待办列表

在 button 下面添加：

<ul>
  {todos.map((todo, index) => (
    <li key={index}>{todo}</li>
  ))}
</ul>

关键点：key 是 React 识别列表项的唯一标识，必须提供！这里用 index 仅作演示，实际项目建议用唯一 ID。

步骤 4：添加删除功能（可选进阶）

给每个 li 加个删除按钮：

<li key={index}>
  {todo}
  <button onClick={() => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  }}>删除</button>
</li>

现在，你的 Todo List 已经能增删了！试试看吧。

---

新手常踩的坑 & 解决方案

问题	原因	解决方法
页面空白，控制台报错	JSX 语法错误（如未闭合标签）	检查所有标签是否成对，属性是否用驼峰
点击按钮没反应	忘记用 useState 更新状态	确保调用了 setXXX 函数
列表渲染警告 missing key	没给列表项加 key	为每个元素添加唯一 key
修改代码后不刷新	编辑器保存问题	确保文件已保存（VS Code 右上角有保存图标）
安装依赖特别慢	网络问题	可临时使用 npm 镜像（如 npm config set registry https://registry.npmmirror.com），但注意安全

安全提醒：永远不要直接运行网上复制的 npm install -g xxx 命令！先查清这个包是做什么的，是否来自可信作者。

---

学完这个，下一步怎么走？

恭喜你完成了第一个 React 应用！但这只是开始。根据我的教学经验，新手接下来应该：

1. 巩固基础（1-2周）

• 多写几个小项目：计数器、天气卡片、简易购物车
• 重点练习：状态管理、事件处理、条件渲染

2. 学习关键进阶概念

概念	为什么重要	学习资源建议
Props	组件间传数据	官方文档 “Passing Props”
useEffect	处理副作用（如请求数据）	官方文档 “Using Effect Hook”
路由（React Router）	多页面跳转	官方教程 + 实战项目
状态管理（Context / Redux）	大型应用数据共享	先学 Context，再看 Redux

3. 关于求职的真心话

• 不要等“学完所有再求职”！企业更看重解决问题的能力。
• 把你的 Todo List 项目部署到 GitHub Pages（免费），放进简历。
• 如果你会一点 Java（或其他后端语言），可以尝试用 Spring Boot 写个 API，让 React 去调用——这种全栈能力在求职时非常吃香。

我带过的学生里，最快的一个学了 3 个月就拿到 offer。他的秘诀不是天赋，而是每天写代码，哪怕只有 30 分钟。

---

最后：安全开发，从第一天做起

作为过来人，我想强调：安全不是高级话题，而是每个开发者的基本素养。

• 安装依赖前，用 npm info package-name 查看包信息
• 定期运行 npm audit 检查漏洞（Create React App 已内置）
• 不要把敏感信息（如 API 密钥）写在前端代码里
• 学会看控制台警告——很多安全问题会提前提示

React 本身很安全，但你的使用方式决定风险高低。养成好习惯，未来工作中你会感谢现在的自己。

---

结语

看到这里，你已经比 90% 的观望者走得更远了。记住：所有大神，都曾是连 npm start 都打错的新手。

如果你卡在某一步，别死磕！去 React 官方文档、Stack Overflow 或技术社区提问。前端圈子很友好，尤其愿意帮认真的人。

最后送你一句话：代码不会骗人，你付出多少，它就回报多少。现在，去运行你的第一个 React 应用吧！

P.S. 如果这篇教程帮到了你，不妨在评论区留个“已跑通”——这会让我知道，又一个新人踏上了前端之路 🌟