React 中级阶段学习计划

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;
  

实践项目

待办事项列表

1. 创建项目：

   npx create-react-app todo-list
   cd todo-list
   npm start
   

2. 创建组件：
   • 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;
     

电子商务网站

1. 创建项目：

   npx create-react-app ecommerce
   cd ecommerce
   npm start
   

2. 安装axios：

   npm install axios
   

3. 创建组件：
   • 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的编辑器或平台中，以便于查看和使用。