It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout
watching now
1 Students
73 Lessons
Intermediate

What Will You Learn?

  • Learn the Fundamental Basics of React
  • Learn to Build Apps with React and Redux
  • Understand How Firebase Works with React and Redux

Curriculum

6h 58m
Section 1: Introduction to React
1:21:41
Creating React Element
05:02
Creating Nested React Elements
07:40
How React uses React Elements to Create Virtual DOM
00:47
What are Components in React
03:35
Create Component in React
05:34
Adding Props Validations
02:32
Create Nested Components in React
05:06
Create State in React Component
08:24
1-Update Component State using Events
07:39
Iterate Array and render Components
05:08
Pass Function Parent to Child Component
09:13
Convert React Components to JSX
09:00
Module Summary
01:41
Section 2: Data Flow in React
29:14
Module Intro
00:45
State in React Component
04:39
Shallow merging with setState
06:25
Use Props PropTypes and default Props in React Component
06:14
Create Stateless Component in React
03:34
Communicate with Parent and Child Component
06:46
Module Summary
00:51
Section 3: Component LifeCycle Methods
27:50
What are LifeCycle Methods in React Component
01:05
Types and Phases of LifeCycle Methods
03:54
LifeCycle Mounting Methods in Action
08:47
LifeCycle Updating Methods in Action
06:32
Handling Errors with componentDidCatch
07:32
Section 4: Building Components
55:44
Setup React Application
03:21
Adding Bootstrap to React
01:15
Create Mock Restful API with Json-Server
06:36
Send Http Request in React with Axios
05:50
Iterate Array and redner components
05:47
Add Bootstrap Card to render list Items
06:54
Creating Header Component
06:03
Error Handling with Custom ErrorMessage Component
07:09
Adding Loading Spinner
03:34
Deleting Link By ID
09:15
Section 5: React Context API
35:08
Introduction to React Context API-updated
03:33
React Context API in Action
15:38
Create Reducer to update the State in React Context
09:12
Refactoring Context Code
04:23
Create new Action to Handle Errors
02:22
Section 6: Working with Forms
37:06
Create AddLink Form Component
03:11
Adding State to the Form
05:30
Saving New Link by Sending HTTP Post Request
13:42
Creating Separate Component For Input FormControl
06:49
Adding Forms Validations in React and Bootstrap
07:54
Section 7: Routing with React Router
21:26
Add Link Navigations using React-Router
04:09
Redirect after submitted new Link
01:05
Creating NotFound Component
01:49
Creating new Component to Edit the Link
14:23
Section 8: State management with Redux
28:17
Setting up Redux into Raect Project
10:26
Connect React Component to Redux
06:36
Delete the Link
06:39
Add Record to Redux Store
04:36
Section 9: Consuming API using Async ActionCreators
22:39
Creating Async Action to fetch Links from the API
07:19
Delete Async Action
01:13
Create Async Action for Add Link
01:28
Fetch Single Link and set the to Form
08:30
Create Async Action to Update the Link
04:09
Section 10: Integrating with Firebase
34:12
Creating Database on Firebase
03:46
Fetching data from Firebase Collection in React Component
11:39
Delete doc from Firebase collection inside React Component
04:20
Add Doc to Firebase Collection inside Component
02:49
Update Doc from Collection in Component
11:38
Section 11: Firebase Authentication
45:37
User Registration in React and Firebase
08:39
Logout User
14:32
User Login with Firebase and React
04:18
Apply Authentication on Private Routes
07:23
Display Error Notifications in React and Redux
05:44
Deploy Project to Firebase
05:01

Description

Requirements

  • Basic Knowledge and Skills with JavaScript and HTML
  • Cool to Have, But Not Necessary: ES6+ JavaScript Experience

About the Instructor

100% of students rated this instructor as excellent!
Reviews 0
Students 13
Courses 2

Haider Malik is the founder of fullstackhour. He is a full-stack Javascript developer. He is passionate about everything JavaScript, and he loves exploring new libraries.

He’s had extensive experience developing software and working with teams to improve how software is developed to meet business objectives. Although his primary focus is on outcomes, implementation often includes technical competency

BitDegree platform reviews

Our students say Excellent
9.5 out of 10
trustpilot logo 1 trustpilot logo