React Master Class – Learn By Coding Components

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction to React curriculum

Lecture 2: Read this first please

Lecture 3: DataTable component overview

Lecture 4: Introduction to Calendar Component

Lecture 5: Introduction to React

Lecture 6: Create nested element using API

Chapter 2: Understanding JSX (Updated)

Lecture 1: Introduction to JSX

Lecture 2: JSX built in elements vs custom components

Lecture 3: Embedding Expressions in JSX

Lecture 4: Return multiple element from render

Chapter 3: Functional Components (Refer the later sections for changes in FC)

Lecture 1: Read me first please!

Lecture 2: Introduction to components

Lecture 3: Functional Component nesting/composition

Lecture 4: Using inline styles/variables within functional component

Chapter 4: Stateful or Class Component (KB for migration to newer React)

Lecture 1: Introduction to Stateful component

Lecture 2: A quick note on import statement

Lecture 3: Creating the App Component

Lecture 4: Introduction to State

Lecture 5: Creating Initial State

Lecture 6: Rendering Project List

Lecture 7: Component Design Introduction

Lecture 8: Extracting Project List to Component

Lecture 9: Refactoring – Extracting Props

Lecture 10: Add project to State

Lecture 11: Updating state with hardcoded object

Lecture 12: Destructuring Explanation

Chapter 5: How setState works (Updated)

Lecture 1: How setState works?

Chapter 6: CRUD Application (Updated)

Lecture 1: Creating a form for adding new Project

Lecture 2: Adding title field to form

Lecture 3: Adding select field to form

Lecture 4: Adding submit button to form

Lecture 5: Adding submit handler

Lecture 6: Accessing form values by using ref

Lecture 7: Adding new project to the app state and proptypes

Lecture 8: Edit Project

Lecture 9: Delete Project

Lecture 10: Mark a Project as completed

Chapter 7: Installing Create-React-App

Lecture 1: Setting up create-react-app

Lecture 2: Overview of files created by create-react-app

Chapter 8: Build a Dynamic JSON based Form Component

Lecture 1: Introduction

Lecture 2: Setting up the basic code structure

Lecture 3: Creating the DynamicForm Component Class

Lecture 4: Implementing the render method of DynamicForm

Lecture 5: Hooking on the submit event handler

Lecture 6: Setting up the loop to render form elements dynamically

Lecture 7: Rendering the labels dynamically

Lecture 8: Rendering form elements dynamically

Lecture 9: Adding support for Checkbox, Radio Buttons and Select Elements

Lecture 10: Dynamic form – bug fixes, updates and conclusion

Lecture 11: Notes on getDerivedStateFrom Props fix

Chapter 9: React Drag and Drop Tutorial (Updated)

Lecture 1: Setting up code

Lecture 2: Introduction

Lecture 3: What we will be building?

Lecture 4: The basic code to set things up and render the required user interface.

Lecture 5: Implementing the drag and drop feature

Chapter 10: Creating an InputTag component (Updated)

Lecture 1: Lets get coding the InputTag component

Chapter 11: Creating a Modal Component (Updated)

Lecture 1: Introduction

Lecture 2: Coding the modal component

Lecture 3: Setting Prop types

Lecture 4: Close modal on ESC key press

Lecture 5: React Portal Feature

Chapter 12: Creating a Calendar Component (Updated)

Lecture 1: Coding a calendar component – part -1

Lecture 2: Coding a calendar component – part -2

Chapter 13: React Context API

Lecture 1: Read Me First Please!

Lecture 2: Understanding the new Context API

Lecture 3: Some bug fixes

Lecture 4: Building a reusable state library using the new context API.

Chapter 14: HOC- Simple Example-withBorder

Lecture 1: Introduction to HOC

Lecture 2: Building the App component

Lecture 3: Implementing the withBorder HOC Component

Lecture 4: Refactor the withBorder HOC Component

Chapter 15: HOC- Intermediate Example-withCollapsible

Lecture 1: Coding a collapsible HOC component

Chapter 16: HOC – React Modal Dialog (Updated)

Lecture 1: Coding the React Modal Dialog as an HOC

Chapter 17: Render Props

Lecture 1: Render props

Chapter 18: Building your own DataTable Component

Lecture 1: Setting up basic code for DataTable

Lecture 2: Setting up the data for headers

Lecture 3: Setting up the table rows data

Lecture 4: Configuring DataTable in App Component

Lecture 5: Rendering the headers in the DataTable component

Lecture 6: Rendering the table body with data

Lecture 7: Sorting columns by clicking on the column headers

Lecture 8: Reordering columns/headers by drag and drop