Coursera 笔记

Module 01 · Introduction to React and Class ComponentsReact 与类组件简介

Course Overview课程概述

Coursera ↗

Hello, and welcome to the Developing Front-end Applications with React course!
你好，欢迎来到《使用 React 开发前端应用程序》课程！

This course will explore the JavaScript React front-end web framework. You will learn how to develop front-end applications using React. 
这门课程将探讨 JavaScript React 前端网页框架。您将学习如何使用 React 开发前端应用程序。

This course is part of the following programs, designed to equip professionals with essential skills across front-end, full-stack, and mobile application development domains.
这门课程是以下项目的组成部分，旨在为专业人士提供前端、全栈和移动应用开发领域的必备技能。

Before taking this course, you should complete the following courses. This course assumes knowledge of CSS, HTML, Git, and JavaScript.
在参加这门课程之前，您应该完成以下课程。本课程假设您已掌握 CSS、HTML、Git 和 JavaScript。

Course outline 课程大纲

This course contains four modules. You should set a goal to complete at least one module per week.
这门课程包含四个模块。你应该设定目标，每周至少完成一个模块。

Module 1: Introduction to React and Class Components
模块 1：React 与类组件简介

In this module, you explore front-end frameworks and their use in React web development. You will start by comparing libraries and frameworks and then explore front-end frameworks further by learning about prominent features of React. 
在这个模块中，您将探索前端框架及其在 React 网页开发中的应用。您将从比较库和框架开始，然后通过学习 React 的突出特性进一步探索前端框架。

Additionally, the module will cover ECMAScript6 (ES6) and JSX fundamentals, including syntax and compilation, empowering you to create dynamic React components effortlessly. You will delve into state management, using props, and handling events for each type. 
此外，该模块将涵盖 ECMAScript6（ES6）和 JSX 基础，包括语法和编译，让您能够轻松创建动态的 React 组件。您将深入了解状态管理、使用 props 以及处理每种类型的事件。

Finally, you will master the concept of state and props, understanding how data flows within your components.
最后，你将掌握状态和属性的概念，理解数据如何在组件内部流动。

Module 2: Understanding Function Components with Array and DOM Manipulation
模块 2：使用数组和 DOM 操作理解函数组件

In this module, you will learn concepts for building dynamic React applications, including function components and arrays, and how to use the virtual DOM. 
在这个模块中，您将学习构建动态 React 应用程序的概念，包括函数组件和数组，以及如何使用虚拟 DOM。

The first lesson begins with exploring props, default props, and event handling to pass data and create interactions between components. You also explore component composition, learning its principles through practical examples. You'll also gain a solid understanding of state management in function components. You'll become proficient in utilizing the useState hook to manipulate component states efficiently. 
第一课从探索道具、默认道具和事件处理开始，以传递数据和在组件之间创建交互。你还将探索组件组合，通过实际例子学习其原则。你还将对函数组件中的状态管理有一个扎实的理解。你将熟练运用 useState 钩子来高效地操作组件状态。

In lesson two, you will explore arrays in React components and the virtual DOM. By the end of this module, you will be able to build web applications using React's array handling and the virtual DOM.
在第二课中，您将探索 React 组件中的数组和虚拟 DOM。在本模块结束时，您将能够使用 React 的数组处理和虚拟 DOM 构建 Web 应用程序。

Module 3: In-depth Understanding of Advanced React Functionality
模块 3：深入理解高级 React 功能

In the first lesson of this module, you will explore React hooks and their use for form management. You will learn to retrieve data from third-party external services and process it using the forms you build. 
在模块的第一课中，您将探索 React 钩子及其在表单管理中的应用。您将学习如何从第三方外部服务检索数据，并使用您构建的表单进行处理。

In the second lesson, you learn Redux library core concepts, such as using actions, the Redux store, and reducers to manage the state of entire applications. You also explore the advantages and Redux use cases. 
在第二课中，你将学习 Redux 库的核心概念，例如使用 actions、Redux 存储和 reducers 来管理整个应用程序的状态。你还将探索 Redux 的优势和使用场景。

The module will also address the challenges associated with using a synchronous tool such as Redux and how to overcome them using libraries such as Saga and Thunk. Furthermore, the lesson will introduce Redux Toolkit, a suite of utilities designed to simplify Redux tasks and streamline state management in your React applications.
模块还将解决使用如 Redux 这样的同步工具所面临的挑战，以及如何使用如 Saga 和 Thunk 等库来克服这些挑战。此外，课程将介绍 Redux Toolkit，这是一套旨在简化 Redux 任务和优化 React 应用程序状态管理的实用工具集。

Module 4: Practice, Final Project, and Peer Review Assignment
模块 4：实践，最终项目，同伴评审作业

You will create a React shopping cart app for your final project in the final module. You receive a grade on the project through a peer evaluation. You will also evaluate one of your peer's projects using a rubric with objective grading criteria.
你将在最后一模块的最终项目中创建一个 React 购物车应用程序。你将通过同伴评估获得该项目的成绩。你还将使用带有客观评分标准的评分标准评估你同伴的一个项目。

You will apply and integrate many skills learned in the instructional modules, including creating functional components and updating those components using states and hooks. You will use Redux to manage states within your application using actions, reducers, and the store. The project architecture allows you to compose components using a nesting structure. You will also manage side effects with useEffect hooks. You will handle user events to render fetched data from an array and trigger corresponding actions.
您将应用和整合在教程模块中学到的许多技能，包括创建功能组件和使用状态和钩子更新这些组件。您将使用 Redux 通过动作、还原器和存储来管理应用程序内的状态。项目架构允许您使用嵌套结构来组合组件。您还将使用 useEffect 钩子管理副作用。您将处理用户事件，从数组中渲染获取的数据并触发相应的动作。

This module has a practice project that will assist you with developing the required components and functionality in the final project.
此模块包含一个实践项目，将帮助您在最终项目中开发所需组件和功能。

Recommended background 推荐背景

The course explains the concepts essential to front-end application development using simple, easy-to-understand language. It requires basic knowledge of object-oriented programming, HTML, CSS, and Git. To derive maximum learning from this course, you must participate actively and complete various learning engagements across the modules.
这门课程用简单易懂的语言解释了前端应用开发的基本概念。它需要具备面向对象编程、HTML、CSS 和 Git 的基础知识。为了从这门课程中获得最大收益，你必须积极参与并完成模块中的各种学习活动。