Course Content

About Course

4m 35s

How to use LearnVern

3m 20s

What is React

4m 5s

Single Page Application

3m 12s

Why Choose React for Web Development?

6m 30s

Real Time Example

3m 46s

React VS Angular VS vue

7m 7s

Setting up the first project

13m 22s

Quiz : React Introduction

5m

Components in React

10m 37s

How to Create Components in React

7m 14s

Installation of Node

7m 57s

Creating the First Project

8m 41s

Understanding File Structure

10m 3s

Understanding Index.js

9m 38s

Introduction to JSX

8m 32s

Custom Components

9m 5s

Assignmnet : Introduction

3m 48s

Assignment : Components

3m 47s

Quiz : Components

5m

Adding Template in JSX React

4m 19s

Adding Styles in JSX React

7m 34s

Dynamic Data in JSX React

8m 46s

Data Passing in React

11m 16s

Accessing Props in React

8m 40s

Implementing JS Code in JSX React

9m 21s

Creating Single Responsibility Components in React

16m 54s

Children Props in React

14m 40s

Other Details in JSX React

14m 16s

Assignment : JSX

4m

Quiz : JSX

5m

Event Listening in React

8m 16s

Event Handling in React

11m 13s

States in React

17m

Adding Forms in React

9m 59s

Feching Form Inputs in React

18m 7s

Storing Form Inputs in React

8m 56s

Another Method for Storing Form Inputs in React

20m 53s

Submitting Forms in React

8m 57s

Two Way Binding in React

6m 19s

Component Communication in React

7m 27s

Adding Custom Components in React

10m 40s

Lifting State up in React

4m 3s

Filter Component in React

17m 14s

Updating States in React

9m 3s

Controlled vs Uncontrolled Components in React

11m 50s

Assignment : Events

5m 13s

Quiz : Events

5m

Iterating the List in JSX React

14m

Arrays in React State

19m

Filtering the Data in React

8m 56s

Conditional Rendering in React

13m 31s

Handling Conditions in React

8m 24s

Conditional Return in React

15m 13s

Adding Handlers in React part -1

8m 31s

Adding Handlers in React part -2

21m 36s

Charts in React

16m 58s

Adding Dynamic Style Sheets in React

10m 31s

Creating Dataset in React

11m 12s

Calculating Max Value in Charts

11m 3s

Global CSS in React

6m 8s

Assignment : Iterations and conditions

4m 13s

Quiz : Iterations and conditions

5m

Styling in React

7m 9s

Dynamic Styling

14m 56s

Dynamic Classes

10m 42s

CSS Scope in React

11m 18s

Styled Components in React

21m 13s

Responsive Styling in React

9m 28s

Style Module in React

6m 58s

Adding Media Queries in React

9m 38s

Assignment : Styling

4m 21s

Quiz : Styling

5m

Handling Syntax Errors in React

17m 43s

Debugging in React

13m 50s

Developer Tools in React

13m 7s

Assignment : Error and Debugging

3m 2s

Quiz : Error and debugging

4m

Creating Application in React

18m 29s

Container Component

7m 59s

Adding Styles to Inputs

7m 13s

Reusable Component

11m 9s

Managing Data in React

11m 38s

Resetting & Validating Form Data in React

15m 42s

Adding Data to List in React

12m 36s

Adding State to List in React

13m 21s

Adding Modal in React

15m 11s

Error Boundaries in React

13m 26s

Assignment : Dialogs and Modals

4m 4s

Quiz : Dialog and modals

4m

Limitations of JSX

10m 7s

Wrapper Component in React

4m 28s

Fragments in React

7m 25s

Portals in React

27m 33s

React Refs

20m 45s

Uncontrolled Inputs in React

7m 1s

Assignment : Fragments and portals

4m 27s

Quiz : Fragments and Portals

5m

Effect Hooks in React Part-1

12m 7s

Effect Hooks in React Part-2

11m

Local Storage With React Hooks

15m 34s

UseEffect Hook in React

10m 22s

Adding React Dependencies

25m 6s

Adding Delays in React

11m 6s

Cleartimeout Function in React

14m 5s

Reducer in React

12m 23s

Usereducer() Hook in React

11m 40s

Replacing State in React

25m 12s

useReducer With useEffect in React

13m 2s

useReducer vs useState

8m 46s

Introduction to React Context

14m 58s

Adding Context in React

12m 39s

Providing React Context

7m 54s

Listening React Context

12m 34s

React useContext Hook

6m 11s

Passing Function

15m 54s

React Context Provider

13m 25s

limitations of React Context

6m 43s

React Hooks

10m 31s

TagInput in React

12m 59s

Using ForwardRef in React

12m 56s

Assignments: Effects, Reducer & Context

2m 50s

Quiz : Effects, Reducer & Context

5m

Database Connection in React

10m 12s

Backend Application in React

12m 8s

Data Fetching in React

9m 41s

Handling Response in React

10m 5s

React Async

9m 21s

Handling Loaders in React

11m 10s

Handling No Data in React

7m 35s

Structure of HTTP Request in React

10m 35s

React Error Codes

12m 18s

Handling Errors in React

14m 39s

useeffect() & UseCallback() in React

11m 57s

Storing the Data in React

16m 21s

Try and Catch Block in React

7m 4s

Transforming Response in React

16m 47s

Assignment : HTTP Module

2m 29s

Quiz : Http module

6m

React Custom Hooks

7m 1s

Why to use Custom Hooks

4m 22s

Creating Custom Hooks

13m 27s

Implementing Custom Hooks in React

16m 4s

Configuring React Custom Hooks

9m 49s

Custom Hook With HTTP

17m 3s

Adding Parameteres in Custom Hooks

7m 22s

Calling React Custom Hooks

23m 47s

Using callback() with Custom Hooks

2m 30s

Adjusting Parameters in Custom Hooks

7m 16s

React Forms

10m 1s

Checking Validity in React Forms

6m 34s

Creating Simple Form in React

17m 25s

Add Validations on React Forms

11m 40s

Handling Touch Property in React

11m 22s

Handling Blur Property in React

8m 5s

Input Validity Check in React Forms

15m 50s

Validity in React Forms

7m 39s

Adding Multiple Inputs in React Forms

15m 33s

Adding Custom Hook in React Forms

8m 1s

Generalizing Input Hooks

8m 4s

Using React Hooks in Component

10m 50s

Using Reducer in React

13m 45s

Assignment : Custom Hooks and Forms

3m 50s

Quiz : Custom hook and forms

5m

Introduction to Redux

13m 31s

Redux vs Context API

7m 50s

How Redux Works

7m 48s

Understanding Redux in detail

12m 7s

Handling Actions in Reducer Function

10m 47s

Installing Redux with React

5m 45s

Creating store

11m 8s

Providing Store

7m 40s

Subscribing Data in Component

12m 27s

Dispatching Actions in Component

11m 32s

Handling Multiple Properties in Redux

17m 3s

Challenges in Redux

8m 21s

Redux Toolkit

13m 22s

Handling Redux States

6m 26s

Defining Actions in Redux

8m 13s

Routing

10m 2s

Installing React Router

8m 44s

Defining Routes

14m 44s

Navigation

5m 6s

React Router Link

5m 33s

NavLink & activeClass Name in React

4m 15s

Dynamic Routes in React

9m 13s

Switch and Nested Routes

21m 57s

Redirect Component

7m 28s

404 Page Not Found in React

6m 5s

Assignment : Redux

3m 53s

Quiz : Redux

5m

Authentication in React

7m 21s

How Authentication Works

8m 40s

Types of Authentication

8m 41s

Firebase Authentication in React

8m 1s

Sign up Page in React

12m 53s

Handling Warning Messages

7m 37s

Firebase Authentication for Login Page

9m

Adding Authentication Context

16m 59s

Implementing Authentication Context

4m 39s

Handling Protected Resources

9m 29s

Password Reset Form in React

9m 23s

Improvising User Experience

5m 1s

Logout in React

12m 38s

Quiz : Authentication

5m

Course Summary

4m 47s

Interview Questions in React js

29m 13s

Career Guideline

2m 40s

Class Based Components

React Js for Web Development Class Based Components

Enroll Now For Free
Previous Next
Discussion
Previous Discussion Next
Previous
Next
  • Class based components

Course Content

About Course

4m 35s

How to use LearnVern

3m 20s

What is React

4m 5s

Single Page Application

3m 12s

Why Choose React for Web Development?

6m 30s

Real Time Example

3m 46s

React VS Angular VS vue

7m 7s

Setting up the first project

13m 22s

Components in React

10m 37s

How to Create Components in React

7m 14s

Installation of Node

7m 57s

Creating the First Project

8m 41s

Understanding File Structure

10m 3s

Understanding Index.js

9m 38s

Introduction to JSX

8m 32s

Custom Components

9m 5s

Assignmnet : Introduction

3m 48s

Assignment : Components

3m 47s

Adding Template in JSX React

4m 19s

Adding Styles in JSX React

7m 34s

Dynamic Data in JSX React

8m 46s

Data Passing in React

11m 16s

Accessing Props in React

8m 40s

Implementing JS Code in JSX React

9m 21s

Creating Single Responsibility Components in React

16m 54s

Children Props in React

14m 40s

Other Details in JSX React

14m 16s

Assignment : JSX

4m

Event Listening in React

8m 16s

Event Handling in React

11m 13s

States in React

17m

Adding Forms in React

9m 59s

Feching Form Inputs in React

18m 7s

Storing Form Inputs in React

8m 56s

Another Method for Storing Form Inputs in React

20m 53s

Submitting Forms in React

8m 57s

Two Way Binding in React

6m 19s

Component Communication in React

7m 27s

Adding Custom Components in React

10m 40s

Lifting State up in React

4m 3s

Filter Component in React

17m 14s

Updating States in React

9m 3s

Controlled vs Uncontrolled Components in React

11m 50s

Assignment : Events

5m 13s

Iterating the List in JSX React

14m

Arrays in React State

19m

Filtering the Data in React

8m 56s

Conditional Rendering in React

13m 31s

Handling Conditions in React

8m 24s

Conditional Return in React

15m 13s

Adding Handlers in React part -1

8m 31s

Adding Handlers in React part -2

21m 36s

Charts in React

16m 58s

Adding Dynamic Style Sheets in React

10m 31s

Creating Dataset in React

11m 12s

Calculating Max Value in Charts

11m 3s

Global CSS in React

6m 8s

Assignment : Iterations and conditions

4m 13s

Styling in React

7m 9s

Dynamic Styling

14m 56s

Dynamic Classes

10m 42s

CSS Scope in React

11m 18s

Styled Components in React

21m 13s

Responsive Styling in React

9m 28s

Style Module in React

6m 58s

Adding Media Queries in React

9m 38s

Assignment : Styling

4m 21s

Handling Syntax Errors in React

17m 43s

Debugging in React

13m 50s

Developer Tools in React

13m 7s

Assignment : Error and Debugging

3m 2s

Creating Application in React

18m 29s

Container Component

7m 59s

Adding Styles to Inputs

7m 13s

Reusable Component

11m 9s

Managing Data in React

11m 38s

Resetting & Validating Form Data in React

15m 42s

Adding Data to List in React

12m 36s

Adding State to List in React

13m 21s

Adding Modal in React

15m 11s

Error Boundaries in React

13m 26s

Assignment : Dialogs and Modals

4m 4s

Limitations of JSX

10m 7s

Wrapper Component in React

4m 28s

Fragments in React

7m 25s

Portals in React

27m 33s

React Refs

20m 45s

Uncontrolled Inputs in React

7m 1s

Assignment : Fragments and portals

4m 27s

Effect Hooks in React Part-1

12m 7s

Effect Hooks in React Part-2

11m

Local Storage With React Hooks

15m 34s

UseEffect Hook in React

10m 22s

Adding React Dependencies

25m 6s

Adding Delays in React

11m 6s

Cleartimeout Function in React

14m 5s

Reducer in React

12m 23s

Usereducer() Hook in React

11m 40s

Replacing State in React

25m 12s

useReducer With useEffect in React

13m 2s

useReducer vs useState

8m 46s

Introduction to React Context

14m 58s

Adding Context in React

12m 39s

Providing React Context

7m 54s

Listening React Context

12m 34s

React useContext Hook

6m 11s

Passing Function

15m 54s

React Context Provider

13m 25s

limitations of React Context

6m 43s

React Hooks

10m 31s

TagInput in React

12m 59s

Using ForwardRef in React

12m 56s

Assignments: Effects, Reducer & Context

2m 50s

Database Connection in React

10m 12s

Backend Application in React

12m 8s

Data Fetching in React

9m 41s

Handling Response in React

10m 5s

React Async

9m 21s

Handling Loaders in React

11m 10s

Handling No Data in React

7m 35s

Structure of HTTP Request in React

10m 35s

React Error Codes

12m 18s

Handling Errors in React

14m 39s

useeffect() & UseCallback() in React

11m 57s

Storing the Data in React

16m 21s

Try and Catch Block in React

7m 4s

Transforming Response in React

16m 47s

Assignment : HTTP Module

2m 29s

React Custom Hooks

7m 1s

Why to use Custom Hooks

4m 22s

Creating Custom Hooks

13m 27s

Implementing Custom Hooks in React

16m 4s

Configuring React Custom Hooks

9m 49s

Custom Hook With HTTP

17m 3s

Adding Parameteres in Custom Hooks

7m 22s

Calling React Custom Hooks

23m 47s

Using callback() with Custom Hooks

2m 30s

Adjusting Parameters in Custom Hooks

7m 16s

React Forms

10m 1s

Checking Validity in React Forms

6m 34s

Creating Simple Form in React

17m 25s

Add Validations on React Forms

11m 40s

Handling Touch Property in React

11m 22s

Handling Blur Property in React

8m 5s

Input Validity Check in React Forms

15m 50s

Validity in React Forms

7m 39s

Adding Multiple Inputs in React Forms

15m 33s

Adding Custom Hook in React Forms

8m 1s

Generalizing Input Hooks

8m 4s

Using React Hooks in Component

10m 50s

Using Reducer in React

13m 45s

Assignment : Custom Hooks and Forms

3m 50s

Introduction to Redux

13m 31s

Redux vs Context API

7m 50s

How Redux Works

7m 48s

Understanding Redux in detail

12m 7s

Handling Actions in Reducer Function

10m 47s

Installing Redux with React

5m 45s

Creating store

11m 8s

Providing Store

7m 40s

Subscribing Data in Component

12m 27s

Dispatching Actions in Component

11m 32s

Handling Multiple Properties in Redux

17m 3s

Challenges in Redux

8m 21s

Redux Toolkit

13m 22s

Handling Redux States

6m 26s

Defining Actions in Redux

8m 13s

Routing

10m 2s

Installing React Router

8m 44s

Defining Routes

14m 44s

Navigation

5m 6s

React Router Link

5m 33s

NavLink & activeClass Name in React

4m 15s

Dynamic Routes in React

9m 13s

Switch and Nested Routes

21m 57s

Redirect Component

7m 28s

404 Page Not Found in React

6m 5s

Assignment : Redux

3m 53s

Authentication in React

7m 21s

How Authentication Works

8m 40s

Types of Authentication

8m 41s

Firebase Authentication in React

8m 1s

Sign up Page in React

12m 53s

Handling Warning Messages

7m 37s

Firebase Authentication for Login Page

9m

Adding Authentication Context

16m 59s

Implementing Authentication Context

4m 39s

Handling Protected Resources

9m 29s

Password Reset Form in React

9m 23s

Improvising User Experience

5m 1s

Logout in React

12m 38s

Course Summary

4m 47s

Interview Questions in React js

29m 13s

Career Guideline

2m 40s

FAQs

The bread and butter of most modern ReactJS web projects are React class-based components. Simple classes make up these components (made up of multiple functions that add functionality to the application). All ReactJS component classes are child classes of the Component class.

yes. Although React class components are no longer utilised in modern React development, we still need to be familiar with them in case we need to work on legacy projects.

It's straightforward to create a class component; simply declare a class that extends Component and includes a render function. You can use it in any other component after that. It is not necessary to define one component per file, however it is a good idea.

The syntax is less difficult than that of class components, and it's easier to read because you already know how much you can't do with functional components. It's a lot easier to observe what's going on and what's coming out of the component when you utilise prop destructuring.

The syntax, for starters, is a clear distinction. A functional component is simply a JavaScript function that returns JSX, as their names suggest. A class component is a React-extended JavaScript class. A render method is a component that has a render method.

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download LearnVern App

App Preview Image
App QR Code Image
Code Scan or Download the app
Google Play Store
Apple App Store
598K+ Downloads
App Download Section Circle 1
4.57 Avg. Ratings
App Download Section Circle 2
15K+ Reviews
App Download Section Circle 3
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere