Developing Front-End Apps with React

所在平台: Coursera

课程主页: https://www.coursera.org/learn/developing-frontend-apps-with-react

课程评论：没有评论

第一个写评论        关注课程

课程简介

课程名称：使用React开发前端应用程序 课程概述： React是网站和前端应用程序开发领域中最受欢迎的框架之一。在本课程中，您将学习： - 使用React和ES6构建丰富的前端应用程序 - 通过数据和状态连接React组件 - 使用Hooks和Redux等高级功能编写丰富的React组件 此外，您将探索如何访问React网页框架的用户界面(UI)库，并运行丰富的React应用程序。您将找到使用React组件的方法。 课程大纲： 1. **介绍React和类组件** - 在本模块中，您将开始探索框架及其在React web开发中的应用。您将比较库和框架，并进一步学习前端框架的突出特性。此外，模块将介绍用于创建React项目的Vite构建工具，并指导您设置React应用程序。理解目录结构将优化您的工作流程。模块还将涵盖EcmaScript6 (ES6)和JSX的基础知识，包括语法和编译，使您能够轻松创建动态React组件。您将了解状态管理、使用props和处理事件的概念，最终掌握状态和props的概念，明白数据如何在组件中流动。 2. **理解功能组件与数组和DOM操作** - 本模块中，您将学习构建动态React应用程序的概念，包括函数组件、数组和虚拟DOM。首先，您将探索props、默认props和事件处理，以传递数据并创建组件间的交互。接下来，您将深入了解组件组合，并通过实际示例学习其原则。您还将掌握函数组件中的状态管理，并熟练使用useState hook高效操控组件状态。之后，您将探讨React组件中的数组和虚拟DOM，最终能够使用React的数组处理和虚拟DOM构建Web应用程序。 3. **深入理解高级React功能** - 在本模块的第一课中，您将探索React hooks及其用于表单管理。您将学习如何从第三方外部服务获取数据并使用您构建的表单处理这些数据。第二课将介绍Redux库的核心概念，例如使用actions、Redux store和reducers管理整个应用程序的状态。您还将探索Redux的优势和用例，并解决使用Redux这种同步工具所面临的挑战，了解如何使用Saga和Thunk等库来克服这些问题。此外，此模块还将介绍Redux Toolkit，它是一套旨在简化Redux任务和优化React应用程序中的状态管理的实用工具。 4. **实践、最终项目和同行评审作业** - 在最后的模块中，您将创建一个React购物车应用程序作为最终项目。您将通过同行评估获得项目评分，且评估您同学的项目也将使用客观评分标准的评估表。您将应用和整合在教学模块中学到的许多技能，包括创建功能组件并使用状态和hooks更新这些组件。您将使用Redux通过actions、reducers和store来管理应用程序中的状态。项目架构允许您使用嵌套结构组合组件，并将使用useEffect hooks管理副作用。您将处理用户事件以呈现从数组中获取的数据并触发相应的动作。该模块还提供了一个实践项目，帮助您开发最终项目所需的组件和功能。

课程大纲

Name:Introduction to React and Class Components

Description:In this module, you begin exploring 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. Additionally, the module will introduce the Vite build tool for React project creation and guide you through setting up a React application. Understanding the directory structure will streamline your workflow. Additionally, the module will cover EcmaScript6 (ES6), and JSX fundamentals, including syntax and compilation, empowering you to create dynamic React components effortlessly. Moving forward, you will delve into the concepts of state management, using props, and handling events for each type. Finally, you will master the concept of state and props, understanding how data flows within your components.

Name:Understanding Function Components with Array and DOM Manipulation

Description:In this module, you will learn concepts for building dynamic React applications, including function components, arrays, and using the virtual DOM. The first lesson begins with exploring props, default props, and event handling to pass data and create interactions between components. Next, you'll delve into component composition, learning its principles through practical examples. You'll also gain a solid understanding of state management in function components. Additionally, you'll become proficient in utilizing the useState hook to manipulate component states efficiently. 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.

Name:In-depth Understanding of Advanced React Functionality

Description:In the first lesson of this module, you will explore React hooks and their use for form management. You will also learn how to retrieve data from third-party external services and process it using the forms you build. 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. 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.

Name:Practice, Final Project, and Peer Review Assignment

Description: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. 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. This module has a practice project that will assist you with developing the required components and functionality in the final project.

课程评论(0条)