Master React Redux via Real world analogy & Building Project

Learn React Redux in the most simple way through real world example and hands-on project based approach

4.60 (62 reviews)
Udemy
platform
English
language
Other
category
Master React Redux via Real world analogy & Building Project
14,034
students
3 hours
content
Sep 2022
last update
$19.99
regular price

What you will learn

You will learn the basics of ReactJS and component development

You will learn about Redux state management

You will learn about various React hooks

You will learn the skill of debugging, finding issue and fixing them

You will learn everything with real world examples and hands-on based approach

You will learn important ES6 concepts

Why take this course?

In this course, you will Learn React Redux in the most simple way through real world example and

hands-on project based approach.

Following are the topics we will cover:

1.1-What is Redux

1.2-Redux real world explanation

1.3-Installing nodejs and VS code

1.4-Creating new react application

1.5-Code cleanup

1.6-Understanding React application flow and JSX

1.7-Installing the required npm packages

1.8-Redux lifecycle

1.9-Creating the required folders

2.1-Creating Actions and Action constants

2.2-Creating product reducer

2.3-Combine all reducers

2.4-Creating the product store

2.5-Redux DevTools and Provider

2.6-Creating components template files

2.7-Understanding the package json file

2.8-Creating and Understanding first react component

2.9-Creating skeleton for all other components

3.1-Implementing static and dynamic routing of components

3.2-Applying styling to components by inline style and css class

3.3-Accessing state information from store inside component

3.4-Designing the Product Component

3.5-Get Fake Product List in All Products component from API

3.6-Dispatch action from the component

3.7-Modifying the reducer to update the state information

3.8-Styling  and displaying all products on the home screen

4.1-Dynamic Navigation to Product Detail page on click of a product

4.2-Get Product Id from url and get product details from the API

4.3-Dispatch the selected product to the reducer and get it back in component

4.4-Styling Product Details page and showing data with conditional JSX

4.5-Adding routing on the logo

4.6-Remove the previous product and directly load the product on details screen

4.7-Exploring Action and State information on redux Dev Tools

You will learn about various react hooks.

You will get the complete source code for the course.

Content

Introduction Setup and Installation

Course Introduction
What is Redux
Redux real world explanation
Installing nodejs and VS code
Creating new react application
Code cleanup
Understanding React application flow and JSX
Installing the required npm packages
Redux lifecycle
Creating the required folders

Implementing Action Reducer and Store

Creating Actions and Action constants
Creating product reducer
Combine all reducers
Creating the product store
Redux DevTools and Provider
Creating components template files
Understanding the package json file
Creating and Understanding first react component
Creating skeleton for all other components

Working on Components and API data

Implementing static and dynamic routing of components
Applying styling to components by inline style and css class
Accessing state information from store inside component
Designing the Product Component
Get Fake Product List in All Products component from API
Dispatch action from the component
Modifying the reducer to update the state information
Styling and displaying all products on the home screen

Routing Designing Dispatching Action

Dynamic Navigation to Product Detail page on click of a product
Get Product Id from url and get product details from the API
Dispatch the selected product to the reducer and get it back in component
Styling Product Details page and showing data with conditional JSX
Adding routing on the logo
Remove the previous product and directly load the product on details screen
Exploring Action and State information on redux Dev Tools

Source code

Thank you
Source code

Screenshots

Master React Redux via Real world analogy & Building Project - Screenshot_01Master React Redux via Real world analogy & Building Project - Screenshot_02Master React Redux via Real world analogy & Building Project - Screenshot_03Master React Redux via Real world analogy & Building Project - Screenshot_04

Reviews

Andriy
July 2, 2023
The author is trying to teach us React, Redux, Router in 3 hours, without a single link to resources with documentation or additional materials.
Rakesh
July 20, 2022
it was good experience to learn this course thank you but it could be more lengthy as it was short but great course to learn thank you
Jeffrey
May 27, 2022
Before taking this course, I had a very simple idea of Redux. After taking the course I can say I am pretty knowledgeable, I still have to do some work but in general, this course did its job and the tutor sure put some work into this.

Coupons

DateDiscountStatus
1/16/2022100% OFF
expired
1/18/2022100% OFF
expired
1/21/2022100% OFF
expired
5/21/2022100% OFF
expired
5/24/2022100% OFF
expired
5/25/2022100% OFF
expired
6/25/2022100% OFF
expired
7/1/2022100% OFF
expired
8/5/2022100% OFF
expired
9/1/2022100% OFF
expired
9/3/2022100% OFF
expired
3/23/2024100% OFF
expired
3/23/2024100% OFF
expired

Charts

Price

Master React Redux via Real world analogy & Building Project - Price chart

Rating

Master React Redux via Real world analogy & Building Project - Ratings chart

Enrollment distribution

Master React Redux via Real world analogy & Building Project - Distribution chart

Related Topics

4495286
udemy ID
1/14/2022
course created date
1/16/2022
course indexed date
Ignacio Castro
course submited by