|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/master-react-redux-via-real-world-analogy-building-project/
课程评论：没有评论
课程名称：通过真实世界类比和项目实战精通 React Redux 课程概述： 本课程将通过最简单的方式，结合真实世界的例子和项目驱动的方法，帮助您学习 React Redux。课程内容涵盖： 1. **Redux 基础与项目搭建** * 什么是 Redux 及其真实世界解释 * Node.js 和 VS Code 的安装 * 创建新的 React 应用与代码清理 * 理解 React 应用流程和 JSX * 安装所需的 npm 包 * Redux 的生命周期 * 创建项目所需文件夹 2. **Redux 核心概念与组件开发** * 创建 Actions 和 Action constants * 创建 product reducer * 整合所有 reducers * 创建 product store * Redux DevTools 和 Provider 的使用 * 创建组件模板文件 * 理解 package.json 文件 * 创建和理解第一个 React component * 为其他组件创建骨架 3. **组件实现与状态管理** * 实现组件的静态和动态路由 * 通过内联样式和 CSS 类为组件应用样式 * 在组件中访问 store 中的 state 信息 * 设计 Product Component * 在 All Products 组件中从 API 获取虚假产品列表 * 从组件 dispatch action * 修改 reducer 以更新 state 信息 * 样式化并在主屏幕上显示所有产品 4. **产品详情与高级功能** * 点击产品时动态导航至产品详情页 * 从 URL 获取 Product Id 并从 API 获取产品详情 * dispatch 选定的产品到 reducer 并将其取回至组件 * 样式化 Product Details 页面并使用条件 JSX 显示数据 * 在 Logo 上添加路由 * 移除之前的 product 并直接在详情页面加载产品 * 探索 Redux Dev Tools 中的 Action 和 State 信息 **学习收获：** * 学习各种 React Hooks。 * 获得课程的完整源代码。
In this course, you will Learn React Redux in the most simple way through real world example and hands-on project based approach.Following are the topics we will cover:1.1-What is Redux1.2-Redux real world explanation1.3-Installing nodejs and VS code1.4-Creating new react application1.5-Code cleanup1.6-Understanding React application flow and JSX1.7-Installing the required npm packages1.8-Redux lifecycle1.9-Creating the required folders2.1-Creating Actions and Action constants2.2-Creating product reducer2.3-Combine all reducers2.4-Creating the product store2.5-Redux DevTools and Provider2.6-Creating components template files2.7-Understanding the package json file2.8-Creating and Understanding first react component2.9-Creating skeleton for all other components3.1-Implementing static and dynamic routing of components3.2-Applying styling to components by inline style and css class3.3-Accessing state information from store inside component3.4-Designing the Product Component3.5-Get Fake Product List in All Products component from API3.6-Dispatch action from the component3.7-Modifying the reducer to update the state information3.8-Styling and displaying all products on the home screen4.1-Dynamic Navigation to Product Detail page on click of a product4.2-Get Product Id from url and get product details from the API4.3-Dispatch the selected product to the reducer and get it back in component4.4-Styling Product Details page and showing data with conditional JSX4.5-Adding routing on the logo4.6-Remove the previous product and directly load the product on details screen4.7-Exploring Action and State information on redux Dev ToolsYou will learn about various react hooks.You will get the complete source code for the course.
