What background knowledge is necessary to enroll into the course?

A basic understanding of JavaScript, React fundamentals, HTML, and CSS is recommended. Familiarity with asynchronous programming concepts, such as promises and async/await, will help you follow the API-related sections more effectively.

Who is this course for?

This course is designed for web developers who want to strengthen their practical React skills, learn to integrate APIs, and build complete projects from scratch. It is also suitable for learners looking to gain confidence in deploying production-ready React applications.

How long does it take to complete the course?

The course contains approximately 8 hours of video content. Total completion time will depend on hands-on practice, working through projects, and revisiting key concepts for mastery.

Can I preview a course before enrolling?

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

When will I have access to the lectures and assignments?

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

What will I get when I enroll?

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

When will I receive my Course Certificate?

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

Why can’t I audit this course?

This course is currently available only to learners who have paid or received financial aid, when available.

Is financial aid available?

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Building Projects with React and APIs

Labor Day starts with $70+ in savings on Coursera Plus. Save 40% for 3 months.

Building Projects with React and APIs

This course is part of Modern React From The Beginning Specialization

Instructor: Packt - Course Instructors

Included with Learn more

Ask Coursera

7 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

7 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Fetch, display, filter, and sort dynamic data from external APIs in React projects.
Build multi-page applications using React Router in both declarative and framework modes.
Manage state across projects with Context API and localStorage for persistent data.
Implement project-level features including loaders, pagination, blog posts, and Markdown rendering.

Details to know

Shareable certificate

Add to your LinkedIn profile

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Modern React From The Beginning Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 7 modules in this course

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 empowers you to build real-world React applications by integrating APIs, managing state, and deploying projects efficiently. You will gain hands-on experience with React Router, Context API, TypeScript basics, and asynchronous data fetching while learning best practices for component composition and project structure. The course begins with API integration using a Crypto Dash project, teaching you how to fetch, display, filter, and sort dynamic data. You’ll also learn to handle async operations, environment variables, and build responsive UI components. Guided exercises ensure that theoretical concepts are applied immediately in practical scenarios. Next, you will explore advanced routing strategies, server-side rendering concepts, loaders, pagination, and project-level state management with the Context API through projects like a Shopping Cart UI and Friendly Dev project. You’ll also implement inner pages, form actions, Markdown-based blogs, and reusable UI components to deepen your full-stack React skills. This course is ideal for JavaScript developers, front-end engineers, or anyone aiming to build modern, dynamic web apps. A basic understanding of React fundamentals is recommended, and the course difficulty is structured at an intermediate level. By the end of the course, you will be able to fetch and manipulate API data, build multi-page React apps using routing and context, implement project-level state management, create responsive and interactive UI components, and deploy fully functional React projects.

In this module, we will build a Crypto Dash project that consumes real-time API data. You will learn to fetch, display, filter, and sort cryptocurrency information dynamically. This module also covers secure environment configuration and interactive UI elements.

What's included

9 videos2 readings1 assignment

9 videosTotal 59 minutes

Section & Project Intro2 minutes
API Info & Project Setup6 minutes
Making HTTP Requests9 minutes
Async/Await In useEffect3 minutes
Display Coin Data8 minutes
Environment Variables8 minutes
Limit Selector5 minutes
Filter Coins7 minutes
Sort Order Selector11 minutes

2 readingsTotal 20 minutes

Introduction to the Course 'Building Projects with React and APIs'10 minutes
Full Specialization Resources10 minutes

1 assignmentTotal 15 minutes

Working With APIs – Crypto Dash Project - Assessment15 minutes

In this module, we will extend the Crypto Dash project by adding client-side routing. You will create multiple pages, fetch coin details dynamically, and enhance the UI with loading spinners and charts. This module provides practical experience in declarative navigation and data visualization.

What's included

10 videos1 assignment

10 videosTotal 77 minutes

Intro To Routing5 minutes
React Router Syntax3 minutes
Homepage Route11 minutes
About Page & Link Component6 minutes
Not Found Page5 minutes
Fetch Coin Details9 minutes
Display Coin Details14 minutes
Add Loading Spinner5 minutes
Get & Format Chart Data13 minutes
Show Chart6 minutes

1 assignmentTotal 15 minutes

React Router in Declarative Mode – Extend Crypto Dash Project - Assessment15 minutes

In this module, we will take your React application from development to production. You will understand the build workflow, run production builds, and deploy your projects to Vercel. This ensures your applications are accessible and optimized for real-world use.

What's included

4 videos1 assignment

In this module, we will build a fully functional Shopping Cart UI using the Context API. You will manage product and cart state globally, handle user interactions, and ensure data persistence. This project reinforces best practices in state management and reusable components.

What's included

13 videos1 assignment

13 videosTotal 84 minutes

Section Intro2 minutes
What Is the Context API?4 minutes
Project Setup5 minutes
JSON Server Setup6 minutes
Display Product Data13 minutes
Setup Proxy4 minutes
Product Context11 minutes
Cart Context5 minutes
Add To Cart Button8 minutes
Header & Cart Count8 minutes
Cart Items Dropdown9 minutes
Remove Items & Clear Cart5 minutes
Store Cart Items To Local Storage3 minutes

1 assignmentTotal 15 minutes

Context API – Shopping Cart UI - Assessment15 minutes

In this module, we will develop the Friendly Dev project using React Router in framework mode. You will implement structured routing, responsive navigation, reusable components, and TypeScript basics. This module teaches modern React routing patterns in real-world scenarios.

What's included

11 videos1 assignment

11 videosTotal 81 minutes

Section & Project Intro3 minutes
Project Setup & File Structure8 minutes
Creating Routes10 minutes
Devtools Console Error Fix3 minutes
SSR & Client Hydration6 minutes
Links & Navigation8 minutes
Active Link Styling3 minutes
Responsive Menu7 minutes
Hero Component7 minutes
Introduction To Types (TypeScript)17 minutes
Layout Routes9 minutes

1 assignmentTotal 15 minutes

React Router Framework Mode – Friendly Dev Project - Assessment15 minutes

In this module, we will enhance projects with advanced data handling features. You will use loaders, implement pagination, apply filtering, and animate UI interactions. These techniques help build responsive and user-friendly React applications.

What's included

11 videos1 assignment

11 videosTotal 81 minutes

Loaders Overview4 minutes
Fetch Projects With Loader6 minutes
Create Project Type4 minutes
Display Loader Data9 minutes
Dynamic Route & Client Loader8 minutes
Details Page Output7 minutes
Project Pagination9 minutes
Pagination Component6 minutes
Project Category Filter10 minutes
Animate Project Filter6 minutes
Featured Projects12 minutes

1 assignmentTotal 15 minutes

Loaders, Filtering, Pagination & More - Assessment15 minutes

In this module, we will create inner pages and a Markdown-based blog system. You will manage forms with actions, display posts dynamically, and implement pagination and filtering. This module emphasizes content management and interactive page design in React.

What's included

14 videos1 reading3 assignments

14 videosTotal 109 minutes

About Page12 minutes
Contact Page JSX6 minutes
React Router Actions Example9 minutes
Form Validation With Actions8 minutes
Not Found Page5 minutes
What Is Markdown?5 minutes
Fetch Post Meta9 minutes
Display Post Meta6 minutes
Single Post & Markdown11 minutes
Display Details Page7 minutes
Sort Posts By Date3 minutes
Re-Use Pagination Component5 minutes
Blog Post Filter10 minutes
Latest Blog Posts15 minutes

1 readingTotal 10 minutes

Conclusion to the Course 'Building Projects with React and APIs'10 minutes

3 assignmentsTotal 90 minutes

Inner Pages, Actions, Markdown Blog - Assessment15 minutes
Full Course Assessment60 minutes
Full Course Practice Assessment15 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Packt - Course Instructors

Packt

2,145 Courses655,267 learners

Offered by

Packt

Explore more from Software Development

Packt
Advanced React and Full Stack Development
Course
Packt
React Fundamentals and Core Concepts
Course

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Break down barriers to learning with big savings
Get Coursera Plus
Start with easy savings for hard-working teams
Save 30% today

Frequently asked questions

Building Projects with React and APIs is a hands-on program focused on creating modern web applications that interact with external APIs, manage dynamic state, and implement client-side routing. It is relevant because working with APIs and React is essential for modern web development, enabling developers to build responsive, interactive, and data-driven applications.

This course covers practical projects using React, including the Crypto Dash project for working with APIs, shopping cart interfaces with the Context API, and multi-page applications with React Router in both declarative and framework modes. Students also learn data handling techniques like loaders, filtering, pagination, and rendering Markdown-based blog content, culminating in build and deployment workflows.

After completing this course, you will be able to fetch and display data from APIs, implement dynamic routing and client-side navigation, manage global application state using React’s Context API, create interactive UI components, and deploy React applications to production environments. You will gain practical experience building full-featured, real-world React projects.