Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Master React Redux via Real world analogy & Building Project
Rating: 4.2 out of 5(64 ratings)
14,035 students

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
Last updated 9/2022
English

What you'll 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

Course content

5 sections37 lectures3h 12m total length
  • Course Introduction1:03
  • Know Your Instructor & Get Help/Support0:13
  • What is Redux2:07

    Explore Redux as an open source, JavaScript based state management library that centralizes data, enables direct access from components, ensures data consistency, and provides Redux DevTools for debugging.

  • Redux real world explanation7:48
  • Installing nodejs and VS code4:25

    Install Node.js and Visual Studio Code on Windows, Mac, or Linux to run JavaScript outside the browser, enabling frontend and backend development and local testing.

  • Creating new react application3:07

    Create a new React application by running the appropriate command to generate the project scaffolding, then open the folder in Visual Studio Code to prepare for installing dependencies.

  • Code cleanup2:39

    Perform code cleanup by deleting unwanted files in the public folder and updating the index file, then run npm start to see a welcome message in the app.

  • Understanding React application flow and JSX7:51
  • Installing the required npm packages8:58
  • Redux lifecycle1:15

    Explore the Redux lifecycle by tracing how components create and dispatch actions, which reducers consume to update the central store, and how this flows into code.

  • Creating the required folders1:57

Requirements

  • Basics of HTML, CSS, JavaScript

Description

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.

Who this course is for:

  • Anyone who wants to learn about frontend development and want to become a true Frontend Developer