JavaScript Master Class – Build your own React from scratch

Course Curriculum

Chapter 1: What this course is all about?

Lecture 1: Please read this

Lecture 2: Introduction to the course

Chapter 2: Iteration 1 – Essentials of OOP in JS

Lecture 1: Understanding constructor function

Lecture 2: Quick intro to ES6 class

Lecture 3: Fixing new keyword bug when invoking constructor function

Lecture 4: Adding instance methods to constructor function/class

Lecture 5: How inheritance works in es5 and es6

Lecture 6: Method overriding

Lecture 7: Static methods

Chapter 3: OOPS Q & A

Lecture 1: OOPS – Clarification -1 – call and object.create

Chapter 4: Iteration 2 – Understanding Virtual DOM and Diffing

Lecture 1: Source Code: Build your own React

Lecture 2: Introduction

Lecture 3: VDOM Introduction

Lecture 4: Diffing Process

Lecture 5: Diffing Process – Append to end

Lecture 6: Diffing Process – Appending in between other nodes/elements

Lecture 7: Diffing Process – Delete nodes without keys

Lecture 8: Diffing Process – Issues – when keys are not there

Chapter 5: A quick quiz to recap learning

Chapter 6: Quick Introduction to JSX

Lecture 1: Introduction to JSX

Lecture 2: JSX built-in element vs custom component

Lecture 3: Embedding expressions in JSX

Lecture 4: Returning multiple elements

Chapter 7: Iteration 3 – Code your own React like Library – Rendering Native DOM Elements

Lecture 1: An important note to the students

Lecture 2: Code Setup

Lecture 3: Coding createElement function (update 1)

Lecture 4: JavaScript – How map method works?

Lecture 5: JavaScript – How filter method works?

Lecture 6: JavaScript – How reduce method works?

Lecture 7: Rendering Native DOM elements

Lecture 8: Setting DOM attributes and events

Lecture 9: Diffing/Reconciliation of native DOM Elements

Lecture 10: More testing of DOM diffing

Chapter 8: Iteration 4 – Code your own React like Library – Functional Component

Lecture 1: Render functional component

Lecture 2: Passing props to functional component

Lecture 3: Add more scenarios

Lecture 4: Remove old nodes when comparing two trees of vdom

Chapter 9: Iteration 5 – Code your own React like Library – Stateful Component

Lecture 1: Rendering Stateful Component

Lecture 2: Passing props to stateful component

Lecture 3: Coding the setState method (sync version)

Lecture 4: Adding lifecycle method stub to the base Component Class

Lecture 5: Reconciliation/Diffing of Stateful Components

Lecture 6: Adding ref support to access DOM element

Lecture 7: More uses cases – Reconciliation when types are different

Lecture 8: Notes on Stateful Components

Chapter 10: Iteration 8 – A Todo App using TinyReact Library

Lecture 1: A demo of Todo App and issues with state mutation and lack of keys.

Chapter 11: Iteration 9 – Keys

Lecture 1: Add support for keyed elements

Lecture 2: Notes on Keys

Chapter 12: Iteration 10 – Additional features

Lecture 1: Adding support for styled attribute

Chapter 13: Build a Simple JavaScript Hooks Library

Lecture 1: Build your own hooks like library from scratch – 1

Chapter 14: Plans for further updates

Lecture 1: What I am working on for this course?

Chapter 15: Iteration 0 – JavaScript Quick Recap

Lecture 1: A quick recap of closures

Chapter 16: Articles

Lecture 1: Code Your own Node.JS/JavaScript Event Emitter from Scratch

Lecture 2: Building a Snake Game using React Hooks

Chapter 17: More Library/Framework development tutorials – Bonus

Lecture 1: Build Your Own jQuery like DOM Manipulation Library

Chapter 18: Bonus Lecture – Coupon codes +

Lecture 1: Bonus Lecture