Ezitech > Designing > The Complete Guide to React (incl Hooks, React Router, Redux)

The Complete Guide to React (incl Hooks, React Router, Redux)

Ezitech Learning Institute is provinding beginners the complete guide to React in our best react js course with certification. The most recent version of React, React 18, is thoroughly covered in this course. It teaches the most recent version of React with all the essential, contemporary features you need to know. It has been totally […]

Teacher
Ezitech
1,183 students enrolled

Ezitech Learning Institute is provinding beginners the complete guide to React in our best react js course with certification.

The most recent version of React, React 18, is thoroughly covered in this course.
It teaches the most recent version of React with all the essential, contemporary features you need to know. It has been totally revised and re-recorded from scratch.

– – – –

You can select between two courses in this course: the “total” road, which consists of the whole >40-hour course, and the “summary” option, which consists of a 4-hour summary module.

– – – –

What you will Learn from this Course :

The most well-known JavaScript library available today for creating cutting-edge, responsive user interfaces for the web is React.js.
This course will teach you React thoroughly, from the ground up, step by step, by going over all the fundamentals, going through a tonne of examples, and also by exposing you to more complex ideas.
There is a reason why this course is so big: you’ll get all the theory, a tonne of examples and demos, assignments and exercises, and plenty of crucial information that is overlooked by most other resources.
And just in case you’re here because of an advertisement or “the algorithm” and you have no idea why you would want to learn React,

– – – –

Here you will find “React – The Complete Guide.
Utilizing all the most recent patterns and best practises, this course will teach you React.js in a hands-on manner. To become a React.js developer, you will master all the essential principles as well as advanced ideas and associated topics.
It covers EVERYTHING you need to know and understand to become a React.js developer, which makes this a massive course.

– – – –

You will learn a tonne from this course, regardless of your prior experience of React or whether you already have some fundamental expertise (not essential, but also not an issue).
Whatever your objective is, this course will help you achieve it. My aim is for you to feel comfortable working with React so that you may apply for React employment, utilise it in your own projects, or just build your developer portfolio.

– – – –

This course was first developed by me in 2017, and I’ve continued to improve it ever since, completely redesigning it in 2022-23. Additionally, I’m committed to keeping this course current so that you may use it to learn React in the most effective manner possible.

– – – –

What does Best React Js  course with Certification  cover?

  • React.js is explained in detail (what is it, why would you use it, etc.).
  • The fundamentals of how React functions, creating components with React, and creating user interfaces using React
  • Properties, components, and dynamic data binding
  • using user state and events to produce interactive apps
  • A (detailed) look into React’s inner workings to understand how it functions
  • Instructions on how to use conditional content and lists in detail
  • (Deep) React Hooks!
  • Utilizing built-in Hooks and creating unique Hooks
  • Debugging React applications
  • Using “Styled Components” and “CSS Modules” to style React applications
  • Utilizing “Fragments” and “Portals”
  • Managing side effects
  • Functional components and class-based components
  • processing replies, transitory stages, and HTTP requests
  • handling user input and forms (incl. validation)
  • Toolkit for Redux & Redux
  • Using React Router for routing
  • An extensive overview of Next.js
  • Setting up React Apps
  • Authentication implementation
  • Unified tests
  • React and TypeScript together
  • There are several examples and sample projects so that you can use all you have learnt in actual projects.
  • Check out the whole curriculum on this website for more information.

As promised, below is the “Complete Guide.”
And the greatest part?

There is no prerequisite React knowledge required!

There is no prior knowledge expected for best react js course with certification. All you need is a basic understanding of web development and JavaScript (but the course also includes a quick refresher on JavaScript to make sure everyone is up to speed!).

Introduction to the course

1
We're glad you're here
1:05
2
What is React.js
4:38
3
Why React Instead Of Just JavaScript
7:26
4
Building Single-Page Applications (SPAs) with React
1:34
5
Exploring React.js Alternatives (Angular Vue)
3:34
6
About This Course & Course Outline
8:28
7
The Two Ways (Paths) Of Taking This Course
4:23
8
How to Get the Most from This Course
4:17
9
Setting Up The Course Dev Environment (Code Editor)
4:46

Refresher on JavaScript

1
Module Introduction
1:36
2
Understanding let and const
3:06
3
Arrow Functions
5:28
4
Exports and Imports
4:44
5
Understanding Classes
4:38
6
Classes, Properties and Methods
3:04
7
The Spread & Rest Operator
6:31
8
Destructuring
3:14
9
Reference and Primitive Types Refresher
4:26
10
Refreshing Array Functions
4:26
11
Wrap Up
0:53

Basics of React & Using Components

1
Module Introduction
3:45
2
What Are Components And Why Is React All About Them
7:11
3
React Code Is Written In A Declarative Way
3:43
4
Creating a new React Project
12:24
5
Analyzing a Standard React Project
11:52
6
Introducing JSX
3:39
7
How React Works
4:23
8
Building a First Custom Component
9:01
9
Writing More Complex JSX Code
5:06
10
Adding Basic CSS Styling
4:47
11
Outputting Dynamic Data & Working with Expressions in JSX
8:21
12
Passing Data via props
12:39
13
Adding normal JavaScript Logic to Components
5:58
14
Splitting Components Into Multiple Component
12:46
15
The Concept of Composition children props
13:07
16
A First Summary
14:07
17
A Closer Look At JSX
9:09
18
Organizing Component Files
3:05
19
An Alternative Function Syntax
2:40

Working with Events & Reacting to State

1
Module Introduction
2:28
2
Listening to Events & Working with Event Handlers
9:40
3
How Component Functions Are Executed
5:44
4
Working with State
10:54
5
A Closer Look at the useState Hook
7:37
6
Adding Form Inputs
9:59
7
Listening to User Input
5:17
8
Working with Multiple States
6:45
9
Using One State Instead (And What's Better)
4:52
10
Updating State That Depends On The Previous State
4:38
11
Handling Form Submission
4:55
12
Adding Two-Way Binding
2:58
13
Child-to-Parent Component Communication (Bottom-up)
13:57
14
Lifting The State Up
7:01
15
Controlled vs Uncontrolled Components & Stateless vs Stateful Components
5:23

Conditional content and rendering lists

1
Module Introduction
0:47
2
Rendering Lists of Data
7:08
3
Using Stateful Lists
4:31
4
Understanding Keys
7:00
5
Outputting Conditional Content
6:48
6
Adding Conditional Return Statements
5:22
7
Demo App Adding a Chart
7:25
8
Adding Dynamic Styles
7:29
9
Wrap Up & Next Steps
11:05

Styling React Components

1
Module Introduction
3:44
2
Setting Dynamic Inline Styles
9:59
3
Setting CSS Classes Dynamically
5:01
4
Introducing Styled Components
9:47
5
Styled Components & Dynamic Props
8:32
6
Styled Components & Media Queries
2:28
7
Using CSS Modules
6:59
8
Dynamic Styles with CSS Modules
5:32

How to Debug React Apps

1
Module Introduction
1:35
2
Understanding React Error Messages
6:19
3
Analyzing Code Flow & Warnings
5:55
4
Working with Breakpoints
6:04
5
Using the React DevTools
6:00

A complete practise project is now available

1
Module Introduction
2:56
2
Adding a User Component.
7:07
3
Adding a re-usable Card Component
8:38
4
Adding a re-usable Button Component
3:51
5
Managing the User Input State
4:58
6
Adding Validation & Resetting Logic
4:35
7
Adding a Users List Component
10:46
8
Managing a List Of Users via State
9:28
9
Adding The ErrorModal Component
8:05
10
Managing the Error State
8:58

Working with Fragments Portals and Refs Diving Deeper

1
Module Introduction
0:49
2
JSX Limitations & Workarounds
8:47
3
Creating a Wrapper Component
4:15
4
React Fragments
2:44
5
Introducing React Portals
4:21
6
Working with Portals
12:25
7
Working with refs
11:48
8
Controlled vs Uncontrolled Components
3:05

Advanced Using Reducers Handling Side Effects and the Context AP

1
Module Introduction
1:36
2
What are Side Effects & Introducing useEffect
6:52
3
Using the useEffect Hook
10:59
4
useEffect & Dependencies
9:02
5
Using the useEffect Cleanup Function
8:56
6
useEffect Summary
3:39
7
introducing useReducer & Reducers In General
9:17
8
Using the useReducer Hook
14:13
9
useReducer & useEffect
9:53
10
useReducer vs useState for State Management
3:36
11
introducing React Context (Context API)
7:23
12
Using the React Context API
10:45
13
Tapping Into Context with the useContext Hook
1:42
14
Making Context Dynamic
4:35
15
Building & Using a Custom Context Provider Component
9:07
16
React Context Limitations
2:46
17
Learning the Rules of Hooks
7:10
18
Refactoring an Input Component
6:07
19
Diving into Forward Refs
13:39

Building a Food Ordering App for a Practice Project

1
Module Introduction
2:50
2
Starting Setup
4:11
3
Adding a Header Component
9:08
4
Adding the Cart Button Component
5:27
5
Adding a Meals Component
9:09
6
Adding Individual Meal Items & Displaying Them
9:31
7
Adding a Form
10:10
8
Working on the Shopping Cart Component
5:12
9
Adding a Modal via a React Portal
7:43
10
Managing Cart & Modal State
10:49
11
Adding a Cart Context
7:44
12
Using the Context
4:53
13
Adding a Cart Reducer
10:46
14
Working with Refs & Forward Refs
10:50
15
Outputting Cart Items
7:24
16
Working on a More Complex Reducer Logic
5:30
17
Making Items Removable
8:19
18
Using the useEffect Hook
7:45

A Look at React's Backend & Optimization Methods

1
Module Introduction
2:17
2
How React Really Works
7:24
3
Component Updates In Action
6:53
4
A Closer Look At Child Component Re-Evaluation
10:42
5
Preventing Unnecessary Re-Evaluations with React memo
11:37
6
Preventing Function Re-Creation with useCallback
4:13
7
useCallback and its Dependencies
7:11
8
A First Summary
4:02
9
A Closer Look At State & Components
3:31
10
Understanding State Scheduling & Batching
9:06
11
Optimizing with useMemo
9:02

Classbased components are an alternative method of building components

1
Module Introduction
2:11
2
What & Why
4:53
3
Adding a First Class-based Component
6:55
4
Working with State & Events
11:39
5
The Component Lifecycle Class-based Components Only
5:21
6
Lifecycle Methods In Action
11:47
7
Class-based Components & Context
4:54
8
Classbased vs Functional Components A Summary
2:43
9
Introducing Error Boundaries
9:53

Http Request Sending e.g. Connecting to a Database

1
Module Introduction
1:46
2
How To Not Connect To A Database
3:33
3
Our Starting App & Backend
3:53
4
Sending a GET Request
10:36
5
Using async await
2:02
6
Handling Loading & Data States
4:46
7
Handling Http Errors
11:14
8
Using useEffect For Requests
6:28
9
Preparing The Project For The Next Steps
6:17
10
Sending a POST Request
9:17
11
Wrap Up
1:17

Making Personalized React Hooks

1
Module Introduction
1:25
2
What are Custom Hooks
1:45
3
Creating a Custom React Hook Function
6:40
4
Using Custom Hooks
4:46
5
Configuring Custom Hooks
5:52
6
Onwards To A More Realistic Example
6:46
7
Building a Custom Http Hook
9:17
8
Using the Custom Http Hook
7:46
9
Adjusting the Custom Hook Logic
8:46
10
Using The Custom Hook In More Components
8:54

Using Forms and User Input

1
Module Introduction
1:36
2
Our Starting Setup
1:42
3
What's So Complex About Forms
5:09
4
Dealing With Form Submission & Getting User Input Values
10:04
5
Adding Basic Validation
3:59
6
Providing Validation Feedback
3:55
7
Handling the was touched State
5:51
8
React To Lost Focus
4:17
9
Refactoring & Deriving States
9:08
10
Managing The Overall Form Validity
7:31
11
Adding A Custom Input Hook
12:45
12
Re-Using The Custom Hook
2:55
13
A Challenge For You
1:42
14
Applying Our Hook & Knowledge To A New Form
11:06
15
Summary
3:18
16
Bonus Using useReducer
8:23

Project for Practice Adding Forms & Http To The Food Order App

1
Module Introduction
3:22
2
Moving Meals Data To The Backend
4:06
3
Fetching Meals via Http
9:28
4
Handling the Loading State
4:01
5
Handling Errors
7:44
6
Adding A Checkout Form
10:48
7
Reading Form Values
4:52
8
Adding Form Validation
12:05
9
Submitting
6:49
10
Adding Better User Feedback
9:29
11
Summary
1:32

Exploring Redux A Context API Alternative

1
Module Introduction
1:05
2
Another Look At State In React Apps
5:14
3
Redux vs React Context
6:20
4
How Redux Works
5:49
5
Exploring The Core Redux Concepts
15:15
6
More Redux Basics
3:05
7
Preparing a new Project
2:02
8
Creating a Redux Store for React
4:54
9
Providing the Store
3:13
10
Using Redux Data in React Components
5:09
11
Dispatching Actions From Inside Components
3:33
12
Redux with Class-based Components
10:21
13
Attaching Payloads to Actions
4:16
14
Working with Multiple State Properties
6:20
15
How To Work With Redux State Correctly
5:08
16
Redux Challenges & Introducing Redux Toolkit
5:28
17
Adding State Slices
8:12
18
Connecting Redux Toolkit State
4:47
19
Migrating Everything To Redux Toolkit
6:21
20
Working with Multiple Slices
11:51
21
Reading & Dispatching From A New Slice
6:57
22
Splitting Our Code
5:03
23
Summary
3:54

Modern Redux

1
Module Introduction
0:40
2
Redux & Side Effects and Asynchronous Code
3:28
3
Refresher Practice Part 1
20:13
4
Refresher Practice Part 2
18:01
5
Redux & Async Code
4:28
6
Frontend Code vs Backend Code
5:41
7
Where To Put Our Logic
9:00
8
Using useEffect with Redux
6:01
9
Handling Http States & Feedback with Redux
12:50
10
Using an Action Creator Thunk
12:08
11
Getting Started with Fetching Data
8:40
12
Finalizing the Fetching Logic
5:17
13
Exploring the Redux DevTools
5:38
14
Summary
1:54

Related Courses
Development
Front-End Course With Projects
PKR20,000 PKR18,000

Front-End Course With Projects
You will study all aspects of front-end web programming from beginning in this Front-End Web programming – Complete Guide (Step by Step) [Upd...
Advanced
60 Lectures
65 Days
Preview this course
Add to Wishlist
PKR20,000 PKR18,000
Govt set to ban 138 betting apps, 94 loan apps with Chinese links: Report
Free Courses
Machine Learning & Data Science Bootcamp
Free

Machine Learning & Data Science Bootcamp
Description: This is a best-selling Machine Learning and Data Science course that was been updated with the most recent trends and abilities for 20...
Advanced
214 Lectures
43h 48m
Preview this course
Add to Wishlist
Free
digital marketing course
Free Courses
TripAdvisor, Google My Business, and Local SEO
Free

TripAdvisor, Google My Business, and Local SEO
  Digital Marketing Course for beginners or freshly graduates Requirements An Internet Connection. No Previous Knowledge of Digital Marketing Is Re...
Intermediate
18 Lectures
2h 06m
Preview this course
Add to Wishlist
Free
best react js course certification
Enroll course
30-Day Money-Back Guarantee

Includes

Full lifetime access
Access on mobile and TV

Archive

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed
The Complete Guide to React (incl Hooks, React Router, Redux)
Category:
Designing, Development, Free Courses, IOS & AND
Teacher
Ezitech
Price:
Free
Get Course