VOOZH about

URL: https://www.coursera.org/learn/packt-applied-react-projects-routing-and-state-mvf7i

⇱ Applied React – Projects, Routing & State | Coursera


Applied React – Projects, Routing & State

Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Applied React – Projects, Routing & State

Included with

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

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.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

9 assignments

Taught in English

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 assignment

10 videosTotal 92 minutes
  • TaskMate Demo6 minutes
  • Project Structure4 minutes
  • Components / 04515 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 / 05111 minutes
  • Project Deployment6 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

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 assignment

8 videosTotal 87 minutes
  • React Router Introduction / 0539 minutes
  • React Router Setup / 05410 minutes
  • Project Structure / 05515 minutes
  • Navigation / 05611 minutes
  • Route Parameters / 05713 minutes
  • No Route Found / 0585 minutes
  • Nested Routes / 0599 minutes
  • Project Restructuring / 06015 minutes
1 assignmentTotal 15 minutes
  • React Router - Assessment15 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 assignment

10 videosTotal 96 minutes
  • Introduction and Demo10 minutes
  • Common Properties15 minutes
  • Hover, Focus, and Other States5 minutes
  • Responsive Design12 minutes
  • Dark Mode7 minutes
  • Custom Configuration / 2068 minutes
  • Project Demo / 20713 minutes
  • Header and Hero Section/ 20813 minutes
  • Footer / 2093 minutes
  • Responsive Screen and Component Tools / 21012 minutes
1 assignmentTotal 15 minutes
  • Tailwind CSS Crash Course - Assessment15 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 assignment

20 videosTotal 265 minutes
  • Cinemate Demo5 minutes
  • Project Setup18 minutes
  • Tailwind Introduction / 06320 minutes
  • TMDB API: Documentation / 06411 minutes
  • UI Design (Tailwind and Flowbite) / 06514 minutes
  • Navigation Structure10 minutes
  • Dark Mode Integration / 06715 minutes
  • Movie List Structure / 06811 minutes
  • API Fetch: Movie List / 06915 minutes
  • Custom Hook: useFetch / 07012 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 / 0755 minutes
  • Dynamic Page Title / 07613 minutes
  • Style Update / 0773 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

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 assignment

5 videosTotal 39 minutes
  • Assignment Statement and Demo / 0803 minutes
  • Solution: Project Setup6 minutes
  • Solution: Components / 08217 minutes
  • Solution: Pages / 08310 minutes
  • Assignment Deployment4 minutes
1 assignmentTotal 15 minutes
  • Assignment: Shopping Cart - Assessment15 minutes

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 assignment

6 videosTotal 86 minutes
  • Global State Management7 minutes
  • Project Structure / 0866 minutes
  • Context / 08716 minutes
  • Reducer / 08826 minutes
  • Methods / 08919 minutes
  • Project Deployment / 09012 minutes
1 assignmentTotal 15 minutes
  • Context and Reducers Project: Shopping Cart - Assessment15 minutes

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 assignments

6 videosTotal 78 minutes
  • Redux Introduction15 minutes
  • Project Structure / 09110 minutes
  • Slice and Action / 09217 minutes
  • Reducers: Add and Remove / 09316 minutes
  • Redux Store State / 09411 minutes
  • Project Deployment / 09510 minutes
1 readingTotal 10 minutes
  • Conclusion to the Course 'Applied React – Projects, Routing & State'10 minutes
3 assignmentsTotal 90 minutes
  • Redux Project: Shopping Cart - 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

Offered by

Explore more from Software Development

Why people choose Coursera for their career

👁 Image

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."
👁 Image

Jennifer J.

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

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."
👁 Image

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."

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.

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.

This course is currently available only to learners who have paid or received financial aid, when 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.

Financial aid available,