React 入门教程：从安装到第一个应用 —— 我的真实踩坑经历分享

代码不眠人

2025-06-29 18:29

阅读 561

开篇：为什么写这篇文章？

我第一次接触 React 的时候，是在公司接手一个需要重构的前端项目。当时的我对 Vue 还算熟悉，但对 React 几乎一无所知。领导只说了一句：“你把这个老系统用 React 重写一下，下个月上线。”我当时内心是崩溃的——别误会，不是抗拒学习新技术，而是完全没头绪啊！

于是那段时间我疯狂查阅资料、看视频、啃文档，结果发现网上很多教程虽然讲得清晰，却缺乏真实场景下的操作指引。很多入门文章都停留在“Hello World”的层面，而真正开发中遇到的坑——比如组件状态管理、父子传值、React Router 配置、CSS 模块化等等，都没有详细说明。

所以我现在想借这个机会，用亲身经历的方式，从一个零基础开发者角度出发，带大家一步步完成从 React 安装到写出第一个可运行项目的过程。整个流程我会穿插我在工作中遇到的问题和解决办法，让你少走弯路。

问题描述：为什么要学 React？它解决了什么问题？

在我最初工作的前两年，我们团队主要是用 jQuery + 原生 JS 来搭建页面。随着业务复杂度越来越高，维护成本也越来越大。最明显的一个痛点就是：代码结构混乱，视图更新困难。

举个例子，在一个用户信息展示页里，我们要根据用户的登录状态显示不同的内容。在 jQuery 中，通常是通过多个 if-else 判断来控制 DOM 的显示隐藏，一旦逻辑变复杂，整段代码就变得难以维护。再加上多人协作时命名冲突、事件绑定失效等问题，让我痛不欲生。

后来团队决定尝试使用框架，最终选择了 React。原因很简单：

组件化开发思想：把页面拆分成一个个独立模块，提升复用性；
虚拟 DOM 提升性能：避免频繁操作真实 DOM；
生态成熟，社区活跃：有大量工具支持（如 Redux、React Router、Ant Design 等）；
Facebook 和 Airbnb 大厂背书，未来趋势稳定；
与 TypeScript 友好兼容，利于大型项目类型安全。

解决方案：如何开始你的第一个 React 项目

第一步：安装环境准备

首先你需要安装 Node.js，建议使用长期支持版（LTS），可以通过 Node.js 官网下载安装包。

安装完成后，打开终端输入以下命令确认是否成功：

node -v
npm -v

接着我们需要使用 Facebook 官方提供的脚手架工具 Create React App 来快速搭建项目。

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

执行完这些命令后，浏览器会自动打开 http://localhost:3000 ，看到默认首页就表示环境安装成功了。

小贴士：如果你用的是国内网络，下载速度慢，可以考虑使用淘宝镜像：
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm create-react-app my-first-react-app

第二步：理解项目结构

安装完成后，我们先看一下 CRA 给我们生成的目录结构：

my-first-react-app/
├── node_modules/       # 第三方库依赖目录
├── public/
│   ├── index.html      # 主 HTML 文件
│   └── favicon.ico
├── src/
│   ├── App.css         # App 组件样式
│   ├── App.js          # 根组件文件
│   ├── App.test.js     # 测试文件（可忽略）
│   ├── index.css       # 全局样式
│   ├── index.js        # 入口文件
│   └── logo.svg
├── package.json
├── README.md
└── yarn.lock           # 锁定依赖版本（如果你用的是 yarn）

重点要关注的是 src 目录下的 App.js 和 index.js。我们可以在这里开始我们的第一个组件编写。

第三步：编写你的第一个组件

为了模拟真实工作中的需求，假设我们现在要做一个待办事项列表的功能。

1. 创建 `TodoList` 组件

我们在 src 目录下创建一个新文件 components/TodoList.js，输入以下代码：

import React from 'react';

const TodoList = () => {
  const todos = ['学习 React', '完成项目原型', '提交周报'];

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

export default TodoList;

这里我们用了 React 的基本语法：

使用函数声明组件；
JSX 语法渲染列表；
key 属性确保每个元素唯一；
使用数组的 map 方法进行循环渲染；

2. 在 `App.js` 引入该组件

修改 App.js：

import React from 'react';
import './App.css';
import TodoList from './components/TodoList';

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

export default App;

保存后，你应该可以看到页面上显示了三条待办事项。

第四步：添加交互功能

上面只是一个静态列表，实际工作中肯定需要动态增删改查。

1. 使用 `useState` 实现数据响应式更新

我们希望用户可以手动添加新的待办项，并点击删除某一项。

改造 TodoList.js：

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState(['学习 React', '完成项目原型']);
  const [inputValue, setInputValue] = useState('');

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

  const deleteTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="请输入任务"
      />
      <button onClick={addTodo}>添加</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => deleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

注意点：

useState 是 React Hooks 的核心 API 之一，用于在函数组件中管理状态；

不能直接修改原数组，必须使用 setTodos([...newArray]) 的方式；

删除操作通过 filter 创建新数组再赋值给 state；

这样我们就实现了一个可以添加和删除的任务列表。

第五步：美化界面 & 添加路由

1. 使用 CSS Modules 避免样式冲突

在真实的项目中，如果多个组件用了相同的 class 名，可能会发生样式覆盖。React 推荐使用 CSS Modules 或者 styled-components 来解决这个问题。

我们在 TodoList.js 同级目录下创建一个 TodoList.module.css 文件：

.todoItem {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.todoInput {
  padding: 8px;
  width: 200px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.deleteBtn {
  margin-left: 10px;
  color: red;
  cursor: pointer;
}

然后在组件中引入并使用：

import styles from './TodoList.module.css';

<li className={styles.todoItem}>
  {todo}
  <button className={styles.deleteBtn} onClick={() => deleteTodo(index)}>删除</button>
</li>

这样就能确保每个组件的样式是独立的，不会互相影响。

2. 加入 React Router 支持路由切换

假设我们后面还需要添加一个“已完成任务”的页面。这个时候就需要用到 React Router。

首先安装依赖：

npm install react-router-dom

然后我们新建两个页面组件：

src/pages/HomePage.js
src/pages/CompletedPage.js

分别导出两个简单组件：

// HomePage.js
import React from 'react';

const HomePage = () => {
  return <h2>这是待办事项页面</h2>;
};

export default HomePage;

// CompletedPage.js
import React from 'react';

const CompletedPage = () => {
  return <h2>这是已完成任务页面</h2>;
};

export default CompletedPage;

接下来配置路由：

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import CompletedPage from './pages/CompletedPage';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">待办事项</Link> | 
        <Link to="/completed">已完成</Link>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/completed" element={<CompletedPage />} />
      </Routes>
    </Router>
  );
}

export default App;

保存后你可以点击导航链接进行跳转了。

效果总结：项目的实际收益

当我把这套结构应用到公司项目中时，整个开发效率提升了不少：

代码结构更清晰，每个功能模块独立封装；
状态管理和组件通信更容易，尤其是配合 Redux Toolkit 后；
样式隔离做得更好，用 CSS Modules 再也不怕样式冲突；
调试更方便，React DevTools 能直接查看组件树和 Props；
后期扩展性更强，加个新页面只需要新增一个路由组件即可；
SEO 优化有了初步保障，因为 React 不像 Vue SSR 那么麻烦，结合 Next.js 可以轻松做服务端渲染。

经验分享：给 React 新手的一些建议

1. 不要一开始就追求完美架构

我在刚开始写的时候总是想着“这里要不要用 Redux？”、“需不需要抽离成单独组件？”其实大可不必，先把功能跑起来再说。等你熟练之后，自然就知道哪些部分需要抽象了。

2. 学会用 Chrome DevTools 查看 React 组件结构

推荐安装 React Developer Tools，它可以帮助你：

查看当前页面渲染了哪些组件；
查看某个组件的 props 和 state；
快速定位问题组件。

3. 优先掌握基础概念：Hooks、Props、State、组件生命周期

这些都是 React 的基石，掌握它们比盲目堆库更重要。

4. 合理选择 CSS 方案

如果只是小项目：全局 CSS + className 即可；
中小型项目：使用 CSS Modules；
大型项目：建议使用 styled-components 或 emotion；
UI 库推荐 Ant Design / Material UI / Tailwind CSS。

5. 注意浏览器兼容性和性能优化

使用 <React.Fragment> 或 <> 避免额外 DOM 包裹；
对大型列表使用虚拟滚动技术（如 react-virtualized）；
对高频事件（如 input change）使用防抖节流处理；
使用 React.memo 避免不必要的重新渲染；
生产环境记得打包压缩（默认 CRA 已经做了优化）；
合理使用懒加载（React.lazy + Suspense）。

前端开发工具界面-1

最后的小感悟

回过头来看，React 并不是万能的，但它确实是一个非常适合现代 Web 应用构建的框架。它没有强制性的规则，足够灵活，但也正因为如此，需要你自己去建立一套良好的编码规范和工程化实践。

我记得第一次把那个老旧的 jQuery 页面用 React 重构完成后，看到代码结构清晰、交互顺畅、逻辑分离明确的样子，那种成就感真的让我更加坚定继续深耕前端这条路的决心。

所以，不管你现在是刚毕业的学生，还是准备转型的新手程序员，亦或是像我一样的在职开发者，只要肯动手写，React 并没有想象中那么难。

加油，祝你在 React 之路上越走越远！

标签:Go算法React代码人生

最热最新

暂无评论

为你推荐

暂无相关推荐

React 入门教程：从安装到第一个应用 —— 我的真实踩坑经历分享

开篇：为什么写这篇文章？

问题描述：为什么要学 React？它解决了什么问题？

解决方案：如何开始你的第一个 React 项目

第一步：安装环境准备

第二步：理解项目结构

第三步：编写你的第一个组件

1. 创建 `TodoList` 组件

2. 在 `App.js` 引入该组件

第四步：添加交互功能

1. 使用 `useState` 实现数据响应式更新

第五步：美化界面 & 添加路由

1. 使用 CSS Modules 避免样式冲突

2. 加入 React Router 支持路由切换

效果总结：项目的实际收益

经验分享：给 React 新手的一些建议

1. 不要一开始就追求完美架构

2. 学会用 Chrome DevTools 查看 React 组件结构

3. 优先掌握基础概念：Hooks、Props、State、组件生命周期

4. 合理选择 CSS 方案

5. 注意浏览器兼容性和性能优化

最后的小感悟

评论 0

为你推荐

精选内容

React 入门教程：从安装到第一个应用 —— 我的真实踩坑经历分享

开篇：为什么写这篇文章？

问题描述：为什么要学 React？它解决了什么问题？

解决方案：如何开始你的第一个 React 项目

第一步：安装环境准备

第二步：理解项目结构

第三步：编写你的第一个组件

1. 创建 TodoList 组件

2. 在 App.js 引入该组件

第四步：添加交互功能

1. 使用 useState 实现数据响应式更新

第五步：美化界面 & 添加路由

1. 使用 CSS Modules 避免样式冲突

2. 加入 React Router 支持路由切换

效果总结：项目的实际收益

经验分享：给 React 新手的一些建议

1. 不要一开始就追求完美架构

2. 学会用 Chrome DevTools 查看 React 组件结构

3. 优先掌握基础概念：Hooks、Props、State、组件生命周期

4. 合理选择 CSS 方案

5. 注意浏览器兼容性和性能优化

最后的小感悟

评论 0

为你推荐

相关推荐

精选内容

1. 创建 `TodoList` 组件

2. 在 `App.js` 引入该组件

1. 使用 `useState` 实现数据响应式更新