Developing Front-End Apps with React

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off

One annual plan covers every course and certificate on Coursera. 40% off for a limited time.

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 will explore front-end frameworks and their role in React development by comparing libraries and frameworks and examining key features of React. You will learn how to set up a React application using the Vite build tool and understand its directory structure. The module also introduces ES6 and JSX fundamentals, along with core concepts such as state, props, and event handling. By the end, you will understand how data flows within React components.

Understanding Function Components with Array and DOM Manipulation

In this module, you will learn how to build dynamic React applications using function components, arrays, and the virtual DOM. You will explore props, default props, and event handling to enable data flow and interaction between components. You will also learn component composition and state management in function components, including how to use the useState hook effectively. Additionally, you will work with arrays in React and understand how the virtual DOM improves performance. By the end of this module, you will be able to build React applications using array handling and virtual DOM concepts.

In-depth Understanding of Advanced React Functionality

In this module, you will explore React hooks and their use in form management, along with retrieving and processing data from external services. You will also learn the core concepts of Redux, including actions, reducers, and the store, to manage application state. Additionally, you will examine Redux use cases and challenges, and learn how to address them using tools like Redux Thunk and Redux Saga. The module also introduces Redux Toolkit to simplify and streamline state management in React applications.

Practice, Final Project, and Submission and Evaluation

In this module, you will build a React shopping cart application as your final project. You will apply key concepts such as functional components, state management with hooks, and Redux for managing application state using actions, reducers, and the store. You will also work with component composition, manage side effects using useEffect, and handle user interactions to render dynamic data. A practice project is included to help you develop the required components and prepare for the final submission.