Developing Front-End Apps with React

Overview

Learn one of the most popular front-end frameworks, JavaScript React, in this hands-on course. Take the next step in your web development journey by learning how to build client-side user interfaces. You will develop these front-ends using components, the modular building blocks of React applications. You will learn about component composition to create rich functionality with features such as props, hooks, states, and event handling. You will explore component lifecycles and how to pass data and manipulate component states. Build your portfolio and gain practical experience by completing numerous hands-on labs in each lesson. At the end of the course, you integrate your skills with a final project by developing a shopping cart application. This course will help you succeed as a front-end, mobile or full-stack developer. It suits IT professionals looking to step up their careers or new graduates seeking to establish their client-side skills. Note that you will need basic HTML, CSS, JavaScript, and Git skills to get the most out of this course.

Syllabus

Introduction to React and Class Components

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.

Understanding Function Components with Array and DOM Manipulation

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-depth Understanding of Advanced React Functionality

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.

Practice, Final Project, and Peer Review Assignment

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.