网站开发资源,男生学平面设计好就业吗,个人网站搭建详细流程,开发网站需要多少钱React 中级阶段学习计划
目标
掌握状态管理和路由。能够调用API并处理异步数据。学会使用CSS-in-JS和CSS Modules进行样式处理。
学习内容
状态管理
React Context API
Context API#xff1a;用于在组件树中传递数据#xff0c;避免多层props传递。示例#xff1a;im…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 }}h1Current Theme: {theme}/h1button onClick{toggleTheme}Toggle Theme/button/div);
}function Root() {return (ThemeProviderApp //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 (divpCount: {count}/pbutton onClick{() dispatch(increment())}Increment/buttonbutton 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 h2Home/h2;
}function About() {return h2About/h2;
}function Contact() {return h2Contact/h2;
}// 主组件
function App() {return (RouterdivnavulliLink to/Home/Link/liliLink to/aboutAbout/Link/liliLink to/contactContact/Link/li/ul/navSwitchRoute 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。安装axiosnpm 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 (divh1Data from API/h1{data ? (ul{data.map(item (li key{item.id}{item.title}/li))}/ul) : (pLoading.../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.buttonbackground-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 (divButton primaryPrimary Button/ButtonButtonSecondary 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 (divButton primaryPrimary Button/ButtonButtonSecondary 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}inputtypetextclassNameinputvalue{value}onChange{(e) setValue(e.target.value)}placeholderAdd a new task/button typesubmit classNamebuttonAdd/button/form);
}export default TodoForm;TodoList.js显示待办事项列表import React from react;function TodoList({ todos, removeTodo }) {return (div{todos.map((todo, index) (div key{index} classNametodospan{todo}/spanbutton 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 classNameappdiv classNametodo-listh1Todo List/h1TodoForm addTodo{addTodo} /TodoList todos{todos} removeTodo{removeTodo} //div/div);
}export default App;电子商务网站
创建项目npx create-react-app ecommerce
cd ecommerce
npm start安装axiosnpm 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 classNameproduct-list{products.map(product (div key{product.id} classNameproductimg src{product.image} alt{product.title} /h3{product.title}/h3p${product.price}/p/div))}/div);
}export default ProductList;App.js主组件import React from react;
import ProductList from ./ProductList;function App() {return (div classNameApph1E-commerce Website/h1ProductList //div);
}export default App;建议
定期回顾每周花时间回顾本周所学内容确保知识点牢固掌握。参与社区加入React相关的论坛、Slack群组或Discord服务器与其他开发者交流心得。阅读源码尝试阅读一些简单的React库的源码提高代码理解和分析能力。
希望这个学习计划能够帮助你系统地学习React中级技能并通过实践项目巩固所学知识。祝你学习顺利 你可以将上述Markdown内容复制到任何支持Markdown的编辑器或平台中以便于查看和使用。
