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}> <input type="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的编辑器或平台中，以便于查看和使用。
