Original subtitles

In this REACT course, you'll not only learn the nuances of REACT and its internal workings,

but also immerse yourself in building a variety of projects to understand the practical applications

of REACT features.

This course uniquely balances a project-focused approach with comprehensive theoretical knowledge,

ensuring a thorough understanding of each concept.

Pitesh Choudhary created this course.

He's a popular instructor with 850,000 subscribers on his YouTube channel.

By the end of the course, you'll not only have a bunch of projects for your portfolio,

but you'll also gain hands-on experience in creating a full-stack application using

AppRite, integrating advanced tools like Redex Toolkit and Tailwind to craft production-grade

applications.

Hey there everyone, Hitesh here, back again with another video, and welcome to this brand

new series.

So I was trying to record a series on REACT on the other channel, that's when I realized,

hey, why can't I record this on this main channel as well, the English channel.

So welcome to this brand new series on REACT.

This is a very focused series on focusing on absolute beginners who want to just get

started with the REACT.

And there are lots of tutorials on REACT, but all of them are little bit some things

which carry the baggage of, you should know this, you should know that, not this one.

This one is purely entirely beginner-friendly if somebody wants to get started to learn

REACT in 2023.

What are the options available?

How to read the documentation?

What is the process of getting started with the REACT along with projects?

And what should be the approach?

This is going to be whole about it, we're going to absolutely love the series, and let's

get started.

So we're going to get started this video with a roadmap.

How one should be learning REACT?

When should be learning the common questions that should be answered?

What should be the prerequisites of learning that?

So we'll be answering all of that in this very first video.

I prepared a few notes for you, and we're going to get started with that.

So first, let me go ahead and share my screen video.

So this is my iPad where we'll be walking through with the REACT roadmap, and this is

where we're going to get started.

First and foremost, let's not jump directly into how should I learn REACT.

Let's first answer a couple of questions.

First, why to learn REACT?

Most important question, if you really ask yourself that why am I learning REACT or why

I need REACT on the first place, then you'll be a better engineer in designing REACT application

just because you want to learn because there is a hype around it, there's a lot of jobs

available for it, or it's in the trend, probably not right.

Because most of the cases of the REACT can be handled by just the JavaScript or just

the JavaScript DOM manipulation.

Please don't learn REACT if you're just in the hype, or you just think that, hey, there

is plenty of jobs and I can be a REACT developer.

Yes, that case is somewhat true, but I think that's not a great reason to learn.

It is trendy.

Yes, a lot of people are talking all the time about REACT.

And if you think I want to just build UI with the REACT, then of course you are not correct,

my friend, because building UI is not something which is a core superpower of REACT.

Those UIs were getting built in the PHP as well, in the era of jQuery as well.

So there is nothing which is super important that is being offered by the REACT itself.

You should be learning really REACT because it makes easy to manage and build complex

frontends.

There are applications in which you just click one button and things gets updated on five

different places, 10 different places, or 20 different places.

These places are really difficult to manipulate while your ordinary DOM, which you manipulate

by the JavaScript.

So if your application is pretty complex, like an e-commerce app or something like Facebook

or something, at that places it really makes sense to have a REACT application.

The better you become in understanding the REACT need, the better REACT engineer you

will become.

Then the second thing, when should I learn it?

Because now that you know that, okay, I can build complex app, but when you should really

learn REACT, I always say don't jump into the frameworks of JavaScript just because

you enjoy them or you watch a lot of YouTube videos.

No, that's not a good idea.

Don't react only after mastering the JavaScript.

JavaScript is something which is core to the REACT and there are a lot of problems in debugging

issues which are actually JavaScript issues and not the REACT issues.

If you understand JavaScript, if you understand how the single thread works, if you understand

how the execution environment comes into the picture, how the global execution context,

the function execution context work, how JavaScript is able to manipulate the DOM, then is the

right time to jump into the REACT, otherwise, no, you are making it in a hurry, not a good

idea, you should stick to the JavaScript still.

Okay, assuming that you know your JavaScript, then also please understand that most of the

projects don't need REACT.

It seems like this is a video where I'm actually pushing you away from the REACT, but that's

not the case.

I'm just putting up an honest picture that do you really need REACT?

Once you truly are satisfied that I really need REACT, then you'll be becoming a good

engineer of the REACT.

So most projects honestly don't need REACT in the initial phase.

As the app gets complex, as the pages are increased, as there is more and more functionality

which is on the front end part, then injecting the REACT or having an application totally

on the REACT makes sense.

If your application is just one page which is having a contact form and is just displaying

some pictures, just one or two page, I think you'll do far better in just HTML, CSS and

core JavaScript.

So assume that, hey, there is a case.

Now that you are convinced that, okay, no matter what, I really want to learn a REACT.

So in that case, why REACT was created on its own in the first place, there is a great

story behind it.

I would love to share that.

So this green box, yes, I tried to mimic Facebook with this one.

So in this Facebook, if you remember the old time, there used to be a problem of the ghost

message problem.

In some of the internal documentation of Facebook and some of the conferences, you'll find this

as a phantom problem.

I called it as ghost for no reason, but there was a problem.

So here was the chat icon.

Here was a chat that was written like this.

And there are a couple of ways.

If you click on the notification itself, then it opens up a pop up box here at the bottom.

If you click on the chat, it opens up the entire box here.

But if you have opened this from the notification, sometimes what happened is not all the times,

sometimes this icon here which says one or maybe that says three because there are three

messages.

This doesn't get go away.

I have read the message here.

So this should go away.

There should not be any notification symbol here.

If I've directly read it in the chat, sometimes it just appears here and it doesn't go away.

That was the problem.

There was no consistency in the UI.

And this was a common problem which was getting a feedback, feedback again and again in the

Facebook that why this message is being shown here.

I have read the message.

I'm aware of it.

It's still not gone.

So this is the common problem that Facebook was facing.

And in order to solve that problem, a team was engaged, especially Dan, that I really

want to solve this problem.

And that is how the React was born.

And the first time the React was not taken well by the community.

But eventually, eventually people adopted React and even started to loving it instead

of hating it.

Now, the problem that we are facing here is actually a two coupled problem.

The first is the state.

By the term state, I mean all the variables in JavaScript.

All these variables like should I show the notification or not or should the number should

say one or the number should say five.

All these things are actually maintained in the JavaScript world.

And all the updation of the UI is actually handled by DOM.

So UI is updated via the DOM while all of your variables are actually in the state in

the JavaScript.

So the problem that it was there was actually the problem of syncing.

There was no sync between JavaScript and the DOM.

So React came into the picture which actually gave a consistent way of updating your DOM

and that is the only superpower of React.

It gives you consistency in the UI.

And that is why people loved React.

When the React came in, the first early adopter outside of the Facebook was Khan Academy,

a very well-known name.

If you are in the education domain, it's a very well-known name.

So they adopted it and a couple of talks were there.

And in that Khan Academy tech team said that, hey, React is not an amazing library, which

it was not at that time.

But hey, it gives so much amazing consistency in building the application that we kind of

love it.

And that's when after this Unsplash picked it up, a couple of other big corporate giants

picked up the library and says it's fun to actually work in the React.

And of course, React was not perfect at that time.

There was a lot of class-based component.

Eventually it got updated.

A lot of things happened, which we are going to see.

But this is how it learned.

Again, one more time, I would say do not learn React if you don't know how the JavaScript

works, all those basics.

And again, also don't learn it if you don't know how the DOM works or the document object

model.

By the way, I do have a video on my YouTube channel about how the browser inner working

works.

I do have a playlist of inner working, which will help you to understand how the browser

actually works, how the DOM is being painted, HTML, CSS, JavaScript, and whatnot.

At least watch that video.

It will be very fruitful for you.

So moving that, assuming now that you know about how to learn React and you're confident

about it.

There are a couple of ways of how you can learn the React.

There are two processes of learning that, in fact, this pedagogy applies for almost

everything that I teach.

There are two ways you can go directly in depth or you can just start building the projects.

You might be thinking, I need both.

I want to go in depth.

I want to see the project as well.

Yes, you do both, but actually you need to start somewhere.

And you can start either by directly going in depth or by directly making the projects.

So when you go directly in depth, you come to the words like babble or you come to the

words like React, fiber, virtual DOM, diffing algorithm, hydration, tree shaking, all these

concepts.

And you first understand the concept and then you try to make projects like to-dos and calculators

and background changers and whatnot.

And you apply these concepts.

Another approach is let's just directly build the projects.

Let's just say we build a background changer or a calculator.

And via this, we learn each topic.

For example, in to-do, we learned about the virtual DOM maybe or calculator, maybe the

diffing algorithm.

So each project teaches you one or the other concept and then the same thing happens.

The project, the approach that I'm taking in this entire series is actually by making

directly the project.

First I'll make the project and then I'll take you into the behind the scene.

Hey, what just happened?

How we did that?

How we didn't do that?

How it worked?

How it didn't work?

And all of that.

I think that's a much more fun project based approach, a much more fun approach, because

it actually keeps you engaged and then says, yeah, that hey, we are building something

and something is working on the screen.

And now let's see that how it actually worked.

So I'll be using this approach, but again, there is no right and wrong here.

If you're learning somebody who's teaching you directly in depth, that's also good.

No problem in there.

One thing that you're going to commonly see is React as a library.

So I do have a common words for them.

You'll also hear that some things are frameworks, some things are library.

I call framework as something which is military.

And library as something like who is somebody, a cool dude.

What do I mean by that?

By the term framework and by the term military, it means the rules are very strict.

In the framework, rules are very strict.

The naming convention, the way how the file name should be, the way the file should be

placed in a particular folder, the way how the data is going to coming in and going out.

All of this are very, very strict in the framework.

In the library, it's like cool dude.

You wear the cap front side, it's good.

You wear the cap behind the side.

It's all good.

So the cool dude.

But again, it's not like they don't have any rules.

Library also do have certain rules, but they're not that strict of a framework.

So yes, React is a library, and that makes it really easy because it's not really that

much difficult.

It's not a big library.

You can finish it up pretty quickly and easily once you understand the basic core concept.

The topics that you're going to learn in the React first are core of React.

You really want to understand how the React works, how the file structure works, the core

concept behind it, how the state or the UI manipulation works in this.

What is JSX in the first place?

What does it mean by that?

What does it do beneficial for us and all of these concepts?

Once you've done this, then you jump into the component reusability concept.

And again, it's not a proprietary concept of the React itself.

Component reusability was there in the early days of PHP as well.

It still is in other places as well.

But React makes it easy.

And once you understand the component reusability concept, you automatically are introduced

to the props, which is a short for properties.

The same JavaScript object, the same key value, those exactly same.

So we understand about those props.

Also we learn how the changes are propagated.

So in the React, what we want to do is we don't want to use the classic JavaScript like

get element by ID, query selector and whatnot.

We just want to manipulate the variable automatically react will think on its own and will update

my UI on the web page.

For this, you learn about the hooks that how these hooks are responsible for updating my

UI or my DOM on the web page, I'll just update the variables.

I don't care about how the UI is being updated.

That's where you are actually introduced to the hooks.

That's the basics of it, at least.

This is it.

This is it.

This is your react.

But hey, we haven't talked about the URLs, we haven't talked about the routers, we haven't

talked about the state management.

The truth is you shouldn't be you shouldn't be all that we are covering that in the series,

but you shouldn't be because till this part, this is only your react, nothing else.

If you really want to have additional feature, then comes other libraries.

For example, React has no built in router.

But if you really want to use router, you have to use something known as react router

DOM.

So yes, we install another package, since you're learning about another package, that

cannot be called as core react knowledge, you are going a little outside of your realm.

And thus, I call it as additional add on to reacts very close to the react.

But they are add ons.

They're not react.

Similarly, we do have a state management thing react didn't used to have any state management

in the earlier days.

Yes, it was introduced later on.

But in the early days, we just had the Redux, Redux, again, separate package, separate

library, Redux can be used with react, Redux can be used with view can be used with swelt.

So it's a standalone library.

But yes, we still focus and learn a lot about Redux.

And these days, we learn about the another abstraction of the Redux, which is known as

Redux toolkit, which is cool.

So yes, we'll be going through with that.

Another such similar state management library is a stand quite popular, I do have a series

on my channel on the stand as well.

So quite amazing.

So you can learn that but eventually react realize, of course, they realized it before

the stand actually, that hey, we need to do something about the state management, it's

getting out of the hands.

So they introduce something known as context API, which is again, kind of a hooks, when

we learn about the hooks, you'll automatically get and understand that part.

So you'll get to know that so only context API is something that is not additional, but

it was introduced later.

Again, some people also tends to learn about the class based approach, when the react was

introduced in the very early days, everything was class based.

They got inspired a lot by the swift, not swift, I would say purely by iOS development.

So they used a lot of things like component did mount component unmount component about

to mount component will mount, I don't think so there was about my component will mount,

you get the idea.

So a lot of things were there.

And this is known as legacy code.

So if some company is still using it, hey, why are you using class based component these

days, it's been so gone, so long gone.

But I'll still give you some brief idea about that.

Not really that important.

But if you wish you can spend some time in learning about that.

These days, everything is functional and react.

The documentation says that, hey, just drop the class based approach, use the functional

approach.

That's how we are going.

And it's not like they started just a couple of years ago, it's long gone, it's long gone.

And on top of that, one more additional part of it is bass apps.

Like back end as a service, one prominent name, which I'm a big fan these days is actually

app right.

Are there a couple of others as well, but being app right being open source amazing,

it provides you entire back end.

So you can build your social media apps, ecommerce apps, Twitter, Twitter, clone threads, clone,

whatever you wish in just react.

But technically, it's not pure just react react to just handling the API calls and sending

data receiving data.

The majority of the heavy lifting is done by these bass back end as a service, you might

have heard of those names as well.

So let me know if you know some of these names.

So again, once you're done with the react, then what about after react, see, if you think

that hey, react is not for me, I'm not enjoying the front end part or the front end engineering,

you could have directly jumped from the JavaScript to the back end part.

But since you're already here, I assume that you might be interested in learning the react

as well.

So what should I learn after mastering the react, I have handled a good amount of APIs.

And now I want to build some complex apps and whatnot.

So in that case, you can also go ahead and try one of my open source project, which is

known as free API dot app.

It's a fantastic library, if you want to push yourself to handle some of the complex react

changes, or complex react full blown application, what we did is we wrote the entire back end

for these applications, complex ecommerce, complex social media, complex chat app handle

just the react part of it just the front end part of it.

So check out the free API dot app in there.

But again, react has some of the drawbacks.

That's why people actually switched from react as a library to a full blown framework.

What are these problems?

React don't have SEOs.

I'll walk you through that why the SEOs are problematic and react.

It also allows browser to do a lot of rendering browser does so much of lifting.

React ships the entire JavaScript to your browser.

Now it executes in the browser, then it paints the entire picture of HTML CSS.

So there's a lot of work with the JavaScript and your browser does so obviously, in some

cases, it's not really ideal.

That's one of the drawbacks.

What we want is some things which actually renders react on the server itself, and sends

the browser only HTML CSS part of it.

And that's what a lot of things even this is coming to the core react of it, the server

side rendering, but we'll talk about it later on.

Also there is no routing in the reactor.

So we can either use react router DOM, or other option is use a full blown framework.

There's no shortage of these framework.

In fact, I would not hesitate to say a new framework in the JavaScript drops every week.

Some people would say every day, but I'll still be saying every week.

So there is Next.js.

I do have a lot of content on my channel on free code camp on the Next.js.

I created them.

I loved it.

But that's not like Next.js.

There's other options like Gatsby, Remix.

A lot of options are there.

So this is basic.

So this is your entire roadmap of how you should be learning React, or how you should

be introduced to it.

Or at least you now know the basics of, OK, am I ready for this react, or should I focus

more on JavaScript, or can I go just back into this one.

After this, we'll be directly jumping into the code part, and we'll be starting our React

journey.

So this is pretty amazing.

And I think you'll be enjoying this series quite a lot.

I'm definitely going to enjoy teaching this entire React to you.

So get ready, buckle up.

A lot of projects are about to come.

We'll be going dive into the lot of React fun stuff.

And hit that subscribe.

And in case you are enjoying this series, please, please, please do share it on the

LinkedIn.

Tag me.

That's one of the only motivation that I need right now.

I would be really, really happy with that.

So that's it for this video.

Let's catch up in the next one.

Hey there, everyone.

Hitesh here, back again with another video.

And welcome to this React series.

This probably would be your second or maybe third video in the React itself.

And this video is much more crucial than the last one.

In the last one, we saw that how we can have a basic roadmap to understand and learn React.

In this one, we'll be actually getting some hands down.

Yes, I walked you through that.

We'll be walking through with the project approach.

But it's not going to be just the project approach.

I'll be walking you through with time to time in depth how React works so that you can develop

a mindset of how to work with the React ecosystem.

That's really the crucial part of it.

In this video, I will walk you through with all the tools that are required, how you can

create a React project, how does a React project looks like.

Because by default, a React project is a little bit clumsy.

There is too many files involved in it.

Once we understand that what files does basically what job, it will be much, much easier for

us.

So this is going to be your official first start journey and all the tools, all the sets

that we require to work with the React.

Don't worry.

It's going to be a hands on journey.

It's going to be a hand holding journey.

You're going to be enjoying this for sure.

That's my promise.

So the first thing that we're going to do is share my screen.

So let me go ahead and share my screen so that I can walk you through with the stuff.

We'll come back onto the GitHub a little bit later.

First of all, let's just explore all the things that we're going to require.

The first one being Node.js.

We are not going to move anywhere forward without the Node.js.

It's a little surprising that even the front end doesn't move without the Node.js these

days.

If you have any version, version 18 or version 20, that's totally fine.

It's not really a difficult process.

Get it for Windows, Mac, Linux.

Doesn't really matter.

You just need to install it.

The specific version also is not that much important.

You can have the LTS version, long term support for the version 18, or you can have the latest

and the bleeding edge version, which is 20.

That is also fine.

In my case, if I open up my console and I show you that I do have, once you actually

install it, you'll be having a Node-V as an option to find out what version of Node

is installed in your system.

Mine happens to be in between of 18 and 20, but I'll update it very soon.

As I told you, it really doesn't matter.

As long as something above 18 is there, even 17 is above there, it's totally fine.

It's not going to bother you.

It's not a course on Node.js, but it is required to actually learn React.

So that's the first piece of the puzzle.

The second piece of the puzzle is any code editor.

Everybody seems to be on the VS code, but if you happen to have any other choice of

the code editor, that's also totally fine.

Maybe you are a VIM fan.

That's totally OK.

Maybe still you are rocking the sublime text.

That's also fine, but I'll be using the VS code.

I use it with my own custom theme with the purchased font.

You don't need to do all of this.

That's just a fancy shenanigans.

You don't need to worry about that.

But this is something basic what we have.

Another crucial thing that we need for this is actually React.dev.

You don't need to download anything from it.

It's just a reference point from where we'll be consulting the documentation to

understand the parts of it.

There is another portion of it.

I'll walk you through with that.

But first, let's set up the thing so that you can actually grab all the stuff and

things like that.

So what I'll be doing is let's first go on to this.

So I do have a folder here.

I'm actually going to create this one is for my English channel.

So I'll be saying that, hey, this is going to be a React course for 2023.

So I'll be saying React 2023.

Basically, I'll probably React course.

React course.

Yeah, that's a React course.

I'll be giving you the entire description where you can download on the code files

and everything that you are having.

So no worries on that part.

And the next thing that we'll be having is just open this up into any code editor.

So I happen to have a code editor with me, which is VS code.

This is how it looks like when you install this.

All you have to do is drag and drop this react up here.

That's it.

That's the step one.

Once we have this, let's go ahead and keep it up there.

We'll be creating a new folder into this one.

Let's just call this one as readme.md.

MD is a markdown syntax, which has a special way.

If you just create a .txt file, that's totally OK as well.

No need to worry at all in this case.

Now, I'll be just putting up a simple hash.

That means a heading.

And I'll be saying simply start of React.js on main channel.

I do have a couple of other channels.

Not couple, but one other channel, which is in the local language.

So I'll be just saving this.

And I can just click on this button, which gives me a preview that this

is how it looks like.

So as I told you, it's nothing.

It's just a text file.

Nothing more than that.

Why we are creating this is because I want to push all of the code

onto the GitHub as well.

So I'll be just going up here on the GitHub.

In case you know GitHub, that's great.

If you don't know, this is where you need to download all the code files

that I'm creating along with you.

You can download all of them and check out how the course progressed

and everything from here.

Just click on this.

I want to create a new repository.

And I'll be calling this one as React dash English.

And it's really, really funny to see that we have a React and dash English

after this because that's how it is.

I have a couple of other channels.

I'll be calling this as public.

That's fine.

And we'll be calling this one as a fun React series in future.

Maybe I don't know why we kept it.

I don't want to add any read me or something.

Just keep it as public or you can keep it as private as well.

I need to keep it public so that I can give it to you.

Create the repository.

And then the repository will allow you to actually a few set of commands

that you can initialize the gate.

You can add the read me.

You can make a commit, change the branch.

And basically, you have to add a remote origin and push it

so that all the code can get onto the GitHub.

And later on, anybody can see that.

Let's run all these commands.

So I can just open up my inbuilt terminal.

By the way, I can just click on the terminal, new terminal,

or I can just click on View.

And somewhere here, the terminal is, I don't know where.

Yeah, here it is, terminal.

Or you can use the shortcut.

Control, tilde, whatever is your shortcut.

That's the one you can use.

I'll just go ahead and say git init.

That initializes a git repository.

And then I'll just go ahead and say git add.

I want to add everything.

There's just one file.

Or I can name the file as read me.

I'll just add this one.

After that, you can again consult to the documentation

because all the commands are here.

Then the next step is git commit.

So I'll just commit with a message that

says start of React series so that later on I

can push all the code up there.

Also, I would love to change the branch.

Also, there is a mention.

There is a big, big GitHub thread

about why we should call it as main, not

as a master and slave.

But again, we are not going to go

into that much of the story.

But I'll just say git branch dash capital M.

I'll call this one as main so the branch has changed.

Then I don't remember this, so I'll just

copy and paste this.

This is basically a link to repository.

Since my GitHub is already configured with my account

and all the SSH keys that are required to talk to GitHub,

that's why this command will run.

Otherwise, this will not run for you.

So the remote origin is being added.

All I have to do is now push all of my code here.

So as I'll be creating the content,

I'll be pushing it on to this one.

So now everything is gone up there.

Now, if I come back and refresh onto this link, which

I'll be giving you in the description,

as you can see, all the code actually

get pushed to the GitHub.

That's really important for us so that I can share all

the code files with you.

Also, you can check out the commits as well

so that you can find out, OK, this section of the code

was added at that time.

And this was first, this was second, just like that.

OK, so this is basics.

But now we need to go back and see

that how we can actually create a React project.

That's the crucial information.

And all the crucial information comes from the documentation.

I want to learn it, obviously.

So there is a quick start and there is an installation guide.

How can I quick start before installation?

So I'll just click on the installation and see that.

How can I start a new project?

So as I go in to start a new project,

it says if you want to build a new app or website fully

with React, we recommend picking one of the React-powered

frameworks powerful in the community.

So these are updated documents.

And the documentation says that, hey, React

is a very bare-bone library, as I mentioned in the roadmap

as well.

It doesn't do offer too much of the things to you.

It doesn't have routing.

It doesn't have advantages like incremental builds.

There are so many of these things.

So React team recommend that if you really

want to build a full-blown application,

just use some of the frameworks like Gatsby, Next.js,

or any framework's remix, whatever you like to choose.

So they actually mention all of this, that, hey, we're

not biased towards just React, which

is a lot of people are making confusion on the YouTube.

No, they say, hey, you can use Next.js.

You can use remix.

Or you can use Gatsby.

Whatever you like, it's your choice.

But they are saying that, hey, this is for a full-blown

application in the production.

But if you just want to understand what the React is,

it's not going anywhere.

It is still a rock-solid library.

But the way they mention it is a little bit controversial,

that why this was actually mentioned in the deep dive.

If you really want to have a deep dive understanding

of those frameworks, as well as of the React,

you need to have React knowledge.

And you can use it without a framework.

You can check the details.

There are a couple of ways how you can actually go ahead

and take advantage of this.

They mention that, hey, you can actually

use React and React DOM directly.

I'll walk you through how you can do that, as well.

Not walk you through, but I'll give you

a brief reference of it.

And you can use some of the bundlers, as well.

Now, what on the god's green earth are these bundlers?

You can use Vite or Parcel.

Let's try out and test out what is this Vite.

So Vite actually allows you to have,

you can click on the Get Started Guide.

And it will allow you to have an application

pre-configured with the React.

And all you have to do is NPM create Vite at latest.

That's all.

Okay, this is not the perfect ideal guide

of getting started.

So I'll walk you through with both the guides

so that you can be in the sync of it.

Now, first and foremost, we'll come back here.

As you have installed a node,

couple of other packages are also installed in the system.

One of them being NPM and another being NPX.

NPM being a node package manager,

it helps you to install all the libraries,

which are JavaScript friendly library,

a node package manager.

Another is node package executor,

which helps you to directly execute these packages.

So we'll be using one of them, which is NPX,

and we'll be saying create dash react dash app.

What is this create react app?

This is a utility, which was really famous.

Nowadays, people look a little bit down onto this library

because it's a little bulky,

it takes a little bit more time to get downloaded.

It literally takes more time

because it's bundled up with more things

which are required for any beginner to get started.

For example, even the testing library ships in this package,

which probably you don't need,

it's too much configured for you.

So we'll check out both the applications,

both the ways that how a package is being created

with the classic create react app.

And we'll also analyze the application

which is built by the VIT or same thing goes for parser

or any other similar package or bundler that we have.

So once we have this create react app,

we'll be calling this one as 01

and we'll call this one as basic react

because that's what it is, basic react application.

As I click on this, notice that it's going to go on

to GitHub basically and actually, yeah,

basically it's called a CRA create react app template.

It's fetching all the things for me, not only fetching it,

it's actually installing the things for me.

If I open up this directory right now,

the first step is to just get the package.json

which has a lot of things.

I'll come back onto this one right now.

I don't want to touch it.

So basically that's what happening.

I'll come back onto this project

because this actually takes painstakingly long time.

That's why I just want to show you,

this is the only time I'll show you that yes,

this although I have a beast of a machine,

I have a Mac studio maxed out

and my internet connection is decent with a 300 Mbps

and still it took this much of the time.

Not very long for a beginner to get started

and we can see that there is so much

that comes into this one.

There is so much source.

I'll walk you through how you can read

these kinds of applications, don't you worry.

But now we have this application.

Next thing that I want to do is not to dive into this one.

I would love to learn how these applications

are being processed and how can make it up and running

but I want to explore another option that, okay,

I can create my React application with CRA,

create React app but I can do the same thing

with the VIT as well.

In fact, the documentation says that you can actually

use another bundler which is parcel.

So what are these bundlers?

We will explore them later on but I can actually do that.

All I have to do for this is just to copy this command

which is NPM, not the NPX, create then the VIT at latest.

At latest is optional but we'll still use

the as it is command.

I'll just paste this command

and this is a little different of operation.

In the create React app, I don't have to even think.

It just brings everything, installs, that's it done.

When I click on the create VIT app,

VIT is a bundler which has more options.

If you just get a scroll onto the top,

it says I don't just support React,

I support pre-react, I support swelth, I support vanilla,

I support a lot of things.

So you have to tell it explicitly that what do you really

want to build with this VIT

or what should I bundle together for you?

So if I run this command, it says first thing,

what should I name your project?

I'll say 01 and I'll call this one as basic VIT.

Yeah, that's basically it.

So I've got this basic VIT application but it says,

hey, how do you want to actually build this application?

Select your framework, library,

it's a loose term that we use here.

Vanilla, view, React, pre-react, whatever.

You can use arrow keys to just go up and down

and I'll use React obviously.

Inside the React, it also gives you two options

that you want to use TypeScript, JavaScript, whatever.

I'll keep this as accessible for more audience,

although I do have a TypeScript course,

both on the free code cam on my channel as well.

But in this entire course,

I'll choose the classic JavaScript,

but no worries, we can talk on TypeScript some other day.

I'll just click on this and that's it, it's done.

As you can see how fast the VIT was

compared to the Create React app,

but there are a couple of things you should be aware of.

VIT just brought in these files for me.

It never installed things for me.

So I have to go ahead and install this,

while on the other hand, the Create React app

not only brought in the files,

but actually installed those files.

I can see the node modules here.

So in this one, I have to go inside this folder and install it.

Now this brings a very interesting option.

Any time you're going to see any React application,

this is how the React applications are brought in.

There is never a node module folder.

So what you have to do is,

go ahead CD into your 01 basic VIT app

or whatever the app you're going in.

And you have to say ls or dir if you're on Windows,

and you should be able to see this package.json.

This should be in your path directory.

Once this is there, then based on this file,

you can actually run the command npm install.

Whatever the packages are mentioned

inside this package.json will be installed.

Once I do this, now you'll see a folder being created

live in front of us, which is node modules.

This is the file which will actually allow us

to install all the packages and now we can run.

Now we are onto the same packages level

that I can run my VTAB or the React app.

But before I go there, I should really learn

to understand that how these files are actually structured

that we'll do in the next video.

But we should actually really see that how can I run

this actually bare minimum projects

and what all the things are there.

So I'll just go ahead and delete my terminal itself

so that we can go into the basic project route.

One thing you'll notice that the full structure

looks a little bit similar,

but the way how you should read these application

is always jump into package.json.

This is a centralized index of the entire application

that what all the files are, what all the dependencies are,

what all the dependencies for development are,

what do I support, what's my name and everything.

You can see name, version, the dependency list,

the scripts that I have, linting configuration,

what browsers list do I support,

everything is mentioned in the package.json.

As you can see with the Create React app,

it doesn't really just build a bit brought in React

and React Dom, it actually brings this couple of things.

But before we move there, I would like to break you back

onto our, another eraser, yeah, eraser, eraser.

Yeah, I can go there and just give me a second.

I'll be going up there.

I want to walk you through with a couple of interesting thing

about the React JS, so we'll just go back there.

It's just exactly a scally draw.

So what you need to understand a couple of things

about the React is that React is a main application

or the main package which does all the magic,

but React actually alone doesn't work.

We need to tell it that where I want to run my application.

So React has a couple of versions

that you have to go through with this.

So there is one known as React Dom,

which is a version or the connector of the React

which talks to my Dom in the browser.

It's a web application.

Similarly, we have just like this.

I can talk to the web.

I can go ahead and talk to mobile apps as well.

There is a React Native for that.

The core foundation will always remain React.

So it will always be there,

but it will also have the React Dom

if I want to work with the mobile, the web.

If I want to work with the mobile, it's React Native.

Even there is a version of connector of the React

with the 3D applications like a 3JS and all of that.

So there's a lot of hooks that you can actually

wire up the React with other application.

So now you can see that the important libraries for us

are just React and React Dom.

But actually install React Script, some web vitals

to check out how your web is doing, what's the performance.

It actually installs some of the test libraries

without even asking that whether I want to use

the Jest as a library or maybe I want to use Cypress

or Mocha or any other library, it just installed it.

It's very opinionated in that case.

So this is the first thing that we have learned.

Now let's go back onto the VIT.

Yes, I know this looks like very repetitive

that why are you comparing the CRA and the VIT?

It's very important for you right now to understand this

because you'll be creating applications

with a lot of bundlers.

Right now, let's just nail it off here.

In the basic VIT, if I go and nail down

into package.json again, you'll say that

this is not very opinionated.

It just gave me dependency list of React and React Dom.

You need some testing libraries, you install it.

I don't care about this.

This dev dependencies, you don't need to worry

because this doesn't ship it.

These are for helping the developers only.

So as you can see, there is no even React scripts.

So that means that's not an essential library

that is given to us.

So now this is the basic.

The next thing that we'll be doing is just to learn

and understand that how we can run these applications.

That is it, that is it.

Understanding the file structure,

that's for the next video or the next section of the video

if you're watching it all one girl, I don't mind that.

Okay, so open up your terminal

and how you run this application is actually again mentioned

in the package.json.

So if I go up, check out this,

notice here there's a start script.

So all you have to do is somehow you need to learn

that how I can invoke the start script.

Similarly, you can invoke the build script,

test the script, whatever the script.

If I go into the VIT application,

same application, same procedure there,

there are scripts like in this, there is no start script.

So there is a dev script.

So all I have to know is how can I invoke these keys

so that I can run the application?

That's all, that's all I have to do.

So open up your terminal and let's go into one folder,

which is 01 Basic React.

Once I'm into this and I'm able to see my package.json file,

then I can go ahead and simply just say npm run

and then invoke the script, start script, dev script,

build script, whatever that is, just invoke that.

So I'll just say npm start.

That's what is mentioned in the Create React app.

So if I go ahead and run this,

it will say that, hey, I'll open this up

and it opens up a bare minimum, bare bone react application.

Cool.

Okay.

I'll just close this one because hey, it's all done

and then kill the terminal as well.

Now I want to run the VTAB.

So as we just saw that VTAB don't have a start script,

but it actually gives me another script, which is the dev.

So I'll just invoke the dev and how simple it is.

Once I know the basics of it, npm run and the dev

and can I run this here?

Notice here the error.

If I click on this one, it says,

hey, there's too much of the error.

Why the errors are there?

It ran into that.

So there's, is there a problem in the VTAB?

No, you missed the step that I actually taught you

that hey, if I do an LS,

I should be able to see my package.json.

I couldn't.

So I'm pretty sure now you'll take care of the errors

by this way.

So I'll just go into basic VTAB and I do a LS

and I'm able to see my package.json somewhere.

Give me a time.

Okay, package.json.

Okay, once I have this package.json,

now I can say npm run and the script name.

It's a build, whatever the script name is.

In my case, it's dev.

So I'll just say dev.

It doesn't automatically open this up.

So I'll just go ahead and control click

or if you have the Mac command click,

it will ask you to navigate, navigate there.

And this is your VTA application.

This was my react application, VTA application.

So yeah, very similar, very similar,

but there are certain differences between each one of them.

So I think that's the wrap up.

I'll call this one as the wrap up of this video

because it's already quite a decently long,

but at least we have moved on to one point

that we can actually create applications

without even being dependent on next shares

or remakes or anything.

So we're going into the core foundation of React.

Within just few minutes or seconds or in the next video,

we'll be exploring the file structure

so that you have absolute confidence about that.

Hey, I can build any React app

or I can inject React wherever you ask me to do so.

So that's all.

Let's go ahead and meet up in the next video

and explore the file structure of the React application

and the VTA application as well.

Let's catch up in the next one.

Hey there, everyone.

Hittai Sheer back again with another video

and welcome to the React series.

Let's continue further down the road in our React series.

So we have built a couple of applications.

In fact, two precisely of the applications.

One was built using the Create React app.

Another was built using the VIT, which is another bundler

and there are many other such bundlers.

So it is very crucial for us now

that we dissect each one of these applications.

Yes, there is a way that we can directly jump

into the application, can build some projects

like Todos or maybe some password generator or something.

We will surely do that.

But it is utterly important here at this point

that we dissect the application.

Once you understand each of these

because they are like a critical example

of how the bundlers actually work

and how the default React CRA works.

Once you understand the working

and the file structure of both of them,

you will be able to understand React much better

and you will be able to inject React

in any pre-built applications as well.

Of course, you'll be able to create them fresh as well.

So this video is only and only focused

on each and every bit that is going behind the scene

and is running in the React applications.

So let's go ahead and just dive into that one.

So let me share the screen.

So this is our application that we have

and the first project that we have is 01 Basic.

This is being built by the CRA.

The second one is being built by the VTAB.

We will of course do the comparison between the two,

but first let's jump into the React application.

We've already seen that in order to read

any such application,

the first point is to go into package.json.

This is kind of a index or a directory for your application.

It shows you the name, the version

and most importantly, the dependencies

and the scripts that are available.

As we can see, the React application

with the CRA, React React app,

it's a little bit opinionated.

It gives us some of the testing library.

It never asked me that whether I want to use Jest or not.

Maybe I'm a big fan of Cypress or maybe Mocha.

These are also testing libraries.

So it doesn't ask me,

just directly give me these testing libraries.

On top of that, React and React Dom, as I mentioned,

these are the two vital things, which is React.

React is coreact and in order to talk to the Dom,

there's a separate package known as React Dom.

Similarly to talk to mobile apps, we have React Native.

So these kinds of things happen.

Also on top of that,

it actually includes some of the React scripts.

I'll walk you through what it is doing

behind the scene for you

and some web vitals to check the performance of the application.

So it never asked me that whether I want to use this package

to track the performance or not.

So a little bit opinionated of a library.

Then on top of that, it actually runs on the script.

So when I say NPM runs start,

it actually runs a script which is known as React scripts

and then it starts.

So even starting of the application is dependent

on these React scripts.

So I cannot just go ahead and uninstall this.

Similarly, we have some of the build scripts,

test the script and eject the script.

Maybe you want to eject the entire React application

from the React configuration.

Now the way how we start the React application

is actually in the development mode.

This is what you have been using.

But once it actually goes on production,

something known as Varsil, Netlify, Amazon,

there are lots of options to deploy your application.

You simply go ahead and run the build project of it.

And once you actually do this,

you run the script of build,

it actually gives you the production version

of how your application will be deployed.

And there is no rocket science behind it.

We can go ahead and just simply run this.

So we will go into 01 basics,

probably I am in basics.

I'll close this one, delete this one actually,

I'll start with the new one.

01 basics, my bad, 01 basic react, okay.

Now we are in the correct folder.

And I can run this script.

And simple way to run it is NPM run

and instead of start,

which will run the basic development server,

I can actually run the build servers

which your Netlify and Varsil actually run

to actually run your application.

Because when you run it in the start mode,

actually your browser doesn't understand

that there needs to be just one JavaScript file.

What it does is in the React building

or the development phase,

we build lots of React application.

They need to be combined and come at to one place.

And this is not an easy operation.

That's why there is a separate build script for that.

And each one of the packages gives you that.

So we'll be running this NPM run build.

As I done this, you can see there is a build folder

which is available for me.

And this build folder has the final JavaScript version

of everything that's required to run this application.

As you can see, HTML, CSS, JavaScript, that's it.

And these are your many five versions

and mapping of your JavaScript.

So end of the day, it's just HTML, CSS and JavaScript.

No rocket science there, all right.

So this is how your build applications are being built.

As we can see, React scripts are actually responsible

for doing this.

We'll come back and compare this exact thing

with the VIT as well.

But right now, just to summarize,

yes, there are lots of dependencies.

We have React scripts as well, and we have the start.

Now let's compare the exact same thing of package.json

with the VIT application and see and figure out

that why people love VIT so much.

Let's open the package.json of the VIT.

And as we can see, name, private version, very basic.

Nothing to be worried there.

We have the dev script, we have the build script.

Okay, I agree that part needs to be there.

In the dependencies, we have just the React and React DOM.

So no testing libraries, no React scripts,

and how does it is working without the React scripts?

That's an important question.

But rest of the dev dependencies, I'm not much worried

because they are only there for the development purpose.

As you run the build command, dev dependencies

never goes into your project or your files, all right.

So that's the one thing.

So that's why people love the VIT.

No opinions about the testing framework

or any React scripts, just the core minimum, bare minimum

essentials to run the React app.

That's pretty nice.

Okay, further down the road, as we can see,

this is much more easier and cleaner.

And we already understand that dev

is for development environment.

When I run npm run build, this is how it's going

to run the build command.

So very basic and bare minimum.

Again, closing this and this kind of a comparison

and necessary for understanding the application.

Now going into this one, we have this public folder

where we have this HTML, index.html.

Of course, this is where everything gets injected.

I'll walk you through.

And majority of the time you'll be spending

inside the source folder.

Rest of the things are pretty basic.

We have node modules, which installs all your packages.

We have gitignore to ignore some of the files

which are not interested.

There's a package.log folders as well,

which has a specified version of all the packages

that you are installing, pretty much the same,

but it's a locked version of it.

And we have the source.

Now, how does your React application works?

So for that, let's first go into public folder

and open up index.html.

Rest of your logo manifest.

These are not much to be worried robots

for your Google indexing,

manifest for the mobile indexing.

So all those mobile icons and stuff are very basic.

But if I go into index.html,

as you can see, there is a lot of things

that is being written here.

And you will be able to understand it more

if I remove the comments.

First of all, in the head part,

we have some of the meta tags.

So really not much worried about it.

The linking of the icons, not much worried about it.

And then it mentioned some things about the manifest

that it's a metadata used for your app,

even installed on the user mobile, not much worried.

So I'll just clean this one.

All right, similarly,

I will also just clean up this public URL and basic

that how we can link up the static assets.

So not much worried.

Now further down the road,

I'll also go ahead and clean up these comments as well.

So there we go, let's remove that.

And if I go ahead and save it now and close the head tag

where all the crucial information is there,

in the body, there is nothing much going on.

First a script that says that,

hey, if you want to run this application,

you need to be having JavaScript enabled

because some browsers can optionally disable that.

And there's just one thing which is known as div,

which has an ID of root.

And that's why we call the React app as the SPA,

single page application,

because there's not any other page, it's just a index.

And what React does, it actually takes your web application.

And in every web application or website,

we have these DOM nodes of HTML.

React basically does is remove the nodes

and inject the nodes at their place

so that we don't have a full page reload.

That's what we call that as SPA, single page application.

So if there is a div ID root,

there might be someone who is grabbing this,

if you understand the foundation of DOM,

there needs to be a script in this page,

which actually go ahead and say,

hey, document.getElementByID or querySelector or something,

because ultimately React is the foundational of,

like JavaScript is the foundation of React.

So this needs to be there.

Without this, it's not going to be working.

So right now I can see there is no script tag in my HTML.

So from there, this is script tag might be coming up

because otherwise how your HTML page loads your JavaScript,

that's an important question here.

So if I go ahead and try to run this application,

let's see what happens.

So let's run this into the,

and you don't need to run it into build mode,

NPM run start is all good.

NPM run start and try to evaluate this.

And there we go, our page runs nicely and fine.

If I right click and click on inspect,

let's go ahead and see.

So as we can see,

there's a lot of things which got injected in my application.

So this is my ID root,

and in this I can see app was injected,

then the app header, all these things, not much where it,

I'll understand that.

But not only that, some things like style ID,

this dashlane is mine,

because that's my password manager,

this always gets injected.

But apart from this couple of other things

also got injected into this one,

which I'm not sure from where this actually comes up.

And you also will see that couple of more things

actually get injected onto this one.

You can analyze it more by just clicking

and view page source.

And you might be noticing that previously

there was just this app,

but now if I go ahead and open and look onto this one,

there is a script which says static JS bundle JS.

So from where this script is getting injected

in my application.

Very interesting question if you just look at this.

And in order to answer this question,

there is inside the package.json,

there is this something known as React Script.

So this is doing behind the scene magic

that while running the application

or building the application,

since the application is being run by React Script,

it automatically finds your index.html

and inject its JavaScript there

before publishing it or pushing it onto the server

or our local server.

So this is the magic that's happening.

But as we saw in the VIT application,

this magic is not going on there.

So what is making sure that our app is running

because similar kind of a thing might be happening there.

Let's go ahead and analyze that as well.

This kind of comparison analysis,

I'm pretty sure a lot of people are not going to like it,

but this is very crucial to understand React.

After this is just packages and just fun stuff.

Okay, as I can see, there is no public folder,

like there is a public folder,

but my index.html is just outside.

If I look at this,

this is much more of a cleaner version of it.

There is a head tag.

Okay, I understand that part.

There is a div ID root.

So they're using the same analogy there,

but I can see that the script tag is automatically there.

So they are not using any React scripts

to inject your script,

but rather they are injecting it manually here.

And that's it.

That's what your React scripts are actually doing.

So that's exactly where it is happening.

Now, everything is coming up inside the source

and inside this index.jsx,

we'll talk about that one by one.

But now that we understand how the working part of there

and how the JavaScript of React

is getting injected into the application.

Now further down the road,

if I open up the source

and there's a lot of things in here,

so we obviously need to remove that.

Otherwise it would be really difficult to understand that.

So set up test, I'm not interested in test.

Go ahead and delete that, move to trash.

Report web vitals, I'm not interested in you.

I'll just go ahead and delete that.

All right, a logo, not interested in this,

vglogos, just delete that.

Yep, index.js, yes, I'm interested.

Index.css, I'm not gonna talk about CSS as of this moment,

later on we surely will.

App test, no testing this time.

I'll just go ahead and remove this.

And app.css, nope, not interested in this one.

So I'll go ahead and delete this.

So ultimately we have just two files here,

index.js and app.js.

As I can predict from here,

that the first entry point of my JavaScript

would be index.js, if you have guessed that,

that's correct, I'll just go up here.

And as you can see, there is again too many of the things,

so I'll just go ahead and first remove all of this,

so that's one.

I don't have web vitals,

so I'll just go ahead and remove this.

I don't have index.css, remove that.

React Dom and React, these are packages

and app is my file there.

So if I look at the index.js,

there's not too much things going on.

There is somebody who is actually referencing

document.getElementId by a root,

so it's referencing my index.html

and is bringing up the root.

And React, behind the scene, we have a React Dom,

so there is a browser Dom and there is a React Dom,

known as Virtual Dom.

It tries to mimic the original Dom as well,

and then whatever the updates you make

actually first goes into your virtual Dom or React Dom.

Calling it as a Dom right now, it's not a great idea

because now it's not a virtual Dom, it's fiber,

but we'll talk about that later.

So we go ahead and just have our own virtual Dom,

and that's what this React Dom is known as.

This is actually the virtual Dom.

And any update that happens here in the virtual Dom

actually gets pushed into the original Dom,

and only those pieces are pushed.

So as we can see, it's just creating a root here,

and then this root is actually rendering.

I'll definitely talk in one of the video

about these rendering process in much more detail.

In fact, we'll be creating our own render method,

just similar to this one.

And as I can see, this is just a React strict mode and React.

And by the way, I can just remove this strict mode as well

in order to make sure that you understand it much better.

This is also an optional code.

So we have just an app, which is just running in here.

All right, that seems good.

If I go into app.js, it looks there is so much going on,

but I can just go ahead and technically remove everything.

And in fact, if I just close this header,

I don't want this header entirely.

I'll just go ahead and say, hey, there is a dev app.

No, I'm not interested in that.

I'll just go ahead and write in simple H1,

which is like a HTML text.

So I'll just go ahead and say H1 or H2,

whatever feels good to you.

And I'll say custom, not custom,

it's a vanilla or classic React app.

I'll save this.

And if my application is running, which it is not,

I'm in the basic React.

So I can actually go ahead and run this NPM run start.

And technically my application should still be running,

but in the bare bone version.

So now we can see that classic React app.

So as we can see, a lot of things were coming in

just from the CSS and stuff.

And if you look at from the JavaScript perspective,

what we're doing here in the app.js,

we've just created a function that is an app, that's it.

And we are returning some HTML from it.

All right, we'll just go into the details

in the upcoming videos.

But as of now, just a function which returns the HTML.

Further down the road, if I just go up into the index,

we're importing this app from the file.

And we are rendering this here.

So how cool this is and how basic this is.

Now further down the road, we have this app.

So that is cool.

And we are running this.

And there's a special syntax of running this into this.

This is known as JSX.

We'll definitely go into much more depth.

But if this is bothering you a little bit,

since this is a method that you imported,

it shouldn't be done.

But since this is a method,

you can actually run the method like this.

And if I save this, yup.

If I can go back onto my React app, yeah, this is exactly.

It's a method.

You can execute a method like this.

But again, not a good practice.

It's supposed to be JSX.

We'll talk about that.

But yeah, that's the basics of it.

All right, so this was somehow the classic version

of dissecting a React app, which was built.

And now we understand that it's not that bad.

It's just some rendering that is happening behind the scene.

So React is doing some magic of optimizing the thing

by just selecting an element from the root.

Now I dissected it.

I know that I can change any time root to Bitesh

or maybe something else.

I can do that.

Totally do it.

And app, it's not really that fancy.

It looked fancy at the first go,

but now it's just a method which returns an HTML.

That's it.

And now it's time that we dive and dissect the VTAP as well

that, hey, what's happening at your side?

Index, we know that you are injecting my root here

and there's a script.

Cool, I accept that.

I understand that.

In the source, again, we have a lot of things going on.

So let's just go ahead and delete one by one.

Main.jsX, I think that's equivalent of our index.js.

So exactly same.

Again, we can do the same magic here.

We will do that,

but first let's go ahead and remove index.css,

not interested in the CSS part.

So I'll just go ahead and delete, not rename.

I'll delete that just to give you an idea

of how the barebone version looks like.

App.css, not interested in that either.

Move to trash.

Assets, not even tiny bit interested in that part.

So I'll delete that.

Now, if I go ahead, I have just app.jsX and main.jsX.

And you might have noticed that it calls it at JSX

and we call it as main.js.

So here's the convention rule.

If you're returning any HTML from your JavaScript,

that's known as JSX because technically it is JSX,

but it's just a rule.

You can avoid that in some of the cases,

but I recommend that you don't do that.

Also another convention is if you're creating any component,

yes, we call them as component in the React world.

Otherwise it's just a basic function.

We actually use a capitalized letter in the file name

and the component name as well.

I'll definitely walk you through with that as well.

So in the main.jsX,

now I can go ahead and do the same thing.

I don't have CSS, let's remove that.

App, yes, we have that and React, React DOM, that's cool.

React strict mode, we don't need that right now.

So we'll just go ahead and remove that.

We have just the app being returned, save that.

In the app.jsX, we don't have any CSS, remove that.

We don't have VIT logo, remove that.

React logo, not interested in that.

Use state, in fact, we don't need that.

I will just remove everything.

Remove all of this, which you don't understand right now.

And let's just go ahead and have this div.

This needs to go away.

And this whole thing needs to go away.

And again, we'll be doing the same thing.

Everything goes away.

We just have an H1 tag and it says VIT React app.

So that's it, that's the basic of how it goes.

In the main.jsX, we are importing it and showing that up.

That's it.

Told you it's super, super easy.

Let's stop that and run the VTAB to actually verify

that we have a VTAB running with the bare minimum basics.

So CD and this one is 01 Basic VIT.

And this one is npm run dev.

And this should also be running without any issues.

So VTAB and we have a Create React app, so classic.

So now that we understand each bit of it,

that how it is happening, why it is happening,

we can actually do a lot more.

Since we are into the VTAB itself,

if we actually understand the basics of it,

that hey, it's just a file and I can just go ahead

and create a function inside it,

can I do it one more time?

Yes, you can.

Actually, let's just do that.

So let's go ahead and remove all of this.

Into my, the same folder VIT, inside the source,

I'll create a new file and show you a couple of errors

as well.

So we'll just go ahead and call this one as youtube.js.

And in here, we'll be just going with the classic.

So we have a function whose name is YouTube.

And that's how it looks like.

And it goes ahead and says, I want to return.

There's a parenthesis here.

And I'll be returning an H1,

H1, just like this.

And an H1.

And I'll say YouTube app,

because I teach a lot on YouTube.

Okay, we have to export as well.

So we are going to say export default

and we'll be saying YouTube.

So now that I have exported this YouTube,

can I use this YouTube inside the main or in the app?

Yes, you can, you can.

There is only one rule you have to follow.

In the JSX, there is a rule

that you can only return one element.

So what if I have to return to H1 like this?

No, it's not allowed.

So there is a cool hack of it that, hey,

just go ahead and wrap everything inside the div.

And technically you're returning just one element,

but the error is gone.

This is so much of a common practice

that eventually React guy realized that,

hey, this is such a basic thing in the JSX.

It's kind of a backdrop of a JSX that we don't want it.

So eventually they removed it and they simply said,

hey, now we can return empty parentheses,

which doesn't create any extra div in the HTML

and keep everything just awesome.

In one of the mid version of the React,

we were supposed to actually bring it

as fragment from the React,

but now we don't need to have this,

even the import statement, it just works fine.

So if I go back here, it's a VTA, VTA, there we go.

Now similarly, if you understand

that how in the main.jsx you have imported app

from app.jsx, you can do same thing in the app as well.

You can just go ahead and say,

hey, I want to import YouTube and YouTube,

and now you can use the same syntax of that,

just like we have used in the app, just same syntax.

Yep, you can go ahead and use this,

but this will be throwing us some errors.

Don't worry, we'll be removing that.

So if I go back, it says,

hey, fail to parse the source code of import analysis

because the file contains invalid JS syntax.

If you're using JSX, make sure the name of should be JSX.

So this is one of the VIT, you can say rule,

that hey, your file was actually JSX,

but you actually call this as just a YouTube,

you shouldn't be doing that.

It's again a VIT specific issue.

Maybe some butlers also do that,

but now that you understand this,

you can just go ahead and rename this,

and you can call this as JSX

because you're throwing out some of the JS,

but this is also not gonna do it.

If I save this, go back, it technically runs that,

but where is my YouTube?

Hey, there should be a YouTube

because there's a text inside the YouTube,

I'm returning a YouTube app.

Why is this not going on?

Right click, inspect, and just look at the console.

Now some warning in the console.

The tag YouTube is unrecognized in the browser.

If you want to render React component,

start its name with an uppercase letter.

So yeah, again, one more error.

So let's just go ahead and remove that.

So I'll just go ahead and say,

hey, this is a YouTube with a capital U,

export that as a YouTube with a capital U.

In the app, obviously have to export that as YouTube.

And now I can just call this component as a YouTube.

So that is much better version of it.

And now we can see the YouTube app.

Now there is no such hard requirement

of naming the file as capital,

but this is a convention and I don't want to break that.

So I'll just go ahead and say that,

hey, that's a YouTube.

And the moment I do this,

this needs to be updating with the import.

Just the file name will be importing.

And sometimes you'll see the errors like this.

That's okay.

Just go ahead and command shift P and reload.

Reload the window and the errors will be gone.

So yeah, really basic.

I've been teaching this for years and years now

in all of the boot camps.

So yeah, this is a classic way of,

now you have learned how you can create

your own component basically,

which is just a method.

This is just a method.

So that's basic part of it.

Now let's try to do the same thing.

I know this is boring,

but it's very, very important for you to understand that why

and how we are having the bundlers

and how does they behave and all of that.

We need to do all of this in the basic React app as well.

I know, I'm sorry, but this is crucial information.

We cannot avoid that.

So let's go into the source.

We know this index.js, we know app.js.

Let's go ahead and create another one.

And let's call this one as a YouTube.

And we'll be following the convention this time

because there's no point of learning them again and again.

So we know that YouTube.

In this, I can actually use .js.

There is no hard and fast requirement to call it as JSX

because the rules were actually coming up from the VIT,

not the CRA.

So every bundler has their own rules,

but I actually like this JSX.

It actually gives me that, hey,

there is some JSX getting returned from it.

So I like that.

So I'll be following that.

In the function, I'll be calling this one as YouTube.

There we go, really basic.

And in this one, we'll be just going ahead and saying return.

And inside the return, we'll be returning a JSX,

probably adjust an H1, which says YouTube React app.

And end of the day, we'll be just saying export default

YouTube, if I can write that, not like that, YouTube.

So once we have actually created and exported that

in the app.js, I can actually go ahead and import that.

I can just go ahead and say import YouTube from YouTube.

We know that this needs to be uppercase.

If I go ahead and directly write this as a YouTube,

and just like that, it will bother me.

Now we know that the basics behind it that, hey,

this needs to wrap inside this, which is a fragment.

Very basic, not too much to be worried.

I can save this, and now I can run this.

So as you can see, once you understand the concept

at one places, moving them into another place

is now a big deal.

We'll just go ahead and say npm run and start.

I think that's the start script.

No, that's not a start script,

because I'm actually in the wrong folder.

I need to go inside, 01 Basic React.

And from here I can run npm run start.

And yes, these errors are really, really important

for you to see and actually walk through,

and just make sure never be afraid of going into the console

to see if there is any error or something like that.

That's how we all debug the application.

Now we have actually dissected the application

in such a way that we just know every inch,

every piece of how the React application is working,

from where the Reacts are getting injected in the HTML,

both in the VIT, how the build process works,

both in the CRA, Create React app, and the VIT as well.

That actually gives us a great foundation

of how things actually are being done inside this.

Again, some of this I understand was boring,

was repetitive, but it is essential for you to understand

how the dissecting is done, so that when we later on

create the React apps, you just see them

as just a JavaScript app, and that's my goal.

Not to see React as some fancy library,

but as something which is an addition

in your JavaScript writing capabilities.

That's what my goal is.

I hope you are enjoying this.

If you are enjoying this, do let me know

in the comment section.

That is very, very important for me to get a feedback,

to get some appreciation.

Everybody works for some motivation.

This is my motivation.

So that's it for this video.

We'll surely catch up in the next one.

Hey there, everyone.

Hitesh here, back again with another video,

and welcome to our React series.

I hope you are constantly watching this series,

and I'll also sharing this series,

so that helps me a little bit to spread the word around

that, hey, there is a remarkable series,

and yes, one thing is sure, this series is going to compete

with all of the paid courses that you have seen around

on the internet.

So with that, let's go ahead and get started.

In this video, we are going to focus on one very basic

concept of how can I create my own React?

Now, this sounds very fancy, but it is not.

A lot of people just believe that React is some kind

of a magic that happens behind the scene, but it is not.

It is just a ton of JavaScript, which

has been written by somebody else,

and a lot of algorithms, which makes the manipulation

in the DOM much more easier and consistent.

That is it, nothing more than that.

Once you get the mindset that React is doing nothing,

apart from helping me in manipulating the UI,

you will become an amazing React engineer,

or as a front-end engineer, that's debatable.

So in this video, I'll walk you through that,

how we can create a really basic HTML file

and a JavaScript file, and can kind of mimic

what React is trying to do in the backend.

Of course, React uses tons of algorithms,

we are not going to write that,

but still, this video is very valuable

and will give you a whole lot of idea about that.

I hope that makes you excited.

And in case you're watching it on my channel,

then definitely we have a target setting practice,

so go ahead and keep on learning the things

and post in the comment section,

we are targeting around, not higher,

but just 100 comments on the channel.

I hope you can help me in achieving that target.

Let's go back, and I'll first share the screen,

so there we go.

So this is my VS code, by the way,

you can find all the code files on my GitHub account,

post a star there as well, I'm asking too much.

That's really required.

Okay, moving further, let's create a new folder,

and we're going to call this one

as simply just custom react.

So let's go ahead and create a custom react.

Where does that folder go?

Oh, anywhere, custom react.

Or we're gonna call this one as custom,

I really like this color, but anyways, custom react.

Custom react will get just the two files, very basic,

just like how we do in the classic vanilla HTML.

So index.html, what else?

We're gonna get some JavaScript.

So let's call this one as custom react,

or whatever you like.

Custom react.js, should I uppercase this?

Yeah, I really think a lot about that.

Okay, what goes into the index.html?

Nothing much, we'll be using emit

to generate the boilerplate code, hit that,

two hits and after that two tabs,

and after that you can just write custom react.

Now the idea is, in the react,

what you might have seen is,

we have already explored that in the last video,

that it has just a div which has an ID of root, that is it.

If I go ahead and jog your memory again,

either I go in the VIT or wherever you want me to go,

I can just open this and this is exactly how it looks like.

In the VIT, we saw that there is a custom script

that is included, and in the react,

we saw that there are some react scripts

which helps me to inject this inside this.

So if I go ahead and look into my public,

index.html, nothing, and that is only and only one reason,

because in my package.json, there are some react scripts

which actually inject that.

So we're gonna not gonna do that,

we'll inject our script manually,

and there are a couple of ways how we can inject this,

we'll not talk much about it,

but right now I'll just say script,

and all I want is to have a source

and the source is in the current directory, custom react.

By the way, we can talk also about that

how the type of the loading of the script

can be common JS module, but not for this series,

not going to be too much into the JavaScript,

but wherever it is required, I'll discuss that.

Okay, now coming up on to the react,

how does react works and how does react is able

to just generate everything inside this route,

and how would I do this if I had to just

do really basic of it?

Now the first thing is that we need an element.

So what is the element that you want to inject here?

Now you might say that, hey, I want to inject,

let's just say an h1 tag, simple,

and inside the h1 tag, we'll have some lorem ipsum, great.

But this is not how react looks at the picture,

react looks at the picture that everything is an object,

and inside this object, you'll give me that,

what should I create?

First, give me a tag name,

then give me what should I insert into that,

give me what attribute should I add to those HTML,

that kind of a basic.

So we can just try that, let's just go ahead and do that.

First of all, let me say that, hey, this is a type,

what the element type should be.

It could be h1, it could be a tag, whatever you like,

that is exactly the type.

Now after that, what are the props

that you want to insert into this?

By the term props, you can just use attributes,

no problem there, my video, I chose to props,

your video, or your code,

you can choose absolutely to have this.

Now this props, since we know that the attributes

can be many, so that's why I'll use a prop as an object,

which can further be drilled down to multiple things.

Like for example, I want an href,

which goes to Google, so Google, if I can write that,

that would be great,

http colon slash slash, google.com.

So that's the first thing that I have here.

And apart from this, what else do I want?

Maybe a target, okay.

Target will be underscore, of course, in the string,

underscore blank.

Now right now it's giving us couple of errors,

don't worry, we'll fix them up in a minute.

But this is my basic, what else do you want to have?

Now let's just say I want to have some text inside it,

and I'm going to call these text as children.

And I'm pretty sure you might be wondering

how you are able to come up with the things

that we are going to call this as props or children.

No need, no need, no need to call it anything.

Feel free to call it whatever you like.

I'll just go ahead and say, and I'll say,

click me to visit Google,

and I know this is bothering you, so I'll just fix this.

Okay, since this is an object,

let's go ahead and store that into a variable.

So we'll just call this one as react element.

Feel free to call it whatever you like,

there's just nothing more than naming.

So now we have an element which we want to inject

inside our DOM, or root, in this case, root.

So I want to inject here.

Okay, how can I do that?

That's pretty easy.

First and foremost, get me the reference of this root.

That's easy.

If you have studied your JavaScript, that's easy.

All I have to do is say, document, hey document,

I want to have a get element by ID will also work.

We can have a query selector that will also work,

whatever you like, it's your choice.

So I'll just go ahead and say, give me a root.

There we go.

Now you might have noticed that if we go and check out

the VIT especially, this is exactly what they are also doing.

So in case you are looking forward for this one,

if I go ahead and open up source, main.jsx,

exactly like that, get element by ID, query selector,

whatever that is, exactly same.

Okay, since we have a reference of this,

let's call this one as main container.

There we go, feel free to name it, whatever you like.

Now, once I had this reference,

I am thinking that there should be a method

just like React has its own method.

If I have a custom render method,

which takes two parameter that,

where do you want to inject and what do you want to inject?

That is it, that is it, I'm done with my job.

So first thing is, I want to inject React element,

where do you want to inject it?

I want to inject it into container, main container, yeah,

that's whatever name.

Okay, so this is good.

Now the whole magic lies that,

how does the main container work?

It's a function, that's for sure.

So let's go ahead and create a function.

Why to worry about that?

And let's just call this one as main container

and there we go, there we go.

Magic function, that's it, tutorial done.

No, not like that.

Okay, main container takes a React element,

let's call it as React element

and whatever the container you want to inject.

So in my case, it's main container,

but we'll just differentiate it like this.

Okay, step number one is create an element.

So how do I create an element?

It's pretty simple, document.create,

no suggestions, create element, there we go,

we have suggestion, create element.

What element do you want to create?

I want to create an element, which is an A tag, great.

But I want to utilize the parameters which are passed to me.

So I can use a React element parameter

and I can say, hey, take the name of the parameter

from react element.type.

Okay, so that I can reuse this code

and not only just with the A,

I can actually inject H1 and H2 and whatnot,

all these values.

Let's store that into a variable.

So let's just call this one as DOM element,

whatever the name of the element, it's up to you.

So we have a DOM element that can be injected,

but right now it just created,

it doesn't have anything inside it.

So let's put something inside it.

So this DOM element, we're gonna go ahead

and set up inner HTML, inner HTML,

that's always something which I mess up.

And then we can use this React element

and I can just go ahead and use the children.

So inside the inner HTML, this children will be added

and now we have an A tag

and whose text is inside the inner HTML,

or you can say inner text as well, that's changeable.

And I have this access,

but I have set no attributes inside it.

So how do I set the attributes?

That's also easy, I can just go ahead and say,

hey, DOM element, I want to set an attribute,

set at no suggestions, that's mean,

at, oh, my bad, I'm writing wrong,

at tree, still no suggestion, I don't like that.

Okay, I'll say attribute, what attribute do you want to add?

Now I want to add an attribute,

which is going to be first href

and where will I get the value of href?

I'll get it from react element dot props dot href.

So this is my first attribute that I'm setting.

Now what is the next attribute you would love to set?

I would love to set this target.

So I'll just say, hey, now let's set the target

and the target you will be getting from target, that's it.

Okay, once this is done,

then I need to utilize this container

because this is where I'm going to append the things.

So I'm going to go ahead and say, hey, container,

let's go ahead and say append child

and in the append child, let's inject the DOM element,

that is it.

Now, so far we haven't utilized anything react

or reactors like that, we have just gone through

with the basic JavaScript to jog your memory of JavaScript

in the early days of react.

Okay, this looks good and we were able to do all of this,

but this code is not optimized, we can actually optimize it.

So I'm going to go ahead and put some comments

onto this one so that this is there for you.

And by the way, I've been doing this

for a really, really long time in lots of bootcamps.

Okay, there we go, we keep this.

Now let's try to do this again.

It will be a good revision for you.

A lot of people are not going to like it,

but this revision is necessary.

So let's do it one more time.

This time we'll write a little bit faster.

So we'll just go ahead and say document.createElement

and we know what's going to happen inside this one.

We'll take the reactElement.types, types or type.

And we're going to hold that into a variable.

Let's call this one again as DOM element.

And there we go.

Now we know that this part of the code is absolutely okay

and DOM element will also get the inner HTML.

So we'll just say inner HTML.

And we have the inner HTML, which is going to come to me

via reactElement.children.

So far, exactly same code, no big deal.

But what I want to do now is I want to loop

through this prop so that no matter how many elements

are coming in, I can just set them up.

So let's just utilize a loop here to write a better code.

And we're going to use a for in loop.

That makes sense.

And we're going to say for prop in,

and again, we have to go inside this props to loop through.

And I can just go ahead and say, hey, reactElement.props.

There is an S there.

So all of this element needs to go through with that.

I'll just remove this if part.

This is our classic basic code.

Now, let's just say, first of all,

this is also something which happens in the React as well.

By the way, you can just go ahead and set these elements.

So we can just go ahead and do something like this.

Access this DOM element, and just keep on looping through

and set the attribute.

Attribute, and that attribute,

the key of the attribute is obviously this thing,

which is actually looping through in the prop.

So I can just go ahead and say prop.

And what should be the value?

The value is going to be reactElement.

And we also know that objects can also be accessed

other ways than just the dot notation.

There is a square bracket.

In this case, that square bracket makes sense.

So inside this, go into the props.

Now we are inside this.

What property do you want to access?

Whatever there is in the prop, this same.

So I'll just use a square bracket, and I'll say prop.

That is it.

Now, this is how, obviously it will work,

but there are also cases that somebody might inject

accidentally a children here, just like this,

and might add a children here as well.

If there is a children here,

we are expecting that the children will come outside.

Now, remember this, I am setting the rules.

I am react, okay?

But still, I want to avoid that case.

So just taking care of the corner case,

I can just go ahead and say,

hey, if the prop is equals to a literal string of children,

and if that is the case, I just want to return.

So I'll just sneak it out.

I'll just say continue.

I cannot return here,

otherwise this will close the entire thing.

I just want to skip that one iteration.

Again, if this is something too much for you,

just go ahead and skip that.

Now, I have improved the code,

and I can just go ahead and say,

hey, take the container and append, nope,

no suggestions, hate that, append child.

And in the append child, I can just use the DOM element.

So it's a better approach,

definitely 100% a lot better approach.

But can we say that this was far better,

and this is how exactly the React works?

Absolutely 100%, this is how things works.

Let's go ahead and open this up into a live server

so that we can actually see that in action, okay?

We got some of the stuff wrong,

so let's just go ahead and fix that, okay?

Object, and we have back limiting, okay?

So some things are not loading up properly.

Let me go ahead and quickly check that.

All right, so after stirring the code a little bit,

stirring the warnings a little bit,

I found the bug, and it was pretty easy,

and not really that big of a deal.

So what we see here is that inside this,

I accidentally named it as main container,

shouldn't have done that.

This should be named as custom render,

probably bad suggestion there,

you might have already noticed that.

So once we do this, save this,

and when we go back onto the code part,

we see that click me, visit Google,

although very, very painful for your eyes.

But it's good, it's good.

It's actually working,

and I can just go ahead and fix it

so that you can at least see that properly.

So inside the body, I can just go ahead and add a style,

and can say background color is going to be probably ash,

and we're gonna go 414141, better.

All right, so although the link and the text

and everything is a little less visible,

but we can see it is there, it is there.

It is now much visible for you.

I can zoom this for you,

and we can see it is visible for me.

There are a couple of things that we need to discuss now

that how these all things are going on.

It's not really that bad of a deal.

So we have concluded so far that yes,

we are perfectly capable of designing our own React,

and this is what React actually does on the surface level.

Where React shines is there are definitely

the capability of creating things inside inside it.

Like for example, there is right now just an A tag,

but what about when there is a div tag,

then there is a span tag, then there's a A tag.

We obviously need to loop through values,

and smartly design our components.

So we can do that, no problem.

Surely take some time,

but with enough of the time, it can be done.

Also React uses some of the algorithms behind the scene

that makes this entire process easier.

So now can we relate this, our custom design thing

with the React itself so that it makes sense

or start to make sense a little bit?

Yes, turns out yes, we can actually go ahead and try that.

So now let me go back onto the code part.

This is the code that we have written.

Now technically, if this is whole the theory,

which is correct, I can actually bring whole of this

into the VIT and should be able to run this.

And that is where the challenge begins.

So I'll just go into the source main.jsx,

and I'll just say, hey, I have this React element

and I just want to run this React element.

Can you do this for me?

I think yes, you can, because what we noticed,

if I just close it and jog your memory again,

in the app.jsx, this is just a function.

That is it, you are exporting a function.

If I come back and for a minute,

if I just forget about my React element,

I can just go ahead and declare my own function.

And I just can call this one as my app.

And that's my app.

And literally, whatever exactly we are doing in the app,

we can do here, we are just returning this.

So let's just return this.

So I can just go ahead and say, hey, I want to return.

What do you want to return?

A simple div which says custom app, maybe like this.

So I'll just say, hey, this is my div.

Not like that, didn't intention.

So one more time, a div, yep, just like that.

And we will have an h1.

And this h1 will say custom React app.

So we should be able to run this technically.

And we will be, I can just go ahead

and remove instead of the app.

I can just go ahead and say, my app, just like this.

And even I can do all the fancy stuff,

since this is a function, I can do this literally.

And let's try to run this.

And I'll open this up.

And let's just clean this up.

And I'll go inside a 01 basic.

And probably we are already in the basic React.

So I'll kill the terminal, start it again.

CD01 basic VIT.

And the way to run it is npm run dev.

We have already seen that.

And are we not able to run it?

Let's just do an ls, package.json.

Probably we are missing, let me just check.

Oh, I probably deleted the node modules folder.

npm install, shouldn't take much time.

npm run dev.

And now, yep, we are able to see that.

So now we can see custom React app.

This is exactly what we intended to do.

But this is not a correct way.

This is not a recommended way in the React,

although there is nothing which is stopping you to do so.

But it might hinder some of the optimization.

So rather better way is to load it as a component.

Custom design element, HTML element,

that would be a better name.

So I just go back and say, hey, still it works.

Custom React app, so hey, that is exactly.

Now, if this is the exact process that is happening

of looping through the elements,

can we reach to the point where I can just

loop through this element?

Let's just try this.

So how can I, if I can render this whole thing

with a function, I should be able to render things

if I directly pass it on as an element.

So what about if I go ahead and say, hey,

I want to give you a const,

which is going to be named as another element,

whatever you want to name it.

And this another element is directly not a function.

It just doesn't return, but it directly gives you an A tag,

which actually goes to

google.com and has a target of underscore blank.

Underscore blank.

And we can just go ahead and say, visit Google.

Visit Google.

This should also work because this is exactly

what is happening.

This is what is getting returned.

If I can get it as a return,

can I render my element directly like that?

You can actually, if I can just go ahead and remove this,

I can just say another element directly,

and this should technically work in theory.

So if I go ahead and move this, this is not working.

I'll tell you the reason.

If I go ahead and inspect and say console, it says,

hey, warning, another element is using incorrect casing.

That is the only problem with the Vtis

because it wants me to actually make it capital.

And this one also has capital and this is all happy.

This is all happy.

If I go ahead and redirect it, reload it.

Now notice here, it says in the console that,

hey, react.jsx is invalid expecting a string.

You are expecting a string, but let's try the same thing

because this is actually a warning

or some of the issues that are given to me in the VIT itself.

Can I go ahead and just change it like this?

Yes, you can.

And by the way, I'll just go ahead and show you

how the things are actually being done in this exact way.

Now the most important thing is that if this is an element,

which is already generating an element,

do I actually use this it like this?

Or do I use it like this syntax?

I know this is weird.

Or this syntax, but this is not a function.

This is just something.

I don't know what this is even.

I have never seen anybody returning like that.

But one thing I can surely say that this whole thing

is going to be looped through,

just like here we have looped through.

So I don't need to do any of this.

And can I just go ahead and pass it like a variable?

Will it accept it like this?

If I go ahead and save it and go back onto my browser,

oh, we can see that it accepted it like this.

Oh, that's interesting.

Never seen React like this.

So if I go back, I have concluded a few things that,

okay, it's totally possible to just declare a function

and return an HTML from it, that is your JSX technically.

And I can also go ahead and do some things like that,

which is very, very weird, but it technically works.

Now, if technically this whole thing works,

can I just render React element like this?

And you might be very, very curious to see it

like working like this, but you go to the web and it doesn't.

If I go back onto the Chrome and I go ahead and reload

and you say that, hey, it doesn't work.

Now, again, you are excited that probably

this needs to work somehow.

So I can use a syntax like this

or maybe another Angular bracket syntax.

No, it doesn't work sadly like that.

And you might want me to answer this, why it doesn't work?

The reason for that is,

React doesn't know what is this type.

React doesn't know these are props.

React doesn't know these are children.

This is something that is, I designed it,

my custom React, I made it up.

So whenever you made it up,

how can I react actually understand your language?

So there is no way react actually understands your language.

If you want to create an element like this,

you have to understand the React language

and have to give it a React language.

So what is this React element?

So I'll just go ahead and say const

and actual React element,

or I can just say a React element.

The reason for saying this is

because we already have this React element as variable.

So I'll just call this one as React element.

In order to properly actually convert this thing,

this whole a thing or whatever the div thing is,

you have to actually convert this whole thing

using the React language.

And how do you understand the React language?

By importing React, that is it.

And use a method that says create element.

This is exactly how it does,

just like we created our render element.

This is how react actually create element.

So whatever you return back,

this whole JSX actually goes through the React element,

and then it is converted into an object.

And how does it look like?

We saw that we gave this type and everything.

No, React don't use it.

React actually directly gave it as a tag.

This is how literally you convert that.

After that, you go ahead and inject an object.

This object, second thing is always and always an object.

The order here is also important.

And then it actually loop through and say

that all the attributes that you want to go through,

you go ahead and inject those attributes.

For example, google.com.

I should have used my own website, but anyways.

Target, and we use the target in the strings,

of course, underscore blank.

That's the second thing.

And finally, the last thing that comes up

is whatever needs to inject as a children.

And that is where you actually says,

click to visit Google.

And that is why I named them specifically as childrens

and props and everything.

This is exactly what happens.

The first thing is your element.

The second thing is all the attributes.

And the third thing is all the children

that you actually inject.

This is how literally React actually break it down.

Once you have this one as a React element,

let's go ahead and place it up here.

That, hey, I now have a React element.

Let's go back.

And we can see that now there is no problem

in saying that, hey, this is not uppercase, lowercase,

because we are not using those elements now.

Nothing is getting extracted from another element.

Another element, this is literal HTML.

This is what the React expects while rendering,

because it is the object version of it.

Quite a lot of stuff, which is fun stuff.

Now, another thing which you might have seen

is actually fun stuff.

So let me just go ahead and say, let's roll back to app.js.

So we already have this one.

So we'll just inject this.

And I'll say, hey, let's render app with a self-closing tag.

And there we go.

We have number of times VTAB.

You might have noticed that what happens into this one

is sometimes you go ahead and inject those variables.

That is also super, super important.

The way how we render the variables

is not really too different from how we render anything

in the JavaScript.

You want to render an element,

this is how you go ahead, do that.

Now, here I can just go ahead and say two plus two,

go back, and it gives me four.

So it is actually converting everything,

whatever I have as like this.

Now, not only this, I can declare my own variables.

If I go back onto the code part,

I can go up here and say, hey, I want to have a username.

And that username is literally my name.

I can instead of two plus two, or in another variable,

I can just go ahead and say that, hey,

now I have this username.

So this is, oh, by the way, wrong place.

This is where it should be going up.

So inside the function, why is it bothering me?

Okay, too many bothers.

No corresponding closing tag, you have a closing tag.

Okay, probably some place I messed it up,

const username, closing it, return, just like that.

Okay, I'll hit command Z couple of times.

Oh, my bad, we actually messed it up here.

And this should be all happy now.

Now we can place it back.

So this is how we get our username,

whatever the variable is, funny.

And I go back and see I have this variable.

So how does that actually works?

And a lot of people wonder that,

why cannot I just go ahead and use something like this

if username equal, equal, maybe one more equal.

And I go ahead and say Hitesh,

then can I use my other stuff like Trinity operators here,

just like that, there is a string.

And you can see it, it's not working out.

And it says, no, this one says yes.

So why does this doesn't work and this works?

Because the reason behind that is whatever you write,

React actually goes inside each of your element,

each of your element, HTML element,

and extract these curly braces out of it.

And whatever it extracts these curly braces,

it actually puts one more object property here.

And whatever you place it there,

it actually literally moves it there.

So for example, when you go ahead and say two plus two,

that two plus two goes here.

And since this is evaluated as JavaScript,

that two plus two gets converted into actual value,

which is four.

But if you go ahead and write it like this,

if, let's just bring it so that we can see that

why it doesn't make sense.

I copy this and instead of two plus two,

if I go ahead and use this, this cannot be evaluated.

So the only thing which I recommend everybody to understand

is whatever the expression you write is,

this is evaluated expression.

It could be, it should be evaluated to something.

So this something here is two plus two four,

so that can be evaluated.

And that is literally being taken and is being placed

so that JavaScript engine can just take it as it is.

When JavaScript takes it,

this is expression which needs to be evaluated.

This is not already evaluated.

And this is, I know this is too much,

but this is literally how it plays it as another property.

And that's why you are able to see your username here.

So it just refers to that as a variable.

I'm just good in referencing the variable

or doing some JavaScript-ish calculation,

not your whole logic should be written here

because it doesn't make sense.

Properties should not have logics like this.

This is literally just a property, list of properties.

And that is one thing you need to understand.

So this whole thing doesn't work.

So you should not be doing it like that.

If you go ahead and place it as empty, that is also okay.

Sometimes you will see there are empty lines and stuff.

Like for example, if you want some spacing

or something between them, or maybe at some places,

you'll see people literally just use it like this

and then put an empty string here,

just like that with the spaces.

Because this is literally being taken up here

and this space actually is taken like this.

So yes, this is valid and you'll see a lot of bugs

and things being reduced.

If you understand this part of JSX, that is it.

You understand a lot of React.

This is a lot, I know,

and I can totally understand and relate to you.

But this portion of the code is really important for you

to understand that how the JSX is actually evaluated,

how React sees the thing,

and never, never fascinate React

as something which is magical.

We already tried to building something.

Of course, we didn't spend that much amount of time

with the algorithms and chaining of these elements.

But hey, we did a fantastic job

in actually doing a lot of stuff.

So this is where actually your foundation

begins of the React, that hey,

now I understand JavaScript, now I understand JSX,

now I understand React.

It's nothing more than that.

All these H1, H2 tags are converted into object,

react.createElement helps me to do that.

And later on, I'll walk you through

with even the source code of the React

on the Facebook GitHub page.

Yes, we'll do that as well later on.

But I think this video gave you a lot of insight

of how the custom React is being designed.

And I know whenever I teach this,

even in the early days of the React,

in any offline online bootcamp,

people just go, oh man, this is too much,

but we loved it.

So if you have enjoyed this, please do support me.

Hit that target in the comment section.

I would be super, super happy

to have this kind of support from you.

And again, videos will be coming soon,

as constantly as they have been coming

for years and years now.

Let's go ahead and catch up in another video.

Hey there, everyone.

Hathaish here, and welcome back to another video

in the series of React.js.

So we are taking our time absorbing the React

as much as possible.

And now let's start the fundamental foundation

of React itself.

One of the core foundation of the React is state.

Not the state management,

that's a separate topic, we'll cover that,

but the state.

What do you mean by state?

And to be honest, you don't need state in the React.

So state is the way we first need to understand

that where does the state comes into the picture?

Should I learn it?

Should I, or can I skip that?

And right now I would say, yes, you can skip that.

But as you will see the need,

automatically you'll understand that,

oh, this is why I should learn the state in the React.

So let's go ahead and try to build a project,

very basic project, and let's do the stuff with that.

And I think hands-on practice is always the good idea.

By the way, if you're watching it on my YouTube channel,

I am expecting just a hundred comments

under the comment section itself,

just to provide support and to set a target for you.

If you complete that, that's awesome.

If not, hey, I need some support.

I need some encouragement from your side as well.

It's really difficult to just talk to camera

and sit here all day in the room itself.

So I deserve that, hopefully.

If I, okay, let's go ahead and start with that.

So first of all, we are on to VS Code, just like always.

And I'll just start, I'll just actually close this one.

I'll start another terminal

and we'll be creating a fresh new project.

By the way, all the projects are available

on my GitHub repository.

You can just search for React English,

somewhat repository, it will be in the description.

So it will be available there.

So let's go ahead and try to have this one at latest.

And this is just how you create the VTAP.

And by the way, we have discussed quite a lot.

VTAP, React app, doesn't really matter,

whatever like suits you, you like that,

you just go ahead and get started with that.

I'll name this one as, this is second project.

So I'll just call this one as zero to counter

to keep a track of how many projects we are building

in this one, whether small or big,

that doesn't really matter.

So I'll just go ahead, work with React.

I want to go with JavaScript.

I know a lot of you want to go into TypeScript,

especially after seeing my entire playlist

on this channel or free code cam,

wherever you have seen that,

entire playlist on TypeScript.

I want to keep this entire React series

much more accessible to everyone.

I don't want too much of the prerequisite

because already there is too much prerequisite

of JavaScript in the React series.

So I would just say that, hey, we are not using TypeScript,

at least in the initial level.

I will keep couple of videos at the very last of the series

to just give you an idea of how you can use TypeScript

with React, but for majority of the part,

my goal is to make you familiarize

with the concept and foundation of React

and not to just bog you down with the TypeScript.

That's the idea.

So let's go ahead into zero two

and I can just go ahead and say npm install.

That is all what we need.

And then we'll simply fire npm run dev to start this.

If my internet is decently fast, I hope so.

There is not too much of dependencies.

That's a good thing.

Something, something has happened to my internet.

It's usually not this slow.

Anyways, let's go ahead and say npm run dev.

And by the way, we have already seen that

how we can actually see that which command runs all of that

via the package.json.

This is how it looks like, which is good, which is good.

Going back into zero two counter

and we'll see inside the source that we have app.jsx.

This is the file where we are interested in mostly.

And we'll try to build something of our own

into this entire application.

So let's just remove everything.

We'll just keep the bare minimum basic.

And let's see that can we build something of our own?

So let's just go ahead and have a simple H1.

It says React course with Hitesh and that's it.

And probably there is another H1 here or probably H2

and I'll say a counter value and then nothing.

This is exactly what we want to do.

And then I'll probably have a button

and that button does nothing.

It just says add value.

And there is another button which just says remove value.

And for some reason, I don't know,

I want to inject some values in these buttons as well.

And there is one more.

I'll just go ahead and say, hey, there is a paragraph

which says footer, which will also get some value.

Can we first go ahead and just remove everything

from this file just like we did in the last one

that hey, I'm not interested in any one of that.

I just want to see how my app looks like.

So there we go.

Right now we can add some more values to it

or probably we can inject some of the spacing as well.

By the way, here's a fun thing.

I can just go ahead and add like this

and notice here, it adds a space.

If you know how the JSX are being converted,

this shouldn't really bother you.

But right now there are buttons.

They do nothing, footer, nothing.

And what I want to do is I want to have a variable

and that variable should be shown all the places.

No big deal.

I can come here and I can declare a variable.

Let's just say we will have a counter.

Since this will change,

I'll start with the value 15, 20, whatever you like.

This is my counter.

And I know already that I can just use these curly braces

to have my counter.

This is known as variable injection.

No fancy thing.

And I also want to inject it here.

So I'll just go ahead and say counter.

And I'll also come here in footer

and I'll inject it here and I'll say counter.

So this is a common thing, which I shared you

in the story of React, how it actually got up.

So I can see it's 15, it's 15, it's 15 everywhere.

So first of all, notice and even appreciate

that you don't have to say document.getElement by ID

and then inject that, append that, add value,

append HTML, nothing, nothing like that.

I can just use literally variable.

So I'm more focused on the programming side of it

than just attaching things to the node list in my document.

So that's one advantage here.

Now, next thing is I want to have a method

that when I click on the button, it adds the value.

Cool, you can have that.

Pretty simple, there is nothing Reactish in that.

It's just simple JavaScript.

So I can just go ahead and say, hey, I'll use an onClick.

This onClick will say add a value.

Since this is a method, this needs to be declared.

So we can just go ahead, use classic function

or arrow function, totally up to you,

not going to crash your app.

So I'll just say add value

and add value will be an arrow function in my case.

And what it does, it takes the counter

and it adds the value to it.

So I'll just go ahead and say plus one and that is all.

Now on top of this,

let's go ahead and try to do a console log of the counter

whenever I add a value.

I'll just go ahead and say, let's console log here itself.

I'll say console log and I want to have the value of counter.

That is it.

So I'll save this, go back

and I'll open up my inspect and console

so that I can see what's happening there.

So the value is 15 and I simply click on add value

and it says 15.

I again click on this and it says two time it's 15.

Very interesting.

So if I go back,

I see that the counter plus one doesn't increase it.

Why?

Because I didn't save it anywhere.

So it should be something like this.

Counter is equals to counter plus one.

So I'm updating the value of counter

by adding one to the existing value.

That's good.

Let's go ahead and just facilitate it again.

Refresh and remove everything.

And I say add value.

I get 16, add value 17, add value 18.

Okay.

So I'm able to do almost everything in so far,

whatever is required in the JavaScript as well.

I have my variable.

I can add value to it.

I can similarly remove the values,

whatever everything that JavaScript is telling me,

I can do that.

Except from this, what's coming up next.

Now the next target in front of us is that,

hey, you have this, great, good.

We appreciate that.

But now we want this new value to be updated here as well.

Now this brings something to your mind that,

hey, how does this work?

Because technically if we are updating this variable,

this should be updated here as well.

And here as well, and here as well.

Why is it not working?

Because I'm pretty sure on 100%

that the value is getting updated.

I'm seeing this and I can add the value 19,

but this is not getting updated here.

And this is my friends, where it comes to the React.

React, this is exactly where React comes into the picture.

React is a library which actually takes the control from you

and gives you that, hey, this is now the mechanism

of how you're going to update your UI.

Remember that is why we call React as a UI library,

majorly, because it controls how you're going to take care

of the UI itself, not your JavaScript,

not how you're going to take the data from the database,

but how you're going to display the things on the website

and how things are going to be getting updated.

And this is exactly where React actually tells you

that you know what, you cannot go ahead

and just update things like that.

I will provide you a mechanism.

You're going to follow that mechanism.

And by which you are going to update everything

and anything that you want.

And exactly we have to follow the things.

React came up with the concept known as a state.

And state is a unique thing in the React,

which actually simply just is getting constantly monitored

and any change in the state re-renders the UI on the web.

And this is what the state is being designed for.

Any change in the state will re-render the webpage.

That's it, told you, it's really, really simple.

So we cannot just go ahead and say, hey,

let counter equals to 15.

There is a way how you do it in the React.

And once you understand this way once, and that's it,

you will be able to do it every single time.

We can already see that in the VIT,

there is already an import statement of use a stat,

use a state from the React.

And this is exactly the state that comes up.

Now, let's just go ahead and say const

and we want to use this state.

So the way how you say it is simply say,

use state and the parenthesis.

I'll tell you later on, these are known as hooks

and how you can design your own custom hooks as well.

Yes, we'll be designing a full fledged.

But the whole idea is, this is a method.

What does this method returns to you?

And it's pretty simple to extract value from it.

It returns you something in the format of array.

The first thing is actually the variable,

whatever you want to call it, it's up to you.

And the second is a method.

And there is no hard and fast rule

that you always should call it as counter,

then set counter number, then set number.

It just is a convention.

Feel free to call it as Superman,

and this one has Spiderman.

Nobody is going to stop you

and your code is not going to go bonkers.

Really basic.

Now, just introducing this and saying it as counter,

by the way, I could have called this one as count

or I could have called this one as Hitesh.

It would have still worked.

Again, different Hitesh and set counter.

They are also linked.

Always remember the one thing,

that the first value that you see here,

it's actually a variable.

And the second value that you see here is a function.

Yes, you can call it method as well.

I won't harm you for that.

I won't be failing you in the interviews as well,

but hey, remember this is a variable.

This is a method.

Okay, moving further.

Just because the name is counter,

I cannot just go ahead and say counter equals plus one.

This is not going to work still.

I can save this, show you that,

hey, this is all good, refresh it,

and all refresh, good.

And I can just say add value.

And now even this thing is gone.

So what happened?

What just happened?

How can this value actually go away?

Let's look at the code, see the error.

So it says, hey, const variable and stuff.

So what is happening?

What is happening?

Simply because this is a const,

you might be thinking, hey, this is a constant.

That's why it's not able to add the value.

Okay, let's just go ahead and try this.

If that works, let, and there we go.

If I go back again and hit a refresh,

I still don't see the numbers.

It says, hey, that const error is gone.

Now even we don't have any error.

So the problem is not with the let or const.

You can still keep it const,

because every time you update the value,

a new state is given to you.

Okay, how do I update this whole thing?

So this whole thing, updation is pretty simple.

All you do in this one is just whatever you want to update,

you update it via the method.

So once you have the method, for example,

I remove everything from here in the add value,

you call this method set counter.

The set counter method is responsible

for updating its nearby,

or I know nearby is not a good word,

but in the array, there is only one nearby,

which is a counter.

So it's brother, the brother is a good word,

it's brother here.

And how do you do that?

You just pass the updated value.

So in this case, I can just go ahead and say,

hey, I want to say counter,

and I want to add one to it.

Okay, you just do that.

Now what happens when I do this?

If I go back and hit a refresh,

then notice here it says,

react to the counter value is gone, nothing, nothing.

If I go ahead and say add value, it says none.

Why is that?

Because there is one more portion of the thing

which you need to learn.

Notice here, the user state right now

has these parentheses.

These parentheses define what should be the initial value

because it's available.

You are defining a variable,

something needs to go into it.

So obviously when there is nothing,

so it's undefined and undefined, you add one to it,

you don't get the desired result.

So you can start it with a zero,

or in this case, we started our variable with 15,

it's up to you, whatever you want to start,

I'll start with 15.

And now I see the 15 again here.

Now again, by the way, in case just for the info,

it doesn't need to be variable like numbers here.

You can just go ahead and start with true.

You can start with an empty array, a filled array, an object.

You can even put methods into it, which is not a good idea,

but you can, nobody's stopping you from that.

I'll start with 15.

Okay, now things are looking like a little bit better.

I can see React course with a page 15, 15, 15 everywhere.

And if I even add value to it, it gets updated here.

So goal achieved.

So we have learned here that there is a way,

there is a mechanism, there is a flow of data

that React is controlling.

And what we can appreciate here is

I can just click on one button and it updates the value

all at all the three places, I don't have to worry at all.

So that is what your state is.

There is only a single source of truth.

There is a single state and everybody is consulting

and is looking forward to this state only.

That's why everybody gets updated

and hence React solved the problem

of the ghost messages in the Facebook.

That is it, this is the whole gist of it.

But this actually, although the next portion

of this section, I usually, first let's cover up.

Let's cover up the decrease value part as well

because there's a button here as well.

So it would be fun to actually go ahead

and work on with it.

So I'll just say click and I'll say,

hey, there will be a new method which will be remove a value

and that needs to be a method as well.

And by the way, you can use the classic functions as well.

And this will be remove value,

which will be in our case an arrow functions.

So there we go.

And we can use the same state.

So same method because I cannot just go ahead

and say counter plus one or minus one.

This method will be responsible for having this.

By the way, you can also do something like this.

Hey, counter is going to be equal to counter minus one,

oops, counter minus one inconsistency.

And then I can go ahead and pass up

the updated value of counter.

You can name this one as a new counter as well

and you can pass on that as well.

No big deal, just style of writing the code.

And we can just go ahead and say counter minus one.

The reason for writing this is

because there's something interesting I want to show you.

I go back and I say remove value.

It removes the value at all places, it adds the value.

So there's this great.

Now this next portion of the video,

I usually go ahead and take this as kind of exercise

for interviews and stuff, but I'll just throw it away.

Okay, I go ahead and duplicate this line a couple of times.

What do you think is the expected output here?

This is a classic interview react question, which says,

hey, now since it is getting started on 15,

I'm running the function add value.

So it should be after 15, it should be 16, 17, 18 and 19.

But when you actually go ahead and see add value,

it just adds 16 and 17 and 18.

This is something which has to do

with the concept of batching.

React doesn't actually send the things immediately

when you actually perform any action or state.

It actually bundles everything together.

We'll go through into the algorithm behind this,

known as reconciliation, how that's being done.

But these are fancy words,

we'll throw them around a little bit later.

So what React is doing,

it's actually taking all this batch

and it's saying that, hey,

there's only one method you're firing up

and it has just one operation to be done as counter,

which is increasing.

So this batching actually gives you a problem.

If you want to avoid the batching that, hey,

this is not the exactly same value I'm taking

and I'm updating one because this is right now

just the same value I'm taking it.

There is a way how you can actually avoid that

or actually maybe this is the situation you want to do that.

I want to click it.

I want to update just four to it,

but instead of adding four to it,

I want to do it iterationally.

And there will be situations, not exactly like this,

but there will be situation.

In that case, what you can do is

there is a callback given to you in this method.

So since this is a method,

this actually accepts a callback

and this is how your callback looks like.

And in this, you automatically get the access

of the previous counter.

So I'll just for the understanding purpose,

I'll call this one as previous counter.

And now either you can return it

or if it's just one liner, you can just go ahead and say,

hey, now my pref counter will add a value of one to it.

Yeah, this is now a game changer

because now since you're using a callback,

that means there is a guarantee the callback needs to finish,

your state will be returning the values

and whatever you call it here,

pref counter, counter doesn't really matter.

It's just a callback.

Here, you just get the access of the updated state value.

That is it.

So I can literally go ahead and copy this

and I can just have a multiple cursors here.

I can just go back here and paste it.

Now you have just changed how things will be.

Now these cannot be batched

because they are dependent on the previous values.

They have to extract the previous value.

Now, if I go ahead and add the value,

notice here now they are jumping up in the ratio,

in the update steps of four.

So this is really sometimes is given to you,

sometimes in today's day, just create a counter for me.

You do that quickly and he does something like this

or something tricky, sneaky like that.

And if you don't know the foundation of the React,

you obviously will get into the trouble,

but not after watching my video for sure.

So go ahead and try to get the similar situation

and scenario in this one.

And I am pretty sure that now at this point of time,

you truly, truly understand that why we have state,

what advantage state gives us,

and is there any real world use case

for the state or not?

Are we just learning it for the sake of fanciness?

No, it's not.

We are actually learning it because it's important for us.

So now that you understand state,

told you it's not really difficult when you're with me,

React is just a breeze.

Let's go ahead and move on to the next video

where I'll walk you through with another project,

another fun, another concept.

So again, just go ahead,

if you're watching it on my channel itself,

go ahead and share this video and the comments.

One just hurt or like motivates me a lot.

So let's catch up in the next video.

This is a theoretical video.

And I know a lot of people don't like theoretical videos,

but this is an essential part of understanding the React

and to explore things on your own.

So I am pretty sure those who really appreciate

the under the hood working of the things

and they want to really go in the engineering side

of the thing, they will appreciate it.

Those who just want to learn superficially,

they will not appreciate.

So the target for this video is just 200 comments.

I'm pretty sure you will help me in achieving a confidence

as well as engagement that yes,

we are actually watching the videos.

You are not just literally talking to camera in a old room.

We are actually with you learning together.

So if you have any issues, by the way,

just look at a poster in the comment section.

I'm pretty active there.

All right, so in this video,

I'll walk you through with a few concepts of virtual DOM,

reconciliation, a bunch of fiber and all those stuffs.

Before that, let me set the stage for you.

So the idea behind the React is pretty simple

that once you actually are in the JavaScript,

you always have to go get element by ID and whatnot.

And whenever there is any change,

what your browser does,

it actually re renders the entire page.

So your painting of the page is entirely being repainted.

Your DOM, CSSOM, everything is reconstructed.

This is a painful process,

especially for the large scale application.

What React does behind the scene,

it actually creates its own virtual mimic of the DOM.

So however the DOM looks like,

it actually tries to mimic it,

all those nodes, everything.

And whenever there's a slight change in the node,

it actually then tries to compare with the original DOM.

And only the thing which needs an update,

it just gives an update of that.

So it's really a great remarkable thing

of how things are done in the React.

But this mimicking of the virtual DOM, of the real DOM,

this mimicking part is known as virtual DOM,

but how good it is and how good it is right now,

that can be understood by the latest version of the React.

So a lot of things.

Okay, by the way, before we get started,

let me share the screen.

So by the way, this is the Facebook GitHub repository,

and this is where they have the React.

So by the way, you can go into the Facebook.

Of course, their pin repositories React,

obviously what else it would be.

You can go into the React,

and then you can actually go into the packages

and see everything which is there listed in the React.

I'll just move it a little bit here,

so that you can see it nicely.

And I'll actually zoom this a tiny bit,

so that you can see what's happening

and where it is happening.

So on the left hand side,

you will see that there's so much that is given to you.

Even your React DOM is here.

And if you'll click on this,

you'll be actually taken into the source.

By the way, I'll just zoom out a little bit.

Yeah, now it's better.

So you can go into this one where we are.

Here is the React DOM.

And inside the source,

I can check out that,

let's just say I want to study the client side,

how does the React behave.

There is a DOM legacy, which we don't want to use.

React root, how does it work?

React DOM, how does it work?

So you can just go ahead.

Even if you don't understand much,

you will get introduced to the new terminologies,

like there is a container,

there is something known as hydrate root options,

there is a create root options.

And maybe eventually, as you'll go through,

you will understand a lot of this code.

And this is how people contribute

in the open source as well,

which I am very active in the community.

So hydrate root and all these things,

or at least you can ask your GPT

like what these are, I want to understand them.

Okay, moving on, let me just get this a little bit.

Don't want to go like this.

Okay, let's go back onto the source.

Okay, I want it not to be like this.

Okay, not like that.

I wanted the entire full view.

Yeah, there we go.

A little difficult,

so I'll probably move my entire thing here.

So that's actually better and visible.

It's really small.

But videos are in 4K, by the way, you can change it.

Okay, one more package I would like to introduce you

a little bit, not too much, is React Core Packer.

So this is the React Core.

You can expand this and see there's a source,

expand this, and this is where you can find a lot of things.

How does the React work?

How does the cache work?

Children's and whatnots.

And even there are some other things like hooks and stuff

that you can find, like React hooks, we talk about that.

And here, you can actually see that how does a hook work?

So whenever it says something like useState,

you'll find that, you'll find that.

I'll show you.

There is a useContext here.

And there will be a useContext.

And then there is a useEffect hook here.

There is a useRef here.

Use insertionEffect, probably you have never heard about it.

Use layoutEffect, callback, useMemo, we'll use some of them.

So as you can see, there is almost every hook.

We'll be also using useID once in the entire series.

So you got the idea that there is everything written here.

Probably right now, we don't understand it,

but it's a good idea to at least see that,

OK, things exist there.

I'm not the only one who's just mimicking here,

things stuff.

Also, you can go into the JSX.

The things which we studied in the JSX

actually comes from here, this part here.

In the JSX element, if you go into this one,

you'll see that everything which I talked about

actually comes from here.

So if you scroll a little bit, you'll find that

here are all the things.

So let me zoom this.

So when I say the React element to you,

this element actually takes these parameters of type,

key, ref, and props, all of these things.

So I was not making up things in the thin air,

they actually do exist.

All right.

So this is the first portion of the theory

that I wanted to introduce you a little bit

with the core React itself.

How does that looks like?

So I'll just go on to the 100% back again.

But there is one more thing.

If you'll search for the React fiber on the Google,

this is usually for me is the first one here,

because I don't think so I have actually recommended

in any bootcamp anything more than this.

So this is a big shout out to a Cadlite.

I don't know how to spell it,

but he wrote it so well that I don't even want

to fork it or something.

And this is so long, it's seven years ago.

I'm still using this.

This was constantly updated obviously, but here's something.

So this is the portion where we dive into

the React architecture.

How does it work?

So it's a React fiber previously, not previously,

but yeah, the React core algorithm got changed

and this is the whole study we'll be doing.

Some of the things it's really important

that you pay attention on to this one.

So I'll just go through with that.

I'll zoom it even a tiny bit more.

Yeah, tiny bit more.

Now it's much more understandable.

Let's go up here.

So all it says is the React fiber is an ongoing

implementation of React's core algorithm.

Spoiler alert, it's not an ongoing.

It was already introduced in a couple of version ago,

but you saw it first time.

Again, the goal of the React fiber is to increase

the suitability for area like animation.

So what's the problem with animation?

Animation happens back to back and we saw it just there

in the user state that it's not possible for us

to do back to back updates.

React uses something known as batching

and once the batch is gone, it's gone.

I cannot do anything in the core algorithm.

But now we can see its headline feature

is incremental rendering.

So animations, smooth animations.

The ability to split the rendering work into chunks

and spread it over multiple frames.

So it's not like previously React used to just do things

instantaneously, but now they actually wait

for algorithm-ish time.

By the term algorithm-ish time, I mean.

They actually decided for ourselves that I'm not gonna

do update right now, I'll send the batch eventually

to do multiple updates at the same time.

So it gives us the ability to pause, abort, and reuse

the work as new updates come in or not to just give that.

So it's a concurrency primitive, so this is best here.

Okay, this is the first part.

This is the introduction of why the core algorithm

got changed.

Now, Fiverr introduces several novel concept.

We will talk about them, some of them.

I'll give you a brief overview of that.

But again, this is again, big shout out to this one.

So for this, you need to have a basic understanding

of the React, which you have now, you have seen the videos.

So it says React core components element instances.

We have seen that already.

Reconciliation, this is something really nice,

but they cover it in this documentation itself.

So I'll walk you through with that.

React basic theory concept and React design principle.

So I'll walk you through with that.

So first of all, what is reconciliation?

Being asked in the interview quite a lot.

The algorithm React uses to diff one tree with another.

And by the term diff one tree with another means

original DOM, my virtual DOM, are they same?

And if this DOM gets updated,

is this DOM is following the principle.

So that's your diffing algorithm

known as diff one tree with another.

So we are comparing two trees of the node list.

To determine which part needs to be changed.

Yeah, literally what I just said.

So update, a change in the data used to render a React app.

Usually the result of set state,

eventually results are in the re-render.

So as it says, if you want to re-render the app,

usually it's the set state, which governs the thing.

So that's why we use use state,

because ultimately the method which actually does all of this

is use state, we just saw that.

The central idea of the React API is to think of the updates

as they cause to app re-render.

So whole picture is all about re-rendering.

So how can we get into from state of A to B,

then B to C and C to A and so on.

So how can we move into different transition

of all of that?

Okay, actually re-rendering the entire app on each change

only works for the most trivial apps in real world apps.

It's, so again, we can actually skip this part

because it's all it's saying is

we don't want to re-render the entire app.

We want the performance, we want to cost to be coming up

and that whole this process is known as reconciliation.

So it's kind of a re-walkthrough of the reconciliation.

I have gone through with this one probably 20, 30 times.

So I know every inch of it.

So sorry if I'm jumping something some places around.

Okay, so by the way, this whole thing is again

reconciliation and different things.

Reconciliation versus rendering.

So again, this is an interesting paragraph.

The DOM is just one of the rendering environment

React can render to.

The other major target being a native iOS and Android,

I told you in the earlier as well

that React is one implementation on the web

is known as React DOM, but more things exist

like React Native and React for 3D renderings

or stuff like that.

The reason it can support so many target

because React is designed so that reconciliation

and re-renderings are separate phases.

So yeah, that is why.

I hope now if anybody's asked you,

I think you have great information here.

Okay, moving on.

Now what we have is we don't want to go

into the React design principles and key points.

Here is where we want to study more.

What is fiber?

We are about to discuss

the heart of React fibers architecture.

Fibers are much lower level abstraction

than application development.

Typically think about it.

If you find yourself frustrated

in your attempts to understand it, don't feel discouraged.

So if this best article on the internet says discouraged,

you don't need to fail that.

I also understood it after going repetition

and repetition after it.

Keep trying it eventually makes sense.

Yeah, same happened with me.

Okay, here we go.

So here are the key points.

I'll just give you a brief summary of it

and then that's it.

We'll call it a day.

Pause work and come back later to it.

So one of the advantage of this

is sometimes you are back to back firing the updates.

So sometimes let's just say you updated A to B

and same variable to C,

there was no point of updating it to B

because eventually it is supposed to become the C.

So if you pause your work, come back here

without updating it, probably we can save some of our time

and updating it to B.

We can directly update it to C.

So that's what it says.

Pause your work and come back to it later.

So yeah, literally.

Assign priorities to different type of work.

So we can just say that,

hey, maybe this animation is going on,

but this button also needs an update,

but this button might take few micro milliseconds later on

as well, but this animation needs

to be constantly re-rendering.

So that's why it says we can assign priorities

to different works.

Reuse the previously completed work.

So we can actually take estates and stuff like that.

Abort work if no longer needed.

So again, example, if A gets converted to B

and B finally gets converted to back into A

within fractions of second,

then there is no point of updating it to the user.

User don't want to see that.

User want to see the ultimate truth.

So there is no point of showing him the state

if you want to do so.

So again, now it comes up as a structure of the fiber.

Fiber always treat them like fiber,

just like your muscles have fibers.

Everything is attached to each other.

That's like the fiber.

Everything is getting controlled and stuff like that.

It's almost like everything is in the fiber-ish term

in the world of React.

Okay, it further goes into the return statement,

how it does and all of that.

You don't want to go into that.

Future section, you can just try that.

But again, there is no need of it.

If you want to watch,

you can just watch this one 2016, pretty old.

But again, this is whole thing which I wanted to share.

I know this is a little bit probably boring part

of the entire series,

but these are some foundational algorithm

which I wanted you to learn from the direct resources

and repository of React.

Not from me, not from anybody else.

Just go dive into that.

So at least you are not afraid of that one.

Okay, a few things.

We now know reconciliation.

We now know a lot about the React virtual DOM.

We also know a lot about the React fiber.

And we also know a lot about the batching of the update

and all these things.

These will be foundational and very helpful

when you'll be learning Next.js as well,

on which I also have a course.

Happened to be, I'm producing a lot of them.

So I think now you have a core foundational understanding

of it.

And later on, we'll definitely talk more

about these documentation,

but I think that is enough.

That is enough for you.

In the next video, we'll jump into the code part

and the course part itself,

and you'll learn more on that.

Okay, that's it for this video,

and let's catch up in the next one.

Hey there, folks.

How are you doing?

I'm pretty sure you're doing good.

Hey there, everyone.

My name is Hitesh, and let's go ahead and get started

and continue with our React series.

So we are done already with a couple of topics,

and especially the response that you have given me

on the videos like state, what is a state,

how does we work it,

and some topics that we discussed about like virtual DOM,

reconciliation, fiber, pretty interesting topic.

Little bit theoretical,

but very important and interesting one.

In this video, we'll take down another such topic,

which I always begin with, why do you need it?

You don't need it at the very first place

until unless you understand the possible need

of the subject, then only you should learn.

So that's the props for us,

and we'll go through and understand that.

Apart from that, there is kind of industry trend these days

to use something known as Tailwind CSS.

This is not going to be a dedicated class

about the Tailwind CSS,

but still we need to learn to configure it with the React

so that we can utilize it,

and it's not really that heavy.

It's quite understandable,

and we will be doing that on the go as well.

So without a further ado, let's go ahead and get started,

and let's understand what is the need of the prop

and why the props are there.

By the way, we will also learn a little bit about components

and building components in the React in this video.

And let me just announce this first

that components are no proprietary of the React itself.

They used to exist in other programming languages

like PHP long before when React came into the picture.

So it's not something which is new to React

or new to the industry.

It's a very common thing.

We used to divide the chunks of the web

like headers and footers into separate file.

A common practice being done in the PHP

and other programming languages as well.

Same, we are going to learn how we do that in the React.

It will make your life a little bit easier

as a web developer.

Things are just at one place.

You make a change at one place.

It propagates to every single page.

It's pretty easy.

Life is easy with that.

So let's go ahead and let me first share the screen

and we'll go through with that.

So this is our application.

We have been working on this one.

So we will be now creating our third-ish app,

actually the third one itself.

So we'll be just going through with the third.

So let me just go ahead and open up the terminal

and we'll be going with the same NPM.

I know a lot of you want to go with the bun.

We don't have bun as of now.

I do have it on my system, but I won't be using them.

So we'll be saying just simply create at the rate of wheat.

Sorry, wheat at the rate latest.

So this gives us a wheat project

and we'll be naming our project as a zero three

because it's a third prop project

and we'll be calling it as tailwind

and we also are going to be using props,

tailwind props components.

Yeah, I think that's a good name.

We'll be using react for this.

We'll be going with JavaScript.

I know you want me to switch into TypeScript,

but no, I want this videos, the entire series to be

mass reachable, more and more people should be able

to learn it without the hindrance of additional TypeScript.

Yes, I do have a TypeScript series and playlist

on my channel, but this time we are going

just with a JavaScript probably at the end of the series,

I'll introduce you briefly with the TypeScript as well.

All right, so let's go into this one and it's zero three

and let's go ahead and run NPM install.

That's the basic of how you get started with this one.

Okay, by the time we get started,

the first thing that we are going to take down

is how we can actually install and configure tailwind CSS.

There is a process to it and we all need to learn that.

So first of all, let's go ahead and work

with tailwindcss.com.

This is the official website and every single time

I'll need to configure the tailwind CSS,

I always go with the docs.

You should also go with the docs.

This is how we actually learn and install it.

So in the docs, there is a section here in the installation.

So there is a tailwind CSS, CLI, post CSS.

We actually are going to be working with framework guides.

Yes, you can say React is a library,

but this is how it is being mentioned.

We are working with the VIT.

In case you are working with CRA, Create React app,

there is a guidance for that

and almost similar looking guidance.

We'll be going with the VIT.

We don't need to work with these first two steps

because we are already done with that.

We'll be going with the second step.

So go ahead and copy this.

These are the two commands that we need to work through.

So let's just go ahead and clean this.

Make sure you do an LS.

The most important thing is you should be in the same folder

where this package.json file is.

So make sure you take care of that.

I'm pretty sure you will.

Go ahead and paste the commands.

This command will install a couple of dev dependencies.

The dash D is for development dependencies.

They don't get shipped to the production itself.

Most interestingly, it creates a file

known as tailwindconfig.js.

This is your tailwind configuration

because tailwind is kind of a preprocessor, you can say,

because whatever the tailwind you write,

it actually generates that CSS on the go.

Not everything is being shipped.

Only the CSS that you need is generated.

And for that generation, you need to actually define it

that where should I find my content.

So the next step is actually go ahead and define

where my content is.

So in the VIT, the content is actually index.html

and you're some source folder.

So everything, components, every file, app.js, everything

will be inside the source.

So this line actually is a regex, regular expression,

to find all the files that's related to JavaScript

or TypeScript, JSX or TSX.

And also, we are also listing our index.html.

So go ahead and copy this entire content thing.

Go back up here and we want to replace it.

Make sure you take care of the additional comma at the end.

Usually, this is a common mistake

which a lot of programmers in the initial days

while learning the React, they do this.

Things are not done yet.

We also need to mention that, hey, in the index.css file,

we'll be using this as directives.

These directives are must to have

without these things don't work.

So go back inside the source.

This is where my index.css file is there.

Now, there are two options in front of you.

You can just keep everything there

and just paste it at the top,

or you can remove everything and just keep it up here.

But in case you have some additional CSS,

which usually you will not have,

you can go ahead and write them still.

It is not going to bother you,

but you still have all of this.

So that's it.

These are the two steps, three steps technically,

this command, the tailwind config and this thing.

And after that, it's all npm run dev.

So that is all what we have.

Now let's go ahead and try to run it first

so that we can see are we good or not, npm run dev.

And we just run it.

Hopefully it looks good.

And right now we have no idea is it working or not.

So what we can do is let's go into app.jsx

and minimize the things which we don't need.

Let's just remove everything

and go ahead and grab an h1,

which says wheat with tailwind.

Tailwind, there we go.

In the h1, we'll be using a class name, which is a keyword.

Since we are in the JavaScript world or JavaScript paradigm,

we cannot use the word class itself.

It's a reserved keyword for the JavaScript.

So we use class name.

Only handful of the thing in the HTML are changed.

Like there is also an HTML4,

HTML4, which is also changed.

In the other input field especially,

you'll find that.

So if there is an input field,

it's usually in the label actually.

So in the label, you'll see the HTML4.

So in the regular HTML, we just write it for,

but again, for is a reserved keyword.

So only a handful of places are there

where you have these kinds of things, otherwise it's not.

So let's just say we want to have it.

So we can have the text dash three XL suggestions, three XL.

By the way, these suggestions come from a plugin,

which I have installed in my VS code,

known as Tailwind IntelliSense.

Yep.

And we'll go with the BG green and we'll go with this one

and we'll add a padding of three maybe just for fun.

If I go back, all these things are here.

That means, say, everything is looking good.

By the way, there are some fun classes as well.

Like I can go around at MD, it looks good.

So this is our basic Tailwind configuration.

So step one is done.

Now we are almost a master of configuring the Tailwind

in our application.

That's the basic that we have.

Next step, let's go ahead and understand the things

about the props.

Do we need a prop?

Right now, we don't need any prop.

Now, one thing to understand here is that this is a function.

So if this is a function and this whole function is imported

in the main.js, x main.jsx, can I write more such function?

And in those function, can I return some JSX,

which we have already studied quite a lot

during our custom preparation of the React?

Can I go ahead and do this kind of a thing?

I don't know, let's try it.

I'll create a new folder.

You don't need to create a folder.

I'm just organizing the things better.

I'll just call this one as components.

And inside the components, let's create a new file

and call this one as a card.

And of course, since this will be returning some JSX,

I'll be calling it as obviously.jsx.

Now there's a shortcut that you can use

if you have installed the React or not React.

There are some IntelliSense plugins available as well.

So there is some, let me just show you.

So there is some plugin known as React Snippets.

Yeah, this is the one that I have.

So you can actually go ahead and install this.

This makes life a little bit easier.

Once you have installed this one,

what this will allow you to do is you can type things

like rfce, which will give you a React functional component.

You can go ahead and say react afce.

For example, I can go ahead and say rafce,

which gives me a React arrow function component.

I can go ahead and say rfce,

which gives me a React functional component.

So whichever the one you like,

you can go ahead and go with that.

Now, what I'll do inside this,

since I know there is a div here,

I'll go ahead and say that,

hey, what I want to know is,

let's just say I'll import an image here,

and I'll give you a source as well in a minute.

I'll also give you an h1.

In the h1, I'll just say this is going to have some class,

text-2xl, and we'll be having a bg-green.

This one, padding of three maybe, rounded.

Rounded, and this will say a card for photos.

I don't know.

And we'll also have some paragraph

with a lorem of 10 words.

I don't know, this is my card that we have.

Let's give it an image source as well.

I'll obviously pick from some of my images

that I donated to Pexels.

I think this one looks good.

I'll just right-click, copy image address,

go back and just paste it up there.

Now, I have this image, and this is looking good,

but this is a function.

There's nothing more to it.

And again, don't ever overestimate React.

It's just JavaScript.

Always think it from the JavaScript perspective.

Now we have this card.

Can I import this card in app.jsx or main.jsx even?

Yes, you can import it wherever you like.

Let's go ahead and say that I want to import a card,

and that card will come from ./component.

So I'm going into one directory, and then I have this card.

You don't need to write this like card.jsx.

It's auto-imported, so you can just avoid that.

How can we use it?

Just like we used app.

So it's going to be simply like card.

And a self-closing one, just like that.

That's it.

Now let's see if it works.

So we'll go up here, and we see that, OK, we have this.

This is a pretty big card, but there is nothing

which is stopping us.

It's looking pretty nice, and we have this one.

All right, so we have this card.

Now let's go back onto the Tailwind

and see if what they can offer us on the home page.

So on the home page also, they are offering us

some of this card.

And let's go ahead and copy this entirety

and see if we can actually somebody,

what happens if somebody gives us the components like this.

I'll just go ahead and replace my card with this card.

And obviously, you can see there are a lot of places

where things are going wrong and whatnot.

So let's just figure out.

So this is a common mistake or common error

that you will also be facing.

So let's not run away from them.

Instead, let's deal with them.

So first one, it says, hey, figure.

So what is this problem?

It says figure has no corresponding closing tag.

Another JSX requirement that if something is getting started,

it needs to close as well.

So notice here, this is where the figure is ending.

So what's the issue?

You can see that at some of the places,

this needs to close so that now it goes.

Now you can see some of the errors are gone just with that.

It's not always about, hey, figure was missing

or something like that.

But we can see things are going not that great in this case.

So for example, we have some of the errors here as well.

Why these errors are here?

It should be all supported like this.

Yes, the reason for them is let me go ahead and hit Command-Z

a couple of times.

We were supposed to enter this all here.

But if I go ahead and copy this, you

can see it's not properly being written

or it's not properly being organized.

So I need to actually grab it properly,

light click, and copy this.

But again, you will face some of the issues with this

because things are not great.

Things are not great at this moment.

So let's just paste this.

And probably this time they have come back

in a better situation.

But the issue is I have this a lot of errors.

So I'll first indent this because this is bothering me

a little bit.

So OK.

Now these things, these curly braces

and these closing brackets, they are good.

But the problem is that first of all,

our image is having no ending tag.

When the image is not having any ending tag,

you can actually provide a self-closing tag.

That will remove at least one of the error.

Now let's see what's the other error.

The other error is we have these quotes

inside it, which is obviously giving us

these commas and errors.

IntelliSense is helping me to figure this out.

And I'll have a lot of 10 words, maybe something like this.

This will work better.

And now we can see some of the errors are gone.

OK, some of the errors are gone.

But I'm pretty sure the image is not going to work.

Why so?

Because the source.

The source of the image, I don't have it.

Easiest way is to fix it.

Just stay calm and fix the stuff.

That's how the programming works.

Let's say copy image address, go back,

and we'll just replace this whole image with this.

OK.

Now that our designer has given us a better card

by designing that, this is looking good.

And since it's a tailwind, it should be optimized as well.

Decently optimized, not the best.

But OK.

Now I understand that, yes, this is a common thing, which

I can say that, hey, eventually I

can keep all of my components separate like this.

For example, header could be its own file.

Navigation menu could be in its own file.

Footer could be in its own file and can

be rendered on every single page.

And if I have to make any change,

I can go ahead and make a change in one place, and that's it.

It will serve at every single page.

Now this is exactly known as component building.

And there is a word for it.

We call it as dumb component.

Yeah, very rude.

But we call it as dumb component.

The reason being, this component doesn't take any parameter.

It's not modifiable.

It just works like this.

So how can we make it a little bit more

intelligent of a component?

Now a couple of ways how you can do it.

The first way is that, hey, I want to pass on some text.

For example, in our card, as we can see,

this is the name of a person and then the post, maybe

software engineer, staff engineer.

So these things, probably I want

to assign that, hey, maybe multiple cards should be there.

And I want to pass on this argument.

Right now, there is nothing which

is stopping me to actually display this card because I've

imported that.

I can display two times, three times, however I like.

But the information is exactly same.

So the first step actually is, whenever

you may want to make a card to accept any parameter,

is go up here and accept it.

The way how we accept it, actually,

with every single of these component,

there is a React magic that goes on onto it,

which is known as props.

Now what does prop is doing right now?

If I go ahead and hit a reload, there's nothing inside it.

It even broke my application.

So if I go ahead and check out the console, it says props

is not defined.

So if the prop is not defined, how the things

are going to go ahead and work?

Notice here, props is not defined everywhere.

And you are saying that React actually gives me

a prop like this?

Yes, React actually gives you a prop like this.

But why?

I cannot even access this.

You cannot access this because, first, you

have to actually accept that there is a props.

Once I go ahead and save it back,

you can see at least our application is loading,

if I go ahead and hit a reload.

But I can see all empty.

Yes, it should be empty.

And by the way, there is a class error.

Let me just fix that.

The class should be.

Let me just go ahead and do Command-D

to find all the instances of this

so that I can actually rename this.

So this would be class name.

Now it should be all happy.

Yeah, hopefully.

Let's hit a reload.

There we go.

At least that error is gone.

So we can see that now there is nothing inside this.

There is this square bracket, square bracket, prop prototype,

which is, again, a hidden scope.

We won't talk about this.

This is not a JavaScript class.

But I can see at least that, OK, so far we are correct

that, at least in the card, there

is something which is known as props.

And I can console log this.

OK, so far, good.

But how can I use this props?

We just saw that this is an object.

So if it is an object, we can add value to it.

All right, that's good.

So how can I add value to it?

Wherever you are calling this card,

go ahead and pass on values.

For example, I'll just call this one as a user name

and the value of user name is here is going to be Hitesh.

OK, now how can I utilize this?

Everything that you pass here in this format,

it's actually a key value thing, key and value.

So you can actually have this props here.

And now I can change the name here.

I can inject my JavaScript just like this.

And I can say props, since this was an object.

And I can go ahead and say dot username.

And this technically will render my name.

So I can see that this is Hitesh now.

Rest of all the things, they are gone

because they never passed me anything.

But this is an issue.

What happens if the user doesn't pass on this props?

Common case.

So in this case, what we can do is

we can actually just provide some default value

if the value doesn't exist, use this value.

One more thing, if I'm going to pass you

these values like prop dot user name, prop dot your post,

whatever that is, every time you have to say prop dot prop dot.

So one common thing that you're going to see

is just destructuring this object directly.

And whatever the field you need, you just simply

go ahead and say, hey, I want to extract username out of it,

or whatever you want.

In this case, you don't have to say props like this.

And everything still works.

Now, there is a good thing that if this value is not

available, then there are a couple of ways, actually,

you can go ahead and work on with this.

For example, I can go ahead and say username.

Or if username is not there, go ahead and print Hitesh.

So it works.

But there's a problem.

Here's a problem with this case.

This is not scalable.

The reason why, how many times your other fellow coders

are going to come and look into this much of the pieces

of the code and will say, hey, this

is where you have used the conditional.

This works.

A lot of people use that.

I've seen that in the production code even,

but not a good approach.

So technically, it is correct, but it's not

scalable solution.

So the better approach could be that, hey, you should actually

give some values here as well, like Hitesh.

Or maybe Hitesh.

Or I'll just use an H. Oops, Command-Z, a couple of times.

I'll just go ahead and say, instead of this, Hc.

Just like that.

Save this.

And now, if I go back, notice here it says Hc.

So the logic is still same.

So if you will give me the value, which you have given me

here, I'll use that value.

If you are not going to give me any value in any component

call, I'll just use this default value.

So this is a far more better approach,

because at the very start of the function,

you get all the usernames and what the values you

want to extract, and you can work on with that.

Similarly, we can just put a comma separated values.

I can just say post.

And I can just simply say equals.

And then instead of staff engineer,

we'll be using something else not assigned yet.

So we can see that right now it says still,

because we haven't used it.

So in here, I can just go ahead and enable my JavaScript.

And I can just go ahead and say, I don't have to say props.

I can just directly say post.

So there we go.

Now it says not assigned yet, not assigned yet.

So every single time you call any component or a piece of code,

you can just go ahead and provide, hey,

I want to make it more reusable.

This time, it was attached.

This time, it's going to be JSON.

And then I want to also provide a post, which

is an optional parameter, by the way.

There's no comma here.

Post, and the post value is going to be stuff, engineer.

So just like that.

And we can see that this changes a lot of stuff.

So instead of making a dumb component,

we can go ahead and make it much more smarter.

Similarly, you can go ahead and provide a URL of the image

here as well.

And instead of getting this whole big thing,

you can just go ahead and make it as an optional,

that, hey, this is optional.

And you can inject your JavaScript.

Just same.

Curly braces, add a string, and that is it.

That's your assignment, by the way.

Really easy one.

Go ahead and make this component a little bit better

so that you can make it more reusable.

But one more thing, will I always

be passing strings like that?

Can't I just pass something more, something like, hey,

in this first card, I want to provide an array.

So I'll just go ahead and say my error.

And that is going to be an array like this.

And that's going to be 1, 2, 3, 4.

We can see, obviously, that's an error.

That's an error.

The reason for this error is, if you

have studied my JSX chapter in this entire series,

this whole thing will be taken up as it is

and will be placed in the JSX line by line parsing of it.

So this is obviously not a great idea.

Yes, you can pass arrays.

You can pass on objects.

But there is a way of doing that.

And that is where you have to inject your JavaScript in here.

And that's how you pass it.

And while the better way, even, actually, to do this,

if you really want to pass on something like this,

the best way is to create an object first,

create a variable first.

And that would be a better name.

So for example, you go ahead and pass on my object

just like this.

And in this, we will have a couple of values.

Oh, that's too much of the values.

I don't know how we came up with that address.

I don't even live in this.

I'll just live in the pink city, just for fun, just for fun.

And I'll just say new array.

And some values into that.

So it's always a better idea if you

want to pass on any values or like this.

Go ahead and pass on this variable.

That's usually a better approach.

So I can just go ahead and say new array.

And oops, my bad.

My bad in syntax.

There we go.

Now I can go ahead and say new array.

This is a far more better approach

than just writing the thing.

So if you want to pass on anything, your arrays,

objects, strings, anything else, maybe you

have called some values from the database.

You want to pass it on as it is.

You can go ahead and do that.

Maybe you want to pass on each of these elements.

You can spread these values and can pass on.

But it's up to you that how you are accepting these values here

as well.

That is the most important thing.

Here we are expecting that they will be an object, having

a string into that, so optional string.

If you expect that the values will be spreaded array,

go ahead and handle and deal it with that way.

That is the most important thing.

And that is why you need props.

So in this video, now we have learned.

So let me just summarize this.

First of all, we went through with the tailwind

configuration, absolute basic, nothing to be worried about.

We just went through with step-by-step instruction

from the documentation.

Then we studied a little bit about why props are necessary.

By the way, this whole thing, this user name,

it is, this is the prop.

That is it.

It's a short form for properties.

And the reason why we call this one here as a props, that

is, again, a short form for properties,

we saw in the console log, there is an object.

That object is called as property.

And that's why, hence, the short name of props.

So coming back, so we studied about how

we can make dumb components.

Component is like shortening the code

and make it more modularized so that you

can have individual control on each component, like cards.

Eventually, we can loop through the cards,

generate hundreds of cards, a navigation bar, footers,

and all of this so that we can keep them separate.

This is how the production code is being written.

On top of that, we studied a little bit

how we can actually grab the entire props

or we can de-structure them at the very top.

And if we are interested in de-structuring,

then it's much better.

We also studied the concept that if you don't pass on

any default value, what are the consequences?

We also studied there is a non-scalable approach

that could be have taken, but you

can improve your code with the scalable approach

of providing the default value up here itself.

That is always a great idea.

This is all.

This is all that you want to study

in this particular video about props.

Now you have a great idea about what are the states,

why they are being used.

You also have the idea about modularizing your code

using the props.

We created a card component.

Go ahead and create another component,

like header or footer or something, and try this out.

This is all.

This is all that we have for this particular video.

If you're enjoying this video, it gives me an immense boost

in confidence.

If you leave a comment, drop down a comment.

Any thank note, hurt, emoji, whatever that is.

I'm expecting at least 100 comments on this video

just to give me a model boost.

That's it.

Let's go ahead and catch up in the next video.

Hey, dear everyone.

Hithai Sheer back again with another video,

and welcome to our React series.

So we are on to our React journey going pretty good.

And now is the time that we learned the things on the go

while building the applications.

And of course, we're going to start with absolute basics.

And let me break this here.

A lot of time when I bring this kind of application

at the start of the things, people just say, hey, Tish,

that's too basic.

That's too basic.

We really don't want to build this one.

Show us something cool.

Build an Amazon clone or a Spotify clone

or a blog application.

But the reality is that if you directly jump

into these applications, especially at this level,

because somebody who is learning React

has just gone through with JavaScript,

trying their hands on some frontend libraries,

this is where you can make a lot of mistakes.

So please don't do that.

Building these kinds of smaller application

will get confidence in you, as well as you'll

understand a lot of workflow as we go through.

So let me show you what we are about to build.

And then I'll walk you through that how we are going

to actually build it.

We'll be using a lot of tailwind for this one.

So this is how we are going to get started.

So this is absolute basic.

This is how we are going to get started.

At the bottom, we will have a few buttons.

Of course, we will not focus too much

on the tailwind side of it,

but still these are going to button.

As you click on these buttons,

they will actually change the color.

So it will turn it into red, green and blue.

And then if you hit the refresh,

it again comes back to the olive.

So this is all that we are going to build together.

We will be using again, classic wheat for this.

We'll be using tailwind for this

and just the basic state management.

This will give you a thorough confidence

of how states are being used

and how you can actually utilize them.

What are the impacts of using the state?

And eventually, gradually,

we are going to level up the difficulties here.

I hope you are all excited.

We're going to get started absolutely from scratch.

So let's go up there.

So this is my application.

Let's go back onto this one.

So this is how we are going to get started.

We'll be creating our very fourth app

that we have right now.

So let me go ahead and fire this up.

There we go.

We need to close this again, fire this up.

And this will be our fourth app.

So I'll be just saying NPM create wheat.

And we'll be going with the latest.

I think that's the best approach that we can have.

And then it requires a name.

This will be our fourth app technically.

So we'll be saying 04 and this will be a BG changer.

Feel free to name it something else

if this doesn't suits to you.

Works great with me.

So I'll be just using this one.

And package name is exactly same for me.

I'll be using React for this one.

I wish they could have asked me for a library of CSS as well,

but sadly they don't do.

Again, we'll be going with classic JavaScript

so that we can have more people using this library.

So let's go on to 04 and there we go.

Now the first thing that I have to do is NPM install

in case you are already on bun,

you can go ahead and use bun install as well.

No problem there.

It's usually a comparatively fast install that we have,

but by the time it does all of this,

let's go back here and work on the Tailwind CSS.

Again, classic go back to docs.

It might look repetitive to you,

but this reputation is necessary

so that you feel absolutely comfortable

in doing all these things.

I want this to be a muscle memory in use.

So let's go back and let's go ahead and clean this up

and paste these two things

so that we can have background changer

and we get a new file, which file?

Yep, a configuration file for Tailwind,

exactly this one, a Tailwind config.

In this, we have to change some configuration.

So we are using wheat.

So that's why we'll mention

that our index file is actually outside.

I'll just replace this

and rest of the files will be inside the source.

So this is exactly for that.

After that, we have to get the decorators, directives.

There are a lot of names for that.

Different language,

depends on what language you are coming up for.

And I'll be just changing that into index.css,

just replace everything.

We don't need much of the CSS, just save this.

And there we go, just save this.

And now technically you should be able to run npm run dev,

which hopefully we will be.

So we'll be saying npm run dev

and things should be up and running.

Before we go there, let's go into app.jsx

and actually just clean the things.

So we'll be saying, hey, let's clean this.

Let's clean this from here to here.

We'll be just putting up a simple H1

and what we're going to write.

A bgchanger app with wheat, looks good.

And we'll be having a simple class name.

And that says we need a bg-green suggestions, please.

I'll be using 500 variant of it.

And we'll be saying text of three Excel.

So we'll be saying three Excel.

Why is it not suggesting me?

Yeah, it is suggesting me.

Okay, let's see if the application is working or not.

Let's go up here.

And there we go.

Not really the nicest, coolest of the all,

but it is what it is.

It is decently good that we have.

Okay, going back.

Now how we're going to deal with this one, nothing too much.

Let me just give you a brief overview

of how we are going to take down this application.

Main.js, we are not going to be taking it down

because our app is being served inside it.

So let's just close this totally.

I'll close everything.

Okay, then we'll go into app.jsx.

This is the file which is serving entirety of my content.

So in fact, all of my content is going to go inside this.

For this, I need to go ahead

and create a simple full page width.

Inside that at the bottom, we'll be creating few buttons.

It's not really compulsory that you keep the buttons

at the bottom, top, left, right.

It's totally up to you,

but we need a full page of the screen itself.

So let's go ahead and do this.

What we're going to do is remove all of this.

The easiest way of doing this is to have a simple dev.

We'll be putting some content inside this,

but first let me add a few classes.

These classes comes from the Tailwind itself.

First of all, I want the width to be full.

So that's the shortcut for this one.

Edge screen actually gives you a viewport height screen.

If you hover your mouse onto this one,

it says give me height of 100% viewport.

Again, this is not a series about Tailwind,

but still want to give you a brief overview

of how things are actually going ahead

and we'll do it.

We'll also go ahead and add a duration of this

so that whenever there's a change,

it actually does it slowly.

Now, next thing, we're going to just keep it as it is.

This is how the basic looks like.

Now, once we have this,

I'll just not use these suggestions here.

We'll be using a simple Flexbox class here

so that we can have all these buttons and everything.

So let's go ahead and have a dev.

Inside this dev, let's have a class name.

First of all, we want it to be fixed

so that it's always fixed from the bottom.

Fixed, there we go.

And we'll be using a flex.

We'll be using a flex wrap, flex dash wrap, there we go.

And again, justify center

and we will be fixing it up from bottom

so we can use a bottom of how much you want to have it.

12, maybe 13, totally depends on you, no big deal.

We'll be also using one of the other property

which gives you inset as well.

And by the way, you can provide an inset

on X-axis and Y-axis.

Again, not a class for CSS, but we'll be going with that.

You can just copy and paste these ones.

So this is what we have as a basic.

And now once we have this,

then we can just go ahead and simply have the suggestions.

We can actually go ahead and take this one.

This gives us nice suggestions for this.

There we go.

Now we'll not be using everything.

We need flex.

We definitely need a flex wrap, justify center.

We'll be using some gap and some of the shadows as well.

So let me just go ahead and give you the CSS directly

again from my notes.

We'll be not using a widthful and all of that.

Again, it doesn't really matter

what CSS and anything you're using.

I'll be just using a simple button and let's just say test.

Again, if this UI doesn't make sense,

only UI that should make sense for you

is the width should be full, the height should be screen

and after that, just add button wherever you like.

Let's go back and see how does it looks like.

So we can see at the bottom, we have a button.

In fact, what we can do temporarily,

we can use a background color of let's just say a black

so that you can properly see this.

This is what the screen is right now.

Again, we don't have a full width as of now

because our application is loading only in this much.

We'll see and figure out how we can actually manipulate that.

Not a big deal, we can just change out the things.

So we can see, this is what we have, test is one button.

But if we add more buttons,

we can just go ahead and do this

and these are the buttons that we have.

We'll be manipulating these button

with a little bit more of these classes.

So just don't worry,

we'll be getting through them as well.

All right, let me just remove this, okay.

The first thing that we have is, oops,

in the button is the class name.

You can add more properties to this one,

but I do have some button classes as well in my notes.

So I'll be just directly giving it to you.

All right, you can just go ahead

and use them from the GitHub notes.

We are using an outline none,

we are giving some padding on the X axis,

padding on Y axis, rounded fold, text is white

and the shadow is large.

So this makes the button looks like this.

Obviously we don't have any text colors and all of that.

So we'll be providing them as well.

No worries, this is right now, text is white.

By the way, this was just to show you

that yeah, something BG was there.

Okay, now we have a button like this,

but our text is missing.

So let's go ahead and add a text.

What kind of text do you want to have?

I'll be saying text as black.

And there we go, a decent button that we have.

Oops, text white, text black.

No, we want to text black.

That will make sense.

Okay, looking good already.

Now, similarly, we can have more buttons

and we can call this one as test two, two, there we go.

Okay, so the functionality is there.

Now coming up onto how does this actually work?

So we have already learned about the functionality.

I hope you remember that the most important part

of this application is the functionality.

In the functionality, we have already seen

that if you want to render any changes in the UI,

those changes cannot be directly propagated.

We need to use some kind of state management for this.

And in the React, we have a hook for that known as use state.

And this exact project is actually based on that.

So we'll be using that one.

Let me just walk you through with that.

It's super, super easy.

For using the state, just like we have a count here,

let's go ahead and remove the count.

We want to have some kind of a state management

for the color.

So I'll be using a const

and let's just say we'll be using a color

and that actually uses set color

and we use some user state

and what color you want to have.

In this one, I'll be just writing olive as base one.

Always remember, this first part in the array

is your variable.

The second part is a method which is responsible

for changing this variable.

No other thing cannot change this variable.

This is the guy which is responsible

for changing this color.

Whatever you put inside the use states,

that's the default value.

Now, how can I use this default value?

You can go up here and can actually add this as a property.

For example, you can add your own styling,

not the styling from the tailwind,

but actually a style property just like this.

And by the way, I need to go outside of this string.

So there we go.

We have this style property.

Inside this, I can go ahead and say

I want a background color

and what should be the background color value?

Just like this, you can go ahead and say,

I want to have this olive color into this one

and that color will obviously get propagated up here.

So all the way up here.

Why is it not going all the way left and right?

I'll need to debug a little bit.

We'll do that at the end of it.

No big deal there.

We can just have some manipulation there.

Okay, apart from this, now since this is olive,

how can I actually replace this string with some variable?

It's pretty simple.

You're already in the double curly braces.

All you have to do is simply go ahead and say color.

Now I'm using now a state variable

and that's why we get an olive here.

But if I go ahead and change it to red,

since the default value of the state is red,

I get the red, but I'm happy with the olive

as a default starting color.

Okay, that part is good.

But now I need to work on some method

by which I can change this.

And again, remember, change can only be done

when you change this color as a variable

and this variable can only be manipulated

and changed by this set color.

Cool, you get this.

Okay, so what can I do is on this button,

if I know my JavaScript, I can just go ahead

and add an event which is onClick.

Now this onClick is pretty nice.

It can take a reference of a variable.

Maybe you are defining a method here,

which is something like this, function and change color,

something like this, and there we go.

Let's just assume this change the color.

You can go ahead and pass on the reference

of this change color.

Now, once you pass on this reference,

this method alone cannot work.

It needs some parameter to be passed on.

For example, if you give it something like this,

let's just say a parameter of color,

whatever the color string you're passing me,

inside in here, I can go ahead and use the set color,

which is a method to change this color.

This is my ideal way.

But again, the problem is the change color

needs to pass this color as a variable.

Now, right now, I cannot just go ahead and do like this

because it will immediately execute it.

And if you remember your JavaScript,

onClick doesn't change the value

which is returned from a function.

It needs a function itself.

And this is not a React, this is JavaScript in itself.

So there is no way you can do this

because this will execute it

and whatever the return value will go in onClick.

OnClick doesn't accept that.

You need to pass on a function into this.

That's the only way how you do it.

So another way of handling this situation,

whenever you have to pass on some parameter,

is just go like this, use a callback,

and then you can actually use a change color

because now onClick satisfies the condition that,

hey, I'm passing you a callback, which is also a method.

And on the way, I'm actually changing this color.

So this will be going as a red.

So if I go ahead and test this out,

this actually changes that.

So that's really nice that I can go ahead

and work on with this one.

By the way, I'll change this to red,

this one to blue or green, whatever you like.

Okay, but the problem is

I need to actually do exactly same thing.

So I can just go ahead and copy this

and paste it up here.

And there we go.

Instead of this, let's go ahead and pass on this green.

So technically, this actually solves my purpose

that, hey, this is red, this is green,

and I can go ahead and change these values.

I can add more buttons.

But there could be a better way of doing this.

This is no problem at all.

You can also have a different take on this one.

In this entire series, I'll walk you through

with a different perspective of the code

so that you feel better where you'll see

other people's code.

I'll just comment this out.

We don't want this one.

What you can do is if I know that this change color

is a method I need to call and pass on a value,

I can actually do this with the set color as well.

Can I do this directly?

Yes, actually you can.

You can just directly set the color into this color

because this is responsible for that.

So instead of using the change color,

I can just go ahead and use the set color

and pass on any parameter to this.

Whatever you pass on parameter into this,

whether that's numbers, string, whatever,

that value is the new updated value in this variable.

And that variable automatically is monitored by React

to propagate the changes.

That's cool.

So I don't need to use this extra function that I've defined.

I can just go ahead and use the set color of a method

and this still works.

So it saves me some time

by not declaring extra functions here.

A good approach, good approach.

So now I can say red, green, it still works.

There is still a bug in the application,

which actually prevents me from going all the way up here.

So really don't want that.

So let me quickly go ahead and fix this

that how it is not going.

It's really minor CSS issue, not much bothered about it.

All right, so found it, it was pretty easy.

There was already a CSS, which was overwriting our CSS.

It was in the app.css index.

We have already cleared in the app.css.

So just go ahead and remove everything.

If you don't need anything at all,

and this actually flushes out everything that we don't need.

So really basic fix.

And now we have a red button, we have a green button,

it changes the things.

So this is really nice that how we are actually

able to do this in couple of ways.

And again, saying that this is correct,

or this is much more better, it's just an opinion.

And I respect your opinion as well,

in case you want to go with further,

like, hey, no, this is my preference or something like that.

Now, one last thing that we are going to go ahead

and work on with this one is just let,

let's add some of the colors onto this one,

because I think that's also pretty good.

So let's just go ahead and add a style to this one.

And we'll be saying background color.

And the background color that we'll be using

is going to be red.

Yeah, we can actually hard code this.

And we can see this looks good, text could be changed.

But again, not really bothered too much.

And we'll be hard coding the value here as well

on the green.

Again, it's totally your choice, just visual aesthetic.

The whole idea is to understand different perspective

of how the things are being changed.

So your role is really simple,

just add a few more colors, maybe a red, green, blue,

orange, red, pink, purple, violet, and put up a straight bar.

All you have to do is copy paste the buttons.

And again, remember, this is really important part

of the 90, 10 or 80, 10 teaching,

where initially I'll be giving you small assignments.

If you will think that, hey, this is too easy,

I won't be doing that,

you will be lagging behind eventually

for the bigger assignments.

So do this assignment, tag me on Twitter, Instagram,

LinkedIn, wherever you like.

If you don't like that, it's okay too,

but at least do the assignment.

This will help you in improving your skills as well.

So that is it, that is it, what we'll be doing.

We'll be starting with absolute basic.

This is the first project that we have done.

Let's take down another project in the next video.

All right, it's been a while.

Yes, finally, I'm back on this channel as well.

Hey there, everyone, Hitesh here,

back again with another video.

And in this video, we will continue our series

on React.js, I'll walk you through,

and we'll be building one project.

Although at a first glance,

this project might look absolute basic,

there is nothing too much,

but I'll walk you through with some scenarios,

some of the experiences that I had,

and together we'll be crafting this project

like an expert will do.

You will understand the good practices,

bad practices of the React,

and how even a smaller thing can change

the entire overview of how the project should be built up.

So welcome on board,

and I expect just a minimum of 100 comments

under this video so that I can get some moral boost.

But hey, you are interested in this series,

and I should focus more of my attention here.

All right, so first let me share a simple my screen,

and this is the project that we'll be building up.

And you might be thinking,

hey Hitesh, this is absolutely a simple beginner project,

but trust me, there can be a lot of intricacies

in this project, and together we can learn

some of the good practices

and how to approach this kind of project,

what is the mental model required.

So first, let's go through.

So this project obviously is a simple password generator

of a project, and in these kinds of password generator

as a project, we can see we have some default length

in our slider, we do have a slider here of course.

And based on the slider, it generates a random password

for me, which includes the upper and the lowercase letters.

Now as I moved my, and first of all, if I refresh this,

it actually gives me one initial password.

So I need to learn that how can I actually run some code,

which as soon as this component loads

or this webpage loads up, it executes my code.

That's the step one.

When I touch any component and change its value,

it actually reruns my code, the code that is responsible

for generating the password and gets me that code.

On top of that, when I have this number being clicked,

it again reruns my code with all the previous values

and the new values and generates me a password for that.

If I include it again as a character,

it actually generates all of this,

again runs the code and gives me the password.

On top of that, I can copy this,

and it gives me that, hey, this was being copied.

Now here comes some of the UX and UI elements.

Now for copying anything,

you don't need to highlight anything.

That is the step one.

But still, we gave the user a feel that yes,

this entire thing was copied.

This is kind of a user experience,

and we need to learn about some of the hooks in React

to give the user this experience.

You can just click on the button and say,

hey, this was copied.

You might have seen in a lot of website,

it just says copied at a tick mark.

That could also have been done, but we went extra step,

and we simply said when you click on copy,

and we have copied it already,

but on another line of code,

we were able to highlight all of this piece that,

hey, this piece was selected,

automatically it came to your mind that,

hey, I was able to do this.

Now, the way how this project is going to be taken down,

of course, we'll be using Tailwind CSS in that.

We are not worried about the Tailwind.

We will not talk about the CSS much.

But if there would be a button here,

which says generate password,

then approach of taking down this project

would be completely, completely different.

Because when I have a manual button,

which says generate a password,

that means I am controlling the event,

and the event will be controlled and executed

only when I'm ready and only at one time.

So in that case,

my function is not going to be keep on running

and keep on running.

Here, the exact same function is keep on running,

keep on running on just every single event.

So there is a potential use case

that we can optimize the things.

And that's exactly what we're going to learn,

how we can optimize when we have a similar kind of method

executing again, again, with just minor changes.

This is known as memoization concept,

in which we can keep most of the execution

of the methods in the memory,

which saves us and ultimately our React app performs well.

So this is quite a classy project

that we'll be taking down.

But if this would be a project where some UX guy says,

hey, just add a button here,

that would be better user experience,

I have to actually rewrite the entire project

with a different approach of optimizing it.

If he says, no, we don't need a button,

just remove the button and generate the password like this,

then there would be a completely different approach.

So when next time in your group meeting

or your agile meeting something,

somebody says, hey, this is a UX design,

get this straight that it is going to take some time.

All right, so this is the basic that we have.

Let's go ahead and generate a new project

and install CSS and whatnot onto this one.

This is our technically fifth project.

So we'll be just going forward with that.

So let me just generate that.

Pretty simple, we are going to say npm create wheat

and we'll be going with the latest

and we'll be saying this is our zero five project.

So we'll be naming it as a zero five

and we'll be calling it as password generator.

Of course, React would love to,

but not TypeScript this time.

We'll be going with classic JavaScript.

By the way, if you haven't checked out my TypeScript series,

it's pretty awesome.

Well-renowned, well-accepted by Twitter

and free code camp and whatnot.

So check it out, it's pretty nice.

But in this case, we'll go with the JavaScript.

Let's go into a zero five.

Actually, what I can do here is a quick, neat little trick.

I can just right click and open this

as an integrated terminal so that by default,

I'm always into this folder.

And we can say npm install

and this will install all the packages,

hopefully pretty quickly.

And we can just say npm run dev.

Okay, till it's, okay, not taking much time.

Okay, npm run dev, that's how we get there.

And let's see how our project looks like default.

Pretty classic.

And we'll also go on to Tailwind CSS to get our Tailwind.

We won't be discussing Tailwind too much,

but at least we need Tailwind framework guides, wheat.

I always go with the documentation

and I highly, highly recommend to you also do the same

because there might be some steps

who might have changed eventually.

We don't want to get into that one.

So simply go ahead and, oh, we need to install it, my bad.

Stop this one, paste it up here

and this should generate a new file for us,

which will be Tailwind config.

That's exactly what we need.

And let's go back.

We need this exact set of instruction to be copied

and let's go into this one.

Let's copy and paste.

So now my content is aware

that I'll be writing my Tailwind CSS

in either the index file or in the source.

All the JSTS might include some of the TypeScript.

Tailwind, not TypeScript.

And we'll be copying this one.

All right, so this needs to go into CSS, your core CSS.

So open up this.

We'll be opening up main index.css,

remove everything else and paste it up here.

That's all what we need.

We won't be needing anything inside the app CSS as well.

We can actually go ahead

and probably can remove this one as well.

This will give us a necessary paint later on.

So we'll just remove this one.

All right, now technically our CSS should be all okay.

We should be able to run it.

Let's go ahead and run the command.

First NPM run dev.

All right, so it says nothing as of now,

but let's go ahead and try out

if we can have some of the CSS

and everything up and running.

Let's go into index.html.

And what I'll do is I'll add some of the class here as well.

I'll say BG dash gray.

Gray, okay, suggestion.

Okay, this one gray.

Let's go with 800, yep.

Okay, so at least our CSS is up and running.

So no problem there.

At least one of the task is all done

that we have this whole thing.

The next thing what we're going to do is

let's go into app.jsx and take down this project

by first removing all the unnecessary stuff.

It's necessary, but we'll remove that.

Let's have a basic h1.

Let's have a basic h1 that says setup ready.

I don't like to skip any steps

so that you can also follow along,

pause me in the meantime

and can just set up your steps as well.

I don't like to bring in any code from the GitHub.

I initially, at least that it feels like a magic

is happening or it's not like that.

So we'll go this time BG dash red,

suggestions red 400 to just check it out.

Yep, it's looking good.

Things are all done and all good.

Now, first of all, how we're going to take down this project.

Now we will be needing a couple of states

so that we can manipulate things

based on whatever the values are getting changed.

And it's pretty obvious to check out from the previous ones.

It actually refreshed all of the pages,

but we still have a picture and a photo

that hey, this is what we're about to build.

So the first thing that we're going to need is

we need a length so that we can monitor

how much the input box is being scratched.

And you want 10 characters, 15 characters,

how much you need.

We need something as is numbers allowed.

We also need is special characters allowed.

And we need a state of password as well.

Because if you notice in the input field,

the password was being displayed.

So we need a state for that also to maintain.

So a couple of states, we need that.

So let's go ahead and work on with this.

So first of all, let's go ahead and have a simple length.

So we'll just go ahead and say that hey, we need a length.

This will help us to monitor the length.

By default, we won't be going 20, that's too much.

We'll be going just with the eight.

Feel free to change it, no problem at all.

This is my password length.

Now I'll be needing is number allowed

or is character allowed.

That will be just a Boolean value to figure out

whether are allowed or by default they are set or not.

So we're going to say const

and we're going to say number allowed, allowed.

And suggestions, yep, numbers allowed.

By default, no, not true, I'll be getting false.

By default, they are not allowed.

Similarly, we'll be having our symbols allowed.

So we'll be calling as characters, special characters.

It's totally up to you how you want to rename that.

Set character allowed, we'll be getting a false.

And these three are my states

based on which things will be changing.

But once the password is generated,

I need an input box where I'll be setting all this one on.

So I'll call this one as password,

the actual password that we'll be generating.

So I'll be saying password and that will be set password.

Initially, that will be empty.

All right, so now that I have all these,

I'm not worried about error case and all of that.

This is all good, what we have right now.

Let's take care about how we are actually returning

the value because there is a lot of CSS,

I'll be copying and pasting them.

This is not a CSS or a Tailwind class,

so I'll be directly just putting things up

and we'll be just directly enjoying the CSS

that I have here.

Okay, so let's remove all of this.

We'll be having a simple div.

In this div, I have some of the classes

that I'll be directly grabbing and pasting from my notes.

Again, reminding you that we are not here

about the Tailwind.

This is just a boilerplate for us.

You can have your password generator

with completely different look, completely different theme.

We don't really care.

After this, we will be having a simple H1

which says password generator,

but I do have my classes for this one as well

to make it look almost similar to what we have.

So we'll be just pasting this one.

Now, once we have this password generator as here,

we'll be having a div section,

which will be responsible for holding our input box

as well as the button, the copy button that we have.

So let's have first this div up here.

And obviously we'll be having some of the classes here.

Let me grab the classes again.

These are just the flex boxes classes that we have.

Nothing too much fancy.

So flex, shadow and all of that.

So that button can be on the left side,

input box can be on the left side,

button could be on the right side.

That's all what we have.

Now what's interesting here is

the first thing is going to be an input box.

So let's go ahead and grab an input.

It can be of type text, so no problem there.

Let me just move it on to the next line.

Now what next comes up is very interesting.

We should really discuss that.

First of all, value.

The default value is going to be password.

As of now, it's a default empty state.

So we'll be keeping at that as it is, no problem.

It will be having some of the classes as well.

Nothing too much.

We do have just a couple of ones.

Outline is going to be none.

No, not that much.

Let me just grab the other ones as well from the notes.

All right, that's it.

Again, classes are not to be discussed.

They are very basic CSS kind of stuff.

Let's also place a placeholder which says password.

Great.

This will be a read-only field

so that nobody can actually come into it

and keep on writing.

We'll be keeping it as read-only.

We'll be filling it from the programmatical aspect only

and we'll be keeping it that much added.

Now one more thing I'll be passing it on here

which will be used later on.

This is known as ref.

And this reference is going to be

some kind of a password reference.

That will be variable.

We will be discussing about this later on.

But just to keep an idea

that what's coming up in the future,

yes, we'll be talking about reference,

but not right now.

It is there in the process as well.

Okay, after this, we'll be having a simple button.

So let's go ahead and have a button.

This button is going to just say copy.

Now, of course, not just copy.

We do have CSS for this one as well.

So let's just go have some class name as well.

And the class names.

Copy that and paste it up there.

Okay, so this is the button that we have.

So you can see that yes,

we are first generating all of this.

Don't you worry, eventually,

as we move on to the complex project,

I'll be giving you these notes file

so that you can directly copy and paste them

and you don't have to worry painfully sit here,

watch me just writing the CSS.

We are here to enjoy React,

not these button making designs and stuff.

All right, so this is the first part of my dev.

The second part or the second dev that I have

also have some of the classes as well.

So that to forget there and we'll be having class name.

All right, let's add more of these classes in here as well.

So first of all, let's go ahead and copy and paste this.

Inside this also, we do have some more devs.

Okay, what can I do?

We have to go through with this at least once here.

Let's add the class names and then we'll be having,

this is how we designed it.

What can I say?

And then once I'm inside this,

then comes the important part which we need to discuss,

which is the input field.

So this input field is going to be of type range

because that's the first one we actually worked on with.

So this range is very interesting.

We can actually decide how much the range can go

in all of these things.

We can decide the name and IDs and whatnot.

Let me just move them on to the next line

so that we can have a discussion.

Okay, so first of all, we have type.

We can define the min and the maximum into this one.

So minimum, let's just say we need six characters

of the password to be generated.

And the max that user can actually drag and drop,

it's totally up to you.

You want 20 characters, you want 100 characters,

that's totally liberty on your own.

This requires a value property as well.

The value is going to be governed by the length itself

so that anytime I can go ahead

and grab the length of the value itself.

Then obviously, we'll be having some class here as well.

What can I say, classes are there.

We'll be having cursor pointer.

On top of this, we'll be having an on change

because as soon as something change into this one,

we need to fire up an event.

The event is going to be simple,

set length to the new values.

So set length is a method which governs

or which regulates how you can enter data into the length.

So we are using that based on an event.

And whatever the event.target.value is,

we are actually setting that value into the length.

Pretty clear explanation.

Once we have this input, then after that,

we just have a simple label, which actually says,

hey, this is length or something like that.

So we'll be having a label.

And this one is for HTML for, for label, I guess, length.

And we'll be putting up length.

Not only that, we'll be actually parsing

a value of length as well,

so that user know that how much the value exactly is.

So if I go ahead, save this up here,

notice here so that the length actually is here

and it changes that.

So this thing is actually going into my state as well.

That's the one thing which we are pretty interested about.

Once we have this one,

this entire thing as the labels and stuff,

we'll be having one more of the div.

Actually, we are actually copy pasting this div now.

Copy and paste this div again.

This time we don't have any input field like this.

Okay, so this one looks good.

And what we need is just an input box

which is going to have a check box.

So I can actually remove all of this.

We don't need a label for this one or do we need?

Well, check, we will be needing a label, yeah.

Okay, so this one is input of type check box.

And again, we don't need to worry about names and whatnot.

Just give me a second, I'll just fix this quickly.

All right.

Okay, now this is the input box which is a check box.

So what is the default value first of all?

So the default checked is a parameter

and we can just simply govern it by our state

which is number allowed.

Now on this, we can put up IDs and on whatnot.

But most important part is

what happens when something changes.

So we need to actually have this on change.

So we'll be having on change.

This is a simple event that is triggering.

And this is how it works.

And we'll be firing up a callback onto this one.

And then inside the callback, we'll be saying that,

hey, I am going to take care of this one.

This input box is going to be governing the number itself,

the check box for the number.

So I'll be using set number allowed through this.

And here's the most important part.

I'll be using a callback here.

So in each of these state, you actually receive a callback.

You can directly manipulate the value.

But if you use a callback in here,

that's a guarantee that you can actually use

the previous value and all the changes properly propagate.

We actually discussed that briefly

in the last video as well.

So we'll be using the same thing.

We'll be using a callback here

so that whatever the previous value is,

we can call this one as prev,

or you can call this value.

Whatever you like to call this,

this is just a placeholder.

So previous value, whatever that is, true or false,

we want to just reverse it.

So we'll be just reversing it.

Now we could have directly just send here true or false,

but that doesn't serve our purpose.

We want to pick up the previous value that is being there.

And then we want to do this.

Now these changes could be really quickly.

A user can just keep on clicking there, click, click, click,

and sometimes React might not react that fast.

And it might think that, hey, that was the previous value.

So in order to make sure that React actually React,

we are using a callback here.

So this is really good practice here

and kind of a high level code that we have.

We probably don't need name and all these IDs,

but it doesn't really harm anything.

So we'll be just skipping them.

We'll be having a label.

This one is for numbers.

So we'll be just saying number.

And this one will be a label for numbers.

Okay, so we have numbers just like that.

If I can write that better.

Numbers, so there we go.

Now you got this.

You understand the proper use case and everything for this.

Rest of these elements are just one.

I'll be just copying and pasting this

so that we don't have to talk about the things

again and again.

Exactly same thing.

Probably we have got some.

We need to actually write this manually

because it might give us some of the issues.

This one is character for input.

And let's hit refresh.

Okay, so looks like we need to hit a command Z

couple of times.

Probably this is having an issue with us.

So let's just minimize this.

Minimize this and actually just copy and paste this one

so that copying and pasting sometimes gives you error.

And okay, now it's back.

Now it's back.

But we have this numbers here.

So we need to actually write the code ourself.

Okay, checkbox.

Your default value is going to be character allowed.

On change, I'll be changing the set character allowed.

And I'll be taking the previous value,

reversing it, name ID, that's okay.

HTML, this one is for character.

Car input.

And this one is for character.

Now this should be okay.

Okay, at least our UI part is all done

and we are happy with this one.

Hopefully, whatever happy we could be.

Okay, so the UI part is all done.

Now let's go ahead and see that how we can work

on the logic part of this one.

The logic part is actually fairly straightforward.

There shouldn't be too much worried about this.

Let's first assume that there is a button

and on this click of a button,

we will be generating a password.

All right, so in that case,

I'll be simply writing something like this,

const generate password.

This is my generate password method

and I'll be generating a password.

And in here, I'll write the logic for it.

We'll discuss about the logic part as well.

But what I really want to bring your attention in here

is this same thing is actually being done

again and again and again.

And if some kind of, if similar kind of a situation

is there in your project as well,

then go ahead and do study this one hook

which is used, known as use callback react.

This is one great hook which you can utilize.

And notice here, use callback is a react hook

that lets you cache a function definition

between re-renders.

That's exactly what we are doing.

We are re-rendering, but not only re-rendering,

the majority portion of our function is exactly same.

Yes, there are some values which are getting changed,

true, false and all of that,

but majority of the function is exactly that.

So it uses under the hood some techniques

known as memoization.

That's a great technique.

Almost all of the programmers knows about it.

If you're not aware of it,

then please go ahead, learn about it.

It's a fun technique, especially helpful in DSA,

data structures and algorithm.

So we'll be using this one.

Using this is exactly like this.

You use a use callback just like this and that's it.

You passed on your things as a callback just like that.

So pretty easy to work on with this one.

So let's go ahead and apart from use state,

we'll be using use callback just like that.

Now previously I was about to create a function

which will generate password.

This looks like a regular function.

How can I convert this regular function

into a use callback hook?

You don't have to do anything there.

And what I want to do is just simply use callback.

And this use callback works just like this.

This is your regular use callback.

Now inside this, use a simple callback, that is it.

That's it.

All the rest of memoization and optimization

is done by the React itself.

Now you might be wondering that why we are actually

holding the reference into a variable of this method.

Yes, great question.

Because only and only one reason,

as soon as my page renders,

I want something to generate my password.

So as soon as the component loads or the page loads,

I want another hook to execute this method.

If I don't have a reference of this,

how will I pass it and say that, hey, run this method?

So that's exactly what we are doing here.

All right, so let's go ahead and first take care of this one.

So in here, what we're going to do is first,

let's use a pass for password short,

and we'll be taking it as an empty string.

Later on, we will use this exact variable

and push it into this password state,

so that state updates.

All right, let's also go ahead and say this is my string.

And what does the string has?

Nice suggestion there,

but we'll be removing some of the elements into it.

Our string is composed of only the numbers,

alphabets technically, all uppercase and lowercase,

that's our string.

Now conditionally, we have to append this string

whether to include numbers or not.

So let's just do a quick check on this one.

So we'll be checking if, whatever the state,

if numbers allowed is true,

then what we're going to do is we can just use a one-liner,

we can just append this with all the numbers.

Similarly, if characters are allowed,

we can just append our string with all the characters

that you think I want to include in my password.

Very simple, based on if and else case,

our string is getting updated.

The string is consisting of all the uppercase

and lowercase letters, that's the default.

If somebody check marks the number allowed,

we will be adding numbers to the string, appending it.

If the characters are allowed,

then we will be appending these characters,

totally depends on us.

Now the next thing is we have to loop through

all of this string.

Now assume that this all numbers

and everything are inserted here.

We just need a loop and this loop will be running

as many times as the character length is being set.

Based on this, based on those random numbers,

I'll be picking up the characters from the string

and will be inserting into the pass,

this password that I've added.

So pretty simple.

Let's go ahead and use a simple for loop for that.

Thank you so much, but I'll be writing that again

because I think that will help a lot of us

to understand what's going on in here.

First of all, we just simply had a for loop

which starts with i equals zero.

We will not start with zero because I think

I'll start with one as a character.

The length will be exactly length.

This length is actually coming up from our state,

this length, so that's good, that's nice.

And we are just increasing this.

Now once I'm into this,

I want to generate a random character.

So I'll be just saying that, hey, I want to generate it.

So math dot random generates this random string

and the string that I want to generate

is going to be string dot length.

The character I want to generate

is based on how much my string length is,

string character length.

Once I have this, obviously I want to add one to it

because it might generate a random number

between zero and to the number.

I don't want zero, so I'll just shift it to one.

So that is how we are working in.

But this actually sometimes generate the number

which is not in the round digits.

So we want a natural number.

We'll be wrapping this up and we'll be saying math dot floor.

This is a classic technique of generating numbers

between a range A, range X and Y.

When you'll be building examples like dice rollers

or something like that or gambling app maybe,

then in all those cases, you will be using this quite a lot.

Let's hold the reference.

So we'll be saying const char.

This is just a random number.

So far we haven't done anything.

We have just generated a random number

and that number we are storing at a char variable.

Simply you can call this one as index as well.

No problem there.

Now we'll be taking this pass

and we will be appending that plus equals.

And in that string, we have a method known as character at

which gives me, I can find a character at a position.

So this char here is acting as an index.

So index, we are actually having that pretty good.

Now we can actually pick, let's just say it comes to five.

So we can start with zero and we can get a five here.

So pretty simple, pretty easy.

Now, once we are done with this,

once we are out of the loop,

make sure you are out of the loop.

Then we can just use a method known as set password.

And this is governing the password.

So I can pass my password to this one.

And this will be changing this state here.

And now we have a fresh password here.

That's great.

That's so far fantastic.

And now we are working everything.

But there is one more thing attached to this one.

If you study this use callback hook a little bit,

you'll notice that this use callback has two parts of it.

First is this callback, which we have studied.

And this is a dependency array.

These dependencies should not change too much,

but based on if you want to rerun the methods or something,

you can actually go ahead and just have this

so that all the optimization are done in this one.

So we'll be providing some of the dependencies array

that based on this, make sure all the dependencies are there.

So obviously if the length is changed,

make sure the optimization is done with that.

Numbers allowed, characters allowed.

So based on all of this, almost kind of a similar,

you can memoize that and work on with that.

We don't really get into the nitty-gritties

of this dependency array.

We'll talk about again in this in a use effect hook.

But again, remember, this is really simple.

As long as these dependencies don't change too often,

they can change once or twice,

but they're always exactly same.

So once you say number is there or number is not there,

there are only two cases.

If it keeps on changing the states like that crazily,

then obviously your code will absolutely burst.

I'll show you that case as well.

But the whole idea is,

as long as they don't change too frequently,

that is the keyword here.

Okay, notice here, there are a couple of that.

Shipping will receive the same props

and can skip re-rendering and all of that.

So this is all what is happening.

Okay, so now that our method is all done,

that okay, things are great.

Now what we want to do?

Based on some of the factors, I want this method to run.

Okay, what are those factors?

First of all, if somebody go ahead and touch this length,

I want to rerun the method.

As soon as the page loads, I want to run this method.

As soon as somebody touch this number,

I want it to rerun.

As soon as somebody clicks on the characters,

I want it to rerun.

In these cases, a hook that we can use here

and React is all about hooks.

Another hook that we have is useEffect.

This is one of the most used hooks

in the entire React project.

And this allows you to actually run a piece of code

based on variety of scenarios,

like as soon as the component is loading,

there's offloading as well,

but right now we'll not go into that much.

But as soon as you want something to happen,

as soon as component is loading or mounting,

then this useEffect hook is being used.

Using the useEffect hook is pretty simple.

You just simply go ahead and say useEffect.

We have imported that.

That is it.

That is your useEffect.

Now inside the useEffect, you get two thing again,

a callback.

So we get a callback like this.

And the second part is the dependency array.

This time, we don't want things.

This is opposite of use callback.

In use callback, we say, hey,

as long as things don't change too frequently,

we actually use that.

But in the useEffect, you want to run the method

intentionally as soon as something changes.

So all the methods that you want to give,

you should give that in the dependency array,

that hey, if anything changes in these particular things,

we would like to rerun our entire password generator.

So what are those things?

If the length changes, yes, please rerun this.

If the numbers allowed changes, yes, I want to run this.

If character allowed changes, yes, I want to run this.

And as well as if there is any change

in password generator code or something,

you can rerun that.

The good thing is, I don't have to say a single thing

as soon as the page loads automatically 100%

the useEffect runs.

Even if you pass nothing inside that,

at least one time, all the code that you're mentioning

in the useEffect hook, it runs.

That's why it is used.

So we'll say password generator.

Where is our password generator?

Generate password.

And we'll just execute that.

So that is how you actually run this.

Now let's go back.

As soon as I run this, notice here on the reload,

it actually generates the password for me.

As soon as I change this and keep on changing,

it runs the code.

If I run this, it still reruns the code.

And best part is this project is optimized.

But the statement here, which says,

as long as these dependencies don't change,

what happens in that case?

I know that there is one dependency

which is going to change like crazy.

For example, this password is changing.

This is changing too frequently,

and there is no way of your storing these state in this,

because every time it's random.

So if you somehow give this password here,

because this is changing quite a lot,

notice here, if you give this password,

it will just get all crazy.

And this is not a way how it should be done.

So you should not be actually using this one

as a password in parameter.

That would not be a great thing.

So that's why we actually don't use this password here.

And that's why we omitted that.

It is not going to help you

to actually generate all these things.

So yeah, not a good idea to add a password here,

because that's always changing.

And that's why we actually didn't gave it there.

Okay, almost our job is done,

but there is one more thing.

This button is not yet working.

This button is not working.

So how we can make this button working?

Pretty simple, just go to your button.

If I can find that, give me a second.

Yes, I'll find it.

And yeah, here we go.

Found it, found it.

So on this, I want to have a simple on click event.

And on this on click,

I'll just say copy password to clipboard.

Clipboard, there we go.

Now in order to just copy the password,

there is not too much of the code that I have to write.

A simple copy password to clipboard, just like that we have.

And in order to copy the password,

all I have to do is window.navigator.clipboard.write text

and password.

So it's going to just grab the clipboard and write text

and we'll be grabbing the password just like that.

So as you can see,

there is nothing too much going on with this one,

but hey, what is this write text

and how you can actually go ahead and find this?

Yeah, that's an interesting question.

So let me answer this one first.

So technically what we are doing in this one is

there is no access that we are taking

from the UI or this browser itself.

So if you go into the browser, if I refresh,

okay, what happened there?

And there should be some errors.

Let me just quickly check that.

Right click, inspect and console.

Okay, copy password to clipboard is not defined.

I defined it.

Copy password to clipboard.

Probably I'm making a mistake here.

Let's go back and paste it, save it.

Yeah, there we go.

Hopefully everything is resolved and yep.

Now we can maybe minor mistake, okay.

So as I was saying, notice here in this particular method,

what we're doing is we are not taking access

to any of this element.

We know that our final password

is actually in our state password.

So why don't just grab it from there?

That makes more sense.

So we're using a window object

in which we always have a navigator

and this is your clipboard.

Through the browser, you are actually accessing

what's there in your clipboard.

This is exactly how you do copy and paste

in all of the application.

It has a couple of methods.

If you go ahead and just check out this clipboard,

it has a lot of methods to write and read and whatnot.

There is even a read method as well.

A read text, read, read only, there's a lot of methods.

I don't want to go into too much detail of that.

There's a read method.

Yeah, there's a read, you can read the text as well.

But what I want to do is I want to use the write text

and inside when I use write text,

I'm basically writing in your clipboard

so that whenever you paste that, the text is available.

So if I can just go ahead and use this

and if I copy this and I change this again,

let's just say a really long string,

it has numbers as well and I copy this

and I come onto this new tab and I paste this,

hey, this copies.

So that means my job is done.

That means my job is done.

But you will also find that majority of the time,

some of the UI, UX guys comes to you that,

hey, all that was copied, but user needs feedback.

The feedback's totally dependent on you.

Maybe once the copy is done,

you might want to change the text.

You might want to store the button text

into some state itself and want to manipulate that

based on whether the copy text was copied.

And after some time you want to re-change it,

there's a lot of ways how it is done.

What we have decided in this case

is we are going to actually select this whole thing

so that user gets, okay, this was copied.

Now it's not easy to do this.

That's why we have chosen this.

In order to do so, we actually need somehow a reference

of this input field.

And that's why I told you earlier

that we'll be using something known as a reference.

So for this, there is another hook

that we are going to learn in this one, which is use ref.

This use ref is a crazy powerful hook

if you want to grab anything from the windows.

Not only just this,

I'll talk probably at the end of the series

but how crazy this hook can be.

And we'll go into this one.

The usage is pretty easy.

There are multiple users, by the way.

You can do a lot of things.

You can even find out how many times your page was loaded,

reloaded, there's a lot of things that can be done.

So what we're going to do is in this one,

we'll be just passing on a simple password ref.

You can name this anything and just use it like this.

Now in this, you can pass on any variable, null zero one.

In this case, we are not much worried about this

because we have nothing to do

with what is the value inside here.

We just need a password reference here.

Why so?

Simply to just go into my HTML, which is generating

and provide a ref tag known as password reference.

Now, once I actually provide a ref here

with the password reference,

now in anywhere in my application,

I can grab a reference of this input field.

There are multiple input fields.

I need to define which one I'm grabbing

or which one I'm actually talking.

I need to find the context of it.

But now that I have this one,

I can actually use this in my code.

As soon as user has done the copied,

let's do some of the fun stuff with him.

So we'll just take this password reference

and I can just go ahead and find out that,

hey, what do we want to select?

So I can just go ahead and say,

hey, I want to have a current

and not the focus in this case.

But if I have the access to this reference,

I can, by the way, directly go ahead and say,

I want to select this.

There we go, select.

This is going to do majority of work.

If I copy this, notice here it selects.

But it is recommended that sometimes

you might not have the reference properly.

Hydration might have not done.

And there are a couple of cases.

So if you have the current value there,

then optionally go ahead and select this.

This is just a safety net.

If you put this, great.

If you don't put it, no worries there at all.

Now, not only this, actually does our job.

Our job is actually finished.

But if you want to learn more about it,

then you can just learn more about

how to select the ranges and all of that.

You can, by the way, work on something like this.

I have a password reference

and I can have a set selection range as well

from zero to all the values.

Or maybe you want to have a selection range of zero to four.

For some reasons, I don't know why.

But maybe that's your use case.

So you copy that and only four of the values

will be selected.

No, not the set selection range.

Zero to 99 and all of that.

So it should be all done.

Okay, so somehow it works like that.

We are not interested in those selection,

set selection range as of now.

We want to select everything.

So we'll be just going back

and we'll be working on with this one.

So this actually gets the job done.

Majority of our work that we are working on.

And now we can actually have any characters

and stuff like that.

I think 100 is too much.

But we can just copy this.

It not only copies, but gives the user a feedback.

And the only guy which helped us to set this feedback

is actually this password reference here.

The use ref hook.

So in this just one basic project which looked so much easy,

we actually talked about the use callback.

We talked about use effect.

We talked about use ref.

And probably we can talk about a couple of more

of these elements as well.

So yes, things can be really, really complex

even when they look very basic.

It's all about the mindset and the approach

that you are taking to finalize or finish up a project.

Within just what 40 minute ish,

we were able to finish this entire project.

But we learned so much.

But your job doesn't finish just right here.

You need to go on your own and study a little bit more

about use ref hook, use a state hook, use effect hook,

callback hook, there are too many use.

But at least you got an introduction to this.

So spend next two to three days

in exploring more about these one.

And definitely I'll be coming back in the next video

with the next project

and we'll be having so much more discussion.

If you haven't hit that subscribe on my channel,

go ahead, hit that subscribe.

And I'll be bringing more content to this.

Show some love in the comment section as well.

That's right now, really, really, I'm in the need of that.

That's it for this one.

Let's catch up in the next video.

It pretty much amazes me that how much we are going to learn

within just one project that we're going to finish up

in this video.

This is going to be a longer one.

Hey there, everyone.

My name is Ateesh and let's get started

and continue our React journey.

We are into the world of React journey.

We are trying to master React concepts,

one at a time in each of the project.

This helps us in building our portfolio projects

so that this shows a constant learning journey that we have.

We have ample amount of projects

so that we can showcase them

as well as can learn them in one go.

When you build a kind of a big project,

of course there is a learning there as well.

But I believe that as a beginner getting started,

building multiple smaller projects,

which focuses on each concept one at a time

is rather a better approach.

So this is exactly what we'll be doing in this video.

So let me first walk you through

what we're going to build

and this will help you to understand a customized hook.

You will be able to build your own hooks

just like we were able to use a state, use effect,

use callback and whatnot.

We will be able to design our own custom hooks.

This will give you so much of confidence

that hey hooks are not that much complex.

I can design my own hooks for that.

As a matter of fact,

we will learn how we can make the API request

and get some data from the APIs

and can utilize this in our application.

And we will also see that how a component is being designed,

a reusable component.

So far we haven't much focused on reusability

of the component,

which is one of the core principle

and core strength of the React itself.

So we'll be focusing on that part as well.

So without a further ado,

let me go ahead and give you an overview.

Now that you have a list of what we are about to see,

let's see that what we are going to learn in this project.

So this is the project that we'll be building.

Of course, it's on tailwind.

So we will not be again much focused

on how this corner radius works on.

That's not our case.

The goal is to understand the concept

of the component reusability.

The first thing that you can see here is

that this component uses this top input component,

which is exactly same.

Only the data is getting changed,

like from gets changed to to.

The value here might change here as well.

Then the currency type, this is exactly same.

The dropdown list, this is exactly same here.

And this is obviously same here as well.

So no much big deal.

If we design this component, it makes sense

so that we can reutilize it later on as well.

We won't be making any component

for the button or the swap.

This is exactly same.

These are just used to change the to and fro values.

So very simple basic swapping of the variables that we have.

What's interesting about it is if you choose,

like how much is the value for the 10 USD,

and you convert it, it actually gets you the value.

And the value that it is bringing up

is actually coming up from a URL itself.

And that is very, very interesting of a URL.

Let me show you what URL we are actually using.

So this is a URL.

By the way, you can get this URL

from the project description.

So all the projects are available on my GitHub account.

You can just get into that repository, that file,

which I'll actually give you, and can grab this URL.

The good thing about this URL

is the end portion of this URL.

At the end of it, you can write something like usd.json.

And once you write usd.json,

it gives you a key of usd

and appropriate conversion of each values,

like I am from India,

so INR conversion of each of this is actually available.

But not only that, I can make the conversion for,

for example, INR.

So all the currencies you can pass on in the URL itself,

and it gives you like INR conversion,

so how much one INR will be in each of these currency,

that conversion automatically happens.

Not a big deal.

It actually converts a simple API,

which does the multiplication.

But this is a little bit complex of an API,

then rather hitting the basic APIs.

Like for example, there is this API.github,

where you get the data.

This data never changes.

You get the data, arrange this data into some cards,

some photos, or something like that,

and you get happy with that.

For example, we have another one,

which is very famous project,

which is random user, random user me.

This is also exactly almost same.

What you see on the data here,

this is exactly the data.

Only the data changes.

The format never changes.

No such thing.

So this is exactly kind of a same API that we are handling.

Here we are handling a tiny bit more than the previous one,

because the INR changes here.

We need to make a request here.

We have to modify the URL,

and then they get the appropriate things.

And then the key value pairs,

we need to actually get all the keys,

so that we can show these keys all up here.

So there's a little bit more involved in this one.

So that will be taken care by the hooks itself.

Very fun project.

Initially you thought it would be very basic,

but now you are realizing,

oh, there's a lot of work that we need to do.

And of course,

Tailwind is going to be our friend for this one.

So let's go ahead and get started with this one.

So here's my source code.

I'll just kill this one.

So, okay, that's still running.

I'll destroy this.

And we have the fifth project being done.

Now let's go ahead and take down

the sixth project of this series.

Again, same NPM create VIT,

and we'll be using the latest.

Just go for that.

We'll be going with the very basics.

So this is zero six, I guess.

And this will be currency.

All lowercase would be good.

Converter.

And we'll be, of course, React and JavaScript.

And I love how easy it is

to actually go ahead and work on with this one.

Let's go ahead and open this up into integrated terminal.

That's much more easier for me.

NPM install.

And we need to go ahead and install the Tailwind as well.

So we can just come up here,

the same guide of the Tailwind.

I always come up here because anyways I have to do it.

There is no point of doing it behind the scene

and I don't really prefer that.

So I'll just copy this, go back up here,

wait for a few seconds till it loads all the things.

Please don't mind me sipping some lemon water.

Missing my tea today.

But there's so much of these long videos

that I need to grab something to drink.

Okay, so the Tailwind is here

and hopefully this will give us the Tailwind file.

There we go.

Tailwind config.

And just like the previous one,

we'll be just copying and pasting the content part

since we are in the VIT content part is done.

Next up is we need these directives.

Okay, and this needs to go into source.

Our main index.css.

Remove everything, paste it up here.

There we go.

We also don't need anything from the app.css.

So we'll be just selecting and removing all of this.

We don't need it.

Close all of this, close this.

And save this and close this.

Now, technically, in theory, we should have the Tailwind.

But again, the only way to verify

is via writing some of the custom CSS.

Let's go ahead and remove this and simply have an H1.

And we'll say test for Tailwind.

All right, let's go up here and we'll be saying class name.

BG dash red dash 200 should be good enough.

And let's go back.

We haven't run this.

NPM run dev.

And let's see.

Okay, this is working.

Let's go ahead and work on with this one.

This is not really that much of a complex data

or a complex project.

We'll be working with this.

So let's go ahead and work with this.

Let's close this one.

And the first thing that we'll be doing is

let's just cut out all of this.

We'll cut this one out, remove this one.

Instead of this, we'll be having a basic dev.

Let's have an H1.

Now, inside this, we'll be having some of the classes.

So again, the classes will come up from our code files

that I already have when we build the project.

So we'll not be talking about the code files at all.

The only thing that we are going to worry about

after this is actually one more thing.

I want to add a style into this one.

Now, after the style, we would love to have

a simple background image just like this.

But instead of the background image going like React logo

or something, we will be actually getting

the background image from.

You can grab it from asset as well,

but you can directly inject the URL.

In my case, I'll be just directly pasting a URL.

And let's go ahead and remove this.

From where you can grab the URLs of the images,

I'll show you resources as well.

One of the resources that I prefer to use a lot is Pexels.

Yes, I do contribute myself on Pexels quite a lot.

These are all photos that I click.

Feel free to choose any photo out of these,

which makes sense to you.

And we'll be searching for a photo

that actually represents money or something like that.

Okay, which one?

This one looks good.

I'll just copy the image address and paste it up here.

And let's see how does that look.

In the VIT project, there we go.

So decent, not the perfect.

We can definitely change the backgrounds

and colors and whatnot,

but I think this is good enough for us as of now.

We'll be having a couple of more CSS and all these stuffs,

but first let's talk about the functionality part.

This is more than enough for us as of now.

Okay, first of all, we need an input box.

So the designing of input box is not really something

which should bother us.

This is how the input box looks like,

but how to design the components which are reusable,

what are the things we need to take care?

That is what we are going to discuss.

So inside the source,

just right-click and create a new folder.

We are going to call this one as component or components,

however you like.

And the only component that we have as of now is input box.

So let's create a new file, input box.jsx, of course,

and rfce, rafce, yeah, that actually makes sense.

Or I'll go for the rfce.

Okay, rfce, there we go.

Finally, we have an input box and we are exporting this.

Now with the input box,

how many other things you want to accept?

That's totally up to you.

I want to accept this label.

I will be accepting an amount as well

because I'll be using it from different perspective.

In some of them, user will give the amount.

In some of them, I'll be adjusting the amount.

So obviously I need an amount.

What happens when the amount change?

So I need a method which will be responsible

for changing the amount and that method will be state.

So how we'll be doing that,

we'll actually keep this method as it is.

But in our app.jsx, there we'll be designing

some of these classes itself

so that we can have all these basic amounts

and how the amounts are being set,

currency, converter and all of that.

But in order to have that amount,

we need to have something which can set the amount as well.

So that's my number one goal.

What happens when the currency is changed?

So this is something we need to take care of that.

What happens when the currency change?

So there needs to be something

which is keeping a track of all these states.

At least there should be a method.

All the currency options,

I will obviously be taking this one.

So this is a input box itself.

It doesn't do anything on its own.

The whole idea and the whole job

is just take the values and display them.

That is what we have.

And there might be cases.

In this case, this is an input box

or the input value which is disabled.

So which currency, like you will be obviously reusing this.

So which one you can enter the data

and which one you want the component to be disabled.

So you have to check for that one is amount enabled

or disabled into that one, currency disabled.

Like here you can see the currency is disabled in this one.

And of course, if any additional classes

that you want to give me.

So there's a lot of data

that we are getting through this one.

And you don't know this data entirely at the first go.

Eventually, as you want to make your components

more reusable, you add this one.

So let's go ahead and work on with this one.

So first of all, we have this label

that we'll be taking as a prop into this one.

We obviously needs to take amount.

These are obvious one.

Now next, what we need to take is on amount change.

What happens when the amount change?

So something state needs to be there.

Some method needs to be there, which keeps a track of that.

And what happens on the on currency change?

So this on currency change is what happens

when the user changed the currency.

How to utilize them?

I'll walk you through with that as well.

But these are some of the basics.

Then obviously you need a currency option.

Currency options.

And we'll be setting up some of the default values

because it will be an array.

We expect that how we get the array,

that is not our concern as of now.

I want to get all these currency as in the format of array

so that I can just loop through them

and provide the values there.

Now, obviously by default, we need to show some currency.

So that also needs to be taken care of that.

So we'll be saying we need a selected currency.

And by default, we'll be going with the USD.

And no suggestion there.

Okay, this is my by default currency.

And do you want this amount to be enabled or disabled?

That somebody needs to tell to us.

So we'll be saying amount disabled.

And by default, we'll be getting a false value

because we don't want to disable it by default.

If the user asks us, we will disable that.

And we'll be also checking the currency disabled.

So if the currency is enabled, disabled,

if the user is allowed to change the currency or not,

it's totally up to you.

You want to have it, have it.

If you don't want to have it, that's okay as well.

So we'll be saying currency disabled.

By default, that's false.

We'll also take some of the class name as well.

This is a very common pattern

that you'll be taking a lot of class name.

Of course, you will be designing our component,

but you will also give the user a chance

that hey, I'll be allowing you

so that you can actually get all of these values.

All right, so now let's go ahead

and design this input box itself.

First of all, we'll be having some of the classes as well.

Classes I'll be copying and pasting from here itself.

Now we won't be putting the classes just like the strings

because we'll be taking some of the classes as the props.

So we need to keep a safe area

where I can inject the classes which are injected

by somebody who's using our component.

So we'll be just removing this one here.

We'll be injecting our JavaScript here.

Now in the JavaScript, of course, we can use the backticks.

Now the advantage of this backtick is

since I've taken the prop, I can just use my fillers here

and can add the class name here.

Now this is something which user is passing,

but since this is just a string,

I can just go ahead and copy my CSS classes that we have.

So there we go, really basic, absolute, nice.

Okay, let's go ahead and remove this.

So this is our basic card that it was designed.

Let's go ahead and design this class.

This is also going to have some of the class names.

Let me grab the class name.

It's simple with, we want to be half of it.

So we'll be saying one by two, very basic.

Then we'll be having some of the labels and input.

So let's first grab a label and label HTML for,

we will be injecting some of the JavaScript here in a minute.

Just wait for it right now.

We don't want to have it

or let's just remove the entire HTML for a minute.

Then we'll talk about the usability

and how we can actually make it more accessible.

Okay, we have some classes here as well.

So let's go ahead and add a class name.

I'll be adding the class name from my notes, copy and paste.

Classes, we won't be talking even a tiny bit.

We'll be always getting it like this.

And this will be adding as a label.

Remember, we don't want to hard code it

because user will be using it this label

for multiple purpose, maybe from, maybe to.

Okay, this part is all good.

Now, once we have this label inside this,

we want to have an input field.

So we'll be having an input field just like this.

And let me just break it onto the next line.

There we go.

Now this input field will have a type of number

because that's what we want.

Number, there we go.

Now what else do you want to have into this one?

There are multiple fields that you want to have.

First of all, let's take down the obvious ones,

which is the class names.

And again, the class names goes as it is,

whatever we have in notes.

Don't really care about it.

Don't want to even talk about it.

Then we have the type.

Then obviously let's grab a placeholder value.

You can grab the placeholder value as whatever you like.

We'll be just saying it as amount.

Depends if you want to take this input as well

from the user, you can take it.

Right now, if I don't enter anything into this one,

it is, this one is zero.

This one actually doesn't do anything.

So it's always zero, totally up to you.

If you want to put this placeholder,

any value or something like that.

Okay, next up is, is the field disabled or not?

That depends on amount disabled or not,

whatever the value you have given by using this one.

The value, the value is going to be amount.

Whoever is using it is going to give me.

But the most important thing is

if you just keep it as it is,

then obviously we'll be having some amount,

but there is nothing which is helping you

to change these values.

So what you have to do is this method on amount change

will be responsible for changing the amount.

So obviously we have to listen for an event

which is on change, on change.

And we have to use this on amount change,

but we cannot just use it like this.

Otherwise we are never using the method.

We have no idea about the functionality or anything of that.

So just cut this out.

Here we want to use a callback.

Let's go with this.

And obviously we'll be tracking an event.

So let's just call this one as E for an event.

And then we have to first make sure

that we have the presence of this on amount change.

This could actually make or break your application.

So for the standard practices,

such values are being checked first.

So we'll be checking on amount change.

If this on amount change exists,

then we go ahead and say that use this on amount change

and get an E.target.value.

But again, there is a problem into this one.

Whenever you grab the values like this,

you will be grabbing a string and we don't want a string.

We want actually a number out of it.

So before we actually grab it,

we'll cut this out and we'll be casting this one

as a number and then E.target.value.

These are just additional safety checks.

Nothing to be worried too much.

We are just trying to make sure that our code

is as standard as possible.

And these are only, only safety check.

If you directly come up here and say E

and then simply say on amount change E.target.value,

maybe your application might work

and eventually you might have to debug,

but this is a good standard practice that we have.

All right, so this is all good.

And now we have to go ahead and work on with this one.

So this is a part of only having this part,

the currency, the numbers and everything.

We have to work on this currency type as well.

So this is the second portion where we'll be working on.

So let's just go below this div.

We need to have another div.

This one obviously will have first the class names.

And let me just grab all the classes.

So this is the right portion that we are working on.

Notice here, the currency type and USD.

So this is why we have flex and all of that.

So the next part is all about it.

Let me go up here.

First of all, a simple paragraph that says currency type.

So nothing extraordinary currency type.

It always is currency type.

So we are, we are done with that.

Now comes up the interesting part is how we are going

to take care of this USD and all these input values.

Now this is a select field.

So let's go ahead and grab a first of all,

a select field.

There we go.

Now in this select field, first and foremost,

let me just grab on to the next lines.

And here also you go away.

Okay.

First of all, class name,

because there's a styling involved into this one.

Not worried about styling, even in case,

I highly recommend you.

In fact, you change the styling.

At least you will be contributing something in the project.

Your hands will work onto the keyboard

and that's always a good thing.

Now what should be the value?

The value should be based on the select currency

that we have, a selected currency.

Notice here, we have the selected currency.

As of now, we are taking this as USD by default,

but users should be able to allow it and change this one,

but we are happy with this selected currency as of now.

What happens with the on change?

There we go.

Now again, you might have noticed the exact same pattern

that we are following.

We will be following this one as well.

Here we chose an event.

We said that whether this on currency change method

is available to us or not, and based on that will work.

So very repeatable pattern.

So yes, we'll be seeing very standardized code

in this entire series.

So we have this event.

After that, we go ahead and check.

Do we have this on currency change?

If we have this, then we go ahead

and use the second part of it,

which is on currency change,

and we simply go ahead and grab the e.target.value.

Here, we don't need any number casting or anything

because these are just strings, all right.

Okay, next up, is this field enabled or disabled?

That maybe you want to design an application

which is disabled, having these field disabled,

but in our case, disabled currency disabled is mostly false,

but maybe you don't want user to change this type.

It's always USD to INR or INR to USD.

Maybe that's the case.

So we are just taking care of that.

Okay, select field alone doesn't work.

So we need to have these options getting inside this one.

For these options,

we obviously have to loop through the values.

So we'll be using our JavaScript here,

and inside this, we'll be saying,

hey, all the currency options that you are providing to us,

remember currency options is an array in case you forget.

This is the currency option, which is an array.

I want to loop through this value.

Looping is pretty simple.

I just have to say .map, and there we go.

This is my map.

Inside the map, I'll get a callback.

So let's go ahead and grab a callback.

No problem at all.

And in each of this, you will get a currency.

So let's just call this one as currency.

Now with each of the currency, what we'll be doing,

instead of using curly braces,

I'll be using parenthesis

so that I don't have to return anything.

I'll just go inside this,

and we'll say that I'll get an option.

So option and thank you.

The key is going to be currency

because we know that our API actually gives us these values.

And each of these values are actually in itself unique.

So we don't have to worry about it.

All the options that we get into the array,

we will be crafting and designing that in such a way

that each of the currency is unique in itself.

The value is going to be currency,

and this one is also going to be currency, too many currency,

but this is how exactly options and everything works.

Remember, a lot of people did the mistake

when I was teaching it earlier.

A lot of people just use the curly braces here,

so make sure you don't do the mistake.

All right.

So this seems like a very nice approach

that we have taken of designing an input.

One more feature I would like to discuss,

not a feature but a standard practice

that is used quite a lot,

is once you have designed these components,

you actually have these index file into these components,

not necessarily, but usually you have.

All you do in these files is actually you go ahead

and import these input boxes like this,

and just go ahead and export like this input box.

The advantage of this is I don't have to actually go

individually in each of the component.

All I have to do is import the components, this index file,

and I can bring in any component in this one.

Maybe later on when we'll be designing,

of course we'll be designing.

There might be five, 10, 15 components in each one of them.

Having all of them listed in index is actually a better thing.

So that's what we'll be using.

Nothing too much to be worried,

but yeah, these kinds of things do exist.

All right.

Moving on, let's take care of the URL part.

So we have this URL we'll be working on with this one,

but the way how we are going to take care of this one

is via designing our own custom hook.

You can of course do all of this into your use effect hook,

into the app.js as well,

but there's so much of the things that we actually require

from this that I don't want to do all of this mess

into app.js, rather I prefer to do all of this

into a separate customized hook.

By using that hook, I will return the data,

whatever is required.

All right, so let's go ahead, right click,

create a folder, and we'll be calling this one as hooks.

It's totally up to you how and what you want

to name this one.

The only kind of a standard practice is to use,

use before hooks, too many use.

Use, use effect, use callback, whatever that is.

In this case, we will be using use currency info.

That is our hook, use currency info.js.

And now what we have is we'll be, we just write simple,

this hook is actually nothing more than a function.

So use your classic react, use your classic JavaScript,

fetch the API, get the data, and return the value.

That is it, that is literally your hook.

So we'll be needing some of the stuff.

Obviously we'll be needing use effect

and we'll be needing use a state, of course.

All right, now let's just go ahead and simply say,

hey, we'll be having a function.

That function will be use currency info.

Nice, all of this is provided to me,

but I'll be writing that anyways.

So use currency info is my hook.

And after that, we'll be saying export default,

use currency info.

That is all good.

Now, how we are going to go ahead and work on with this.

First of all, whatever the data is I'm getting retrieving

from the API call, I need to store that.

So for that, I'll be saying that let's call this one

as data, set data, and by default, this is not an array.

That is a wrong suggestion here.

If you notice, this is an object.

Notice here, this whole thing is an object

and I want to store this object up here.

So we'll be working on with that.

Okay, now how can I go ahead and fire this up?

As soon as somebody uses this hook,

so as soon as this hook will mount.

So again, this hook is nothing more than just a function,

just like your app.js is a component it mounts,

this hook will also mount.

So I can go ahead and use a use effect here.

And we use a use effect snippets right now

on which you are dependent.

You are dependent on a couple of values,

but oh, one more thing.

Whenever whoever is using this use currency info,

he needs to provide me the currency.

Otherwise, how will I know that in what currency

you are looking for data?

Because my API looks for INR as well,

it looks for the USD as well.

So you need to provide me at least one data

that based on this, I want to call the API.

So once you have this currency,

I'll first remove all of this part.

It's not, it's a boilerplate code.

And I'll also remove this third,

which is boilerplate code.

Now anytime, anything changes INR to let's just say USD,

I obviously want to refetch the request.

So the dependency of this use effect

is obviously the currency.

Any change in the currency, I want to refire this one.

For here, I can use XCOs as well.

I would prefer to use XCOs,

but in this case, I'll be using just the fetch.

So I'll be saying fetch just like this.

You can await, use however you like.

I'll be using backticks in this one.

Now just go ahead and copy this data

and I'll paste this one.

The only thing that I have to do is just change this USD.

That's exactly what I was changing in the URL as well.

So let's just inject our variable just like this,

absolute basic and just add a currency.

Whoever is calling this hook

as actually passing me this variable.

So no problem at all.

Now, once we have this, then obviously based on this,

we'll be having a .then or .catch, whatever.

So we'll be using a .then.

Inside the .den, we will be having a callback.

So just like this, there we go.

And we will have a response.

This response needs to be converted into JSON

because sadly I'm not using an XCOs.

I'll walk you through with the XCOs as well.

That's much, much better.

I don't have to do this JSON conversion and everything.

After this chaining, we need to further chain on one more

because that's where we actually get our data.

So we can call it with any other name as well.

I'll call this one again as a response.

And once we have this response,

we'll be fetching this entire response into the set data,

the data, the state that we have designed.

And inside this one, most importantly,

I cannot just go ahead and say set data like this.

Of course, this is a method, but what data?

If you notice here,

this is exactly I don't want to fetch it entirely

because this also includes this date component.

I want to insert only one key there, whose value is USD.

So I want to insert the data from the key of USD

and this whole thing I want to inject, not the date.

So for this, I can actually go ahead and access.

So all this response, this whole response is.

So from this response, whatever that is,

I want to just go ahead and provide this USD.

So there we go, USD, but this USD changes based on INR.

If we have INR, this changes.

So this is exactly the currency.

I can go ahead and paste this currency, cool.

Okay, so this one is nice.

All right.

So all we have got this one.

Now, now what we want to do is,

whoever is using this hook,

we actually need to return the data to him.

And what we are returning back, if you notice it closely,

we are returning all of this guy here.

So this is again an object,

but in this object we have key values.

So 00, Lynch, whatever that currency is.

I have been to most of these countries

and trust me, I have traveled around 40 countries.

A lot of them, I don't know.

Okay, so this is what we have.

So as you might have noticed,

the designing the custom hook is not that much bad.

It's actually pretty easy.

This is just a basic function.

We could have done this all into app.js as well,

but this would have unnecessarily just complicated the stuff

into the same file and segregating your logic

is always a good idea.

And by the way, in case you want to have this,

there is absolutely no shame in just console logging the data.

In fact, when you are learning the things,

it's a good idea to logging every single thing,

finding its data type, finding its value.

I encourage that quite a lot.

Okay, so, so far all good.

Now let's go back into the app.jsx.

Finally, we are in here.

And now let's take care of a lot of things

because all the things are actually dependent

on a lot of the things that we are doing.

For example, this input box,

from where you're going to give me this label amount,

all of that, some place you need to give it to me.

And that place is basically your app.js.

So this is where we'll be going through.

Okay, let's design a lot of states.

So we'll be getting an amount and set amount.

Okay, we'll be getting a use state.

Okay, cool.

We also need to get a from.

So we'll be saying from.

And this one is going to be set from,

by default it will be USD.

We also need to have a to.

So set to, set to is no, not Euro, not Euro.

That's very expensive.

Of course, I live in India, I'll go with the INR.

Then we also need to give the converted amount as well.

And this will be converted amount.

And that will be set converted amount.

By default, it will be Zuri, zero, not Zuri.

Okay, so this is the converted amount.

This is what we will be filling the data up here.

Okay, and a couple of more things.

Actually, I forgot one thing to actually discuss with you.

I should have discussed that earlier,

but let's go back onto the input box.

Now this is something which is not really necessary,

but still I'll discuss this.

I'll talk a tiny bit about it.

There is one more thing that we can do

is make it a little bit more accessible.

Although it is not required,

but we can actually do a tiny bit more.

Now we know that we have a lot of options

that are going on into this one.

And for all of these options,

notice here we are having this label as well.

So this label, if I click on the form,

it highlights this input field.

So how can I go ahead and take this one?

Because right now that's not working in our case.

In this case, we have a label,

but it doesn't have an HTML4.

And in this, we also don't have anything.

Now there are a couple of ways how we can do it.

First of all, we can just go ahead and say HTML4.

Okay, no suggestions.

And we can just go ahead and design a simple variable,

or we can just give it a name itself.

HTML4 is currency like this, of course, in double quotes.

There we go.

And similarly in the input also,

we can give that, hey, what's the ID of this one?

So HTML4 and this one is ID,

because these are actually interrelated.

We can give a currency.

This will do most of our job.

We don't need to actually worry too much about it.

But you will notice in a lot of production grade code,

especially the fan companies and big shots,

they actually use something known as use ID.

Yes, there is another hook.

The whole idea behind use ID is to generate unique IDs.

Yes, that is by default in now in React.

And you'll see a lot of people use it in this format.

So once I go back in before the return,

I can just go ahead and say const ID as use ID.

Now it generates unique ID for me.

And all I have to do is just inject this ID here

instead of currency.

I could have done that with the currency as well,

but hey, this is how a lot of people does.

So I just want to show you that yes,

this is also a good practice.

How much value does it add?

I don't know, you decided, but yes, this is a common thing.

So I just wanted to have it.

We have it in the notes to be discussed

in this entire bootcamp, but yeah, pretty good, pretty good.

Okay, moving back, coming on to this one.

So we have a lot of converted and all of this.

Now, coming back onto this use currency info,

we have designed a hook for this one.

This hook returns me a data.

So how can I go ahead and use the value of it?

Okay, let me show you.

Almost all of the hooks that you have seen

is just a function and it returns some values

and we stored that value into some variables,

arrays, objects, whatever that is.

Exactly like this, we'll be having these things.

So what we'll be saying is

I want to have this use currency info by the way,

please import this however you like, I like this one.

So this is my use currency info.

This hook requires a default value.

So I can just go ahead and pass on a USD,

but why to pass a USD like this

when we have all of this being set in this from?

So let's go ahead and remove this instead of hard coding.

Let's go ahead and do from, no suggestions.

Thank you, wrong suggestions.

Now just hold the entire thing into a variable

and we'll be calling this one as currency data

or currency info would be good.

That's it, we have designed a hook

and you have stored all the information.

Always remember what information is coming up to your data.

See, most of the errors actually come up

even in production grade still, it's been 12 years,

still most of the errors that I do

is wrongfully judging what type of data that is coming up.

Here it looks like that use state is an object and stuff,

but you need to be 100% sure that the data,

this data when it comes to here

and is being called as currency info, what is this?

This is an object, this is an array, this is a number,

whatever that is, be 100% sure about it.

And that is why a lot of people prefer to use TypeScript

just to be safe that what kind of data

is coming into the picture.

All right, enough of the site talks.

These are experienced talks,

I think these talks actually add value.

Okay, now we need to grab options.

Why options?

Why are you grabbing options?

Because if you remember, I have this USD as a long list

and I need to extract this, just a second,

I need to extract all these keys from it.

So these keys are important for me

and these keys are actually option in my input box.

Yeah, that's why I'm pulling out all these options.

And turns out pulling out this one is actually piece of cake

if you have studied JavaScript.

So object has a method of .keys and inside this keys,

I can just go ahead and say,

hey, I'll grab the keys from currency info.

No need to add rates or anything like that.

That is it, I have my keys.

All right, pretty good.

Now I have my options and all these values being designed,

nicely added and all of that.

Now, what happens when you actually go ahead

and actually click on convert?

Actually, to be honest, nothing happens.

You already have all the information with you,

you have your amount, you have your currency info as well

and in whatever the currency you want to convert,

you can just grab it.

Now you have all the options available for you.

So from this entire currency info,

you want to find out INR,

how you will find INR from here,

just by searching for INR.

So if I search for INR, that's available to me.

Similarly, if I have to write a function for this,

it's super, super easy.

Let's just go ahead and call this one as convert.

There we go.

How do I do the conversion?

It's super simple.

Use first of all, set converted amount

because that's what this is, converted amount.

And all you have to do is take this amount,

whatever the user has given to you

and multiply it by the currency info,

which holds all of these keys

and multiply by it's whenever we say square brackets true.

And by the way,

you can access objects with the dot notation

as well as with the square notation,

just giving you too much of information.

And in this, I'm just setting it to INR.

So I'll just find this value and this number

and I'll multiply it by that.

So that is it.

Told you, super, super simple.

By the way, we have this also method.

Let's design this, which is swap,

which just swaps the value.

And you might have already guessed that

how that actually works.

Super, super simple.

We are just exchanging the value of from and to.

That is it.

That is it what we are doing.

Let's go ahead and design this.

We'll be having a swap

and the swap is going to look like this.

So notice here how we are swapping it

set from to to and set to to from.

But we also want to change one more thing

once we actually go ahead and say,

let's just say there is one here.

When we swap these, these numbers also get exchanged.

So notice here, the numbers also get exchanged.

That is nothing.

It's just the set converted amount

getting changed with the set amount.

That is it.

If you want to do that, otherwise you just reset them.

So we'll go ahead and say that,

hey, I'll have the set converted amount

to be changed as simply just the amount.

Amount.

Yeah, that amount.

No, no suggestions.

Thank you.

And we'll also set amount

is going to go ahead and change

with the converted amount.

There we go.

That's it.

Now all the functionality of the swap is all done.

All right.

Now that majority of our task is done,

let's go ahead and add more of the values that we have.

So we have this test for tailwind.

We don't need this.

Let me go ahead and add a couple of divs up here.

Let's remove this again.

This is the most boring part,

but we have to go through with this one as well.

In the later on projects and application,

I'll give you the code file, which is helper file,

which actually gets all these components.

So they can just copy and paste.

For rest of them, I have that.

Don't worry.

So width is going to be full.

Okay.

Once I have this inside this div,

we will have another div.

This div also have a class name.

Let me grab all the classes that we have.

Copy that, paste it up here.

There we go.

Looks decent after this.

And finally, we'll be having a form

because this form is actually a submit form.

So that's what we are using.

Let's grab a form.

This form has no action,

but it has some things known as on submit.

And what does this on submit does?

Of course, fires an event.

That's what all form does.

And we'll be taking this event and couple of things.

First of all, stop prevent this form

from submitting to some URLs.

So that's pretty easy.

Event dot prevent default.

That's classic.

And then run our simple convert method

that does all of the magic for us.

Now inside this form,

we need to add the input box and all of these things.

So first of all, we have a div here.

That div also has some classes.

Super boring.

Not too much.

Not too much.

Like this.

Okay.

And once I'm inside this div,

we have the first input box.

So let's grab the input box.

Let's bring this

and let's see how it has brought the input box.

So it has brought the input box from component input box.

I would rather prefer it to actually grab it

from index itself.

Index dot JSX.

Did I mention?

No, it's JS.

So I would prefer to get it JS.

It's not like wrong to get it from input box,

but it's better to actually grab it

because eventually when we'll be having 5.10

on all of this,

it's better to actually grab it from here.

And again, once we are grabbing it from here,

the reason why we actually need to change this

because we have exported it like this.

This is not export default.

So we need to actually grab this.

That's it.

And then if we have more,

we can just set the comma and just have it.

So very common,

but just wanted to show you all the good practices

out there incorporated into this application.

Self-closing.

Now it's time to provide the data to this one.

So first of all, label.

This label is just the from.

So we don't need to do like this.

We'll be just saying this is a from.

Amount.

Amount obviously will be taken care from the amount,

the state that we have designed.

Then we have to provide the currency options

and currency options are in options.

If you forgot, these are options.

We derived from all the keys.

So that's what we are passing.

Then we have to provide the options of what happens

on currency change, on amount change and all of that.

So we'll be first changing on currency change.

What happens when the currency is being changed?

When the currency is being changed,

obviously we are tracking the currency into this from.

So this is a from.

So we are tracking the currency from.

So let's go ahead and fire an event

and update the states based on that.

So we'll be going like this.

And first of all,

this one is going to take on the currency change.

It's having a default value of currency.

Currency, why there is no suggestion.

Currency, it should be having a currency.

Let's call this one as currency, whatever the currency.

Right now it's USD.

So as soon as somebody changes the currency,

we can come up here and we can actually remove this

and can have the set,

set amount change,

set from, yep,

set from and inside that currency will be changed.

So automatically the new string value of the currency

comes to us.

So that's first part.

Next up is on amount change.

What happens on the amount change?

We'll be taking the amount and we will be,

let's just use this one better.

On amount change, first of all, grab the amount.

Okay, I grabbed the amount.

Then after that, we can actually change the amount.

So on amount change, we'll be setting up the amount.

Oops, my bad.

On amount change, yeah, there we go.

We'll be setting the amount to the newer amount,

whatever the amount is being changed.

So on amount change handles that part.

And we will also be needing a select currency,

whatever the select currency is.

So selected currency is we are going to grab it from.

So there we go.

All right, so this is what we have as of now.

Let's see if our VIT application.

So notice here we have this all from USD,

all the values are being properly passed,

but this is not enough.

We need to have one more here.

We'll be having a button here.

So just outside of this div actually,

we added another div, yeah, too many divs.

And class name, very boring.

And have this currency name, copy this, paste it.

Inside this, there is a button which has a ton of classes.

And this one is say swap.

Okay, the easiest part I know, which is on click,

and this will work as it is,

if you just go ahead and do a swap, save this.

And yeah, it works, but we don't want it to look like this.

So we'll be just adding some classes.

Okay, I could have done this entire project without the CSS,

but again, a lot of people just appreciate the content

if it looks good.

That's why we spend extra time in working with this one.

All right, so button is all good.

Now we have this div.

Let's go ahead and just grab all of this,

copy this and paste it up here.

So we have the same input box,

but we need to change the values very carefully.

In fact, so much carefully that when I actually did it

on my other channel, yes, I do have other channel as well,

I actually made a mistake on this.

So this time I want to do it more cautiously

so that I don't do the mistake.

Okay, first of all, label.

This time I know the label is going to be two.

All right, what are the currency options?

Easy peasy, I can give the options all to it.

Then whatever the amount is,

amount will be derived from the converted amount.

This is a read only input field.

So I will be giving it as amount disabled as true.

I can give it like this,

or if you just pass it on like this as well,

that is also considered as true.

All right, so that part is being taken care.

Okay, now let's go up here.

First of all, what I want to do here is on currency change.

What happens when the currency changes?

So when the currency changes,

I need to first grab the currency,

whatever the currency is.

So I'll just grab it.

Okay, and then I'll this time change the set to currency,

and I'll change it to whatever the currency is.

So set currency, set to and currency.

I think that should be all.

Now we also need to provide a selected currency,

whatever the selected currency is.

And in the selected currency,

I can just go ahead and give an INR,

but that would be bad because that's hard coded.

So let's derive the value from the state itself.

We're tracking this into a state known as two.

And that's why we actually created this to,

here it is, to and from.

So this is what we have.

Now, hopefully in the previous we did mistake,

now this is working.

Previously, if I change one state,

it changes another state.

Probably I did some mistake or something like that.

Okay, anyways, let's go ahead and finally add

the last button that we have.

Very long video, but it's fun.

It's fun, I hope.

I hope it is.

Just let me know in the comment section.

I desperately read all the comment section

and feedback from the students.

That's my fun.

Okay, we'll be saying convert

and the button needs an on click.

Obviously, we don't need on click actually.

We need on, we don't need on.

We need just the type of submit, that's submit.

So it automatically submits.

And obviously we don't want to convert to look like this.

So you get that, we'll be adding the classes.

Our classic classes.

Copy that and paste it.

Hopefully it looks good.

There we go, looks good.

And we can actually go ahead and try this.

So let's just go ahead and USD.

How much is five USD and we'll convert this.

It's good amount, it's good amount in India.

Okay, you can go ahead and remove this long string.

So when the conversion is being done,

you can actually use your JavaScript skills

and stop this to just two numbers.

I'll keep this one as up to you.

But if you'll notice into our original app,

we actually say it convert USD to INR.

And when we change something to INV or something,

it changes, so how we can do that.

Super easy peasy, nothing.

Just start your JavaScript and then just say that,

hey, I want to use from and to

and start your JavaScript and we'll be just saying to.

And that's it.

So if I go back here, it says USD to INR.

Maybe you won't have to all uppercase.

So it's also super easy because I know these are strings.

I can go ahead and use to uppercase.

It's a method.

And similarly here to uppercase, this is also a method.

And there we go.

Easy peasy JavaScript, there is absolutely nothing.

But if you look at this code base,

let me give you a summary of this

that all what we have done

because there's so much into this video

and I know this is a long video,

how long almost are 40, 50 minutes.

So we started by building our components.

We studied the component and there is no way

that you'll be designing a component this perfect

when you'll be designing.

Eventually you'll be keep on adding the data

to the component.

Maybe initially you start with label amount, that's it.

Then eventually you add a currency options

that I want to make my component more reusable.

So it's not like on the day one, we designed it like that.

Eventually we upgraded it.

And that's a thing with the tutorial

because you don't want me to sit here for six hours

for building this kind of application.

So obviously tutorials are more polished.

So eventually you'll be building all these things.

Don't worry, when you'll be designing the components,

you'll be not designing this as perfect.

Then we studied that how we can actually

just simply take the values

and ultimately what we did is just have an input field.

And here we just had a select option field.

So we just studied about how we can add

an options field just like this.

That's all what we did.

Optionally we studied a little bit about the use ID hook,

not very much used, not very highly implemented,

but a lot of people use it.

So I just thought to have a discussion over it.

Then we studied a little bit about the index way

of importing the component.

Again, there is nothing, nothing wrong

in importing the component from the component file itself.

But eventually in the long run,

this will make your code more scalable.

That is always a good idea.

And then we went into learning about the customized hook.

This customized hook, as we learned,

is nothing, absolutely ignore these X4X.

These are coming up from one of my plugin that I have, sorry.

This helps me to design the application faster.

So we learned about the hooks as well.

In the hooks, we saw that it's just a function,

nothing else at all.

This function requires a currency.

And as soon as this function loads, whenever you call it,

then it will fire a use effect.

So at that point of time,

a hook is automatically being called.

This hook is fetching onto a URL.

This URL you can grab from my GitHub account

onto that React.

I'm actually pushing this all the code on the GitHub as well.

You can grab this URL.

The only thing that we are changing is the currency.

So we crafted the URL according to us.

Then we simply taken the response into JSON

and then we simply extracted some values out of it.

We studied a little bit about properly looking at the URL

and what the data we are receiving.

So we studied that in this data, we don't want everything.

We just need this INR and this whole thing.

So we actually derived that value out of it.

So we simply said, hey, I don't want all of this.

I want just the currency part.

So that currency part is obviously this whole thing.

So this whole thing we extracted.

Very basic data nitpicking.

You'll be doing this quite a lot.

And then we console log this

and we actually returned the data.

That's it.

That's our hook.

Now inside this app.jsx, we used the state

to track all the values that were required for us.

And in this portion, we use the hooks as well,

our own custom design hook.

This hook gives us the entire object.

Out of this object, we extracted the keys

because that is something we want to pass on.

Classic JavaScript, nothing reactive about it.

Then we studied how we can do the swap.

Absolutely basic function.

Converted was absolutely basic.

This is just one liner code.

And that's why a lot of people hate.

I don't want to build a currency converter, just one liner.

But ours is not.

Ours is way more complex and way more scalable as well.

Then we simply did all here.

Here it was all boring, the input field.

But hey, cautiously add your data

because I did a mistake when I was teaching it

on my other channel.

But it's good.

It's good.

You learn from your mistake.

It's no big deal.

It takes just a couple of hours of debugging.

Nothing more than that.

So that is all what we have as of now.

And I think this video has helped

you a lot in understanding how the React works,

how the big scalable projects are being taken up,

and how we constantly move on further.

Concepts are pretty easy when you're with me, of course.

Leave down a comment.

It really, really helps me.

If you're watching the content, I

know a lot of people are watching.

And when they don't leave, just a thank note

in the comment section.

I'm always somebody who's looking in the comment section

and finds it empty.

It's disheartening.

So please leave the comment.

And I'll be thankful to you as well.

That's it for this video.

And let's go ahead and catch up in next, another such project.

All right.

Moving our journey further into the React ecosystem.

Hey there, everyone.

My name is Ateesh.

And welcome back to another video.

This one is also going to be a bit relaxed, chill out,

enjoyable, slower guide on exploring another concept

in the React world.

Now, well, the concept in the React

is single page application.

That means there is no pages in these applications.

It's just one page.

And the whole idea of the React is

I'll take the component, unmount it in place of this.

I'll mount this one.

So the whole idea is to manipulate the DOM

as much as possible.

When you actually say I want to go into register page,

React never goes anywhere.

It's a single page application.

It removes some of the elements from your home page

and injects some of the React register page on there.

It removes the register page and injects the login component.

And once you are successfully logged in,

then it removes that and gives you a dashboard just right

there.

And your page never, ever refreshed.

But this is not ideal for a regular user.

A regular user doesn't really understand.

And we cannot train the entire world population

how to reuse the internet just because we have designed

a new framework or a library.

So the concept of moving users onto different URLs,

like register page login, is so common

that if you don't do this, people

might think that it's very suspicious

and it's not really a great thing for the URLs

and the safety precautions.

And that is why we need to figure out a way that how we

can artificially inject the routing so that the URL looks

great and user feels like they are moving

onto a different page, although it's just

react at the behind the scene.

It's just a single page application.

And yes, everything happens artificially.

That is just a simulation being done

that you are onto different URLs.

Your page will never refresh, still the React concepts,

bringing in the components, injecting the components,

and all of that.

So we'll be learning one such way of doing that.

By the way, this is a core React course.

That is why we are discussing about the routings.

By the way, on my channel, you will

find there is a Next.js playlist separately available.

So in that we don't discuss too much of routing.

That routing is different.

And by the way, in case you are just interested,

I do have a separate video on my channel

in which I have showed you that how the Next.js routing can

be designed customizably.

Yep, your JavaScript, how the React router works.

Anyways, let's move back.

So in this video, first let me show you

what we are going to build.

And then I'll give you some of the concept

of how to study the documentation

and figure out things on your own with the React router DOM.

That is the library which we'll be studying.

So let me first take you onto the screen.

There we go.

Sorry we don't have any dark mode for this one.

But this is the application that we'll be building.

Luckily, you don't have to worry about CSS.

I'll be giving you some of the files.

I'll show you that as well.

So this is our home page.

And I recommend you to notice the URL.

This is the home page.

When I go onto about page, this is slash about.

So this is simulating that you are moving on to the next page.

But end of the day, this is just React.

Our navigation bar never changes.

Our footer also never changes.

They stay exactly the same.

So if I go back to the home, navigation bar

remains exactly same.

But our URL changes a little bit.

So we have a home page, about page, and a contact page

that we have.

And similarly, we will be having a GitHub page.

But the GitHub page additionally will do something different.

The GitHub page will show my photo as well as my GitHub

count.

And we'll see that how we can optimize it

through the React router DOM, which

is the library we are using.

And for every single time, we have these applications going

on like this, GitHub and About.

We'll also see how we can grab some of the URLs and whatnot.

There's a lot more that we'll be studying than just being

shown on the website itself.

And the package that we'll be studying is React router DOM.

It's available on reactrouter.com.

It's by the Remix team made by Remix.

And what we'll be doing is there are a lot of ways

how router actually evolves, and especially the version 6,

which we are at the time of the recording video.

This is the newest one.

We'll be using that one only.

But I'll walk you through how you can actually

explore the documentation.

Otherwise, my channel is always available for you to help.

But we'll be seeing that how we can use the 6 version.

We won't be talking about the 5 at all.

We'll be seeing that how we can pick up different variations

of the router.

We'll be using the Create Browser router.

And the whole idea is to study this piece of code

so that we can load things on our own

and can design the routing for this application,

this sample application, which will give us

the entire idea of how the application is built

or should be built and all of that.

We'll see some of the optimization tasks and techniques

and whatnot.

So everything will be pretty nice up there.

All right, enough of the talk.

Let's go back on to this one.

And by the way, one more thing.

If you'll go on to this one, so I have a repo on my GitHub

account, github.com slash at the chaudry.

You can find a repo with the name of React English

because these videos are in English.

And you can see that there is a React router notes.md.

The file is available for you.

This is a markdown file which will help you to actually grab

the components.

Like, for example, for the header part or the navigation

bar, this is all the code which has nothing

to do with the React routing majorly.

It's just a CSS.

Similarly, in the footer, if you check out the footer,

this is just a static footer.

We just need it to understand a few concepts.

It could be just one liner, but nobody gets

impressed with the one liner text.

That's why we are actually giving it to you.

So you can find the footer component, just copy and paste

it.

And then similarly, we can have home component and contact us

page.

That's it.

GitHub will be designing on our own.

So that's the basic part of it.

So let's go ahead and create a fresh new project and work

with it.

OK, let's grab and there we go.

OK, so first of all, let's kill this.

We don't need you.

And let's go ahead and work on with this.

Just give me a second.

I'll align the things and remove this one.

Let's start a fresh one.

And we'll say npm create wheat, not react.

And this one is going to be an introduction

to just the routing.

So we'll be calling this one, I guess, the seventh

application that we have.

So 07.

And we'll be saying react router.

Package name is same.

We'll go with react and JavaScript.

All right, so this seems good.

Now we need to go inside the folder.

But as you know, I prefer to actually right click and open

the integrated terminal.

That way, I'm always into the root.

So I can just run npm i to install the application.

And we can actually go ahead and move on to the browser

itself.

Let me go ahead and get into the browser.

And how we can actually install this.

So there are main concept, migrating, all of this.

Let's go on to getting started.

And there should be getting started guide tutorials.

Yep, the project install.

Just get me the npm install command, or I'll do it myself.

OK, no examples.

FAQ main concept.

OK, I understand the main concept.

Just give me that path.

OK, probably it's not going to be.

Nothing, it's a React router DOM.

So I'll just install it.

So npm install, it's React.

Somewhere it is, I'm not able to find it.

React router DOM, a very famous package.

If you are any time working on the React,

this is the package you will be dealing up with that.

Now, in this package entirely, all you have to do

is go with the main concept.

This is really the essence of how

to understand the React router DOM, what happens,

how it happens, and a lot of essential things

are mentioned in this one.

So how you track the URL, how you track the location,

forceful, although we'll be studying a lot of it,

especially the router inside when

we'll be building a mega project finally in this series.

So all these things like client-side routing,

the location state, and all of that will be taken care there.

But if you have time, go ahead and go with the main concept.

Some of them we'll be studying here, like the path patterns,

what this is, how to grab the URL params, dynamic routing.

We will be studying in this one.

But definitely, this is a very rich guide.

These kinds of concepts, these all

will be taking care of this.

But it is always a good idea to actually go

with the main concept documentation.

This is the part where you study and you read out the stuff.

Moving back, so now everything is installed.

Let's first go ahead.

We'll be needing tailwind as well,

because if you look out the classes and all of that,

yes, there is a lot of tailwind.

So let's go ahead and install the tailwind as well.

One more time, in fact, a lot more time

will be coming up in the future as well.

OK, so this is what we have as a tailwind.

And we need to actually copy the content.

I'm pretty sure you might be just kind of memorizing this

at this point of time.

OK, the content will be replaced.

Save that and go into main.jsx.

No, index.css, remove everything,

and we'll be grabbing these ones.

Copy them and paste them up here.

Save that.

We don't need anything into the app.css as well.

Just remove everything.

We won't be using actually the app itself.

OK, further, let's go ahead and run npm install, npm run dev,

npm run dev.

And that should be up and running on my system.

There we go, basic.

Since the app.jsx is anyways getting loaded,

let's go ahead and at least grab some of the values out of it.

So we'll be saying h1 of React Router, React Router DOM.

And we'll be saying, let's add a class name.

And we'll be saying bg dash what?

Green.

Suggestions, yes, bg green 300.

Let's see, yeah, at least our tailwind is working.

All right, we won't be touching this thing here.

We'll be getting started with a couple of routes and folders

and basically trying to get a feel of how the entire thing actually works.

So first thing that we are going to do is there is always components

or some people call it as pages.

Totally depends on you how you want to call it.

We'll start by calling this one as component.

Eventually, as we go into the mega projects,

we'll be designing components and pages as well.

But these are just file names.

Nothing really bothers us.

So we'll be calling this one as components.

And this is just a directory structure.

Each instructor is going to give you their best

or their practices, which is being used in their company.

We'll be creating a couple of folders first,

and then we'll be going through with that.

First of all, let's go ahead and call this one as header.

Inside the header, I will have a new file.

And I'll call this one obviously as header.jsx.

Now, nothing much in this file.

I'll just say this is a div, which says header.

That is it.

Absolutely that.

Nothing more than that.

Now similarly, in the component, there will be a new folder

and we'll be calling this one as footer.

Inside the footer, we'll be having a new file,

which we are going to call footer.jsx.

There we go, rfce, we have just footer.

This will help us to understand some of the main concepts

of how things are actually being done

or how things are being laid out.

All right.

Now, the next thing that we are going to do

is once we have these headers and footers,

we will be replacing them with the notes that we have,

because if you remember,

this is where actually our component comes up.

This is where the header goes.

This is where the footer component goes

and we'll be talking about them as well.

But right now, this is all what we have.

Now, after this, what we're going to do is,

this component will be closing it down.

In our main directory, what we're going to do is,

we won't be using this app.jsx,

although you can, no big deal there.

But I'll be creating one more file inside this,

which will be directly known as layout.

And this is a common practice.

The reason for creating this file is,

in our application, you will see that,

especially in this one, that the header always remains same,

the footer always remains same,

only the inner content changes

from home to about and all of that.

So we need to figure out a way

that we don't have to repeat ourselves that often.

We just want to grab a header should always be there,

footer should always be there,

and we'll be just injecting the content in between.

That is a common practice.

You'll find this exactly same pattern

being used in the Next.js and a lot more stuff.

So we'll be using that practice exactly here.

So again, rfce, React functional component,

which gives me a layout, export it, that's it.

But what additionally we can actually go ahead and use,

the first concept about this, which you'll be using,

is known as outlet.

This outlet is a special thing,

which is coming up from React Router DOM.

Remember, so far we have been using just the React

or the React DOM,

but this actually comes from React Router DOM.

The advantage of this is that I can go ahead

and return some special things.

First of all, let me import them.

I'll go ahead and say I need a header.

Let's just say header comes up like this.

I also need footer, footer also comes up like this.

By the way, we can export these components

into index file as well.

That's totally your call.

You can go ahead and do this.

Now here, what I'll do is I'll remove this.

I'll inject just the fragments, just like this.

And I'll say there should always be a header, all right.

And there should always be a footer.

So there we go.

And now what I'll do is I'll inject a special element

that is given to me by the React Router DOM

and call this one as outlet.

It needs to be always called as outlet.

There is no other name for it.

And this is something which actually gives us

this capability that, hey,

this will always be on all the pages.

This one will be in all the pages.

This is designing the layout of the application.

Now what's inside the header?

What's inside the footer?

That's not our call, but they will always be there.

And whatever the information that you are using,

you can actually go ahead and use that.

But the main question that we have is

that how it will know that we are actually doing this.

Because right now, if I just open the application

and I run this, this is not going to work.

So it's already running.

We don't need to worry on that part.

If I go ahead and open this up in the VIT,

it doesn't take place.

It doesn't actually does anything.

The reason for that is in the main.jsx,

or whatever your file is in your case,

whatever you're using,

you are actually still serving app.

It doesn't have the configuration which is required

to actually have this router.

And this router has a couple of ways

of how you can actually do the things.

I'll show you both the ways

which are actually mentioned in the documentation.

So the first thing that we are going to do

is keep this as it is.

We don't want to touch it initially,

but we want to create a router.

And this is the router which I showed you initially

that comes up from this create browser router.

There are multiple types of router that you can use,

but we'll be using this create browser router.

And we'll try to create a path like this.

I'll show you this syntax

and there's another syntax as well.

I'll show you the both.

You can pick up whichever you like.

So we can go ahead and create a router.

So router and that router will be created

by create browser router.

So again, create browser router

comes from the React router DOM.

It's nothing, it's a function.

But this is a function which doesn't work alone.

If you look at the documentation,

this function actually needs a route provider as well.

But it's not just the route provider.

You can see there are lots of ways

of how you can actually have the route provider,

static route provider, create a static handler.

There are a lot of ways browser router.

So this documentation is quite in depth

and there are multiple use cases for each one of them.

I'll show you the most easiest one

that what accompanied you need to create this one.

And what we'll be doing is simply we'll come here

and we'll take this one as create browser router.

Oops, create browser router is already there.

And we need create route elements.

Yeah, create route from elements, yep.

It's a little bit difficult to remember this one

but as you will do a couple of more projects,

you will be familiar with that.

So once we have this create browser router,

then inside this, you can go ahead and use this

which is create browser, create routes, my bad.

Create routes from element.

This is again a method.

This is again a method, no big deal there.

Now inside this, there's a syntax that you have to follow.

So I'll come back here.

You need a special element known as route.

And this route is obviously going to come

from the React router DOM.

And this route actually works like component itself.

So just like we saw that our empty components

can have headers and footers.

And we also saw that headers could wrap up

inside footers and all these elements.

So just like this route is nothing, it's just a component.

So notice like this is how it works.

So just a basic element, nothing more than that, a component.

But this route actually takes a couple of parameters

and based on this, how it works.

It works on this kind of a sandwich model that we have.

So we'll first of all say that, hey,

everything will go inside the path of a slash.

And what is the element that you want to load?

Every single time you have to follow the same syntax,

you have to tell it a path

and what element to load in that path.

Element simply means what components you want to load.

In my case, I'll just say, hey, element that I want to load

in this one, I'll give it like this.

I want to load an element known as layout.

And there we go, self-closing of course, there we go.

Now, once I've done this,

now things will actually take place

and instead of having this app,

we want to use this router inside one here.

So there's again a syntax,

a little bit syntax for this one as well.

We now don't want to use this app,

we want to use our layout

and want to load everything inside it.

In fact, if we have the app,

we want to load this inside the layout itself

so that the header and footer always remains.

So we have to remove this here, this one goes away,

this one doesn't load directly.

In fact, we go ahead and use a router provider here.

Again, router provider comes up from the React router.

And the whole idea behind that,

it's a self-closing element,

you don't need to just have the ending one.

And inside this, you provide just one param router,

which is the router.

A router is the property

and is the router which we are creating.

Make sure the router provider is getting operated

and is being taken care.

Once we have this, now what you'll notice is

we have this header and footer.

Since we haven't provided any outlet to this one,

that's why only thing that's loading is header and footer.

Now in this one, you can add as much as you like.

Now let's take care of this one here a little bit

since we have a couple of paths to work on with this one.

So we have this route element and I told you,

this is like an element, like a sandwich that we have.

We saw the sandwich kind of a thing here as well

and we can actually use that.

You might have seen that this is an opening,

this is a closing one,

inside this you can add as many as you like.

Similar to this, we have this one,

but right now the path that we are serving is this one.

So inside this, you can have as many routes

as you wish for them.

So these routes could be self-closing

or could be the sandwiching one like this one,

or you can have these ones as like this self-closing.

Now here's the interesting path.

First of all, what path do you want to load?

In this case, I want to load a path.

I'll tell you in a minute what path to load.

Single codes, double codes, whatever,

but I don't have an element in this one to load.

So what I'll do is I'll quickly go ahead

and create another component in this one.

So right click and we'll be creating a new folder.

Let's call this one as home.

Doesn't really matter, we'll be using the boilerplate code

and we'll be saying home.jsx.

And again, rfce, that's it.

All what we have is a home text being literally written.

Now inside this, I don't say anything.

I don't say a slash or anything further

because everything now happening is after the slash.

That's what the meaning of this first route

at line number 10 is.

Now what element do you want to load?

I want to load an element which is home.

So I'll just go ahead and say,

hey, give me an element which is home and self-closing.

Now when I go back, notice here,

the home element gets loaded.

So that is the advantage of this one.

In the basic layout, notice here,

I'm actually at the slash.

So this is technically slash,

which is where I'm home is loading.

Now let's just say, for an example sake,

you want to have a router which says about.

So again, first create that component itself.

So we'll create a new folder.

We'll call this one as about

and right click and create a new file.

Let's call this one as about.jsx, of course,

and rfce, nothing.

It just says about literally nothing else.

You guessed it right.

Now after the slash on the home route, this works,

but I want slash about to load that component.

Again, go back here and simply say route.

Again, this will be a component.

So route, self-closing could be fine here.

And then simply we will have a path

which is going to be like this.

This one is going to be saying at this time,

we need to change it as about.

Remember, we are saying about here,

but this about is after the slash

because it is sandwiching that one.

So sandwiching concept comes up here.

So on the homepage, we have given a layout,

a layout, a route here.

This is too much difficult to spell.

Here, we are saying that on the same level,

on the same hierarchies after the slash,

if I write about, remember, I don't say slash about,

otherwise it will be twice.

I just say about, what element do you want to load?

The element that I want to load is going to be like this.

And this one is definitely going to be about.

And there we go, self-closing.

So now technically I can go on to slash

and I can just go ahead and say about.

Notice here header and footer remains same,

but my about changes.

So I can go back, this is home.

So this is the whole idea, whole concept.

If you want to go further into this that I want about,

and then after that some slash or something like that,

then obviously you can go ahead and say that,

hey, this is my about and slash,

this is where I'll be loading this one.

So notice here, I can still go on to slash about

and it still works.

If you want to have it like this,

again, use the sandwiching concepts.

So in this case, I'll just go ahead and say a route.

There we go.

And we'll end this one.

Oops, my bad.

This one needs to go like this.

And we don't need this one, my bad.

There we go.

So now we have a closing one, closing partner of this one.

Now I can go back and again start writing the elements,

whatever that element is.

This could be about, and this could be company.

And I can load any element, whatever I want.

So just remember the concept of the sandwiching.

So one things can be inside it.

Whenever you need a further drill down path,

you can do this.

If you don't want to do this,

just use a self-closing one, that's also the same.

So you get the idea how the concept actually works.

All right, so now we know the basic principle

of how the things are there.

There are a couple of more principle

that we need to actually go ahead and work on with this.

And we need to have a small discussion on this one.

Let's go on to the home, not home header, header.

This is where we'll be working on.

So again, we need to copy paste some of the CSS

for this one.

So we'll be grabbing all the,

we can just go ahead and grab directly all of this.

We have the header at the very top, we'll be doing that.

But there are some elements which actually requires

your attention into this part.

So let's go ahead and grab, remove this one.

And we'll be having a simple header, just like this.

It will have a class name,

and I'll obviously copy and paste the class names.

This is the part where it's a little boring,

but don't worry, there are some interesting features here,

which we want to discuss.

Then we have a nav, which we are writing again, plus name.

And again, the class name will remain same.

So copy and paste that.

So now that we have nav, inside the nav,

we will be writing variety of links.

Now your first intention would be just to use a tag.

This is where things can go actually wrong.

So I'll just have a div, another one here,

because that's how we laid out while designing this.

So I'll just have the class names, copy that,

paste that up here.

And inside this div, we have all the links.

What you saw earlier on the webpage, like here,

home about and all of that.

So they are just obviously,

they are just links all inside this one.

So we'll be using that.

Now the first intention is always go and use the A tag

and just write this.

Remember the A tag, the whole idea behind using the anchor

tag is to move on to different resources.

When you use A tag, the page actually reloads.

It remounts because the control is given to the browser

and the DOM, which is in the browser itself.

We don't want that because page should not reload.

It's a single page application.

And that is why every single router,

no matter it's in Next year's or React or wherever it is,

it is giving you some ways of navigating things.

Because remember, this is all a facade.

This is not real.

This is just a simulation of moving to slash about

and wherever it actually never goes there.

So that is why in every single time you'll find something

known as link or somewhat similar to that,

which is actually coming up from, as you noticed here,

React router DOM.

Remember it always comes from React router DOM

or somewhat like that.

And we work through that.

So in this case, we'll be just saying that,

hey, we'll be having a link.

And again, this could be a self-closing one,

or you can just go ahead and close it like this.

So I can just go ahead and say slash link like this.

Again, it could be self-closing.

It could be like this, totally up to you.

Now in this link, what do you want to have?

We have just an image with the logo or something like this.

So in the image part, we are not talking that much,

but yeah, we just added an image or something like this.

But notice here, this link is pretty interesting.

This is not your A tag.

It doesn't have an href.

It has rather a tag of known as two,

and this too will take you wherever you like to go.

So this is the interesting part

where you should pay attention.

So if I go back up here,

notice here, this logo comes up here.

So simply go ahead and works on with that.

We just found this random logo on the internet

and we worked on with that.

Now, similar to this, you can actually have more of this.

In fact, now I can go ahead

and bring all of this header component up here.

So if I just go back here, copy this, exactly same thing.

So I can just now replace and talk about it.

Paste this, and we have exported default all of this.

But the only thing that is still required

is to import the links and all of that.

Otherwise it will yell at you.

So go ahead and import React.

Do we need React?

I don't think so, we need React,

but still if it is saying, I'll just grab it.

We need link definitely because we discussed about it.

And the link is going to come from React Router DOM.

And not only link, let me show you a couple of more stuff.

So the link is actually one way of navigating

from one place to another place.

So notice here, mostly the link is used,

but there is also a nav link being used.

So nav link is also a part like that, so navigation link.

Right now we are just using it as a basic,

but nav link actually gives you a couple of more features

like on what page you are

and what values you can actually use.

So we'll see some of the variations

and versions of that as well.

But right now we'll just import that and leave it.

Remember, link is not the only way of navigating.

We have the nav link as well.

And we can read about the documentation of this one

if they have any global search.

I don't think so.

Let's just say components.

You can see the nav link here.

And what you'll see in the nav link,

you can find out pretty easily what class is active

and what ends and all of that.

So notice here, it says two messages.

So the link and nav link almost same,

the two section and everything is almost same.

The only thing additional with the nav link is

you actually get this is active

and is pending and all of that.

So why are using this is active,

which whenever you use any class name

or any arrow functions like this,

it is available to you directly.

And notice here, they also say this,

a nav link is a special kind of link

that knows whether it is active or not.

So when you go up onto the applications like this,

and when you say that, hey, this page is active

or this page is active, just like that,

that whole functionality can be done via the nav link.

So that's why we have this nav link.

All right, by the way, notice here,

this is exactly what we are doing,

whatever the values are active and all of that.

We'll talk about that later on in the some sections

where we'll be having.

In fact, we can actually talk about this into about whatnot.

So this is get started.

Then we have couple of nav links on the home.

Actually, we have just one on the home.

We can design it right now itself.

So let's just say on the home,

what you can do is you can just add a couple

of more practices and what the text you want.

So for example, now we are in the nav link

in the class name itself, since we are using a callback,

this is the syntax exactly, they are also mentioning it.

So we are not doing anything special.

In the class name property,

we have the access of this callback

and then we can write all this.

So this is exactly what we'll be also doing.

So in this one, we have the access to this is active.

Remember, this needs to be exactly as is active

or is pending.

So we don't decide the variable name in here.

So we have this is active.

And by the way, one more thing,

which usually I also forget,

this is active needs to be extracted

as a property like this.

So yeah, I also make sometimes this mistake.

So let's go ahead and keep it up like this.

And now you have access to is active.

Now based on is active,

we can decide whether the color is going to be gray

or this one.

So we'll just actually cut this out.

We want to cut this one out.

And once we are cutting this out,

we can inject the JavaScript again.

And by the way,

dollar sign is missing.

Yeah, now we are happy.

Okay, now based on is active,

we can do a question mark and a ternary operator here.

If it is active, then we can go ahead and use a text of,

not this one, text orange.

So we'll just say text dash orange.

We'll be probably using 700 version of it.

That's what we used.

And here we can use a text dash gray 700.

Gray 700, no suggestions.

There we go.

No suggestions, strange.

Anyways, we can just find it out later on

if we are doing any mistake.

And by the way, this needs to be wrapped inside the quotes

because it's a class, not a variable.

Class I mean to say tailwind class.

So that is all what we have.

And based on this, we can have a nav link

which can provide you whether you are active

or not onto this one.

So nav link should be refined.

So now we have our own home, but if I go on to about,

so we have the home.

And if I go on to slash about,

this should be technically going away.

We shouldn't be having this link as,

if it is true, then it's 700.

If it is false, it goes like this.

But okay, we'll see that how this actually works

and how we can actually have more links onto this one.

This one is nav link.

We haven't mentioned the two, we have to mention that.

Otherwise how it will work.

And we'll be saying that, hey, you will be on slash.

So now it will keep a track of, there we go.

Now, if I go back to home, it's orange.

But if I go back to slash about, we are not active.

There we go, told you, simple.

Okay, now we can have multiple of these allies

and can define a home about whatever you wish.

So I'll just copy and paste from ally.

I'll just duplicate this.

And this one is going to be slash about.

And there we go, now I forgot to change the text.

About, save that.

Now we can travel to home, we can travel to about.

And similarly, we can have more of these.

So if I remember, we have home about,

and we will also have the contact.

So I'll just duplicate this one.

I hope you remember the shortcut for duplicating in VS code.

If not, right now is a good time to find it out about.

Okay, home, contact.

Contact, this one is going to be contact.

We also will have probably GitHub as well.

We'll be having some fun with GitHub as well.

All right, copy and paste that.

This one will say, I'll go to GitHub component

wherever that is.

All right, so now we have home, we have about,

although there is nothing inside the contact.

So this route doesn't, is there.

So we need to actually define our 404 route as well.

We can work on with that.

But at least our home and about component are there.

And we now know about the nav link,

which is a special kind of a link

and we are aware of how things are there.

Now with this, we can actually go ahead and move on

and work with the footer, which is super easy.

Now you can go onto my notes.

And this is the footer,

just scroll it all the way to the right.

And you will find this copy button

or you can manually copy and paste that.

And all we have to do is paste this all here.

Since we have link in this one,

so just go ahead and fix the errors.

Let's first import the React, import React,

and then we'll be importing the link.

And that link is from React Router DOM.

Technically, we should be all good now.

So we can see at least a home and about,

but our footer is coming.

So it's looking nice as well.

Apart from this, there is no big deal

and no facade about it.

Similarly, we have a home component as well.

We can go back and replace it with the home.

So again, it will look just a little bit beautiful,

nothing more than that.

And home, select all, replace it.

I don't think so.

We have anything in this required.

Let's just try this.

Save this and go back.

And do we have some links?

Yep, we have some links in the home as well.

So let's import that, no big deal.

In fact, we can actually copy, paste footer here.

And let's just copy and paste.

All right, let's come here.

And there we go.

Should be all okay now.

There we go.

So we have home page.

So we have learned how we can design that home about

and whatnot.

So I'm leaving this contact page to you

as a simple exercise.

All you have to do is go up here.

We have the contact us page as well

and go ahead and work on with the contact us page,

about us page.

About, I can do this for you.

Okay, so about is here.

We'll be replacing it with here

and we'll be importing the link.

If we have, I don't think so.

We have link from React router down.

Let's see.

If we have about, yep, home is looking good.

About is looking good.

Contact is for your exercise.

Maybe, maybe, I don't know.

We'll try to have some of the work

with the contact and user and whatnot.

Okay, one more thing that we'll be doing

is we'll be creating another component.

Let's go back onto the code side of it

and we'll be creating another component.

Let's call this one as user

because I want to show you some more ideas

that you'll be using.

Let's call this one as simple user

and we'll be having a simple layout here, new file.

That will be user.jsx

and just the basic RFC.

So we have a user.

Now, in order to make sure that this component loads

somewhere, we have too many files opened up.

I would love to close that.

In order to make sure that I have a really huge code base

into the user, in order to load this,

I need to go into main.jsx

and how can I load a route which actually loads this one?

So I can just go ahead and say that,

hey, I want to have a route

and this route will be on going to

whatever the path you ask me to do so.

I'll just say, hey, go on to user

and the component or the element that I'll be loading here

is going to be a user.

User, it doesn't suggest me user.

Okay, I'll write that again.

I want suggestions.

Okay, there we go.

And here we'll be saying, hey, give me user.

It doesn't give me user.

Save that and probably this will give us issues.

It surely will.

I will just first remove this about

because we don't want that.

The element should be user.

It should be auto importing that.

And we'll be saying import user

from component user user JSX.

Okay, all happy.

Now, can we have another link for the user itself?

Probably yes.

Let's go into the header.

And can we have another LI for the user itself?

Let's try this.

Link, go ahead, copy and duplicate that.

This will be going to a user

and we'll be calling this one as user, how easy that was.

Okay, now if I go back to the user, okay, I get the user.

Now in this user, first of all,

let's just central line some of the stuff.

We don't want it like that.

So we'll be adding some of the class name,

we'll be adding some of the background,

BG dash orange suggestions.

We'll be using orange like this

and we'll be saying text dash black

and text dash three X, three XL,

text dash three command suggestions,

three X, no suggestions.

Yeah, text three XL.

And we'll be saying text center

just to make sure things are all good

and okay, at least they are visible.

We can even add a padding on Y axis of five.

Yeah, better.

Okay, so far we are all good

and we understand this part is there,

but there will be cases in your situation

where the user will be dynamic.

So dynamic routing is a very common scenario.

So for example, the user ID is,

I cannot write it here,

something like one, two, three,

or maybe username with a username of Ateesh.

So I want to grab this path and this URL.

So that dynamic capturing is one of the core essence

of how you will be using the route.

The way how we use it is actually simply go ahead

and simply write something here,

which is slash and then the colon is important.

This is how you capture anything out after the user slash,

whatever comes next to it,

you'll be able to capture that.

And then carefully name this parameter.

This is a placeholder user ID.

This could be just ID, this could be product ID,

whatever you want, this could be anything like that.

But this is not job done because if you go back up here,

user definitely that's all good.

But if I go back, so notice here the user,

now we are saying, hey, this is not happening

because I don't know what to do with this.

This obviously will give us error.

Now we need to go into the user and figure out a way

that we accept all these things.

Now, in order to make sure that we have defined

that this path is actually accepting the parameters

and whatnot, we have to use the params.

And yes, this is literally the name.

And we call this one as use params, no suggestions.

Use params, no suggestions.

Yeah, that's bad.

And that actually comes from react router DOM.

Okay, and why are you having issues?

Because I wrote const import, there we go.

Now all you have to do in this case is this use param

is actually a hook, we studied hook quite a lot.

And this is a hook, that means it's a function,

nothing more than that.

But what this function gives us back,

that is important for us.

So it gives us a lot of things,

we can extract some information out of it.

What information to extract?

Yes, exactly, user ID.

Why user ID?

Because we call this as a user ID in this place.

And after the colon, the colon is a symbol

that, hey, this will be going into use param

and you'll be able to extract this

with a key ID of user ID just right here.

Now let's just go back what happens.

If I go ahead and get back, it says,

hey, prop and route, error boundary.

Okay, looks like this one is okay,

but my main.gsx is having some of the issues.

Let's go back onto main.gsx.

This one user path element is all okay,

should be all okay.

And let's also check the user,

I'll be exporting that export default user,

we are exporting that.

Let me quickly check that why this is yelling at me.

All right, so found the bug, a pretty easy one,

probably because it's late night,

sometimes these things happens.

So again, we are actually good in this case already.

The issue that we are facing is pretty easy actually.

If I go ahead and refresh this, this page works,

but if I go onto the slash user or this one,

this doesn't work because we never defined the route

that what happens when the slash user only comes.

We are only defining and are talking about

what happens when the user slash

and some parameters comes into that picture.

So the easy way to fix it is actually to remove this,

let's cut this out.

And let's not make this one a self-closing,

use the sandwich of concept that we studied about.

So we'll be saying that,

hey, let's just go ahead and close this route.

Now we can use the sandwiching concept.

And then I can use the inside the sandwich route,

which obviously will make it as slash,

everything is inside slash, then we have user,

on the user will load the element user.

And after that, if there is a colon,

which technically makes user slash colon user ID,

we will load again the user element.

So very basic, but again,

sometimes these things do take some time to debugging.

So there we go, we have this user.

And additionally, what we did is inside the user one,

since we extracted this user ID, I just placed it here.

It just available.

I'm displaying a variable in JavaScript.

I'm not doing any magic here.

So when I go back here, the advantage of this is now,

anything that comes up here in the URL after this,

whatever the dynamic route,

I will be able to catch this dynamic route.

For example, if I just have something like Hitesh here,

I can grab this.

Maybe this is something on the user page

where you have some clickable elements.

And while clickable elements,

you are coming on to some GitHub user ID,

some blog or anything.

So I can grab elements from the URL itself,

make a fetch request and get the data.

So this is the whole idea of doing everything

that we are doing up here.

All right, so now let's go ahead and work on

with some more stuff, which is also pretty interesting

and a new concept into this one.

Actually, Next.js also uses this same concept.

So we'll be working on with this one.

I hope the center element of this one,

how the routers and the dynamic parameter comes up,

this is all clear to you.

And by the way, even if you don't put this one

and directly put up this,

then the user route will not work,

but user slash whatever something will also work.

Okay, going back, we need one more route

to work on with this one.

So we'll go out of the sandwiching.

We are not interested in this one.

First, let's create a new component.

That component will be again, very basic,

but very interesting one actually.

Let's go ahead and call this one as GitHub.

And inside this, we'll be creating a component

known as GitHub.jsx of course, .jsx, again, RFCE, that is it.

Now in this GitHub and all of this,

what we want to do this here is just simply show some data

into this one.

First, let's go ahead and create this route

that would be super beneficial for us.

So we'll be having a route, route, and there we go.

And we don't want this path a strict.

This simply means when you have a strict,

that means all the 404 found,

just load this element up here.

So now if we have this element,

make sure this is at the very end of it

because they are evaluated on case by case basis.

Now, if we reach out to something like contact,

which we don't have defined, it just says not found GitHub,

which is not yet defined, so it says not found.

So this is a classic example of if nothing cases.

So have you studied switching cases?

Yeah, this is almost like that.

But before that, make sure it is always at the end.

We also want to have this GitHub.

So we'll be having a route path will be GitHub.

And the element that we'll be loading is going to be GitHub.

Yep, bring this one in here.

And now we have this GitHub

and let's modify this a little bit, not too much,

but at least bearable.

So we'll have some of the class name.

Let's grab first of all, text to the center.

We'll be having a margin of four on all the sides.

Background will be gray.

How much gray?

600 is good enough.

Text can be white.

And what else?

Padding would be four on all the side

and text would be large.

So 3XL would be good.

And there we go.

And we have decent stuff coming up in here.

Now we have this one.

Now I want to fetch some data from the API itself.

And if you remember, fetching the data is not that hard.

And I can just visit this URL and grab some of the data.

And it's an object that is being thrown at me.

It's a public URL.

You can also go ahead and make a fetch request there.

So as soon as this component mounts,

I want this request to be fetched up to me.

And I want to use that.

One easy way of doing that is have a simple data as my state.

So set data.

And we'll be using react.useState.

By default, it will be an empty array object.

Whatever you like to have, we'll just have an empty null.

We'll have an array or maybe an object.

We'll figure it out.

Now I can use a useEffect hook.

So useEffect in this.

And there we go.

We have a useEffect.

It has no dependency array.

So there we go.

And now what will I do here?

I'll fetch.

So I'll say fetch.

This is a nice boilerplate.

But I'll write my own.

I'll simply say we want to fetch this URL.

If this URL gets a success, so we'll say dot then.

It will give me a callback.

I'll say let's call this one as response.

But response is in the string format.

I need to convert it into JSON.

So let's have the response.json.

Then chain on one more then, because that will actually

extract the data.

And we'll be having, again, a callback.

Let's call this one as data.

There we go, callback, just like this.

And we can console log the data, as well as set the

data into the data.

So there we go.

Now the data is being set into this one.

And now we can extract some of the data out of this one.

Let's first console log and see if this is all coming up when

we hit this particular route.

Right click, inspect, and console.

OK, too much.

And we will expand this a little bit.

There we go.

So if I go back to contact and load the GitHub, it gets

nothing as of now, because we are not

using it technically.

OK, time to actually use this data itself.

Interesting.

How we can use this?

Once the data is actually being set, as soon as the

component mounts, save this, go back.

And now I can see I have this object.

Let's reload this one more time.

Probably I didn't save that.

OK, fill rule.

Did you mean fill rule?

No, all these.

OK, these are just the CSS and DOM properties, not

interested in them.

Contact, GitHub, there we go.

Now I have this object, which has a lot of data, and

probably out of this data, because I'm console

logging the data, and I'm console logging this.

So let's extract some values out of it.

So what values can I grab?

First of all, the followers count maybe.

Followers, there we go.

And let's inject the variable since I have access to this

data, and if you have studied this, you know that I've

actually gone through many times.

You can just extract what do you want.

I want just the followers count here.

That's why I just mentioned this, and there we go.

I get the followers count.

So notice here, we can grab the image as well.

Should we?

Yeah, let's grab the image.

And I'll say I'll be needing an image.

There we go.

What is the source?

Source will come up from data if the data has avatar

underscore URL, and we'll also need to give a width of 300.

All right, so we have this image as well as all the

data.

Now here comes the interesting part where things will get a

little bit more interesting towards the router.

I go into about.

I go into contact.

When I go into GitHub, that is where the

request is being sent.

We cannot simulate.

This one has to come up after a few seconds.

But what you'll notice is the use effect will only take

place when this component particularly loads up on the

page, so contact.

When I go up here, so this will make a fetch request.

Now what if we could have done this a little bit better?

Can we optimize this?

This is already very optimized.

But what if there could be advance stage of this one?

Like for example, I'm going into contact.

Before clicking on this, I keep my mouse over for probably a

fraction of second milliseconds, but then I click on it.

The same thing can be used for the advantage.

Next year's does exactly same.

When you actually pull your mouse over over this one, it

automatically sends a network request to load all the

resources that you require.

And then when you click on it, the things are

already available for you.

Now how can we do this in this scenario with the React

Router DOM?

In the next years, it happens automatically

behind the scene.

But how we can actually do this one up here?

Now doing all of this thing is actually super, super easy.

Let me show you how this is done.

First of all, we don't need this data and all of that.

This was just to show you that how regularly we do this.

Again, a good example exercise.

We'll just come in this one out.

And we'll write this thing again.

Usually there's a case where people write these kinds of

methods in the component itself.

But if you wish, you can separate that out as well.

All you have to do is export a kind of a method.

We'll call this one as GitHub info loader.

And this one is going to be a simple callback just like

this, but the only advantage we want to take care of here is

we want to make this request as a sink.

Previously, we were using the fetch in the .then syntax.

You can use that as well.

But I want a sink here as well.

So what we'll do is we'll obviously await and we'll do

the fetch because I don't want to continue if this is not

there.

And the fetch is going to fetch the same URL.

No changes there.

We know that this works.

And let's hold the response into a variable.

So let's call this one as response.

So there we go.

And now all we have to do is return this response.

We don't need to await this here, response.json.

OK, now notice here we are just returning this response.

We are not having this data and whatever that is.

The good thing is I can return this as it is.

Now, once you are returning this, then the next step

actually is almost in this file, but we don't do this

here because this is not the data flow.

Understanding the data flow is important.

Once you are done with this, this method actually first

gets loaded into main.jsx where you're actually

having this routing.

So this method needs to come up here.

Let's go ahead.

And since the method actually exists in the same component,

that is why a lot of people prefer to have this here.

We can just go ahead and say this one

is going to be GitHub info loader, whatever the name is.

And then once we are done with this,

we don't actually load the GitHub just like this.

We actually provide additional property.

We don't need to use the sandwiching,

but we need to provide additional.

The path will be same, the element will be same,

but there is one more element or prop,

which is known as loader.

This loader actually takes a method that whatever

the information you need to fetch, calculate,

whatever you need to do, just get me that method first

so that if somebody is trying to load this route,

I can do some of my advanced pre-processing on it.

Once you are done with this, the next question

in your mind would be, okay, we created a method

in this file, we exported, gave this method to this guy,

but how can I get the data from this whole method?

I have returned the response, but I need this.

This is a common mistake that a lot of people do this.

Hey, since you have exported this here,

let's use this method and grab the data.

No, no, you don't do that.

That's not a proper way of doing the things.

In this case, when you want to have this,

you actually use a hook which is given to you

by React Router DOM.

So let's go ahead and use this.

And this one is going to come up from React Router DOM.

The name of the hook is pretty simple.

You can guess that, use loader data.

Yeah, the property name there is loader.

And here is the use loader data.

Since this is a hook, you obviously know how to use the hook.

So it's a simple use loader, just like this.

It's a method, there we go.

And you can extract data from it.

So call this one as data.

Since all the variables that we named them

as a data.follower, so this will have that object

and you can extract the information.

So now technically it looks same

that hey, we have contact about.

Now if I go to GitHub, it technically looks same,

but it's actually doing a lot of pre-processing for you.

In the smaller application like this,

it is a little bit difficult to find

that it is adding some value for us, but trust me,

it is adding a lot, lots of value.

And this exact same pattern,

you don't have to use that much of hooks and stuff

is used in the next JS as well.

They also do a lot of pre-loading

and pre-processing of data.

A lot of fun stuff is there.

But by the way, this whole thing is actually available

in case you want to use classic react

in some of the applications,

you can actually go ahead and use that.

By the way, there's a lot of things

you can go ahead and work on with this one.

There's so much of routes available.

A one that we studied is use params.

So user ID, use params.

This is exactly what we studied.

We have so much more use submit, use route.

There's so much of advancement.

In fact, there could be a separate course

on this in itself.

I'll try probably in the future to create one search.

If you really want this one to happen,

let me know in the comment section.

I would love to do this as a course in itself.

So this is pretty good of one crash course

on the React router.

All the advanced things

which you probably are going to need are covered up.

Yes, there are still more.

Something like forcefully pushing the user onto some page

once we have logged in.

And all of this will be covered up later on

when we'll do some of the mega project.

But I think that is enough.

That is more than enough for you

as a React router crash course.

That's it for this one.

Make sure to leave a comment in the comment section.

I would be really, really appreciating that.

That's it for this video

and let's catch up in the next one.

Hey there everyone, Hitesh here

back again with another video

and welcome to our ongoing React series.

I hope you are enjoying this series

because I'm enjoying it so much teaching this series.

First of all, a very basic target for you

to hit that comment section.

We're expecting just a hundred comments if you can.

That would be great.

So just hit that comment section first.

Just do the comment, some appreciation

or maybe I'm just watching it on this date.

And let's continue the journey of React.

And now we'll take our journey.

Now we are pretty much comfortable with the loops,

with the hooks, pretty much looping the things,

variable fetch, API fetching and all of these things.

It's time that we explore a more advanced feature

in the React.

Now, one of that feature is how do we handle the data?

Now, one of the primary job of the React

is to handle the reactions

and that's why we called it as a React.

The reactions happens basically on two major factor.

The first one is the props and the second one is the state.

And you will be passing on this data

into various of these components.

Let me show you, we have already seen that

by creating a card component

that you provide some data to that card component,

whether fetching it from an API or just generating the data.

However you pass that data,

that data passing is very common.

And let me show you one such example

that is pretty common.

So let me share the screen first.

So this is the diagram.

Let's just say this is our dashboard, a main component.

And inside this we have divided the pages,

just like previously we have divided

into navigation bar, footers and whatnot.

This time, let's just say this is our home dashboard.

Inside the dashboard, there is another second component.

Then inside that there is one more component.

And finally, this is the component

which is showing some of the data

like displaying how many people have watched your video.

And if you look at the current perspective,

this is very troublesome

because this inner component is actually called

inside this component and this component

is getting called inside this component

and this component gets called to this component.

Right now we have no way, absolute zero way

that we can actually pass on data

from this outer component to this component.

In order to do so that, hey, if I want to pass on this,

I have to first from this element or from this component,

I have to pass on data to this component.

This component will further on pass on data

to this component.

And finally, this component will pass on data

to this component.

So you can see here that we are passing props

into these component.

And all of this is not really bad,

but one thing that is bad here is

this component is not using any data.

Still, it has to just access the data just to pass it on.

And for one level, it's okay.

But if you can see here,

the moment it goes on to second level or third level,

you can see where the problem comes up.

Some of the components which don't need this data

also have to access this unnecessary data.

And based on this have to evaluate

whether should I render, re-render and whatnot,

but they're not using this data.

Ultimately, this inner component is using that data.

So how can we resolve this problem?

This problem can be resolved by just one simple solution,

which is also termed known as state management.

Now there are lots of state management libraries.

Some are inbuilt into React, some only one.

And there are other third party libraries,

which you can study and we will study them.

So one easiest of the solution is,

let's just say we have this global variable,

that would be a good name.

And somehow we start a mechanism

that if anybody wants to access the data

all he has to do every single time is just go up

and ask this guy that, hey, I want to access this data.

If anybody else wants to access any data,

let's just say this element,

then he has to go and just go for this guy

and ask data to this guy.

There is no other way.

If you want to update anything,

if you want to access any information, you ask this guy.

If this is the central source of truth,

that's what it is happening here.

And this global variable is known as a store

in some languages or some frameworks,

not languages in some frameworks.

Every single framework will call it as a different one.

The one that we are going to study is known as context API.

So this global is known as context.

I'll show you more of that.

The idea is really simple.

We will have a separate strategy.

And the only thing is that all of these components

are aware of this global state.

That is all, that is all it is.

Now this concept can be a little bit tricky to understand

because of the code issues, not the concept issue,

the concept is this much that we have a central place

from where we can access the data whenever we want.

We can update any data in that central repository

from whatever the component we want.

This is the centralized concept.

But just because there are so many ways

of writing this exact same code,

there are multiple iterations of that,

that makes people confused that, okay, what is the syntax?

So understanding the data flow is easy,

but writing the syntax is a little bit tricky.

And that's why I'll walk you through

with a couple of syntaxes so that you can know,

okay, this one is exactly same, this one is exactly same,

and this one is also exactly same.

So we'll be working on with that.

So I have a small flow diagram for you.

So what we'll be doing is we'll start the project

and we'll create a React app, YVIT or whatever,

however we do that.

Then we're going to create a context.

The context, nothing, this is the context,

this separate thing.

Then we simply create a provide the context

or also known as context provider.

What do I mean by context provider?

Making sure that all of my components that I have

is aware of it.

They are not gonna be aware of them automatically.

There is a mechanism, there is a flow of the data that,

hey, all the components now are aware

that there is a global state so that I can access my data.

So this next step is this one, provide the context.

And the third step is consume it wherever you want,

however you want, you just consume it.

So this is exactly what we are going to do in this video.

And in the next video itself,

I'll walk you through one more iteration

of this exact same process,

but with a different minor tweaking in the code itself.

So you get the multiple idea

of how the code is being written.

So we'll just close this one

and we'll just get started with this one.

This is absolutely easy, nothing to be worried.

I'll just open up my, oh, there's something already running.

All right, so we'll close this

and let's go ahead and start this one.

So this one will be our new project, probably eight.

So we'll just call this one as create,

no, not create, my bad, npm create wheat.

And we'll be going with the latest, yep.

And we will be starting project names.

So this one is 08 and we are talking about mini context.

So let's just call this one as mini context.

Context API, that's exactly what we are studying.

And the best part about the context API

is you don't need to install anything else.

That's the best part about it.

Let me just dump this,

open this up in integrated terminal

and we'll just say npm install should be fairly faster.

The best thing which I love about it

is we don't need any third-party resources.

The context API is directly cooked in inside the React.

It was not there in the earlier version,

but as the React evolved as a library, it got this one.

And then we can say npm run dev, that should be easy.

And this is how the basic looks like.

We won't be even installing anything into it.

No tailwind, nothing.

We just want to go absolute basics.

Now first, let's try to create a problem.

That is the major thing

that how we are going to create this a problem first.

So let's just say inside the source,

we'll right-click and we'll create a new folder first.

Let's place everything inside the components.

And this is a legit problem that we'll have.

And new file.

The first file is going to be simple login.

We won't be doing too much into the login.

So rfce react, oh, nothing.

Oh, my bad.

It should not be login.

It should be login.jsx.

Rename login.jsx.

And now we can say rfce.

Come on, rfce.

There we go.

We can close this down.

So this one is not going to be too much of a problematic.

I'll just be writing the basic boilerplate code.

You can also write along with me.

That would be really, really helpful.

So first of all, what I'm trying to create,

this is a basic login.

So login has a username and a password.

It doesn't connect with any database.

It's absolute basic raw one here.

So let's go ahead and say that I will have a username

and that will be a set username.

By default, it's empty.

We'll also have a password field.

Let's just say the password field.

Nothing else.

It's not doing anything.

Now, once we have this,

we'll need that something that needs to handle

that we'll obviously have a login field,

the password field and a button.

So let's just go ahead and call this one as handle submit.

That's okay for me.

And inside this, we are not going to do anything.

So we'll just write empty slashes,

prevent the page from refreshing.

Yeah, whatever that is.

I'm not really bothered or much worried about this one.

In this one, let's go ahead and add those fields.

So first of all, we'll have a simple H2 which says login.

This is my login component so that I know

and aware about it.

Then we are going to have an input with the type of text.

Text, there we go.

We don't need this name or ID.

So I'll be just removing this.

And there we go.

Let's move it to the next line.

We'll be adding couple of fields onto this one.

Not too many.

Just the basic, however, we do that all the time.

So on change is going to be,

first of all, we need the value one,

but yeah, on change is also good

that at the time of changing,

this is the input field for username.

So let's go ahead and add the value as well

that you get the value from the username.

Once you have all of this,

let's also add a placeholder, the value of username

and what else?

I think that's it.

Okay.

Another input field that we are going to need

is first I'll add some of the spaces.

So line break there, space.

And then we'll be having an input of type password.

There we go.

And there we go.

My bad.

What is happening there?

Okay.

This is input type password, this one.

Okay.

We don't need this ID or this stuff.

Let's move it to the next line.

This one is also going to move the next line.

And again, really basic.

First of all, the value,

the value will be derived by password.

Let me scroll this.

And then we have on change.

On change, the value is going to be governed

by the set password that we have.

Let's add a placeholder

and that will say password.

And after this, we will be having a button.

Let's add a simple button as well.

Button, there we go.

This button is going to say simply submit.

And we'll be having an on click event on this one

since we didn't create it any form.

So we're going to say on click.

And on the on click, this is handled by the handle submit.

So this kind of a component you have always built.

Now we have a simple value.

How it is handling, we'll talk about that.

First, let's create what the problem, what we have.

Now, similar to this component,

you will also be dealing with this

in the real world application as well,

which is going to be profile.

Profile, if I can write that.jsx.

And let's go RFCE, very basic.

And in the profile, all what I want to do is,

let's put a space, is I want to display a username.

Right now, I don't have a username,

but somehow I want to display the username.

So how can I do it?

And I am pretty sure you are not understanding

the gravity of the situation right now.

This is so much of a big problem.

And you might be saying, hey, what's the deal with that?

Why is it so much of problematic?

I can go simply into my app.jsx or main.jsx

or any place at all.

And I can just go ahead and load this up.

Like for example, in the app.jsx,

I can go and remove all of this content that I have.

So let's just go ahead and remove all of this.

And I can load these component here.

For example, I'll just say H1 here

and I'll say React course or React video would be good.

React video for context API.

And then here at this place,

I can load the login component, just like this.

And I can go ahead and load the user component,

not user profile.

Profile, here you go.

And the profile component, is there any issue with that?

If I reload this, there shouldn't be any issue.

Let's go ahead and inspect this.

This should be loading up.

Use state is not defined.

My bad.

We're using state here.

So this one is going to give us use state.

I don't like to edit out these problems

because these problems are something which teach you stuff.

So as we can see, there is nothing wrong with this one.

We are able to load this one.

Now your first initial reaction would be

that if I can load all of this,

probably I can just pass on data of the login

and all in the app.js and from here I can pass on this.

But imagine the situation that from the profile,

this data actually goes to other third component

which are loaded inside the profile.

Just like here, I can add more things.

Just like I was able to load in my app.js,

this profile thing, I can also go ahead and load more stuff.

So I can just go ahead and literally say more component.

So what's stopping you to have more component here?

Maybe you are having a dashboard.

If I can write that component,

it's hard to type and talk at the same time.

So imagine that this is a dashboard.

On the dashboard, you have left pane and right pane.

You want to display the data on the right pane,

but right pane is not alone.

For that, there is a top section and bottom section.

So two more components.

In the top section, you want to display this data,

profile username, but the top section

is also composed of smaller components.

So how long you're going to be passing

these components back and forth, you get the idea.

Now you get the point that we need some better solution.

And this is exactly why we have the solution up here,

that we want to create a simple global state

where we can add all of these things.

And this is known as context in the context API

and the context provider.

But in the case of Redux, I have that video as well.

We will be talking about that.

You'll find that video in the playlist as well.

So you can see that there we call it as store.

So call it store, call it context.

The concept is exactly same.

We need a centralized repository,

centralized store where we can have all of this data.

This is exactly what we're doing.

So now it's time that we understand

that how we can actually implement the context.

No extra library needed.

The step one is to create a context

and then to create a provider.

So first of all, let's understand

that how we create this context.

It's a simple step.

If you're taking the notes, you can take them as well.

All right, so we'll come back onto these logins

and profile in a minute.

First of all, let's close this one.

Inside this, let's create a new folder

and let's call this one as context.

Creation of the context has two parts.

Some people do that.

These two parts into separate files.

Some people do that in one file.

Doesn't really matter.

I'll walk you through with both scenarios.

First one here, the basic.

The second one will be a little bit more advanced.

Not advanced, but yeah, easier.

So let's create a new file.

And first we are going to call this one as user context.

By the way, you can have multiple contexts.

Since this is not going to return any JSX,

I'll just call this one as just the JS.

Now this context could be for multiple reasons

or multiple resources.

This one is for user context.

Another thing could be for product context.

Another thing could be tweets context.

So just like everything needs a context.

In the real world, this is exactly where it comes from.

For example, fan.

You don't understand anything with the fan.

It could be a ceiling fan.

It could be a table fan.

It could be a fan in terms of a Bollywood fan,

Hollywood fan, a YouTubers fan.

It has a context.

It needs a context.

That's exactly what we have.

So we're going to go ahead and say, hey, React,

let's come React.

And React directly gives you this context.

So all we have to do is user context, react.create context.

Just like you import use state and all of that,

we have the create context as well.

And after that, all you do is export user context.

So your question might be, okay, we have that empty repo,

the store which will be holding all of this related

to the user, but where is the data?

There is no data.

You are absolutely correct.

There is no data when you create the context.

That's the step one.

Now, once the context is created,

the step two is actually to create a provider

or the context provider,

because right now it is not usable.

So something needs to be a central man

which can allow me to access the data

as well as feed the data into that.

So let's go ahead, right click and create a new file.

And we'll be calling this one as user context provider.

And this one is actually .jsx because this is a wrapper.

As I told you, we need a wrapper.

This whole thing, everybody should be aware of it.

The way how we do it in React is we create a wrapper.

Just like for example, in this case,

if I go into main.jsx, you can see that this React strict

mode is a wrapper for all of my component that I'm creating

because the app further down the road,

app actually loads these guys.

So all these guys are actually also loading

in the strict mode.

Why?

Just because of this one.

This one is wrapping the entire application.

So we need to create a context provider

and we need to learn that how these sandwiching rule

actually applies.

So it's actually not really that bad.

It's actually simple.

So we'll be having first, let's just say React

and we'll be using, are we going to use a use state?

Probably not.

Okay.

But we'll see that in a minute.

And we need to import the context.

That is the most important part.

So now you have access to the context

which you just created.

And now we'll be using that.

So the first thing that we are going to do in this case

is how to create this context.

We have this and this.

Now let's go ahead and create the user context provider.

Yeah, that's a good name.

User context provider.

This is nothing just a simple method, just like that.

A simple arrow method, just like that.

Okay.

So far it's good.

Now this next step is to export this.

So go ahead and export default user context provider.

Now this is where the functionality goes.

The first thing that you should know

or you should be aware of this

is that there will be more components

which will be coming inside you.

Just like we use the outlet.

Yeah, exactly same concept, almost exactly.

So first thing is, as a prop, what you'll be getting?

You'll be getting children's.

So just write children, if I can write that correct.

You have to actually return that children back.

But before that, we need to actually say that

what is the data that you'll be using

or something like that?

So I'll be saying that, hey, I'm having a state.

So I'll be just calling this one as user

and then I'll be having a set user.

This is right now an empty object.

That is also good.

But right now we don't have any users

or rather having an empty object.

I'll just say null.

I have nothing as of now.

After that, I'll just go ahead and use the return

with the parenthesis.

And what I'll do is I'll be using this user context dot provider.

And yes, this is a syntax.

We cannot do anything for that.

Come on, user context dot provider.

And this is how it looks like, user context provider.

This is something which is given to you by default.

The moment you use the user context,

it automatically gives you the access to provider.

The reason for that is React gives us this create context.

The moment you have used this,

this was given to you by the React itself.

Now inside this, you actually do nothing

and you just add a children.

This is the syntax.

But alone, this is not useful

because now your entire application

will be aware after one second.

We will use it exactly just like we use this strict mode.

We will be using it exactly almost that.

But right now it is having the access of it.

But the reason why we created this user state

so that this data should be accessible to all the children.

That's the goal.

If you have more data, add more things here,

add more calculation.

Maybe you want to have a fetch request

and whatever comes back from the fetch,

you want to give the access of it to all the components,

you do exactly like this.

But right now I have a variable

through which I can access the data.

I have a method through which I can set any data

into this user.

So I have access to all of this.

Now I want to pass on this.

So the way how you do it is simply add a value

and you simply say as an object

that I want to give you access of this user,

I also want to give you access of the set user

so that you can read the data

as well as write the data in this state.

All right, so that's the next step

or the step two of having all of this.

But now I know that my entire app.jsx

is actually loading all of this.

So somehow whole of the things which are inside the app.js

should be aware of this,

how that's going to happen.

Very, very simple.

Instead of wrapping it into this fragments,

I can just go ahead and say,

hey user context provider

and it actually imports it from the perfect place.

I'm happy with this.

A user context provider and we wrap this up

just like that here and there we go.

The moment you added this, that is it.

Now all of these components which are wrapped inside it

are aware of that data.

Now you could have technically,

you could have gone into app at this main.js

and could have added here.

That's okay.

Now your app is aware of it inside any component of the app.

He's also aware of it.

He or she, whatever you want to term it as.

So this is really nice.

Now we have actually set up the boilerplate code.

And this is exactly the same syntax that you'll be using.

Your data might be tremendous amount in the smaller amount,

doesn't really matter, but now you have set up the stage.

So this is a boilerplate every single time you have to do.

Now what's important is how do we actually send data

into this state and retrieve the state data

from back from it.

So obviously we have already set up the stage for it.

Login will be responsible for setting the data

into this one.

So how do we use it?

That's where hooks comes up.

And hooks obviously comes from this one,

just like we have used a state,

we have a hook known as use context.

So far, all the hooks that we have used,

they don't have this much of boilerplate work,

but this one has.

And it has its own advantage, you can say.

Now we have this use context.

So what can I do with the use context

is you can actually extract values from it.

Remember the values?

Yeah, these values, these are props.

You can extract this data.

So in the login, I don't need a whole of data.

I just need a selective data

because I'll be just adding value to this state.

So I'll be saying give me that set user,

set user that you have thrown it

and how you have thrown it just by saying use context.

And inside this use context,

you cannot just go ahead and use it.

You have to provide a context

that what context I'm talking about.

I'm talking about the user context

or the products context, I have to.

For this, I have to bring in this.

So I'll be just saying user context,

bring it that in and provide that

because you can have multiple contexts.

Context for authentication, for user, for products,

different contexts for different things.

Once I have this one,

then all I have to do here in the handle submit,

once the submit button is click,

I'll just update the user with that data.

So first of all, just take this event and prevent default.

Once you have done this, just use the set user.

And inside this, the set user will be adding an object

which will have the access to user name and password,

whatever you are entering, it has that.

Now inside the central store,

I literally have the access to this.

So this one is now finally having this value

and we have the user name and the password access here.

Once I have access of this variable

and all these things in here,

any of my component can go and ask for this data.

How can it ask?

Yeah, it's really exactly same process.

If you have noticed here,

the way how we extract the set user,

which is a method responsible for setting the data,

I can extract the other thing as well.

So let's go ahead and do this.

I'm pretty sure now you can do this as well.

So const will be saying, hey, let's grab the user

because don't want to access set user,

I want to access the user

and use context provide the use context.

Again, this is not how you should write it

because it didn't imported that.

So I would love to grab it, there we go,

and now write it use context, user context basically.

Now, since I have access to this, I have to do nothing.

I have to just say, hey, this is going to be a user,

but there might be a case that there is no value

into this one.

So I can just do some kind of optional rendering as well,

conditional rendering as well.

So I can say if there is nothing inside the user,

basically it's null,

then go ahead and return a simple H1 that says not logged in.

And why are you having this issue?

Not logged in.

Oh, my bad.

Yeah, there we go.

So if we have the user, there we go.

So very basic, very basic code.

So if we go back here and hit a reload,

and it might be that I have missed some of the stuff.

Okay, use context is not, okay.

Here we are using use context, we don't have it.

Really basic, we can go ahead and say use context.

There we go, should be all happy, there we go.

Just for the sake, let's reload.

It says not logged in as soon as I do a Hitesh here,

the password field is just a dummy field,

doesn't really bother us much.

So if I submit this, okay, we have some of the issues.

Let's say where we are having this issue.

It says objects are not valid react child,

find object with the keys, username and password.

Ah, yeah, my bad.

This needs to be fixed, let me go ahead and fix this.

So the error says not a valid react child,

username, so I'm pretty sure I know where the error is.

This is actually in the profile.

This user is an object

because that's what we actually added.

If you remember in this one,

we actually added an entire object

and we cannot display the entire object just like this.

Hey, dump all the object.

We need to extract the properties out of it.

So user.username, in this case, that should fix the error.

Let's go back and I think it should, let's see, no worries.

I just go ahead and say again, Hitesh, not logged in,

submit, okay, it works,

but the more component should be much smaller

and the profile Hitesh should be bigger, okay, no big deal.

We can actually just cut this out

and just replace it here.

That is better, yeah, there we go.

So we have this one and by the way,

if I go ahead and remove everything up here

and there we go and submit it, it says profile

because hey, we are still submitting the data.

It's like empty strings are getting submitted.

It's not null yet, but if I refresh this, it's not logged in.

So again, we have to do much more check,

but the idea is not about checking.

We'll do that in the later on videos.

The idea is that how any of the component was,

right now the components were in the same page,

doesn't really matter,

but every single component can now access

without actually doing a prop drilling,

which is considered as a pretty bad practice in React.

My login component is not aware of the profile.

I don't really care about it.

It just can set the data into this global store

or the global context from wherever it likes.

It just needs those methods to set the data.

The profile on the other hand,

it doesn't really care who's passing the data.

We are literally passing nothing.

It can extract the data from that global store directly.

And all I have to do is set up those boilerplate codes.

And after that, all I have to do is make sure

all of my components are aware of it.

Either you can do it in app.js if it makes sense.

Otherwise you can take literally this exact same code,

take it into the main.js and wrap your app with it.

That's exactly all the components should be aware of it.

That is the whole idea.

So I told you it's really not that of a bad situation

or a bad issue itself.

It's just like, it takes a little bit time

to adjust with these.

Like I have to create a context,

then the context needs a context provider and all of that.

So basically the step is simple.

Create context, create provider,

make sure all of the people are aware of that

there is a context so that I can take the data

and send the data.

That is it.

That is your introduction to the context.

I'm pretty sure I have dumped it down enough

so that anybody and everybody can understand it.

If you enjoy these videos,

definitely do leave a subscribe to my channel

or hit that like button.

That really means a lot.

If you drop a comment taking out of your valuable time,

it really, really motivates me to make more such video.

It really takes a lot of effort.

All right, so that's it for this video.

Let's go ahead and catch up in the next one.

Hey there, everyone.

Hithai Sheer.

Welcome to another video in our React journey.

I hope you are following this journey along.

And if you're watching this in a long one-shot video,

that's cool even.

But don't forget to leave a comment in the comment section.

It's my motivation driving factor.

So hit that subscribe if you haven't already

and it's a humble request, leave a comment.

Just a hurt emoji, anything will do, just leave a comment.

So let's continue our journey of the React

in the same format, the context API.

I'm pretty sure after watching the video

probably more than once, you now have a particular idea

of how the context API work.

It's pretty simple.

Create a context, create a provider, and that's it.

And make sure all of your components are aware of it.

We will take this journey

into a little bit different perspective

so that you get the idea,

okay, this is how things are designed.

And in this one, we will follow another way

of writing the context, which is by using a custom hook.

This custom hook is nothing,

just like we were always using the thing,

use context every single time at every single place.

And we have to, every single time,

provide that, okay, I'm talking about this context.

I'm talking about this context.

We'll just do everything all in one place.

This is also another style of writing code.

And since people use these different style of writing code,

that is exactly the reason why the context API

looks a little bit difficult.

But now we have gone through the previous video,

this one is going to make so much sense.

Again, you don't have to worry about the CSS part.

Yes, we have the tailwind.

Yes, we have a couple of good, nice looking stuff,

but you can just grab them from my GitHub repository,

copy, paste, nothing to be worried there.

We'll only talk about the code part itself.

So this is what we'll be designing, a simple theme toggler.

It looks simple,

but it will be a good exercise to practice the stuff.

So notice we have a theme toggler,

which toggles the theme only for the card.

That's what we are going to be designing,

because this component will be aware

of what the theme toggler value is.

It is off or is it on.

Based on this, we'll be changing this.

Now we're not gonna be writing too much of the CSS.

We are dependent on the tailwind,

because tailwind allows us to have these dark mode classes

directly cooked in from the CSS team itself.

The way how they do it actually is,

if you check out their playground,

they actually mentioned this on their playground.

There's a right button here, which says this toggle.

If you right click and inspect this,

the way how they do it is actually,

if you toggle this one, this one is here.

Let me just go back at the body.

So this is here.

So notice here in the, not in the HTML,

actually this is a part of the header itself.

So let me just search this.

If I can search it here somewhere,

search this and I'll just say dark, it should be dark.

So there we go.

So in the top here, in the HTML portion itself,

we can see in the top HTML,

they are actually naming this class itself.

The moment I do a toggle, this dark actually goes away.

It's actually light by default.

And when I toggle this on,

they actually manually inject this dark.

Once I have this dark theme,

now you can notice here that the dark classes

are written and baked in.

So if I go ahead and zoom into this one,

notice here, this is the dark.

So the dark class automatically takes in place

when the HTML automatically marks you as a dark.

So this is exactly what we'll be doing.

This is our working functionality

inspired by the tailwind itself.

So let's go back and try to have a simple tailwind.

We'll create a fresh new project.

And with this project, we'll install the tailwind.

So let's go back and close this one.

Wheat is our way to go.

So let's just copy this

and we'll be installing the wheat into a fresh new project.

So let's go ahead and first, let's just stop this.

Okay, let's open this up.

Control C, stop this, remove this,

and we need one fresh one.

And we'll be saying, first of all,

let's remove all of this

because we don't need all of this data context.

I can right click and close to the right, yep.

Now we just need to create a fresh new project.

So for that NPM create wheat,

and we'll be using the latest and yeah, that's it.

Let's name this one as zero nine.

And this one is a theme switcher project

that we have this one.

Totally depends on you, what do you want to call it?

I'm going to call it as theme switcher.

Theme switcher, and we'll be saying,

we'll be using react for this one, again, JavaScript.

And let's open this theme switcher into my terminal

and remove the old one.

We have to say NPM install.

This is probably going to take some time.

Depends on how much my internet is doing.

And then we have to actually install the tailwind

and let's install this.

After this, we have to change the content just like this,

copy and open this up.

Inside the tailwind config, we'll change the content.

There we go.

The next step is to bring in the CSS.

We can copy this, go back, source, index.css,

remove everything, paste it up here, save that.

And probably we don't need into app.jsx as well.

App.css, my bad.

App.css, we probably don't need anything inside this.

Anyways, we are not much worried

about how things are going on.

We just want to have these things

and practice our context API.

NPM run dev should actually run the project.

And there we go, very basic, nothing to be worried.

All right, so let's close everything.

And now let's talk about them one by one.

The first step is to grab our basic boilerplate card

and how does it look and all of that.

So first of all, I'll just remove, I'll add a folder

and I'll call this one as components.

Components and the components will have basically

two component in itself.

The first one being a new file.

This one is just basic card.

So let's call this one as card.jsx.

And all we have to do into this one,

I'll just directly bring the card from my notes itself.

Nothing, just the basic boilerplate card, as you can see,

there is nothing reactish about it.

Plain vanilla react, or not react even, just the tailwind.

Too much of the classes, some images

that we are borrowing from Pexels,

some of the Apple Watch and stuff, so that is it.

That is your card.

Now let me go ahead and create another component

which is the top part of it,

in case you saw this, this top theme toggler.

You can also have your own input button for this one.

Nothing is going to bother you,

but we are just making it a little bit stylish

so that it looks good.

Right click new file and we'll be calling this one

as theme button.jsx.

And again, our FCE, react functional component

for theme button.

And all I'm going to do is just replace this return

with whatever the return I have in my notes.

And let's replace this, there we go.

As you can see, this is nothing more than input button

which has some of these values, like value is nothing.

On change, we need an on change button here as well.

We don't have that, so let's go ahead and create that.

That is all.

Now theme mode and everything,

we will work on to this one.

First, let's have just the on change button

so that it doesn't crash.

And in fact, the theme mode,

we'll be just removing this,

this check dent entirely will be removing this

so that we can later on work on this one.

Right now, this is all good and okay.

The only thing that's bothering is this on change button.

So let's go ahead and have it.

And we'll be saying on change button does nothing

but we are having this one.

Okay, so both of our components are ready.

Now the idea is these components

are not aware of each other.

I want to create a centralized repo store or a context

so that both can be aware of this.

So for this, we already are aware of this

that how we create the context.

So in the last video,

I showed you that we simply go ahead and create a new folder.

You want to keep it in the folder or not,

that's your choice.

I'll just say context, context, yeah, that's good.

Or context, there might be other context as well.

Now what you'll notice is in the last video,

we worked through with the context

almost similar to this one.

So we have this context.

We have two files here.

First one is user context,

but technically we didn't do anything inside this.

It was just creating a user context.

The meet part of the information

was this user provider where we created the provider.

So we have this provider.

Now this provider should be available to every single place.

That's why we call this one here.

But another thing we saw that,

that every single time we have to do this

inside the component, like for example, in the login,

I have to do this kind of a stuff.

Use context and then have to provide the context inside it.

Here also in the profile, we have to repeat this.

Use context and provide the context to it.

So how about if we actually accumulate all of this stuff?

Is that possible?

Yes, it will save us a lot of time in later on.

So we can actually improve our boilerplate code.

And this is exactly what we'll be doing.

So in this case, what we're going to do is

we'll be just simply saying that, okay,

we will be saying context, create a new file,

and we'll be calling this one as theme.js.

All right, so how we actually use this one,

this is pretty interesting.

First of all, let's go ahead and import two major things

which we'll be using.

The first one is create context that we use there as well,

as well as we were all the time using this use context.

Two things in the components,

use context was getting used.

The create context for creating the context.

So these two things, now we are bringing them all together.

The first step was to create a context

where we were having all these things.

So previously, if you remember,

I'll just open this and compare it again and again

so that you don't get confused with this.

It's a good comparison here.

So if I open up this context,

so this part has nothing at all.

This thing is having some of the interesting stuff.

So if you remember, this was our state

and technically what we were doing is

we were providing this data inside this.

There is another way of doing this

much more easier than this

because ultimately everything is going inside this.

So when you're creating this context,

while creating this, you can make it aware

that what are the default option

or what are the data which is available to you.

So you'll see the syntax almost similar to this

where somebody says, hey, theme context and create context.

While creating the context,

you can actually provide an object in here

directly with the information.

Previously, we were actually providing this

into a later stage when we were creating the context

and provider and all of that.

But this create context is also perfectly capable

of taking the data.

Now we don't define the data here.

We actually provide just a general information about it.

What do you mean by general information?

Let's just say we have this theme mode.

So by default, this is just a variable whose value is light.

But I also want this ability to toggle the theme as well.

I can just go ahead and work on with this one toggle theme,

but I'll show you what happens when there are multiple values

like there is a dark theme, which is just a method.

I don't know what this method does or how it function

or how it works.

It just is a method.

Similarly, we have a light theme, which is also a method.

How does it function work?

I have no idea at all.

Okay.

Now we also saw that every single time we were using

in the main.js, like theme provider is the context.

So theme provider dot provider.

So this was going a lot.

And in the previous one, we saw in the app.jsx,

we have to use this user context provider.

And if you remember this one, yeah,

we have to use this like this user context dot provider.

How about we don't do it like this,

we actually change the syntax.

And again, this is the reason why people sometimes

don't understand because there are different ways

of writing a different version.

If you're comfortable with that version, that's okay.

If you're comfortable with this version, that's okay too.

So in this one, we go ahead and say export const.

And we simply go ahead and say, this is my theme provider.

And instead of saying all these children and stuff,

I'm just saying that, hey, this is theme context dot provider.

So that I don't have to say literally,

I'm actually literally exporting a variable

whose ultimately value is theme provider dot provider.

And that is it, that is all what we are doing.

Okay, so anywhere, instead of using theme,

like theme provider dot provider or theme dot provider,

I can just simply say now theme provider.

That is it, that's the meaning of it.

Now we will also create a hook

so that we can use it in all of that.

So let me go ahead and work on with this export default.

And in this one, we'll be creating a function

and that will be used theme.

And what we're doing in this is use context theme context.

So theme context is already available to me.

So I don't have to import or export it.

I can just directly use this.

Now anybody who uses this hook, which is used theme,

he don't have to pass on this context.

Like previously we were saying use context,

then bring in the context and add value to it.

And literally what that was doing is when we do this,

this create context get all of that value.

That is how the store is being created internally.

So this is also alternative version.

Let me summarize this

because I know this can be a little bit confusing.

Previously, we were creating a context

that context was doing nothing, nothing at all.

We were just having this user context, okay.

Step two, we were using this user context.

Now, if you remember from this,

we were creating a provider, which was wrapping.

And the reason why we were having this,

so that wherever we use this user context provider,

ultimately what the code runs is user context dot provider,

which actually accepts the children.

So all prop goes inside it.

Now in the newer version, what we are doing is

we are actually merging them together

so that we don't have to create this context separately

and have this one separately and provide the values.

What we can do is just simply create the context

and whatever the value functionality,

whatever you want to incorporate,

you just directly give it directly inside the create context.

Definitely, we don't incorporate the functionality

in this one because that needs to go separately.

And what we do is theme provider directly gets available.

We don't have to extract this every single time,

just like we do it here, user context and children wrapping.

No, we are aware of it.

We simply directly use it like this.

And again, one more hook,

which actually helps us each of the component

to not have the import statement and all of that,

just use the hook directly, hook is aware of it.

And I know which one I'm using.

So one file consists of everything.

Okay, yeah, little bit different,

but how the usage of this works

and most of the tutorials and everything

that you're going to see, this is the way how they use it.

The way how I showed you to you in the previous one

is so that you understand, okay,

these are the pieces that I need to do.

In this one also, these are the exact pieces I'm doing,

creating a context and making everyone aware

that the context exists, that's all.

And this portion is literally for everybody

so that every component can directly use my store.

So three parts, first, the second one and the third one.

That's exactly still onto the same page, okay.

Now we are actually onto this one,

how we can actually use this one.

Now we'll be using theme provider.

Previously what we were using,

previously we were using this user context provider.

If you don't remember this,

in the app.jsx user context provider.

Ultimately it's a theme provider,

so that's what we'll be using.

Let's close all of this

and enough of the previous discussion.

Now let's go ahead and continue with the newer one.

So now I'll go into app.jsx

and this app.jsx has a couple of values and stuff

that we have to actually work on with this one.

Now what I can do here is inside this app.js,

I can have couple of states

and their modes and stuff like that,

but first and foremost,

what we have to do is remove everything from here.

This is our app.jsx.

Let's just go ahead and remove this.

And I do have some of the values up here.

So let me just go ahead and grab those values

and we'll be just copying and pasting.

So this is my div and what I'm doing is

I'm bringing in the theme button and the card,

which it didn't auto-import it.

So let's go ahead and write this again.

So theme button.

Did we wrote that in the lower case?

No, theme button should be there.

Theme button.

No, no suggestion.

Okay, anyways, let's go ahead and bring them up manually

in case it doesn't.

Import card from component card

and import theme button from components.

There we go.

We should have used the index file here.

Let's see how does it look?

And there we go, we can have this,

but it has no effect or impact on this one

because they are not linked together.

Now comes up the advantage is we only need one file

to be there, which is just the theme provider.

Remember, theme provider is not an export default.

So you can now just go ahead and say,

we have to say in the curly braces.

And then we have to say this one is theme provider.

There we go.

And it comes from the context theme.

Now wrap this up.

So every component is aware of it.

You wrap this up in the app.js or wherever you like,

you can just wrap this up.

Okay, now everybody's aware of it, but not like this.

Everybody's not aware of this.

The way how we were extracting the value,

this is exactly how you extract the value from it.

So in this theme provider,

previously we were saying just one word,

now we have a parameter known as a value.

And this can grab all the values

that you have mentioned in your theme.

The values like this, theme mode, dark theme, light theme,

this is all.

So I will actually bring this one here.

So I'll just say, hey, give me the object of theme,

theme mode actually.

And then we have dark mode.

I'll just copy this.

Otherwise I'll make it, it's a dark theme.

Copy that and paste it.

And the first one is actually theme mode.

Copy that, paste it, dark theme,

and we do have a light theme.

Okay, so all the functionalities here.

Now right now they are empty.

They have no idea how this functionality will work

and all of that.

But we'll actually work with the state here a little bit.

So let me show you how the functionality,

now we are writing the functionality part.

So it's super easy and nothing to be worried on.

First of all, let's go ahead and have a simple theme mode,

set theme mode, and we'll be setting this

as a light by default.

Remember, this is exactly the theme mode.

Now we have a value of it.

So previously it was just empty.

It could have been empty right now it's a default value,

but it could be empty, it's a variable.

These two are functions.

So what this function actually does

is these are functionalities.

So what I can say is let's declare these functionalities.

So these are functions, dark theme, just like this.

And we'll be having an arrow function just like this.

All it does is when you call it, it changes dark theme.

We'll check the values to the dark.

Similarly, we have a light theme,

which go ahead and set the theme to light.

That is it.

All we are doing is changing the state value.

But changing just the state value is not enough.

First of all, you are just changing the state.

This has no effect into your webpage.

So how does it work?

If you want any event in the webpage,

then you have to either make it happen on some events

like clicks or on change or all of that.

If you want to happen it based on some state change,

then you have to use use effect, a simple hook here.

And the way how it works is really simple.

You provide a dependency array to this one.

And in this case, the dependency of the theme mode.

The use effect hook simply says that if any value

in the dependency array change,

I will re-render this component.

And when you re-render this component,

I will actually want to change that.

I want to run some piece of code.

What that piece of code,

this is where your classic JavaScript comes

into the picture.

I'll just go ahead and say, hey, I want the document.

This document will be able to run a query selector.

I want to find an element, which is known as HTML.

And inside this, I do have the classes,

a lot of class list.

And first of all, I want to remove.

So remove everything that's there.

Not just the dark, even if you have light,

just remove everything.

And again, this needs to go into double quotes.

Otherwise it will not able to find this or single quotes.

It needs to be a string.

Once that is being done,

then I want to again run the same query.

But this time I want to add a theme to it,

which is theme mode.

Whatever is the theme mode value, just add this.

So based on this.

So we have defined the functionality yet.

So functionality resides in app.js.

But since this functionality I was able to set inside this,

remember theme mode is the value.

So now my card actually can grab this theme mode value.

And this theme mode value can be manipulated

by the theme button.

And the value can be grabbed by the card itself.

So first of all,

let's take down that the how the card

is actually going to grab it.

Do you really think card need to grab the value?

No, not at all.

Not at all.

This was a trick question.

Your card don't need to grab the value

because in the app.js,

the whole thing is actually being governed by the HTML.

Tailwind feature, not to us.

I hope you understand that.

Okay.

So the functionality part of grabbing the values

also are taken care of for me by the tailwind.

Does my theme button need some work?

Yes, your theme button needs some work

because this theme button,

first of all need to grab some value from the context.

And then based on this,

it will be able to change that value.

So first of all, what you have to do is grab the value.

So how we can go ahead and do this,

we can go ahead and have some values.

And this time I'll be directly grabbing the value

from use theme.

Remember use theme is my custom hook that I've designed.

What all the values you have inside it,

you can just go ahead and grab those values.

So for example, I have this theme mode,

I have this light theme,

and I have this dark theme,

whatever the name of your function,

I have all the access to this one.

Now, the next step is that I have to just based

on some on change button.

So if there's a change in the button,

I have to do all of this.

So let's go ahead and work on with this.

And I'll just go ahead and say if the value is checked,

what should happen if the value is checked,

then the theme mode means it's dark.

So if it is checked, it means it is on the dark.

Now, what happens when the on change button?

So on change, you just toggle the value into it.

So really couldn't be much more simpler than this.

So, oh, we have already written the on change button.

All we have to do is now just get the value.

So if the theme mode is dark,

it's change it to a light theme or dark theme

or whatever it is.

I think we can actually write a better code than this one,

although this will also work, I hope so.

First of all, let's grab the value.

So we'll just go ahead and say dark mode status.

I'll grab the status from E and we haven't got the E yet.

So this will give us the event and the event from that,

we can just go ahead and grab the current target dot checked.

This is how you grab the value from the checked,

whatever is your value.

So right now the value is empty.

Yes, there could be a chance the value could be empty,

but we'll set the value.

So we'll checked it.

And we're going to go ahead and say now

if the dark mode status, then run the dark theme

else just run the light theme.

So light theme methods will actually grab,

we have grabbed these methods from here.

And now what will happen?

This dark theme will be going up here

and we will be able to set the theme mode into the dark.

And then that's it.

And similarly here else,

just go ahead and use the light theme.

We brought the light theme.

The functionality will come from here

and then the value will be rerun by the use effect

and we'll be able to change the value.

So I think that is it.

We need to just save the value and let's see.

Now we have a toggle.

It still doesn't work.

Let me just check what happened and console.

It says the value prop is required for the context provider.

Did you miss a spell, forget to pass it?

Okay, I didn't forget it.

I actually pass the value.

Yes, it looks like I have passed the value

and should be all good.

Theme provider value.

Let's check our provider theme as well.

So if we missed out some value into our theme as well.

No, it looks like all good.

Let me quickly check that where I'm missing that value.

Oh, my bad.

I actually forgot this in the previous teaching class as well.

This is not an issue.

I didn't forgot the value.

I just needed to refresh it, but it doesn't work still.

The reason for not working is actually not

based on some of our mistake.

It's actually a configuration we forgot to do.

So go into the tailwind config.

And the tailwind config, you have

to actually mention that how the dark mode is actually

getting used.

So here the dark mode is actually

based on the class itself.

Yes, literally you have to say that.

Once you actually do this, now your theme toggler will work.

So there we go.

So really great, great example.

But again, I find it, first of all,

when I studied about this, I found it a little bit

difficult to grab my head that how this is all is working.

Again, remember there are always three steps onto this one,

no matter what or how the code is being written,

because you'll be working with other programmers

as well in your company.

Some of them use this syntax.

Some of use that syntax.

But the process always remains same.

First of all, you create the context.

Then you make sure everybody's aware of the context.

And then if any component want to consume the state,

add values, get the values, whatever,

that's where you use the use context.

Now some people use the use context

within the component itself.

It's good for them.

And they always, always have to provide the context to it.

Some people prefer that all of the things,

the logic should be written in one file.

So this portion should be now very clear to you.

That hey, we have the use context.

Let's have it.

Let's create a customized hook so that people can grab

directly whatever the values are there.

And the next step is, this one is pretty easy.

You have this, don't have this, doesn't really bother you,

because instead of writing theme context.provider here,

you could have just written it into our app.jsx as well,

the theme provider.provider.

Doesn't really add any additional value,

but you'll see this happening quite a lot.

So I don't think so.

This is bothering you.

Write it here or write it into the awareness file

I call it as app.js, totally okay.

What bothers some people is this portion,

that hey, how we are doing all of this,

because this is the create context.

Now, since we have the ability that create context

can directly have the context,

whatever the data and everything you want to pass it,

some people find it much more easier

that I don't have to bother about children's and whatnot.

I just add my data here, that's it.

It's purely a JS file, not the JSX file.

That's why some people love it.

Coming back onto the previous example,

now you will be able to understand it much more better.

In this example, this file is a pure JS,

but it doesn't do anything.

It doesn't take any context.

It just is literally you are exporting the user context.

That is it.

And in this file, we create the separation of the JSX

because literally you are passing some JSX.

The thing which should be done

like value of the user and stuff,

which can also be done in the app.js or main.js,

we are actually doing this here itself.

That is the whole reason for the confusion.

And again, previously we were exporting

this user context provider.

This user context.provider goes here.

In that file, we are just exporting it directly.

So again, it's up to the choice.

If you ask me, what is my choice

and what do I use professionally?

I use this one where I have just one file

because in this portion, I think clarity is much more.

I don't have to worry too much.

It's a pure JS file, not JSX.

I can write all my data in that context as well.

I can create a simple hook,

which actually is aware of it.

So one file for one context,

much, much simpler.

And as your application grows,

you have much more of the context,

then this approach is much, much better.

And to be honest, in most of the complex project

that I work, context doesn't make it up.

I most of the time use Redux,

these days Redux toolkit.

So I have to use some kind of a bigger library

for handling these kinds of state.

But yes, for the interview perspective

or the purposes of many projects,

internal company projects,

the awareness and the knowledge of context API

is much, much needed.

So I've shown you both of the ways

and I'm pretty sure this will take a little bit time

to digest.

So don't be in a hurry, take your time,

go through the videos, both of the sections again.

And once you'll write the code manually,

then it will make much more sense, much more clarity.

I've tried my best to slow down the pace.

Each line should make sense to you.

Yes, it takes a lot of effort.

That's why saying one comment in the comment section,

just a heart would mean a lot.

So that's it for this video.

And let's catch up in the next one.

Hey there, everyone.

Hittai Sheer back again with another video.

And yes, I was gone for a little while.

I hope you missed me.

If you're watching it one go, then it doesn't make sense.

But anyways, finally, I'm back

and I'm trying to put as much as content as I can possibly

with a given free time apart from my job.

In this video, I'll be continuing the journey

of our React.

We have been into the course of the React,

which is a project-based course.

We have built so many projects

and now we are kind of brushing up our skills

on the context API.

The context API is pretty nice to have

and it gives you a great foundation

to even further understand other state management libraries

like Redux, Zostan and whatnot.

So I thought let's give one more shot of understanding it

by building another cool project

and then we can move on to our mega project

which is building up a blog.

I'll talk about that one in the next video

or probably next video, whatever that video is.

But in this one, we will be walking you

through with the context API

and how you can build a full-fledged project.

Not only just context API, I'll also walk you through

with how you can use the context API

to store something into the local storage

of your browser as well.

Now, these context API or Redux, they're just state managers

and they just allow you to perform certain actions

or tasks in a certain way.

It doesn't really care what you are performing

or how you are performing.

It just allows you to give a streamlined part

that this is only how things should go and come back.

It's a kind of a data streamline for us.

It doesn't really care if you are putting things

into the local storage or a database online

or however you are dealing with the things.

This is just pure functionality part.

So without a further ado, let me walk you through

that what we are about to build, let me share the screen.

So this is where we are.

So this is what we'll be building.

So this is just a simple to do.

It looks simple, but there is so much of intricacies in that

and so much of the knowledge about how the code base

or the code structure should look like,

how a program flow works through

and we'll be walking it through.

So in this one, what we'll be doing is

we'll be simply having this right to do

which will be a component on its own itself

and we'll be walking it through.

Apart from this, we have this simple thing

which can be toggled on and off.

That's nice.

And as we toggle on, now you cannot edit it

because it's done.

So what's the point of having it?

And apart from this, you can actually click

on this edit button.

And as soon as you click on the edit button,

this gets as editable.

So this actually, this whole text thing,

if I save this, this is a text thing.

If I click on this one, it loads an input field.

In the input field, we loads a value

and then thus it makes it more of an editable

on its own place itself.

And thus after that, you can save that.

Once it's in the edit mode, we give the save button.

Otherwise we get the edit button, we can delete that.

We can add more to-dos, obviously.

The most interesting part is if I right click

and inspect onto this one, I need to go into application

and in the application, I can see the local storage.

There's a lot of things here, session storage and whatnot.

In the local storage, I can see all of my applications are,

or whatever my to-dos are actually stored in this one.

This whole applications looks simple,

but it will give you a rock solid foundation

of how applications are being built using the context API,

what thought process goes into that

and entire credit operation.

This will be super helpful for you for later on

as we build our mega project,

this would be a good practice for you.

So again, let's go ahead and get started

and try to build this project.

I think that would be a pretty,

pretty cool exercise for all of us.

We'll be using Tailwind.

We are not worried about the CSS part.

This is not a CSS tutorial.

We'll be skipping that part.

I'll be giving you the copy paste, class names,

just add that.

Otherwise, if you don't even give any class name,

that's fine too.

We are more focused on the functionality part.

And for this, we'll be using the Tailwind CSS,

our trusty old friend for always that.

Let's go into the docs part of it.

And we will be framework guides

and we'll be going through the VIT guide.

All right, so let's go ahead and create a fresh project.

So let me go ahead and open up my VS code.

This is where we'll be creating a fresh new project.

Let me open this up

and we'll be creating our new project.

So NPM create VIT

and we'll be going for the latest.

So let's go with the latest.

And what should be the name of this project?

That's an interesting question.

So we'll be going with the 10

and then with the name of Todo.

Todo context.

Context and we are also using local.

So I'll just say local for the local storage.

So I'll just hit that package name is same.

We'll be obviously using React

and we'll be going with the JavaScript,

not the TypeScript at least in this one.

So let's go there.

And there we go.

We have this application up and running.

Now what I'll do is I'll close this one.

I'll open this up in my integrated terminal

so that we are directly into the folder itself.

And we'll be saying NPM install

to install all the dependencies what we have,

just like the boiler basics.

All right.

Now in the meantime, let's go into the Tailwind CSS

and we need this whole thing.

So let's just go ahead and copy this.

And there we go.

Your cache folder, previous version since addressed.

Oh, there's so much of the bugs.

Sys call.

Oh, seems like there are some issues into this one.

I didn't expected that,

but let me just go ahead and remove this.

Try it one more time.

It shouldn't be happening in this phase at least,

but let's just go NPM install.

Let me first do a quick LS if I'm able to see that.

Yes, package.json is here.

NPM install.

Oh, there's some issues.

Your cache folder contains root.

Oh, I need to fix this one.

So just give me a second.

I'll quickly go ahead and fix this one.

Weird error, don't know why.

All right, so fixed it.

Usually these kinds of things happen

when you update your system.

And yes, I moved on to the latest Mac

and that's why things happen.

Nothing much of a big fix that I did.

Actually, I just run this simple command,

which was suggested to me here that hey,

you need to change the permission of the NPM packages here.

So I did exactly same, asked for my password,

gave it the password, then I'd run the NPM install

and it works fine.

So that's basic.

Nothing too much.

Things happen all the time.

Okay, now we have to run simply NPM, run dev at least.

Let's see if we are able to run the things properly or not.

Things looks good.

Things looks good.

Now we can just go ahead and copy this

and let's stop this, paste this.

I should be giving us a package file for Tailwind.

Hopefully, config file for Tailwind.

There we go.

This is our config file.

Let's go ahead and copy the context for the wheat.

Let's get this one, copy that.

This should be very common to you by now.

We have been doing this for so long

and we need to have directives.

So copy this.

And for the Tailwind CSS source

and in the app.css, not app, index.css,

we'll just remove everything, paste it up here,

save that, that looks good.

Also go into your app.css and go ahead and remove everything.

That's exactly what we want.

We don't want anything.

Okay, rest is all good.

We should be able to get a hello world

with the class names and stuff.

So let's go into app.jsx and let's run this.

NPM run dev, let's close this.

And inside this, let's go ahead

and use the Tailwind CSS up here.

So remove everything and paste the such one.

Save that, let's see.

And yep, it's a Tailwind, it's a Tailwind one.

All right, so this looks good.

Now let's see, let's prepare the plan of action

that how we are going to take this one.

The first good thing is that I don't have to worry too much

because context API comes up as a default one.

So I can just go with that.

But first thing is always,

if you're planning to use the context API

or maybe Redux toolkit or something,

just first go ahead and target that one.

That's always and always a good idea.

We'll come back onto app.jsx and all these functionality.

But first is always a good idea

that you simply go ahead and have a context for this one.

So let's go ahead and work with that.

So I'll go into my source and I'll create a new folder.

I want to keep my context separate.

So I'll just go ahead and hey,

why are you not allowing me to write?

Right click, new folder.

Yep, now it's good.

Context, again, we'll be calling it as context

because you might have more than one context.

A context for login,

which does all the functionality for login.

I'm having just one context, which is my to-do context.

So I'll show you how it is being done professionally

in such kind of application.

I'll create a new file inside the context

and I'll call this one as todo context.

So I'll call this context.js.

Not only that, usually you'll find

that there is a new file known as index.js.

This is nothing much more than you have multiple context

and you pick all those contexts,

bring them up in index so that you can import all of them

via the index file.

That is it, that is the goal.

Okay, let's see how we can work with the context.

Pretty easy if you have done this anytime

and especially the to-dos are pretty easy

to work on with that.

So I'll just go ahead and say, first of all,

let's import some stuff

and we'll be importing them from React.

So that's obvious.

Let's go up here.

What do we need?

We need a create context and a use context.

Create context to create the context

and use context for using that created context.

Too many context, but yeah, we need that.

So we'll be having a create context

and we'll be needing a use context,

which is a hook itself.

All right, now we have these two.

The first thing is to create the context.

So we're gonna go ahead and directly export this

and let's call this one as to-do context.

This to-do context will be created

using the create context, that's it.

It's nothing, it's just a function.

This function takes an object

and within the object you can pass on all the things

which you want to have the context of.

All the data, all the fields that you require,

you can just directly pass on in here.

We saw another method in which I showed you

we can create them at separate places and all of that,

but this is more of a professional approach.

You'll find this again, again.

That first approach I told you gives you more clarity,

but in the real world application,

you'll be using this much more.

So in this one, my context, I'll call this one as to-dos,

which is going to be an array

and how does each of my to-dos looks like?

So I'll just give it a sample here as an example

so that we can understand it more as we write code,

otherwise it's not required yet.

This is just for an exercise

so that we understand how each of my to-do looks like.

So I'll say that ID will be one we can use later

on the ID as a date, date.now,

or we can use some kind of a nano ID

to give a unique ID, totally up to us.

And then we are going to give a to-do.

This to-do is going to be a to-do message.

So we'll be just saying to-do, message.

And then finally, we'll be having a complete.

This completed is nothing, it's just a Boolean value.

So I'll just say false.

So this is how my to-do looks like.

Okay, not only that to-do, it's not gonna be just to-do.

There needs to be a functionality as well.

So first part is add to-do.

So there needs to be a functionality which adds the to-do.

I'll be just writing its vague definition,

not the functionality or the working part in this one.

Okay, so how does the add to-do works looks like?

It is just a method like this, that is it.

But add to-do doesn't work alone.

It requires a to-do to be passed on.

So just go ahead and give me that to-do.

And we now know this as awareness

that to-do will look like this.

And that is why a lot of people like to use TypeScript

because it gives you awareness

about how your data looks like, types of the data.

But again, this already makes sense.

So there's nothing more to discuss with that.

Okay, similarly, we have added the to-do.

Now, obviously there will be a method to update the to-do.

How does the update to-do looks like?

Again, it's going to be a simple method just like this.

But another essential thing to update an existing to-do

is give me what to-do should I update.

So that's going to be an ID.

And what should I updated?

The updated to-do give me that.

So it needs to give that to-do.

So that's all.

How it will update, I'm not worried on that

because how can change depends

on how you're making the application.

For us, this application is based on local storage.

For you, this might be an application

based on MongoDB or MySQL.

So there could be a lot of use cases in that example.

So we have added a to-do, updated a to-do.

What next?

We can have a delete to-do.

What do I need to delete that?

First of all, it's going to be a method.

That's obvious.

What do we need?

Just an ID, give me that ID

and I'll simply go ahead and delete that.

So that's one thing.

I also need to toggle the to-do to mark it as false, true,

is it done, not done based on that.

So I'll just go ahead and call this one as toggle,

toggle, yeah, that sounds, toggle complete,

toggle complete, not a good naming in this case,

but I'll just go with that.

Okay, what do I need for that?

Just give me the ID and I'll work with that.

So this is my vague functionality.

It doesn't work and that's exactly your context

that based on this, I can add the functionality.

So I can not only add data into this array,

but also I can actually define the functionality

based on that.

That is exactly your context.

So now your context is all done,

but every single time in the earlier videos,

if you remember that,

we saw that it's not like just defining the context easy.

Somebody needs to use that.

And whoever is using need to use this use context

as well as all these things that,

hey, I need to be aware of the context,

to-do context, login context or something.

This is such a common thing that we later on realize

that doing this in the same file actually makes sense

and actually saves us a lot of time.

So will we simply go ahead and say,

let's create our own custom hook.

Let's call this one as used to do.

Hook is nothing more than a function.

So let's go ahead and define the function like this.

And in this function,

what we go ahead and do directly return another hook,

which is a used context,

which is aware of the context

since this context is defined in the same file.

So that's it.

So this hook returns another hook.

But the advantage is that I don't have to again

and again call two files.

Use context needs to be imported,

but also this to-do context needs to be imported.

Here, I don't need to import this.

This is already available to me.

That is why we define that into same file.

Now also, we saw that we can export one more line.

This is not really that meaningful,

but makes our other files much more easy to read.

So let's go ahead and go ahead and do that export const.

And we simply go ahead and work on the to-do provider

so that we can directly provide that.

So to-do context, simply can go ahead

and work on with provider.

All right, so this is the basics that we have as of now.

All right, so my to-do provider

or the context for this application is almost ready.

If I have more context,

then obviously I'll do exactly same like this.

Maybe if I have login,

so what does the login information consist

if I want to have any,

what are all the methods I'm looking up for,

like create account, login, logout, anything more.

So I'll just do exactly almost similar kind of stuff there.

Now, in addition to that, actually what I did

is I should be writing all this in to-do context.

I accidentally wrote it in the index.

So I'll just go ahead and cut this out.

This should all go into to-do context.

So nothing much, that's not gonna bother us.

So we'll just go ahead and copy paste it

into the to-do context, which is a right place for it.

Now, the reason why we created this index

is because you might have multiple of these things

and importing them from separate, separate files.

It's really a nightmare kind of a thing.

So the best practice is to go ahead

and export it from here after importing it from here.

So what we can do is we can directly export all of this.

This is a nice, sneaky little syntax

and we can import it from,

let's just go ahead and to-do context,

what all the things you want to export from it.

The first thing, obviously, a to-do context,

if we need it, most of the time we'll be using the use to-do,

but maybe we want to get some data in that case,

to-do context is required.

We'll be also needing to-do provider

and we'll be needing the hook, which is used to-do.

So as you can see, this makes life so much easier.

Similarly, we can export more of the things

by importing from other files

and that's actually something which streamlines the thing.

So that's really nice.

One thing is sorted that our context,

all the work that we wanted to do is all being done.

Okay, so step one is all done.

Now, next up is to create these components.

So if you remember, there was a top component,

which was the form in which we were writing the to-dos

and there was another thing, which was the bottom,

which is a listing of all the to-dos.

So that's one task that we have in our hand.

So let me just close this.

Another task is in the to-do context,

we have not defined any of these methods.

So another task in front of us

is simply to define the functionality of all of this.

So let's go ahead and whichever you want to take down,

the first it's totally up to you.

I think let's go ahead

and take down the functionality part first

and then we'll be building the components first.

Okay, so the first thing that we have to do

is simply go ahead and have a to-do provider in here.

And the way how we are going to do is

let's wrap this up at the top.

So we'll be just going ahead and say to-do provider.

No, no suggestion.

So I need to bring this manually, probably save this.

Let's go ahead and reload this, reload window.

So probably now it will give me,

let's go ahead and to-do provide, no suggestion.

Okay, so we need to bring this to-do provider.

So let's go at the very top

and try to bring the to-do provider.

All right, so we'll go ahead and say import to-do provider

and that will be coming up from

and we'll be saying context dot slash contexts.

Okay, now that the to-do provider is accessible to me,

I can go up in here and can add this to-do provider.

The easiest thing to do is just go ahead

and say to-do provider.

Now once you have this,

obviously you need to have the closing one as well.

So let's go ahead and have it here and there we go.

So this is happy.

Now everything which is going to be inside this

is going to be aware of the context.

Some people you'll see that they also give it

to the main itself.

That's also fine, but I am pretty sure

that there will be no component outside of this main

which will be requiring this context.

So I'll just go ahead and wrap it up here.

So wherever you need,

it needs to be the outermost layer of this thing.

So that's the basic of it.

So one part is done.

But another thing that you are going to require

in order to do this is to bring in all the methods

and whatnot and all these things from this one here.

So how we can actually bring the rest of the things?

That is the question.

That is the most important question.

The easiest way to do is is come back here

and just say, hey, there is a property being given

to this to-do provider automatically

by the context known as value.

Via this value, you can actually go ahead

and import the objects that are there.

So for example, if I go ahead

and do one more curly braces here,

I can just go ahead and say, hey, I want to-dos.

It will give me the to-dos, that same array.

And you can also bring in all the methods there.

So for example, we have this add to-do,

we have update to-do, what else we have delete?

Delete to-do and one more was toggle something,

toggle complete.

So I have brought in all the data

as well as all the functionality here.

So you might be wondering why we have brought in the data also

because we will be passing on this data exactly

to one component that will eventually build

to loop through all the values inside it.

So it's an array.

So we will bring that and we'll loop through it.

Currently, I'm not focused on this one

exactly at this moment.

I'm more focused on the add to-do, update to-do

because I want to write functionality in them.

So let's go ahead and work on with the functionality

from the very top.

First of all, we need a state for its management

because to-dos will be added and removed and whatnot.

There will be a lot of functionality going on.

So we need to keep a track of all the to-dos

inside a state itself to update our UI.

Let's go ahead and call this one as to-do,

to-dos, to-dos would be good.

And this will be set to-dos.

And that will be all done by our classic friendly use state.

The default state will be an empty array

so that that functionality is all done.

Okay, right now, this is all good,

but now let's add one by one the things

that how this is going to be done.

The first functionality we are going to take care is

add to-do.

So how this functionality will go and work on with,

I can just directly go ahead and mark this as add to-do

and then this is going to be a simple method,

just like this.

The great thing is that since I have this exact same data,

that data will automatically map to the method

because remember in the context, we created just a method,

just the definition, not the definition,

just the blueprint of it, but not the definition.

Here's the point where we're going to go ahead

and write the definition.

It could have been done into a separate file,

but all we need to do is wherever you are importing

these values and these all things,

it needs to be in the same file.

So you can define it into other file,

bring it in here and then can map it.

That's also totally fine.

Okay, how you're going to add?

To add the to-do, you need the to-do.

So let's go ahead and say that, okay, we need the to-do.

What else we can do?

It's really, really simple now.

All you have to do here in this case

is use this set to-dos.

So how does set to-dos will work?

Obviously it requires a callback here.

So we'll need to have all the access to previous to-dos

that it have, it might have.

And then we will be working to adding the more of that.

So where do you want to add that?

I want to add the new to-do at the very top of my array

and rest of them I'll spread this.

So I'll just go ahead and say that this will be an array

and inside this we'll be spreading this.

So previous all values, we are spreading this out

and my to-do will go at the very first of it.

So this is the place where my to-do will go,

just like that.

It's an object, it requires three things.

My ID, the actual to-do title of it

and the completed, which is by default false.

So I don't need to give it much.

So I'll just go ahead and work with that.

So ID, how can I get the unique ID?

The easiest, cheapest trick in the JavaScript book

is date.now, but totally up to you.

Maybe you want to use nano ID or something else.

That's totally on you.

Okay, now that we have this one, we have added the IDs

and what else we can do?

We can just get this exact to-do.

So what we'll do is we'll be spreading this to-do

because the way how this to-do will work,

the reason for spreading this one is

because this to-do might have more of the functionalities

or more, whatever it is,

I just want to have it spread it out.

That's why it is.

In case you're working with just the string itself,

then you don't need to spread it out.

But since ours is an object,

so we are actually updating one property of it

and then we are working on it.

So really simple, basic, classic JavaScript, that's it.

Okay, so this part is all done.

Now let's see how we can update the to-do.

Again, classic way of updating is really simple.

So we're going to go ahead and say I need to update this.

Update to-do, update to-do.

Okay, update to-do, again, a method, nothing more than that.

And I'll say for updating, I need an ID

as well as I need it to do.

Okay, how can I update this?

For updating, obviously the best part

is to loop through all the arrays.

Totally depends on you,

how you want to loop through the values.

I'll just use maybe a map for this one.

So I'll just, first of all, bring in all the to-dos.

We will be requiring all the previous values.

So we'll call this one as prev.

Okay, there we go.

Now with this, I'll just take this,

all the previous values inside my arrays.

I'll loop through with probably a map.

Inside this map, I get a callback.

So I'll just go ahead and say that I need each of these.

So prev to-do, I'll call this one each to-do as prev to-do.

Once I have this one,

then I'll simply go ahead and update.

To update that, I need to find a particular to-do

to work on with that.

So what I'll do is I'll just wrap everything

inside the parentheses again

so that it doesn't give me any error.

So I'll just go ahead and say prev to-do

if it's ID because each to-do has an ID.

If it matches equals to the ID of the to-do

that is provided to me in the function.

So to-do.id, okay.

If that is the case, if that is working fine,

then let's go ahead and do something in here.

Otherwise, we'll do something in here.

Okay, just boilerplate here.

This helps me always to write things nicely.

So in this case, if it matches,

then I'll go ahead and say to-do.

So I'll just update the entire object.

If it doesn't match with that,

then go ahead and keep it as it is.

So prev to-do, whatever that to-do is,

we'll keep it as it is.

So we're looping through each of the value.

Couldn't be much more simpler than that, the explanation.

Line by line, I hope you have understood that.

If not, rewind the video.

Okay, next up, we'll just go with the delete.

Delete is the easiest one.

Const delete to-do and the delete works with,

just give me the ID and I'll work with that.

All right, how does the delete functionality works?

Simple, set to-dos, let's grab that.

We need all of the access of that.

So we'll just go ahead and say prev

and we'll work with that.

Okay, how are we going to work that?

First, let's go ahead and filter this out.

Looping through in this doesn't make sense.

We can have operation on filter

so that we can create a new array

based on the filtering operation.

So we need to provide a condition.

So we'll say, hey, prev,

let's go ahead and use a filter method on that.

By the way, I do have a YouTube videos

on this filter map reduce,

really nicely explained step-by-step, broken down.

If you don't know about in depth of that,

check out that one.

Okay, how does that work?

So the filter method requires a callback, okay.

In each of the callback,

you'll have the each individual to-do item,

call it as prev to-do to-do,

doesn't really matter, it just is a filler word.

Once it is there, then we need to require

to pass on a condition to that.

So if the to-do, we are looping through that,

each one of them, if it's ID matches with my ID,

then we need to delete that.

So we have to go through with the reverse logic of it.

I want all the to-dos, which doesn't match the ID.

So which doesn't match the ID.

So now, because if you don't know this,

filter always works for the true condition.

So we need to somehow give the true condition,

that's why the reverse logic always works here.

So what I'm saying here is really simple,

that go through with each one of them,

and I want to create a new array

based on some true conditions.

That true condition is ID should not match.

So whose ID is matching, we need to remove that.

Whose IDs is not matching,

we need to create a new array out of it.

So that's what we are doing in this delete to-do.

Okay, pretty cool.

Now let's go ahead and work on with the toggle as well.

Toggle is also fairly simple, nothing too much on that.

A little bit, but not too much.

Okay, let's call this one as toggle complete.

Okay, how do you work?

It requires an ID.

And once it has the ID,

obviously we need to go inside this one here.

Okay, moving further, how does it work?

First of all, let's grab all the to-dos.

This is where we get it.

And we need to go through with each one of them.

So let's go ahead and have the prev just like this.

Okay, now we have this one.

I'll just go ahead and break it down into separate lines

so it's much more easier for you to understand.

Okay, now here what I'll do is,

I'll loop through with each one of them.

So prev.map, there we go.

We are looping through the values.

Inside the map, we need a callback.

So we'll call this one as prev to-do.

Call it to-do, prev to-do doesn't really matter.

And inside this, we need a callback.

So this is my callback.

And what I'll do is, I'll again go into the new line

so it's much more easier for you to understand.

Now inside this, each one of this,

I want to toggle this one.

So I want to go inside the object,

like we have an array.

In these array, we have a lot of objects.

I don't want to go every object.

I want to go into an object whose ID matches.

Once I go inside this, I want to update that entire object.

Not all the properties, just one property,

which is the complete part.

Okay, so how we're going to do this are really simple.

Let's have this prev to-do.

And first of all, let's see that if the ID

of this prev to-do matches with the ID

that you have provided me, if that is the case,

then we're gonna go ahead and do something.

Otherwise, we'll do something.

Okay, boilerplate code here.

If it matches with the ID, then I want to update it.

So I'll just go ahead and spread this out.

So spread this prev to-do, first of all.

Once I spread this, now I have access to all of this.

Once I've spreaded this,

then I have to update only one field, which is completed.

And that completed, I need to toggle that.

So I'll just change the previous values.

So I'll just go ahead and say whatever,

just use an exclamatory so that it reverse the true

to false, false to true, so really basic.

So I'll just say prev to-do, prev to-do.

And you have a property known as .completed.

Okay, we are flexing this, nice really.

And on the else part, what we need to do,

just keep it as it is.

So just your prev to-do will remain as it is.

So there we go.

Okay, one thing you remember,

a lot of people kind of get in confusion with this one,

that hey, you're spreading this first and then updating.

This is an object, it doesn't really matter.

Once you spread this out, that is it.

Then you can update the existing field.

This is how the object spreading works.

If you spread this out, either first or end,

then if you update any field,

that exactly that particular field will get updated.

So really nice.

Okay, so that's the functionality part,

we have taken this down.

Now, this is the functionality part.

We haven't talked about how the things will actually go

in the local storage.

So we need to work on with the local storage as well.

There are two ways how the things are going

inside the local storage

and coming out of the local storage.

First thing, any changes in this to-dos

or the set to-dos, if you are adding any field

or updating, removing, whatever we are having,

we need to update that into the local storage.

And any given time when the page loads itself,

we want to query the local storage

that if you have any data, give me that data.

Otherwise, what's the point of having local storage?

So for this, whenever the component loads,

one good thing that we can actually go ahead

and use is use effect.

This is a hook that we want to use, so use effect.

And this is it, and it requires a callback.

So let's go ahead and give it a callback just like this.

The second property is your dependency array.

We don't have any dependency array

because this is the hook where we are talking about,

as soon as the component loads,

query the local storage, get me all the data,

and let's push all the data into the state

which is set to-dos.

That's exactly what we'll be doing.

So what we'll be doing is we need to query the local storage

and we can just get the item just with this one.

And we'll be calling this one as to-do.

Right now, we haven't called them anything,

so let's just call this one as to-dos, all over storage.

Okay, we have got all of this.

Now let's go ahead and kind of, this is a string.

This string needs to convert it into JSON first.

Local storage always works with a string, so there we go.

And we have multiple ways of doing this.

The easiest way is to JSON.parse.

Once we have this, let's store that into a variable.

Const to-dos, okay.

We have brought in the local,

we have brought in data from local storage.

Now we need to do is,

we need to push this data into the state.

So that's really simple.

But I want to, I can actually go ahead and directly do this,

set to-dos and kind of use this one and to-dos.

But what I'm thinking is,

there might be no data into the to-dos.

So that might be the case.

So let's handle this as an optional,

otherwise I don't want to do this.

So if, let's test the condition,

if there is to-dos first of all.

If there is no to-dos,

then there might be a potential of my application

being crashed down, so let's not do that.

And what we're gonna do is,

let's go ahead and use another condition

that to-dos is there, but there might be nothing inside it.

So to-dos.length,

since this is an array, I can use that,

should be greater than zero, anything greater than zero.

Then I'll go ahead and use the to-dos,

and I'll just go ahead and to-dos.

Again, this is a little bit optional, but good to have.

So this is the place where I'm using the use effect hook,

where there is no dependency array.

As soon as the component will mount,

this hook will be rendered,

or this hook will be activated,

and all this functionality will work.

Now I want another case

that if there is any update in the to-dos,

then also this whole thing should update.

So we should grab the data from it

and use and work on with all of them.

But this time, I don't want to actually grab the data.

I don't want to get the item, I want to set the item.

Newer value should be set at,

so if you have added anything updated,

newer whole value should be added.

This whole thing, this new set to-dos,

all the arrays should go into this one.

But the problem is, you might be wondering that,

hey, the easy solution could be

just add a dependency arrays of to-dos,

but that will be a problem.

The problem is that if you add this one,

this whole thing will run again.

I don't want to run it.

I want to run it once at the first start,

but not after that.

So this is the classic case where you use

more than one hook.

So use effect, let's use it one more time.

And yes, you can have as many use effect hook

in your application as you like.

In this case, I'll just again have my callback,

just like this, and I'll have a dependency array,

but this time in my dependency array,

it is dependent on to-dos.

Anything that happens to-dos, run this piece of code.

What piece of code?

Again, we need to query the local storage.

This time we'll set the item.

So just update the value, keep on setting them,

keep on setting them.

Set item, what do you want to set them?

This requires two part, the key and the value.

The key is pretty simple.

Just use the exact same keys that you are using

to parse the values as well, so set to-dos.

And then we can directly use to-dos,

but local storage doesn't really accept

arrays or anything, it just accepts strings.

So easy way is to just use JSON.stringify.

Yep, there we go.

And just go ahead and take to-dos here.

There we go.

Really simple, fun functionality that we have added.

So the functionality part is over.

Now the next part that's in front of us

is to create some components.

Let's dive in and create some components,

the top form as well as the bottom one here as well.

All right, so the next thing that is in front of us

is to build the components, that is it.

We have worked on the functionality part,

we have worked on a lot of logics and stuff.

Now let's go ahead and talk about the components.

We have two major components.

The first one being the form itself,

where I write the data, click on the button,

it adds into the context.

That's why the context is for,

that's why the add method is for.

That's one thing.

The another component that we'll be creating

is give it an array of to-dos.

It will be looping through and displaying it.

That's it.

Not only displaying it,

it will add some more functionality it is,

but we won't be working on the functionality part

because we've already done that in the app.js.

We'll be just bringing that functionality

and injecting at the right place.

That is it.

That is it all we have to do.

Let's go ahead and work on with this one.

So I'll just say that I need one more folder.

Yep, so I'll just go into source, new folder,

and we'll call this one as components.

Looks good.

So again, the components will have majorly three files.

The first one will be obvious, the index.js,

so that we can just get all the components at one place

and can import and export that.

So that's majorly it's being done in almost all places.

If you want to do it, that's okay.

If you don't want to do it, that's okay too.

I'm not going to force you anything on that.

Okay, so first one that we will be working on

is going to be simply to-do form.

To-do form.jsx, of course,

because this is an x component, gsx component,

and will be to-do items as well.

So let's go ahead and say components, new file.

This one will be to-do item.jsx.

Okay, let's take down the easiest one,

which is the to-do form first.

That is the easiest one.

I'll close all the other files as well.

We don't need them as of now.

Okay, how does the to-do form looks like?

Basic react functional components.

So rfce, react functional component.

What we can do is, let's hit enter.

Okay, looks good, looks good.

React function to-do does this nicely.

Okay, one by one.

First of all, what do we need for this to-do?

First of all, we need to track

what the user is writing in the form.

So I need a state for that.

So let's go ahead and do that.

This will be a single to-do.

So I'll just call this one to-do,

set to-do, and that will be bringing up from use state.

So bring me the user state,

and we'll just say initially you are empty.

Okay, apart from this, do you need anything else?

Yes, you need to add this to-do.

The add functionality is in my context,

and the method, if you remember it,

we actually worked on the functionality in app.js,

but the beauty is,

it doesn't really matter where you worked on it.

I can just bring in that functionality,

and if somebody has done that functionality,

I can just bring it here.

So the best thing to do here is just use the hook use to-do.

Oh no, it doesn't.

Why is it not suggesting me anything?

I really don't like it.

Okay, we need to work on with use to-do,

and how we're going to grab it,

we'll be grabbing it from,

we need to go one directory back inside the context,

and from this one, we need to grab the to-do context.

So we'll just grab this hook use to-do from there,

or can I bring it directly from the index?

Probably, but anyways, you get the idea.

Use to-do, now we have this use to-do directly a hook,

which internally, if you remember,

is giving us an access of the hook use context,

which is already having the to-do context.

Pretty nice.

Okay, and we can bring in functionality from this one,

so I can just go ahead and say,

hey, give me something, whatever you like.

So in this case, I just need add to-do.

I don't need to have access of all the to-dos,

I don't need to have access of add, delete,

no need at all, I can just work with that.

Okay, this is good.

Now, we need to have a functionality

when the form is going to get submitted,

or the add button is going to click,

we need to add it into this one.

So we'll just, first of all, we'll say,

okay, let me just show you one by one.

So we'll call this method as simply add, not the add to-do.

So what this will do is,

there will be an event that will be fired.

First of all, prevent that default.

So E.prevent default,

so that it doesn't submit it anywhere.

Okay, that's the step one.

Now, if there is no to-do, like it is empty,

then we'll just don't do anything.

So we'll just go ahead and say,

if there is no to-do, then just go ahead and return.

So we'll just remove this, remove this,

it could be a one-liner, so return.

If it is not the case, there is something inside the to-do,

is there is a string or something inside the to-do,

then we can simply go ahead

and call this one as add to-do, okay.

First of all, let's push this one here.

So add to-do, and what this add to-do method will do,

it requires it to do to be passed on to this one.

So this is to-do is an object,

and we'll just give you this to-do, this is a string,

and we can optionally give it completed as one as,

although there is a default value there,

but any case, we'll just give it a false.

We don't need to give it an ID

because if you remember correctly,

in the app.jsx, when we were working on this add to-do,

whatever the to-do you pass me on,

which is an object, obviously, I am adding the date here.

If you want to remove it completely,

you can just save yourself some step.

You can spread this or not even spread this.

You can just have a to-do here,

which is an object and spread this previous here.

So it's totally up to you that what kind of data flow

or what kind of application flow you are going.

In my case, I'm passing the text of the to-do

as well as completed here and the data I'm adding there,

but you can do everything here,

you can do not everything there, you cannot do that.

Okay, so this is the basic,

and one as side note that I'll be doing is,

once everything is all done,

this is all what we need to do as a functionality.

I want to reset the to-do as well

so that the state actually the to-do just gets off,

so I'll just empty it out.

So I'll just go ahead and say set to-do,

and I'll just empty it out, that's it.

A little bit basics, so there we go.

So this is all it takes to have your to-do form.

Now comes to the visual part.

For the visual part, what we'll be having is a simple form.

So let's go ahead and remove this and just have a form.

So there we go, we'll be having a form.

There will be no action required on this.

We'll be having just one method, which is on submit.

And in this, we'll be calling this add method,

and we'll be having some class name onto this one as well.

So we'll be having class name of flex.

This is just a visual aesthetic aspect,

not bothered much on that.

We are having this input, which is a type of text.

Okay, we don't need this.

Okay, let's go there.

And first of all, we'll be having a placeholder.

Placeholder we are saying right to do with couple of dots.

And after that, we have some class names

that I'll be bringing in from my notes file.

I do have a lot of notes.

Okay, so I'll be just bringing them up

so that it looks decent.

So there we go.

Okay, this is copy paste stuff, Tailwind CSS.

Okay, now interesting part.

How does the value in this one governs?

The value is going to be governed by the to-do,

so that's managed by state.

What happens when something changes?

So anytime you change something, so on change,

what happens is there will be an event

that will be firing up, so callback.

And we'll be calling the set to do.

And inside the set to do,

we'll be saying e.target.value.

So we'll be adding the targeted value in here.

Okay, that's my first part of it.

And the next part is the button.

So that's not really bad.

So button, which will be of type submit, there we go.

And we'll be calling this one as add.

And obviously without any doubt,

we do have some classes here as well.

Class name, and I do have it in my notes as well.

By the way, you'll be grabbing all these classes

from my GitHub itself.

If you want to add it on your own, give it on your own look,

that's also fine, no big deal there.

Okay, so this part is all done.

We have exported the to-do form as well.

So all looks great.

Now moving on, let's go ahead and work on

with the to-do item.

Again, rfce looks great.

So we have react functional component, everything.

The looping part and all of this

will be working through all of that

and all these things in a minute.

I'll just directly give you majority of the part as well.

But first let's work on the functionality part

because here also you need some kind of state management.

Why?

Because in our application,

we are having some of the state controllers.

And as somebody checks on that,

so is it editable or not?

We are governing that.

If it is marked as complete,

then we are not allowing that to be editable.

So that's one thing.

And then obviously we need to have all these

to-do messages as well.

We'll be using the state as well.

And apart from this,

we also have the update functionality as well.

So first of all, in this to-do item,

somebody will give us a prop which will be a to-do.

And this to-do is having all the to-dos.

It's a major gigantic array

which has all the functionality in it.

Let's go ahead and import one by one

the functionalities that we need.

First of all, we need to check is to do editable.

Okay.

And we'll be needing set is to do editable.

And that will be governed by use state.

And by default, everything will be false.

Okay.

And what else we need?

We need the to-do messages as well.

So we'll be saying const.

And we'll call this one as to-do message.

Set to-do message.

And we'll be saying that you will be governed by use state.

But in the use state,

we will be not passing on directly to-do

because that will be bad.

We'll be just passing it all the to-dos here.

Okay.

So that's my one message of the to-do.

Okay.

And updation as well.

We'll be governing the updation part as well.

So we'll just say update to-do.

Update to-do.

And we don't need updation for the state management.

We don't need this one.

Okay.

Another thing that we need

since we are controlling couple of functionalities here

for example, update, the delete as well, the toggle as well

we need to bring these functionality

and how we can bring that simply with the hook itself,

the use to-do.

The use context hook actually gives us that access.

But we are not using use context.

We have actually crafted our own hook

that gives us access to all the functionality.

So let's go ahead at the very top and bring this one here.

I'll say first of all, let's give me use to-do

and I'll just bring it from auto-import.

That's nice.

Okay.

So use to-do.

There we go.

And this hook gives you access

to all the features that you need.

What all do you need?

In this one, I'll need update to-do.

I need delete to-do and I also need toggle complete.

There we go.

Okay.

So all the to-dos and everything are with me.

Now we need to define some of the functionality as well.

Functionality wise,

we have already taken care of most of the things

but we need to take care of some things

in the visual aspect as well.

Especially what happens when we do the edit

because notice here, if it is editable

then we are enabling some fields.

For example, if you remember when I clicked on the edit

there was a input field that came in

and that input field was conditionally rendered.

If input field, like if it was edit was editable

then the input field came in, the value got into it

and now you're allowed to edit into that.

So based on this, this is the whole thing.

This true or false functionality is allowing us

to conditionally render that.

That is why we need to write some piece of code

to conditionally do that.

So I'll just call this one as edit to-do

and what does this edit to-do does?

It's a simple function like this

and all it does is it allows us to update that

because once somebody clicks on edit,

we need to run the functionality of update.

Whether he has edited or not, that's up to him

but we'll just go with that.

In order to update anything, we need to pass on two things.

The first one is the ID.

So we'll just grab the to-do and its ID from there

and we need to pass on the entire to-do

that needs to be updated.

So we'll just give it an object, we'll spread the to-do

and what we'll be doing is the only thing

that's usually we are allowing to update

while this method is just the string part.

So let's go ahead and spread this out

and the only thing, only property that's getting updated

is the to-do which is now getting updated

with the to-do message.

There we go.

Now it's making much more sense to you.

Once this is all done, then obviously we need to say that,

hey, this edit is all done.

So this operation is being performed.

Now let's set editable again back to false.

So set to do editable will be going it as false.

Okay.

Right now you might be wondering,

hey, nobody has made it update.

That will be done.

Editable, nobody is making it as true.

Yes, we'll do that.

But that will be toggled by another click, not this.

This is a pure functionality part.

Okay.

Now another thing that we'll be going through is this one.

Let's create another method.

We'll be using that in a second.

This will be a simple toggle complete.

So in the toggle complete,

what we are doing is this toggle complete.

Let's go ahead and do it like this.

There we go.

Okay.

Toggle completed.

Actually, this is not the toggle complete.

Toggle complete is something that we are bringing

from the context.

Toggle completed is something that we'll be using

for visual aspect only, just for the strikethrough line.

That is it.

So how we're going to do that,

simply just have this one as toggle complete.

Inside this, we'll be calling this one

and passing on the todo.id.

Okay.

So we're not directly using this method.

We are actually created our own method inside this.

And this method technically will be running this method.

So that's it.

Okay.

So the functionality part is almost all done,

whatever the code we wanted to write.

Now what's remaining is how we actually render that.

We have used a lot of fancy things inside this.

So we'll just do it things one by one.

So first of all, what we're going to do is this is my div.

This is for each of the todo itself.

The first thing that I'll do is add some class names here.

So let me walk you through how we are doing it.

So remember this, this is not all the todos.

This is one todo itself.

Okay.

So in the app.js, we will be looping through the values.

This is just one.

Okay.

So the first thing that we have is the class name

and we'll be removing the class name like this.

We'll be starting our JavaScript, use the back ticks here.

The reason for using the back tick is because

I have some of the CSS classes, which looks as a default.

So this is just a string, but I want to add more

based on, I want to do some conditional rendering.

So if the todo is completed,

I want to just add another color based on that.

So I'll just do that.

Okay. So what I'll do is first of all,

let's add the JavaScript functionality

and then ask if the todo is completed.

Todo is, it has a functionality.

I know that this is an object.

I added this property into this one, which is a completed.

If that is the case, we'll do something.

Otherwise we'll do something.

So based on this, we'll be rendering the color.

And by the way, I do have these colors.

So I'll just copy and paste this one.

So this color, if it is completed, we'll use that.

And if it is not completed, we'll be using this color.

So I do have different colors based on that.

Okay. So this is easy part.

We have gone through with this one.

Now let's go ahead and remove this todo item

and go up here.

Now we have a couple of things

that are conditionally rendering.

First of all, the checkbox is always there.

So let's go ahead and have this one.

So input, this is a type of checkbox.

We don't need this name and ID.

Okay. So this checkbox,

we have a class name for this one, really easy,

which is cursor, no suggestion, cursor pointer.

Okay. And is it checked or not?

This checked or not is going to be based on todo.

So todo will tell me literally completed or not.

And what happens when something changes?

So on change, we'll run on that.

And in this, we will be running the todo completed,

the method that we created todo.

I'll just copy and paste this one.

Otherwise it will confuse me a lot.

Okay. This one, toggle completed.

Copy that and paste it here.

So this is the reason why I didn't use it directly

because if I use it directly toggle complete,

I have to pass an ID.

So I have to run a callback here.

If you don't want to do that, just use it like this.

Exactly same thing.

So exactly same thing, nothing too much to be discussed.

Okay. Next part is my input field

and based the input field is editable or not,

that will decide based on this one is todo editable.

Okay. Let's move on to the next part.

Next part is again, this one is the input type of text.

So we'll be saying input text.

There we go.

We don't need any of this.

Remove this, remove this.

Okay. First of all, the class,

again, the class name will go like this, this.

This is a common practice.

You'll see quite a lot of things being done just like this.

So these are our basic classes,

but rest of the classes will be conditionally rendered.

So again, fire up your JavaScript fillers up here

and is todo editable based on this condition,

either do something or do something else.

I do have again, these things.

So if it is editable, we are showing the borders.

Otherwise we are not showing the borders and that is it.

I know very, very sneaky, but this is how it's being done.

Okay. So command Z.

So we are showing the borders.

Let me just copy this.

So we are showing the border.

If it is editable, if it is not editable,

then we are making the border as transparent.

That is it.

So it gives the feeling that it's not an input field.

That is it very sneaky.

I know, but this is all what we have.

So in the class name,

now the rest of the thing in this is pretty easy to add in.

So we need to add the value.

What value?

Pretty simple value is a todo message.

Todo message, we got the value, we are displaying it.

Is it readable or not?

So let's go ahead and,

so this is a read only field based on some field.

So we'll be using exclamatory and the thing is,

is todo editable.

So if the todo are really basic logic,

we have already discussed that as too much,

we are giving it as a false.

So is it readable only or user can edit it

based on the edit functionality?

We are giving that, so really basic.

Don't want to explain it too much explanation of that.

And one more field is on change.

What happens on change?

So again, we have an event that is going to callback

and that's going to make it is,

is set todo message as e.target.value.

Set todo message as e.target.value.

There we go.

All right, so this is done.

And again, very, very sneakingly,

we are adding these input fields and all of that.

Last but not the least, now we have buttons

and actually we have couple of them.

There's a save button,

which actually conditionally render to save or edit.

We have a delete button as well.

So let's go ahead and do that as well.

Okay, one by one.

First of all, this is a button.

So this button is just a classic button,

nothing too much onto this one.

What goes into the button is actually dependent

on the value itself.

So I'll just go ahead and start my JavaScript again

and depend on is todo editable.

So for that, we'll be giving it something.

Otherwise, we'll be giving it something.

So you can go ahead and say if todo is editable,

go ahead and give it a save.

If it is not, give it a edit message,

but we do have the icons for it.

So I've actually copied the icons.

So we'll be using the icons,

but again, you can use the text if you wish.

And I do have a pencil icon for that as well

in the case of edit.

So we'll be using that fancy, but yeah, I like that.

Okay, so again, we'll be adding some of the classes

and all these things.

So let's go up here.

First of all, let's add a class name,

lots of classes in this one.

Okay, copy that and paste it, no worries that part.

Okay, classes is all done, but what happens on click?

That is the important part, on click.

So on click, we'll be firing up a callback

because we need to check some conditionary rendering here

or conditionally.

So we'll be checking if, based on some conditions,

if todo is completed.

If todo is completed,

then we don't want to do anything at all.

We don't want to give any functionality.

On click should do nothing at all.

If it's already completed,

why do you want to save or edit it?

So we'll just go ahead and say return.

Okay, that's one check, but if todo is editable,

let's go ahead and do some more stuff.

So we'll check again.

If is todo editable, in that case,

we'll just go ahead and say edit todo.

And in this one, we'll just run this method.

And in the else part, if todo is not editable,

then we'll just keep it as it is.

So we'll just say set is todo editable,

and we'll take the previous value

and we'll say as it is, just flip that.

Prep, okay.

So I hope you remember is todo editable.

This is just a Boolean value.

So this is just true and false.

And if todo is editable,

then we perform the edit operation.

If it is not, then just go ahead and keep it as it is.

We don't want to do anything in that case.

Okay, so this is the first part.

And also what we can do is in this case,

we can actually check for, you want to give that button.

So you can actually optionally,

we can make it as disabled button or not.

Again, disabled will be based on

if todo is completed or not.

So todo.is, not todo, completed.

There we go.

Okay, that's my first button that I have.

I do have another button, which is a delete button.

So let's go ahead and have a button.

And this one is delete,

but just like always, we do have some icon for it.

So I'll copy and paste this one.

So yes, we have this icon.

And again, apart from this,

we'll be having a class name.

In this class name, lots of classes.

Yes, literally, lots of classes goes into this one.

Doesn't really bother.

The most important thing in here is

what happens when somebody clicks on this button.

So if somebody clicks on this button,

then obviously we'll run on click.

And on this, fire this callback.

And just simply run the delete todo.

And for this, we need to pass on ID.

So we'll say todo.id.

There we go.

Okay, quite a lot of stuff,

but I think it's all understandable.

Probably it's going to take one more iteration

to understand this.

It looks a lot,

but because we are doing some sneaky stuff,

like removing the borders of input field and all not,

if you don't want to do all of this,

you can just always go with the classic simple,

add todo is remove, delete, that's it.

We don't want to,

if somebody wants to edit it,

there are lots of ways of editing that.

Okay, now next thing is,

let's go ahead and import all of this

and export them via the index file.

That's always a good idea.

So we'll just go ahead and say,

I want to import the todo form

and I want to import this todo item

and end of the day, we'll be exporting them.

So export all of them.

Remember, we are not exporting them as a default.

So be careful of that.

And todo item, there we go.

Exported all of that.

Now it's time that we go into app.js

and actually work on with this one.

So app.jsx.

Now this is the part where we work on with this one.

Okay, now as you can see,

we need a little bit more of the CSS part and whatnot,

but I'll walk you through directly that.

All we have to do is,

I'll be adding the CSS, we'll be giving you directly,

but in this one,

I can just go ahead and remove this H1 first

and can import my form directly here.

So I'll just go ahead and say todo form

and that will do the job.

It will not look the best of the one,

which I'll give you that, but it will do the job.

In the case where I want to loop through the values,

then also it was super, super easy.

I'll give you the copy paste version of it,

but first let me walk you through

with the functionality part.

In here, when you want to loop through the values,

you have to fire up your JavaScript, just like this.

Now I can use the todos.

Remember, this todos, yes,

this is all the time getting updated

in the context and everything

from the local storage, everything.

You can use it directly.

So in the todos, just go ahead and first loop through it.

So we'll just go ahead and say map.

Once I'm looping through this,

obviously I have access to this callback, just like this.

I have access to each of the todo, just like this, todo.

And in here, what I'll do is I'll directly fire up parenthesis

so that I don't have to use the return keyword in here.

And I can just go ahead and add a simple div,

just like this.

The reason for using the div is

so that I can pass on my key.

Keys are really important

when you're iterating through the values.

And I can say that todo.id is,

I'm pretty sure that's a unique one, so I can use that.

And in here, I can just go ahead and call my components.

So that is my todo item.

There we go.

This requires just one thing to be passed on,

which is a prop known as todo.

And I can directly pass on this todo.

Now this is all, this is all the functionality parts.

So now I'll just go ahead

and actually bring the nicer version of it,

which includes the classes and whatnot.

So I'll just go ahead and bring that in.

So from my notes, but this is it.

The functionality part is it.

Rest of it is just the classes and all of that.

So I'll paste this one.

And if you remember, this is nothing.

We have the todo provider exactly same.

We're calling this todo form,

but a little bit nicer in the div with some classes

and some flex box going around.

And this is exactly the same thing that we just discussed.

The only thing which is different

is the widthful and all of that.

So as I save this,

and hopefully things are working or probably not,

I'll just kill it and start it again.

Now, if I go back, there we go.

We have this test and all of that.

So probably it's working.

Let's go back and see in the context first,

in the context, todo context, and this is todo message.

And this is, so what this is doing is,

actually this is bringing all of this

from the local store.

So I'll just right click inspect

and go to my application.

And we need to go into this one

and we'll just clear this one.

Okay, now let's try to reload this.

Now we have everything gone, okay.

Let's go ahead and add this one as test and add this.

So there we go.

We see the test is there.

Let's also see if it is able to grab this from

or inject it inside my local storage application

and local storage.

There we go.

We saw that test is here with the ID, nice, nice and easy.

And apart from this, we are having the edit functionality.

So the border comes around

and I'm able to add the test one.

Save functionality, working nicely.

Can I remove this?

Yes, this is also working.

So let me just summarize this one more time

because I think this can be too much

of overwhelming situation for a lot of you.

Let me go ahead and walk through with this one.

Although I tried my best to explain you line by line

and I'm pretty sure you'll leave a comment for that

that, hey, we enjoyed this lecture.

The first thing that we understood about this kind

of application is that we need to attack the context first

because that's where majority of the things goes.

So in the context of to do, it was pretty simple.

We have the create context and use context.

Create context for creating the context.

Use context is the hook for using that context.

And use context doesn't work alone.

It requires the context which you created by create context.

So we use the create context to do context.

If we added our data will go here,

functionality will go here.

We don't write to the functionality,

but the boilerplate blueprint of the functionality.

Then we simply use the use context hook

and provide the to do context.

Don't need to import anything

since it's available directly.

We created our own hook known as used to do

to actually go ahead and do all of this.

Pass on as a hook.

Once that is all being done,

and now there are two cases in front of me

work either on the components

or the functionality part first.

I chose to work on the functionality first.

I always go with that.

So we went into app.jsx,

wrapped everything into the to do provider.

That's the easiest thing.

And by the way, if you remember,

we are having this to do provider also being exported.

So we need this one.

Otherwise we have to say to do context.provider,

don't want to do that.

So I went into app.jsx and work on with this,

wrapped everything we did to do provider,

either do it here or do it in the main.jsx,

totally up to you.

Wherever we are importing these values and things,

we have to import these functionality as well.

So we know that to dos don't need anything,

but add to do, update to do, delete to do and toggle,

we'd need to write the functionality somewhere.

So we chose app.jsx for that one.

Add to do, pretty simple.

We just added to dos from the set to dos, very basic.

Update is very basic.

We discussed on that, delete and toggle as well.

The important part was the use effect.

We used to use effect in this one.

This use effect will run as soon as the component will mount.

Since there is no dependency array inside this one,

this will never run again.

If to dos has a dependency array,

then it always run again

if there's a change in that dependency array

or any value inside the dependency array.

So this one use effect,

we want that I want to add or inject the to dos

as soon as there's a change in this state,

which is a to dos.

So that's why use to use effect, common thing.

You'll see this quite a lot.

After that, we started to build our components.

And the first we take down is a to do form, very easy.

All we had to do is work on just one functionality,

which is add to do, pretty simple.

We brought it in from the context.

And we simply say is,

when the add method is being called,

somebody clicks on that,

just run this add it to do,

which is context and pass on the data, that's it.

Then we worked on the to do item,

which is a singular item.

We spend a lot of time in understanding

the contextual part of it,

the conditional rendering of the elements.

This one was basic because we want to control that

whether the to do is editable or not,

what's the to do message

and what happens with the functionality as well.

So functionality we brought in from use to do.

The rest of the things is just managing the visual aspect

and the UI aspect of it.

So we worked on the edit to do functionality

and toggle complete, nothing much.

You could have done the toggle complete

inside there as well, but I chose to do it here.

Again, a random choice.

And in here we worked on simple things.

For example, should everything be will be striked off

or not based on conditional rendering of the CSS.

Input box.

So this input box is checked.

Should it be checked or not?

To do will tell me.

I'll just ask to to do.

To do dot completed, are you completed or not?

Based on that, we'll get that.

Then we have this nice thing,

which is having a lot of conditional rendering.

Majorly the outline around it.

So if there is no outline,

the input field looks like a text itself.

So we actually use that.

Value will get from the state.

On change will be governed by the set to do message.

And is it read only or not?

That's awesome.

After that, we have a couple of buttons.

The button will be a save button

or the edit button depends on is it to do editable or not.

And then the delete button.

So that is it.

A lot of functionality.

Don't worry about the CSS part of it.

If yours doesn't look exactly mine,

just look at the GitHub repository.

I'll be pushing that.

In fact, that would be a good thing to do.

I'll just go ahead and add everything in here.

And we'll say added another,

add another app with context and local storage.

Okay.

And this is app time.

So I'll just mention that app time.

Oh, too much.

I'll just remove this.

Okay.

So let's just go ahead and commit this

so you can find everything on my GitHub repository.

Okay.

Pushed it.

So there we go.

So now I hope that you are pretty much more aware

of the flow of the application

as well as how the context part

of the application works through that.

I hope that has given you great, great insight

of the React application,

some inner working of the React,

especially the use effect hook and whatnot.

In the next video, from the next video itself,

we'll be starting our mega project,

which will give you a lot of ton of insight

of how to build a full stack application.

We'll be using obviously the app right for it.

So let me walk you through about that in the next video.

All right.

Hey there, everyone.

Hitesh here back again with another video

and welcome to the continuation of our React series.

So far, we have studied quite a lot about the React,

quite an in-depth series about how we can build applications

with the React, how the React internal works

and pretty much a lot of things.

Now from this video onwards,

we are moving into a journey where we actually utilize

all the things that we have grabbed so far

and put this into a use of building a software,

building or using the development skills.

This is exactly what a lot of people miss

that how to actually transform your learnings

and knowledge into the development skills.

And this is known as development.

In this video, I'll walk you through

what we are about to build

and what all skills you are going to be learning

throughout this one.

By the way, we are building a full stack application

using React and for the backend,

we are using everybody's favorite and open source app, right?

So I'll walk you through what the idea

behind this application and I will be focusing more

on the generalized knowledge.

This means after watching this entire few videos

and the entire project,

you will be able to build any kind of social media app.

You don't need to watch any other videos after this,

you will have full knowledge.

By the way, just imagine what is Facebook?

Just some text and images, that's basically it.

What is a Twitter?

Just some text and images.

So it doesn't really matter how the website looks like,

end of the day, it's just a social media

which is empowering you with some kind of text

and some images.

The same goes for the blog article.

So if you know the ins and outs

of how to build a blog application

with some text and some images,

you pretty much can build any kind of social media app

as well.

Definitely on top of that,

there could be so much more that you can do,

but at least a basic building block could be ready.

And that's exactly what we'll be learning in this video.

So let me first show you what we are going to do.

So let me share my screen.

So this is where we'll be building.

By the way, in case you haven't noticed,

we are already on the 10th app.

So we have done with that.

This one is going to be technically our 11th app,

but I want to show you something more.

First thing, although you have completed the series,

I expect that you have completed the series

in all the playlist manner that I have uploaded.

So quite a lot of long playlist

that we have gone through with the long videos,

26 minutes to 40 minutes,

there's a lot of range in that.

Only recommendation is,

if you're watching it in the continuation,

I'm not sure that whether you have seen this video

at the very end or at the very last,

wherever you're watching it,

after finishing up your context API,

go and watch my Redux toolkit in one hour.

This is a crash course on Redux

where I've talked quite an in depth

about how Redux toolkit works

and the setup of it,

different ways of handling the situation.

This is going to be a little bit requirements.

So in case you haven't yet watched it,

go ahead, watch it in the playlist.

If you're watching this entire video in just one go,

go ahead and watch this one as well.

And then you can move on to this video,

which is obviously the next in the playlist.

So what we'll be building up?

We'll be building up this small application.

And again, our focus is not on the UI part,

but rather more on the functionality part.

In your UI, there might be two cards in one row.

In our UI, it might be four cards.

Doesn't really matter.

This is exactly the functionality we are looking up for.

This is our homepage where there will be a display

of the card which displays the title

as well as a preview of the images,

not the actual images.

This is something which is given to you by App Right

as kind of an easier way to handle images

so that not the entire image is being transferred to you,

but a preview version of it,

which is a little bit of a lesser quality.

Once you click on this, any of this AI or anything,

wherever you want to visit this,

this gives you a full blown image,

which is larger.

And that's why the bigger one,

because I wanted to show this exaggerately

that this is a larger one.

And you can see this is where we have our text data.

Our text data is very, very small.

I just wanted to show you that you can actually store

the way how this is being bowled out.

So yes, this is also done.

Not only that, this project has some of the issues

which are intentionally left in this one

so that you can actually work on them and work on that.

So that you saw that briefly login to read post.

So there's an intentional error being shown there.

And by the way, I will give you the entire list

of where the bugs are and how you can fix them.

Entire walkthrough will be given to you.

But these are the things that you have to walk through

and you have to learn through.

I've seen that when I recorded this entire series

in different language and people actually appreciated

that, okay, now we have some work to do.

And they got excited.

And if I click on this latest one,

you can see this is uploaded by me.

So obviously I get the edit and delete control over that,

not for the other people.

So that's a great idea of how things are done.

Here we can see we are storing more information

like there is a color control, there's all of that.

So we have a full fledged editor

that we are going to be using along with the React.

Of course, we have the logout and sign up functionality

and sign in functionality powered by app, right?

I'll walk you through with that as well.

When I click on the add post,

we can see that we have this add post that we have.

We have the full control of WYSIWYG editor,

what you see, what you get kind of editor.

We can store that.

We have a slug which works automatically.

We can have a nice slug

which automatically converts whatever the URL

or our title is into a URL format with the dashes.

So there is a little bit of logic writing

that you will be learning in this one.

So quite a lot of intriguing details are there.

For this entire one, we are using app right end to end.

This entire things are stored in the database like this.

I'll walk you through how the database are being created,

how you can use them, authentication features.

End to end, the full backend is powered by the app right.

It's free and we will be using that.

So if I click on this,

this is where we have entire authentication details.

We are having all these four, five random names

of the users, but if we wish,

we can go ahead and use other services for this.

For example, in the settings, we have a lot more options.

Just have to click and enable small pieces of code

that I have to inject and that's it.

It supports so many crazy how much it supports.

And we will be using authentication.

We'll be using database services.

We'll be using the storage services as well.

So this will give you enough of idea

that how to use storage, how to use authentication

and how to use databases.

Rest of them, I don't think so.

There is too much of tutorial required.

Once you know how to do A, B and C in one format,

you can figure out how to do the D one.

So that's the goal of this series.

So again, I'm super, super excited

that we are going to get started

and we are going to build this one.

Again, my recommendation is we will be focusing more

on the functionality part, the UI part.

It's purely, purely based on the tailwind.

I highly recommend you to give it a different look

that what I've given you.

A lot of other students have done that

and they have found that it's a great result.

They have learned so much more just by modifying the UI.

It gives them so much of confidence.

Of course, I'll be giving you assignments as well,

but I'm super excited to get started with this one.

So in the next video,

we'll set up a simple boilerplate react template.

We'll connect our app right with that.

We'll start everything from the scratch and the fresh.

And I'm pretty excited

that you are also following this up so far

and I'm pretty sure you'll be following

in the next one as well.

In case you are enjoying these series,

please share them on LinkedIn

and also do hit me in the comment section as well.

Just a model support a heart would be really nice.

So that's it for this video.

Let's catch up in the next one.

Hey there, everyone.

They share back again with another video

and welcome to the continuation of our react series.

So in this video, we'll just create a fresh app.

We'll peek into a little bit

of the documentation of app, right?

And it's actually surprisingly good

that their documentation was already good,

but they have still rewritten the entire one

and I'm loving the new one.

So we'll go through with that

and the entire documentation study that we are going to do

and with the code that we'll be writing

is going to be 100% reusable.

So whether you are building any app in Flutter

or maybe in React Native

or anything else that you're going through,

the concepts will remain same.

If the programming language changes,

then obviously you can find the things equivalent

in your language as well.

But in most of the case,

anything related to JavaScript, TypeScript,

they are going to be very, very same.

So let's go with that and let me share the screen

and walk you through with that.

So first, let's go ahead and create a new app.

So obviously we are using Vite.

So NPM create Vite at latest.

That is what we have been using

and that's exactly what you're using.

By the way, with this one,

I'm targeting the people who probably

might have not watched my previous videos.

That's also fine.

If you're just starting from here, that's also fine.

There will be a few concepts which I'll point towards,

say this was covered in previous video or something,

you can watch it at that time.

Otherwise it would be a fantastic experience

in working together and building a full fledged application,

a full stack application.

So let's call this one as 11th app.

That's basically our 11th app,

but hey, let's go ahead and start my terminal here.

We have a lot of one here.

We'll be just going with the create Vite latest.

I think that's good one.

And let's call this one as 11th blog app.

Blog app, yeah, fine, good name.

We'll be using of course React and yes, no,

we are not going to be TypeScript in this one.

Yes, I know, I do have a series

on TypeScript on this channel.

It got really popular on the free code camp as well,

but we'll be going with JavaScript in this one.

And what I want to do is I just want to kill this terminal

and I want to open this up,

right click and open an integrated terminal.

That way I don't have to do CD and all those stuff.

And I'm into this, I can just do an LS

and I can just say NPM install.

This is going to obviously install everything for us.

And we need Tailwind for this one as well.

So let's go into Tailwind CSS,

quickly go into the docs.

That's how I always recommend everybody

to just go look into the docs,

figure out how things works.

In this one, we have already done this kind of a thing.

So we'll be going with this command now.

So let's go ahead and copy this

so that we have the Tailwind setup being done.

So this is the part one of Tailwind setup.

The part two is to have the configuration file

and set up so that it knows where probably

you will be writing your Tailwind files

or Tailwind commands, utilities, wherever you see that.

All right.

So in this one, I have the Tailwind config.

Go ahead and change the content part.

Don't forget the trailing comma.

This is pretty important.

So go ahead and do that.

Once you're done with this, then in the index.css,

we need these directives being placed.

Yes, with the add the rate, they are called as directives.

So we'll go into the main file where all of my CSS is there.

In my case, it's inside the source

and I do have index.css.

We'll replace everything

and place our directives there, save that.

And that's it.

Now I'm technically allowed to run npm run dev

to have my application up and running.

We'll be doing that, but that's the basic configuration.

The next step is to have app right being installed.

Now installing app right is pretty straightforward.

There is nothing too much to discuss on that.

It just says npm install app right.

And that's it.

That is the easiest part.

Now you might be wondering that we are into React,

which is pure front end.

So what does this app right is going to do?

This app right package in itself will allow you to talk

to the backend part, backend as a service, which is app right.

This is a very common thing

in case you have used any backend as a service

in which we focus majorly on the front end part,

not on the backend side.

So backend part is handled by the app right.

But in order to talk to that, we need the app right.

So that's what we have.

Let's quickly check our package.json

so that we can verify things are doing good

and we are okay with that.

All right, so in the dependencies we have app right.

That's exactly what we want.

And in the dev dependencies we have tailwind and all.

All of that, we are happy with that.

So app right is the only thing that we require right now.

Now we'll be needing a couple of things here.

So inside the blog, I'll be just creating

a couple of new files.

Let me go ahead and first create that.

First is going to be .env.

That's my environment variable.

I'll walk you through that,

how you can deploy this application on WordCell

or Netlify, whichever works for you.

I'll show with the WordCell.

So these environment variables are very important

at that point of time.

So that sensitive information or data is not exposed

in the GitHub and all of that.

I will also create another new file

because I want to give all this data to you.

So I'll be saying that .env

and I'll be creating a .sample.

So this is a sample file which is meant to be given to you

so that you actually work with that.

And what I'll do is I'll just actually go up into this one

and this environment variable,

I can just right click and add this to gitignore

so that that file never goes out to any GitHub repository

because this includes some of the sensitive data

that I'm about to add in here, okay.

What kind of sensitive data you will be requiring

that will come from the AppRite itself.

So go ahead, create an account on AppRite

if you haven't yet, it's cloud.apprite.io,

pretty straightforward, pretty basic.

And if you just scroll at the bottom,

you'll find the docs one here.

By the way, you can just get through the docs

simply by apprite.io slash docs, however you want.

And let me walk you through how to study these docs,

that's an important aspect.

So on the left hand side,

you'll see that what products they offer

and they have authentication, database, functions

and storage, these are four major services.

There's a lot under these categories,

but these are major four categories that they work on.

In this project, we'll work on auth,

we'll work on database and we'll work on storage

so that at least three of them

are completely understandable by you

and you can explore further things more.

In the database, I'm not just talking

about touching the database,

I'll also walk you through how you can make queries

in the database so that whatever the application

you are building, you have the knowledge

so that you can explore things on your own.

So we'll be going through with that.

Now, if you go on any of these products,

for example, if I go into the auth,

now we can see that there are journeys

and there are references.

Now, journeys is something that what do you want

to implement in your application

and the APIs are what all the things I can do in that.

For example, in the email and login,

if I just click on this, it gives me the entire that,

hey, what do you going to need?

The entire project is itself there,

so entire source code is there and you can just see that.

So here we can see that what we get is a promise,

but what we are using is an account

which gets to us by this account from the app right,

just like this.

And further this, we can actually provide a user ID

if we don't, app right will give us one

and we can provide an email and password

to create an account of the user.

So this is all it requires.

And further, if you want to do the login,

the same kind of a guide is provided to you.

But if you want to do more with this account API,

you can just click on the account API

and can see that I can get an account,

I can create an account, update an email,

I can create a JWT token, update a username,

pretty much whatever I want to do,

delete the sessions, list the sessions.

There is an endpoint given to me

so that I don't have to worry too much.

For example, if I just want to see that

how to delete sessions, all the sessions,

I can click on this and this gives me the method that,

okay, you can use simply deleteSessionsS with the end

so that it deletes everything.

And that's it, that is going to delete.

So it saves me so much of the time

and if I know how to navigate properly,

it doesn't really matter if you're using a React Native,

React, or you're using something else,

it just is the same.

So that's a brief overview of how to actually study

the newer documentation and I find myself,

I can find exactly what I need in a much quicker time

with this pretty much fantastic documentation here.

Okay, once now that we know that how the documentation

and how we can traverse through them,

I can go into organization, which it gives to everyone,

the first time you create the account,

this is what they call account as an organization.

I am supposed to create a new project.

So let's go ahead and create an empty project.

I can import a project as well, but that's experimental.

They are always very fast in doing the things.

They always keep on doing some stuff.

I'll create an empty project and let's call this one

as YouTube blog, I think that's a pretty good name.

It also gives you a project ID.

We need this project ID, but I don't want to edit it,

although you can, if you wish,

you can add your own custom IDs.

I don't want to do that.

I'll just simply click on create,

and this is going to create a project for me.

And in a few seconds, hopefully my internet is,

oh, some of the things are actually getting uploaded.

So I'll just copy that, stop that for a minute.

And this is what I need.

So I can just click on the copy

and this is something that I'll be needing.

Okay, where do I need this?

All of these things, go ahead and follow along with me.

These are some required stuff from your site.

So, okay, Postman, no, I don't want to do any of that.

Okay, in the environment variable,

we need some variables to be put on.

So I'll be just adding a React underscore app,

and then I'll say underscore app right,

if I wrote that correctly, app right underscore URL.

And that's going to be my first variable name.

And similarly, we will be having a couple of others,

like app right project ID as well,

project underscore ID, and this is my project ID.

So what we get as a project,

that's exactly my project ID that I have.

Now, once I have the project ID,

the next thing is we have not worked on one thing,

which is the project URL.

Now the project URL is actually constant

for all the app right,

because the app right is hosted up here in the cloud.

By the way, in case you want to do

and find it out properly, then click on the web.

This is where you add your project.

You can add multiple of your project.

So my project name is, we called it what?

We called it as, let me just go into package.json.

We called it as 11 blog app.

Let's use the same, otherwise it's not really compulsory.

This is really important.

Right now we want to use a local host here,

but as you upload this exact project on vorsl,

Netlify, wherever, I use something similar to this.

So any subdomain which is coming up from vorsl,

any subdomain that's come from Netlify,

if you're not going to put this properly,

then there are 100% chances that you will find yourself

messing up with the course error.

So this is something which resolves it 100% necessary.

Please pay special attention to this one.

For the local host, it doesn't require any port or something.

You just need to get local host.

Notice here, it actually gives you a suggestion.

I hope it's visible in the screen recording.

Yeah, it is, it is.

So just add a local host.

So just go ahead and add a local host.

That's all that is required.

Once you are done with this,

now any request coming from local host

will be accepted in the server and it takes time.

Not too much, but I have noticed it takes

two to three minutes to propagate these changes.

Sometimes when I'm back to back recording,

it sometimes takes time.

So two to three minutes is usually the things

to propagate these changes.

Let's click on the next.

Now, npm install app, right?

We have already done that.

This importing of the client in the web SDKs and stuff,

we will do that, but not right now.

Let's go ahead and click on the next.

This is the endpoints and set project.

So notice here, project is 736.

This is exactly the same ID that we have got in this one.

So 763, that's the same ID we have already got.

And there is an endpoint being mentioned here as well.

That is exactly your app right URL.

You might want to copy this.

And by the way, this is exactly same for all the projects.

Yes, I worked with a lot of projects of app right.

And this is exactly what you needed here.

Okay, once we have this,

now we can click on the next.

And it says, hey, go to your dashboard and stuff.

Yes, I'll go ahead and do that.

This is one of the most important thing.

Please do not skip that.

Otherwise I've seen people struggling into the course error.

So these are the two things that you need

and your project.

Now you have a unique ID, you can talk to that.

And that's where the app right SDK comes into the picture.

But there are a couple of more things

that we are going to require.

So project ID is great.

I'll just remove this one.

But apart from the project ID,

we need the database ID as well.

Database underscore ID,

we'll work with the database as well.

Once you're into the database,

that's a generalized database.

In each database, you'll find a lot of collections as well.

So I'll just go ahead and have a collection ID as well.

And by the way, from where to get,

I'll walk you through with that as well, don't worry.

And we need the bucket ID as well.

So I'll just go ahead and add a bucket.

What do you mean by bucket?

Bucket simply means the storage that we'll be using.

So let me walk you through how we can grab that.

So I'll simply go ahead and have this one.

So what I'll do is simply go into the database.

So our app is completely up here.

Now here we have the databases.

Just go ahead and create a new database

and enter the database name.

Let's call this one as YouTube,

whatever you want to call,

you can go ahead and call that.

I won't be giving any ID.

It will be given to me automatically.

So I'll just go ahead and click on create.

So that's what this is.

So this is your database ID.

So go ahead and copy that.

That's exactly what we need.

So this is our database ID, that's it.

And once we are into the database ID,

then obviously we need to create a collection.

So that's the next step.

I'll create a collection.

Let's call this one as blogs, articles, whatever you like.

I'll just go ahead and click on create.

And this is my collection ID.

So blogs, notice here how easy it is

to just go ahead and go with the flow

and copy the collection ID.

So that's all what we need.

Now in here, we are going to need

to add some of the attributes.

What kind of data is going to come up in the collection?

Since we are here already,

let's go ahead and add those attributes.

So let's go ahead and click on attributes

and click on create attributes.

And you can create attributes of type string, integer,

flow, Boolean, there's a lot of types.

I'll be most of the time will be using the strings.

Once I click on the string,

what is the key that you want to use?

I want to go with title.

If I can write that properly, there we go.

What is the size?

Totally up to you.

I'll go with 255.

Go ahead and use whatever the type

that you want to go with that.

So I'll just go ahead and add 255.

So use that or use the scroll ones.

You can add a default string value if you wish.

I'll be requiring this.

So I'll just say, hey, this is a required string.

I'll just go ahead and click on create, that's it.

So you need to provide a structure of your data

that how this data is going to come up in the collection

so that anything which is required can be treated like that.

Let's go ahead and add a few more

which are going to be useful for us.

So we'll be saying content.

This is how my content will come up.

I'll go with the string again, 255.

If you wish more, then obviously add more numbers here.

These are character sizes.

So go ahead and use more.

I'll say the content is also required for me.

I'll just go ahead and click on create for this one.

All right, so we have content title.

Let's go ahead and create one more.

And that is going to be my featured image.

Featured image.

Now this featured image is going to be a string size.

I think 255 is good enough.

I'm not storing the actual image into this one.

Rather I'm keeping the long string URL

that I'll be uploading in the date

in the storage service of app, right?

Once I store an image in that,

it returns me back as a promise of a long string URL.

That is what I'll be keeping here.

And I'll say this is also required.

So give me this image.

This is pretty important for our application.

Let's go ahead and create that.

Now I hope it gives you an idea

that how these things can be done.

You can work with that.

So I'll just go ahead and create more attributes.

One more string.

So I'll just say, hey, I need one more, which is status.

Now it's up to you.

You can keep this as a string

or you can keep this as a Boolean value.

I'll not keep this one as required

because that's the status of my blog,

whether it is active or inactive.

I can just do that on the go.

But if you wish to have it as an enum Boolean,

it's totally up to you.

I'll have one more, which I'll talk in a minute,

but this one is actually user ID.

So I'll be adding a couple of, not couple,

just one user ID for each of the blog that we have.

So this is exactly for that.

255 is good enough that we saw

while building the demo of this application.

But this is required field

when we create a collection of this one.

Let's go ahead and create this one.

Okay, so there we go.

We have now the basics being done.

Pretty good.

Now what we'll do is we will learn

how we can make some queries with the databases as well.

In order to make some queries,

we need to have some queries

other than these basic fields like title or something.

What you'll study is when you have an index

is being placed on any collection,

it's much more optimized for the searching purpose.

I'll probably talk about more

of the database optimization stuff

probably in some other video.

Right now, let's go ahead and learn

how we can create an index.

So all you have to do is create an index,

is provide a key for that one.

So I'll just go ahead and say that,

hey, the key we are going to call this one as status,

that's my key.

The key type is you can have multiple keys.

I'll just go with the keys.

What is the data attribute

which will be responsible for this one?

I'll just go ahead and use the status for this one.

And that's it.

I'll just create this.

That is how simple it is to have a key being assigned.

So there we go.

Now we'll be able to make queries.

By the way, we can make queries

just based on attributes as well,

but it gives us a little bit more advantage.

We'll study about them and I'll walk you through,

give you some resources more on that.

So there we go.

We have now all the values being added up here.

Since we were already here, we set this up.

Now, coming more onto this one.

So we have the auth service,

we have the database service, we studied about them.

We have one more thing, which is the bucket ID.

Now, in the documents,

if we'll just come up onto the documents

and we were in the attributes section,

go into the settings section.

This is where you can see that who can actually have

the permission to add these documents.

This is the most important thing.

Not if anybody can come up and write

into your documentation,

you need to give a role to that,

that who is allowed to that.

Anyone is allowed, all the guests are allowed,

all the users are allowed,

any guest, anybody who will like to that.

I'll say that any user is allowed.

Any user is somebody who is already using my application,

already logged in or something.

So all the users are allowed of this application.

So it will automatically wire these things up

with your links.

I'll say that all of my users have the ability

to create, read, update, and delete my application.

Whatever the role you want to give,

you can have the role-based access

within this database as a service.

I'll just go ahead and update this.

So there we go, our permissions are updated.

This is the most crucial one.

I've seen people struggling with this quite a lot.

So make sure you are worried about your settings

and who can access the application.

Now we'll not talk about the functions in this video,

probably some other video.

Let's go into the storage.

So this is where you set up your buckets

and everybody calls this storage as buckets.

Let's go ahead and click on the create button.

And what do you want to call this bucket?

I'll call this one as images.

Doesn't really matter.

We never actually,

we never reach it out to using the name.

We always reach it out using the ID.

So that's what we need.

So let's go ahead and create this.

And we'll see the bucket ID,

go ahead and copy this and that's what.

So there we go.

Our setting is all done.

Now I want to copy this

and I want to give this you into environment variable as well.

Obviously these things will be changed

by the time you'll be watching the videos.

So I'll be obviously rewriting them.

It's important for me to rewrite.

I'll be giving you all of that,

but you know what values and what variables to look up for.

So that's the step one of how to grab

all the environment variables

and what the settings we need from this one.

Now let's go ahead and set up

a little bit of our application as well

and show you some of the best practices

that probably will help you to optimize these applications.

So first thing that we're going to do is inside the source,

I'll create a new folder

and we're going to call this one as conf.

This is for configuration

and we'll be creating one more file into this one

known as conf.js.

Conf.js.

Now what we are going to do in this configuration,

what we're going to do majorly

and you'll see this as a common production grade setting

and practices being used

is you simply go ahead and create a conf

or conf just like this.

And this is usually an object

and you simply go ahead and export that.

Export default conf.

Now why we are doing this?

This is being done because sometimes what you'll notice

is accessing the environment variable

could actually potentially throw up an error

or sometimes there is no guarantee

that what data type is getting returned.

This is not the case when obviously

are using TypeScript or something,

but this is a common practice being used.

For example, I can just go ahead and say that,

hey, I'll export an app write URL just like this

and the value of this will be wrapped up in the string

so that I'm 100% sure the value that's coming up

is actually the string.

And I'll just go ahead and say,

I'm accessing that by process.env

that's by default in the React.

And then I'll just name this one as whatever I use there.

So in the environment variable,

if I go ahead and say app write URL,

copy this and I go ahead and paste this up here.

So a common practice that you'll see quite a lot

and similarly, we have the project IDs and whatnot.

So let's go ahead and finish this one up.

App write project ID just like this

and again, same string and yes, this one takes time.

Process.env.

And we need to grab the project ID.

So copy that, paste that.

That's the project ID.

We need the database ID now.

App write database ID and our gain string.

This is just to make sure that we don't fall

into the case or the data type issues.

Again, nothing much.

Process.env.

And we need to grab the database ID.

This simple export will help you

to save so much of the problem.

Trust me, I've been into that phase.

App write collection ID

and again, that's going to be a string

and again, process.env.

This looks so much work right now

but it saves so much of the troubles.

Good practice again.

We have the collection ID, one more, bucket ID, almost done.

App write and bucket ID.

There we go.

Again, last one string and we'll be saying

process.env.

And last one, bucket ID.

All right, so there we go.

So now that we are exporting this conf,

now we can import this at any place

and wherever we import this,

we have conf.app write URL, app write project ID

in case you wish you can directly go ahead and import this.

But the idea is that if we face any error

or the environment variables are not being able to load,

we see all of that at one place.

So this makes life a little bit easier.

It was not compulsory to do

but in the good major scale projects

and high scale, high scale companies,

you'll find that this is a common practice.

So just wanted to introduce you that,

that yes, things like that happens

and things that like works.

All right, so this is our basics,

the setups and everything are done.

Now let's close all of this.

You have the idea how this is being done.

Now let's set up the things for the next video

that we are about to work.

So for this one, we'll create a new folder inside the source

and this is the most important thing in here.

Let's go ahead and name this one as app write.

And inside the app write, we'll start with just one file

and then eventually you'll see that why the other file

or how the other file will work.

We're going to call this one as auth.js

and I'll walk you through what is our plan

with this auth.js.

So right now we have just got the idea

that how things are going to work.

We have studied the app write a little bit.

I highly recommend you to go ahead and explore

a little bit more of the documentation of app write.

The idea behind that is I want to create these services.

Why services?

What's the service as a page?

Whenever you work with these kinds of applications,

especially backend as a service,

you want to create a service file

which actually kind of encapsulates all the hard details

like how the registration work.

Somebody who's using our application

should not worry about that.

He should see this as just a method

that I provide you an email and password

or probably a photo and you register me as a user.

What you do in the internal detail

should be hidden from me, should be abstracted for me.

And another advantage of doing this same approach

is maybe you are working with React Native

or maybe you're working some other application as well.

You can reuse this exact same code.

Yes, literally you can copy and paste this exact code

and it makes it so much highly reusable of a code.

So that's a good practice

that we are learning how to write the reusable code.

So that's one of the advantage we are going to learn.

And once you see and understand

that how we can use authentication service

and the database service as well as the storage service,

that's it, you are mastered about the three services

in app write and you can explore things on the go.

We'll be learning everything from the documentation itself

so that it gives you more confidence

that yes, you can do the things on your own as well.

All right, so that's it all.

We'll be doing keeping it short.

And in the next video, I'll be changing some of my IDs

because I've exposed this to all of you.

So I'll be changing them

and then we'll be working on the next file together.

All right, so that's it for this video.

Let's catch up into the next one.

Hey there everyone, Hitesh here,

back again with another video

and let's continue our journey with the React.

Just to give you a brief context,

in the last video we saw that

how we can build a full stack application

using React and app write.

I walked you through with the setup of app write

and integrate it with the React.

Just a quick sidebar or as an interesting note,

make sure that you're in your app write app,

your app is properly configured,

you have added the web app

and there is a local host string being added.

If I'm not going to add this,

this might lead up into a lot of course error

which are nasty in itself,

but the easy fix is watch out

if you have added the web app inside the app write.

That's it.

In this video, I will walk you through everything

that you need to know about

how to read the app write documentation

and integrate the auth section of it

and taking one section at a time

and we'll walk you through

how you can make your code robust

as well as highly reusable,

whether you're using app write in Next.js,

React, React Native, Flutter, whatever you're using,

you will be creating exactly same file.

In fact, you can actually copy paste

this exact same file in all of your project.

And not only that, I'll walk you through

what is the best way to read the documentation

and all that you need.

Quite interesting, isn't it?

So this is all that you need to know

about handling the auth in the app write.

Let's go ahead and get started.

Let me share my screen first

and then we'll walk you through.

So this is our app write documentation

and this is our React app

that we have been going through for a while.

And in this, I showed you

that we have installed the app write.

So if I just open up my package.json,

we can see in the dependency we have app write.

Pretty cool so far.

Now, after that, with the basic configuration

and having all of our environment variables,

which we discussed in the last video,

I asked you that create an app write folder

and create an auth.js file into this one.

In this video, I'll walk you through that

how we are going to use this file,

but first let's read the documentation.

So when you go to the appwrite.io slash docs,

this is where you see all the docs.

And the organization of the doc, the hierarchy of it,

the structure is pretty nice

to go ahead and work on with this one.

So in this video, I'll walk you through with this

that how you can actually use this one.

So just give me a second, I'll arrange these things.

Some of my elements are moving on the screens

just like that, okay.

So as you can see, the products that they're offering

is auth, database, function and storage.

In this video, I'll cover the auth.

In the next video, I'll cover the database

as well as the storage part of it.

So that's pretty nice.

Let's go into the auth section of it.

Inside this auth section, you'll see that

on the left-hand side, we have some of the concepts,

the journey and the references.

Most probably the way how you're going to handle

is first a look at the journey.

For example, in this one, we want to see how we can

add a user based on email and password.

Maybe you want to go with auth logins or magic URL,

the same strategies are followed there as well.

I click on this, and this is the first step

that how I can sign up a user.

Similarly, I can just read the docs for login

and something more.

But what if I need a little bit more?

So here, first of all, just go ahead and read one thing,

which is if you go onto this auth section,

if you go onto the auth homepage,

there is nothing too much to explore into this one.

Just go onto this one, this is my journey.

And after this journey, let me just move this

a little bit here so that you can see it all.

Now, what we're going to do majorly is this account API.

User API is, you have a user and you want to modify

some things about user, maybe it's name,

email, and it's record, but this is the account API.

There is a difference between them.

So if I click on the account API,

you'll see there are two dots here.

Just go ahead and click on this.

And this is where you see all the methods,

how to create an account, how to update an email.

So all these things are mentioned here.

For example, if I want to delete a sessions

or list all the sessions, I can just click on this.

And this gives me the source code.

This is a little bit shrinked up.

So this gives me the entire source code

that hey, you have to use a method

which is known as a list sessions

and I'll give you a response.

And in the response, I'll give you a promise

and you can extract data from this promise

and you'll get all the sessions.

Exactly like that, if I want to work on the delete session,

I can just use the method which is delete sessions.

Similarly, if I want to create an email verification

or I want to have something else,

whatever, I want to get the account preferences

or I want to update the name,

create a JWT token, whatever I wish,

I can go ahead and do that.

Apart from this, I would like to bring you back

on to the account, not here, into the auth section.

So in the auth section, the very first thing

if I go into the journey of email and password login,

notice here this source code, just walk through with this.

Every single time, I have to import client, account and ID.

ID for creating the unique IDs, there is no big deal.

Then I have two options here, client and account.

Now with this, you'll see a similar pattern

that is getting repeated again and again.

For example, you create a new object out of this client.

Okay, I understand this point, I understand this part.

Now I have to set an endpoint and set a project.

The endpoint almost always remains same

until unless if you have added your own custom domains

or something like that, but in most cases,

it will remain same.

And you have to give a project ID.

This project ID we have already seen in the last video

that you can just go ahead and copy this project ID.

This is very repeatable code, okay?

After this, I have to create an account

and I get this variable account after using the account

that was given to me by app write

and injecting this client variable to it.

So this is almost like giving a context to the account

that here is your context and now give me this object account

and this account is you can say a facade.

It has so many things inside it into it.

For example, you can use a method like create.

This create method is actually associated with this account.

That's why I'm able to call it account.create.

Similarly, now if you go into the login,

you'll see exact same portion being repeated.

Okay, there's a client, there's account,

there's an endpoint, blah, blah, stuff again repeatable.

But what I see is account.create email session.

What parameters I pass on, I can study it here,

but I can see this whole top point is very, very repeatable.

Now with this, I would like to bring your attention

that if these all things are very repeatable,

can I write a code in such a way

that I don't need to repeat it again?

And one such example is create a class

because in the class I can create a constructor

which can do all of this code repeatably for me.

And when I extract an object out of this class,

maybe all things are already done.

And this is exactly the approach that is used

for creating the services.

Yes, this is what we call in the programmatically

jargon word as services.

So what I'll do is I'll create a service

and I'll use almost exactly same kind of a stuff like this.

So I'll just go ahead and copy this much

from wherever you want to borrow it.

This is exactly same code signup login.

It doesn't really matter.

Borrow this code and what we'll do

is we'll just paste this code here.

Doesn't really matter.

These are for my references only.

Now, first of all, I obviously need these project ID

and stuff.

So I know that I have actually added them up

inside my config.

So I'll just go ahead and say import conf

and that conf will come up from,

we need to go one directory back inside the conf

and there we have got conf.js, I guess.

Yep, that's exactly the file I'm looking up for.

Now I have this conf data.

And with this conf data, I can actually go ahead

and use this app write URL, project ID,

all these things are being exported.

So just with the dot access, I can have this.

So this problem is solved.

All right, what is the next problem?

This thing is very, very repeatable.

So it's better that if I go ahead and just use this.

So I'll just go ahead and move this line above

because I'm going to use this one.

Let's create a simple class and export that as well.

So I'll go ahead and say, hey, export class

and let's name this one as auth service.

We will export the class, maybe we want to use it

but my goal is to create an object out of this class

and export that object so that you can just import it

and start using it if you want to use it anywhere else.

So I'll go ahead and use service if I can write that correctly

that would be great service.

All right, so there we go.

This is our classic class in the JavaScript world, okay.

The next thing is we need couple of these things.

So we need these client and we need this account as well.

So these are my goal to create.

So let's go ahead and do that.

So client is pretty obvious.

I can go ahead and say, hey, client,

you will be coming up from new and client just like that.

Okay, happy with this one, but account not so happy

because I cannot create the account directly right now.

Account can only be created

by passing the context of the client.

And in order to create a proper client context,

I need to run these methods dot set endpoint dot set project

and I cannot just do that right now

because otherwise just by creating the class I'm running.

I want to run these methods

as soon as somebody creates an object out of this class

and that's a great way to bring up the concept

of constructors.

So this is my constructor

and as soon as this constructor is being called,

that means as soon as somebody creates an object

out of this class, I'll say that this dot client,

now we'll use the two method.

The first one is set endpoint.

I'll pass you the variables in a minute

and I'll also go ahead and use the set project.

Yep, that's the one.

Set project and these are the ones.

I'll pass you the variables in a minute.

But once this is done, now I can create an object,

not object, the account.

This is exactly what we studied.

Create an account by passing the context.

So I'll just go ahead and say this dot account.

Now you can have the value.

So what value you get?

You'll get obviously a new keyword

and we'll get an account, we'll pass on the context,

which in this case is this dot client.

There we go.

So no more repeatable code in every single time

I have to do this.

This is the best thing that you can do.

Now let's go ahead and pass on the variables into this one.

So this one will come up from conf dot app right URL.

Yep, that's what we used.

And into this one, we'll say conf dot app right project ID.

There we go, problem solved.

And this is highly, highly repeatable code.

Now, what we're gonna do is,

we're going to create a couple of methods.

And again, these are app right methods.

So your request is going to the app right,

coming back onto this one, this might take some time.

So obviously async await is your best friend in this case.

Maybe you don't like them,

but these are your best friends.

So what we're going to do is,

we are going to create a sync method.

And let's just call this one as create account.

And this method has no idea how it works.

It just works.

So this is my first method, create an account.

How to work with that, we'll walk through with that,

but I'll create a couple of methods like this.

So this is my create account.

This is my login method.

What else do you need?

So anything that you want to use.

So two things we already studied, sign up and login.

Maybe more things you are going to require.

Maybe you are going to require,

give me the current logged in user

or whoever has the current session.

So we can just use that.

So I'll just use this one, get current user, just like this.

And after that, log out will be one.

So obviously we need to delete all the sessions.

We just saw the code for that.

So that will be log out.

So if you have anything more,

you can go ahead and use more such things.

Now it's time that we write logics for that.

So for that, let's refer the documentation.

For the signup, we have gone through with this much part.

So I'm not worried on this part now.

All I'm worried about is dot create method

that I have to go through.

I'll be giving the user ID.

So I can give my own unique ID or I can use the ID

which I borrowed from the app right just here.

And I have to pass on email

and whatever else field you have,

you just pass on them and it will create an account.

All right, let's see how we can do that.

So anybody who will be using this method

will be passing me what?

Email and we'll be getting password

and we'll be grabbing the name as well.

Maybe you have more field,

go ahead and grab more field, nothing to be worried.

Now in this one, obviously this might fail.

So your try catch is again a good friend.

Feel free to use try catch or promises, that's up to you.

I'll leave that as a simple exercise for you,

but I'll go with that classic try catch

because I think that's easy.

And in this case, I'll just go ahead and say throw error.

That's it, should have handled better,

but in this case, just want to walk you through with that.

Okay, now we have seen that we have to use this method

dot account dot create.

Okay, I can use that.

This is going to be awaited

because this is a promise that we are getting.

So if we are not using promise,

then obviously we have to await.

So in this one, I have to access this account.

I have to call this dot account.

They don't because they are directly using it.

I have created an object.

I have created a constructor.

So that's why I'm using this.

So this dot account and it has a method dot create.

That's it.

And all the values need to be passed on.

The first method is the user ID.

So the first method I can grab with the ID

that I borrowed, notice here, this ID exactly same.

If you'll study the documentation of this,

this has couple of methods.

And as soon as you put up a dot,

you can see that there is a thing known as unique.

No suggestions, bad luck.

So you can just provide a unique

and it gives you a string,

which you can store as a unique ID.

But there are a lot of other ways to generate unique IDs.

Maybe you want to use nano ID or something,

totally up to you.

I'll go ahead and give email and I'll give a password

and I'll also give a name.

If you have more parameters, go ahead and pass on this.

Now this is going to create an account.

So let's store that into a variable

and call this one as user account.

There we go.

Now we have the user account.

Now I can check it,

whether the user account was successfully created or not.

So I can just run a simple if else condition

and I'll check if the user account exists or not.

So if user account exists, do something.

If it doesn't exist, then return whatever the value is.

Maybe there's a null inside it or whatever that is.

It's up to you how you handle that.

Maybe you want to return a proper error object

that hey, throw this error, whatever you want to do,

it's up to you.

But if the account was created, I want to log in the user.

Probably that's my workflow.

Probably that's the flow I want to go with the application.

So I can just go ahead and say return

and I can call another method login

and I can just log in the user using this method.

Obviously this login is not going to work directly.

This requires some parameter.

I can log in with email and password.

Now I can just simply go ahead and say return

whatever is coming up back from this.login,

calling another method from the same class, how easy it is.

And for this one, let's pass on email and password.

That's it.

Now, whatever is your flow, totally go with that.

But I just wanted to show you how life is going to become

easier in the future with just this class that we have.

Now, similarly with the login, we know that.

We just studied it.

To log in, we know we want to just work

with this create email session.

I'll copy this so that I don't make a mistake

and I can just use it.

So let's go ahead and try the exact same methods.

So again, try catch, catch, not going to do too much

apart from throw the error.

And in the try part, let's go ahead and return a wait.

Obviously we have to wait.

This.account, and we have to use the method

of create email session, pass on the email and password

that you have grabbed.

And that's it.

So easy to work on with.

And this is why I like so much.

This file is so much reusable.

This file is not opinionated.

You can use this in React Native.

You can use this in React.

I have used this in my lots of other tutorials as well.

And that's why I love to create this.

Maybe right now, this create account as well as this login

is not good enough feature for you.

Maybe you want to add more.

Just go ahead and add more methods into class.

That's great.

Now let me show you how you can get the current user.

This is a little bit hidden in the docs,

but super easy again.

There's just one line here.

So I'll just go ahead and try catch.

And if the catch is there, you are not able to grab the user.

Then I want to do a little bit of the more console log,

but anyways, I'll just go ahead and say return.

The way it is must have this dot account

and the method to get the current user is dot get.

Yeah, super simple.

That's all I have to do.

No variables, nothing is required.

It just, since this account has an access

to the endpoints and all of this.

So that's how I can grab it.

Super, super easy.

But if I'm not able to do this,

then obviously I'll want to do a console log in this case,

because sometimes this has happened to me

that while working with this application,

things might have gone a little bit wrong.

So I'll just copy paste a little bit of the error.

So I'll just say app write service.

There is an error in the service, two colons.

And then the problem is in get current, oops,

get current user.

This is the method which is creating me the problem,

two colons, and then I'll just go ahead

and would like to stack the entire error,

which is coming to me.

Again, it's up to you how you handle the error.

It's totally up to you.

But if I'm not able to run any of the try catch

and all of that,

I would love to gracefully end this method

by returning a simple null.

So I'll check whether what I'm getting,

if I'm getting null,

I can handle the situation based on that.

Now, another one is how to do the logout.

The logout is super easy.

If you want to do anything, just go hit account API,

look for what all that you want to do.

You have to study this obviously.

List the identities, delete the identities,

update the phone numbers, list the sessions,

delete the sessions, yes.

This is exactly how you delete all the currently logged

in sessions or known as logged out.

You can get the sessions as well, just like this.

You can go ahead and get all these sessions.

And there's a lot more here.

Some things you require a little bit more of the studies

and discussion, the Discord forum is also,

Discord section entirely is pretty great.

Anyways, so let's go ahead and work with,

I want to delete the sessions.

So all I have to do is use this delete sessions,

copy this and we'll come back onto the logout.

We don't need anything.

As a parameter, we'll just go with the try catch.

In the catch, we'll just do a same kind of a thing.

So let's go ahead and copy this, paste this.

And this time the error is inside the logout.

There we go.

In the try, what do you want to do?

I want to await this dot account dot delete sessions.

Make sure there's an S at the end of it

because it deletes every session that you have.

So there we go.

This is the way how we actually were able

to just simply create some of the methods

that helped us to do all of this.

But this is not all.

Because right now this is a great class

that we have built up.

And let me just minimize this.

This is going to work nicely.

And I'll not forget to remove all of this.

This was just to show you,

usually every programmer does that.

Bring some things, keep them in the file,

eventually remove that.

This class is great, but this class needs an object

so that this constructor is invoked

at the time of creation of the object, obviously.

So what we can do is we can simply go ahead and say const.

And let's just call this one as auth service.

Service.

And that service will be created, obviously,

new auth service, just like this.

So we have created an object.

Now we are going to go ahead

and export default this auth service,

this object auth service.

So this lower one is an object.

This upper class is the class itself.

So now the advantage of exporting this object

is that at any point of time, the constructor is invoked.

So my endpoints are properly created.

And since it's an object, it can access all those methods.

So life is much more easier this way.

So this is all that you need to know about these services.

And in case you want to add more methods,

maybe in your application, it makes sense

to update the status as well.

So you can update the status as well

that whatever, however you want to do,

does it make sense or not status of anything?

So you can make more things.

Maybe you want to create a JWT.

So you can go ahead and request create JWT.

It will give you a JWT.

So just go ahead and add more of these methods

in your class, highly reusable code.

And I'll obviously go ahead and push all of this code.

You can find them all in the GitHub section

in the description section.

So this is really nice.

I enjoy this quite a lot.

This is really a high quality code

that you have written, highly reusable in any application.

And it's fun as well.

So in the next video, we'll go through with the same process.

But this time, we have already done with the Auth section.

Next time in our application, it makes sense

to have an interaction with database as well as storage.

You can keep them in separate files as well.

We don't have that much of the application

or the methods being called.

So we'll keep them in just one file.

And it's your choice, your decision totally.

So in the next video, I'll walk you through

how we can interact with the database

as well as the storage section

and the storage APIs of the app, right?

I hope you're excited.

If you are, do let me know in the comment section.

I would be super, super pumped up

to get some of your support,

maybe on tweet, on LinkedIn or wherever.

If these videos are making a little bit help,

some motivation is required for me.

I really, really need that.

That's it for this video.

Thank you so much.

I'll catch you up in the next one.

Hey there, everyone.

It is here back again with another video

and welcome to another episode

where we are trying to learn React

and we are trying to finish up our mega project.

In this video, you will learn everything

that you probably will need to learn

about AppRite's database,

how to make queries with the database,

as well as how the storage facility of the AppRite works.

The code that we are going to write in this video

is of course highly, highly reusable.

You can use it with the React application,

Next.js application,

probably with the mobile application as well,

like React Native Letter, whatever you're using.

We'll just keep it absolutely independent

of whatever the platform you're using.

That's the goal and we are going with that.

And of course, it's a little winter time.

So probably one of my first video in the winter wear.

So that's what we are going for.

Okay, so let me share the screen.

And first, let me just remind a little bit jog

of the memory of what we are about to do in this one.

So in case you remember, in the last video,

we worked through with the Auth.js

and I gave you a simple walkthrough

of how these things actually work.

And we created a simple Auth service,

which is having all the constructors and methods.

And we are using the client account.

We created methods like create account login,

current user logout, and probably you can add more.

We also went up with the documentation.

So we studied the bit and pieces of the documentation

of how the account API works,

how you can add and learn about more methods

in the documentation like creating JWTs

or maybe creating password recovery, whatever you want.

That is exactly the same thing

that we are going to work through it.

I'll just crawl this a little bit

so that we can see it nicely.

All right, looks good, decent.

Yeah, I think, yeah, that's okay.

Now the next thing that we are going to do

is almost similar kind of approach that we are going to use,

but this time we'll be taking care of the different

of the APIs that are available.

So let's go here.

And this time we are first curious about database

and then we obviously are curious about storage as well.

Let's explore the database.

So when you look on the database here,

what do we actually go with that?

First of all, you can see there are concept of database,

collection, document, relationship, all these.

And then there are journeys about the queries

that you can make.

Of course, you can do order pagination

that's also available.

But first of all, let's understand the concept of databases

and then we'll also learn about how the queries

are being done and used.

If I click on the databases,

this is how you create an SDKs and servers

and whatnot.

The most important thing with the database as well

is that you need some of the constant fields

that are required.

Now this one is actually a node app, right?

We are not interested in that

because that's something you want to interact

if you're making a backend as application

and which is interacting with that.

We are more over worried about creating

and getting through with the collections

and buckets and all that.

But one common thing you will notice here,

this is here, it says SDK database.

But if I go ahead and look for a legacy database APIs,

notice here the exact same thing.

We get the app right from the,

and we extract client and database out of it.

Let me zoom this a little bit.

And we exactly create a client.

Just like in the auth service,

we created auth from this.

This time exactly we'll be using databases,

we'll be passing on a reference of the client.

And the endpoints are exactly same.

The endpoints is first of all, the URL

and then we need a project one.

Now out of this,

just like you were able to extract auth database,

I think this gives us enough idea that exactly same way,

we can actually extract the services for storage as well.

And that's exactly what we'll be doing in this one.

So let me go ahead and copy this piece of code

so that we can work on it together.

And we'll be using exactly same approach

that we used in the auth that let's create a class

and set up all these things.

And we'll be exporting this class as well.

Now it's up to you, what do you name this class?

Since there is not too much of the things

that we are doing,

usually I would love to keep my storage into separate class

and my database related all stuff in a separate class

or a file at least,

but in this case, this is not too much going on.

So I'll just wrap them up in same file here.

I'm gonna call this one as config,

not too confused with the conf.

Conf is for app rights URL only

and config is for all the configuration,

remaining all the configuration that I require.

Let's go ahead and work on with that.

First of all, I'll paste whatever I copied.

So this is the stuff that is required for myself.

Now let's go ahead and move it at the bottom

and just go ahead and explore them one by one.

So first of all, the most important thing

is to grab all the conf, which is the URLs.

So let's go ahead and grab the URLs.

URL, I mean to say all the end points

like the environment variables, basically.

So I'll just go ahead and say, give me a conf

and that will be coming up from,

let's go one directory back inside the conf

and we have conf.js or conf, that's the first thing.

After that, we obviously are going to need

the client and database.

And I'm pretty sure by this point,

you have learned that you can also extract

all the services that you require,

maybe all the other things.

In this case, I need storage

and we'll also discuss a little bit about the queries,

how to make queries.

This is the most important part of learning the app right.

All right, so most of the things are done

and we'll be using exact same approach.

So let me also open up our auth

so that we can refer it back.

We created a class known as auth service

and we created client and account out of it.

Great approach, we'll be using exactly same.

So let's go ahead and simply go ahead

and say export class service.

In this one, we'll be exporting the class as well,

but the most important part is we'll be creating an object

and we'll be exporting that.

So that object at the time of creation of an object,

we create or we use the constructor

that's already spin-off

and also all the methods are directly available.

So that's the goal.

Let's call this one as service directly.

And in this one, first of all, we need a client.

So let's go ahead and create a client

and we'll be creating a client just like that.

So we have a client.

Apart from this, we will be needing databases.

So let's call this one as databases

and we'll be needing a bucket as well.

Now bucket might be a little bit unfamiliar to you,

but if you've watched the previous video,

you know that the folders in the app right

are called as bucket.

The same terminology is being used by AWS

and all the other folks as well.

So we got the client and we got the database,

but in order to actually properly create a database,

we need a couple of more things to be done.

So let's go ahead and do that.

First of all, let's check on the documentation.

So database can be created by new database,

but the issue is it needs a client to be passed on.

So we need to actually do that.

And client also needs these endpoints

and all these things to be created.

So that's also interesting.

Let me show you how that needs to be done.

First of all, let's go ahead and create a constructor.

In the constructor, as soon as somebody creates an object,

we'll spin off this constructor.

So this dot client will set an endpoint.

So let's go ahead and set an endpoint.

In this, we'll be grabbing the endpoint from conf.

So conf.api app-write URL, that's the one we need.

All right, once this is done,

then we obviously need to set a project.

So set project, that's the step one.

So we need to provide the project ID in this one.

Let's go ahead and say conf.app-write project ID,

that's the one we need.

And once this is done, that means properly a client

has all the variables and points

that are required for us to pass on.

So these two things are done.

And now based on this, I can take a utilization

and can actually create the database and the bucket.

So it's super, super easy.

All you have to do is pass on the reference

of this client and use it.

So this dot database, databases will be created by new,

oops, not like that, new database and inside databases

and we'll be passing on this dot client.

So I hope you can see the pattern

and the consistency in the documentation of app-write

that is pretty useful.

Exactly like this, we'll be simply creating this dot

and this time let's create a bucket

and bucket will be created from storage service.

So we have the storage just like that

and we'll be passing on this dot client.

All right, so this means now I have two variables with me,

database and bucket, which has access to pretty much anything

that you want to work with.

For example, if you want to just list all the documents,

now databases is capable of doing so.

So now we can use the methods like list documents

and pass on the document ID, collection ID

and whatever you want to ask for it.

This is exactly the point where you first time learn

that what all you can do with the database.

So in our case, we want to ask database

and grab some of the values out of it.

Okay, so let me show you.

First of all, let's create a couple of methods

and see what they will be able to do.

Obviously these methods will be async

and the very first method is get post.

So I want to grab a single post out of it.

Now, obviously when you're grabbing a single post,

you need to provide that based on what you want

to actually grab this.

So if I go back into app right cloud, which is here.

So this is my blog, which is previous one.

I'm not using it.

I have removed all the API's keys out of it.

This is my new one, but exactly same copy.

So if I go ahead and check it out

and let's take a look onto the databases here

and inside this one, we do have a database.

We were having the database.

So just to give you a brief idea

that how this actually works

or let me just walk you through directly.

Okay, so how can I grab a post out of it?

Okay, let's study a little bit of the documentation.

Okay, get the document.

So this is the one that I'm looking up for.

Again, by the way, all the CRUD operations are listed here,

create, get, update and delete.

So this is my get document.

In order to get a document, notice here,

I need to pass on the database ID.

Obviously I have that.

I need to pass on collection ID.

Obviously that makes hierarchy.

And then I have to provide a document ID.

And in case you remember,

we created each document ID as a slug.

Obviously you can pass on the auto generated IDs,

but we actually replaced it with the slug.

If you remember in the earlier videos, we actually did that.

So now somebody will be passing me on this slug

of the blog post.

So that's a unique one for me.

And I need to grab the ID from it.

Okay, now how do we do it?

Of course, it's a database operation.

So it needs to be wrapped up in the try catch.

First of all, let's do that.

And let's do a console log as an error.

So in the error part, we'll do exactly same.

We'll refer it as app, oops, not like that.

App right service.

And we'll just mark it where the problem actually comes.

And we'll say problem is in the get post.

So that we can again come back and look at

what is the exact point where I'm facing the issues.

Once this is done, then I'll obviously go ahead

and print the error as well.

I think that's good enough.

And we are going to return a false

so that in the front end part, we can handle that.

Now what's inside the try part?

Now you'll be surprised to know that how easy it is

to actually grab from the app right database.

Notice here, this dot databases,

this is our service that we use.

And all I have to use is a method.

I hope you can see that already get a document.

Yes.

The list document is to grab all the documents.

Get document is where you pass on that.

This is exactly what I need.

You need to pass on an ID here.

So again, the step one is to pass on the database ID.

So let's go ahead and say this is my app right database ID.

That's the step one.

The next step is to provide the collection ID.

So I'll grab that from conf.app right collection ID.

That's the next step.

And once after that, I have to provide this slug,

which whoever is using will use this method

will pass me up here and will give me that.

Once this is there,

obviously this operation will take some time.

So let's go ahead and wrap it or prefix it with the await.

And let's directly return that.

So whatever the value is coming in,

coming out of this query,

we'll directly just send it to the user.

So I hope you can see it's not really that difficult.

Whatever the unique value is, in our case,

slug is there, we will be just using it.

And when we'll be taking actual usage of the service,

you'll understand that how you actually grab that slug.

That's really easy from the URL, we can grab it.

From the title, we can grab it.

There are so many places, but this is it, this is it.

Now the next step is that, okay,

I know how to actually use this one.

Like I can update the document, get the document.

We'll create those methods as well.

But let's just say now I want to query the database

and only want to find out all the values,

which are status as active.

So there is some query in my case.

I'll just show you that.

I think that will help all of us in this one,

instead of worrying about the IDs and all of that.

So let's go into the databases.

And in the databases, we can see this is our collection.

And inside this, we have a blog.

So all the attributes, when I check this,

I have this user ID.

So user ID is there, there is a title here as well.

And we do have a slug here as well.

So inside the user ID,

we'll be passing on the slugs and all these,

not in the user ID, but the title.

Anyways, I'll just see this one.

Now, my goal is that I want to find out all the status,

which are marked as active.

So there is a query status need to be active.

So this time, find me all the documents in this database ID,

in this collection ID,

but not just I'll pass on one thing and give me all of that

or that one particular value,

give me all the values based on my query.

So this is the point where we need to study that,

hey, there is a key and the value is that,

only give me those documents.

So I'll come back here.

And if you'll notice that in the database,

I need to expand this a little bit, probably not.

And let's go into this one, the references.

And this time, we'll be going into database

and I want to learn about the queries.

So how do I make the queries?

That's interesting.

So notice here, it's super easy.

All you have to do is query dot select or dot equal,

whichever you want to use.

This one says select which attribute should be returned

from a document, a return document,

if attribute is equal to any value provided in the array.

So this is one that looks okay to me in this case,

because I'll be providing you status

and a value of the status.

And you give me all the documents

that actually matches that.

So I'll provide you a title.

In this case, it says Ironman,

but I'll give you a query dot equal,

which is status and the status should be active.

So I'll just give you, by the way, in the array,

you can pass on all the parameter as a string

if you have multiple, but I do have just one.

So I'll just pass on the one.

So let's go ahead and do that.

Okay, now let's go ahead and write a method for this one

that I have, let's go with this.

Again, async, we go with that, get posts,

because multiple will be coming up.

And then I have to make a queries.

This is the parameter somebody will be giving me.

If nobody gives me that, then by default, I'll use that.

The way how you actually grab the queries

is you write exactly as you are being told.

So remember, everything was inside the square bracket,

you need to pass on an array.

So this is the first step.

So you want all the title to be whatever is mentioned

into this one, or you can pass on the key value pair as well,

the title, Ironman, and all of that.

So we'll be using the second one.

I need the title to be this one.

Similar to this one.

So this is my query.

Query.equal.

There we go.

And this is the parenthesis, a method being used.

Notice here, string and the value query types,

whatever that is.

Basically it's saying is give me, I want the status.

This is my key that I want to find out

what is the value that you're looking up for.

If you have multiple values, you can provide an array,

but here the type that I'm looking up for is active.

All right, there we go.

Not that difficult.

So now I need to learn that how can I use it?

Usage is another simplest thing that you can do.

This is building queries.

So if you look up for it, notice here,

I have to say is database ID.

Then I have to go with the collection ID.

Then in the array, I can pass on as many query as I wish.

I just have one.

That's why I directly call this one in an array.

But if you wish, you can just convert it like this.

I have already converted that here, notice here.

I've already wrapped this up inside the square brackets.

That is an array.

But if you don't want to,

you can just make it one by one.

I actually did a little bit help to myself

of wrapping this up.

Now as a third parameter, I can directly pass on.

That's the advantage.

Great, nicely done.

Okay, let's go ahead and try this.

Again, same, we'll be using try catch.

The error part will remain same.

So I'll just copy and paste this one.

Copy this, paste this.

And this time the problem, if it might occur,

is in get posts.

So multiple one.

Okay, next up is how can I try this up?

Really simple.

This dot databases.

And this databases will list all the documents based on what?

First of all, give me the database ID.

So let's say conf dot project ID.

I've given not the project ID, my bad.

Database ID, we are interacting with the database.

App right database ID.

Second is collection ID.

So this one will be conf dot collection ID,

app right collection ID.

And third part is directly my queries.

This is the only part where you need to be careful.

I have wrapped this, remember,

I have wrapped this queries directly in the square bracket.

If you are not doing that,

then make sure you're passing it like this.

Just the syntax issue.

All right, so obviously this is a database operation.

It needs to be a wait.

So let's go ahead and do that.

Once this is done, let's go ahead and return that directly.

So I hope now you understand,

it's not really that difficult to work on with this.

So we have worked on two database operations.

One is get post, one is get post based on queries.

It's very repeatable, very understandable

and very consistent code in the app, right?

So let's move and shrink this up.

And let's also shrink this up.

And let's talk about other operations

which is creating the post.

Creating the post is super, super easy.

If I go back into the documents,

database,

documents,

list documents, create documents.

Let's see how do we create a document?

And this is how you create the document.

You simply say create document.

You provide the database ID, collection ID,

something that is unique

and all the things that you want to store

that is already available in the attributes

that you are having.

All right, so let's go ahead and do that.

That will also help you to understand

that since this is unique,

that's why we were able to go up here

and mention that, hey, the slug is unique.

So give me all the values based on the slug.

Hope this helps.

Now let's go ahead and move on to another one.

Again, this one will be async

and we'll be saying create a post.

And this should be super easy.

What do we expect that how do we create a post?

While creating the post,

I expect that you pass me on a title,

you pass me a slug value.

Slug is nothing, just a title,

but we remove all the spaces,

move them into dashes, just we saw in the demo.

And then we also expect that you will provide me a content.

You will also provide me a featured image.

You provide me a status, whatever the status value is.

And we'll also grab a user ID.

Okay, all the values are here.

Once these values are here, again,

same try catch operation, very repeatable code.

And that's the good thing.

Once we have a repeatable code,

that means it's something good.

Okay, this one will be create post.

Errors and everything are good.

Let's go ahead and do the same thing.

Now we know that let's go ahead and return this.

This will be await.

This dot databases,

this is going to work with the method,

create document, provide all these things.

The first one is conf.appwrite database ID.

The second one will be conf.appwrite collection ID.

And the third one is what is the unique ID?

In our case, the unique ID is not the ID,

but the slug that we want uniquely.

We want all the posts to be unique.

So that's the slug.

And the third parameter is provide me all the objects.

Yeah, there we go.

So let's go ahead and provide all these objects.

So we'll go ahead and say title.

Then we have content.

We have featured image.

We haven't uploaded the image yet,

but we'll work on that.

Status and we have user ID.

There we go.

So all the value that is being passed on to me as a method,

I'll just use them to create a post.

Now, going back, this is for creating the post.

Okay, how am I going to do and update the post?

That's interesting.

Let's go ahead and say collection.

Databases, let's go into directly database APIs.

That's always easier.

And this time I want to update the document.

Okay, so for updating the document,

you have to use update document.

Notice here, update document.

Database ID, okay, collection ID, no big deal.

What else do you need?

And this is not proper.

This should be a little bit more

because you need something to find out the update document.

Unique IDs.

So I think the collection ID,

this is not scrolling properly.

We definitely have more.

We definitely have more.

Update the document.

Here we can read about it.

Collection ID, document ID, data to be updated

and the permissions.

Anyways, I'll walk you through with that, no worries.

Okay, so this is my create post.

Let's go ahead and create another method

which will be update.

I'll sync, update post.

And while updating the post,

update document,

you need to provide that what is the unique value

I am looking for for updating that.

And update document, database ID,

this is not proper.

I've worked with that.

I've worked with this.

This is newly updated document, probably that's the reason.

So while updating the post, you will need a slug

which is uniquely identify your document

that needs to be updated, that needs to be passed on.

Otherwise the method of update document doesn't work.

Probably there's a mistake

or I'll send a pull request to them.

I worked with these documents in the past.

So probably that's the one issue.

And then one we can do is provide me the title,

the new updated title or the same, whatever that is.

You pass me content, you pass me featured image

and you pass me status.

These are the field which we are allowing to change.

And once this is done, same stuff, try catch.

Let's open this up.

We'll copy this.

We'll paste it up.

And this time if the problem appears,

it might be an update document tracking all of this.

And of course we will be returning the await

and this time this dot databases and update document.

Now the way how update document works is,

first of all, you provide the database ID

in the collection ID in which, or in what one,

what exactly the collection we are looking up for.

So conf dot app right database ID.

The second step is collection ID.

So collection ID.

The third step is to provide me the unique ID.

If you're working with the unique IDs,

provide the unique IDs.

If not, just provide anything

that's making your document unique.

In my case, that slug.

And then pass on all the objects that you have.

So exactly same.

Oops, not like that.

We do have, I think I can copy paste.

Yep, this is all the data that we have.

So I'll just copy and paste this one.

So we have title, content, featured image, status.

We are not passing on user ID

because we are not allowing to change that.

And we are also not accepting that.

So there we go.

All the data is done.

And that's it.

That's our update post.

Obviously we need to write the delete one as well.

And to delete a document, what else do we have?

Database ID, collection ID.

There is something, something that is missing

because we need a unique identifier.

Otherwise what document you are actually deleting.

There is no way of finding that out.

Okay, there is something probably a bug or issue.

Anyways, this is, you get the point how this is being done.

So now the best way is actually to actually copy

and paste this entire stuff

because that is much, much easier now,

now that you understand the concept.

This one is delete document or delete post.

We will be taking the slug,

but we don't need these objects

because it doesn't really matter what's inside.

We just want to delete it.

No need of comma as well.

Just give me the slug and I'll try to delete it.

And let's update this one.

This is if the error occurs,

it might be delete document.

Good.

Now we also don't need this.

So that's great.

And obviously the method gets updated.

Instead of update, we want to use delete document,

two times document, delete document.

Hopefully I have copy pasted it correctly

and we provide the database ID,

we provide the collection ID

and we provide the slug.

Something that uniquely identifies this one.

The only new thing is you cannot just go ahead

and return it because it doesn't return anything.

The return type data type is a little bit questionable here.

So we prefer to manually return something here.

So we are going to go ahead and say return true

that yes, it was properly returned.

Return true.

Oops, my bad.

This should go up here.

Okay, looks good.

Let's indent that properly.

There we go.

So this is nice.

In the update one, you don't need to return that.

Updated one actually returns you the updated document.

That's good.

But the delete actually,

if you'll see, they should actually go

what the response is going to be.

It just says, hey, two or four application, Jason.

So we don't have.

In the update document,

if you'll check out what is the response,

you can see it gives you the document.

That's the good one.

But if you check the delete document,

there is no document that is returned.

There is no true false value that is returned.

So yes, nothing magically is coming out of the box.

I'm trying to teach you how to study the docs

and all of these.

Okay, so delete post is done.

Now let's work on one more thing.

We can actually remove them.

We don't need you.

Just like that, we have created all these methods

about update post, delete post, create post, get post,

and pretty much anything.

All the queries that you want to handle,

non-queries you want to handle,

we have worked through with almost every possible case

that can happen in the database.

If there are more,

you can obviously modify these existing methods

or can add more by reading the docs.

Next one is buckets.

So how do we handle the bucket part?

Let's go ahead and study the docs.

So this time we want to use a storage service.

Now this is the storage service

and it has all the methods,

how you can list all the files, create the files,

get files, update files, delete file.

First for me is the create file.

I want to upload a file.

So it simply is a method which says create file.

In my case, notice here,

it gives you bucket ID, which we have already.

Then you have to provide a unique ID for the file.

And then you can simply say document.getElementByID

or however the way you want to grab it.

Probably there is something definitely wrong

with the scrolling because I can see

there is more content here, but it's not visible.

Is it my browser just?

Yeah, we can see that the scrolling,

probably my browser is going that.

With this, this reminds me,

let's go back into databases

and let's see how the update document looks for

and collection ID and the document ID.

Notice here, now it says and mentioned this,

there is a unique document ID which is required

and that's exactly what we used.

Probably there is something in,

when you scroll this, now it's scrolling.

But if I open this, it doesn't scroll.

Probably I can report a bug to them.

Anyways, we got the concept.

So coming back onto the point, which I was saying,

that let's go and talk about storage.

We want to create a file.

The rest of the stuff we have already taken care of.

Now we need to just run through the method of create file.

Whoever is going to use this method will pass me a file.

Just like here, they are passing the file, just like that.

Let's go ahead and now in the same file,

I'll just write it for it.

Maybe you want to use it.

This is where we are using the storage service.

Okay, so again, async and we'll be calling this one

as upload file files.

Now we are just dealing with one.

Upload file and there we go.

Now how we are going to deal with this one?

Exactly same.

Go with the try catch, borrow the catch method, copy that,

paste it up here and this time if the problem occurs,

it is coming up from upload file.

What do you want to do in the try part?

We obviously want to return after awaiting

and sending this to bucket.

Same concepts, this.bucket.create file.

It takes couple of parameter.

First one, the bucket ID, which we can grab

from conf.bucket app, right?

Bucket ID, there we go.

We need a unique ID.

So obviously we don't have a unique ID,

but if I remember in the auth,

we actually, no, we didn't actually worked on this one,

but in case you don't know this,

we should have dealt with us, probably anyway.

You can see that there is a way

how you can grab the unique ID.

So notice here there is a file ID,

but app right also gives you something

very interesting known as ID.

So here, inside the conf,

just like we were able to grab this,

let's grab the ID and you'll be able

to provide unique IDs with that.

Although you can use nano IDs or something,

in case you wish to, I don't wish to,

I just want to use app right services.

If they're directly available to me, why to be bothered?

Anyways, so once we have this ID,

now I have to give a unique name to the file.

So I'll just say ID.unique, and that's a method.

So there we go.

And then provide the file, that's it.

App right will take care of the rest of the things

that hey, I'll upload the files,

we'll provide a unique ID and we'll return you

all the path that you require for this file.

So public path will be given to you

so that you can display them.

So this is basic of how you upload a file.

Can you assume how you're going to delete the file?

Let me go ahead and copy this

and we'll go up and paste this.

Let's move a method for delete file.

So delete file.

Obviously, this time you don't need a file,

you need just an ID of the file.

So just provide me the ID of the file

and I'll just delete it.

Okay, how can we modify this?

Let's see how to delete a file.

Obviously, give me the unique ID.

So bucket ID you need to give me,

file ID you need to give me, that's it.

Two methods and it can do the job.

So bucket ID I've already provided you

but the method is delete file.

So let's go ahead and use that.

Delete file, I'm giving you the bucket ID

but I cannot give you this file ID unique.

It generates unique ID every single time, obviously.

And here I cannot give you file

but rather I have to give you file ID.

So whoever is using this method need to provide me this.

And this time if the error comes up,

it comes up from delete file.

All right, so you have learned how you can upload images.

By the way, this exact method works

if you're uploading PDFs,

anything else that you probably want to deal with.

So delete file.

Now one more last thing I would like to discuss

before we sum up this entire lecture.

You can see that AppWrite has so many things,

list files, create files, get files, update file,

delete file but what's interesting is,

is you can also get file for the preview.

What's interesting about this file preview is,

file preview, this method supports preview of these images.

So entire image doesn't get onto your network bandwidth

but rather it's a cutting

and the resizing of your preview image.

So for example, preview supported only for the image

for size smaller 10 MB.

So let's just say you uploaded a file of eight MB.

It's not eight MB in the preview, it's just few KBs.

So it saves.

So in our application, we also want to give this feature

that somebody who wants, don't want the entire file,

probably just want a preview of it, lower quality file.

We can actually give that.

So let's call this one method as well.

And the good thing about this one is,

since there is nothing too much of operation going on,

you don't need to make it async await.

Although if you do, that's great

but there is nothing being async await in this one.

I'll show you why this is because if you notice the method,

it's just storage.get file preview

and it's ridiculously fast.

Again, anyways, it might take some time.

So we'll see that.

Let's call this one as get file preview.

And provide me the file ID.

And what we're going to do is this is like that.

And we can go ahead and simply say return this.bucket.

And we can just work with the method, get file preview

and provide you the detail.

The first one is conf.bucket ID, app.writebucket ID.

And the second one is a file ref, file ID.

And once this is there,

you don't want to return it like this

because if you notice it carefully, it's not mentioned here.

Let's see what's the return type that we have response.

So response is actually a big object file for view.

And you need to actually do a console log of this.

And once you do the console log of this,

you will find out that this whole thing

actually needs to be worked a little bit different.

So I'll just come up here.

And once this is all done,

then I go ahead and say .href, this is the one.

You can get host name and all these things.

Yeah, a little bit sneaky, but yeah, this works nicely.

If this doesn't work, we'll come back here.

We'll make it a sync.

We'll just insert a wait keyword here.

But I have noticed while working a previous version

of this application that this works directly fine.

So if there is no need of it, I could just add it.

Okay, so this is all the method we have studied in depth

about how to upload the files, delete the files,

get the previews.

If you really want to work with more methods,

you can definitely work with that.

Now you have the idea.

Last thing, just like we did,

we'll just go ahead and call this one as service.

And this will be a new service.

We create an object out of this class

and we export this one.

So export default and let's export service.

There we go.

This will make our life so much easier.

Of course, there might be chances

that this might have some bugs, some issues.

We need to fix them up.

These can be tested while we actually work on the project

in the front-end side of it.

But at least our backend part is all done.

And this really, I'm super happy that now we are actually

able to write JavaScript using App Write.

We're building full stack applications.

So this is my backend that I have all written here.

Great work there in the backend part.

Let me go ahead and I'll just commit this one as well.

Let me just go ahead and add this one.

Add service.

Service for database and storage.

All right, let's go ahead and do a quick commit

and I'll push this.

Yeah, some people really say that.

Hey, you should do it from command line.

No, I feel here, it's nice and easy.

All right, so this is all the knowledge

that you really need to have to interact

with App Write databases and storage.

Now you're completely equipped with handling

any kind of thing, all the queries,

anything that you want to do.

This, I hope that this video has given you enough

of the knowledge to work things on your own now.

That's it for this video.

From the next video onwards, we'll start working

on the front-end side of the application.

We'll walk you through all the caveats,

how to build a full stack application,

which is authenticated, some pages are protected

and all these things.

All right, so that's it for this one.

If you find this video interesting,

do leave a comment section.

I really, really need some of your help and support.

Your comment, just a like, just a heart.

It gives me so much of motivation.

I really need it to continue to do all of these videos.

Thank you so much.

Let's catch up in the next video.

Hey there, everyone.

Hittai Sheer back again with another video

and it's been quite wild.

In fact, few good weeks.

And if you're watching this video in just one go,

then obviously we are meeting back-to-back.

But if you're watching it on my main channel

as the series is progressing,

yes, I was gone for a couple of weeks.

A lot of health issues, but thank goodness I'm back.

It's winter here.

And the best part is I do write my strategies

to record these videos.

Otherwise it would be so much difficult.

Probably I would have to re-record the entire,

this segment, but thank goodness I write my strategies

to teach these topics.

And that makes life a little bit easier.

So in this video, we're going to continue

from where we have left in the last videos,

which was just handling the app right.

So far we have handled the app right.

Now we are going to see that how we can make

those web requests and if we have any issues,

how we can debug them and how the application

and our flow will work.

I don't expect anybody to simply go ahead

and just build these kinds of application in just one go,

because simply that's not possible.

So I'll walk you through what is going to be the strategy,

how we are going to deal with that.

First of all, I want to introduce the React Redux here,

especially the Redux toolkit,

so that we can manage the state of the application.

On top of that, we'll be needing a couple of pages.

What goes inside those pages, we'll worry about that later,

but we'll be needing a few pages.

The reason for introducing these pages

is because we obviously will have the routing

in our application.

So some page are going to be protected

that they cannot be visited if you're not logged in,

but some pages are available to everyone.

For example, if you are not logged in,

the signup page is available,

but if you're logged in,

the signup page is not available for you.

So there are certain pages

which are available to non logged in users,

certain pages are available

which are for the logged in user.

So we need to figure out a way and mechanism,

a logic to do so, it's very simple logic.

I'll walk you through with the two ways

of understanding the code

so that you can probably understand it

at a very better pace.

All right, so quite a lot of stuff that we have to do.

Let's go back and try to share my screen.

So this is my screen that we have.

First, let's open up the Redux part.

So I'll just go ahead and work with that.

So I'll just go on to Google

and we'll go into Redux toolkit.

That's the one we are looking up for.

The getting started part,

it should be fairly easy with that.

And we just need two things.

The first one is Redux toolkit

and we of course need React Redux

so that it can act as a binding agent

between the Redux and the React.

Redux is an independent library in itself.

You can use it with the Vue.js,

probably anything else that wherever you want

to maintain the state, you can use that.

I'll copy that and obviously we'll install this.

So quite a while.

And now let's go ahead and install the toolkit first.

It doesn't really matter which one you install first.

But since it was mentioned in the documentation,

I'll just install that.

We also need the router as well.

So let's go ahead and since we are already here,

let's install that.

So I'll just go ahead and say React router DOM.

That's exactly what we need.

And that's how we always install them.

We simply go ahead and say example tutorial.

I just want to install this.

What's new?

Probably not.

Tutorial, I think that's a better place to install it.

Can you give me a point where I can install it?

Probably not.

Okay, give me a step to install it.

Otherwise I have to do NPM install React router DOM.

I'll probably do that.

Okay, so I'll just go ahead and say NPM install

React router DOM, router dash DOM.

That's the easiest way to install this.

Oh, React, oh, my bad.

I mistyped it.

React router DOM.

Okay, that should be all.

So we have couple of libraries being installed

in our system now.

We have Redux toolkit.

We have React router DOM.

This is the basic React DOM.

We are not interested in that.

We are interested in the React router DOM.

And we have the React Redux, the binding library for that.

Yes, we will be needing couple of more,

but right now let's handle what we have in it right now.

Okay, one common thing that we are going to do

is in this application, in fact, any application

that you'll be working through,

you will have a lots of pages in them.

Our application also has a few good pages.

What goes inside that pages,

we'll worry about that later on in the component part.

But right now, I think it's a good idea

that we just create those pages and try to figure out

that how we can inject our state management

as well as how we can protect some of these pages.

So let's go ahead and practice that.

That's a good idea.

So I'll just do a quick LS

and I can see all of my files and everything are here.

I will go inside the source.

So let's go into the source.

And if I do a quick LS,

I can see app write and all these files and folders appear.

I think let's create a new directory in here.

I want to do this via the command line

because it's much more easier and faster this way.

Feel free to use your mouse.

I think this is faster approach and better approach for me.

So I'll just go ahead and say this is pages.

Now we have pages.

I can go into the pages as well.

And I'll just open up these pages

so that I can show you what all the pages

that I want to create.

So obviously, this is all the pages that we have.

So we'll have add post.jsx.

And by the way, touch is utility

which helps you to create the files.

And since they are so many files,

I don't want to just right click new file, new file.

I just want to create them for here.

And we'll be having one for all posts.jsx.

So add post is going to be where I'll be giving a form

where user can add a new post.

And all post is where all the posts

are going to be listed in the card format.

And then we'll be having an edit post.jsx.

This is where if you are owner of the post,

you can hit the edit button and we'll give you a form.

Again, the same form will be utilized of the add post

but we'll be just pre-filling the data into that.

That's how it is all done.

And we'll be having one home.jsx.

This is just a homepage for you, for users.

And then we'll be having one login.jsx,

of course for login.

We'll be having one post page as well

if you want to read an individual post, so JSX.

And one last one, which is sign up.

So we'll be having sign up.jsx.

Now, if I go ahead and do this,

this creates all these posts and everything for me.

That's what I love about it.

You could have done that right click as well,

but that's okay.

As of now, I'll just use a utility, rfce,

which is by the way a add on of a VS code

that you can simply have.

So I'll just have an React functional component

just like this.

So it automatically detects the file name

and we'll be just having this one.

Right now, no logic is there.

We'll be just putting these basic templates here

so that we can import and export them.

rfce, all post, same goes for edit post.

rfce, there we go.

I'm not doing anything at all,

just providing these values.

What goes inside them?

We'll definitely have a detailed talk on them.

If we need any more pages, we'll obviously create them.

rfce, save that, and one more.

rfce, there we go.

So now we have all the pages.

So one task is done.

Let's go ahead and close that.

I can actually close others just like that.

There we go.

So all the pages are there.

Right now, all these pages are available.

In fact, if I just go ahead

and set up the router and everything,

almost everything should be immediately available to me.

Now, one more thing that we are going to do here

is inside the source, let's create one more folder

where we are going to handle a couple of things.

I'll show you how to do that,

but first let's create a new folder

and call this one as component or components.

That would be better.

Now inside the components,

we'll just create only one file as of now,

which will be simply the auth layout,

how the authenticated layouts will be there.

Right now, there is no logic into them,

but we'll obviously will creating them.

Right click and a new file inside the components.

Let's call this one as simply auth layout.jsx.

Okay, simply rfce, nothing there.

Instead of auth layout,

let's go ahead and call this one as protected.

Again, it's up to you.

If you want to call them something else,

totally up to you.

I'm calling it as protected as,

because if I want to protect any of the page or anything,

I'll just wrap all these things around this component.

So this will be serving just single purpose

that anything inside this layout

is going to be something which is authenticated.

If you are authenticated, I'll serve you.

This will act as a wrapper or by the wrapper means

I'll simply accept some of the children here.

And all I'll do is render these children.

That's the whole idea.

So instead of returning this kind of a thing,

I'll just say that, hey, just return the children up here.

So I'll just go ahead and use it like this

and we'll go children.

Definitely, I'll go ahead and modify this a little bit,

but right now this is the goal.

You accept some parameter, you render them.

But right now this of the component doesn't know

that which one to render, which one to doesn't render.

And in order to actually have this,

we will accept a simple authentication as a parameter.

Authentication and that authentication

by default will be true.

If the authentication is true,

that means render this page,

otherwise don't render this page.

But right now we have no idea from where this authentication

is going to come to us and how this will work.

So obviously this is a little bit confusing point

at this point, but these are very common scenario

when you work with any React application.

You have some kind of protected page or an auth layout,

which helps you to render conditionally

whether this component should be rendered,

this page should be rendered or should not be rendered.

So we'll work on that.

We will also work on,

this will be responsible for navigating the people.

If you're not authenticated,

let's redirect you on the login page.

If you're trying to access any resource,

which you shouldn't be,

then let's redirect you to login page.

If you're already login page,

we will make sure that you don't access the login page

or sign up page.

So that logic will go in here.

But again, this is just the basic right now

just to help you to understand what is going on

with the flow of this application.

All right, this is all done.

We'll come back on to this one.

Right now, let's go into another part,

which is the Redux part of it.

A lot of people are afraid of Redux.

You shouldn't be.

We have played enough in this entire series.

And I'll walk you through how the Redux will work.

And we'll just manage one thing

and I'll give you assignment to manage more things.

That's how you learn when you painfully,

you take some pain and you try to work

with these assignments.

So right click on the source and create a new folder

and we're gonna call this one as simply store.

The name of this folder is not important at all.

You can call this one as Redux.

You can call it as a Superman Redux,

doesn't really matter.

We'll create two files into this one.

The next file is going to be store.

Again, some people like to have this store

in the root of the application, nothing wrong in that.

But I'll just keep it all separated up here.

I'll also create a slice in the Redux toolkit.

There is a concept of creating slices.

We discussed that in the previous video as well,

where I showed you the crash course on the Redux toolkit.

So please watch that in case you feel

a little bit uncomfortable here.

And we'll be having this auth slice.js of course.

Okay, first of all, let's manage the store part

because that's the easiest of all.

In this one, all we need to do is configure the store.

So we're going to simply say, hey, I want to confi,

confi, gur, store, no suggestion, configure store.

And that will come from Redux toolkit.

Bothering me a little bit, yeah, there we go.

Once I have this one, then I have to create a store

from this configure store.

So I'll just say that, hey, I created a store

from configure store.

This is a method which takes object as parameter.

Now what goes inside this one?

This takes slices, or you can say reducers as well,

but we don't actually make these reducers appear.

That's exactly this auth slice is being made for.

You create all of your reducers here.

The way how we create reducers in this one here

is pretty simple.

We simply go ahead and first say

that I want to create a slice.

So create slice, there we go.

And this one comes from the Redux toolkit.

Then every single slice needs to have an initial state

so that it knows when I get started,

what should I do or how I should behave.

So for this one, we'll just go ahead and say,

initial state.

Feel free to name it anything, doesn't really matter.

Initial states, the status is going to be false.

We are using it to keep a track of authentication

of the user.

So if the status is false,

we'll assume that the user is not authenticated

and we'll also have the user data.

So if the user data is there,

then obviously it will be filled up.

Otherwise, by default, it will be null.

There is nothing inside the user data.

User data is something which App Right will give us back.

For example, what's the username, what's the email,

what's the ID or any information you can just add up here.

Now this is the initial state,

but the next point is to create the slice.

Just like we created the store, it's exactly same.

So we go ahead and say auth slice

and that auth slice is being created by create slice.

Of course, lower create slice.

It's a method which takes an object as a parameter.

So that's what it does.

Now this takes couple of parameters,

not just one the initial state, couple of parameters.

First of all, you have to give it a name

so that although this is auth slice, it will be very unique,

but it is a good idea to give all of your slices a name

so that you can refer them back with this name.

Then passed up the initial state

of what the initial state of the slice is going to be.

And then you create your reducers.

So this is your reducers.

Now reducer is an object and inside this object,

you create all the methods or whatever you are tracking.

Now good thing is you don't have to worry about,

you might have heard the thing in the reducers

and especially the redux that,

hey, don't mutate your state or something.

You don't have to worry.

Redux has taken care of that behind the scene.

You just go all crazy now,

redux take care of that behind the scene.

That's a good thing.

So inside this reducers,

the first reducer or the method that I have is login.

As soon as somebody creates a login,

we'll give him an access of state and action.

So as soon as you create any method inside the reducer,

you have already an access to the state and the action.

State is that current state of what this store

is actually depicting right now.

So that's what it is.

Action is something,

when somebody wants to access the reducers,

they use actions to reach you out

so that they can provide you the payload,

they can invoke these actions and all these things.

So pretty easy.

This is a method.

Now just go ahead and somebody will pass us

in the state, the status.

So if he's logged in,

then obviously we need to change the status to true.

And they will also provide me a payload.

The payload is accessible in the action.

So I'll just go ahead and say state.action.

Actually, not the action like that, state.userData.

Somebody will be providing me this user data inside this.

And I'll just go ahead and say,

I'll access it via the action.payload.userData.

All right, so that is it.

So now something really nice to remember.

This is something that we are doing.

If somebody is calling this login

and is providing me the status,

that means, yes, after logging in,

once you hit that API, get the data back,

you are 100% sure that, okay, you are logged in.

Then you reach out, hit this reducer,

so I'll make the status as login.

And via the payload, you'll give me the user data

that I'll fulfill into this one.

This will now reach to the store

inside this configure store.

And it will be available to anybody from any component,

you could directly reach out to store

and can access that data.

That's why these are super helpful.

Similarly, we'll be having a logout reducer as well.

So we'll just go ahead and say,

hey, let's have a logout.

Same, exactly same, repetitive stuff.

We'll have the state.

You can optionally have the action as well,

but in this case, we don't require

because once somebody hits a logout,

we'll just flush out everything.

But still, there is nothing which is stopping you

to have an access to the action here and the payload here.

You can do that.

I'll just go like this,

and I'll just refresh the state.

So the status will go to false

and we'll just remove everything from the data as well.

So state.userData.

By the way, you can add more in the initial state

and have more data if you wish,

but right now we'll just keep it that much.

Simplistic stuff.

Okay, now once you are done with that,

the job is not done because you have created a auth slice,

but there is a little bit more to it, by the way,

in case you missed this, take a screenshot, pause it here.

This is not enough.

We need to export this as well.

The most important thing is what people are looking up for

is definitely these methods, login and logout,

so that they can access that,

but also some of the folks are looking

for this entire reducer.

Who are those some of the folks?

Your store, yes.

So we need to export not only these methods,

but also the reducer.

So let's go ahead and do that.

First of all, let's export the reducer.

That's my default.

Export default auth slice,

and just go ahead and export this reducer.

Reducer, reducers.

When did I named it as reducers?

Let me just quickly check this.

This is seems like a small bug.

All right, welcome back.

Yes, I had to look into the documentation,

and that's how the real world developer works.

We don't remember everything.

We always consult the docs,

maybe stack overflow these days,

which add GPT to figure it out.

And yes, this is how it works.

So we can see we are following almost exactly like that.

So notice here, here we are saying reducers,

but at the time of export,

we are actually saying counter slice dot reducer,

which does it.

So Redux in itself is kind of,

it's wrong to say library,

it's more of a framework in itself,

which has its own way of dealing with the things.

So we just export exactly like this,

like actions, reducers.

So yes, it might be a little bit confusing that,

hey, here it is reducers,

and there it is reducer only singular.

But yeah, this is how the documentation works.

So we'll just follow that, okay.

That reduce removes my confusion as well.

Yes, this is, but it's a good one, a good one.

I'll try to investigate it more to study more about it,

that why this is the case or how this is the case.

Okay, so the step one is done

that we have exported the reducer.

But as we know, we have to export these singular methods

so that any file can actually use these methods as well.

Pretty easy.

We're gonna go ahead and say export const

and then all the methods that you want to export,

like login, log out.

And we simply go ahead and say this one

is going to be auth slice dot actions.

There we go, bothering me a little bit.

We need to have a space around, there we go.

So this is what we have as of now.

So both the things are done.

Now step one is to get onto the store

and first of all,

import these reducers into the store

and make sure your store is aware of that.

Not really, but aware of that.

So we'll just go ahead and say auth slice from auth slice.

Now go into the configure store.

This store need to have the reducer, just like this.

And all the reducers that you have,

you have to actually mention it here.

So my reducer name is auth, that is my auth slice.

If you have more, you can just put a comma and have it.

Like for example, you're tracking a blog here.

So your blog slice, blog slice goes like that,

of course, with a space.

So you can just go ahead and work on with that.

I don't have it, I have just one.

So I'll just save it one.

I need to export that so that I can use it wherever I like.

I'll just go ahead and say export, export default and store.

Not like that, there we go.

So the two things, the major things are done

and we have this auth slice, we have store.

So at least the preparation part of our redux is all done.

Let's go ahead and work on with how we can actually

use these stores and work with that.

Now for this, we'll go into our,

where is our main.jsx?

This is where it is.

So inside the main.jsx, we can work with that.

If you are working on something like index.jsx,

that's also fine.

But what we are looking for is the main

where our application is loading.

This is where I have to work on.

Now, I'll first and foremost,

I don't want to wrap it like this.

I'll just create a router for this one

and then we'll work on with this one.

So first of all, let's go ahead and create a router.

So I'll just come here.

Okay, this is fine.

Okay, first of all, let's go ahead and create a router.

Router and router will be created by create browser router,

and this is a method which takes an array.

And we need to import this.

Right now there is nothing which is importing it.

So import create browser router,

and that will be coming from react router DOM.

So this is the first one.

So this is the first one.

React router DOM.

So this is the first part.

We haven't worked on how this will be taking care

of the pages yet, but we have a create browser router

and we have a router provider as well.

Router provider, okay.

So assuming that the router is all done,

of course it is not, but assuming that this is all done,

let's create this one first.

So the way how it works is now instead of just directly

rendering the app, we don't do this.

We actually remove this part.

This app will go inside the browser router

at the homepage that, hey, this is how we load the app.

But for a minute, just remove this one part.

And all we're going to do is have this router provider

self close it.

And now we'll say that, hey, router will be this router

that we have just created.

Right now there is nothing, but don't worry,

I'll walk you through that how this is being done.

So this is the step one, how you configure all of your router.

We'll go inside this array, provide the paths

that home is governed by app

and what all components basically we are loading

or we can say the pages that we are loading.

So that's the basic of it.

But we also want that we should have access to the store

as well, that's the most important part for us.

So how we can have the governing

that all of my components know that there is a store.

So for this, the major role is that everything

like all this router provider at every single time

there should be wrapped by the store.

That is the problem statement.

So let's go ahead and first import that.

So I'll just go ahead and say I need a provider

and that provider is not from the React,

we need from React Redux, there we go.

Now, the next step is really simple, absolutely simple.

This browser router, this whole thing needs to be wrapped

with this provider, provider, there we go, close it.

And this needs to go inside this.

There we go.

But just putting this doesn't means that it is already

automatically aware of the store,

we need to import the store as well.

So we'll just first say that, hey, let's bring up the store.

We can probably get it here, import store from

and the store is going to come up from,

we'll go inside the store

and there will be having store.js.

And now this provider can say that what is your store?

Just name the store.

So simply go ahead and say the store is going to be store.

There we go.

Now this is all done, properly configured that, hey,

the store, since this is my store,

this is my state of the application,

every page is going to be governed by the state.

That is why I'm wrapping provider first

and then everything is going to be governed by this.

So I'm just governing it.

So I'll just move it a tab so that it's easier.

Okay, this is the first part

of how this is going to be done.

And by the way, this browser router that you're creating,

that can be done by multiple ways.

There are kind of a sandwich method as well

in which you just create components inside the components

or you can also provide an object into this one.

So we'll go with the object one.

So here is our object that goes like this.

And then I'll just go ahead and say, hey, path,

what is the path?

I want to have a path of slash,

who should be the element which should be rendered

when somebody visits this path?

So obviously in this case, now we say the element

which will be rendered is going to be the app.

There we go, self-closing, there we go.

Now the next step is, do we have sub paths

after this application, after this slash,

do we have slash sign up?

Do we have slash login?

Do we have slash post?

Yes, we do have.

That all goes into the children.

So as you can see children right now it says object,

but no, it is not an object.

First of all, this is the proper syntax

and this is further down again an array.

What all the children do you have?

Okay, so inside this, I'll have multiple of these children.

All these are objects just like this.

First of all, what is the path that you want to grab?

So the path of the children is going to be,

first of all, the slash and wherever that slash is,

by the way, we need an access to the pages.

Yes, we have homepage.

On the slash we'll load the homepage.

We'll just say element,

who is the element you want to render here?

We want to render home, which is not yet imported.

Home is not yet imported.

So now we need a lot of list of these imports.

So import home and we'll be importing.

Now you guess the idea why I created the pages.

So inside these pages, we have home.jsx.

There we go.

You get this point that how this is all being done.

So this is my slash where the home component will be logged

in and all these things.

So that's fun.

That's basic.

But what about the elements like slash login?

We need to provide some kind of mechanism to find out

that should you be able to access the login or not?

Because if you're logged in,

you should not access the homepage, the login page.

But similarly, you get the point.

You get the point.

So I'll just go ahead and walk you through

that how this is being done.

This is another of my sub route.

Let's just say the path is going to be a slash login.

We know what component we want to mount onto this one.

So the element is going to be,

you might be wondering, hey, just go ahead and say,

you want to go ahead and have login into this one.

Just like this, but no,

this is where you are a little bit wrong, not wrong.

We haven't discussed these kinds of approach.

So we'll just first go ahead and say, hey, login.

Nope, this is not login.

I want it to be from pages slash login.

Okay, there's nothing wrong in this approach,

but what do we want to do in this one is,

instead of rendering this login directly,

which doesn't gives me control

whether should I show it to you or not,

I'll just go ahead and bring in one more component,

which I created.

So if you remember, we created this component auth layout.

It was doing nothing, but time to bring it now.

Let's go ahead and say import.

And this one is auth layout, I guess, yep.

Auth layout, and that will be coming from dot slash components

and we have just one auth layout.jsx.

Okay, what's so unique that you are going to do

with this one auth layout.

Now, instead of rendering this,

I'll just go ahead and say, first of all,

I'll wrap this up with parenthesis

so that it's easier for me to write.

And I'll say, hey, load this element,

which is auth layout, just like this.

And inside this auth layout,

now let's go ahead and use this login.

It could be self-closing.

But what's the point?

What's the point of having this?

Now inside this auth layout, I can provide a prop

and I can define whether this page

requires an authentication or not.

So I can just go ahead and say false, just like this.

I can say that this component

doesn't require an authentication

and I can, based on this logic,

I can work on with my auth layout.

So you get the idea.

Similarly, like login page, exactly same.

Similarly, sign up page.

Yes, exact copy of this one.

So let's go ahead and have a copy of this one.

Let's put up a comma.

We need to import this first.

Sign up from pages, dot slash pages,

and we have sign up.

And we'll say, no, sign up also, this route sign up,

also don't require any authentication

and you can load this one, sign up, there we go.

Right now, what we're going to do with those authentication

is not really important, but let me just show you.

And now let's also define one more

and you will understand the logic behind it.

Let's get one more, copy that.

And now the route that we want to go for is all post,

posts, maybe yes.

Now the element that I want to render for this

obviously is all posts.

So first let's bring this.

Import, and we're going to call this one as all posts,

and that will be coming up from pages and all posts,

dot JSX, okay.

Now for this one, I want that anybody who visits

the all posts should be accessible by all posts.

But this time the authentication is going to be true

because only who are logged in should be able to read

all of my posts, that's the logic I'm going for.

Now this is having a shortcut.

So you can just remove this one

if you pass on authentication just like this.

This also converts as a true.

So that's a shorthand, a lot of people use that.

But now I have two situations here.

People who will be coming up whose authentication is false

like login and sign up, and people who will also be coming up

whose the authentication is true.

So how can I handle this situation?

So there are a couple of ways.

Now we'll work on the functionality part

of how you're going to do that.

So notice carefully how we're going to do this one.

So a couple of things are there.

First of all, the page is having a requirement

that should you be authenticated or not.

There is also one more thing, one more variable

in the picture which is saying,

are you truly logged in or not?

Page requires a login is a different thing,

but are you logged in or not?

We can verify that you are logged in or not

by just making a query to the store.

That's where the two variables actually come up.

And we have to match the two conditions here.

All right, so what we're going to do is

let's go ahead and one by one.

So this authentication part is all good.

We are not going to touch that.

And just below up here, we'll make couple of queries

with the selectors here.

So first of all, let's bring up the important part.

In case you have not seen the Redux crash course,

please go ahead and watch that.

We'll be using use selector from the React Redux.

We need the navigation as well

because we will be redirecting the people use navigation

or navigate, yeah, navigate is good, React router DOM.

So these are the two ones.

Now let's make a query.

So we'll say auth status.

And we can just query the auth status

by using the use selector.

And from the use selector, we'll say that,

hey, there is a callback here, just like this.

And we can say, you give me access to state.

And inside this, I can say state dot auth dot status.

That's how we worked on it.

So this will give me a true and false value.

What is your auth status?

Is it true?

Is it false?

Whatever that is.

We'll also go and create a simple navigate.

Navigate, oops, navigate.

And we'll create a navigate from use navigate,

just like that.

Now we have access.

Now I hope you can see we have couple of variables

to check for.

The first one is authentication,

which is also a Boolean value.

We also have auth status, which is also a Boolean value.

So based on this, you have to figure out

that what do you want to do and how do you want to do.

Now, since this is a couple of queries

are going back and forth,

I would like to create a state for myself,

which is probably a loader state.

So let's go work with that.

So I'll just go ahead and say, I'll use loader.

And I'll say set loader.

And that will be coming up from use state, use state.

And by default, it will be true.

So your loader is going on.

By the way, yes, we have used state.

Okay, now comes the logic part,

how you are going to deal with that.

So as soon as this component loads,

you have to make some queries.

You have to run these auth status

and you have to figure out how this is all going on.

So that based on this,

you can render some other things.

Because right now this is not,

this is a simple children render right now.

But this is going to be changed

that whether the things are good

or what's the value of this.

Okay, let me show you how this is being done.

First of all, let's fire up a simple use state here.

Use effect, sorry, use effect.

Use effect, there we go.

No suggestions, no problem.

Okay, first of all, the callback.

And then we obviously know

there is a dependency area on that.

So based on what this is depending.

So first of all, it is dependent on auth status.

This is dependent on authentication as well.

And this is also dependent on the navigate as well.

So there we go.

These are our dependency array, okay.

Coming back onto this one,

how do you want to work with that?

We want to run a simple if and else condition in here

based on I will be navigating you to login

or I'll be navigating you to the slash page.

Okay, let's see.

Simple, if authentication is required

and your auth status is not equals to authentication.

Okay, very carefully, look at this.

If I require a page which is authenticated,

maybe you are visiting all post.

So I'm saying that, hey,

you are required an authentication there.

But your authentication status is not as true

because required means this will be converting as true.

Okay, listen to this very carefully.

When I say you are required,

that means I'm passing a true in here.

But what I'm also checking another side is

the auth status that you are providing me

is not equals to authentication or in terms,

in short, your authentication is not true.

In that case, where should I redirect you?

Simple question, you are supposed to be logged in

when you want to see all post, but you're not logged in.

So obviously I should redirect you to the login page.

Really simple.

So I'll just go ahead and say,

I use the navigate and redirect you to slash login.

This will take care.

The another condition that I'm checking

is not a simple else condition.

This is also another checker.

Okay, so I'll just go ahead and check this one.

If I don't require an authentication,

so this is my authentication,

I don't require authentication.

You can just visit these pages,

but you simply go ahead and say your auth status

is not equals to the authentication.

There we go.

What should I do in this case?

This is the second case where I'm saying,

hey, you are not supposed to be authenticated

to see these pages.

That means the login page, the signup page.

But what I'm also checking, hey, you are logged in.

Authentication is auth status is not equals to false.

So you are truly logged in.

And there are some pages which don't require authentication.

Who are those pages?

The login and signup.

So if you want to visit the login and signup page

and you're already logged in,

you're not supposed to see those pages.

So in that case, I'll just redirect you

to the simple navigate.

So navigate and you'll be redirected to the slash.

This is the basic logic that we have created.

Now based on this, we can actually render onto this one.

Once this is all done,

let's go ahead and do one more thing.

If we are done all these if and else cases,

let's go ahead and use a set loader and turn it into false.

So all the drama that we wanted to check and all of these,

this is all done.

Now here I'm changing the state of this loader.

Based on this, I can do a simple ternary operation

into this one.

I'll just remove this part

and I'll say first check my loader.

If loader is true, then we're going to show

maybe a loading, maybe a null.

I'll keep this as a simple exercise for you

to create a simple loading component,

maybe a spinner widget, just add it up here, simple.

I'll just use a null, not a good practice,

but I'll just keep it here.

And if the loader is false,

then go ahead and load the component,

which in my case is just the children.

Children, there we go, not like that, not like that.

Children, there we go.

So really simple, but this is a good mental exercise

to actually figure out that how things are going on.

By the way, it has couple of more ways

of how you can write that.

Let me walk you through.

Probably it will take a couple of more minutes,

but it will help you to understand how this is being done.

So for example, if you are checking something like this

and just rewriting the code to make it more understandable.

So let's just say there is an authentication.

If authentication is true,

then I go ahead and I'm checking another one,

if statement, something like this.

So in this, I'm checking if your auth status

is not equals to authentication.

So something like this.

So if you are having a problem in understanding

two condition at the same time using this,

you can also apply this one.

So in this case, notice here, let's understand this.

Authentication is required.

Where does the authentication is required?

Oh, this kind of pages means all posts.

Authentication is required in this one.

So it is true.

So this will be converted into as true.

Just for explanation purpose.

And the auth status, what is your auth status?

It is not equals to authentication.

That means authentication was required,

but you are not authenticated.

So where should I redirect you?

If you are not authenticated,

but the page requires authentication.

Simply you understood this part.

Now we should navigate you to which page?

Slash login.

And this is exactly what I have done in this one here.

So hope this helps you to understand the part.

I can understand.

This could be a little bit more

for the beginners and fresher,

but this is exactly what I did.

I'll just keep it here to make sure that

you know that how I explained this to you.

But I think now this gives you a much more clarity

of how things are done and how things are done.

Okay, so moving back.

You understand this part that all posts are being there,

but we have more elements.

So for example, I'll just go ahead

and copy and paste this one.

So the page is like add post.

Let's go ahead and have that one as well.

Import add post.

No suggestion.

Nah.

Pages and we have add post.jsx.

This also requires authentication.

So it's almost similar to that.

This one will be add post.

Add post, just like that.

Requires authentication, yes.

And we'll just simply say you are add post.

There we go.

So that's the one.

We also need the edit part as well.

Edit also needs a slug to be passed on.

Let's do that.

So we have edit post and we have a post individual as well.

Let's import them too much.

Import and this one will be edit post.

That will be coming up from pages

and inside the pages we have edit post.

We do have one more which is just the post.

Let me check that.

We have just the post.

Let's also import that.

We have post.

Come on.

Post and that will be importing from pages

and we do have post.jsx.

Both of them requires authentication.

So let's go ahead and work on with this.

Copy and paste it.

Put up a comma.

The path is going to be edit post,

but you cannot just go ahead and edit post just like this.

You need a slug value.

So slash colon and slug.

This will give us which post you want to go.

And this requires authentication.

Yes, this requires and this will be edit post.

All right.

What else?

We just need to work with one singular post as well.

This one also requires a simple post.

So we'll just remove the edit part from here.

We'll just say this is a post and you'll provide me a slug.

We're saying that you also require authentication.

It's just personal approach.

I don't want anybody to see my,

I'm kind of a medium, kind of a fan

where if you're not logged in,

you cannot read much of them.

Anyways, it's up to you.

And I'll just simply say,

hey, this one is going to be post.

That's it.

So at least our routing and pages are done.

You have understood the concept.

Of course, we might need to debug a little bit,

but the concepts are now perfectly fine with you

that how the auth layout and all these things works.

We now know how to protect our pages

with the help of this auth layout.

This is doing all the magic, making the queries.

Nothing is happening automatically or magically,

but pretty good start and pretty good stuff

that we have done.

So in the pages, all the pages are done,

but our components are not ready

that in what pages we'll be rendering, login, sign up.

We'll do that.

Nothing much deal.

Again, I'll be providing you all the details of that

and we'll not be writing any of the CSS for that.

I'll provide you the CSS directly.

You can just copy and paste them from my GitHub as well.

This is not a tailwind class.

We'll focus more on the React part.

That's it for this video

and let's catch up in the next one.

Hey there, everyone.

It is here back again with another video.

And in this video,

I just want to do the testing of what we did

in the last video.

It was a pretty big video.

So I thought, let's sip some water and come back here.

I don't want to do the testing behind the scene.

I want to do all the testing that if it is working,

if it is not working,

we'll probably pause the video, we'll debug together.

However it goes, we just want to do it all together.

So let me just share the screen and see this.

Okay, so now the goal is,

if I just go ahead and I simply run this application,

so I've just run the command, that's very basic.

So it's npm run dev and I go onto the page.

This is the page what I see.

Good enough, but in order to do the proper testing,

if you've watched the previous video

where we said the router and all these stuff,

you know that first we need to go into app.jsx.

And the step one is to just remove all this gibberish.

Not a big fan of this.

We'll just go ahead and remove this.

There's a small error.

We'll just go say dev.

Oh, just like this.

And there should be a paragraph here

or let's just go ahead and call this one

as inside the main.

We need an outlet into this one.

So otherwise, if we don't have an outlet

from React router DOM,

rest of the components will not be able

to render inside this.

So we need the outlets.

So make sure it's from the React router DOM.

And now technically we should be able to see the home here.

That's good.

And if I go ahead and see the login,

we see the login.

If I go ahead and see all posts,

it still goes for the login.

One more thing which I noticed is

there's a small inconsistency here.

Inside the auth layout, we actually called it as protected,

but here in the main.jsx,

we are calling it as auth layout.

Not a good idea.

I'll just go ahead and say this one should be protected.

That's a better one.

I'm pretty sure you might have already noticed it,

but I just noticed it.

Not a good idea.

Okay, auth layout.

Let's hit, let's select all the instances of auth layout.

By the way, these are just VS code shortcuts,

which I love.

And one more.

Okay, multi cursor.

Remove this, have the protected one.

It's not going to bother you anything,

but I think that's good one.

So now I think the testing is all good.

We are logging and rendering a login.

Too much white, I know.

Too much light mode.

I don't worry, I'll get rid of this one.

Sign up is good, but if I go ahead and see,

let's just say edit posts.

Oh, edit posts doesn't exist.

Edit posts exist.

And it says edit post.

Oh, we need to give some ID as well, slug.

Let's give it a test text.

It says login.

So we are not allowed to do so.

So there we go.

As of now, our testing goes good

that we have all these applications,

routing states, everything is working fine.

We have no errors.

Good testing in between.

While recording the videos,

it gives us rarely an occasion

that we can test in between.

But wherever I do get a chance to test along with you,

I try my best.

From the next video onwards,

we'll work on the components

so that I can show you what all the components

will be needing, how they'll be working.

Some of them are really boring, like footer.

There is absolutely nothing inside that.

There's copy paste of the tailwind classes.

A header could be a little bit interesting

because we are conditionally rendering some of the elements

like the logout button, the signup button and all of that.

So they can be a little bit interesting,

but footer's not really something.

All right, so that's it for this one.

I hope you have enjoyed this one.

Really short video, but really something

that helps us to understand the features of it.

Let's catch up in the next video

and work on the components part of it.

Hey there, everyone.

I'll always share back again with another video.

And from this video onwards,

we are going to have a journey

about building the components.

Now, some of these components are really great

because you understand a lot of logics behind it,

for example, how and why do we use forward reference

as a special hook in the React?

And some of them like conditional rendering,

but some of them are really truly boring.

They doesn't teach you anything from the React perspective.

They are just, you can say the logo component,

it just displays the logo.

That's it, it does nothing more than that.

The container, it's just a wrapper.

It just displays the element.

Nothing much more than that.

The footer component, lots of tailwind classes,

good for tailwind practice, nothing else,

nothing else at all.

But what we can do, we have to work with both of them.

So we'll start with some of the basic ones,

which doesn't do much.

And as we move forward,

we'll progressively work on some of the components,

which are really good and interesting

and helps you to understand the React part of it.

Let's go ahead and do that.

So we'll just go into the screen sharing first.

All right, once we're in the screen sharing mode,

then let's go ahead and go into components.

The first is, let's create a new folder

and keep it inside this.

So this one is going to be container.

And inside the container,

we'll have this simple container.jsx.

New file, container, and it should be all caps.

container.jsx.

Okay, what do we have in this container.jsx?

To be honest, there is absolutely nothing.

It's just as it is.

You can probably can do something like export default

just right here in case you wish, if you want to.

But that one is also fine.

So what do we have in this container?

We simply return a div,

which is going to render the children.

So let's go ahead and accept all the children.

And we are going to display these children just up here.

Why we are doing this?

What's the point of?

Because we want to add some additional classes.

That is the whole goal.

Nothing more than this.

We want to simply have a width of full

so that we can have a, we'll also have a max width.

So we'll just say max width of seven XL.

By the way, you can hover this one.

I didn't come up with them automatically.

I also worked tweaked a little bit

while we were designing this application.

So it's not some magic number that I came up with.

We'll just say max auto, simple,

and we'll just say px-4.

So these are the classes we came up

while displaying a container.

That's it, nothing more, nothing less onto this one.

Okay, we'll keep this one in a folder

so that it's a little bit separated out.

Now let's go ahead and move into,

let's close this one first.

And we'll go into container first source

and then container components.

Components, and let's create a couple of files first.

So I'll just try to create the files from here.

It's much more easier.

Otherwise, right click it.

Sometimes create files in the wrong place

where I don't want it to be.

So I'll just go with the logo.jsx.

And there we go, logo.

What do we have in this logo?

Honestly, nothing.

I'll just go with that of CE.

The logo is logo.

I don't even have a logo.

Otherwise, usually it's just the image.

But let's just say if we can have some logo.

Can we have some of the logo?

In the public, we have VTSVG.

We can probably use that.

Or can we have?

I'll just keep it as it is.

But we need to have some of the classes on this one.

Otherwise, it is going to give us

some of the issues with this one.

We'll figure out later one.

Right now, let's just display it inside this one.

And instead of a div itself, let's use an image.

I think that one would be good.

I'll just add an image in the later on videos.

Don't worry.

I'll just say I want to have an image just like this.

And this one is going to be an src.

Right now, there is nothing.

So I'll just keep it empty.

And inside this, if somebody doesn't pass me any parameter,

I'll make it a little bit more robust

so that people can pass me some values.

I'll just say 100%.

And whatever the width you give me,

I'll just use it as a style.

I'll make it a little bit fancy.

I'll just say give me a width.

If somebody gives me 80%, we'll use 80% width.

Otherwise, that's it.

Let's use at least an ELT

so that we know this is a place for a logo placeholder.

If I forget, later on, we can just work with that.

That's it.

That's your logo.

Next up is a little bit interesting.

Not too much, but a little bit interesting.

We'll have a simple button as well.

So we'll have a button.jsx.

Why do we have a button?

No such big need of having a button,

but I realize that if you have a button,

you can customize it a little bit easier.

In case you are familiar with something like shad cn

or something, that is fantastic.

Almost same kind of approach we are using.

I'll just have an rfce.

We have a button.

The button is going to take some of the parameters.

Oops.

There we go.

What all parameter?

First of all, you'll be taking children

so that you can render them.

You'll also have a type.

The type is going to be button and bgcolor.

bg, bgcolor.

That is going to be, by default,

this one is going to be background is going to be blue.

700, 600, whatever you wish.

Plain old tailwind colors, nothing more than that.

We'll also give it a text color

and the text color is going to be white.

So we'll say text-white

and we'll also have some of the class names.

Class name and that by default is going to be empty,

but you can pass me on more

and you can also pass me more props.

So we'll spread them around if we have props

and one comma is required.

Now the advantage of taking these props

is if you wish to have or to do something more,

you can just go ahead and do this.

I'll just remove this one

and I'll say I'll return you a button just like this.

Button is going to render the children.

You can also rename this actually to the button title

if you wish, but I think I'm happy with this one.

Okay, what else do you want inside this button?

Let's have the class name.

Class name.

We'll actually change this class name

into first of all backticks.

Actually first of all curly braces then a backtick

so that if we give PX dash four

padding on X axis to be four,

padding on Y axis to be two

so that it looks like buttonish

and we'll also go for rounded dash LG for rounded,

but if you have more properties,

you can just use the dollar and variables to have this one.

For example, the BG color, if you want to change it,

now you can easily change it.

More variables, text color,

maybe you want to change the text color,

go ahead and change it now.

And also some additional classes if you want to pass on,

I'll just respect that as well.

Okay, so right now we have basic default button.

Another advantage that we can have in this one is

if we have more props to be passed on,

maybe active, deactive, whatever you want to say,

I can just actually respect that as well.

I'll de-structure these props as well here.

So all these props actually goes directly here,

makes life a little bit easier.

Again, a good way of how we can have the button,

very generic button, but could be reused like anything.

Now let's close this one.

Let's study a little bit which is more interesting

and you'll repeat this quite often,

which is input.jsx.

Inputs are a little bit different and interesting

compared to the button because button doesn't have too much.

It just registered one event which is on click,

nothing much more than that,

but inputs have great number of deals with that

because if you think it carefully,

input is going to be used in some other component.

That component will have state.

So you have to somehow manage

that somebody's writing inside this component,

but that value goes outside of that

into upper level component.

I hope you are understanding this.

This is complex, but the solution is not that complex,

but imagine this.

The component, let's just say this is your form.

One level down is input.

Now this input needs to give information to its parent.

That is where the magic comes

and that's why I found input to be really amazing.

Now inputs, just like this,

I'll just actually rewrite this entirely.

So how do we actually manage this

that we can pass on some information to our parent itself?

Passing into child its prop,

but how can we pass on to the parent?

That is interesting.

That's why I found this one interesting while teaching.

So we have input just like this.

In order to do so, you have to use one hook from this React,

which is forward ref.

Yep, that's it.

That's it.

Forward ref, if you have this one, that's it.

It just pass everything to the parent component.

And now you can go ahead and say export default input.

There we go.

Now, how do we use this forward ref?

Now using forward ref again is fairly straightforward.

You just wrap up your component inside this.

And we also know the component is nothing.

It's just a function.

We call this one as input.

And this is how we work with it.

If you have anything to access,

you can just go ahead and say,

I will access a label for this one.

I'll also accept the type of this one.

Type is going to be text by default.

Otherwise you pass me on this one.

We'll have the class name, just like this.

And by default, it's going to be empty.

So that same concept of the buttons

will also have the props.

So let's just say props.

If you have more props, you can just give me.

Also, you have to give me a ref.

Otherwise I'll just pass on this ref.

Okay, let's go ahead and move it on to the next line

so that it's easier to read for everyone.

There we go.

Moving up, just like this.

You also go like this.

You also go like this.

Just arranging them.

Sometimes these things bother me a little bit.

Okay, there we go.

Now hopefully it makes sense.

Okay, much easier to read in this way.

Now in this one, all we have to do is return,

just like we return in the components.

So this one is going to be returning, just like this.

And I'll be returning a simple div, just like that.

This div will have a class name.

We are going to get width of full,

whatever is available to us.

And then we simply go ahead and use these labels

in all these inputs.

So let's start our JavaScript in here

and we'll say label, label, label.

There we go.

If label is there, then we are going to display the labels.

So use ampersand sign and another component just like this.

And in here, we are going to start a label component.

Label tag would be better name.

Label tag, just like this.

Inside the label tag, we'll display this label.

If the label is not there,

what's the point of displaying the label?

And we can have some of the HTML ID for it.

So HTML for, and we can actually give it an ID

and we can borrow the ID by the way from the React itself.

So I can just provide an ID just like this.

Right now I don't have an ID.

So I can just go ahead and create this ID by use ID,

which is given to me by React itself.

And I can actually go ahead and before I had returned,

I can just say const ID is going to be equal to use ID.

There we go.

Now you get from where this ID is coming up from.

All right, not bad.

We'll also add some of the class names.

Don't really like them, but we have to.

This one is going to be in line block.

And we'll have a margin bottom of one.

We'll have a margin, sorry, padding left of one.

Okay, if you wish to design it a little bit more,

you can just go ahead and do that.

Really doesn't bother us much.

So this whole thing is the label portion of our input.

We also need to give it an input

because that's what this is input, not the label.

Let's go ahead and provide an input.

It could be a self-closing one just like this.

Now we need to set up all the parameters here.

Like for example, we are taking type from the user.

Let's respect that and provide a type just like that.

We also need to provide a ref

because when any form will be using it,

they will be providing us this ref or references.

There we go.

And we'll say just add the ref here.

Let's restructure all the props and add them here as well.

There we go.

And also let's provide the ID.

So same ID can go up here.

Same variables, same unique ID will go here.

Then after that, we'll add some of the classes.

So the classes concept is exactly same.

There is nothing new that you are learning.

We'll have the classes,

but we'll wrap them in the curly braces and in the back text

so that if any variable comes up,

we can actually respect that.

So this is a new concept that you learn into this input,

which is how to pass on some data

from a lower component to upper component

or from a child component to a parent component.

That's interesting.

Similarly, like the input one, we'll create one more,

which is exact same replication, select form or select input.

Select.jsx, we'll go with this, so select.

Exactly same concept.

I think this will be a good reputation for us.

So let's go ahead and create a function

and this will be our function just like this.

And this function is going to be named as select.

There we go.

And we'll also grab the React.

Import, React, we know that we'll be using use ID.

Use ID and that will be coming from React.

Okay, the function is all done.

Now we just need to export that.

Again, it's up to you how you create a function

within inside that just like we created,

or you can do something like this.

Export default React.forwardref.

And here we can just say select this one.

Okay, both are same, exactly same.

It's just the way of writing the code here.

We're doing everything in line, whichever you prefer.

There is no right or wrong.

There is no optimization in this one.

You can actually just wrap this up and pass it on directly.

Here I created the function first

and then I'm passing it at the export time

in the forward ref.

The reason for showing you two ways

is so that you can understand

that some people write code this way.

Understanding the code is also really important.

So this is what we have as of now.

All right, moving further,

we'll take some of the parameters.

What all of the parameter?

We obviously need, this is a select.

So if we need options, we need the label.

Exactly same thing will happen to the label

just like we did a class name, just like this.

And we'll also have props.

We'll restructure them.

And once we are done with this,

these are all the first like objects

that you'll be passing me,

but you also have to give me the ref.

Okay, once we are here,

then obviously we need to first handle the ID part.

We know that, that's easy.

Use ID, there we go, unique ID generated return.

And there we go.

And inside this will just return a simple div.

Okay, first of all, class name, simple class,

we'll save it, get the fill width.

There we go, no big deal.

In here, the label thing will be exactly same.

So why don't we just copy and paste that,

save us some times, because it is exactly same.

There is nothing new we are learning here.

So we start our JavaScript.

We simply say, if you have labeled

and we'll display the label,

we'll use the HTML ID or HTML 4 for this one,

we'll have the label.

But right now here, this label is good.

But now the input form is different.

So this is okay.

Now let's start the select field.

This is where things gets a little bit interesting.

So this is my select field.

I'll keep it as, no, not self-closing.

Okay, now one by one, what goes inside this?

First of all, inside the select field,

first of all, let's display all the props that you have.

So let's get rid of this.

Oh, my bad, dot, dot, dot, props.

Okay, one part is done.

Scroll this a little bit.

Okay, we need ID, okay, easy part.

ID will be going like this, so ID, easy part.

We also have ref, easy part.

We also grab it like this, ref, okay.

This is easy part.

Now, the thing is, which is most important about this is

a lot of options will be given to you.

This is how the select field works.

In case, by the way, you forgot it

or maybe you want to jog the memory,

we can go select HTML,

and I'm pretty sure W3 schools

can help us to memorize, jog the value.

If I try this, this is how it looks like.

This is the select field.

A lot of options are being passed on,

and as soon as you select the option,

that option is being selected.

That's exactly what we want to get.

These options will obviously be an array.

Somebody who is using my component

should be already aware of this,

and now all I have to do is start a JavaScript here,

and I have to say, hey, options, I want to look through you.

So maybe you can use for each, maybe you can use map,

whatever is your favorite, you can use that.

In each one of them, you will get a callback just like this.

So we'll get an option, options, option, remember that,

and then we can simply use a callback just like this.

I'll start a parenthesis, not the curly braces,

so that I don't have to explicitly return,

and then inside this one,

I'll say I will start options here, not options, option,

and I'll close this one as well.

There we go.

Inside this one, I'll display each of these options, okay?

Half part is done because if you remember

the code part here, this is the option.

So this part is done,

but we need to also have the value being added.

Otherwise, it's just displaying here.

So we need to take care of the value part.

So we'll go up here and we'll say value,

and the value is going to be whatever the option is, simple.

We also need to do one more thing,

which is not required from the HTML perspective,

but from the React perspective, it's required.

Since the value is looping through, by default,

React Fiber has no way to knowing that

if it is repeating different values or the same values.

So we need to provide a key for it.

This is performance optimization,

and I know that each options are different,

so I can provide an option like this.

Really interesting, but this is all what we have.

Now, apart from this, there is just one more final thing,

which is just a class, so I'll just copy and paste this.

Doesn't really bother us much.

So there we go.

We have our select options being added.

This is something really interesting.

I hope it gave you some knowledge of forward ref.

If it does, do let me know in the comment section.

This is really important.

Okay, this is all done.

Input part is all done.

Now let's also do one more thing.

Actually, two more things we have to do in this video,

but this one is going to be a little bit interesting.

So what we're going to do is, let's open this up.

It's much easier to actually create components from here.

I want one more component, which is postcard.

Not really the postcard, like postcard,

but card for each of the posts that we have.

This is interesting because a lot of information

we need to grab and how we can actually grab this one.

So let's go ahead and an RFCE, react functional component.

We have postcard, just like this.

Now this postcard takes a couple of information.

Let me show you.

It takes a dollar ID.

If you're using MongoDB, you might have underscore ID

in the case of app write, it's dollar ID.

You also give me a title.

You also give me a featured image.

Featured image, okay.

Featured image, these all things are given to me.

Now, my responsibility is to simply have a card

on the homepage to take the user on the longer post

for that particular post, okay.

How we can do that?

First of all, let's remove this

because we want this entire card to be clickable.

So we need to grab the link just like this.

So we'll grab it like this.

But this link obviously doesn't come directly.

We need to have it from the React router.

Import, give me a link, no suggestions, no.

From React router DOM.

Okay, now anything inside this will take us to this.

But again, we have to provide where do you want to take me?

For this, we have to use the to keyword.

I'll use back text.

We'll go wherever we are, obviously on the homepage.

So we'll go on to slash post and slash the slug ID,

which in this case is dollar, just like this.

And we'll provide dollar ID.

ID, yeah, that one.

Okay, now we know the link part is sorted.

Now all we have to do is grab a simple div,

which is going to display the information.

So inside this div, obviously some of the class names

will go, I'll just copy paste these classes,

doesn't really bother us much.

And we'll use class names just like this.

So let me just copy and paste these classes.

You can also copy and paste them from, okay,

from the GitHub itself.

So there we go.

And inside this, we'll have another div.

Yeah, that's how we designed it.

Okay, this div also has an image.

So this is the image.

Now, where the interesting part lies

is how you're going to grab the source

because you have this featured image only.

Now let me jog a little bit of your memory.

If I go on to the config part,

notice here we created a simple method where it is.

Yeah, get preview.

So this featured image is nothing.

It's a file ID that you will pass me.

So here in the postcard,

you will provide me this featured image.

This is nothing.

This is the file ID.

So I can actually use this get file preview method

and pass it on file ID.

And what it gives you is directly a link of the image.

Notice here we send href.

So this is a link of the image.

So I can actually utilize these features.

And that's why I say these services actually helps you

to lot of work that is already, that can be reduced down.

So all I have to do is import.

Let's call this one as app right service.

App right service.

And that will be coming up from.slash app.

Nope, dot.slash.

Yeah, there we go.

App right slash config.js.

Probably don't need a JS, but anyways.

So we have the app right.

Okay, now in this source, I can just use it directly.

So I'll just remove this one.

Inject it like this and I'll say app right service.

I'll want to use a method which is get file preview.

And in order to run this method,

I have to provide you the featured image.

That's it.

Automatically it will call this

and do everything that I want to do.

All right.

In this one image itself,

I will inject the title optionally,

but if you wish, you can just go ahead and do that.

Now time to add some classes.

And this one is going to be rounded dash xl.

And we do have some of the classes onto this div as well.

We'll have the class name just like this.

And again, these classes are nothing too much

to be worried about.

Basic tailwind classes.

Okay, next part is how we are going to display the title.

Totally up to you.

And what I want to do is just below this div,

we'll have an simple H2 and inside the H12 displayed.

Title.

There we go.

We do have some classes for this one as well.

So we'll have a class name and we'll have a text dash xl.

We also have font bold.

All right.

So I hope you understand a lot of things

that are learned from the React perspective,

as well as good software engineering perspective

that creating a service, it helps us a lot.

We don't need to do things 1000 times.

It just works out of the box.

Okay, now one more thing.

Final thing that we are going to do for this video

is we'll create a new folder, which will be a footer.

Again, nothing much.

This is really the most boring file.

It has nothing.

It will be simple footer.jsx.

Okay, simple rfce, React functional component.

And all we're going to do is just copy paste

some of the HTML code.

Remember, this is not an HTML tutorial.

There is nothing much we are doing.

Just a lot of CSS classes, logos and whatnot.

Only thing we have to do is import a link

because all these are wrapped around the link.

Link and that link come from React router DOM

that you already know.

And that's it.

That's it.

Your footer is ready.

Now all you have to do is go into an app,

display the footer, see how it looks like and all of that.

Whatever the things we wanted to study in this one,

we have studied most of it.

Still, there are few more left,

but we're going to do that in the next video.

Already the video is half over long.

So let's go ahead, move on to the next video

and see that how we can work on the rest of the components.

They're pretty interesting.

Let's catch up in the next video.

Hey there, everyone.

Hitesh here, back again with another video

and welcome to continuing our journey

for building a full stack application,

which is our blog app.

In this video, we're going to take down two approaches

and in fact, two pathways at the same time.

The first, we're going to take the tiny MCE,

which is a VisiVig editor, what you see, what you get.

So you will get the ability to simply have

the bold applications, italics, underlines,

all that you see in a fancy editor.

You're going to see all of that.

And in the second part,

we're going to take a lead into understanding

the React forms.

Now, React forms can be directly handled.

There is nothing wrong in that,

but there is a industry standard way of handling the things.

So I'll show you what is being used

in majority of the production grade application.

At first, it might look a little bit too much,

but as you move into the production grade application

or when you will be working in the job,

you'll notice that most of the people

actually prefer these kinds of form

instead of just handling every state manually.

Again, there is nothing wrong

in handling the state manually,

but this is the industry standard.

So I thought that let's introduce that.

It might be a little bit challenging at first,

but this is the good way and good approach to get started.

So that's what we'll be doing.

So let me just walk you through.

Let me first share the screen.

So this is the editor that we'll be using.

This is TinyMCE.

This comes up in both free plans and the plate plans.

Of course, we'll be using the free ones,

and that's what we'll be going through.

And then we'll be also going through

with the controllers as well.

So we'll be going through with that.

So let me walk you through.

So this is the TinyMCE, which is an editor.

It, of course, can take a parameter of API key,

which will not be giving it to one.

We'll be using the free version.

A couple of parameters that are important to pass on

are like what's init value, initialized value.

Then we can provide what should be the init.

Then we have to provide the plugin

that what all do you want to support in your editor,

like auto links, list, visual blocks, code, full screen,

what mode you want to give,

and in the toolbar, what options you want to give.

Undo, redo, all of these.

So these are the things.

And in the content body, we'll be actually using as it is.

So what are all options available?

So this is the editor, which we'll be using

by installing after this TinyMCE as an editor.

That's the first step.

And after that, we'll also have a look onto this one,

which is a React hook form.

Pretty interesting library to work on with this one.

All the things are available in their docs,

that what all things you're available,

set errors, controllers, forms.

In this couple of months, we are going to use,

and I'll walk you through how to read the docs

and how to work with them.

This could be a little bit challenging,

and I think this requires a standalone crash course

or a video in itself, which I'll try to upload

on my channel.

If you haven't yet subscribed,

go ahead and hit that subscribe.

I'll, if I'll get enough requests,

I'll definitely do a proper crash course

on the React hook forms as well.

Pretty interesting subject, and I love this quite a lot.

So we'll be using that.

All right, so now let's go one by one

and try to install them first.

So installation is pretty straightforward.

There is nothing too much going on with that.

Let me just go onto VS Code.

First, let's go into TinyMCE.

So installation, React, let's go there.

And the installation that we need is this one,

which is at the rate TinyMC, TinyMC React.

Let's go back up here and have the installation

for this one.

So npm install, and this one is for the editor part.

All right, and we also need the React form as well.

So let's go back and let's go get started.

And here is a React hook form.

So let's copy this and install this one as well.

So I think these are the two

which we are going to need as of now.

I think that's enough.

Let's go ahead and get one by one

up and running with this one.

All right, so first, let's go ahead and create,

we'll create one by one.

Let's start with the simple nav bar,

which we are going to have.

So we'll be having a logout button and a navigation bar.

Then we'll work on the real time editor.

And then we'll be working on the post format as well,

which is going to utilize all the hooks and all of that.

So let's go ahead and start one by one.

So first of all, let's create a new folder

inside the component.

We are going to call this one as simply nav bar

or let's call this one as header.

So inside the header, we'll be having two files.

The first one is going to be header.jsx, header.jsx.

And another one is going to be a standalone component itself

which is going to be logout.

Logout or logout button.jsx.

The reason for creating a logout button itself

because it is going to make a query

and we'll be using some services

from Auth service and all of that.

That's why we are just keeping it separate one here.

All right, so what do we need?

We need dispatch.

So we're going to say, I need use dispatch.

No, no suggestions.

All right.

I use dispatch.

The dispatch is going to come up from React Redux.

There we go.

After that, we need the Auth service as well.

Auth service.

And that's going to come up from couple directories back

inside the app, right?

Inside this auth.js.

Yep, that's the one.

And we're going to need a couple of services

from store as well.

So we need to import log, logout.

And this logout will come up from,

we need to go one directory back

and inside the store.

And from that, we are going to need auth slice.js.

All right, so now we have the logout.

The reason why we are having this logout functionality

in itself alone, so that we can make a request

using the slice and that request can just clear

out everything.

That's what we designed it.

So in case you forgot that, let me jog the memory again.

So this is what we have imported after exporting this one.

So once we actually hit this one,

it will create the status as false

and we can have a simply user data as null.

That's what the goal is.

Okay.

First of all, let's create a dispatch.

Otherwise we won't be able to access it.

We won't be able to send a message

that we are using this method.

So const dispatch and that will be designed

or created using use dispatch hook.

There we go.

Now we have access to this one.

Let's create a logout handler.

Anybody who clicks on this button,

we will be handling it with this one.

Logout handler, handler.

And using this, a simple method, let's fire this up.

And we'll be saying, hey auth service,

give us a method which is a logout.

And once we are having this logout method being called,

which is in our service, let's use a promise

and we'll simply get a then.

If then happens, then we are going

to successfully cater that one.

And we're going to then dispatch an event

which is going to be a logout event.

There we go.

And since this is a method, let's run this and that's it.

In case you wish, you can handle the catch part as well,

but I don't think it's required in this case,

but that's it.

That's how we are going to logout.

Notice here, if I'm able to successfully handle the logout,

then only I'm dispatching an event of logout.

And that's what we have designed in our store as well

that as soon as this is being called up,

are we going to set the status as null

and the user data to set status as to false

and user data as to null.

Okay.

Time to design a button.

There is nothing much that we are doing is,

let's go ahead and return a button.

There we go.

Inside the button, we just say logout.

And rest of the stuff is pretty obvious.

Only one thing is important that is on click.

On click and inside this one,

we just simply say logout handler.

Please don't say it like this.

We don't want to execute it.

We just want to pass a reference.

And then our basic class names.

Again, I'll be just giving you these class names.

If you want to design your button your own way,

be my guest, please do that.

All right.

So now you understand the logic behind it,

that how the logout button is being designed.

Let's go into the header.jsx because that is the file

which will be having the entire navigation items.

Most of them are just tailwinds and loops, nothing much,

but there are some reactive part of it.

So I'll just say RFCE.

So we have a header.

We'll be requiring a couple of import statements

in this one as well.

First of all, let's import container.

In fact, what we can do is,

since we need a couple of more things

from this component itself,

we can design an index file

and have an import and export statement from there as well.

But in this case, let's go ahead

and do container separately.

And we'll be bringing them from .slash.

Oh, we need to go inside one directory.

Yeah, .slash container.

Oh, we need to go one directory back, my bad.

One directory back, container.

And inside that we have this container.jsx.

We don't need that.

And we also need a logo

and we don't have anything inside logo,

but still we'll get this one.

So this one is from one directory back

and we'll just say logo.

Okay, two of the components that are required

for navigation bar are here.

Since we'll be redirecting a lot of stuff,

link is required.

Of course, that comes from React Router DOM.

And what else?

We need a logout button.

That's why we designed it.

Logout button and that comes from a logout button

and we'll be forcing people to use navigate here and there.

So let's go ahead and do use that as well.

Use navigate, that comes from a React Router DOM.

Okay, how do we design this header?

That's the important part.

Again, this is going to be based on something.

First of all, we need auth status,

whether user is logged in or not,

because based on that,

we are going to display the sign in or the logout button.

So why not we create a simple const which says auth status.

And this status is going to come from the use selector.

Do we have use selectors?

Have we imported that?

So we need use selector.

Import, use selector, there we go.

And once we have this,

now I can use the use selector and can make a query.

Give me the state.

And I'll just ask you that state has this auth

and has got a status.

Status.

This will fulfill a value of true and false.

And also in the meanwhile,

let's also use the use navigate as well, nothing much.

Navigate, and that will be coming from use navigate hook.

There we go.

Okay, now we need to design a simple constant

of navigation items.

That is better way.

Once we have these navigation items as an array,

we can loop through them

and can simply generate our HTML from that.

Let's call this one as nav items.

That's going to be a basic array

and we will have multiple objects into them.

If you wish more, you can have more.

I'll have something like this.

Name is going to be home.

Not only that, I'll also provide a slug for that.

And that slug is going to be where you are.

So slash for that.

And we'll also provide an active status for that.

And active is going to be true in this case.

Okay, this active status right now looks true,

but it's going to be based on the auth status.

So what's the auth status and all of that?

So let me show you what do I mean by that.

This will be getting clear here.

So let's just say we have a name

and this time we have a login.

Login, the slug is going to be,

I can actually copy this.

I can copy the slug, which could be slash login.

Come on, there we go.

Now, interesting part, is it active or not?

That is going to be based on not auth status.

So what do I mean by not auth status?

So not auth status simply means,

if your login, your authentication status is true,

that is you're logged in,

so the active status will automatically become false.

So in that case, I don't want to display this login to you.

That's the whole idea.

That's the whole game of this situation.

Similarly, we'll be having a signup exactly same.

So let's go ahead, copy and paste, put up a comma.

We simply want to say this one as signup.

Signup, we'll copy and paste this.

So smaller signup, same.

Auth status will be not.

That means if your authentication is true,

I don't want to display this.

So that means active will automatically become false.

Similar to this, we have a couple of more pages for that.

Let's put up a comma and we'll have all posts.

The slug is going to be all dash posts.

A routing will take care of that,

but this time I want this auth status to be true.

If your auth status is true, that means you are logged in,

then only I want to show you this all post.

So otherwise you'll just see the login and log out.

So that's it.

Add post is similar one such thing.

So you are able to see all post

and you are able to see add post.

That's how we are designing our navigation bar.

This one is going to be simply add post.

This one is going to be add post, auth status is true.

Okay, so now I hope you understand that why

and how we are designing this nav items.

All we have to do in this one is now simply have couple

of design items just like there.

And then we can simply loop through the values.

The looping part is important.

The rest of this is fancy design, nothing more than that.

Let's go ahead and have a header.

This header will have a class name, a simple classes,

padding on y-axis is three.

Or when we designed it, we simply had a shadow.

A shadow will just be like that.

And we have a background of gray, 500 is good enough.

Okay, inside this header,

we have this container as a component.

So this wraps up automatically and gives you the space.

And then we have a couple of nav items.

So let's just have a nav.

And this nav is going to have class again,

couple of classes we have, we'll be getting a flex.

The first item inside the nav is going to be a simple div

which will be for logo, nothing more.

And for this, we will be having a class name,

margin on right side will be four.

While designing this, this is what we found it to be best.

Let's wrap the logo inside the link.

So we'll be having a link just like this.

Where does it go to nowhere?

So we'll be saying it like that slash.

And inside the link, let's place the logo.

Right now we don't have any image for the logo,

but whenever we'll be having, we'll be happy with that.

Okay, once we have this div item,

that means the logo is all done.

And then we'll be having a UL after this one,

so unordered lists.

And it will have a couple of class names.

And we'll be having a flex and margin left of auto,

so that everything is pushed onto the very right side.

Okay, this is where the things get interesting.

And now we need to start our JavaScript

because we want to loop through the values.

So looping is not that much difficult in this case.

I have these nav items, I can use any loop.

My favorite one is map.

And I'll go like this.

Then again, we need a couple of values into this one.

We have items.

So each object inside the array,

we are calling it as an item.

And based on this item, we'll be looping through.

Okay, let's go ahead and work on with this one.

So now we can directly go ahead and start this,

but I don't want to directly start this.

I want to display the element

only if it's property active is there.

So what can I do?

I can evaluate this.

If item is active, there will be two cases.

Item will be active or might not be active.

If the item is active, let's do something.

Otherwise we'll do something.

Okay, that's interesting.

So again, this might give you a little bit

of the ternary operation.

Yeah, that is this.

And in the other case,

we are simply going to refer it as null.

We don't want to do anything.

You can just generate an empty component as well.

That's fine too.

In this place, we'll just remove this

and display a component.

So let's place a curly braces here.

Now, in this curly brace,

how do we want to display the item?

Obviously we want to, in an unordered list,

I want to display a list item.

So I'll just go ahead and grab a li list item.

Since the list item is the one that is getting repeated,

it's good that we pass on the key here.

Item.name is the unique value that we will be having.

Okay, inside this list item,

we will be having a button

which can actually get these clicks.

So we'll be having a button just like this.

And in each of the button,

we'll be having an on click

which is going to just navigate the value.

So I'll just say on click.

There we go.

What do I want to happen when the click is there?

First of all, a callback

because I want to pass a value just like this.

And then I will use the navigate.

So navigate, where do we want to navigate?

We have already taken care of that

by having the slug value.

So navigate the user to a place

where it is item.slug.

Item.slug.

So this is the place where you will be navigating.

And after that is just a class name

to make it look decently beautiful.

I have these class names with me.

So I'll just copy and paste this one.

I hope now you understand.

It's not really difficult.

It looks difficult, but it is not.

The button doesn't have any name right now.

So let's go ahead and give it really simple item.name.

That's it.

So now that entire thing is there

and we are happy with that.

But you might have noticed

that we are not actually giving any logout.

We have designed the logout button,

but we are not giving this logout to the user.

We have only worked with this unordered list, which is nice.

Now what I want to do is after this,

all the allies and everything is being generated.

Now I want to have this one here.

I think this is where I start my JavaScript.

I want to have another ally,

but this ally is going to be conditionally rendered.

Only show the logout button to the people who are logged in.

So that means I can get the access of that

by a simple variable that I've designed auth status.

If the auth status is true, then only do it.

So I can use ternary operator.

If it is true, do something.

Otherwise go ahead and do show null.

That is also a good approach.

Or I can use another approach with the M% sign.

If it is true, then only we are going to render this

just like this.

And we can say, let's grab an ally.

Yeah, there we go.

And inside this ally, let's load a simple logout component,

just like that.

So I hope you can see it was a little bit lengthy,

but it's not really difficult.

That's how we simply have our headers and navigation bar.

Don't worry, we will be assembling that in the app.js.

So if you see this app.jsx, just about the outlet,

we will have the headers and we'll have the footers as well.

But right now this is good enough.

It has to understand that how things are going.

Already it's too much, but that's it.

So that's our part one, the phase one,

where we have handled the authentication part

and the logins and whatnot.

Now let's move on to something which is TinyMCE.

This could be a little bit difficult at first,

but it's not, it's really, really easy.

The first thing is that the TinyMCE is a component

which is not the usual form, it's a third party form.

And we're already using a third party form,

which is the React hook form.

So React hook form also knows that,

hey, these kinds of things are really, really common.

And if you look at their docs,

you'll see that there is a hook that they give you,

which is use controller.

If you look at this, it says,

React hook form embrace uncontrolled components

and native input.

However, it is hard to avoid

working with external controlled component.

And we are into this exact same situation.

React select is one of the selection library

which helps you to get selection based components.

And D, very, very popular.

So we are into one such situation.

In that case, we can actually wrap everything

using this component controller.

And this controller gives back the control

of these third party forms to the React hook form.

That's exactly what we want.

So let's go ahead and see

that how we are going to handle that.

So let's close the header.

And let's create a new file into this one.

And this time we'll call this one as realtime editor.

So RTE dot JSX.

Okay, let's go ahead and do it one by one.

React functional component export just like that.

Okay, this is basic.

Okay, now we need just the two things.

First is our controller.

Controller.

And this controller will come up from React hook form.

And another one is we need to import editor.

This is interesting.

Editor.

And that editor is going to come up from

the tiny library that we have installed.

So tiny mce react.

Okay, so how does this one work?

Component we know that we can wrap it around.

But what's interesting is this tiny MC.

So what you'll notice is

there is nothing too much to be worried about this.

All you have to do is worry about

where you're going to load your editor

and pass on these initial values.

That's all it takes.

So let me walk you through.

And once you see this happening up here,

you'll be pretty much comfortable.

So whenever anybody is using an RTE,

he'll be providing couple of values.

So what is the name of this one?

Name is good enough.

We'll also get some of the control from the user.

If it doesn't provide, we can also pass on default ones.

It actually uses default one.

And then we'll also say the label.

Oops, label just like that.

And we'll also have the default values.

Default value.

I'll show you what these default values and everything are.

Okay, now time to get into this one.

So what we're going to do is,

first of all, our label logic will remain as it is.

Exactly same, just like we have used in the past as well.

So let's create a div and have couple of class name.

And this one is going to be widthful.

That's it.

Now let's first display the label.

Again, start your JavaScript like this.

If the label is given by the user, that's great.

Then only we are going to display it.

And if the label is present,

then we can just simply go ahead

and use a label just like that.

Okay, this label will have couple of classes,

mainly inline block.

There we go.

And margin bottom of one

and padding on the left side of one.

That's it.

Okay, what is the value that we want to add into this one?

Simply label.

There we go.

So label part is done.

We know that part.

We have done that, handled this one.

Now comes up is the wrapper.

First of all, the wrapper.

So controller, there we go.

We can make it self-closing.

No bad, nothing bad.

Nothing bad into this one.

Since it doesn't take any values or something,

we can just go ahead and make it a self-closing.

Now this controller takes couple of values.

If you wish to read more about it, you can read in the docs.

That's why we passed it up.

Name, the unique name of your input.

That's why we said it name.

It also gives you the control here.

The control object is from the invoking user use form.

So again, the exact same thing I mentioned

that control is to make sure

that if parent is invoking any child form,

that child can again pass on some data back to it.

Then we have the render,

which is what is that you want to render into this one?

These values and default values.

You want to study more.

You can just go ahead and do this.

These are the required ones.

Nothing else you have to worry.

Okay, let's do them one by one.

So we'll say the name, the first prop.

Now I will inject a JavaScript here

that I'll just keep it as name.

If the name is there, otherwise we'll just say content.

Okay, if somebody passes me this name

to make it this form reusable, that's great.

Otherwise we'll call it as content.

So control, this is something that you have to pass on

when you actually design a form like that.

Notice here, this control is something

that is a control object from the invoking use form.

Right now there is nothing which is using the hook use form,

but if there is one, this is where it,

or this is how it takes the control of it.

Then next one is the render, render.

This render is interesting one

because it's actually a callback.

So just goes like this.

And I don't want to use the return keyword.

So I'll just go like this.

Inside this render itself,

you need to provide what fields

you are interested in working with.

So first of all, I'll say field just like that.

And the field that we are interested in working is on change.

Okay, a little bit weird as of now, but don't worry.

It will be all good in just a second.

Now this is the field that what do you want to control

like on change because we'll be having a state

in the state we'll be staring.

So this all will come from who,

somebody who will invoke the use hook form.

Right now it's not there.

So where we'll be designing the major form,

that's where this will come in, okay?

Now coming back in here,

here I want to render the editor.

That's the one.

And it can be self-closing as well.

That's it.

Now the editor right now, it looks like just one element,

but it requires more fields and more properties.

That's what we are going to provide to it.

Otherwise, this is the only code.

So notice here we are controlling the third party forms

just using the controller with a couple of fields only.

That's it.

You'll understand the importance of it as we create

and we'll be using this use forms and all of that.

So we will be very soon using them as well.

Rest is all good.

So this part is all done.

Now we can go back to the tiny MCE

and provide all these values.

So all these values, like you have some initial values,

provide that.

If you have init, just provide that.

If you have plugins, provide that.

Toolbar, provide that.

Content style, provide that.

Most of them is exactly copy paste

from the documentation itself.

That's exactly what I'll be doing,

but let me show you that.

First of all, the prop initial value.

Initial value, I don't have anything.

So I'll just pass on the default value.

Whoever is using, just pass on that as it is.

Then we have this init.

This init, we need to provide the object

that what do you want all to have?

Like for example, you have option of branding as false.

I don't want to show the branding,

but it still shows it because it's in the free version.

Otherwise, if you pay to them,

then it's just like that.

And then you can also provide a couple of more parameters,

like height and the menu bar, just like that.

Then comes up is the plugin.

So go ahead and grab as it is,

whatever the plugin values are.

Again, it's up to you how you grab them.

Do you want to use all of them?

Do you want to not use all of them?

Totally up to you, no force there.

I'm just gonna be using all as it is.

So in the plugin, I'm saying,

give me image plugin, list plugin, everything.

So that's how you do that.

Next up is simply the toolbar.

So just go ahead and grab everything

that's there in the toolbar.

And in fact, grab everything

that's inside the content body as well.

Totally up to you, totally up to you

that how you want to have it.

I just want to have everything of it.

So I'll just grab this one

and let's grab everything from here.

And we'll just paste this.

And this all thing,

can actually, oops,

why is it not moving?

Okay, so toolbar looks good.

Probably there's something inside the copy paste

that I've missed.

Let me try that one more time.

Usually it's not that bad.

Oh, it's bad.

Anyways.

Yep, toolbar.

Now the value is too big, it's just a one long string.

I don't know how they do it.

Anyways, and then after that,

we have ending trailing comma and we have this one.

Come on, there's my cursor.

Ooh, difficult.

Okay, let's move this one.

Okay, decently adjustable.

I need to change the setting of my VS code a little bit

to accomplish that.

Okay, but anyways, it's good enough.

And the last thing that you want to do is

once you are outside of this one,

then we'll be having an on editor change.

And this is where we just say

that I will pass on an on change

so that anybody can control this.

Okay, this is good.

And I think that is all what we want.

So a little bit difficult in the first run

that hey, why are we doing this, all of this,

why is it all of that?

But remember, this is a bit of an advanced part

of the tutorial.

I think it helps you understand a lot here.

Okay, now the preparation is done.

Now we'll be building one of the most important form

in itself, which is the post form.

So right click and create a new folder.

And we'll be calling this one as post dash form.

This is our most important form

because it uses almost everything

that we have built so far.

Post form dot JSX.

All right.

A lot of logic is also involved in this one,

but it's good, it's good.

You'll learn a lot of things in this one,

have patience, take a break if you wish,

but I'll continue here.

So first of all, we'll be needing react

and we'll also need some of the,

you can actually use callback

to make it a little bit more optimized.

We'll be needing now the hook

that we have been waiting to use,

which is use form.

No suggestion?

Okay, no worries.

And that will come up from react hook form.

This is the most invocation part and important part.

We need all the things that we have designed so far.

So we'll be needing a button

and the button that we have designed,

one directory back and it's actually button.

We need to go one directory back.

Oh my goodness.

I actually accidentally made this form

outside of the component.

It should be inside in here.

Let's drag and drop into the components.

Yes, please move that.

Post form, post form, just like that.

Hopefully now it should be good.

One directory back.

Yep, that's my button.

Okay, what else?

Input.

Import.

Input.

From.

Input.

And we need RTE as well.

And that's going to come up from RTE.

And select also.

And that's going to also come from,

oh my bad, one directory back and RTE.

This one also, oh sorry, select.

My bad.

Select.

This one also, one directory back, RTE.

One directory back, input.

And this one is okay.

Okay, so these are our components that we'll be using.

We also need the service because this one is a form.

It will be submitting some data.

So we need the app right service here as well.

Let's use app right.

Service.

And that service is going to come from

a lot of back directories.

Yeah, app right.

And inside that we need a config.

I think that will do the job.

We'll be navigating and selecting some of the information.

Like we need, we need Redux.

So for that we'll be saying use selector.

And the selector is going to come up from

the React Redux.

And we need navigation as well.

Import.

Why navigation?

You might be thinking.

Once the form is actually submitted,

we want to redirect user back on the homepage.

That is why we need that.

Use navigate.

And that's going to come up from React Router DOM.

All right.

Quite a lot of import that we have done here.

But I think that's good.

We didn't actually start it with the template.

We should have done that.

But anyways, I'll just write that export default.

And let's call this one as function post form.

And there we go.

Should be good.

Now, interesting part, as soon as we have form,

we might receive a post in that.

So we are actually reusing the form in this case.

So if somebody gives us the post,

we'll use the same form in which we want to edit

our post.

And if somebody doesn't give me this post,

that's okay, we'll handle it accordingly

and we'll use it as for creating a new post.

That's how we are going to use.

Now, most important thing, first of all,

we need to register that what all values

and everything that you are going to use in the use form.

We have this use form now.

This is a very, very powerful hook.

Instead of managing each of your input

into its own individual state, it could be nightmare.

Maybe you have 20 input forms

and you want to maintain each one in the state.

This could be challenging in this one.

So that's why we use something like this.

Give all of your values and then simply go ahead

and use a hook, which is use form.

This use form can have all the values.

So in here, we can provide all these values

like what are my default values.

So let's go ahead and have,

let's provide these default values as an object.

Let's just say we have a default value for the title.

Oops, not like that.

I'll show you where the title is.

So I have a default value for title.

If you give me post,

then optionally we'll extract it from the post title.

If it is not there, then we'll just say it's empty.

Similar to this, we'll just go like this.

Similarly, we have a slug.

We'll say this one and you'll be very fascinated

about how the slug's values are being handled in this one.

We'll say optionally extract the slug from it.

If it is not there, then just go ahead

and provide an empty one.

Similar to this, we'll be having a content.

If the content is there, let's optionally extract that.

Forgot a dot.

Otherwise, let's go ahead and keep it empty as well.

And we have also have a status as well.

So status, if post is provided,

then optionally unwrap that as a status.

If it is not there, then just use active

because that's the default state of this one.

Okay, so we have provided the default form,

but what all the input fields that you are creating

are going to be managed up here.

So first of all, we'll have a register.

I'll walk you through what these registers

and everything's are.

Another one is handle a submit.

Sub submit.

This will obviously be submit handler.

We'll be writing our code for this one.

There's interesting one which is watch.

I'll walk you through.

This is the most important thing

and very interesting thing in the use forms as well.

We'll be also having a set value

and we'll also have a control.

I'll walk you through all of this, don't worry.

And we'll have get values.

Okay, quite a lot of stuff that we have.

Now let's learn and understand them one by one

how these things are being managed or being done.

Okay, so this is use hook form.

Okay, this is where it ends.

All right, let's go one by one

how things are going to unwrap.

First, let's focus on writing the logic part

and then one by one we'll be focusing on building

the UI part of the app as well.

Okay, so first of all, let's grab navigate

from the hook, use navigate, just like that.

Right now it does nothing, but we have an option.

And then we have user data.

How we are going to grab the user data,

that's exactly why we have use selector.

Selector will give me a state just like that.

And we can just extract the data by saying

state dot auth dot user data.

All right, so my user data is now in the user data field.

There are a couple of things I need.

For example, I need to have a submit action as well.

So people will be submitting the form.

We'll create an async form for that.

And it will give us the data.

Right now we are not doing anything in that.

We will come back onto this one and figure it out.

The most important part is the slug.

So the way in case you saw the application

when I was showing you the demo,

the slug is a very interesting thing.

We actually are transforming the title into the slug.

So everything in the title is being converted

into the lowercase, we are trimming the spaces

and spaces are being converted into dashes,

rest everything are ignored.

So the way how I did it is, let me show you that.

It's actually just a method slug transform.

And we'll be using a use callback to optimize it.

Otherwise it will be keep on wasting the resource.

Either if in case you don't want to use the use callback,

that's totally fine, by the way.

Okay, so I did a, took a help of a little bit of the chat

GPT, I'll show you where I took that.

First of all, the way how we actually use that,

you cannot directly actually go ahead and monitor

or get any values from it.

So we have to actually grab a value out of it.

So notice here, I'll be controlling these set values

and get values.

I'll walk you through that as well in just a minute.

We'll be holding that part.

All right, so we're designing this slug transform.

And what's this doing is anybody can call this method.

The only thing is you have to pass me a value.

What is this value?

It's nothing, it's just the value in the current form

that you're using, just pass me on that

and I'll extract the value.

So I'll walk you through, don't worry, in a minute,

you'll understand everything of it.

I'll say if the value is there

and the type of value we need is a specific one,

if the type of value is string, then only we can proceed.

If that is the case, if we are having that,

then we can simply go ahead and return a value out of it.

So I'll just move it to the next line

and then I'll come back and put it into this one later on.

So what we can do is we can return a value

and we can provide a couple of methods on this one.

So this value can have a method of .trim.

First of all, let's do that.

Once we are done with that,

let's convert everything to lowercase.

So we'll use to lowercase, all right.

And then we'll be using a simple regex

to replace some of the stuff.

And this is the regex part

where I took a help of a little bit of chat GPT.

Otherwise I used to use a website regexr,

but this time I took a help from a chat GPT.

So we'll say replace, there we go.

And in this replace, I'll provide what value

I'm looking up for, that's the regex value.

And the second parameter is what to replace with.

And I'll just use the dash.

So what to replace with, this is something

that I grabbed actually directly for chat GPT.

Put up a prompt that I want a value

that converts everything, spaces and everything

that selects everything.

So I'm just saying that, hey, this is a negate by the way.

Don't select lowercase, uppercase, any digits,

or any spaces, rest everything are converted into this one.

And then optionally what you can do in case,

although it does the job,

but I found in some of the edge cases

it was still bothering me.

So I didn't found out any particular solution as of now.

So I just went into replace.

And I wrote another simple query,

which is a basic regex by the way.

It simply goes ahead and say,

a little bit itchy throat.

So it simply goes ahead and say that, hey,

I want to select all the spaces.

So slash S is for the spaces.

And I want to look at for the globally.

And then just want to just double short B, it converted.

Although in most cases I've found

that this alone works nicely,

but in some cases this was problematic.

So I just wanted to make sure that at the final end,

I'm just replacing all the spaces with the dash

and I'm ignoring all these digits

and lowercase A to Z, uppercase A to Z and slashes.

I'm not really that great or good into these regex.

I accept that, but hey, this works fine.

So there we go.

So we are returning the value and that's it.

That's your slug transform.

That is all it takes.

Now we also need to pass on a dependency array

onto this one.

We don't have any dependency,

but optimize this as much as possible.

Okay, so this is my slug transform that we have.

Okay, now you might be wondering that,

hey, that's great, we have slug transform,

but we want it to run as soon as somebody types something

into the title form.

How can I do that?

That's an interesting one actually.

You cannot do that directly

if you are using any of the React

or you have to monitor a lot of things.

But if you look at this one,

there is a component being given to you that is watch.

And what it says is this method will watch specified inputs

and return their values.

So not only it can watch my input in the name field,

it can also return me that value.

So I can use this.

And where can I use this or how can I use this?

Really, really simple.

Let me walk you through with that as well.

I can use actually it inside the use effect hook.

Oh, that's interesting.

So I'll just say react dot use effect.

There we go.

And this is our callback.

And looks like just use a callback like this

and we need a dependency array.

Okay, first of all, let's worry about the dependency array.

On what fields this should be dependent.

First of all, we'll obviously use watch, that's the one.

Also keep on watching onto the slug transform.

If it changes a little bit,

also I want to render, re-render the things.

And also the set value.

Now you might be wondering, what are these set values?

Can you explain that a little bit?

Because you're using this set values, get values

and quite a number of things.

These are actually coming up from the use form itself.

When we're using use form,

you don't need to create the states.

That is the one advantage.

I'll show you how these are useful

when we'll be designing the input field itself,

then it will get much more clear.

But the whole idea is you don't want to create

thousand different states or variables.

We can just use it directly like that.

I'll show you that, don't you worry?

Okay, so the dependency array part is done.

Now let's go into the use effect, this one.

Now here's the interesting thing.

How do we use this watch?

Really simple.

You just simply go ahead and use a watch just like this.

This watch gives you a callback and you can provide the value.

By the way, these value are all the values

that you can have in the form itself.

These are the values.

And out of that, I'm looking up for one value,

which is name.

So watch out, out of all these values,

the fields that you have, watch out the name for me.

And once you're here, let's go ahead and have a callback.

Just like this.

And there we go.

Now, what do you want to do?

So if the name is title,

I haven't created this yet, but I'll do that very soon.

If the name of the object, because as you can see,

the values are having so many properties,

title, slug, and all of these ones.

If the value is name, that means the name of the post itself

is the title, then only we want to run it.

So what do you want to do?

In that case, I want to use a set value.

So again, set value can be used not just for setting

one value, but in any field itself.

So set value is here.

Now in the set value, what do I want to use?

Set value in what field?

You have provided me number of fields here.

I haven't given them yet, but there will be many.

As you can just have input fields,

all of them are governed by the use form.

I just want to set one field, which is my slug.

So I'll provide you slug like this.

There we go.

How do you want to set it?

I want to set it by using the slug transform method.

I'll provide you the value dot title.

Okay, once I give you the title,

that means that will act as a value for you.

And you can just use that value,

then run all of this operation.

And since you returned me that,

I'll just use that to set the value.

A couple of more fields and parameters

you want to provide in here is should validate

because there are ways to provide a validation

inside the use form using the joey and other libraries.

We are not doing that as of now.

It's already too much.

We'll just use should validate as true.

So all our basic validations will kick in.

We don't want to go too much in depth of that.

All right, why is it bothering?

Title may not exist.

Yeah, it doesn't exist as of now,

but it will vary soon in the future.

Quite a lot of intense work that we have done.

And by the way, we haven't worked on submit yet.

We'll do that.

But first, I think now it's time to get more clarity

because these things will keep on adding to the confusion.

So let me just go ahead and render,

provide a render here so that you can understand that.

All right, so we'll just say, okay, let's minimize this.

Post form, looks good.

Here we should be returning the render element.

Return, what do you want to return?

I want to simply return a form.

Okay, this form is not going to have any action,

but rather on submit.

What do you want to do?

I want to use handle submit in that case.

Okay, handle submit should not be used directly like this,

because if you're using a use form,

the handle submit should be used from the use form.

This is the handle submit,

but actually it doesn't magically knows

what to do with the data.

So this is going to be the method

which is actually going to submit the data.

The way how you do it is a little bit weird,

but this is a method,

and in this you pass on another method.

So yeah, higher order functions, JavaScript at its peak.

Yeah, this is how the React hook form,

but don't worry if you'll watch these videos couple of times,

you will be used to with the React hook forms.

Very powerful, very useful.

Okay, let's go back and use some of the class names

to make it beautiful.

Flex, and this one is going to be flex wrap.

All right.

Okay, next up is the most interesting part

after the div of course.

So we'll have a div, we'll have a class name,

nothing much, we want to use the width of two by three,

and we'll be using padding on x-axis of two, that's it.

Okay, now comes the interesting part

is we'll be designing our first input.

Notice here, I'm using the input field

that I designed earlier, that's it.

But how we are controlling this input field,

that is the most important part.

First of all, let's pass on a label

which we designed as a prop into this input.

We'll be calling this one as simple title.

All right.

Placeholder, why are no suggestions coming in?

Oh, these are props, my bad.

Placeholder, oh, suggestions are not coming

because this is not a regular HTML form,

this is my custom component,

that's why suggestions are not coming in.

And we'll say title, we will be having a class name

of margin bottom of four, there we go.

Okay, now comes up the part

where we actually use the use forms.

Let me show you that, let me take you onto the website.

So this is the register and the register and whatnot,

use form, let's go ahead and use that.

So if there is any example of the forms

that would help us to understand this so much better.

Okay, get started, and here it is.

Okay, so how, oh, this is the one that I wanted to show you.

So whenever you're using any input,

this is the one which we discussed,

handle, submit, and on submit, exactly like that.

But when you're actually using any input field,

this is the way how you actually monitor or govern that.

Notice here, register your input into hooks,

so we have to explicitly register these,

each input inside the hooks

so that they are available as values

by invoking the register function.

So we have to actually use this JavaScript,

then have to extract or we can say de-structure the register

and then provide that,

hey, this is the example that I'm using.

So yeah, this is the one.

Let me go back onto the code part.

So this is where we start our JavaScript.

We simply say register, there we go.

This register is a method, that's how we register it.

We are gonna call this one as title.

Now it is registered as a title

and we can provide more fields like required.

There's a lot more that you can do,

but we'll just go with the required as true.

This is the part.

Now notice here, now this input field is registered as title.

So I'll go back and notice here when I say value

and the name is title because every input field has a name

and I gave it a name of title.

Now, this will be monitored here.

So wherever you pass on the value inside this

into this use effect, it will keep on watching the values.

If the name is a title, which it is,

then only the set value will here.

And again, watch will be responsible

for continuously watching or monitoring this input field.

Very interesting.

So much difficult to do with the core,

but this is much, much easier.

Okay, now let's have another input field,

which is slug, interesting one.

Input, self-closing, just like that.

Okay, let's do one by one.

First of all, label.

That label is going to be slug

and the space colon, something like that.

And then we'll be having placeholder.

Placeholder is going to be slug as well.

And then we have class names, nothing much.

Margin bottom of four, good enough.

Okay, now let's come up onto the part

where we registered it into the use form.

How do we do that?

We first of all, start our JavaScript, register,

just like that, inside the register,

we name it as slug, okay?

And what should happen?

How this slug should actually work?

That automatically is being taken care by the watch itself.

So I just go ahead and say this is required as true.

All right, so this should be there.

Okay, one more thing that we can do here is

that we can actually have this input

as slug transform as well.

So let me just go ahead and work with that.

So on input, what do we want to do?

That's interesting one.

Okay, let's start our JavaScript first.

We will capture an event onto this one.

And then we'll just go like this, curly braces,

just like that.

So I'll just go ahead and use set values

because just because you have used the slug,

remember, this slug is just returning the value.

It's not doing anything, it just says set values.

It's just returning everything to set values.

But there is nothing we have said

that what should be the value inside it?

This is registering, giving the values,

but we haven't said how to take the values back

into this form and fill it up.

That's what we are taking care of right now.

So set value.

Now we'll say that, hey, I'll set the value

and my field name is slug, okay?

And how do I get these values?

So use the slug transform here.

And then we'll be, in order to use the slug transform,

we have to provide a value, okay?

What we'll do is we'll say e.current target.value.

And that's it.

And we'll simply say should validate,

and we'll be saying true.

Let me walk you through one more time.

Okay, notice here, right now we are not actually

exporting the values.

This is where we have done already this part.

But now this input field is going to set some values into it

and the setting of the value is going to happen

via this on input only.

That's the case.

In the on input, we are saying that, hey,

as soon as some inputs are being put into this input field,

use the set value, which is given to us as a hook

inside this hook, just a second.

And here it is.

So this was given to us.

So notice here, we are not using thousands of set values

or set field, set input field, set slug, get slug.

No, we just use one thing, which is set value,

and we use get values.

To get any values out of any field,

we just provide the name of that.

To set any value in any of these fields,

we just use one hook, which is set value.

That is the advantage.

Just two of these methods, set values, get values.

And you can actually set and get values

from pretty much any field at all.

That is what makes me like, wow, this is too much

how we are actually using this.

All right.

So now we have the set values.

We actually use the set values here as well to provide that.

But here we are actually using the set values

on this particular input field.

All right, quite an interesting one.

Now let's use another one, which is our RTE.

So that is easy one.

We have already worked onto this one.

So RTE could be self-closing, just like that.

Interesting.

Oh, we need to get out of it.

RTE, self-closing, just like that.

Pass on a couple of values.

First of all, label.

The label is going to be content, colon, just like that.

We need to provide a name to this one.

And the name is going to be just like that.

And we'll say content.

And then we have to provide a control.

And we'll say control, just like that.

Control, again, is given to us from here.

Notice here, we got the control.

This is exactly specifically designed

to take control of the input fields, which

are outside or third party inputs.

And then we simply have some of the default values.

If you have, give them.

But right now, the default value is only for one thing,

which is get values.

Remember, I told you, get values.

So if you want to get values from any field, just like that,

let's call this one as content.

Now imagine, if you have to deal up with these many forms,

how many states you would be designing?

So easy.

OK, this value is all done.

So now we'll close this div, which

is the first portion of it.

Now we need to go in the one third part of this one.

And we'll go with the class name on the right part of it.

So we'll just say 1 by 3.

And we'll say, fix dash 2.

All right.

And in here, we are having two fields.

One is the input field for the images.

And another one is simply the field,

which is just saying, is it active?

Is it inactive?

Something like that.

So that's basic.

OK, let's start with the input.

And inside the input, it could be self-closing.

OK, label, featured image.

And the type is going to be changed to file, file selector.

And the class name is going to be margin bottom dash 4.

Class name margin bottom dash 4.

All right, what do you want to accept?

That's the idea.

We can pass on as many props as we want.

So what do we want to accept?

We want to accept image, which is PNG.

We also want to image, which is JPGR.

We also want to accept image, which is JPG.

If you have more, you can just provide

more of these acceptance fields.

Basic HTML, nothing more in there.

Then we have to register this field as well.

So let's go ahead and do that, dot dot dot register.

And this field will be known as image in the registration

field.

Again, basic required is true.

Required, that's going to be true.

I hope you notice the difference in here as well.

All the fields are easily being registered in here.

So this is just register.

This is also just register.

Only difference is when we don't have a control on that.

Then we pass on the control to get the values from it

automatically.

Otherwise, the rest of the fields

are just very straightforward.

Register, register, just like that.

OK, we can actually have it as required as true.

But we can just simply say, if the post is there,

then we don't want it.

So if post is no post, just like that.

OK, once we are done with this, then

depends on the post, whether we are going to actually get

a file preview or not, just like that.

So let's also try that.

So we'll say, if the post is there, then only we'll

get a file preview.

So we'll just go like that.

And we'll say, inside this div, we'll have a class name.

We'll say width is going to be full inside in here.

And margin bottom is going to be 4.

And inside this div, we'll be having an image.

The source of the image, that is where things get interesting.

We'll be using app write service, get file preview.

And pass on this post dot featured image.

Let's pass on that.

If that will come up, if post is there,

we will obviously get the featured image.

And in the alt, let's use the title.

Post dot title.

We should be, technically, we don't

need to use a question mark here because we're already

checking it up here.

So that is good enough.

I think that's good.

Let's add a class name here.

Let's use a class name.

And that should be rounded.

Dash l g.

There we go.

All right.

So this is the case when the post and featured image is

there.

Now we need to have to work with one more thing.

We need to select the options for the user as well.

Quite a lot.

But this is what happens when you design complex applications.

We have a select field.

We can use it as self-closing.

All right.

Move it up here.

Let's provide the options.

That's the first parameter we have to pass on.

The options is going to be an array.

So let's pass on an array.

The first value is active.

The second value is inactive.

That's it.

That's your option.

The label is going to be status.

And the class name.

We just need some margin from bottom in all of these cases.

And last but not the least is register it

into the React form, React hook form, dot dot dot, register.

And we want to register it with the status.

Register it.

And now let's provide.

This is very optional.

Required is going to be true.

There we go.

That's it.

So select form is required.

Now let's go ahead and use a button to submit it.

OK.

So inside the div, let's keep it inside the div itself,

we'll be using a button.

We'll be using our own button.

So there we go.

OK.

This is the button that we have.

And inside this button, we can have childrens.

That's how we designed it.

So if the post is there, then we'll

call this button as update.

If the post is not there, then we'll

call it one as create or submit, whatever you like.

All right.

So this is the button.

And inside the button, we can pass on more values.

Like type of the button is going to be submit.

And what else?

Background color.

BG color.

These are the properties which we have given.

So let's also use JavaScript here.

If the post is there, then we'll be using BG green.

So we'll say BG dash green suggestions, please.

No suggestions.

BG dash green dash 500.

Otherwise, we'll just say undefined.

All right.

We can use another color as well, by the way.

And one more thing we can just provide in here

is class name with dash full.

All right.

So this is the form that we have.

Again, we have studied a lot into this one.

I totally, totally understand that piece, that part.

But there is one more thing still remaining,

which is the easy one, by the way.

We haven't yet submitted anything.

The submission part is definitely easiest

among the all.

But definitely, this is something

you need to understand one by one how things are going up.

Now, if the post is there, then obviously based on this,

we'll be getting the value.

So first of all, we have all the data.

And by the way, all the data now we have,

as soon as you submit the form, the values are being called

and we have the data.

We need to extract the data from a couple of resources.

Let me show you that.

It's easier to actually write the code than to explain that.

So if the post is there, OK.

If post is there, then we have to do something.

Otherwise, we have to do something else.

OK.

So post was there already.

OK.

So first, let's extract the file.

Let's get the file.

File will be coming up from the data.

Everything is stored inside the data.

And we'll be having an image.

And we'll be extracting this.

OK.

Now, what we're going to do is we

are going to do something if we find the file.

Otherwise, we'll be just putting a null inside this one.

Rest of the checking automatically

can be done by the app write itself.

If it is there, then we want to use an app write service

to upload the file.

So let's go ahead and await this because this service takes

time.

And we're going to use app write service.

We are going to use upload file.

And in the upload file, we just pass on this data.image.

And obviously, the path, which is in the first field.

OK.

So that's the part one.

And this is the part.

Now, again, we need to continue further if the file is there.

If the file is there, then let's go ahead and delete this.

If the file is there, then we are

going to use app write service.delete file

because we want to delete the previous file.

Previous file is inside still in the post.

So we'll say post.featured image.

If file is there, go ahead and delete that.

You can also go ahead and use an await here as well,

if you wish.

But I think it's good enough.

It can do its job behind the scene as well.

Depends on when we do more thorough checking,

we can actually go ahead and work on with this.

Now, let's call this one as DB post.

And what we want to do is await app write service.

And this one is going to be responsible for updating

the post.

For updating the post, provide me the ID first.

So that can be extracted from post.dollarID.

There we go.

And then provide me all the data that you have.

OK, what data do you have?

I can just extract everything from the data itself.

And one thing that you have to give me

is the featured image to overwrite that featured image

because we just uploaded that.

That will be coming up from file if we have that.

If we have the file, then give it file.dollarID.

Otherwise, if you don't have it, just give me undefined

so that if it is compulsory, app write can throw me an error.

Now, continuing further, in this case,

if the post was updated successfully,

then let's redirect the user.

So let's go ahead and work with that.

If we have the DB post, if that's the case,

we have the DB post, then let's use the navigate,

which we created from use navigate.

And we'll say go to slash post slash the slug of it, which

we can get from like this.

And we'll be having not the post, DB post, the newer one,

DB post.

And we'll get a dot dollar ID.

There we go.

Nice and easy.

Keep on talking, keep on writing the code.

That makes life so much easier.

OK, this is the part where we have the post.

What about when we don't have the post?

In that case, we'll go with the else part.

That means we are creating a fresh post.

So let's upload the file first.

Go like this.

File, await, no, question.

Like this, await, and then app write service.

Please help me to upload a file.

OK, how do we upload a file?

By extracting it from data dot data dot image.

And out of that image, the first value, which is the path,

once you have uploaded that, then what should I do next?

If I have the file, let's get that field properly set.

Let's use this.

If I have file, then what I want to do

is I want to create a field ID, a file ID, sorry, field ID,

file ID as file dot dollar ID.

And then inside this data that I have access,

I will create a new field, which is featured image, which

will have this one, file ID.

Could have done that in one line as well,

but I'm more comfortable with this one.

Now that you have all the data, you

have also the access to featured image, which

you uploaded first.

Let's create a new post.

So obviously, I'll say await app write service dot create post.

Provide me all the data that you have.

So first of all, let's give it all the data

by destructuring it, and then also give it a user ID.

A user ID can be given to you by simply user data.

Remember, we have access to it in every component.

And we can actually have a user data dot dollar ID.

That's how you grab the ID.

OK, now once you have done that, let's

store that into a variable.

Let's call this one as DB post.

OK, once this is done, that means DB post is created.

Now inside this, I want to check for another condition.

If by this time the DB post is being created, let's navigate.

Navigate, where do you want to navigate to?

We want to navigate to slash post to the newer.

There's only one post ID that we have, which is DB DB post.

We need to use variables.

We need to have DB post.

And we'll extract the ID out of it.

All right, so this is not too much,

but you need to be very careful with what you are doing.

That's why I always say don't code with the mouth shut.

Always code by thinking of it.

You can do one by one step by step all these process.

This is almost kind of a standard practice.

We always upload the files first.

We usually create helpers for them, upload the file,

get back the URL of the file, set your object properly,

and then use helper files to upload the file,

create the files, create the post, whatever you want to do.

Quite an intensive video in itself, I would say that.

And definitely took us a little bit while, well over one hour

onto this video, but I think it's good enough.

And that's majorly it, what we wanted to do.

Now it's time that we actually assemble

all of our components and start debugging them one by one.

Obviously there are mistakes in it,

but we'll figure them out.

Let's catch up in the next video.

Hey there everyone, Hithai Sheer,

back again with another video.

And in this video, we're going to continue our journey.

We'll create two more components,

which is sign up and the login.

Now this could be done either in the pages

or in the component, both are absolutely correct.

I prefer to do it in the component,

so that in the page, I just have to load one component

and that's it, it brings all the functionality,

but it's totally your choice.

Maybe you want to just keep the components

as purely just the UI part.

I want to keep it as both the logic and the UI part,

totally your decision.

Now, once we are done with the login and sign up,

then we'll be working on the posts

because there are many posts,

which will be available in the post page.

So basically we'll be making a query,

we'll get the data and we'll be just passing on

to another component so that it can loop through it.

Let me just share the screen, it will be much more easier.

Hope you recovered well from the last video,

it was quite intense.

And that video requires you to spend at least one or two day

with the documentation of React hook form,

understand it better or probably repeat that,

that always helps to understand code more.

The more you see the code,

the more you read the documentation,

it gets much more clear with that.

Over the time, things requires reputations,

so that's why I highly, highly recommend

that once you are done with this series,

go it again for one more time, that will surely help you.

Let me share the screen and let me walk you through

that how and where we are going to work through.

So this is the docs, I still read it to this day

and there's always something more interesting

going on in here.

Now, one thing that we are not going to focus

in this video is this part.

We have already seen that how we can register

any input field with the React hook form

by this method and then everything is available in the data

and that's why we have this data available.

So register form states and watch and handle submit

and whatnot, this is the data.

So this is what we are having.

All right, so we'll not worry on that part,

rest of the part we will walk through again.

Okay, so first of all, let's go into components,

right click and new and this will be our first,

let's start with the signup.

Come on, write that, signup.jsx.

Okay, so what goes into the signup?

First of all, let's do rfce to get

a React functional component.

Now in this one, since this is a signup,

we definitely 100% requires the auth service.

So let's go ahead and grab the auth service.

Auth service and that obviously is going to come

from one directory back inside the app right

and inside the auth.

So that's our app service.

We'll also be using some of the links in this one,

we'll navigate the user forcefully once this is done,

signup will either redirect him into the application

or to login page, but that is going to be required.

Let's go ahead and grab link and navigate,

rather use navigate, use navigate.

Come on, navigate.

And these are going to come from React Router Dom.

All right, we also will be using React, that is obvious.

We will be managing some of the states as well.

I'll walk you through not too much states

because we'll be dependent majorly on the React hook form,

but still there is a place we'll be using it.

I'll walk you through with that.

All right, so this is the all and obviously we'll be needing

some of the buttons and all these basic components.

So let's go ahead and grab a button

and that button is going to come up from,

we need to go in the same and the button.jsx.

We need input and logo as well.

So import, input, come on.

Input from the same current directory that we are.

Just grab input and the logo as well.

Although there's nothing in our logo,

but still we'll just import this.

Logo from dot slash logo.

All right, so components are there

and obviously we'll be requesting some of the features.

We'll be using use form.

So let's bring them as well.

First one, use form because I'll be using

this left and right, use form.

And that is going to come up from React hook form.

And a little bit Redux also is required.

Mainly use dispatch because I'll be dispatching

some of the actions.

Dispatch and that dispatch is from React Redux.

All right, quite a lot of stuff that we have imported,

but that's good, we got this one.

Now let's see how we're going to do that.

First of all, the easiest part is to use the use navigate.

So I think let's do that.

Easy part, I always love to do first, navigate.

And that simply says, use navigate.

There we go, that's it, easy part done.

Let's create a state for the errors.

And that's the reason why we are using use a state.

Because right now the form, all the form

has the capability to handle the errors as well.

There are validations and whatnot

and all of that, like there is a specific dedicated

how to handle the errors as well.

But I think I'll handle them better in the state.

So I'll just use the state in this one.

Error and that will be set, error.

And for this, we'll be using use state.

And by default, there will be nothing, no errors at all.

We'll be also using the dispatch.

So easy part, just like navigate,

let's go ahead and use dispatch.

And that will be coming up from use dispatch.

So that whenever we want, we can just now use it.

All right, now the next thing is

that we obviously will be registering the user.

So for registering the user, we need to use the use form.

So I'll just go ahead and say const

and we'll be saying register.

And then there is handle submit.

And this will be use form.

All right, I hope now by this point,

you understand the part that register is something

which is what we use for dot dot dot register.

I guess that one.

And handle submit is the method by which we actually pass up.

So anytime you use something like this handle submit,

anytime you use the form, the React hook form,

you cannot just directly pass on on submit.

You have to have to go through with the handle submit,

which further takes a function of on submit.

And that's how basically it controls the entire form.

So keep that in mind.

Really sometimes when you create this,

it's easy to actually forget that.

Okay, so this is the basic.

Now how we're going to create the user

because handle submit requires a method to be passed on.

We'll call this one as create.

You can call this one as create user,

create user on app, right?

Totally your choice how you do it.

I'm gonna call this one as simply create, create.

And this one will be a sync operation.

And this one is going to take data.

Data obviously will come from the React hook forms.

There we go.

Now, first and foremost that what we're going to do,

as soon as somebody clicks that,

we are going to use set error to set the error

or to reset the error basically to onto the initial state.

Now let's go ahead and use a try catch.

The catch part is easy.

The catch part, we can just go ahead and say set error.

We can use the state and we can say, hey, error,

give me your message.

That's it, super easy to handle in the try part.

In the try part, we'll await obviously

because that takes time.

And we are going to use a service from the app, right?

So let's call this one as auth service.

That's what we called it.

And from this, we are going to use the create account

and we'll be passing on the data.

That's it.

Now let's hold this into a variable.

Let's call this one as const user data.

Once this is completed, then if we have the user data,

then we can actually invoke a dispatch

to save all of this data in our Redux.

Otherwise, the error is there.

So let's validate this.

If we have user data, then we can simply go ahead and say,

let's go ahead and get the current user.

How can we get the current user?

It's pretty simple actually.

You can use auth service again.

And from this, you can run the method of get current user

just like this.

And you will be having the access

to whoever is the current user.

This operation might take some time.

So let's go ahead and use an await.

In fact, I missed a couple of places await.

And if you find them,

just go ahead and add await for that.

All of the upright operations should be awaited.

Okay, let's go ahead and say further down.

We can call this one as user data, no problem.

We are inside the if block.

Okay, now if we have user data,

if we have user data at this point,

which is our current user,

we'll go ahead and fire up a dispatch.

I don't think we need this one.

We'll just do it a single line.

We'll say dispatch, what event do you want to dispatch?

I want to dispatch a login event.

And the login event is going to be coming up with the data.

So I'll just go ahead and say user data.

So that's it.

Fixing it up all in the user data.

Did we brought in the login?

I think we didn't brought the login.

Doesn't look like, let's bring the login.

Import, and we want to bring in the login.

Come on, write that.

Oh, looks like this is freezing.

Nope.

Oh, now it's working.

Keyboards.

And we will bring this up from,

let's go one directory back inside the store,

inside the auth slice.

This is where we want to bring the login.

And this is exactly the login that we are using in here.

Once this is all done,

let's force the user to navigate on the homepage.

Maybe if you want to navigate to some other place,

that's up to you.

I'll use navigate.

Where do you want to navigate?

I'll just go ahead and say navigate to slash.

All right, not a big deal.

That's all what we wanted to do for this part.

Now for this return part,

I'll just copy and paste and give you the entire code

because there is nothing more we are learning in this one.

So I'll just go ahead and copy paste.

All we are doing in this one is some flex box

and classes and all of that.

The important part we have already discussed

that whenever we want to have these input fields,

how to actually link them up.

So notice here, this is how we are linking them up.

We are saying dot dot dot register

and then the name field is being registered.

The email field is getting registered.

The password field is getting registered

and then a simple button which just says create account.

And once we have this one,

this form actually has, so notice here,

we have the errors being handled here at this point.

And notice here, the form is,

as soon as the form is being submitted,

we are using handle submit,

which comes from the React hook form

and we use the method create here.

And that's how we designed it.

The login is exactly same, almost exactly same.

So that would be a good exercise for you to repeat.

In case if you wish, you can pause the video right here

and try this out.

Again, it's not about all the time writing the live code.

It's also about how you understand the code

which is already written.

That's also a good practice.

So we just did that.

All right, so signup is ready almost as component.

Now we can go ahead and work on with another one,

which is the login.

Exactly same, nothing much to be differentiated there.

And let's call this one as login.jsx.

Okay, so rfce.

And again, this return part will be copying and pasting,

so nothing much more than that.

Let's go ahead and borrow some stuff

from the signup as well.

Okay, let's in fact borrow everything

because it's almost exactly same.

And let's go ahead and work on with this one.

Okay, instead of the login,

this one is actually login,

so we're using the login same.

Dispatch, we are going to require,

we are going to require auth service as well.

Button inputs, pretty much all of them

are going to be using just like this.

And we're going to use login here,

but this login might create some of the issues here.

So let's just rename this one as auth login.

Okay, makes the life a little bit easier, not much.

But I think the rest of them are pretty good

and pretty okay.

All right, let's see how we're going to deal with that.

First, the easy parts, let's go ahead and do that.

Const, navigate.

Navigate, that's going to become a from use.

Navigate, there we go, this is ready.

We need dispatch as well.

So we're going to say dispatch,

and that's going to come up from use.

Dispatch, just like that, easy part.

Then we need use form, so we'll be needing register,

of course, that always goes.

And we need to have handle, submit.

And that's going to come up from use form.

We have done that many times now.

Okay, what else?

We will be managing the errors,

so let's go ahead and use a state for that.

Error, set, error.

And that's going to come up from use state,

just like that.

By default, the errors are going to be empty.

Now we need to work on a method which says login.

How do we handle the login part?

Exactly same, nothing much different or difficult.

Let's go ahead and say const login.

We can say to login,

because now we have renamed this one as auth login.

In case you wish to call something else,

that's totally on you.

We'll say async, and this is going to say,

hey, give me all the data.

Call back just like this.

And first step is to set the error.

Very repetitive, very repetitive.

Let's go ahead and fire up a try catch.

The catch part is easy, as you all know.

We can just simply go ahead and set error,

and we'll say error.message.

And you might be thinking a pattern here, repetitive.

That's exactly what I want in the course itself,

that, hey, things are repeated and you can try them.

And once you build enough application,

you will figure out, I can build anything.

These are exactly the same thing.

It's just the way how we handle the data

and how we get that.

So what we're going to call this one and this one,

first of all, let's go ahead and use await.

And the await is going to utilize an auth service.

There we go, from the auth service,

we are going to use a method of login,

and we'll be providing all the data that you have.

Let's call this one as session.

Session, there we go.

Feel free to call it anything.

It doesn't really mean that you have to call it session.

I'm just saying that, hey, this is session.

Now, if we have the session or any data session,

if we have the session,

now, can I get a current user from the auth service?

Because if there is a session, the login was successful.

Technically, there should be a current user

that I'm able to grab.

So let's go ahead and say await auth service,

come on, not that, auth service dot get current user.

There we go.

If I get that and I hold that into a variable,

call this one as user data,

feel free to call it whatever you like.

If I have user data, then I can dispatch a login action.

So I can just go ahead and say,

if I have user data, then we can dispatch

and I can do that in one line.

I can go ahead and say dispatch.

What do you want to dispatch?

You might be thinking we'll be dispatched login,

but remember, we actually login

is now being known as auth login.

So just go ahead and call this one as auth login.

And auth login is a method

which we are going to pass on user data.

That's it.

And user data is being passed on, so that's all good.

Now let's redirect the user as well, navigate.

Where do you want to navigate?

Probably on slash, that's it.

So there we go, told you it's not really difficult.

At first, it looks difficult, but it is not very much.

And in the login page,

since we are using some of the tailwinds and other features,

that's why I'm just copy-pasting.

Otherwise, if you see that,

there is nothing big that we are doing in here.

So this whole thing at this point is nothing.

It's just hard-coded values, just HTML and CSS.

Even this portion till here, till this portion,

everything is just hard-coded CSS, nothing more.

Here we are handling the error.

If the error is present,

we are displaying the error in some red squiggly lines,

just like that.

And this is the form, this is the important part,

which we discussed in the last video quite a lot.

And we saw that how input could be registered

or could be binded with the use form

using this piece of code, which is nothing,

dot, dot, dot, register.

And we named this field as email required as true.

That is it, that is it.

This one is password field required, that's it.

And as soon as the form is submitted,

we have this form here.

We use handle submit, which comes from the React hook form.

We provide that method who is handling it actually.

And that's it, that's it.

Our component and everything is all done.

Now, one more thing that we are going to do in this video

is now moving on to the pages part,

because now almost all the components,

we have discussed that what we wanted to build.

Now let's work with the pages one by one.

And again, for the login and the signup page,

there is nothing, we'll be just importing the values,

but there is one page, which is post.

This is something interesting.

In the post, what we're going to do is,

we're going to grab some data,

and then we are going to simply kind of iterate

over the values, and there's a lot of stuff

that needs to go into this post as a page.

Let me show you one by one how we are dealing with this

and how we are working with this.

All right, so the reason why this one post page

that you see up there, yeah, there, is important,

because this requires a little bit more of knowledge

of how we are building this application.

The way how we are building our application

is we upload an image, no problem at all.

Then we use an editor, which we brought from TinyMCE.

That editor allows us to have an ordered list,

ordered list, and bold, italics, colors, all these things,

and save them in the database.

Now how it saves in the database?

It actually writes simple HTML with some inline elements

and inline style sheets, and just store that as a text

inside your database, that's how it works.

In fact, every single element that you see around,

which provides you VisiVic,

that's how they work and they save.

But the problem is that if you bring in just the pure HTML,

you cannot display the pure HTML in any React component.

So we need some more work to be done,

and in fact, we need a little bit of help from this.

So this is the package that is going to help,

which is a HTML React parser.

It's published three days ago, but it's pretty popular.

You can see the weekly downloads, it's pretty crazy.

What it does is now you can actually use a method parse

once you actually import that and install that.

And this is going to allow you to have HTML code,

and in fact, inline CSS as well.

And it works like this, react.createElement,

in case you saw the previous videos

where we discussed how React works internally,

how JSX works internally.

So this actually breaks down everything

and helps you to just work with that.

I found it really, really useful,

so that's why we are going to install this.

Let's go ahead and copy this and work with this.

And this will be super helpful for us in the post as well.

Let me go back.

And first, let's go ahead and install this.

Probably I'm not in the proper folder.

Let's go ahead and open up.

Okay.

Let's verify this one more time

that are we having installation properly or not?

So we have React, HTML React parser.

That's exactly what we want.

Now coming back onto the post page,

because rest of the things are pretty comparatively easy.

The singular page, how we display the singular page,

and the concept that only if you're author of the page,

then you have the ability to edit it

or to simply have a delete functionality.

That is also a little tricky, not too much,

but little bit something that we should explore together.

So we'll be needing React.

Obviously we'll be using useEffect.

Come on, write it.

UseEffect and we'll be using useState.

All right.

We'll be needing some of the elements

from React Router as well.

So we'll be needing them from React Router DOM.

Okay.

What do we need?

We need link, we need useNavigate,

and we need useParams.

That is the most important.

What is this useParams?

It's really simple.

Anything that you see in the URL,

you can actually grab the value of it

by using the useParams.

It's super simple, super easy to work on with this one.

We'll be needing app write service.

App write service.

Come on.

App write service.

If I can write that service, there we go.

And this one is going to come up from one directory back.

We'll go into app write and we'll go into config.

Okay, what else?

We need couple of components as well,

specifically the button and the container.

Import button from one directory back

component and the button.

We'll be needing container as well.

Container and that container will come

from one directory back inside the components,

inside the container, inside that we have this container.

Pretty long name, but we have that.

Most importantly, let's have parts

that is going to come up from the newly installed

HTML React parser, and let's also have the use selector.

I usually like to have all of them as I go as I need.

I just work with them, but I know these things

are going to come handy within a minute.

So I just know let's have them.

So React Redux, all right.

If we need anything else, we can just work with that.

Now how the post actually work,

this post especially in the page.

Now, if you are in the page, first of all,

let's create a state to handle the post.

So let's go ahead and say this is my post.

This one is going to be set post.

And that is going to come up from use state.

By default, let's call it as null.

There is nothing inside it.

Then what we need is we need to extract the slug.

So we say the slug, and the slug is going to come up

from use params, that's it.

One more thing you need to understand,

the reason why we are calling this one as slug,

that is something really important and useful

for interview perspectives as well.

If you go into main.jsx, notice here,

we are calling this one up here as colon slug.

This colon slug is the reason why I'm able to grab

a slug from the use params.

So keep that in mind, super important to know.

Let's also grab the navigate.

Const, navigate, navigate.

And that's going to come from use, navigate,

just like that, super easy.

Okay, now how can I grab the user data?

Okay, because why do we need user data?

Because if you are a user and you are author,

then we'll see that do you,

should you get the delete and the edit button?

First of all, let's grab the user data.

User data, and that can come to me

by using the use selector, simple react redux,

and we'll simply say state.

State.auth.userdata.

User data.

Okay, now I have the access to user data.

Now, how can I verify that this post is written

by you or not?

Because post is also storing a user ID,

and we can extract the user ID from the user data as well,

so we can match both of them.

So let's just say if we have the post,

because post might be null.

If the post is there, let's,

and we have the user data as well, user data,

then we can do something, otherwise we'll do something.

Okay, we want to check if you have post,

if you have user data, then we want to match it,

that will be a true part,

and otherwise it will be a false part.

So we'll say this as a false.

All right, how can we verify the true part?

The true part can be verified by simply comparing them.

So let's say post is going to have a field known as user ID.

Is it equals to the user data?

Which also has a field of ID, so dot dollar ID.

So if both of them match,

we'll be getting a result of true, otherwise false.

Let's store that into a variable.

So let's call this one as is author, and there we go.

Now we are checking for the condition,

if post is present, if user data is present,

then if they matches, that's great, that's true,

otherwise it's just a false.

So now we have an access of the field

that hey, this is how it works, and all of that.

Okay, now we want to do something

a little bit more onto that.

We want to work with how the delete post will work,

because deleting is interesting, okay.

Let's write a simple method for that.

Delete post, it's actually super simple,

that's why we are handling it first.

So how does a post gets deleted?

Really simple, you just query to app write.

So app write service has a method of delete file,

not delete file, delete post, yep.

You just have to provide the post ID to it,

and I can extract this from the post dot dollar ID.

So once I actually pass it on, I can use an await here,

or if you wish, I can use a dot then, just like this.

And if I receive a status,

then I can go ahead and delete the file as well,

because remember, we are not keeping the file

at the same time.

If the post is deleted, then let's go ahead and delete this.

So I'll fire a callback.

So in this case, if I receive that,

hey, the status is there, it gives me a status,

by the way, if you'll read the docs,

once anything is deleted, it gives you back a status.

So let's check in here, if the status is there,

if status is present, then I'll go ahead and delete that.

So we'll use app right service,

and we'll say delete file,

and still you have access to this post dot,

and this time extract featured image,

and now this image will be deleted.

If you wish, you can put an await on this one,

but if it does it in the behind the scene,

I'm really okay with that, and I can just navigate.

Totally up to you how you're designing your application.

If this is really important step,

you don't want to move it before this,

you can put an await onto this one, that's also fine.

Totally up to you that how you want

to design your application.

Okay, so far it's good, but there's one more thing.

We got this slug, but we are not using this slug,

because this is a post page.

Individual post should be loaded as soon as the page,

or somebody comes to this page,

or this page loads, or this component loads.

So yes, you guessed it right,

we'll be using something known as use effect

to actually do the exact same job.

Use effect, and there we go,

we'll be having our callback,

and we need a dependency array as well.

So this will be dependent on either the slug,

there's any change, or if somebody navigates here,

so we'll be running it on the both side.

Now, how do we grab a slug?

So if the slug is present, if we have slug,

then go ahead and just query the app write.

Hey app write, give me a post, so get post,

not posts, only one,

and for that you have to provide me a slug.

Let's use promises.then.

So if you get the post, let's go ahead and use a callback,

if you get a post, what do you want to do?

So if I get the post, I'll set the post,

if post is there, then I'll go ahead and say set post,

and in the post we'll be posting a post, too many posts.

What in the else case?

If we don't get this one, so in the else part,

we can just go ahead and say, let's navigate.

Let's navigate back onto the home

because I was not able to grab that,

so there is no point of loading anything.

So that's it, pretty easy, now we were able to grab it.

So delete post is pretty nice, nothing much we have to do.

Okay, now let's go ahead and work on with this one.

So return, I don't want to return anything just like this.

I want to return only in the case of post.

If the post is there,

then let's go ahead and do something,

otherwise you can go ahead and do something else.

What something else do you want to do?

You can put a message, couldn't find the post or something,

but I'll just go ahead and do a null

because rest of the things will be taken care

by my use effect, but totally up to you.

The reason why I'm actually explaining this so much

is so that you understand the flow of the application,

not just these memorized thing,

that we have to always do this.

It's your application, how you want to design it,

how you want to handle the edge cases,

this is how things are designed.

So that's why I'm actually mentioning all this

in such a detail.

Okay, let's go up here.

What do you want to do in this case?

I'll first have a simple div,

which will be having a class of py-8.

Okay, now inside this, let's open up a container.

Container, there we go.

Now inside this container,

we'll be having a simple div with just post an image.

So I'll just have a div

and we'll be having some of the class names onto this one.

Not really much interested in the classes

or writing in front of you.

I'll just copy and paste my classes, you get that.

Now, once you're into this div,

the first thing that we want to do is display an image.

Now, how do we display an image?

That's the question.

Again, we can use our JavaScript

and use app write for getting the image.

So we can use an app write service

and we can get a file preview.

To get a file preview, we can use the post,

which I already have for this particular page.

And from this, I can use the featured image.

There we go, we got our image.

Now in the alt, let's use post title, maybe.

We can simply say post.title, there we go.

And it looks good.

We have some of the class names as well into this one.

And the class name is just rounded XL.

Rounded dash XL.

All right, so the image part is all done

and this div looks great.

Now, we also need to display the content.

So just below this div, I'll open another div,

which also has a class of W dash full

and one more class of margin bottom dash six.

All right, so this is my second div.

And in this, I'll just do two things.

I'll display the title as well as the content.

Title is easy part.

There is nothing big deal on to this.

Again, one more.

Div, let's use an H1 directly.

I'll not get a div.

H1 dot text dash to XL.

Anything else?

Font bold.

Font bold.

Now, how can I display this?

Text, super easy.

Use your JavaScript and simply say post dot title.

Okay, no big deal.

But how can I display the content?

Because content is something where we have used editor

and editor is storing all of this.

So what we're going to do is in this case,

what we're going to do is let's use a div,

which will be having a class of browser dash CSS.

These are custom classes.

You can write them as well.

But the most important thing is user JavaScript,

but not ordinarily.

You have to use a parse,

which comes from the HTML react parser.

And in this, I have to say post dot content.

There we go.

Told you it's super easy.

Everything that we are storing,

this is all thanks to this parse,

which allows me to display the HTML content

and everything that's inside there.

So all of your formatting, like bold, italic, your colors,

everything is being parsed properly.

Now, one more thing that we have to do is,

okay, this part you understand nicely,

but there's one more thing.

Now, on top of this image,

I want to show the user that,

can you actually delete this post,

or can you just have an edit button, something like this,

delete post or edit post, something like this.

So for this, we'll optionally render something.

So here is my JavaScript,

and is author will give us a true or false.

And based on this, we will display this.

So let's use this one, just goes like this.

We'll simply have a div, which has absolute dash right

dash six.

And these are classes to keep it at the very right top.

That's it.

Top dash six.

So we have this div.

Now inside this div, we'll have a simple link.

The first one is going to allow the user to update this post.

How can I update that?

Super easy, nothing too much.

I'll have the link.

Okay.

The most important part in this link is too,

because this is something which does all the magic.

So I'll use a back text where I want to go.

I want to go to slash edit dash post.

And to edit any post,

I have to provide the slug after that, that's it.

So I'll just use a slash and we'll provide an ID

just like that.

Suppose to dot dollar ID, that's it.

Now you'll be redirected to slash edit post

and edit post we haven't yet handled,

but this will be handled here in the post.

So that's it.

All we have to do is just load all the things in the data.

That's it.

So this is the post that we have grabbed.

Okay.

The next thing is let's name this button as something.

So let's call this one as inside this,

let's give it a button.

The button component that we have designed

and let's call this one as edit.

We have some classes for this one as well.

All right.

Actually not the classes.

We have some of the properties onto this one.

So I'll just paste this.

So we have the background color green

and the class name just like this.

So one part is done that how this is being actually done

in design.

Similar to this, we also have a button.

This time not the link, but we need just a button.

So I'll just copy this, move outside of the link

and we'll also keep this one.

This one is going to be a delete button.

And this button will have a simple on click.

This one is going to be red.

That's fine.

Margin right.

We don't need this into this one margin right.

We just need one thing here.

On click.

Suggestions, no suggestions.

Anyways, on click just like this

and simply run delete post.

That's it.

Delete post already is handling things up here.

So I think that is good enough.

So this is something that is worth discussing

of how things are being done,

how you are able to parse these things.

I hope that gives you a little bit of extra knowledge

of how these professional applications are designed.

And once you understand this,

you can now build anything that you want basically.

Something that's storing the code part or anything.

You can just store them in using the editors

and using the parts you can just display them.

So that is it.

Quite a long journey about this one.

Still almost like half an hour.

But I hope this has helped you to understand a lot

about how applications are designed,

how the workflow of the application works

and you are building it along with me.

I highly recommend that once you watch these videos,

try to build them on your own.

If you need help, take help from my GitHub.

Not directly from the video,

but if you feel uncomfortable even after that,

then only take help from the videos itself.

That's it for this one.

Let's catch up in the next one.

Hey there everyone.

Hittai Sheer back again with another video.

And in this video, we'll try to finish our app.

It's almost done.

We don't have anything major that we want to explain

or we want to go through along with this.

Rest of them is just importing the component,

display them, that's pretty much it.

Only couple of things are remaining,

which I'll walk you through in this video.

So let's go ahead and do that.

And probably after that,

we might need some kind of debugging,

maybe some CSS is here and there, just minus stuff.

Nothing much to be worried about.

So one final thing to walk you through

with the flow of the code is something.

So let me share the screen and walk you through with that.

So this is our screen.

So in case you did notice that we have this post

and inside this in the last video,

we created this button which says edit,

which takes you to slash edit slash slug.

So in case you want to know,

you forgot about how that works.

We have this edit post slash slug

in which the edit post is going to be the page

that will be loaded.

So if I just go ahead and click on this,

this is something that we are importing from here.

So page is edit post.

So let's go into the edit post

and see how we can actually manage that.

So as you reach to the edit post,

the first thing that should come to your mind

is that I'm getting a slug

and I can extract that slug using use params

and I can use use effect to query the app right

to bring that post.

And that's exactly what you should be doing.

So let's go ahead and grab it.

I'll walk you through with the,

usually what I do is I just go up here and start writing.

So I need a post obviously.

So let's go ahead and work with the post

and that will be set post.

And usually I rely too much on the auto import statements,

just like this.

In some cases, it doesn't work automatically.

So I hate that part.

All right.

Next thing is we need to extract the slug.

So let's go ahead and grab our slug

and that slug is going to come up from use params.

It doesn't give me.

I hate it why it's not giving me suggestions.

In most cases it does,

but today it's not really happy with me.

Okay, so we need a use params.

So how we're going to get the use params,

that's the question.

I think that's from React Router DOM.

So use params, no suggestions.

Import from React Router DOM.

Did I made a mistake?

Yes.

Use params.

Yep, now it makes sense.

Since we are here, let's also grab use navigate.

Use navigate and let's also grab it.

So navigate.

And that's going to come up from use navigate,

just like that.

Okay.

So these are the things that I have.

Now the first thing that I would love to do now

is to use the slug

and get something from app right services.

So we need to get app right services first.

All right.

Import app right service.

And that's going to come up from one directory back

inside the app right, inside the config.

Let's now use use effect.

And the use effect goes like this.

It gives me a callback, just like that.

And we have a dependency array.

All right, so what's the dependency?

Maybe if you change anything into the slug

or if you navigate from here and there,

these are my two dependency.

Now coming up onto the part where we can go with that.

Okay, so if I have a slug, then make a request.

So let's check this.

If you have a slug, then only make that request.

So app right.

And we are going to say get post one only, not the posts.

And post can be taken up by the slug.

We can use await here

or you can use .then for the promise part.

And then we'll say inside this, if you get a post,

just like this, let's go here.

Now, if we have post, let's set that post into my state.

So if I have a post,

let's go ahead and set this into set post.

Post, there we go.

If I don't have any post, so in that case,

I'll just go ahead and say navigate.

Where do you want to navigate?

Totally up to you.

I'm happy with the slash.

All right, so this is the part where it's easily.

Now this part here is even much more easy.

The reason for that is I can just bring in container

and the post form,

which I've already created as a component.

So that makes my life much more easier.

Let's bring them.

So import container and that's going to come up

from one directory back inside the component.

We have container and we have container.

And we also need the post form.

So import post form and that's going to come

from one directory back inside the components.

And we do have post form and inside that we have post form.

Post form, there we go.

And all I have to do is I can keep this stiff as it is,

if you wish, and I'll say the padding on y-axis,

let's be at six.

We don't need this and we can say wrap everything

inside the container, just like that.

And inside this we'll be having a post form

and it could be self-closing and we need to pass

on one param, which is post, which is post.

All right, so post is coming up from my state.

So that's it, told you.

After this point, almost everything is super, super easy.

Let me tell you one more thing.

What happens when you simply go ahead and do add post?

Now, I don't have to do too much of the things.

I can just go ahead and say I want to import container

and that container is going to come from one directory back

inside the components.

Container should have done an index.js there.

I'll probably leave that as an exercise for you.

There should be just one index file inside the components

and I could have bring everything here,

make my life much, much easier.

But anyways, and we do have a post form

and that's going to come from one directory back

inside the component slash post form slash post form.

And in here, I can just go and remove this.

Again, same class name padding y6.

And in here, wrap everything inside the container,

just like always.

And in here, you can just go ahead and say,

hey, I'll have a post form.

Post form, why did it brought it again?

No idea, but anyways, we'll remove this one.

Okay, so I told you it's super easy now

because the post form component that we created

in case you forgot that, it's okay.

It's totally normal to understand that you forgot that.

Remember everything is being done in here.

So submit everything is there.

We're just loading this component inside this one.

So super, super easy.

Now what happens when you actually work with the all post?

Okay, in the all post,

we'll just grab all the posts that are possible

and we'll be working with that like.

So let's first import app right service, service.

And that's going to come from one directory back

inside the app right, we need a config.

And what else do we need?

Probably that's it.

I want to have all the posts, so const posts set posts.

That's going to be use state.

And by default, it's going to be an empty array.

We want it to be tradable

because there are many posts inside that.

First thing is use effect.

Use effect, just like that, have a callback.

And there is probably nothing as a dependency array.

When you put nothing inside the dependency array,

that's also a good thing.

That means it will run only and only once

when the component mounts and that's it.

So let's go up here and as soon as the component mounts,

we'll use app right service.

We'll say get posts this time S

because we want to grab all of it.

And we'll say that, hey, we'll get all the posts.

We'll just take it in the array.

And dot them.

And if everything goes right, we'll be having the posts.

And all we have to do that, if we have posts,

if we have posts, just go ahead and use set posts

just like that.

And we'll say posts dot document.

That's a little bit part on the app right side

because the post in itself has an object or document.

It has a couple of more things.

By the way, if you wish to see more of it,

just do a console log of the post.

And then once you have the dot documents,

that actually gives you an array.

And again, by the way, I didn't vent it up

on the very first go, I had to do a console log

to understand what kind of document

is something that I'm receiving back.

And then I worked on this one.

By the way, app right does a fantastic job

in showing you what is something that you are receiving back

when you're making a query or something like that.

So fantastic job there.

But yes, I needed to do a little bit of console log there.

Now, the interesting part is

we would be needing a postcard.

So if you remember, we created this postcard

in which you pass on the ID title and featured image

and it displays that.

So we'll be using this.

So let's go ahead and bring that.

I will bring container to container.

Oh, nice suggestions.

Finally, you are awake.

And we'll be needing a postcard.

Postcard, no suggestions.

Ah, it's just understanding the things

which are already being designed.

Hate this.

Should have been done auto, anyways,

not complaining too much.

Components and then we have postcard, okay.

Moving back, this is going to require a couple of classes.

We are gonna set the width of full and padding on Y8.

Okay, so now moving ahead, let's clean this.

First of all, let's wrap everything inside the container,

just like that.

Inside the container, we'll have a simple div.

And in fact, this div can have a class of flex and flex dash wrap

so that everything becomes a card

and we can just easily shrink them up.

Okay, now what we have to do, start your JavaScript

because now we want to loop through the posts.

Remember this?

The posts, which is an array.

So we'll be rendering this but conditionally.

So we'll be saying that, hey, what we can do is

posts.map and inside this, each post,

we are going to call post.

This is individual one, just goes like this.

And I'm not gonna use curly braces,

otherwise I have to explicitly return.

So I'll use parenthesis for that.

And I'll say, I'll be returning you a div

with a class of padding dash two.

And a width of one by four, dot width of one by four.

I don't think so.

It automatically takes it as emit abbreviation.

Ah, it takes it.

That's nice.

By the way, it's dash.

And since this is the one which is iterating over,

so we will put a key onto this one

and key is super easy post dot dollar IT.

And once I'm in this, the component that I want to loop through

is my post card, self-closing, of course.

It takes one prop.

So what we're gonna do is, if you notice it carefully,

I could have given it like this.

So I can just go ahead and say, hey, post is equals to post,

but it's not accepting these kinds of parameter

in this way.

So remember, the way how you design these components

and what they expect the data,

make sure you're careful about that.

In our case, the post is expecting an object

which has all these information.

So don't pass it on directly in case you want to do so.

So you have to pass on just an object

and we are gonna de-structure it.

That's the important part.

And that's it.

It's gonna do the job.

So I told you, it's very minute details now.

We are all happy with this.

Edit post we have worked on and home,

there is nothing inside the home.

What we can do is, home can also have the card.

This is my all post, same.

And on the home also, let's grab all the cards

and do the same stuff.

Okay, so let's go ahead and say all post.

And we'll copy all of this.

Home will also display the same stuff.

So we'll paste it, all post.

What do we need?

The same stuff.

Copy this.

And in here, we'll just paste it.

So we have post and all these stuff.

Get post, blah, blah, stuff, looks okay.

Now in this one, what we can do is,

there are a couple of more things that we should have done.

Okay, on the home page, if you have,

like we haven't taken care of the cases in the all post

when the array is zero.

We can actually do that in the home

and I can give that as a sample exercise for you.

Okay, so this part is all okay.

But what do you want to return when the array is zero?

So let me just handle that case.

If the post.length is actually zero,

that means there is nothing inside the array,

then you can simply go ahead and return

that there is nothing to read.

Otherwise, we can just wrap up the container,

something like that.

So let's go ahead and remove this part.

Return, what do you want to return?

No post to display,

but let's actually do that in a better way.

Let's grab everything from the all post.

I'll grab this, copy this and I'll paste it.

Okay, so container and we don't have this one

to actually load.

So we'll just remove this

and we probably will have a simple H1,

which says login to read posts.

So probably there is nothing inside it

or we can say there is no post to read,

better message is login to read.

So this is all the case when the if statement is working.

If the statement doesn't get invoked,

that means there is something inside the length.

So in that case, we can actually use the same all post,

copy that and we can just paste it up here

that hey, the container is there

and we are iterating through.

So post.map, everything, postcard, it's exactly same.

So now that you know how to handle the situation

when the post is zero,

you can do exactly same in the all post as well.

Just write a simple if statement at line number 19.

I can just mark it as to do for you.

To do add case for array length zero.

Yeah, not really the best sentence,

but I think you can do the job.

Okay, so the home part is done.

What about the login part?

This is the most easy part,

but I think you will find a couple of bugs in this one.

Let me show you why.

The reason for that is we did everything inside this login.

So we just need to import this component,

but you will find it a little bit difficult

if you don't know one simple thing,

which is how to import this.

So you probably might think that I'll just go ahead

and say I'll import login

and that will come up as one directory back

inside the component, we do have login.

The problem is our page is also called as login.

This is really bad.

So which one to use,

which one not to use something like this.

The easiest fixes, just use an aliasing.

And let's call this one as login component.

And notice here, this is what is giving you a problem

that hey, import login, this is not how it works.

So we need to actually change this a little bit.

And I think this is the reason why I always say

that it's always a good idea that these kinds of situations

might happen with your component.

So it's always a good idea to actually grab things

like this.

So let me show you an easy fix of that

because that's a common scalability problem.

Let me just show you that.

We will just create a simple index file

inside the component, new file,

and call this one as index.js.

And one by one, we'll be just importing everything

and we'll be exporting that.

That's all what we'll be doing in this one.

This is much better of an approach.

So if I go ahead and say login,

and that login is going to come from ./login.

Now I can go ahead and say export.

And I can export all of this is like that.

And I can export login.

Now, once you do this kind of a thing,

it's much easier.

And you will notice that this import statement

is not going to work because it's not export default.

So you can actually just wrap this up

inside the parentheses.

And every time you bring that,

it comes up like this.

And this gives you the ability to call it as login.

So you can rename the structures like this,

or rename the page as login page, something like that.

So that's also workable.

But I think you get the idea

that how to avoid these kinds of problems,

good stuff to discuss.

We'll have a simple class name

and we'll say padding by eight.

And now in here, I can just hit and enter

and can say I'll have a login component.

Self-closing of course.

So there we go.

Much easier, much easier fix.

Post page, we have already worked with that.

Sign up exactly same.

So for this sign up also, we'll import the sign up.

Import sign up from pages.

Nope, not from pages.

Sign up from current directory and sign up.

All we have to do is comma and say sign up.

Now the advantage is I can actually bring the sign up

and can rename them.

So I can just go ahead and say import sign up

from components, that's nice.

And I can just say, get it as sign up component.

And in here, we can just have a class name,

which says padding by eight.

And this one can hit and enter.

And we can say sign up component.

Self-closing of course.

So all right, a lot of stuff.

And actually the better way of handling this entire thing

in the component would be to grab everything

that's there in the component and export in this way

so that there is a consistency.

And I don't have to name this because if you notice it,

when we were building something like in the edit post,

when we were bringing these things like post form,

container, this is coming up from different.

So there is a missing piece of consistency here.

So at least one thing would be consistent is

everything will come from dot slash components, that's it.

So good stuff, but I think you get the perspective

of how things are being done.

And I'm happy that I was able to share all these details,

production grades, scalability issues with you.

The only thing remaining is to test the application

and we're gonna do that in the next video.

Let's catch up there.

Hey there, everyone.

Hithai Sheer back again with another video

and welcome to the final video where I'll walk you through

how I debug this application.

Expecting that your application will work

on the very first go is absolutely a wrong notion.

And especially when somebody is teaching you,

he's more focused on the teaching part and the flow part.

So some mistakes are meant to be there.

They are obviously going to be there.

And yes, it took me really a lot of time to debug this.

By a lot of time, I mean one hour,

a little bit more than one hour.

So in this video, I'll walk you through what all I did,

how I debug the process, how I read the errors.

This will help you to understand the entire flow

of when you're done with the application

or in between if you want to check it out,

what all the processes you need to go through.

So let's go ahead one by one and I'll walk you through.

Currently the application is in the working form

and I'll just give you the entire source code as well.

But the most important part is to understand

the psychology behind solving these bugs.

And most important is read those damn errors.

That's the secret ingredient.

Okay, let me share the screen first.

And one by one, let's go there.

So what I did is I tried to run the application.

So the first conflict that I saw immediately

was in my app.jsx.

So this is the first part.

So in the app.jsx, there was nothing, absolutely.

We didn't have anything.

So we have to load some stuff.

So in the return statement, as you can see,

I brought in my headers and I brought in my footer

so that in the header I can load up the navigation bar

along with the logout button and the outlet as well.

Now, not only that, I also wanted to figure out

that whether the user is logged in or not.

So how can I do it as soon as this component loads?

Yes, you guessed it right, it was use effect.

So I used the use effect hook

along with the app.write services,

just a simple method, get current user.

If the current user is there, then that's great.

Otherwise, let's allow the user to move on here and there.

So what I did is I created a state loading

and we used the dispatch just like that.

And after that, we used a simple use effect

and we simply went up with the auth service,

get current user.

If we get the user, that's great.

Let's dispatch a login action that user is logged in.

Otherwise, let's dispatch the loading as false.

So based on that, we're just loading.

If the loading is false,

otherwise we don't load anything.

That's pretty much it, I did.

Once I did it and I moved on to the Chrome browser,

so let me just walk you through with this one.

So this Chrome browser.

So what we saw in this one is we simply went up

onto this one and tried to login in

and we saw a whole lot of errors.

And I tried to inspect this into the console

and it gave me so many of the error.

I looked into this one and the most first one,

the error that I found is that it was not able

to load the environment variable.

So when I was teaching you in the React,

I actually accidentally used all the React variable,

not the VIT variable, but we actually use the VIT.

So here's the simple solution.

All you have to do is you have to say import meta.env.vit

and then whatever you want to say and that's how it works.

So I looked up into this one, found a solution for this one

and went into my environment variable first

and changed everything to VIT underscore VIT underscore

just like this.

So I'll just copy all of this

and I'll also paste this into the sample

so that in case you are going through with the VIT

or React, whatever you are going for,

you can just go with that.

I'll obviously remove these ones

because I don't want to push it.

And of course, by the time you'll be watching the video,

I would have removed these ones as well.

So I'll just go ahead and paste it up

and let's go ahead and comment this.

In fact, in the sample, we can keep it, no problem at all.

All right, so I'll just keep it in the sample.

Once I did it in the sample,

the next step was to change that into the conf.js as well.

So this also got changed to VIT.app, right?

The errors were pretty clear.

Once you check the console log, it simply said,

hey, I don't know what this process.env.vit,

so I had to change this one, import.meta.env.

So pretty first error that we caught up

after managing our app.js.

So this was the first problem that I saw.

Then after that, I realized that in a lot of places,

I have a couple of issues, like into this input file,

I somehow missed these parentheses.

So they were a little bit difficult to find at first.

It just gave me an error on the signup screen

that ID was missing.

And I'm pretty sure that I gave you the ID.

I checked up first of all about my auth.js,

saying that, hey, I'm providing you the ID.

It's ID.unique.

Turns out, in the signup component itself,

I was missing, in the input component,

I was missing the ID just like this.

I tried, it again gave me, hey, ID is missing.

Come on, I'm giving you the ID.

Why are you doing this to me?

Then turns out, I realized that in this one,

I actually forgot to import the ID from the app, right?

Yeah, can't believe I did that, but yeah,

these are the errors, these are the bugs.

Once I have this ID in here,

then obviously ID.unique works,

and it started to do the signup for me.

So that's one thing.

And in the login also, if we are using,

in the login, we don't use ID.

So there's nothing much more onto this part.

So this is a couple of things.

Not only that, a couple of more things needed to be fixed.

For example, in the footer,

I actually forgot to import the logo

that was giving me a bug, so I did that.

After that, in the header.jsx,

I actually imported these logo in a different format.

So I used this one, which is a wrong.

If you're doing an export default,

this is not how we do it, but somehow accidentally I did it.

So I looked a little bit on what all the things are missing.

It was pretty straightforward errors.

So I started with that.

Once this is all done, I went up back into this,

that hey, what all these things,

couple of other components also were having some issues

that hey, this was not imported properly or something.

I work with that.

Another error that I saw was here,

that it says add post, but in the URL slug,

it says add posts, so that is wrong.

Obviously we didn't take, took care of this URL.

So I went up and changed this to post.

That is what we are handling in the,

in the app dot, not in the app, main.jsx.

So this is the one that we are handling,

which is edit post and slug, not posts, there is no S.

So a couple of things,

just look out for the flow of your application

that always works with how things are going on

and how things are doing for you.

So don't panic, read the errors one by one, step by step,

try to figure it out, because what I've noticed is

that errors sometimes are not in the place

where you're looking up for or are expecting them.

For example, in my case,

I was expecting the ID might be something wrong

in the auth.js and obviously it was

that ID was missing here,

but this was also pretty much unseen

or I didn't expect it that I might have missed

this parenthesis here, send the ID.

So input file, I didn't expect it that it would be there,

but it was there, so this is what we did.

And apart from this,

I've also added a couple of more CSS as well.

It's not really required, but I have added the CSS up here.

These are browser CSS, so when the browser CSS,

if you see something like output or summary

or details, iframes and all of that,

by the way, they are available online

on the website of framer,

the parser of the package that we used,

which one, I'll show you that, HTML React parser.

So the CSS is available on a lot of resources there.

So this is a couple of ways of how I fixed the application.

Rest of the things worked nicely,

but expecting their application

will work immediately is a bad idea.

One more thing which I noticed that gave me an error

is this one.

So when I try to upload an image,

at the very first it gave me an error

that hey, you don't have permission to upload.

Turns out I have the permission for the guest

that we did together,

but we also need to give all the users

the permission to do CRUD in the images.

So you can just click on add roles

and select individual users.

If you want to give some users only the permission,

but I wanted to give it to all users.

So I just selected that

and it just gave the permission to all of them.

So this was one of the issues.

So make sure you are aware of that.

And now in the auth, you can see the user

is being registered.

You can work more on it

if you want to build this application

a little bit more complex,

which I highly, highly recommend.

We tried with that.

Then in the database,

we can just check out this is one post.

I tried to have that.

This is the post.

So if I click on this YouTube and the blog,

this is my first post.

This is my first post title, content.

I told you that the content is being stored in the HTML.

So all your CSS, colors, everything is stored like this.

That's why we used the React parser.

A featured image, only the ID is getting us.

Status is active and the user ID that we are storing.

So pretty basics, how things are being done.

Make sure you are aware of it.

Make sure you try more of it.

In the settings, I'll also mention that,

hey, I actually said that all the users

can actually do the CRUD operation with this document.

So make sure this permission is also enabled.

So in this entire application,

we have seen that how the authentication works,

how the database works, how the storage works.

I'll try my best to actually have more on functions as well.

But in case you didn't notice that on the App Right channel,

one of my friend Dennis,

he's creating a couple of videos

on the official App Right channel

about using functions in the App Right that are pretty cool.

So go ahead and check them out in case you have some time.

But this was all the application that I had.

By the way, I will push the entire source code

of this application so that you can match it,

you can try it on my GitHub as well.

Feel free to check out my GitHub,

the entire code for the entire React course,

plus this mega project is available for all of you.

If you still find any issue,

reach me out on my Discord or Twitter or Instagram,

wherever you feel active,

I'm pretty active on all social media.

Reach me out, I'll try my best to create more videos

if you find something that this was not clear,

just reach me out,

I will help you to understand it much, much easier way.

I hope this video has,

this entire project has given you some insight

about how complex a real world application can be.

A couple of things which are still missing

in this application,

which I think you can work on with this,

is if I go ahead and say,

all post ad posts are working fine,

in case when I click on add post,

there is a little bit CSS issue.

So this featured image active was supposed to go here,

I'll try to fix this up, that's one thing.

And apart from that, if I go ahead and see all post,

in this all post, these edit and delete button

supposed to go over the image,

probably I missed something.

A rest of them are pretty easy and okay,

so we can see that it's working nice.

Let's try to log it out.

Once I click on the log out button,

it redirects me onto the login page,

but it's up to you.

We don't have still any logo,

I would highly recommend you to try this out.

The reason that I am actually leaving this application

in a position where you can actually work a little bit more,

because no matter how much you see me coding

or you follow along with me,

there will be bugs, there will be error.

And if you add a couple of more features from your side,

that actually makes you a good programmer.

So try to add a little bit more

or try to convert this application into a social media,

because it's also same.

Images are there, posts are there,

so try to do build something like that.

And this will give you a lot of confidence.

If you face any trouble, reach me out on Twitter

or on Discord, I would be super happy to help you out.

Watch out for more of my videos and courses.

I'm constantly making more courses, more videos

on cutting edge, bleeding edge tech,

as well as rock solid text as well,

like Python's and JavaScript as well.

And if you have some suggestions, do reach me out.

I would love to have your feedback.

That's it for this video.

Hope you have enjoyed.

It was a great, fantastic journey with all of you.

I hope you will share the entire series

so that I get more eyes.

It would be really, really great

if you can share on LinkedIn,

but if you don't want to, that's okay, that's fine too.

Anyways, that's it for this video.

Let's catch up in the next one.