Coursera Plus Annual Is 40% Off. Ends Soon!

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Coursera

Modern React Foundations 2026: A Practical Developer Guide

Packt via Coursera

Go to class Write review

Overview

Google, IBM & Meta Certificates – 40% Off a Year
One Coursera Plus subscription covers most Professional Certificates on Coursera. 40% off a full year through Dec 2.
Unlock All Certificates
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. In this beginner-friendly course, you’ll build a solid foundation in React, mastering key concepts like components, JSX, props, state management, and hooks (useState, useEffect). You’ll also learn to structure React projects efficiently and apply best practices. The course includes hands-on experience with a real-world project: a dynamic anime search app. You'll learn to fetch and display data from APIs, manage state, and build reusable components. As you progress, you'll explore CSS Modules for styling, handling error/loading states, and creating smooth user experiences. Ideal for aspiring developers, this course requires no prior React experience and provides you with the necessary tools to build dynamic web applications. By the end of the course, you will be able to create your own React projects, work with APIs, manage state, and implement reusable components.

Syllabus

  • Introduction
    • In this module, we will introduce the course and lay out the goals of your React journey. You'll set up your development environment and create your first React project, as well as dive into React's fundamental concepts, such as components and project structure.
  • JSX
    • In this section, we will explore JSX, the syntax extension that allows you to write HTML-like code within JavaScript. You'll learn how to structure JSX effectively, handle dynamic data rendering, and apply styles to your components, setting the foundation for building sophisticated UIs.
  • Props
    • In this module, we will explore props—React’s way of passing data between components. You'll gain practical experience by implementing dynamic components and managing data flow using props, creating modular, reusable elements in your applications.
  • State
    • This section will cover the concept of state in React, which allows your components to change and re-render dynamically. You'll learn how to use React’s useState hook to manage state in functional components, enabling you to create more interactive user interfaces.
  • Building a Practical Project
    • In this module, we will guide you through building a practical project—a dynamic anime search application. You’ll implement various React features like state management, event handling, and API integration, while also applying best practices in component structure and styling. By the end of the module, you’ll have a fully functional React project with real-time user interaction and API data fetching.
  • Styling in React
    • In this module, we will explore different styling techniques in React, including traditional CSS, CSS Modules, CSS-in-JS, and Styled Components. We will integrate icons and develop reusable alert components using modern styling approaches. We will also examine separation of concerns and evaluate styling practices for building consistent, maintainable user interfaces.
  • Component Design and Component Libraries
    • In this module, we will explore component design principles and understand how component libraries simplify modern React development. We will revisit the anime application, examine its component architecture, and integrate Material UI components. We will also analyze real-world component hierarchies and apply design practices that enhance scalability, consistency, and maintainability.
  • React Internals and Performance Optimization
    • In this module, we will explore React's internal rendering mechanisms, including the declarative approach, Virtual DOM, and state batching. We will optimize component performance using useCallback, useMemo, React DevTools, and Lighthouse to identify and address inefficiencies. We will also examine React Compiler and evaluate modern optimization techniques for building efficient, responsive applications.
  • A Few More Hooks
    • In this module, we will explore the useRef and useReducer hooks and understand their roles in managing references and complex application state. We will implement practical examples involving DOM references, persistent mutable values, and reducer-based state management with actions and payloads. We will also refactor the anime application using useReducer and review best practices for building maintainable, scalable React components.

Taught by

Packt - Course Instructors

Reviews

Start your review of Modern React Foundations 2026: A Practical Developer Guide

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.