React 前端框架详细教程——TODO应用开发
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 应用，可以添加、删除、标记任务完成。
