React 中级阶段学习计划
目标
- 掌握状态管理和路由。
- 能够调用API并处理异步数据。
- 学会使用CSS-in-JS和CSS Modules进行样式处理。
学习内容
状态管理
React Context API
- Context API：用于在组件树中传递数据，避免多层props传递。
- 示例：
import React, { createContext, useContext, useState } from 'react';// 创建Context const ThemeContext = createContext();// 提供者组件 function ThemeProvider({ children }) {const [theme, setTheme] = useState('light');const toggleTheme = () => {setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));};return (<ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>); }// 消费者组件 function App() {const { theme, toggleTheme } = useContext(ThemeContext);return (<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}><h1>Current Theme: {theme}</h1><button onClick={toggleTheme}>Toggle Theme</button></div>); }function Root() {return (<ThemeProvider><App /></ThemeProvider>); }export default Root;
Redux
- Redux：一个用于管理应用状态的库，适用于大型应用。
- 安装：
npm install redux react-redux - 示例：
import React from 'react'; import { createStore } from 'redux'; import { Provider, useSelector, useDispatch } from 'react-redux';// Reducer const counterReducer = (state = { count: 0 }, action) => {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };default:return state;} };// Store const store = createStore(counterReducer);// Action Creators const increment = () => ({ type: 'INCREMENT' }); const decrement = () => ({ type: 'DECREMENT' });// Component function Counter() {const count = useSelector((state) => state.count);const dispatch = useDispatch();return (<div><p>Count: {count}</p><button onClick={() => dispatch(increment())}>Increment</button><button onClick={() => dispatch(decrement())}>Decrement</button></div>); }function App() {return (<Provider store={store}><Counter /></Provider>); }export default App;
路由
React Router
- React Router：用于在React应用中实现页面导航。
- 安装：
npm install react-router-dom - 示例：
import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';// 页面组件 function Home() {return <h2>Home</h2>; }function About() {return <h2>About</h2>; }function Contact() {return <h2>Contact</h2>; }// 主组件 function App() {return (<Router><div><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/contact">Contact</Link></li></ul></nav><Switch><Route path="/" exact component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} /></Switch></div></Router>); }export default App;
API调用
使用fetch和axios
- fetch：浏览器内置的API调用方法。
- axios：一个基于Promise的HTTP客户端，支持浏览器和Node.js。
- 安装axios：
npm install axios - 示例：
import React, { useState, useEffect } from 'react'; import axios from 'axios';function FetchData() {const [data, setData] = useState(null);useEffect(() => {axios.get('https://jsonplaceholder.typicode.com/posts').then(response => {setData(response.data);}).catch(error => {console.error('Error fetching data:', error);});}, []);return (<div><h1>Data from API</h1>{data ? (<ul>{data.map(item => (<li key={item.id}>{item.title}</li>))}</ul>) : (<p>Loading...</p>)}</div>); }export default FetchData;
样式处理
CSS-in-JS
- styled-components：一个流行的CSS-in-JS库。
- 安装：
npm install styled-components - 示例：
import React from 'react'; import styled from 'styled-components';const Button = styled.button`background-color: ${props => props.primary ? 'blue' : 'white'};color: ${props => props.primary ? 'white' : 'black'};padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer; `;function App() {return (<div><Button primary>Primary Button</Button><Button>Secondary Button</Button></div>); }export default App;
CSS Modules
- CSS Modules：允许你编写局部作用域的CSS。
- 示例：
// Button.module.css .button {background-color: white;color: black;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer; }.primary {background-color: blue;color: white; }// Button.js import React from 'react'; import styles from './Button.module.css';function Button({ primary, children }) {return (<button className={`${styles.button} ${primary ? styles.primary : ''}`}>{children}</button>); }export default Button;// App.js import React from 'react'; import Button from './Button';function App() {return (<div><Button primary>Primary Button</Button><Button>Secondary Button</Button></div>); }export default App;
实践项目
待办事项列表
- 创建项目：
npx create-react-app todo-list cd todo-list npm start - 创建组件：
TodoForm.js：添加待办事项的表单import React, { useState } from 'react';function TodoForm({ addTodo }) {const [value, setValue] = useState('');const handleSubmit = (e) => {e.preventDefault();if (!value) return;addTodo(value);setValue('');};return (<form onSubmit={handleSubmit}><inputtype="text"className="input"value={value}onChange={(e) => setValue(e.target.value)}placeholder="Add a new task"/><button type="submit" className="button">Add</button></form>); }export default TodoForm;TodoList.js：显示待办事项列表import React from 'react';function TodoList({ todos, removeTodo }) {return (<div>{todos.map((todo, index) => (<div key={index} className="todo"><span>{todo}</span><button onClick={() => removeTodo(index)}>Delete</button></div>))}</div>); }export default TodoList;App.js：主组件import React, { useState } from 'react'; import TodoForm from './TodoForm'; import TodoList from './TodoList';function App() {const [todos, setTodos] = useState([]);const addTodo = (text) => {const newTodos = [...todos, text];setTodos(newTodos);};const removeTodo = (index) => {const newTodos = [...todos];newTodos.splice(index, 1);setTodos(newTodos);};return (<div className="app"><div className="todo-list"><h1>Todo List</h1><TodoForm addTodo={addTodo} /><TodoList todos={todos} removeTodo={removeTodo} /></div></div>); }export default App;
电子商务网站
- 创建项目：
npx create-react-app ecommerce cd ecommerce npm start - 安装axios：
npm install axios - 创建组件：
ProductList.js：显示产品列表import React, { useState, useEffect } from 'react'; import axios from 'axios';function ProductList() {const [products, setProducts] = useState([]);useEffect(() => {axios.get('https://fakestoreapi.com/products').then(response => {setProducts(response.data);}).catch(error => {console.error('Error fetching products:', error);});}, []);return (<div className="product-list">{products.map(product => (<div key={product.id} className="product"><img src={product.image} alt={product.title} /><h3>{product.title}</h3><p>${product.price}</p></div>))}</div>); }export default ProductList;App.js：主组件import React from 'react'; import ProductList from './ProductList';function App() {return (<div className="App"><h1>E-commerce Website</h1><ProductList /></div>); }export default App;
建议
- 定期回顾：每周花时间回顾本周所学内容，确保知识点牢固掌握。
- 参与社区：加入React相关的论坛、Slack群组或Discord服务器，与其他开发者交流心得。
- 阅读源码：尝试阅读一些简单的React库的源码，提高代码理解和分析能力。
希望这个学习计划能够帮助你系统地学习React中级技能，并通过实践项目巩固所学知识。祝你学习顺利！
你可以将上述Markdown内容复制到任何支持Markdown的编辑器或平台中，以便于查看和使用。