Grab the chance to earn a scholarship!

Study a desired course for free & get money
watching now
5 Students
43 Lessons
Intermediate

What Will You Learn?

  • The principles of how virtual DOM works
  • How to code your React like library from scratch
  • Deep knowledge of functional and stateful components
  • Life cycle methods and its use
  • How setState works in React

Curriculum

4h 50m
Section 1: Promo
02:02
Section 2: Essentials of OOP in JavaScript
49:59
Fixing New Keyword bug when Invoking Constructor Function
05:19
Adding Instance Methods to Constructor Function/Class
08:19
How Inheritance Works in ES5 and ES6
13:32
Method Overriding
08:25
Static Methods
06:31
Section 3: OOPS Q&A
16:30
OOPS Q&A
16:30
Section 4: Iteration 1 - Understanding Virtual DOM and Diffing
08:34
Source Code
Introduction
01:17
VDOM Introduction
00:41
Diffing Process
01:20
Diffing Process - Append to End
01:19
Diffing Process - Appending between other nodes/elements
01:01
Diffing Process - Delete nodes without Keys
01:01
Diffing Process - Delete nodes without keys
01:51
Section 5: Iteration 2 - Quick Introduction to JSX
20:10
Introduction to JSX
07:50
JSX Built-in Element vs Custom
02:31
Embedding Expressions in JSX
05:58
Returning Multiple Elements
03:51
Section 6: Iteration 3 - Code your own React like Library - Rendering Native DOM Elements
50:52
Code Setup
02:46
Coding createElement function
16:14
Rendering Native DOM Elements
09:32
Setting DOM attributes and Events
06:09
Diffing/Reconciliation of Native DOM elements
14:38
DOM Diffing - Quick Test
01:33
Section 7: Iteration 4 - Code your own React like Library - Functional Component
21:34
Render Functional Component
12:32
Passing Props to Functional Component
02:24
Add more scenarios
04:27
Remove Old Nodes When Comparing Two Trees of VDOM
02:11
Section 8: Iteration 5 - Code your own React like Library - Stateful Component
1:09:36
Rendering Stateful Component
07:16
Passing Props to Stateful Component
02:42
Coding the setState Method (sync version)
13:59
Adding LifeCycle Method Stub to the Base Component Class
01:53
Reconciliation / Diffing of Stateful Components
12:39
Adding Ref support to Access the underlying DOM Element
10:55
More Use Cases - Reconciliation When Types Are Different
19:42
Notes on Stateful Components
Section 9: Iteration 6 - A Todo App using TinyReact Library
28:04
A Demo of Todo App and Issues with State Mutation and Lack of Keys
28:04
Section 10: Iteration 7 - Keys
12:11
Add Support for Keyed Elements
12:11
Section 11: Iteration 8 - Styled Attribute
10:40
Add Support for Styled Attribute
10:19
Notes on Keys

Description

Requirements

  • Basic knowledge of JavaScript and React
  • Some knowledge of HTML & CSS would be beneficial

About the Instructor

Reviews 0
Students 2
Courses 1

The founder of Algorisys Technologies and an experienced developer, Rajesh Pillai, has a lot of practical experience to share in his online courses. For more than 18 years he’s been engaged in developing solutions in e-commerce, banking, retail, travel & tourism fields. His work included learning and implementing a lot of different technologies, so now he can share all that he knows with you – clearly and crisply.

In Algorisys Technologies, Rajesh Pillai is leading a group of engineers architecting various products. Here, he has also taken the responsibility to help his employees improve their skills. His educational role doesn’t finish with that: he’s also mentoring some large clients in the field of front-end engineering.

Rajesh spends part of his time consulting large e-commerce projects about re-engineering their JavaScript and NodeJS side. It might seem like one man is covering a lot of ground, but Rajesh Pillai has mastered the art of time and effort management. He can input in many spheres effectively – an excellent example in our modern life!

He’s taught more than 500 students as members of corporate training, and now his online student audience is expanding, too. If you’re in need to learn about front-end technologies & visualization, and also keen on understanding the server-side programming, you’ve found the right teacher who will train and inspire you.

BitDegree platform reviews

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