Developing Front-End Apps with React

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.

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.

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.

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.