Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

React Master Class - Learn By Coding Components

Name: React Master Class - Learn By Coding Components
Rating: 4.5 (109 reviews)

Learn React step by step from basics to advanced by building UI components in simple and intuitive way + includes hooks

Created byRajesh Pillai

Last updated 6/2025

English

What you'll learn

Understand how setState works
Understand common design patterns for building reusable components
Better practices and learning's from the field
Understand functional components and stateful components
Understand how React works internally and code a basic version of React like library
Build reusable React components of medium to high complexity.
Build your own state management libary
Understand Server Side Rendering

Course content

24 sections • 127 lectures • 21h 48m total length

Introduction to React curriculum5:43
Read this first please0:13
DataTable component overview2:21
A quick look at the DataTable component that we will be building.
Introduction to Calendar Component1:22
Overview of the calendar component that we will be building in this course. The part 1 and 2 is available free on youtube. The major enhancements will be available here on udemy.
Introduction to React7:32
Lets use the React API to create simple element.
Create nested element using API1:55
Lets create nested element.

Read me first please!0:16
Introduction to components5:49
In this section we will introduce you to component and take a dig at functional component in React.
Functional Component nesting/composition2:52
In this episode we will have look at how to nest components within one another.
Using inline styles/variables within functional component2:13
In this tutorial we will learn how to create variable within the component and also see how to use this concept to pass inline styles.

Introduction to Stateful component2:00
A quick note on import statement1:22
Creating the App Component2:39
Explore building an app component in React, introducing basic state management, and wiring in demo code, with a Kanban based system as a demo header and subtitle.
Introduction to State2:07
Creating Initial State3:24
Rendering Project List4:37
Component Design Introduction1:11
Extracting Project List to Component4:27
Refactoring - Extracting Props0:55
Refactor React components by extracting props with ES6 destructuring, simplifying the project list, and ensuring the application still works when props are trimmed.
Add project to State1:31
Create a button that, when clicked, updates the state by adding information to the project. Attach an on click handler and wire a function to perform the state update.
Updating state with hardcoded object5:59
Destructuring Explanation3:58
shows how destructuring with spread adds a new project to state by forming a new array with the new item and existing ones, avoiding nesting mistakes.

Creating a form for adding new Project2:27
Build a simple create, read, update, and delete feature for a project management system by creating a reusable project form component and managing project data with state.
Adding title field to form1:32
Adding select field to form1:29
Add a select field to a form by creating hardcoded option elements with value and display text, including to do, in-progress, and completed, and ensure the dropdown appears.
Adding submit button to form0:36
Adding submit handler2:38
Accessing form values by using ref3:42
Adding new project to the app state and proptypes7:45
Learn how to add a new project to app state using an onProject callback, create a new project object, update state with spread, and enforce prop types.
Edit Project34:19
Convert project list from a functional to a stateful component and manage display modes with a default value. Implement add, edit, update, and delete flows using props and event handlers.
Delete Project4:16
In this section we will implement the delete project feature.
Mark a Project as completed10:49
In this episode, we will implement the feature to mark a Project as completed.

Introduction3:13
Setting up the basic code structure4:30
Creating the DynamicForm Component Class4:47
Create a dynamic form component class in React, define properties for labels and descriptions, manage state and validation, and wire styling through class names and structure.
Implementing the render method of DynamicForm4:06
Hooking on the submit event handler2:05
Learn to hook into the submit event in React, prevent the default form submission, update state on button click, and communicate changes from child to parent.
Setting up the loop to render form elements dynamically2:11
Rendering the labels dynamically2:30
In this episode we will render the form labels dynamically.
Rendering form elements dynamically9:55
In this episode we will complete the dynamic component creation by rendering the form elements dynamically.
Adding support for Checkbox, Radio Buttons and Select Elements1:02:55
In this session we will add support for radio buttons, check boxes and select elements. We will also create a table of data to pass initial values to the Dynamic Form Component. This can be useful in "EDIT/UPDATE" scenarios.
Dynamic form - bug fixes, updates and conclusion12:09
Notes on getDerivedStateFrom Props fix0:11

Setting up code0:09
Introduction0:27
In this tutorial we will learn how to implement simple drag and drop feature in React without using any third party library.
What we will be building?2:33
An overview of what we will be building.
The basic code to set things up and render the required user interface.11:47
Develop a basic React app by setting up the project, importing components, and styling to render a task list with work-in-progress and complete sections.
Implementing the drag and drop feature14:04

Requirements

You should have a basic knowledge of JavaScript and ES6.

Description

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

This course will take you from React Novice to React intermediate (advanced, or Expert level, with practice). We will covering some fundamentals in the beginning but move on to applications and the cool stuff.

In this course we will also code a reusable DataTable component from scratch, implement drag and drop without using any third-party library, create JSON based dynamic forms and much more.

You will learn many fundamental aspects of React Component design and also learn how to take this approach to build any UI component that you wish. Once you successfully complete the course you will have learned how to build a pretty advanced React component that contains the following features.

[ x ] React fundamentals

[ x ] Component in depth

[ x ] Hooks

[ x ] Understanding Virtual DOM and diffing

[ x ] Context API

[ x ] Learn to build dynamic form component using JSON.

[ x ] Customizing components using props

[ x ] Learn to add drag and drop feature without using third party library.

[ x ] Bind data to a table layout

[ x ] Searching on any columns

[ x ] Pagination, with custom pagination view

[ x ] Drag and reorder table columns

[ x ] In-place editing

[ x ] Custom cell renderer

[ x ] Attach the dynamic form to the DataTable.

[ x ] React Common Patterns

[ x ] State Management

[ x ] Server Side Rendering(SSR) and more

Planned overall agenda for the course:

Section 1 -
Fundamentals of React

Introduction
Fundamentals of React
JSX in depth
Component based design
Fragment
Functional Component
Stateful Component
Event Handling
Conditional
State Management
Life Cycle
Error Handling

Section 2 -
Advanced React

Type checking with PropTypes
Refs and the DOM
Uncontrolled Components
Higher Order Components (HOC)
Render Props
Performance Optimization
Context API
Portals
Integrating with other JavaScript

Section 3 - Building a simple CRUD app with React
Section 4 - New React Features
Section 5 - Context API Demo
Section 6 - Building a simple Modal Component
Section 7 - Building a Tagging Component
Section 8 - Building a Calendar Component
Section 9 - Building a DataTable Component
Section 10 - React Drag and Drop Tutorial

We will minimize the use of third party libraries/frameworks and will only include them when absolutely required.

NOTE: Most of the components developed in this training, is kept simple so that even a beginner could understand. To make it work in production scenarios, this has to be thoroughly tested and adapted as needed.

Enjoy Programming!!

(Everyone can code!)

Who this course is for:

Anyone who is tired of building a todo application and want to learn how to create a reusable medium complexity component and application should find this course interesting.

React Master Class - Learn By Coding Components

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 19min

Understanding JSX (Updated)4 lectures • 19min

Functional Components (Refer the later sections for changes in FC)4 lectures • 11min

Stateful or Class Component (KB for migration to newer React)12 lectures • 34min

How setState works (Updated)1 lecture • 14min

CRUD Application (Updated)10 lectures • 1hr 10min

Installing Create-React-App2 lectures • 6min

Build a Dynamic JSON based Form Component11 lectures • 1hr 49min

React Drag and Drop Tutorial (Updated)5 lectures • 29min

Creating an InputTag component (Updated)1 lecture • 28min

Requirements

Description

Who this course is for: