React进阶之路：从入门知识到项目实战精通

最新推荐文章于 2025-06-19 12:39:49 发布

原创最新推荐文章于 2025-06-19 12:39:49 发布 · 1.8k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #javascript #Axios #Fetch API #字符串操作 #组件 #路由

2️⃣ 使用 Vite 创建 React 项目

2️⃣ React 路由（React Router）

3️⃣ 全局状态管理

4️⃣ 数据请求（API 调用）

📌 第六步：实战项目

React从 0-1 学习 React 开发，建议按照以下步骤系统学习：

📌 第一步：学习基础前置知识

1️⃣ HTML & CSS

了解 HTML 结构（div、span、button、form 等）
掌握 CSS 选择器、Flexbox、Grid、响应式设计
学习 CSS 预处理器（SCSS）和 CSS 框架（Tailwind CSS）

2️⃣ JavaScript（ES6+）

React 依赖 JavaScript，掌握以下核心概念：

变量声明：let / const
箭头函数：const sum = (a, b) => a + b
解构赋值：const { name, age } = person
展开运算符：const arr2 = [...arr1, 4]
模板字符串：console.log(Hello, ${name})
数组方法（map()、filter()、reduce()）
Promise & async/await
模块化：import / export

📌 第二步：搭建 React 开发环境

1️⃣ 安装 Node.js

从 Node.js 官网下载并安装，建议选择 LTS 版本。

2️⃣ 使用 Vite 创建 React 项目

相比 create-react-app，Vite 更快更轻量，推荐使用：

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

项目成功运行后，浏览器打开 http://localhost:5173。

📌 第三步：React 核心概念

1️⃣ 组件（Component）

React 组件分为：

函数组件（推荐）：

function Welcome() {
  return <h1>Hello, React!</h1>;
}

类组件（旧写法）：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

2️⃣ Props（属性）

用于父组件向子组件传递数据：

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
<Greeting name="Alice" />

3️⃣ State（状态管理）

使用 useState 让组件具有内部状态：

import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

4️⃣ 事件处理

<button onClick={() => alert("按钮被点击了")}>点击我</button>

5️⃣ useEffect（副作用）

常用于请求数据、订阅事件：

import { useEffect } from "react";
useEffect(() => {
  console.log("组件挂载了");
}, []);

📌 第四步：搭建简单项目

建议通过小项目来练习： ✅ TodoList ✅ 计数器 ✅ 天气查询 ✅ 用户管理系统 ✅ 博客或电商项目

下面是一个使用React框架创建的简单TodoList应用的代码示例。这个示例包括添加新任务、展示任务列表和标记任务为已完成的功能。

首先，确保你的开发环境中已经安装了Node.js和npm。然后，你可以通过npx create-react-app todolist命令来创建一个新的React项目。

接下来，在src文件夹中找到并编辑App.js文件：

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

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

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, { text: inputValue, completed: false }]);
      setInputValue('');
    }
  };

  const handleToggleTodo = (index) => {
    const updatedTodos = [...todos];
    updatedTodos[index].completed = !updatedTodos[index].completed;
    setTodos(updatedTodos);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index} style={{ textDecoration: todo.completed ? 'line-through' : '' }} onClick={() => handleToggleTodo(index)}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

这段代码定义了一个简单的TodoList应用，其中包含一个输入框用于输入新的待办事项，一个按钮用于将新的待办事项添加到列表中，以及一个无序列表用于显示所有的待办事项。每个列表项都可以被点击以标记为完成或未完成。

此外，需要在src目录下创建或修改App.css文件来为应用添加一些样式。例如：

.App {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

input {
  padding: 10px;
  width: 200px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
}

这样就创建了一个基础版本的TodoList应用。可以根据自己的需求进一步扩展和美化它。

📌 第五步：React 进阶学习

在掌握基础语法后，需要深入学习 React 的进阶特性，让开发更高效、组件更健壮。

1️⃣ 组件通信

组件之间的数据传递方式：

父组件 → 子组件：使用 props

function Child({ message }) {
  return <p>{message}</p>;
}
function Parent() {
  return <Child message="Hello from Parent" />;
}

子组件 → 父组件：回调函数

function Child({ onMessageChange }) {
  return <button onClick={() => onMessageChange("子组件的消息")}>传递消息</button>;
}
function Parent() {
  const [message, setMessage] = useState("");
  return (
    <div>
      <p>来自子组件的消息：{message}</p>
      <Child onMessageChange={setMessage} />
    </div>
  );
}

兄弟组件通信（Context 或状态管理）

2️⃣ React 路由（React Router）

在 React 中实现多页面跳转，需要使用 react-router-dom：

npm install react-router-dom

示例：

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
function Home() {
  return <h1>首页</h1>;
}
function About() {
  return <h1>关于我们</h1>;
}
function App() {
  return (
    <Router>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于我们</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}
export default App;

3️⃣ 全局状态管理

当组件通信变得复杂时，使用状态管理工具：

useContext（适用于简单的全局状态）
Redux（大型应用推荐）
Zustand（轻量级，适合中小型项目）

示例：使用 useContext 创建全局状态：

import React, { createContext, useContext, useState } from "react";
const ThemeContext = createContext();
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
function Child() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <div>
      <p>当前主题：{theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        切换主题
      </button>
    </div>
  );
}
function App() {
  return (
    <ThemeProvider>
      <Child />
    </ThemeProvider>
  );
}
export default App;

4️⃣ 数据请求（API 调用）

React 不能直接访问数据库，一般通过 API（后端） 获取数据：

import { useEffect, useState } from "react";
function FetchData() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

如果是 POST 请求：

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "Hello", body: "World" }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

📌 第六步：实战项目

学完以上内容，可以尝试一些小型到中型项目：

✅ TodoList（待办事项） ✅ 天气查询应用（API 获取数据） ✅ 博客系统（文章管理、用户登录） ✅ 电商网站（购物车、支付、订单） ✅ 后台管理系统（React + Ant Design）

扩展阅读

React：构建高效、可复用用户界面的首选框架	https://blog.youkuaiyun.com/moton2017/article/details/146182091
React进阶之路：从入门知识到项目实战精通	https://blog.youkuaiyun.com/moton2017/article/details/146182664
React 后台管理系统开发全攻略：从零开始搭建高效应用	https://blog.youkuaiyun.com/moton2017/article/details/146183066
React开发实战：从常见问题到高级进阶全解析	https://blog.youkuaiyun.com/moton2017/article/details/146184295