Complete React and Redux Bootcamp Build 10 Hands-On-Projects

Learn the Major Moncepts React JS like States , Hooks , Context API , REDUX by doing 10 Real-Time Hands-On Projects

4.55 (32 reviews)
Udemy
platform
English
language
Web Development
category
154
students
17.5 hours
content
Mar 2021
last update
$59.99
regular price

What you will learn

React JS

Redux

React Hooks

HTTP Methods

Description

React is a JavaScript library for building user interfaces.

  • Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.

  • Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.

  • Learn Once, Write Anywhere: We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Redux is an open-source JavaScript library for managing application state. It works best in extensive, sprawling applications. However, to utilize it properly, first you need to prepare. Everything should go smoothly as long as your middleware is all done and you have full control over fetches, states, etc. In Redux, you don’t have to fetch everything all the time. This is the reason why Redux remains the most popular flux-based tool for state management.

From the architecture point of view, Redux helps maintain order in the folders and files of the project. It helps programmers understand the application’s structure and introduce new people to the project (providing that they have previous knowledge of Redux). Its components are: global JS object, reduction functions, actions and subscriptions.

The widespread use of Redux gets even funnier when you consider the fact that the creators themselves (Dan Abramov and Andrew Clark) used to say that you might not actually need Redux. It’s important to understand what you can do with it before you stick it in your programming tool belt. Especially since there’s another solution that works great not as a competition, but rather as a supplement: React’s API interface!


The origins of SPA, a single-page application, go back to 2013 and the creation of the React library, used by Facebook. One of its biggest advantages was performance, achieved with VDOM.


State management is the repository for the current state of the app and its data. It’s a common part of all the views. For example, in the case of user data; the avatar, the full name, etc. are stored in Redux.

Front-end state management is a kind of logic that stores and refreshes current data, such as the information about the options button being highlighted, about the authorization of the user, etc. Or, if we were to put it in a more abstract way, it makes sure that business transactions are complete – by storing input data of the user interface and synchronizing it across the pages, back-end, and front-end parts.

It’s also helpful in drawing a line between the business and view layers. This makes the app run faster without having to load the same elements all over again – they’re simply stored in Redux.


Content

Introduction

what is react
What is component
JSX Overview

ES6

ES6 Intro
Let Keyword
Const keyword
Arrow Functions
For of loop
Template Literals
Spread operator

First React App

React - Hello World
Project Structure of React App
Debugging React App

Components

Components Introductions
Class Components
Functional Components
Parent and Child Components

States and Props in Components

What is state
setState in class components
Props in class components
Props in functional Components

Event Handling in React JS

Event Handling in class components
Event Handling in functional components

CSS React

Inline CSS
Local CSS
Manipulating CSS using Events

Project - 1

Counter application

Life Cycle

Class Components in Lyfe cycle

React HOOKS

What is a react hook
useState Hook
useEffect Hook
Manipulating CSS using Hooks

React Forms

Forms-Introduction
Form Submission

Project - 2

User - Authentication Part-1
User - Authentication Part-2
User - Authentication Part-3

Project - TodoList

TodoList - part-1
TodoList - part-2

React Router

Routing - part-1
Routing - part-2

Maps in React

Maps Introduction
Maps part-1
Maps part-2
Conditional Rendering

Local Storage

Local Storage with Strings
Local Storage with Objects

Project - 3

Face Book -Part1
Face Book -Part2
Face Book -Part3
Face Book -Part4

Context

what is context API
Implementing Context API
Manipulating Components using Context API

Project - Movies App

Movies App- Part1
Movies App- Part2

HTTP Methods

Fetch Method
Axios Method
Return HTML Content using HTTP Methods

Project - 6

Meals - App part-1
Meals - App part-2

Connecting to NODE JS

Node JS Intro
Hello World in NODE JS
Installing Express framework
Getting data from Node JS
Sending data to Node JS - Part1
Sending data to Node JS part-2

Redux - Intro

What is Redux
How Redux Works

Redux - Implementation

Creating components
Creating Reducer , Store
Performing Actions

Redux - Payload

What is payload
Sending data to store using payload
Payload with Objects

Redux - TodoList

Redux TodoList Demo
Creating TodoList Component
Delete Items from TodoList
Changing TodoItem UI for Edit feature
Editing Toto Items
Adding stylings

Redux - combineReducers

What is combineReducers
combineReducer implementation part-1
combineReducer implementation part-2
combineReducer - Actions

Redux Persist

What is redux - persist
Redux - Persist implimentation part-1
Redux - Persist implimentation part-2

Redux - Ecommerce

Redux ecommerce - demo
Creating components
Creating Reducers
Creating Persisted store , reducer
Creating Items Component
Delete Item from cart
Adding new Item
Adding search filter
Footer

Screenshots

Complete React and Redux Bootcamp Build 10 Hands-On-Projects - Screenshot_01Complete React and Redux Bootcamp Build 10 Hands-On-Projects - Screenshot_02Complete React and Redux Bootcamp Build 10 Hands-On-Projects - Screenshot_03Complete React and Redux Bootcamp Build 10 Hands-On-Projects - Screenshot_04

Reviews

Shubhra
November 16, 2022
He is mindblowing. I can understand everything from scratch, I am so happy that i enrolled in his course. Hats off to you!! I was finding other authors over udemy for reactjs though, he made reactjs look so easy. Highly recommended.
Aditya
October 8, 2021
Taught critical topics in a very simple language. I am eagerly waiting for new courses like AWS, next.js

Coupons

DateDiscountStatus
12/30/202050% OFF
expired
1/28/202150% OFF
expired
2/7/202150% OFF
expired

Charts

Price

Complete React and Redux Bootcamp Build 10 Hands-On-Projects - Price chart

Rating

Complete React and Redux Bootcamp Build 10 Hands-On-Projects - Ratings chart

Enrollment distribution

Complete React and Redux Bootcamp Build 10 Hands-On-Projects - Distribution chart
3607816
udemy ID
11/1/2020
course created date
11/6/2020
course indexed date
Bot
course submited by