Applied React – Projects, Routing & State
Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Applied React – Projects, Routing & State
This course is part of React JS Masterclass - Go From Zero To Job Ready Specialization
Included with
Recommended experience
Recommended experience
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
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- 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 videos•Total 92 minutes
- TaskMate Demo•6 minutes
- Project Structure•4 minutes
- Components / 045•15 minutes
- State: tasklist and setTasklist / 046•11 minutes
- Function: Edit and Delete / 047•20 minutes
- Warning: Undefined Value / 048•10 minutes
- Update Button / 049•1 minute
- Local Storage: Store All Tasks / 050•7 minutes
- Theme: Change Background / 051•11 minutes
- Project Deployment•6 minutes
2 readings•Total 20 minutes
- Introduction to the Course 'Applied React – Projects, Routing & State'•10 minutes
- Full Specialization Resources•10 minutes
1 assignment•Total 15 minutes
- Project: TaskMate - Assessment•15 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 videos•Total 87 minutes
- React Router Introduction / 053•9 minutes
- React Router Setup / 054•10 minutes
- Project Structure / 055•15 minutes
- Navigation / 056•11 minutes
- Route Parameters / 057•13 minutes
- No Route Found / 058•5 minutes
- Nested Routes / 059•9 minutes
- Project Restructuring / 060•15 minutes
1 assignment•Total 15 minutes
- React Router - Assessment•15 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 videos•Total 96 minutes
- Introduction and Demo•10 minutes
- Common Properties•15 minutes
- Hover, Focus, and Other States•5 minutes
- Responsive Design•12 minutes
- Dark Mode•7 minutes
- Custom Configuration / 206•8 minutes
- Project Demo / 207•13 minutes
- Header and Hero Section/ 208•13 minutes
- Footer / 209•3 minutes
- Responsive Screen and Component Tools / 210•12 minutes
1 assignment•Total 15 minutes
- Tailwind CSS Crash Course - Assessment•15 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 videos•Total 265 minutes
- Cinemate Demo•5 minutes
- Project Setup•18 minutes
- Tailwind Introduction / 063•20 minutes
- TMDB API: Documentation / 064•11 minutes
- UI Design (Tailwind and Flowbite) / 065•14 minutes
- Navigation Structure•10 minutes
- Dark Mode Integration / 067•15 minutes
- Movie List Structure / 068•11 minutes
- API Fetch: Movie List / 069•15 minutes
- Custom Hook: useFetch / 070•12 minutes
- API Fetch: Movie Search / 071•15 minutes
- Tailwind CSS Customization / 072•16 minutes
- Page Not Found / 073•15 minutes
- Individual Movie Information / 074•28 minutes
- Scroll Restoration: Scroll to Top / 075•5 minutes
- Dynamic Page Title / 076•13 minutes
- Style Update / 077•3 minutes
- Project Deployment / 078•22 minutes
- Development Branch on Git and GitHub•10 minutes
- Solved: Netlify Error / 079•7 minutes
1 assignment•Total 15 minutes
- Movie API Project: Cinemate - Assessment•15 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 videos•Total 39 minutes
- Assignment Statement and Demo / 080•3 minutes
- Solution: Project Setup•6 minutes
- Solution: Components / 082•17 minutes
- Solution: Pages / 083•10 minutes
- Assignment Deployment•4 minutes
1 assignment•Total 15 minutes
- Assignment: Shopping Cart - Assessment•15 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 videos•Total 86 minutes
- Global State Management•7 minutes
- Project Structure / 086•6 minutes
- Context / 087•16 minutes
- Reducer / 088•26 minutes
- Methods / 089•19 minutes
- Project Deployment / 090•12 minutes
1 assignment•Total 15 minutes
- Context and Reducers Project: Shopping Cart - Assessment•15 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 videos•Total 78 minutes
- Redux Introduction•15 minutes
- Project Structure / 091•10 minutes
- Slice and Action / 092•17 minutes
- Reducers: Add and Remove / 093•16 minutes
- Redux Store State / 094•11 minutes
- Project Deployment / 095•10 minutes
1 reading•Total 10 minutes
- Conclusion to the Course 'Applied React – Projects, Routing & State'•10 minutes
3 assignments•Total 90 minutes
- Redux Project: Shopping Cart - Assessment•15 minutes
- Full Course Assessment•60 minutes
- Full Course Practice Assessment•15 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
Explore more from Software Development
- Status: Free Trial
- Status: Free Trial
Course
- Status: Free Trial
Course
- Status: Free Trial
Why people choose Coursera for their career
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.
More questions
Financial aid available,
