React 前端框架实战教程

news2025/1/27 8:56:19

📝个人主页🌹：一ge科研小菜鸡-CSDN博客
🌹🌹期待您的关注 🌹🌹

引言

React 是由 Facebook 开发的前端 JavaScript 库，旨在构建高效、灵活的用户界面，尤其适用于单页应用（SPA）。它采用组件化开发模式，并使用虚拟 DOM 技术，提高应用的性能和可维护性。React 目前已成为最流行的前端框架之一，被广泛应用于各类 Web 应用开发中。

本教程将详细介绍 React 的核心概念、组件开发、状态管理、路由配置、API 调用以及最佳实践，并提供代码示例，帮助开发者快速上手 React。

1. React 核心概念

React 的核心概念主要包括：

概念	说明	示例
组件（Component）	UI 的最小单元，分为类组件和函数组件	`function MyComponent() {...}`
JSX	JavaScript 语法扩展，用于描述 UI 结构	`<h1>Hello, React!</h1>`
状态（State）	组件内部数据，驱动 UI 更新	`useState`
属性（Props）	组件间传递数据的方式	`<MyComponent name="React"/>`
虚拟 DOM	提升性能的高效 DOM 变更处理	`React.createElement()`
生命周期	组件的创建、更新和销毁过程	`componentDidMount`

2. React 开发环境搭建

2.1 安装 Node.js

首先，安装最新的 Node.js 版本，可前往 Node.js 官方网站下载。

2.2 创建 React 项目

使用 Create React App（CRA）快速创建项目：

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

项目结构：

my-react-app/
│-- node_modules/
│-- public/
│-- src/
│   ├── App.js
│   ├── index.js
│   ├── components/
│   ├── styles/
│   ├── services/
│-- package.json
│-- README.md

2.3 运行项目

执行以下命令启动 React 开发服务器：

npm start

3. React 组件开发

3.1 函数组件与类组件

函数组件示例（推荐）

import React from 'react';

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

export default Welcome;

类组件示例

import React, { Component } from 'react';

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

export default Welcome;

3.2 组件的状态管理

使用 useState 管理组件的状态：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

export default Counter;

4. 事件处理与数据绑定

在 React 中，事件处理类似于 DOM 操作，但需使用 CamelCase 方式定义事件。

4.1 事件绑定示例

function ButtonClick() {
  function handleClick() {
    alert('按钮被点击了！');
  }

  return <button onClick={handleClick}>点击我</button>;
}

export default ButtonClick;

5. React 路由（React Router）

React Router 是一个用于管理 SPA 应用页面导航的库。

5.1 安装 React Router

npm install react-router-dom

5.2 配置路由

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

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

function About() {
  return <h2>关于我们</h2>;
}

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;

6. 状态管理（Redux）

React 应用的状态管理通常可以使用 Redux 来实现。

6.1 安装 Redux

npm install redux react-redux

6.2 创建 Redux Store

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);
export default store;

6.3 连接 React 组件

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
    </div>
  );
}

export default Counter;

7. React API 请求（Axios）

React 中常用 Axios 进行 API 请求。

7.1 安装 Axios

npm install axios

7.2 API 请求示例

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

function DataFetch() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => setData(response.data))
      .catch(error => console.error('数据获取失败:', error));
  }, []);

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default DataFetch;