0
0
0

React入门教程：从安装到第一个应用

一帆风顺
2025-12-18 14:18
阅读 1420

大家好！我是小林，一名211高校的计算机专业研究生，同时也是一名技术博客作者。我写这篇教程，是因为我当初学前端时，被各种框架、工具和术语搞得晕头转向——尤其是React，文档虽全，但对零基础的同学来说门槛不低。我希望通过这篇实践驱动、循序渐进的教程，帮你用最短的时间跑通第一个React应用，并理解它的核心思想。

更重要的是，掌握React不仅能让你写出交互丰富的网页，还能为你的简历增添亮眼的一笔。很多公司招聘前端岗位时，都会要求“熟悉React”或“有React项目经验”。而你今天完成的第一个小应用，就能成为你GitHub上的第一个前端项目！

一、React是什么？为什么值得学？

React 是由 Facebook（现 Meta）开发并开源的 JavaScript 库，专门用于构建用户界面（UI），尤其是单页面应用（SPA）。它的核心思想是“组件化”——把页面拆成一个个可复用的小部件（比如按钮、卡片、导航栏），每个部件自己管理自己的状态和样式。

📌 简单说：React 让你用 JavaScript 写 HTML，而且写得更高效、更模块化。

相比原生 JavaScript，React 的优势在于：

  • 代码结构清晰，易于维护
  • 社区庞大，生态丰富（比如 Next.js、React Native）
  • 企业级应用广泛使用（如 Instagram、Airbnb、腾讯文档等）

二、环境准备：三步搭建开发环境

别担心！现在搭建 React 开发环境比五年前简单多了。我们只需要三样东西：

1. 安装 Node.js

React 依赖 Node.js 来运行开发服务器和打包工具。

  • 前往 https://nodejs.org
  • 下载 LTS（长期支持）版本
  • 安装完成后，在终端（Windows 用 CMD/PowerShell，Mac 用 Terminal）输入：
    node -v
npm -v
    如果看到版本号（比如 v18.17.0），说明安装成功！

💡 我当初第一次装 Node.js 时，装了最新版结果和某些工具不兼容，后来换成 LTS 版才顺利。建议新手直接选 LTS！

2. 创建 React 项目

我们使用官方推荐的脚手架工具 create-react-app（简称 CRA），它能一键生成完整项目结构。

在终端中执行：

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

⏱️ 这个过程可能需要几分钟（会下载依赖包），请耐心等待。

创建完成后，进入项目目录并启动开发服务器：

cd my-first-react-app
npm start

你会看到浏览器自动打开 http://localhost:3000，显示一个旋转的 React Logo！恭喜，你的开发环境已就绪！

3. 准备代码编辑器

推荐使用 Visual Studio Code（VS Code），免费且插件丰富。

三、核心概念：用大白话讲清楚 React

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

在 React 中，一切皆组件。你可以把组件想象成乐高积木——每个积木是一个独立的功能块。

React 组件有两种写法，我们先学最简单的 函数式组件：

// src/App.js
function App() {
  return (
    <div>
      <h1>你好，React！</h1>
    </div>
  );
}

export default App;

注意：这里看起来像 HTML，但其实是 JSX（JavaScript + XML 的混合语法）。React 会把它自动转换成真正的 JavaScript 函数调用。

2. JSX：在 JavaScript 中写“HTML”

JSX 允许你在 JS 里直接写类似 HTML 的结构，但有几点要注意：

  • 必须用括号 () 包裹
  • 属性名用驼峰命名（如 className 而不是 class）
  • 可以嵌入 JavaScript 表达式：用 {} 包裹
function Greeting() {
  const name = "小明";
  return <p>你好，{name}！今天是 {new Date().toLocaleDateString()}</p>;
}

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

静态页面很无聊，我们要让用户能交互。React 用 useState 钩子（Hook）来管理状态。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始化 count 为 0

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

🔍 useState 返回一个数组：第一个元素是当前值，第二个是更新函数。这是 React 的“响应式”魔法——一旦 setCount 被调用，页面会自动重新渲染！

四、实战项目：做一个“待办事项”（Todo List）

现在，我们动手做一个简单的 Todo 应用，包含添加任务和标记完成的功能。这个小项目完全可以放进你的 GitHub 和 简历 里！

步骤 1：清理默认代码

打开 src/App.js，替换成以下内容：

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

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

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
      setInputValue(''); // 清空输入框
    }
  };

  const toggleTodo = (id) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div className="App">
      <h1>我的待办事项</h1>
      <div>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="输入新任务..."
        />
        <button onClick={addTodo}>添加</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li
            key={todo.id}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
            onClick={() => toggleTodo(todo.id)}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

步骤 2：理解代码逻辑

  • todos：存储所有任务的数组，每个任务有 id、text 和 completed 三个属性
  • inputValue：绑定输入框的值
  • addTodo：点击“添加”时，将新任务加入数组
  • toggleTodo：点击某个任务时，切换其完成状态
  • 使用 map 遍历 todos，动态生成列表项

步骤 3：美化一下（可选）

打开 src/App.css，添加一点样式：

.App {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

input, button {
  padding: 8px;
  margin: 5px;
}

li {
  padding: 8px;
  margin: 5px 0;
  background: #f0f0f0;
  cursor: pointer;
}

保存后，回到浏览器，试试添加几个任务并点击它们！是不是很有成就感？

五、常见问题解答（FAQ）

问题 解决方案
npm start 报错，端口被占用 在终端按 Ctrl+C 停止服务，或修改端口：PORT=4000 npm start
页面没更新？ 检查是否忘记 return，或是否正确使用了 {} 插值
useState 不生效？ 确保你是在函数组件内部调用它（不能在 if 或 for 里）
想在 GitHub 上展示项目？ 执行 npm run build 生成 build 文件夹，可部署到 GitHub Pages

❗ 特别提醒：不要直接修改 node_modules 里的文件！所有代码都应写在 src 目录下。

六、下一步学习建议

恭喜你完成了第一个 React 应用！但这只是起点。以下是为你规划的学习路径：

  1. 巩固基础

    • 深入理解 useEffect（处理副作用，如请求数据）
    • 学习组件间通信（props、回调函数）
    • 掌握条件渲染和列表渲染

  2. 动手做项目

    • 天气查询应用（调用 API）
    • 简易博客系统（Markdown + 列表）
    • 将你的 Todo List 升级：支持删除、本地存储（localStorage）

  3. 发布到 GitHub 

    git init
git add .
git commit -m "first react app"
git branch -M main
git remote add origin https://github.com/你的用户名/项目名.git
git push -u origin main

    然后在 GitHub 上创建仓库，把项目地址放进简历！

  4. 进阶方向

    • 学习 React Router（实现多页面跳转）
    • 尝试状态管理库（如 Redux 或 Zustand）
    • 探索 Next.js（React 的服务端渲染框架）

结语

我当初学 React 时，也是从一个简单的计数器开始的。不要怕犯错，每一个 bug 都是你成长的机会。记住：编程不是记住语法，而是学会解决问题。

你现在拥有的，不仅是一个能运行的 React 应用，更是一扇通往前端世界的大门。把它上传到 GitHub，写进简历，然后继续前进吧！

如果你觉得这篇教程有帮助，欢迎在评论区留言，或者关注我的技术博客。下期我们讲《用 React + API 做一个天气应用》！

加油，未来的前端工程师！🚀

标签:GitHub简历项目Javascript

评论 0

最热最新
暂无评论

为你推荐

暂无相关推荐
一帆风顺Lv.1
0
影响力
0
文章
0
粉丝

相关推荐

暂无相关推荐

精选内容

暂无精选内容