JavaScript Master Class Build your own React from scratch

JavaScript Master Class – Build your own React from scratch, available at $19.99, has an average rating of 4.05, with 55 lectures, 1 quizzes, based on 52 reviews, and has 547 subscribers.

You will learn about &Understand how virtual DOM works &Code your own React like library from scratch &Deeply understand what a functional and stateful component is &Understand life cycle methods and its use &Understand how setState works in React &Understand JSX & Code your Own React Like Hooks with Vanilla JavaScript This course is ideal for individuals who are Beginner to intermediate programmer It is particularly useful for Beginner to intermediate programmer.

Enroll now: JavaScript Master Class – Build your own React from scratch

Summary

Title: JavaScript Master Class – Build your own React from scratch

Price: $19.99

Average Rating: 4.05

Number of Lectures: 55

Number of Quizzes: 1

Number of Published Lectures: 55

Number of Published Quizzes: 1

Number of Curriculum Items: 56

Number of Published Curriculum Objects: 56

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

&Understand how virtual DOM works

&Code your own React like library from scratch

&Deeply understand what a functional and stateful component is

&Understand life cycle methods and its use

&Understand how setState works in React

&Understand JSX

& Code your Own React Like Hooks with Vanilla JavaScript

Who Should Attend

Beginner to intermediate programmer

Target Audiences

Beginner to intermediate programmer

Welcome &&  to early access of the JavaScript Deep Dive Course.

Treat this offer as a “One Time Investment” to all future updates.

Feel free to share any core Javascript topic that you want to see covered in this course.

The goal of the series is to master fundamentals using first principles. So, mostly we will be understanding things in depth and then implement libraries, frameworks etc. from scratch.

This course will teach you the inner working of Virtual DOM from fundamental perspective and also helps you write a minimal version of React like library from scratch.

The front end engineering course status blog is published on my medium blog.

The below is the broad agenda: 

& Code your own React Hooks using Vanilla JavaScript

& Understanding Closures

& A deep overview into OOP using JavaScript

& Understanding Virtual DOM

& createElement (the core of vdom structure creation)

& Native elements

& Diffing native elements

& Functional Components

& Diffing functional Components

& Props

& Stateful Components

& Diffing stateful components

& Events

& Refs

& Keys

& Life Cycle Methods

By the time you complete the course, you would have gained a great insight into JavaScript and also get a deeper understanding on how to build a small to medium size library/framework.

Special &&  to the team at Algorisys Technologies for the support in creating these contents.

Enjoy Coding!

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

Instructors

Rajesh Pillai
Founder at Algorisys Technologies and TekAcademy Labs

Rating Distribution

1 stars: 1 votes

2 stars: 0 votes

3 stars: 11 votes

4 stars: 15 votes

5 stars: 25 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!