Original subtitles

Now as I mentioned

in the last lecture already,

Class-Based Components exist

and they are an alternative to functions.

Up to this point, when we built Components,

they looked something like this.

Of course, instead of the function keyword,

we might have used const

and stored an arrow function in there.

But either way, we simply built a function.

That is what we did.

And we built a function that receives props

and then returns the JSX code

that should be rendered to the screen.

This is what Components are in React,

and they are simply regular JavaScript functions

which return some renderable results, typically JSX.

This is what we refer to as Functional Components,

which is a term I also already used a couple of times.

Now this term exists

because it's not the only way of building Components.

If it would be the only way,

we could just call it Components, right?

But we call it Functional Components

because there is an alternative way of defining Components.

Not of using them.

You always use them as custom HTML elements

in your JSX code.

But for defining them, there is this alternative.

You can define a Component by creating a class,

which is a default JavaScript feature.

Classes are not a React feature,

classes exist in modern JavaScript.

And you can define a class with a render method

and that is a reserved name, render.

It has to be named like this.

And then React will call that render method

to evaluate what should be rendered to the screen.

So this is an alternative way of defining Components.

And that is what is referred to as class Components

or Class-Based Components.

Now, I will emphasize the left approach,

using Functional Components,

is the default and most modern approach

of building Components these days.

And in most modern React projects,

you will therefore pretty much

work with Functional Components only.

You might never build a single class-based Component there

because nowadays with the exception of error boundaries,

which we'll have a look at later,

there is no reason to go for Class-Based Components.

Except for personal preferences, of course.

You can simply prefer Class-Based Components,

and that would be absolutely fine.

You can build anything

you can build with Functional Components

with Class-Based Components as well.

It just requires a different mental model

in some regards and some aspects.

Now, the Class-Based Components exist

because they were required in the past.

In the past, which means prior to React 16.8,

there were scenarios and use cases

where you needed Class-Based Components.

Specifically when dealing with State

and with side effects,

you had to use Class-Based Components.

Traditionally, prior to React 16.8,

you could not change State in Functional Components

and you couldn't really handle side effects there either.

That changed with React 16.8

because that React version

introduced a concept called React Hooks,

which are all these Hooks,

these functions starting with use.

UseState and useEffect and so on.

These are functions for Functional Components,

which bring features to Functional Components,

which previously were reserved for Class-Based Components.

And indeed, Class-Based Components can't use React Hooks.

That's also important.

That's really important.

What you learned about react Hooks up to this point,

it does not matter at all

when working with Class-Based Components.

But now in the next lectures,

I'll show you how you can convert

Functional Components to Class-Based Components,

how you can manage State there,

and also how you translate useEffect and useContext

and useReducer to the Class-Based Component world.