React 前端框架实战教程

📝个人主页🌹：一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;