【React 前端框架详细教程——带实例开发应用】

React 前端框架详细教程------TODO应用开发

• 一、环境搭建
• • [1. 安装 Node.js 和 npm](#1. 安装 Node.js 和 npm)
  • [2. 使用 Create React App 创建项目](#2. 使用 Create React App 创建项目)
• [二、React 核心概念](#二、React 核心概念)
• • [1. 组件（Component）](#1. 组件（Component）)
  • [2. JSX 语法](#2. JSX 语法)
  • [3. Props 和 State](#3. Props 和 State)
• [三、React 组件生命周期](#三、React 组件生命周期)
• [四、React 路由管理（React Router）](#四、React 路由管理（React Router）)
• • [1. 设置基本路由](#1. 设置基本路由)
  • [2. 嵌套路由](#2. 嵌套路由)
• [五、构建一个简单的 TODO 应用](#五、构建一个简单的 TODO 应用)
• • [1. 创建 `TodoApp` 组件](#1. 创建 TodoApp 组件)
  • [2. 在 `App.js` 中渲染 `TodoApp` 组件](#2. 在 App.js 中渲染 TodoApp 组件)
  • [3. 运行应用](#3. 运行应用)

React 是一个由 Facebook 开发和维护的开源 JavaScript 库，用于构建用户界面，特别适用于构建单页应用（SPA）。它使得开发者能够高效地构建响应式、动态的 Web 应用。

一、环境搭建

在开始学习 React 之前，首先需要搭建开发环境。

1. 安装 Node.js 和 npm

确保你的电脑上安装了 Node.js 和 npm（Node 包管理器）。可以通过以下命令检查是否安装成功：

node -v
npm -v

2. 使用 Create React App 创建项目

React 提供了一个官方的脚手架工具 create-react-app 来帮助你快速创建 React 项目。

在终端中执行以下命令创建一个新的 React 项目：

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

这将启动一个开发服务器，并在浏览器中自动打开你的 React 应用。

---

二、React 核心概念

1. 组件（Component）

React 应用由多个组件组成，组件是 UI 的基本构建块。每个组件都可以有自己的状态和属性（Props）。

函数组件（Functional Component）：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件（Class Component）：

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

React 推荐使用函数组件，尤其是在 React 16.8 引入了 Hooks 后，函数组件的功能更加完备。

2. JSX 语法

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，看起来像 HTML，但可以嵌入 JavaScript 表达式。

const element = <h1>Hello, world!</h1>;

在 JSX 中，你可以插入 JavaScript 表达式：

const name = 'Alice';
const element = <h1>Hello, {name}</h1>;

3. Props 和 State

• Props（属性） ：是传递给组件的数据，父组件通过 props 向子组件传递数据。props 是只读的。
• State（状态）：是组件的本地状态，可以在组件内部动态更新。

使用 Props：

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

function App() {
  return <Greeting name="Alice" />;
}

使用 State：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

---

三、React 组件生命周期

类组件有生命周期方法，用于处理组件的创建、更新和销毁等阶段。对于函数组件，React 提供了 Hooks 来管理生命周期。

常见生命周期方法：

• componentDidMount()：组件挂载后调用。
• componentDidUpdate()：组件更新后调用。
• componentWillUnmount()：组件卸载前调用。

函数组件使用 useEffect Hook：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 依赖项数组，只有 count 变化时才执行

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

---

四、React 路由管理（React Router）

在 React 中，使用 react-router-dom 来实现前端路由导航。安装 react-router-dom：

npm install react-router-dom

1. 设置基本路由

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

2. 嵌套路由

React Router 支持嵌套路由，使得你可以在父路由内渲染子路由。

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li><Link to="/dashboard/overview">Overview</Link></li>
        <li><Link to="/dashboard/settings">Settings</Link></li>
      </ul>

      <Switch>
        <Route path="/dashboard/overview" component={Overview} />
        <Route path="/dashboard/settings" component={Settings} />
      </Switch>
    </div>
  );
}

function Overview() {
  return <h3>Overview Section</h3>;
}

function Settings() {
  return <h3>Settings Section</h3>;
}

---

五、构建一个简单的 TODO 应用

接下来，我们构建一个简单的 TODO 应用，演示 React 的基本用法。

1. 创建 TodoApp 组件

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    setTodos([...todos, { text: newTodo, completed: false }]);
    setNewTodo('');
  };

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

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

  return (
    <div>
      <h1>Todo List</h1>
      <input 
        type="text" 
        value={newTodo} 
        onChange={(e) => setNewTodo(e.target.value)} 
        placeholder="Add a new task"
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      
      <ul>
        {todos.map((todo, index) => (
          <li key={index} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
            <button onClick={() => handleToggleTodo(index)}>Toggle</button>
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

2. 在 App.js 中渲染 TodoApp 组件

import React from 'react';
import TodoApp from './TodoApp';

function App() {
  return (
    <div className="App">
      <TodoApp />
    </div>
  );
}

export default App;

3. 运行应用

执行 npm start 启动应用，在浏览器中访问 http://localhost:3000，你应该看到一个基本的 TODO 应用，可以添加、删除、标记任务完成。

---