Most people either jump into learning

Nex.js without understanding React

first, causing them to fail and have to

start over, or they skip on learning

Nex.js altogether because they never

think they are ready for it. Today, I'm

covering one of the most common

questions beginners ask me. What React

do I actually need to know before I

start learning Nex.js. React is the

foundation of Nex.js. And if you

understand the right parts of React

learning Nex.js JS becomes 10 times

easier. So, in today's video, I'm going

to walk you through every React concept

you need to understand before jumping

into Nex.js with examples, explanations

and why it matters specifically for

Nex.js. Now, if you already have a

website up and running, do you ever feel

like your cloud platform is holding you

back? Maybe you've hit limits on

collaborators, run into surprise bills

or wasted time juggling multiple

services just to get one app online. It

is frustrating and it slows your entire

team down. That's where today's sponsor

Seala, comes in. It's an all-in-one

platform with no artificial limits

unlimited collaborators, unlimited

parallel builds, and no restrictive

tiers, so your team can scale without

worrying about payw walls. Savala runs

on Google Kubernetes Engine in 25

regions for worldclass reliability. And

with Cloudflare's 260 plus edge network

your static websites will load instantly

anywhere around the world. Plus, it

bundles everything you need under one

roof. So, you're going to get managed

databases, object storage, instant

preview apps, advanced pipelines, all

with usagebased pricing so that you only

pay for what you actually use. And

because Savala is backed by Kinsta

you're going to get enterprisegrade

security and a real developer support

when you need. So, it's a great deal

overall. I think you guys should stop

fighting your platform and actually get

to building. So, if you want to use

Savala to deploy your application today

I recommend you guys try it out by

clicking the link in the description.

Also, if you do do that, you're going to

get $50 in free credit. So, thank you so

much Savala for sponsoring this video.

Highly recommend them. And let's get

started. Okay, everyone. So to get

started, I actually want to just really

quickly show you guys how I am going to

set up the project that we will be using

in order to explain all the different

examples uh and topics. So if you don't

want to have that being hosted in your

own computer, you can just go to an

online ReactJS compiler. However, I will

be creating a React project to explain

the different topics. And if you want to

do the same, you can either go into the

description and just get the code with

the final uh version of this project

with everything explained or you can

just open up a folder inside of your

computer and run the following command.

npx create vit. What this will do is it

will create a react application at an

empty state where you can just do

whatever you want with it. Now this is

not going to be a nextjs application. If

you were to create a nextjs application

you would use a different command such

as the create next app command. But for

plain react, you would use this. Now, it

asks us for a project name. I'm just

going to put a dot. Then, we're going to

choose a framework, which is React.

We're going to choose JavaScript as the

language. And then, we're just going to

run npm install and npm rundev. Now, if

you were prompted, if this is the first

time you're running this command and you

were prompted with a question to install

uh create vit, just press enter to

continue. Now, when we install this, we

can just run this and it should have our

project running over here in the screen.

Now, I opened up here the app.jsx, which

is just one of the files that comes with

the project and I deleted everything

that is inside of it. Uh, and I just

left it with just this function called

app that returns a div. Now you can see

this reflects with it being an empty

website. So the first thing I want to

explain is actually going to start as

very beginner but this video escalates

till the end. It takes you from very

very start up until a little bit more

advanced topics. It's not supposed to be

a full crash course but rather a

refresher of topics and or an

accelerator if you really don't want to

learn all the core principles of React

before going into Nex.js. So we'll start

off with the most basic thing which is

so what is JSX? Well JSX is a syntax

extension for JavaScript that allows us

to write code that looks a lot like HTML

but allows us to write that directly

inside of a JavaScript file. That's what

this JSX uh extension here means. It

means that in this file we have JSX

inside of it. But where is the JSX

present here? Well, it exists in the

return statement of this function. When

we return a div right now, it just looks

like pure HTML. And it pretty much is.

For example, I could add a button over

here that says click me just like you

would in HTML. And if I were to click on

this, uh, it doesn't do anything, but it

is a button. I could add any other type

of HTML tags like this and it will

include those as well. However, there is

one difference. The difference is that

in JSX you can directly insert

JavaScript inside of the HTML and that's

the main benefit. For example, if I were

to create here a variable called uh name

and I set it equal to Pedro and then in

this hello world I said I wanted to

instead say hello and insert the name of

the user here. Now I could obviously

just show Pedro here and it would render

the same thing. However, if I want to

actually make a dynamic by using

JavaScript variables, it is as easy as

inserting this variable here. However

to insert JavaScript inside of the JSX

like structure, you do that by adding

curly braces. And that tells JSX that

you're about to insert some JavaScript

inside of here. This isn't HTML anymore.

This is JavaScript. So, for example, I

could write here anything. And you see

that I get code completion because it

knows that JavaScript exists inside of

here. Now what we want to do here is

instead add the name of the variable so

that it actually renders that value. Now

you see no matter what I do here, it

shows hello Pedro even though we removed

the Pedro text from here. And not only

that, but if I were to change this to

something else, the UI would reflect to

show that. So this is the basics of what

JSX is. And when you learn Nex.js, JS

you will be using a JSX that's just how

NexJS is built because NexJS is built on

React and React is built on JSX. Now the

second topic that is extremely important

to understand in order to move on uh in

your NexJS journey is the whole concept

of components and React is built on

components. Both JSX and components are

the roots of React and it's what you

need to understand in order to look at

an XJS project and understand what

you're looking at. Now what are

components? Well, components are

functions. And the most basic component

you'll ever see is the one that is on

the screen right now. This is a

component. But you might be wondering

why is this a component and what is a

component? Well, this is a function just

like any other function you would see in

JavaScript. But like I said before, it

returns GSX. So that's what a component

is. A component is just a function that

returns GSX. Now, why are components

important? Well, there are a variety of

reasons for it. One of the main reasons

is that components are reusable. So we

have this component over here and this

is what you're seeing on the screen.

Anything I render here appears here. But

for example, if I wanted to render my

name or render user, right? I could add

here information about a user. I'll just

add it real quick. So for example, if I

wanted to render this three H1 tags over

here, including information about a

user, right? It includes a name, an age

and a gender. What if I want to show

that multiple times for some reason?

Well, I could just copy this entire

thing and paste it multiple times. Now

it appears three times. But this is a

lot of code that is repeated. What we

could do instead is we could just create

another component because just like how

you can call a function inside of a

function to abstract logic that you

don't want to repeat, you can do the

same with component. And that's the main

benefit from it. I could create here a

component. For example, let's call it

user because it's just uh displaying

information about a user. And because

this is a component, we need to return

some JSX. So, I'm going to return a div

over here. And I'm going to paste that

whole UI that we want to repeat. Now, I

can actually render this UI that exists

inside of here by calling this user

component inside of this app component.

How do I do that? Well, most people

think that it would be something like

this because it is a function. But no

this technically is not the correct way

to do it. The correct way to do it is

instead to render a component by using

this tag like structure and putting the

name of the component just like this. So

components are rendered as if they were

an HTML tag. However, the name of a

component has to always be capitalized.

So you always make sure that the name of

the component starts with a capital

letter. Now this is great. We can see

the UI from this user component here.

And if we want to repeat it, we can just

do this. We can just repeat it three

times and it will appear all three

times. So this is great because if you

understand components, you understand

React. You understand how it improves

the developer experience because in

JavaScript this would be a lot harder.

Now, the next thing you need to

understand is how to make your

components dynamic. Because, for

example, if I want to render three users

over here, most likely they're not going

to be all the same user. So, it's kind

of redundant that I'm showing here, for

example, the name, age, and gender being

the same on all three of them. Why not

instead make it such that this user

component that renders this UI accepts

some arguments to the function so that

whenever I call this user component, I

can change whatever the name, the age or

the gender is for that user. This logic

is called a prop. A prop is just an

argument to a normal function. But

instead of being in a normal function, a

prop exists in a component. And how do

props work? For example, if I want to

make it such that whenever I call this

user component, I need to pass the name

into it. So name won't be hardcoded as

we did over here. It won't just say

Pedro. We can pass whatever we want

whenever we call this component and it

will change the UI based on this. To do

this, what I do is I go to the user

component over here and at the top I

open and close curly braces and I define

the name of that prop. So I'm going to

call it name. then I can render this

name over here instead of the hard-coded

name. Now this means that because we're

not passing anything, the name will

become empty. But this allows us to then

whenever we call this user component

pass a name prop. So it's a bit

different from how you would pass an

argument to a function in a component

and a prop. You pass it by giving the

name of the prop which we defined here

setting it equal to a value. So if I

were to pass here for example the name

Pedro, it would make the first one say

Pedro. Then I could pass the name for

example Amanda and the second one would

have the name Amanda and then on the

third one I can say Saul and the name

will be Saul. So we have a different

name for all of them. And we can do the

same thing with all the other variables.

So for example, we could add the age

prop, the gender prop, call them inside

of this component, and then just pass a

value that is different for both

different props whenever we call the

user component. And then you'll see that

we have a range of different users with

different information appearing in our

screen. So why are components and props

important for you to understand XJS?

Like I said, components are the core

concept of React. And React is the basis

of Nex.js. So whenever you go to learn

Nex.js, what you're going to find is

just a giant tree of components. And

you're going to have to work with them

in the same way you're working with them

over here. You're going to have to work

with props. You're going to have to work

with defining components and so on. So

Nex.js JS really really requires that

you understand what components are and

how to make them dynamic through the

usage of props. Now there's a different

type of component/prop

that you will see it uh not that often

in normal react but you'll see it all

the time in Nex.js and if you don't

fully understand it right now it's

totally okay but I will go over it so

that you guys understand. And what this

is is what is known as a wrapper

component. Now what is a wrapper

component? A wrapper component is a

component that doesn't self-close. So

you see over here when we call the user

component, right, that we created, we

call the component, we opened a tag and

we closed it on itself. We didn't do

this. For example, we didn't close with

a user component. Why didn't we do this?

Well, because the user component is not

a wrapper component. Now, how do you

define a wrapper component? And what is

the use case of it? Well, for example

let's take a look at this component. So

we created here a component called card

and we are just calling it simply down

below. Doesn't even take any prompts or

anything like that. In this component

we have some CSS that we inserted by

using the style tag. Now, what did we

make like happen in this component?

Well, we basically created a cardlike

structure where there's a border that is

solid and is black and we add some

padding into it which creates this

little square in the screen which is the

card. Now we have some text inside of

it. We just say hello and I can keep

changing this to say hello or whatever I

want to put. Now previously if I wanted

to make it such that whenever I want to

make a card like this appear with a

different text. We previously did

something like this. We just created a

prop called text, rendered it over here

and then we could just say for example

the text is equal to hello world and

this works but there's a different way

you can do this and that is through

turning this component into a wrapper

component. To turn a component into a

wrapper component you have to have a

prop inside of it called ch children.

Now what is children? Basically, a

wrapper component will wrap around some

UI and that UI that it will wrap around

will be its children. So, I know it's a

bit confusing, but trust me, you'll get

it. What happens is when I call this

component, I won't be passing this text

over here. But instead, I'll be wrapping

this component around some UI like an H1

tag that has a text like hello world.

and whatever UI I put in between the

opening and closing of this component.

So in this case, it's just this H1 tag

will become the children over here. So

it's a different way to pass this prop.

It's a special prop. Now I can just call

this children inside of this component.

And then whatever I put inside of here

will appear here. And the good thing

about this is that it allows me to put

way more than just a piece of text. I

could put here another piece of text. I

could put a button and all of this will

exist inside of this wrapper component

because then I can just reuse it and the

style will remain the same but whatever

I put inside of here will change. So

this is the concept of what rapper

components are but the importance to

them in X.js is actually a bit above the

current level that you are if you don't

know what rapper components are.

Basically in Nex.js GS you're going to

have what is known as layouts which is

basically a giant wrapper component that

wraps around your different page the

different pages in your project so that

you can apply some UI that will apply to

all other pages. So it is important that

you understand at least how this looks

like so that when you get to nextj you

don't get confused when you see layouts.

Now the next thing I want to talk about

is event handling in react. Now this is

going to be quick and simple but it is

important for you to understand so that

you don't go into next.js completely

blindsided. So React events look a lot

like HTML but they behave a bit

differently. So imagine you have this

scenario where you have a form component

that we are rendering the screen. You

see this form is pretty simple. It's

just an input and a button and that is

reflected over here because we have a

form tag that wraps around an input and

a button. Now, we also have this

function inside of here called handle

submit. And if you're familiar with

normal JavaScript, this is something you

might see. You might see a handle submit

function that is called when this form

is submitted. Now, this function also

accepts an argument, which is the event

of the form, the form event. Again, this

is pretty much just how it would be in

JavaScript. It's not unique to React.

Uh, but I want to show you guys how you

would go ahead and submit this form. To

do it, you would pass an onsubmit to

this form and call the handle submit

function just like this. Now, in the

handle submit function, we need to first

prevent default. Now, why do we need to

do this? Well, when you submit a form

it is going to refresh your page. And in

React, you don't want that to happen for

most scenarios, unless you really want

to for a specific reason, but in most

scenarios, you don't want that to

happen. You want the things to happen

naturally. So we want to prevent default

to prevent the form from refreshing the

page. Now what I want to do here is

actually I'm just going to alert a

message saying submitted to represent

that we submitted the form. And you'll

see that when I do that I do get that

alerted message. So that's the simple

way in which you would submit a form.

Now why does this matter for Nex.js?

Well in Nex.js JS there's going to be a

very important distinction that you need

to make between two different types of

components. One of them is going to be a

client component and the other one is

going to be a server component. Now

we'll talk a little bit more about

client and server components later on in

this video. However, one of the things

that differentiate them is the fact that

in server components you can't, for

example, have an on click on a button.

You can't have like an onchange to an

input. You can't have anything like

that. If you want to submit a form, you

have to do it this way through an

unsubmit uh calling a handle submit

function. This is just how it is. And

when you get to creating forms in XJS

you will see that this is the correct

way to do it. Okay. So, for the next

topic, we're going to talk about uh

lists and keys in React. This is

important for a variety of reasons

because every website has lists and you

need to understand how to render lists

in a very easy way whenever you're

building your next next.js project. Now

in React, it actually makes it super

simple because of JSX. Now imagine we

have this example which is an unordered

list with a couple list items, right? I

just put names of people over here. But

imagine in a scenario you might have

actually double this amount. Obviously

hard- coding the values doesn't make

sense in a lot of situations. A great

example of this is if you're building a

website like Facebook, each post is an

item in a list of all the posts that you

want to show. So, I doubt that in the

code of Facebook, they have hard-coded

each post that people are going to

write. That doesn't even make sense.

What happens instead is they request

some data to get the list of posts and

then they loop through that list to

render each post on the screen. So

that's what we need to do over here. We

need to have a list of in this case

users because that's what we have here.

We have names of users and we'll put

each of the names over here. Now what I

want to do is I want to get this list

over here called users and I want to

loop through each of them and create a

list item for each item in this list. To

do this, it's as simple as doing this.

We need to use an a JavaScript function

for lists called the map function. So to

loop through a list inside of your UI

and render each item, you write the name

of the lists uh just like this. You call

the map function and the map function

allows you to create a callback function

inside of here which can return

something. What we want to return is the

UI that we want to show for each item in

the list. So for each item in this list

we want to render a list item just like

this. Now how do I show the name of the

user as per what is on the list? So we

have Pedro, Camila, John and Saul. So to

get each individual name, we can get the

argument of this callback function which

includes the name of the user of the

list that we're mapping through. So I

can just render the list over here and

it will show the name of the user. But

also because of how React organizes the

rendering of the lists, you want to

actually pass a key. So to the highest

level element that is returned from this

list. Now does this do anything? Well

not really. It's not front-facing, but

it helps React organize your list

better. Now, this has this key that you

pass here. Has to be a unique value. So

if you for some reason knew that all of

the users had different names, you can

just pass a user as the key. It has to

be a string or a number. And this would

work. But because you can't guarantee

most of the time you want to just get

the index of the item in the array. And

you can get that by getting the second

element in this map function. And this

index will be a unique value because it

it's always changing depending on the

element in the array. And you just pass

this key. It won't have any front-facing

changes, but it's important for you to

do. Now, for the next topic, this is

going to be huge for any project that

you're building either in Nex.js JS or

in pure react which is the concept of

conditionally rendering some UI. Now

what does this means? Well, when you

have a boolean such as this over here

this is just a pure boolean. So a true

or false, but it could be a condition

based on another type of input like it

could be if an age number is bigger than

some value or something like that

right? It just has to translate to true

or false. In this case, we have this

variable called is married that is set

to false. And then we have this

component that renders some UI. It

renders a paragraph tag uh saying the

user is not married. And then it renders

another one saying the user is married.

Now what I want to do is I want to make

sure that it only renders the uh correct

paragraph tag depending on the value of

this variable. So if the the is married

is set to false, it shouldn't show the

second paragraph. It should only show

the first one. If it's set to true, it

should only show the second one and not

the first one. How do you do that? Well

to do that, you need to use either

conditional operators or turnary

operators. Now, we'll start with just

using an if statement in line inside of

your UI. So, if I only want to show this

paragraph tag if this is equal to true

and not show anything if it's equal to

false in a normal function, you would do

something like this. If is married is

equal to true, then do something, right?

But in here, we need to do this inside

of our UI, inside of our JSX. So to do

this, we need to wrap this entire

paragraph tag to with curly braces

which indicates that we're going to

insert some JavaScript in here. And the

JavaScript we want to insert is the is

married uh boolean. And then we're going

to say if is married is true, then do

this. Then render this paragraph tag. To

have that if statement kind of logic

we're going to put a double emper over

here. And this basically stands for if

this is true then render this. So if

it's false it doesn't show anything but

if it's true it shows the UI. So this is

like if I was using a normal if

statement. But if I want to use an if

else statement right so only show this

if it's true but show something else if

that's not true. What I need to do

instead is utilize turnary operators. So

I'm going to uncomment this and I'm

actually going to put the user is

married as the first one and I'm going

to wrap this entire thing around not

just one the entire thing with the curly

braces. Then right at the start I'm

going to ask is the user married and

because this is an if else the symbol

that you put here is not the double

upper amper it's a question mark. So

this basically says if is married is

true then render this. Now to represent

the else you put a colon. And now it

kind of reads like this. If is married

is true then render this. Else render

this. And you see now it shows the user

is married. But if I were to set this to

false it would show the user is not

married because that's the else case.

Now it might look a bit weird if you're

not familiar with this kind of uh syntax

but trust me you're going to get used to

this and love this really quickly. And

this is super useful for a variety of

situations. Here are some examples. So

for example, if you are building an XJS

project, you're going to be interacting

with an API. So imagine you have a part

of your project where you want to uh I

don't know make a request to find out

what the email of the user logged in is

right? Maybe you want to find out their

email for a variety of different

reasons. In this situation, what you

would want to do is fetch this data

which is going to be the user email, and

then assign it to a variable such as

data. Now there's a small gap in time in

between you requesting the data and you

getting it back. Now if you want to show

that data in the screen for example in

here we are showing the user email is

and then whatever that is then you need

to make sure that the data is there

first because in this example here we

have this variable called data and it's

set to this email. But before we are

able to make the request and get that

back the email this will be null because

there won't be any data right because

there's a small gap in time. So while

that's true uh it will show this weird

empty state it will show user email is

blanked or in a lot of scenarios it will

break your entire app. So what you need

to do is you need to handle what the UI

will show while the data is loading. So

usually you have this variable called is

loading and when you get to an XJS you

will see how to actually implement it

such that it only sets to true while

you're fetching the data and then when

you get the data back it will revert to

false. But this is a clear example of

how you would see turnary operators

being used. You would have an is loading

condition that shows something like this

so that it doesn't show a broken state

before the data comes back and then when

is loading is set to false then it shows

the complete data with the name of the

user. Perfect. So this is why

conditional rendering and turnary

operators are super important in Nex.js.

Now let's look at this following

example. So we have here a component

called dropdown. And in this component

which we are calling down here all we're

doing is we have this logic where we

have a button called show dropdown. And

when we click on it I want to display

the UI that we have over here which is

this UI over here. This is the dropdown

that I want to display. Right now we

have this boolean called open which is

set to true and that's why the dropdown

is showing. But if I were to set this to

false this dropdown wouldn't show. Now

why why are we doing that? Because I

want to show you guys how to make it

such that when I click on this button

it will change open to true and or to

false if it's already true and make the

UI update whenever that happens. Now

let's think about how we would go ahead

and do this. Well, we have this button

over here. If I write on click on this

button, we can run some function that

will only run whenever the user clicks

on this button. So one of the things I

can do is I can make this function here

and basically set open to be equal to

true right and I can make this function

look a bit more like a function just

like this I can set it equal to true and

you would imagine that when I were to

click this button it would actually o

show the new opened dropdown because

when I click on this open is true and

when it's true it shows a drop down but

look what happens nothing. Now you might

be wondering so is open equal to true?

Well, let's check it out. Now, I can

console log this. I console.log

open. And I'm going to see over here if

it's equal to true. So, I'm going to uh

console log it. Also, I'm going to

update this from a constant to a let

because a constant you can't change. And

let's click on this. As you can see, it

is set to true. But if I were to

basically set it to be the opposite of

what it is right now, which just means

that if it's false, it becomes true. And

if it's true becomes false. What you

should see is that initially it should

become true but then it becomes false

then true then false then true then

false. So it is actually updating the

value of open. But why is the UI not

showing that change? Well the reason for

that is because even though this

variable that we're using on our UI

called open is changing its value. We're

never letting React know to update and

rerender this page or rerender this

component to show the new updated state.

The way you do this is you need to

somehow manage the state of the UI. And

to do that, you can create what is known

as a state. Now, that's one of the most

important concepts in React together

with all the stuff that we've talked

about so far. But this one is really the

game changer. This uh a state basically

is a variable that when its value

changes, it will rerender the UI or the

page to match the new version of that UI

that will apply the new value of the of

the variable. So in this example, we're

going to create this state called open.

So to create a state, you say const, you

open and close uh square brackets just

like this, and then you set it equal to

the use state hook. Now inside of here

we want to create a variable called open

just like we had before. Now with states

you also need to create a function that

is going to be used to change the value

of that state. So with a state I

couldn't just say for example open is

equal to true. I have to use this

function or else it won't work. Instead

of to set it to true I have to say set

open true and then it will make it true

or set open false and then it will make

it false. I can't just set this and

mutate this value. Now, because this is

a boolean, we need to pass an initial

value, which before it was set to false.

Now, to pass an initial value to this

open state, we pass it inside of here.

So, if this is a boolean, the initial

value is false. Sometimes, if this is a

string, if the state you're creating is

a string, you just put an empty string.

Now, we'll keep it as a as false. And

you we want to now be able to click on

this button and toggle it. Meaning, we

set it to be equal to the opposite of

what it is right now. So, if it's false

it becomes true. if it's true becomes

false. Now, this is what we're doing

over here. But again, to alter the value

of open, we need to use this function

and not do it this way. So, what I'm

going to do instead is I'm going to set

open to be equal to the opposite of what

open is. And because open is not just a

normal variable. open is a state that

utilizes this function which is a hook

called use state. It will now update the

UI to show the new value of the state

every time I click on this button.

Because when I change the open state, it

will rerender the component and run this

check again to see if open is true or

false. Thus changing how we see it. Now

states are super important in React

itself. Now with Nex.js JS they are

important as well but a little less

important because of the differences in

how React and Nex.js like to render

their components. So with Nex.js we have

like I mentioned before something called

a server component and it is preferable

that most of your app is actually inside

of a server component and things like

states won't work inside of there. So

that's why I wanted to introduce all of

these topics so that now I can get into

some more NexJS specific topics. Now

we're almost done. This is the last

thing I want to talk about because this

is a little bit more next.js specific

rather than React itself. But it is also

part of React which is what we've been

working towards uh distinguishing

between what a client component is and

what a server component is. Now, when

you go ahead and start creating your

NextJS applications, um, every component

by default is going to be a server

component. And every component that

we've created so far in this project has

been client components because server

components don't work in normal ReactJS

apps. So, if you're going to learn

Nex.js, you need to know that normal

React uses client components and Nex.js

or serverside rendered uh frameworks

like Nex.js JS uses server components.

Now what is the difference? Well, a

server component runs completely on the

server. So that means that it has direct

connection with the server. You can

fetch data directly from the server

without having to for example wait for

that to happen or use any other

extension to do that. You can just make

your component function become an async

component which this this won't work if

this is a client component. But if this

was a server component, we can just do

that. And then if you want to fetch

data, you can just directly here await

and fetch some data. So you could do

this in a server component. Also

there's no bundle set to the client.

That means that when the user enters the

page, it's going to download the HTML

from the server and render the page.

There's no JavaScript that it needs to

download first, which is exactly what

happens in React uh in a clientside

rendered React app like we have right

now, which is good and bad in some ways.

Uh the good thing is that because it

doesn't have a bunch of JavaScript it

needs to download when you enter the

page, it is faster to load. Also, search

engine craw web crawlers from like

Google and other search engines uh they

can read your page better if your

component is serverside rendered. So

it's better for SEO. But there's some

negatives to that. You cannot use some

of the things that we've learned so far.

So, when we learned about the use state

hook, we learned about uh how useful it

is to like manage the UI in our

application and other stuff like that.

You can't use that in a server

component. So when you learn XJS, you're

going to have to learn when to make a

component B server and when to make a

component B client. There are other

hooks in React that I didn't think were

important to include in this video

because they're not required for you to

know before you get to Nex.js. I feel

like you can learn as you're learning

the other Nex.js topics as well. An

example of that would be the use effect

hook. Any hook in React you can only use

in a client component, not in a server

component. And like I said, it's the

default one in XJS. Meaning that

whenever you create a component, even if

it's not asynchronous, which is what we

did over here to fetch data, it's going

to be a server component by default no

matter what. So you have to tell Nex.js

to make your component be a client

component in order to do this stuff. For

example, uh create states and uh other

stuff for example interactivity. When

you have a button, right, you have a

button like this uh click me and you

want to do something on an on click.

This kind of event handling from the

user. So browser interactivity can only

happen in client components. You can't

do that in server components. So if I

wanted to make this component be client

in Nex.js, you'll have to add a use

client at the top of your file. Now this

doesn't work in normal uh React projects

like we have over here. Uh that's why

I'm I'm leaving this topic to the last.

This is when you get to Nex.js. You'll

have to do this and this will turn your

entire component or entire file into a

clientside rendered component. And like

I said, you're going to have you're

going to want to use client components

for basically all the situations in

which you can't use a server component

for. So that's the mentality you need to

have. You're going to have the mentality

of making your whole project be server

side rendered. And whenever you want to

do something that you can't do in a

server component, you'll create another

component that is client and does that

kind of thing. So that's basically it.

This is all of the React that I

recommend you understand before you

start learning XJS. At this point, I

think you're ready um to go ahead and

create your first NexJS project. If you

want to learn NexJS from beginner to

advanced, I have a course that I have

released in the past 3 months and I

spent a year working on this course. Uh

and I've received incredible feedback

from a bunch of you guys. So if you want

to learn Nex.js JS through real projects

and real examples. Learn not only how to

create websites, but how to maintain

them, how to uh produce good quality

code, I recommend checking out my

course. You can just go to

webdevultra.com/nx.js

or just click the link in the

description. If instead you want to

learn React, I have countless courses on

my YouTube channel. Or if you want to

again get a more in-depth view of it

with a more structured uh kind of

curriculum, I also have my ReactJS

course which I released a year ago as

well and it's fully updated up to the

latest version of React. It's in the

description as well if you want to check

it out. So thank you so much for

watching this video. If you enjoyed it

please leave a like down below and

comment what you want to see next.

Again, thank you so much Seala for

sponsoring this video. So I recommend

you guys checking them out and again

thank you so much for watching this

video and I see you guys next time. You

find