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.

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. This course is designed to provide a comprehensive introduction to React 19, focusing on essential concepts like JSX, components, and props, while also diving into state management and interactivity. You will learn through both theoretical concepts and practical applications by building real-world projects such as a to-do list app and Cambridge Rentals. With hands-on activities, this course encourages you to practice each new concept immediately. Throughout the modules, you'll start with React fundamentals, including JSX, components, and props, and progress to more complex topics like state management, event handling, and conditional rendering. The course includes professional projects where you will implement what you've learned in structured environments, enhancing your skills with real-world applications. These projects provide a thorough understanding of React and how to build dynamic, interactive applications. This course is suitable for beginners who are eager to explore the React ecosystem and for those looking to enhance their web development skills. While prior knowledge of HTML, CSS, and JavaScript will be helpful, it is not mandatory. We also recommend some experience with basic programming concepts. By the end of the course, you will be able to build interactive React applications, create and export components, manage state, and utilize React’s powerful features for dynamic rendering. You will also be able to apply your knowledge to develop real-world projects like rental websites and task management apps.

Syllabus

React 19 Setup & JSX

In this module, we will introduce the key concepts of React 19, including setting up your project with Vite. You will learn how to create your first React component, write JSX markup, and integrate JavaScript into JSX. This module also covers the importance of styling and passing props within components.

JSX Review - Common mistakes - Best practices

In this module, we will revisit the fundamentals of JSX and recap its syntax, focusing on effective usage within React projects. You will learn about common mistakes developers make when using JSX and how to avoid them by applying best practices.

Professional Project - Cambridge Rentals

In this module, we will guide you through the Cambridge Rentals project, focusing on building key components like the header, footer, and property list. You will learn how to create dynamic content and structure your React app for future scalability.

Adding Interactivity

In this module, we will explore how to add interactivity to your React app by responding to user events. You will learn how to manage state, handle events efficiently, and apply best practices to manage complex event interactions.

Adding Interactivity Review - Common mistakes - Best practices

In this module, we will review the major concepts of adding interactivity in React, including common mistakes and how to avoid them. You will learn about the best practices for maintaining clean, efficient, and manageable interactivity.

Professional Project: To Do List App

In this module, we will guide you through building a to-do list app, from setting up the file structure to rendering tasks dynamically. You will learn to implement task management features like adding, editing, deleting, and making changes persistent using localStorage.

React Reducer

In this module, we will introduce React Reducer and explain its role in state management. You will learn how to create a reducer function and understand when it's appropriate to use it for managing complex state logic in your React applications.

React Reducer Review - Common mistakes and best practices

In this module, we will review common mistakes made while using React Reducer and share best practices to avoid them. You will also learn how to apply these best practices to effectively manage complex state in React applications.

Professional Project: UK Driving Test - React Reducer

In this module, we will walk you through the UK Driving Test project, showing how to apply React Reducer to manage the state. You will learn to structure components for quiz functionality, including question navigation and progress tracking.

React Context

In this module, we will introduce React Context and show how it simplifies state management by avoiding prop drilling. You will learn how to implement React Context in a real-world application, such as a to-do list app, to handle global state more efficiently.