Applied React – Projects, Routing & State

Discover new skills with 30% off courses from industry experts. Save now.

Applied React – Projects, Routing & State

This course is part of React JS Masterclass - Go From Zero To Job Ready Specialization

Instructor: Packt - Course Instructors

Included with Coursera Plus

Learn more

7 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

2 weeks 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

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Build fully functional React projects, such as a task manager and movie information site.
Use React Router for seamless navigation and dynamic page handling in single-page applications.
Implement state management techniques using hooks, context, reducers, and Redux.
Style React applications using Tailwind CSS for responsive, adaptive, and modern UIs.

Skills you'll gain

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 React JS Masterclass - Go From Zero To Job Ready 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. In this comprehensive React course, you will learn how to build real-world applications using React, from managing state to routing and deploying your projects. You'll create and deploy a range of projects, including a task manager, a movie information site, and a shopping cart, while mastering essential concepts like state management, routing, and component-based architecture. By working on projects like TaskMate, Cinemate, and more, you will solidify your React skills and gain hands-on experience. Throughout the course, you will delve into key topics such as working with React Router, understanding React hooks, using local storage, and applying Tailwind CSS to style your applications. You'll also explore how to enhance user experience with features like dark mode, dynamic page titles, and scroll restoration, all while refining your development workflow. By the end of the course, you will be able to build dynamic and interactive React applications that are ready for deployment. This course is perfect for developers looking to deepen their React knowledge, and it's structured to take you from creating basic apps to more advanced projects with full-fledged state management using Context, Reducers, and Redux. Ideal for developers who want to learn by doing, this course provides clear, step-by-step instructions with real-world applications.

In this module, we will walk through the development of a to-do list app called TaskMate. You will learn how to set up the project, structure it with key components, and use state for managing tasks. We'll also explore local storage integration and conclude by deploying the project online.

What's included

10 videos2 readings1 assignment1 plugin

10 videosTotal 91 minutes

TaskMate Demo5 minutes
Project Structure4 minutes
Components / 04514 minutes
State: tasklist and setTasklist / 04611 minutes
Function: Edit and Delete / 04720 minutes
Warning: Undefined Value / 04810 minutes
Update Button / 0491 minute
Local Storage: Store All Tasks / 0507 minutes
Theme: Change Background / 05110 minutes
Project Deployment5 minutes

2 readingsTotal 20 minutes

Introduction to the Course 'Applied React – Projects, Routing & State'10 minutes
Full Specialization Resources10 minutes

1 assignmentTotal 15 minutes

Project: TaskMate - Assessment15 minutes

1 pluginTotal 15 minutes

Developing a Task Management App with React15 minutes

In this module, we will dive into React Router, teaching you how to add navigation between different pages of your application. You'll learn how to work with route parameters, handle 404 errors, and restructure your project for better routing management.

What's included

8 videos1 assignment1 plugin

8 videosTotal 86 minutes

React Router Introduction / 0538 minutes
React Router Setup / 0549 minutes
Project Structure / 05515 minutes
Navigation / 05611 minutes
Route Parameters / 05712 minutes
No Route Found / 0585 minutes
Nested Routes / 0598 minutes
Project Restructuring / 06014 minutes

1 assignmentTotal 15 minutes

React Router - Assessment15 minutes

1 pluginTotal 15 minutes

Navigating React Router15 minutes

In this module, we will explore Tailwind CSS, a utility-first framework that makes styling React components efficient. You will learn to implement responsive designs, dark mode, and customize the framework’s configuration to suit your project’s requirements.

What's included

10 videos1 assignment1 plugin

10 videosTotal 96 minutes

Introduction and Demo9 minutes
Common Properties14 minutes
Hover, Focus, and Other States5 minutes
Responsive Design11 minutes
Dark Mode7 minutes
Custom Configuration / 2068 minutes
Project Demo / 20712 minutes
Header and Hero Section/ 20812 minutes
Footer / 2092 minutes
Responsive Screen and Component Tools / 21011 minutes

1 assignmentTotal 15 minutes

Tailwind CSS Crash Course - Assessment15 minutes

1 pluginTotal 15 minutes

Exploring Tailwind CSS Fundamentals15 minutes

In this module, you will build the Cinemate project, a movie information app powered by the TMDB API. We will guide you through the setup, UI design, API integration, and deployment of the project, along with implementing key features like dark mode and error handling.

What's included

20 videos1 assignment1 plugin

20 videosTotal 265 minutes

Cinemate Demo4 minutes
Project Setup17 minutes
Tailwind Introduction / 06320 minutes
TMDB API: Documentation / 06410 minutes
UI Design (Tailwind and Flowbite) / 06514 minutes
Navigation Structure10 minutes
Dark Mode Integration / 06714 minutes
Movie List Structure / 06810 minutes
API Fetch: Movie List / 06914 minutes
Custom Hook: useFetch / 07011 minutes
API Fetch: Movie Search / 07115 minutes
Tailwind CSS Customization / 07216 minutes
Page Not Found / 07315 minutes
Individual Movie Information / 07428 minutes
Scroll Restoration: Scroll to Top / 0754 minutes
Dynamic Page Title / 07613 minutes
Style Update / 0772 minutes
Project Deployment / 07822 minutes
Development Branch on Git and GitHub10 minutes
Solved: Netlify Error / 0797 minutes

1 assignmentTotal 15 minutes

Movie API Project: Cinemate - Assessment15 minutes

1 pluginTotal 15 minutes

Integrating Tailwind CSS and Dark Mode15 minutes

In this module, we will build a shopping cart application where you can manage products, modify quantities, and handle deletions. We’ll guide you through creating the necessary components and deploying your project for others to use.

What's included

5 videos1 assignment1 plugin

In this module, we will extend the shopping cart project by implementing Context and Reducers for better state management. You’ll learn to validate user inputs, manage global state, and deploy the app once all features are functional.

What's included

6 videos1 assignment1 plugin

In this module, we will convert the shopping cart app to use Redux for state management. You will learn how to set up Redux slices and reducers to handle the cart’s state and functionality, culminating in the app’s deployment with Redux integration.

What's included

6 videos1 reading3 assignments1 plugin

6 videosTotal 78 minutes

Redux Introduction15 minutes
Project Structure / 0919 minutes
Slice and Action / 09216 minutes
Reducers: Add and Remove / 09315 minutes
Redux Store State / 09411 minutes
Project Deployment / 0959 minutes

1 readingTotal 10 minutes

Conclusion to the Course 'Applied React – Projects, Routing & State'10 minutes

3 assignmentsTotal 90 minutes

Full Course Practice Assessment15 minutes
Redux Project: Shopping Cart - Assessment15 minutes
Full Course Assessment60 minutes

1 pluginTotal 15 minutes

Introduction to Redux15 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

850 Courses186,880 learners

Offered by

Packt

Explore more from Software Development

Packt
React Foundations & Core Concepts
Course
Packt
Advanced React – Testing & Firebase Projects
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."

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Learn more

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Explore degrees

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Learn more

Frequently asked questions

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.

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.

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.