Original subtitles

John similga is back with this massive

react 18 course John is one of the most

viewed instructors on our Channel this

course is perfect for people brand new

to react and for people who want to

learn about the latest version of react

for their front-end web development

projects hey what's up I'm John from

recording addict then I'm super excited

to present the react 18 and Redux

toolkit tutorial video

recently react released its latest

version react 18 and I believe it's the

perfect time to explore all of the

exciting new features such as suspense

API

extra libraries such as Redux toolkit

and build tools such as wheat

in addition we'll be discussing the

latest and most useful vs code

extensions and configurations so long

story short in this video we're going to

learn react from the very scratch using

its latest and greatest features as well

as tooling I really don't want to bore

you with the long list of things we're

going to cover in this video so if

you're looking for something specific or

simply just need some persuasion please

reference the timestamps available in

the description

since it's not my first rodeo

effectively I believe it's already a

third time I'm recording a react

tutorial video I added a bunch of useful

stuff

for example a readme file with all of

the notes bunch of challenges to

immediately test our knowledge and of

course tons of useful resources where

you can find more info on some specific

topic

as a quick sign note this content is

part of my rear course and since quite

often I get this question

what's the difference between the video

and the course

let me just answer it here

first course contains way more content

at the moment it's somewhere around 60

hours specifically it contains more

tutorials for advanced libraries and

more complex custom projects

second

if there are any changes let's say react

War one of the libraries comes out with

an update I'm able to update the course

content which unfortunately is

impossible to do with the YouTube video

and third I provide assistance

so if you get stuck on some specific

topic or project during the course I'll

help you to troubleshoot the issue

lastly if you enjoy the content and want

to enroll in my react or any of my other

web dev courses just navigate to

johnsburg.com again the URL is www

johnsmilk.com sign up for my newsletter

and get any of my courses for just ten

dollars

simply choose the course you want to

attend and I'll provide a discount code

for you to use at the checkout alright

and welcome to the course and we're

going to kick things off

by quickly covering what in the world is

react and there's no better place to

start

than official Docs which by the way are

located at this URL

react.js.org again the URL is www

.react.js.org and once we navigate there

we're greeted by this one profound

sentence react is a JavaScript library

for building user interfaces

that's it my friends not a 10-page essay

just a short concise one sentence

explanation

and while I'm a big fan

of such straight to the point answers

let me elaborate a bit on that so react

was developed by Facebook

um it's still maintained by Facebook but

as you know now the company name is meta

its initial release was all the way back

in 2013.

and currently it is by far the most

popular JavaScript library to build user

interfaces

as a side note some of react competitors

are angular View and swelt now if

there's one thing I want you to take

away from this video

it's this one when it comes to react

it's all about components

and you can think of components as

independent chunks of user interfaces

components can be as small as one HTML

element let's say a button or a heading

2.

or you can be a rebel and jam your

entire Facebook clone in one component

at the end of the day a lot of it

depends on your preference and approach

in reality though you'll probably avoid

the one component route

since such approach somewhat defeats the

entire purpose of using react in the

first place

you see the benefit of component is that

you can build bunch of

independent isolated and most

importantly reusable user interfaces but

you can then piece it together just like

the Lego blocks and as a result build

even super big and complex apps without

going insane

well your app can have as many

components as you like it will always

have at least one

called a root component we already

glossed over it a bit but just to

reiterate

the major benefits of using components

and essentially react to develop your

next app are following you can build

independent pieces of user interfaces

meaning changing logic or layout in one

component will not break your whole app

and once the component is ready to go

you can reuse it all throughout your app

but the component code is still stored

in one place so if you ever need to make

some changes you don't have to run

around like a headless chicken

simply locate the component apply the

changes and all of the instances will be

automatically updated and of course

let's not forget about the speed you see

behind the scenes react is using

something called a virtual Dom where

only the component that needs to be

updated is affected and what's really

cool it's done without re-rendering the

whole app which in turn of course

increases the speed of your final

product and as a result the user

experience as well before I let you go I

also want to show you great example of

react components in action and I'm going

to use our beloved Twitter

if we take a look at the sidebar we can

see list of links

and you'll notice this repeating pattern

where each link

as the icon as well as the text

so with the react what we can do we can

set up a component that is going to

accept

those two things the icon

and a text

and essentially once we have the

structure in place every time

we want to use that link We simply need

to provide the data show the icon

and the text and what's really cool

if we want to change something about the

structure we only need to do that in one

place and then all of the instances

where we use the link are going to be

automatically updated

and if we keep looking

in reality

there's tons of repeating patterns not

just in Twitter but pretty much in any

app or site that you see for example

this feed notice again we have the photo

we have the name of the person who's

posting We have the Twitter handle and I

can go on and on and on so notice with

every post only the values are changing

so it's the same deal

we set up a structure and then we just

pass in the data and if you're looking

at it you're like well okay what's the

big deal well try doing that with HTML

and CSS

you see with just HTML we don't have any

kind of templating correct

so effectively we'll have to hard code

all of this

but that's not the case with react and

if you're still not convinced hopefully

by the time I show you the first

component you'll see why react is so

popular when it comes to building user

interfaces when it comes to course

requirements my expectation is that

you're familiar with fundamentals of

HTML CSS and most importantly JavaScript

I can honestly say

that the more JavaScript you know

especially es6

the easier is going to be pick up react

since at the end of the day

react is just JavaScript

so if you're familiar with basic tags

the general concept

behind CSS selectors

array methods and for example a spread

operator

you'll be in good shape

now it's not the end of the world if

you're still getting comfortable with

JavaScript

just keep in mind that once in a while

you'll have to do some extra studying

yes of course

I'll try to cover

even the straight up vanilla.js features

in as much detail as I possibly can

but at the end of the day it's a area

course so if you still need more info

please be prepared to utilize external

resources

and one such resource is my YouTube

channel coding addict

more specifically JavaScript nuggets

playlist

so before each video

where we will utilize some vanilla.js

feature

I'll share a link to a corresponding

video

where I cover that feature in vanilla.js

environment and hopefully that way you

can simply watch the video get up to

speed with what the specific feature is

doing

and continue with the course videos all

right and up next let's work on our Dev

environment

is it when it comes to react it requires

more tooling then straight up vanilla

jazz

where we only need text error and a

browser

now not to worry

the setup is still extremely

straightforward

and you'll only need to do it once

meaning

once the setup is in place you will be

able to start your react project

in a lightning speed

okay and let's start with the browser

yes

since we'll be developing Web projects

we do need a browser

I personally use Chrome

but technically it's optional

you'll be able to follow along with a

different browser as well

just keep in mind that here and there

your results might slightly differ

now let me be very clear I'm not saying

that your entire project won't work on a

different browser

keep in mind that each browser has some

default presets and therefore the same

element for example input in different

browsers can look slightly different

if you also want to download the Chrome

go to your favorite search engine which

in my case is Google Chrome type install

Google Chrome click on a link and follow

the instructions all right and up next

we've got text editor

I'm going to use Visual Studio code

pretty much a standard these days

but just like the browser you can follow

along with a different text editor the

only downside here and there I will show

some Nifty ways to speed up our

development

and you'll have to search for

alternative

available in your text editor

as far as my configuration I keep it as

close to default as possible

simply because I'm recording content as

far as my extensions I'm not going to

cover them in this video since in my

opinion a more solid approach is to

Showcase what the extension is doing

with the actual example

so once we reach a point where one of

the extensions becomes useful I'll stop

and explain in detail and don't worry

you won't need all of these extensions

to follow along

and the same goes for settings Json

I will showcase the code once we

actually need to work in the file

now just in case you are like super

eager to see my config right away

just navigate to my GitHub profile

and look for this repo vs code setup

2022.

again the repo is vs code setup 2022.

lastly if you want to install Visual

Studio code just navigate to this URL

and follow the instructions

not bad not bad and before we install

node.js let's quickly talk about this

scary thing the terminal or if you use

Windows the command prompt and first

let's just establish that terminal is

simply an alternative way to communicate

with our computer

so instead of graphical interface we

just type commands also don't worry we

won't run any dangerous commands in this

course like wiping out the entire file

system or anything like that for the

most part we'll run some basic commands

like CD which stands for changing

directory as well as commands provided

by create react app a tool which we will

install in few videos

lastly throughout the course I'll also

utilize the integrated terminal and

visual studio code

please keep in mind that we can use them

interchangeably essentially you'll get

the same results

and the only reason why I prefer

integrated terminal and visual studio

code is simply because it right away

points to the existing project

effectively it requires less work and up

next let's install node.js on our

machine now if you're not familiar with

node.js it's a cross platform JavaScript

runtime environment which allows us to

build fast and scalable Network

applications

if you want to check whether the node is

already present on your machine just

navigate back to the terminal and type

node

hyphen hyphen version or dash dash

version again the command is node hyphen

hyphen version press return and if it

returns some numbers you're good to go

however if it returns something along

the lines of command not found please

continue with the video

now in order to install a brand new node

instance we need to navigate to this URL

nodejs.org or you can simply go to your

search engine type install node and

most likely this is going to be the

first link but again the URL is

nodejs.org it will right away detect

which operating system you're using

and in my case that is mac and I highly

highly highly highly highly recommend

installing the LTS version instead of

the current one again

I recommend installing the LTS version

since that way there's a smaller chance

you'll have to chase some weird bugs

you see we will use some external

libraries and it takes some time for

those libraries to catch up with the

node versions as well

so if you go with LTS which is a stable

version there's a higher chance library

or a package will work without any

issues which can't be said about the

current version

the time of this recording

the latest LTS version is 1812 but of

course

since you're watching this in the future

your number most likely will be

different it will be higher with that

said let me emphasize something just

because you're using different node

version

most likely a newer node version does

not mean does not mean that the course

content is old or invalid

effectively we only use node to run our

react app basically we'll use node to

create a new react app instance

so newer or older node version does not

affect our code again let me be very

clear and the reason why I'm being so

annoying because I get these questions

and Q a so I just want to address them

here and if by any chance a newer node

version will introduce some breaking

changes to our entire setup rest assured

I will update the course content so

again download the LTS version follow

the instructions and once the install is

complete type again

in a terminal node

dash dash version again the command is

node bash Dash and version and if

everything is correct you'll see the

node version

however if you get the error please

utilize your search engine and

troubleshoot the issue since you won't

be able to follow along with the

upcoming videos and once we have

successfully installed node

now let's finally spin up our first

react application

like I mentioned before unlike vanilla

Jazz react does require more tooling but

luckily for us we won't have to do it

manually

for the longest time the most popular

option for scaffolding react apps from

scratch was packaged by the name of

create react app

but as everything in web dev things are

changing and they're changing fast and

as I'm recording the third iteration of

the react tutorial

actually there's a better and more

popular option called Veet and yes it is

pronounced Veet not white now since you

will encounter create react app code

examples in bunch of videos and blog

posts during the first part of react

tutorial so during the fundamentals part

we are going to use create react app and

once we get to Advanced react Concepts

then we're going to switch to beat and

of course I'll discuss why at this time

beat is a better option once we get

there

don't worry both of them have similar

setups so it's going to be a very easy

transition I promise you so as I was

saying during the first part of react

tutorial we are going to utilize package

called create react app and you can

easily find it by just typing create

react app in your search engine

it was created and it's being supported

by the Facebook team which means that we

can always be sure

that it uses all the latest and more

importantly

correct setup

and if you go through docs you'll see

that the main goal of this package

is to

speed up our development basically with

the help of this package we can right

away start building our awesome react

applications instead of tinkering

and getting frustrated with complex

config setups and effectively

in order to get started we want to open

up our terminal navigate to our working

directory in my case that is going to be

desktop and run of this command npx

create react app and the name of your

application so in their example it's my

app

now before we do that let me explain the

npm part

you see when we install node

we also install npm or node package

manager

which allows us to quickly install

external packages

and normally the command is going to be

npm install or npmi for short and then

the package name and don't worry if this

sounds iffy it will make all the sense

in the world once we install our first

package and yes we'll do that throughout

the course now why this command starts

with npx instead of npm simply because

instead of installing the create react

app package on our machine which by the

way used to be their old approach

so we needed to install that globally

and then we were able to create that new

react application instance

now we want to execute this package

in order to create that new react app

instance so instead of installing create

react app on our machine we will just

execute it and as a result we get a

brand new react application on our

machine and yes basically every time

we want to start working on new react

app we'll have to repeat the same steps

so let's try it out I mean you can type

it manually you can copy it's really up

to you in my case I think I'm just going

to copy I'm going to navigate back and

first

let's just

get on the same page

so as I'm looking at my thermal I can

see that I'm sitting in the root and I

can definitely

check that by just typing LS which

effectively is just going to give me all

the directories that I have and notice

here I have desktop so in my case since

I want to set this project

in desktop

I'm going to use CD which is change

directory and then navigate to the

desktop now do you have to

work on a desktop no of course not

for example you can set it up in your

documents this part is really up to you

so I'm going to go with CD then

stop so now I can clearly see that

instead of root I'm located in a desktop

again pretty much

the same idea as with graphical

interface the difference is that now of

course we're just typing the command and

then I'm going to copy and paste this

command now let me right away show you a

possible error that you might get and

therefore I'll just keep this my app and

I'll change that in a second so let's

say if you run this command

and it spins back the following error a

fix that works for me is to add at

latest at the end of create react app

now if the install

is successful then of course you don't

need to do anything but if you run into

the same error just go with NPH then

create react app then add add latest and

then come up with a name so in my case

I'm going to call this tutorial like so

again

I'm located in the desktop we run npx

because we want to execute this package

and in order to avoid this bug we just

go with ADD latest and then whatever is

the name of our project and in my case

that is tutorial press enter

and the

package is going to start setting up the

application now it takes a little bit of

time

so I'll stop the video and I'll resume

it once the install is complete okay it

looks like the install is complete and

like I mentioned before essentially we

have two places where we can run more

commands

we can do that in the terminal or we can

do that in the integrated terminal so

notice here we have this npm start run

build test as well as the eject and I'll

talk about these commands a little bit

later first I just want to spin up the

application and in order to do that we

need to run npm start and notice over

here pretty much says what the command

is doing it starts up the development

server on our machine now

like I just said we have two places

where we can run that we can use the

terminal but

make sure that you navigate to this

actual project because at the moment I'm

located in the desktop

so the fastest one is basically to drag

and drop this one and once I press enter

notice now I'm located in tutorial

so now I can run this npm start and

essentially it's going to spin up the

dev server however I prefer the

integrated terminal that is in the

visual studio code and how we can run

that well we first need to open up our

text error when we need to open up this

project in our text error which again

I can simply drag and drop and once

we're done with that we want to open up

the integrated terminal and in my case

the shorthand for that is control and

tilde and tilde key is located just to

the left of the one key so press this

one and notice you'll have the terminal

and again what's really cool about this

integrated terminal

that we're right away located in this

particular project so I don't have to

worry whether I'm in a desktop or I'm in

some other folder I know for sure that

integrated terminal

always point back to my project

and let's spin up that application so

I'm going to go over here with npm and

start

and effectively this is going to spin up

our

react application

and we'll have our application on

localhost 3000 and this is how our

initial application is going to look

like

as a side note I prefer setting up vs

code and browser side by side since that

way I don't have to switch screens

if I want to showcase something in the

browser

but it's totally optional you're not

required to do that also it's a Mac

thing

so effectively it has nothing to do with

react

so here's what I want to do I want to

move this one down

then I'll make it bigger smaller again

now it's going to be on my desktop

essentially I'll grab the code

and then set it side by side

I'll spend the next video

going over the files and folders that we

can find in our new instance

in this video I'll simply showcase

that every time we make some changes in

our code

the dev server will right away update

the browser as well

now you don't have to code along again

we haven't covered what is the source

folder and all that but in my case I'm

going to go to Source folder then app.js

and instead of this paragraph I'm just

going to say I don't know maybe heading

1 so I'll just change from the paragraph

to a heading 1 and then I'll say react

tutorial once you save check it out

right away we see the latest version in

the browser which is really really

awesome

it definitely speeds up our development

and like I said in the following video

I'll go over the files and folders that

we can find in our new react app

instance okay and once we're done with

the install now let's cover react

fundamentals

as a side note if you ever want to

reference

the complete source code just navigate

to my GitHub profile and look for this

repo

more specifically search for

fundamentals directory

also in there you'll find a readme file

with all of the topics we're going to

cover in the fundamentals section and

yes I will reference this file quite a

bit in the upcoming videos as far as the

readme I tried such approach in my meron

course and since students seem to really

like it I decided to implement it in my

other courses as well basically the goal

of the readme file is to save your time

on note-taking and to allow you to

complete tasks independently if that's

your preferred way of learning content

all right and once we have created our

first react app now let's quickly

discuss files and folders provided by

create react app

and first up we've got node modules and

effectively in there you'll find all of

our dependencies

essentially the dependencies our project

is using and if you're iffy on the whole

dependencies concept just wait a little

bit in few minutes we'll cover

package.json and once we do that it's

going to be easier to see the big

picture after that we've got public

folder which contains static assets

including index.html

which basically is the thing that is

served to the browser

in other words index HTML is responsible

for whatever you see in the browser and

if you decide to inspect index HTML file

you'll see that it's pretty typical HTML

file

so if you crack it open you'll see that

it has

typical tags it has the head

element it also has the body one and in

the head element

we can change the title get the fonts

CSS maybe even a favicon and just to

show you

that I'm not making this up I'm gonna

navigate there I'll search for title

tags and let's right here react tutorial

or whatever

value you want to provide and check it

out the moment I change it

I also can see that in the browser now

one thing that is very very important

is this div with ID of root

believe it or not our entire application

effectively lives over here and I know

it sounds somewhat unbelievable but

effectively our workflow is going to be

following

we'll set up whatever logic

we want or need in The Source One In The

Source folder

and then it's going to get injected in

this route and essentially as a result

we'll render our application in the

browser and don't worry I will come back

to this concept quite a few times

because

I fully understand that the first time

you see that you're like whoa that's

some really impressive stuff yep I agree

after that we've got Source folder which

basically is the brain of our app

and therefore in there we'll do all of

our work now I'm not going to cover any

of the files

in Source folder for now since create

react app creates bunch of boilerplate

and actually I prefer

especially

while we're covering fundamentals

setting everything up together from the

scratch but in short in the source we

will set up all our components Pages

utils functions assets CSS and whatever

else we need for our project

as we continue with the course you'll

see that there are really no

restrictions on the folder structure

inside source so the way you manage your

code really comes down to your

preference as long as there's index.js

which is going to be our JavaScript

entry point so remember the ID root in

the index.html once we're done adding

our functionality like I said it's going

to get injected in there and as a result

we will render our application in the

browser after Source we've got dot git

ignore which specifies which files will

be ignored by The Source control

effectively get

so if you navigate there you'll see a

list of files and folders that are going

to be ignored once we push our project

up to GitHub for example after that we

got package log but let's just skip it

for now and first let's discuss package

Json

and effectively

package Json contains useful info about

our project now we will mostly be

interested in two things in script as

well as the dependencies

now package.json is not specific to

react apps pretty much every node

project has one so let's take a peek

essentially like I said useful info

about our project and you'll also most

likely hear this term manifest file so

in here we can see the name you can see

the version and like I said

we are mostly interested in two things

independencies our project is using so

these are the main dependencies as well

as the script so these are the commands

we can run

in our project

that's why when we run npm start

essentially it sets up our application

and yes we'll discuss the other commands

a little bit later for now we're

literally interested in this one the npm

start now when it comes to commands

normally you go with npm run and then

the command but with start we can simply

go with npm and then start

now if you

picked up the node modules you probably

noticed that it's huge

it's literally massive but in the

package.json we actually have way less

dependencies so what's up with that

or you see so these are the main

dependencies our project is using but we

need to keep in mind that every time we

get the dependency so some kind of

Library some other devs were kind enough

to set up and essentially we're just

utilizing the code in that Library

well those libraries can have

dependencies on their own

which is the case over here

so every time we'll install dependency

which of course it will do during the

course there's going to be more

dependencies because the dependency has

its own dependencies hopefully I'm

making myself clear so again these are

the main dependencies and then

since they have dependencies on their

own the node modules is quite big and

that's actually one of the reasons why

you will always see it in git ignore I

mean in most cases so when we're pushing

this up to a GitHub

normally known modules are not included

because they're huge and there's also no

need if you have package Json the moment

you will run npm install

essentially you'll right away install

all dependencies so not just the main

libraries but also the dependencies that

they are using and that's why we also

need a package lock

because essentially it's a snapshot of

our

entire dependency tree now I can tell

you right away that you really are not

going to do any work in the package lock

or node modules so

this is just the general info and pretty

much you can forget about them all of

our work is going to happen in the

source and then yes once in a while

we'll navigate to a package Json we'll

discuss some package and yes we'll add

few commands of our own but that's later

in the course and lastly we have a

readme file which essentially is a

markdown file where you can share more

info about the project for example build

instructions and summary and while we're

still on the topic of readme I just want

to showcase how you can quickly get the

readme that I provided now again you

don't have to do it

it's totally up to you but just in case

you're interested navigate to that repo

look for fundamentals then click on

readme then you want to go with raw

essentially select everything

go back now of course I already have

these values here select everything

that's currently in a readme copy and

paste and you are good to go now one

last thing that I quickly want to

mention here and there your results

might differ a little bit as far as the

browser just because

I'm using zoom level

so at the moment I have 175 that's

pretty typical for me but here and there

you might see me going more or less

since that way I can showcase some stuff

better again not a big deal it doesn't

mean that the code is different I'm just

saying that visually here and there our

results might differ just because I use

specific zoom level that's about it and

up next we're going to remove some

boilerplate code well create react app

is super useful tool unfortunately it

adds quite a bit of boilerplate code and

especially while we're covering react

fundamentals I prefer setting up

everything from scratch

since that way we can build everything

together

and in the process discuss the main

purpose of some specific file or code

snippet so that said our first task is

going to be somewhat straightforward

remove most of the boilerplate and we're

going to do that in the following way

navigate to your sidebar remove the

entire Source folder event create one

from the scratch yes I know

this might sound redundant but this is

what we're gonna do and then inside of

it we want to create index.js I can tell

you right away that your application is

going to break don't worry we'll fix it

in the next video so let's navigate over

here

notice the source folder I want to

remove it

yep the entire folder it goes to trash

then we want to create a new folder

let's call it source and inside of the

source let's create that file

our JavaScript entry point so the

index.js and once we do that like I said

our application is going to look

different don't worry we'll fix it in

the next video and also in this video I

want to mention that throughout the

course I'll toggle the sidebar just so I

have more real estate and in my case the

shortcut is command B now if you're

using different operating system there's

a great possibility that your shortcuts

are different and in order to get the

shortcuts for your Visual Studio code

just navigate to this Cog and then look

for keyboard shortcuts so for example if

I mention toggle sidebar

you can go here and then type toggle and

then sidebar and somewhere

in there you'll find your shortcut and

the reason why I prefer using such

shortcuts is because they save a bunch

of time and in the long run massively

speed up the development all right and

now let's finally set up our first

component and in order to create

a component in react

effectively this is what we'll need to

do

and as you're looking at it your first

thought probably is wait a minute

guy with a weird accent that looks a lot

like a JavaScript function

and guess what

you're absolutely positively 100 correct

yes in order to create a component in

react essentially we need to create a

function yes of course there are

differences

essentially that's the whole point of

the section

is to show you

what differences are there between the

good old vanilla.js function

and the components that we'll be

creating react but always always always

when you think of component think of

function every time we want to create a

component think I need to create a

function NES it can be

function with good old function keyword

or you can create the arrow function

that part doesn't really matter like I

said

a lot depends on your preference now we

will cover more rules later

for now I just want you to be aware that

we want to start our components with

capital letter

that's very important yes we're creating

a function but we want to start with a

capital letter

and we must must must must must return

some kind of HTML from this function

now technically this HTML is called js6

but

you'll see in a bunch of blog posts and

you'll hear me throughout this course as

well

effectively to use them interchangeably

yes what we're doing from the function

we are returning HDML

essentially this is going to be the tag

that is displayed on screen and

technically you can return empty one

you're just not going to see any content

on the screen so once we know this info

let's just go to index.js and let's

create that function again the actual

syntax is really up to you in my case I

think I'm gonna go with good old

function keyword just because I feel

like good old function today then let's

type return and whatever we want to

display on our screen so I'm not going

to be very original and I'm just going

to say my

first

component so we're done

but once we save nothing happens

and you're like wait a minute you just

said that we're going to create the

function and we're going to be good to

go so normally every time we'll create a

component we'll need to do these two

things we'll need to create a function

AKA component and we'll need to export

it now if you're not familiar with es6

modules don't worry about it we'll spend

quite a few videos on it and essentially

what we're doing here is we're just

exporting this particular component and

then we can use it anywhere in our

application again we'll focus on that

a little bit later I really want to I

kind of hone in on the react stuff first

again if you're not familiar don't worry

we'll cover it if you are familiar you

know that essentially we're exporting as

default so we can just grab it anywhere

in our application and we can render it

essentially on the screen now this is

different though in the index.js that's

where we're setting up our root

component remember I said that we can

have as many components as we want I

mean you can have thousands and

thousands thousands of components but

you'll always have at least one

so that's the root component that's the

sucker that we will inject into that

idea route remember we talked about it

uh when we discuss the folder structure

I said that there's a public one there's

index HTML and then there is this famous

ID root so now what we want to do

we want to inject this greeting sucker

into that ID route and then since this

is

our JavaScript entry point we do need to

add a little bit more code now please

keep in mind just like this code it's

not specific to react this is es6

modules so in here we export stuff away

from the file and in here we import and

we're actually importing from the

libraries basically from our

dependencies again if you are even less

a little bit later

I'll cover

everything in detail okay don't worry

about it for now just worry about the

component

and the function you need to create

that's it and essentially as far as this

entry point

we want to grab react and react Dom and

notice this one is coming from react

package and this one is coming from

react Dom forward slash client

and then restore our function that

doesn't change and then we want to go to

react Dom create a root

so there's a special method that creates

the root and it's looking for one thing

it's looking for that ID now how we can

select ID in vanilla address we go

document get element by ID root and then

eventually we go with a root dot render

again if you're looking in this code and

you're like whoa this got really

confusing really fast this is going to

be your typical setup and I'll show you

the extension that actually sets up all

the code for you this is only for our

root

component for our JavaScript entry point

and I can tell you right away that once

we set it up

we'll pretty much forget about all this

code that's why again I know I've said

this already ten thousand times

Focus please on this one rest of the

stuff we'll figure out as we continue

with the section so first let's grab

those two Imports we're looking for

react so let me type over here if you

want of course you can copy and paste

from the readme so let's go here with

the react and as I said I'll most likely

vs code is going to give you the order

import if it doesn't then again just

look for react then we want to go with

import react

and then Dom and then this is coming

from react Dom Library forward slash

and client and as I say note

they change the syntax in react 18.

so prior to that there was react Dom

render now they create that route first

so right after the greeting we want to

go with const

and we'll create a root so react Dom and

now we're looking for that create root

and now let's select

the ID

with the value of root so this is where

we go back to vanilla JavaScript and we

go with get element by ID

and yes we're looking for the ID of root

and once we have all of this in place we

want to go with a root and then render

and here we want to pass our component

now when we create a component we create

a function correct we create a

JavaScript function now when we want to

render it the syntax is following we go

here with the angle bracket so then the

name of the component and then one thing

we need to know about react that we

always always need to self-close it

so this is again one of the rules that

we'll discuss a little bit later just

remember that when you pass in the

component you have two options you can

pass it like so with the opening one

and the closing one even though there's

nothing in between

yes that's the case or you can self

close it but you always always

have to do that you cannot just leave it

like this notice it right away

shows this red squiggly align and that

means that there is error in our

application and once we save it we

should see my first component in the

browser now if you don't just go back

here and refresh since we're messing

with the source folder and all that

maybe create react app just needs a

little nudge

now if for some weird reason you're

still stuck on this error don't panic

since we tinkered with index.js we just

need to give create react app A little

nudge basically we need to restart the

server so navigate to your integrated

terminal press Ctrl C which is going to

stop the server and then restart the

server with npm start again navigate to

the terminal

press Ctrl C which is going to stop the

server and then just restart the server

with npm

start and at the very end of the video I

just want to showcase the casing so if I

go here and if I let's say go with

greeting and then greeting over here

again the same deal we'll have an error

notice I have nothing on the screen and

if I open developer tools and warning

with that greeting blah blah blah blah

blah so again we don't want to do that

we always want to start with capital

letter and once I fix the casing of

course everything works as expected

we're done setting up our first

component if there's one thing I want

you to take away from this video

every time you think of component think

of function

that's it if you do that you'll be solid

and once we're done with our first

component I think this is an excellent

time for me to show you

the extensions I use as well as my

settings Json setup and first let's

start with two easy ones so the ones

that don't require much explanation and

that is auto rename tag and highlight

matching tag so if you want to take a

look at those extensions so that's how

the auto or name tag looks like and then

the Highlight one looks like this

essentially you just go search for

extensions

you install it in some cases you might

need to restart the text error and after

that you're pretty much good to go as

far as the auto rename tag if I go here

and let's say select a setting two

notice right away I'm changing the

values in the opening one as well as the

closing one so if I go here with heading

3 and save yep I'll have the heading

three now in the browser now when it

comes to the matching tags this is

technically optional you don't have to

do it but I just prefer when I select

the element I can right away see both of

these tags and again the extension is

this one now once you install

probably your results are going to be

tiny bit different just because I

customized the way it looks so let me go

here to the settings Json and showcase

that

and again

remember repo I shared that's where you

can get the code so let's keep on

scrolling and notice over here I have

this

highlight matching tag Styles and then I

added these values and essentially if

you want to know your options just

navigate to the docs of the extension

essentially in there they provide all of

the details

so those are the easy ones now let's

actually start working with some heavy

lifters

first one is prettier which is really

awesome because it formats the code

so if I go back to index.js and if I do

something silly like this again there's

technically nothing wrong with my code

but imagine

if all my files look like this

I mean you would have to agree that it's

somewhat annoying so once I save check

it out

everything is back

to tip top shape why well because I use

this extension by the name of prettier

once you install this extension you'll

also need to add some modifications to

the settings Json so let me showcase

that as far as the settings we have two

options so essentially we have this the

GUI

this is where we can basically see and

then we have settings Json where

essentially we add rules

to the Json file

now as far as the settings the ones that

I prefer are format

and then I have format on paste and

format on Save and also very very

important otherwise it's not going to

work you wanna

set up your default formatter as a

pre-year so let me go back over here

and then we want to go with default

format yep over here notice I selected

prayer so this is what you need to do

most likely you'll have this none and if

that's the case it's not going to work

even after you install it and then once

you select this once you go with

prettier in settings Json

essentially you will have no that's for

the Emma that's not what I want to do

with my showcase 3M is probably going to

be easier you'll see editor for my own

paste format on Save yada yada then we

have this one the default formatter and

then these are just the rules that I

applied again you can search for them

here in the GUI or you can add them

directly here in settings Json so as you

can see my preference is the single

quote and I don't use the semicolons so

if I change that around of course

allow the double quotes and I'll have

the semicolons

this is totally

again up to you you don't have to use

the same settings

then we've got Emmett so throughout the

course you'll see me

essentially do something like this where

I go with heading 2 and let's say if I

want to go with an ID I go with the

hashtag and I'm going to call this I

don't know something something over here

and then if let's say I want to add a

class I'm going to go with DOT so this

adds a class and again this is going to

be some value

and check it out I right away have this

option where I simply need to press

return or the Tab Key at least that's my

setup

in some cases students have said that

they only can use tab in some cases they

say that they can only use return again

that's something that you need to check

in my case I can use either of them and

notice the moment I press the enter or

tab I right away have this value now

we'll discuss why this is a class name

not a simple class a little bit later

don't focus on that one but I'm simply

trying to say is that

in order to speed up development

effectively I'm not going to type the

opening tag and the closing tag

essentially I'm just going to type what

element I want to add and then e-file

use some classes I'm just going to go

Dot and then the class name the class

name or the ID now these are not going

to be that often but classes for sure

will do this way so we go with heading 2

and now let me again type my first and

then component

and essentially this is done by Emmett

and Emmett comes by default

in vs code so it's right away available

however

if we want Emma to work

in react we need to add this code

to our Json

now you can also search for it in the

GUI but to tell honestly I find this

approach

more straightforward or basically you go

with press code and once you add it

you're going to be good to go if you

want you can copy it from my readme or

you can just pause the video and type it

that's really up to you just make sure

that you have this code there's the

Showcase that I'm not making this up

I'll try to find it yep it's over here

so I'm at include languages and we want

to add JavaScript and then JavaScript

react and once you do that Emmett is

going to work in react effectively

in our component and I guess the last

thing I want to cover in this video is

the awesome snippet extension and this

is super super super

helpful extension uh you're looking for

this one now I'm too lazy to say the

whole name just look for es7 and then

somewhere there you'll see Snippets and

essentially this

allows us

to set up our components really fast so

remember I said this is going to be our

typical component

we don't have to type it ourselves and

we haven't covered

the exports and imports and all that but

I'll showcase the typical setup so let's

navigate to the source and we want to

create a new file so every time we'll

need a new component

we'll create a new file because

components sometimes can be really big

again this is really up to you if you

want to jam all your components in one

file who am I to judge you so let's go

here with new file and we can go with

uppercase or we can go with lowercase

just remember that the extension

essentially

is going to

set up the component

based on file name so I'm in a testing I

have installed this extension so

everything's in play I don't need to

add anything

to the settings Json pretty much once

your install you're good to go and then

you'll see in the dark that they have

tons and tons and tons and tons of

Snippets that they provide and

essentially you just want to click on

Snippets

and then be prepared to spend the rest

of the day going through those Snippets

so I'm not going to cover all of them of

course you can

spend some time in the darks what we're

gonna use pretty much all throughout the

course

r a f c e which is a arrow function

right away with export and then

rfce which is a regular function with

the export so if we go to the testing

once we have installed the extension

notice I have essentially right away

these Snippets so this is going to

create a component as a arrow function

and notice how the names match

and if I go with the other one

if I go here with the r

f

c e this is going to create a regular

function now don't let this fool you

notice over here how we're using the

lowercase

it's only going to work because we will

import it and we'll set it up with the

uppercase

and therefore for the most part you'll

see me essentially setting up files with

the uppercase right away so that way I

know that there are going to be no issue

now one last thing that I want to

mention about this particular extension

is that once you initially install it

most likely you'll see this import for

react on top of the file and I think

probably is going to be faster if I just

showcase the settings one so

let's navigate to the settings we're

looking for react Snippets and we have

this import react so let me navigate

there so settings here

then we want to go with react Snippets

and notice over here how my one is

unchecked

most likely once you install it it's

going to be checked

so in here notice it says that we need

to restart vs code and all that

and effectively what's going to happen

pretty much every time you run the

snippet again doesn't really matter

which one you'll get this import react

from react now that used to be

the older syntax so prior to react

version 17

we had to also right away import react

we don't have to do that anymore now if

you have the import

there's nothing wrong with that

so

the code is not going to be wrong just

because you have the import

but since technically we don't need to

import essentially we can set up our

Snippets extension to avoid importing

react for pretty much every component

and again

if you navigate to settings GUI look for

react Snippets and then you just need to

uncheck it yep again we'll have to

restart the vs code and just to Showcase

that I'm not making this up I'm going to

remove the testing one

let me create a new file I'll say test

over here

JS and now let me run the snippet I

actually prefer

the arrow function syntax so most likely

throughout the course

that's the syntax that I'm going to use

and now check it out I don't have any

import for react again there's nothing

wrong if you do but I just showcased how

we can remove that and also my component

name matches exactly to my file name so

those are my extensions as well as

settings Json setup in the long run it

will greatly speed up your workflow

and now we're ready to dive back into

the awesome world of react all right and

up next let's see how I react

create jsx under the hood

and first let me just reiterate the main

rules that we want to start with capital

letter

as far as our component and we must

return something now it looks like in

the latest version

if we don't return anything it doesn't

throw an error

but it used to do that in the previous

versions however if you're not returning

anything from component it kind of

defeats the entire purpose for the

component and as far as the jsx if you

find the whole syntax super weird let me

just reiterate that

the whole idea is to make our lives

easier

technically if we want to we can call

create element which essentially

is what the react is doing under the

hood but I'm pretty sure that by the end

of this video

you'll probably agree with me that using

jsx is a little bit easier so let's

navigate to index.js and this video

might be a little bit annoying because

I'll comment this one out the first one

since I don't wanna

essentially create two separate

components and then change the values

here as well so let me showcase how we

can create a component by calling react

dot create element because remember

react is a JavaScript library so

essentially under the hood we are using

JavaScript we are calling this method

but in order to make our lives easier we

can actually type here jsx

so first let me just

copy this comment this one out and let

me showcase that I can go here with

return

and I can type react Dot and then create

element and then here we need to provide

three things

what element we want to create

perhaps which we haven't covered so for

now we'll just pass in empty object and

then what value is going to be inside of

that element so let's try this one out

I'm going to go with heading 2. or pass

in the empty props empty object and I'll

say the typical hello world let me save

it and everything works

okay well that's awesome

but keep in mind that

our components are not going to be as

straightforward as this one what if

let's say I want a div and then inside

of the div I'm gonna have the heading 2.

like I said this video

is going to be a little bit more

annoying than the usual ones because

I'll toggle them back and forth

so if I want to do that I can simply go

here with a div

so so let me type the div tag and then

I'll place that heading 2 inside of it

so let me take this one out

set it up and of course technically

since it's a div we don't see that but I

can guarantee you

that the element exists

so if we take a look at the root notice

so I do have the div and then I have the

heading to

so the next question is well how we can

set this one up with create element

well

check it out

we need to go to react create element

then since the parent now is div that's

what we're creating again same deal with

the props don't worry about them just

empty object

and then since the heading 2 is sitting

inside of it again we type react dot

create element and then we pass

the data and hopefully you see where I'm

going with this

I mean you can have maybe 20 50 or

whatever elements in here in this one

component

and what do you think is going to be

easier

typing the HTML AKA jsx

or during these acrobatics now I'm not

going to set up the code if you want you

can copy and paste and you'll see that

yes it still works but you'd have to

agree with me as weird as it looks the

first time you see this kind of approach

in the long run

it's going to be easier

and more straightforward than calling

bunch of react dot create elements

all right and up next let's talk about

the jsx rules

so before we discussed the rules for the

components and again I'll repeat capital

letter and we need to return something

now let's talk about djsx rules so

essentially the stuff that we are

returning let's start with this one we

always always always always always need

to return a single element basically one

parent element so if we take a look at

our return

we can go here as wild and crazy as we

want so let's imagine that I want to go

here with div inside of the div I decide

that there's going to be a heading 3 and

in there I'll say hello people after

that we want to go with another list

in there there's going to be a list item

inside of the list item I'm gonna go

with that href for now I'm just gonna

add the

over here don't worry there's probably

going to be a warning in the console we

don't really care about it and let's say

over here

hello world

let's save it and as you can see

everything works there are no issues and

as I say not I don't want this one over

here however problems are going to start

if for some reason I understand that you

know what right next to this div I need

to have a heading too so not inside of

the div but right next to it

check it out right away I have this red

squiggly line pretty much running all

throughout my code why because we cannot

we cannot return in jsx

adjacent elements so we always always

need to return a one parent element so

what's the solution

first let me type some kind of code

I'm gonna go with hello world and

effectively what we want to do is to

wrap both of them

so for now I'm just gonna go with div

and I'll talk about why maybe it's not

the best way but let me grab the opening

and closing tag and check it out the

moment we save everything works again so

I know I already said this

a thousand times we need to return one

parent element so once we refactor we

are good to go now this is not a rule

but keep in mind that

whatever elements we set up they

actually live in the browser

so we are actually returning them it's

not like we're just making them up in a

code notice I have div div and then

heading two so again this is not a rule

if you're

favorite element is div you can

definitely do show who am I to judge but

I do suggest

sticking with HTML semantics where we

can use the section element we can use

the article and of course whatever

element you want to create so for nav we

can use nav footer header and hopefully

you see where I'm going with this again

it's not a rule if you want to add I

don't know 100 divs in your component

absolutely

react is not going to complain about it

however

as far as maintaining the code it might

be an issue down the road again just a

suggestion and also another approach we

can take if let's say you don't want to

add any semantic elements and you're

also maybe not in a fan club of div you

can add fragment

so fragment allows us to group elements

without adding those extra nodes and

essentially we have two ways that we can

use that we can go with react Dot and

then fragment so notice the syntax it's

kind of like a component opening and

closing one or there is a shorthand so

in here we can go with angle brackets

and we just need to make sure that we

close it so let's try it out I'm going

to go back to index.js let's say that I

don't want to go with Section which is

also an option of course so once I save

here notice now the section is returned

not a div

but if let's say I'm not a fan of that

type of approach I can just remove the

code and I can go to react Dot and then

fragment so we're importing react that's

something you'll need to do then if

that's the case and we go with react dot

fragment and once we save notice

that essentially

there's not that extra div so we have ID

root

but we don't have that div

type of syntax we only have this one div

that we have over here and like I said

the shorthand is following just remove

the stuff and everything is going to

work

after that let's talk about the camel

case property naming convention

if you're familiar when it comes to

attributes in the index.html

you write them in a following way for

example tab index on click

for read-only when it comes to jsx

don't be surprised if you see the camel

case property naming convention please

don't worry about this code effectively

what it's doing the values and all that

just focus on naming here so instead of

tab index we're going to type tab index

as a camel case if we want to use 4 for

the label in the jsx we'll use html4

again those are just the rules and of

course as we're progressing on the

course every time

we'll add that chemical case property

I'll tell you hey this is the rule that

we need to use and this is just

something that you need to remember

again please don't focus on this code

I'm not going to type it we're going to

cover all of this in great detail

essentially while we have those funny

curly brackets and all that for now just

don't be surprised if you see this type

of naming convention

also speaking of naming conventions we

don't have class something that I

already showed you when we work with

Emmett so if I go back and to this

device I want to add some kind of class

it's not going to be class so you can

type here like this but it's not going

to work we need to go with class name

again just the rule that we need to

remember that's it we need to go with

last name and then we provide some kind

of value over here some class name and

then if we take a look

somewhere there yep notice

eventually in the browser

it's set up as a class but in our code

it's going to be a class name and up

next let's discuss how we need to handle

elements that don't have the closing tag

so as you know in HTML we have some

elements that do have closing tags and

some that don't for example image or

input and HTML5 has somewhat spoiled as

well

if we want we can now omit the

self-closing and everything is going to

be rendered just fine however we cannot

do that in react all the elements that

don't have the closing tag we need to

self-close them so essentially you need

to add this forward slash

otherwise you'll get an error so if I

navigate over here and let's say I'm

gonna go with input now say text if I

remove the forward slash I'll right away

get the narrow

so make sure if you use the element that

doesn't have the closing tag

to self close it and lastly let's talk

about the formatting as you've probably

noticed

when it comes to return sometimes

we have these parentheses

and sometimes there are no parentheses

so what's up with that

well you see parentheses are here to

help us

technically you don't need to use them

so now let me go back to the heading 2.

and let's say hello world I save and

everything works however if

by mistake

I move this to the next line You'll see

that it right away gets grayed out

and essentially we'll have no content in

the browser so if you're not using

parentheses you need to make sure

that your opening tag is in the same

line as return so set it up here

and I removed one character and then we

can do whatever we want so again we save

it and then of course previous format

for us if you have parentheses you don't

need to worry about it and a friendly

suggestion keep in mind that we are

using prettier so a lot of times per

year we'll add them or we'll remove them

so

I wouldn't suggest stressing about it

just something to keep in mind so notice

over here if I have those parentheses it

doesn't really matter where the opening

tag is I save it and prettier removes it

for me anyway just keep in mind the

general concept if you want to add them

add them if not make sure that the

opening tag is in the same line as the

return okay and up next let's discuss

whether we can Nest components and the

short answer

is yes and let's also see how we can do

that

so if I go back to my index.js

um let's say I decide that my component

is going to be more complex I'll add a

div

I'll say inside of the dev heading 2 and

I'll call this John Doe and then right

below it we're gonna go with paragraph

This is my message

and then down Route I decide that you

know what

these pieces are reusable

or I just want to simplify this file I

don't want to have the setting to and

paragraph

how I can set this value in a different

component and then render that component

well when you start by creating a

component and I'll purposely set up

two Arrow functions one is going to be

implicit return

so basically without the curlies and the

other one is going to be with the curly

braces just to Showcase that yes of

course it is possible so let's start

here with const so that's my first

component person and this is where I'll

set up that implicit return I'll say

Arrow function and essentially what I

want to return is this

I'm gonna go with my adding two

then let's copy and paste and now let's

set up that message in this case though

we will go

without curly so now we do need to

provide explicitly that return otherwise

it's not going to work basically we're

not going to be adding anything here so

let me move this sucker up let me say

return and now of course I want to

change this I'm going to grab

and I want to copy and paste so I have

three components now I have the greeting

I have the person as well as the message

so how we can nest

components well we simply need to

reference the name

and again same rules apply that's where

we go here with this Capital case and

also remember we cannot just place them

side by side

so we will have to set up some kind of

parent now in my case that's div

remember

you can go with some other

element as far as HTML semantics or you

can go with react fragments so for me

I'm just going to keep the div basically

we just want to reference we want to go

here with person

and then we also want to display the

message NES before you ask

we can Nest another

50 000 components inside of these ones

so imagine

you go here you'll create more

components you'll Nest them here and

then all of them are going to be

displayed eventually in the greeting and

effectively this is how our applications

are going to look like

so have that root one

so single root component the convention

is to name it app but you don't have to

and inside of it we Nest rest of our

components

so all the components we need for our

app

for example inside of the app we missed

a page component which contains more

components navbar sidebar and a header

now

those components might or might not have

their own nested components and

hopefully you see where I'm going with

this

we inject our root component in a div

with an ID of root in the index.html

which is located in the public folder

and as a result our app is nicely

displayed in a browser regardless

regardless whether it has 5 or 300

components okay and up next let me

showcase a awesome extension for the

browser which effectively will allow us

to see our component structure so for

that I'm actually going to open up a new

browser

tab just so you can see it on full

screen then we want to look for these

three dots

more tools and then extensions now in my

case of course

the extensions are you present but since

I wanna

showcase how we can get one I'll remove

it

then we go over here

Chrome web store

and let's search for react

developer and then tools

get it over here

yep we want to add it ADD extension

and once everything is in place now

let's navigate to a local host 3000 and

once we do that we can close this tab

then inspect

and you'll see this components tab

once you install the extension you'll

have this one and now check it out now

it does complain about the strict mode

so you'll see this warning over here

don't worry about it everything works

fine and we'll discuss the strict mode a

little bit later so check it out this is

our root component the greeting again we

haven't discussed the props and all that

and functionality don't worry about it

for now just focus on this

so we can clearly see our component

structure and this is super useful

once your apps become big and complex

since it's much easier to troubleshoot

you can literally pinpoint the component

and then see what is happening inside

again the extension is react developer

tools and if you haven't installed it

already just go to Chrome web store and

set it up on your browser all right and

I think at this point we have acquired

enough knowledge to start working on our

first project the Amazon best sellers

effectively a list of best selling books

and of course in the process we'll cover

more interesting react topics for

example how to add CSS how to handle

images

what are the props just to name a few

and our goal is to implement some of the

features

from this Amazon page now of course

We're Not Gonna recreate the whole page

but the main features will try to

recreate using react

and we're going to start actually with

the structure

so in the index.js I want you to create

a book component where technically you

can call it whatever you want and then

in there

let's just set up three components now I

can tell you right away that later we

will refactor

to one component it's only one book

component we're starting this way just

because I want to emphasize one more

time

the way you set up the application is

really up to you there is no rule that

says

you have to do one way or the other way

if you want to create component for

every single element

you can definitely do so if you want to

jam your entire application in one

component that's also an option

so a lot of times it really comes down

to a preference so first

we'll create three components notice

effectively we're just returning some

elements here

and then eventually we will refactor it

so I have the book component and there I

have few more components and then I have

book list component

which we actually

render

so this is the one that we pass into a

render

so let's set up this one and then we'll

get the values from the Amazon so first

let me navigate to the index one so at

the moment I have this greeting and all

that

I won't need this I'm going to go with

const and let's start over here with

book and list so that's my component

essentially it's going to be a section

so let's set up a return over here

and for now it's going to be an empty

section so there's not going to be

anything in there then let's remove

these two and now let's set up that

component so const book that's the

component as far as return we're gonna

go here with an article so we're setting

up the article for the book and then

inside of the book component will render

three more components and also in a

process I want to showcase that yes

essentially we can Nest as many levels

deep as we want so notice in here we

have book list then book is going to be

rendered inside of it and then inside of

the book we'll have three more

components and let's start I guess over

here with an image so I'm gonna go here

and since we don't have the values yet

I'm going to provide the heading 2 but

eventually of course it's going to be a

proper image element so let me change

this and I'm going to go with heading 2.

and we'll just say image Place holder

now I'm purposely showing multiple ways

how we can set up D components so notice

this is going to be implicit return

but we can also set up the explicit one

so first let me change around and say

that

second one is going to be title and here

we're looking

forward heading two so that doesn't

change we only want to change the

content and I'm just gonna write here

title and then last one is going to be

the author author and in order to make

it more interesting let me just cut it

out let me set up the curlies and let's

go to the return

as you can see

the result is exactly the same

we'll have some elements rendered on the

screen

it really comes down to our preference

so it's not going to be a image

placeholder we'll type over here

author let's save it and we want to move

up now we want to render all three

components so let's start with the image

then we want to go with our I believe

what title

over here and then last one is going to

be the author and then in the book list

let's move up

and let's say that we want to render a

book

for now let's just render one book

component and then we'll worry about the

rest of them so let's save and in here I

still have the greeting so I want to

change that one around let's go with

book list once we save check it out so

this is the result

essentially I have these three elements

rendered on the screen and we can

definitely see that if we go to elements

and notice here this is the root like I

said this is going to be our entry point

and then I have the section and in there

I have the article and before we even

get the values let me showcase something

really cool so in react if I just copy

and paste basically if I set up more

instances of this book component notice

now of course they're right away

rendered on screen and what's even more

cool

if let's say I decide that you know what

it's not going to be a book title

what if I want to go with title

of the book

you can save it and check it out all the

component instances right away have that

value again really really cool that we

don't need to run around

and change those values manually

effectively we just change it in one

place and we're good to go so we're done

with the structure

now let's go back to read me and see

what we need to do

so essentially you have a few options

you can go to your search engine and

type Amazon best-selling books or you

can follow this link now of course if by

the time you're watching this the link

doesn't work I mean the

companies change their resources quite

often so if you navigate to this link

and it doesn't exist then of course

you'll have to search for it the reason

why I'm providing the link

is simply because

that way you can work with the same

exact list since Amazon has

quite a lot of those lists out there now

you'll still be able to follow along

don't worry about it I'm just saying

just in case you want to work with the

same exact list I'm providing a link and

before we continue let me make something

extremely extremely clear

you won't have to buy anything there

again you won't have to buy anything

from Amazon and second this is not some

kind of lame attempt to trick you into

using an affiliate link

this is not an affiliate link it's

literally just the URL to the list that

I'm using I want to make this extremely

clear

and essentially we're just using it

because I don't want to come up with

these values I want to provide the real

values so once I'm done with this boring

round now let me navigate

to my list and again you can actually

copy and paste here or you can click

command and then

follow the link just remember that if

you have the same setup it's going to

open over here so of course that's why

I'll grab this one

navigate copy and paste and unless by

the time you're watching the video

Amazon has already removed the page this

is what you should see obviously your

values might be different but the idea

is going to be exactly the same

and effectively this is where we want to

grab those values I want to start with

image then I want to get the

title and after that I want to get the

author now I'm going to open them

because it's going to be easier to copy

and paste the values and let's start

with an image so essentially here's what

we want to do we're going to go to copy

image address and once it's saved in the

clipboard let's navigate back to

index.js and where we have the

placeholder now let's go with that image

tag and then let's provide those values

so in here we want to go with the source

and source is going to be equal to

whatever URL

we have in a clipboard and then as far

as the alternative well I'm going to

provide the title for that

so in order to get the title I already

opened a book in a new tab so let me

navigate here now I'm not going to grab

the whole thing

it's kind of a Overkill let me just copy

and paste here the title

and the same here with the heading too

and lastly we want to get the author

which I believe the fastest way is just

a copy like this

so let me provide here where I have the

heading for let's save it and yes it's

gigantic and all that don't worry we'll

add a little bit of CSS later and

essentially we'll fix the issue again

the cool thing is that

since we set up multiple book instances

you're gonna right away see that they're

rendered on the screen and whatever

changes will make in the individual

components will right away

be displayed on the screen now we don't

need that many book instances so you

know what for now why don't we just

leave four simply because we'll be

setting up a grid layout pretty soon so

if you have the same result

we're good to go and in the next video

we'll take a look how we can add CSS to

our react project beautiful at this

point we know how we can render HTML

but what about CSS

because as you can see I mean it's cute

to have this kind of list but

you probably agree with me that it does

require some CSS and essentially it's

not as difficult as one might think

effectively we just need to create a CSS

file now as always name is really up to

you

but I'm gonna go with index CSS since my

JavaScript file is index.js we want to

set up the Styles and lastly we want to

import that in our index.js file now I

can tell you right away that

for bigger projects

most likely you'll have a folder with

CSS files

which again

is totally

okay

you can definitely do so you'll just

have to change the path if you want to

set up the entire folder with bunch of

CSS files you can definitely do so

they don't have to be separate files in

the source

and as far as the logic I just wanna

create a reset

and then add to a body

from family background and a color then

we'll import and then we'll worry about

the classes

so let's start over here so I'm going to

navigate to Source again if you want you

can create a folder just your path is

going to change I really want to

emphasize that

because I keep getting questions about

it so I want to answer them here so

let's start here with index CSS as

always if you want to call this banana

CSS

it's also a cool option let's go here

with that reset

so margin margin zero

batting zero

and box sizing equal to a border box

border box okay beautiful and then let's

select the body now of course as you're

looking at the browser you won't see any

changes

in order for those changes to take place

we do need to import so first let's just

set up those Styles we're gonna go here

with font family and I'm going to set it

equal to a system font slightly that is

actually

my preference then let's go with

background and we're gonna go with

hashtag F1 F5

and f8 okay so that's the gray one and

then as far as the color I'm gonna go

with hashtag 222

let's save it like I said the browser

still displays the same list and now

let's navigate to index.js and we want

to import that index CSS

now later when we import JavaScript

files you'll see that we don't need to

add extension

and for the most part we'll say what we

want to import whether that is some kind

of array or whether that is the

component when it comes to CSS we want

to grab the entire file and we must must

must must provide the file extension so

since I have index CSS in the index.js I

want to go with import and then like I

said we need to go with the path so

this is our own asset

these are assets that are coming from

the libraries so when it comes to

libraries we don't need to provide a

path libraries are installed so we just

need to provide the library name now

when it comes to our own assets we need

to provide a path to that asset and it's

always going to start with DOT now there

might be two dots if we have to go one

level up but one that means that we're

in the same folder

so in the same folder we go with Dot and

then forward slash and notice it right

away offers me the test now I don't want

to test instead what I want is index and

then Dot and like I said the entire

file name including the extension with

the JavaScript files you won't have to

do that and the moment we save we should

see some changes and check it out it

looks like

some changes were applied now it's kind

of hard to see so let me navigate to the

big screen so notice this is our Giant

image and then we have some text then

this is the background now if you want

to take a look as always

just go to developer tools and you'll

notice that we have some Styles already

okay awesome so now let's keep working

I want to style the book list and I also

want to style the book

my single component

and essentially we just want to add the

class

now of course you can style in the index

CSS like you normally would let's say if

you want to select the section but in

most cases you would use some kind of

class and we just need to remember that

in react there is no class so I'm gonna

go here with some value and if I'll save

if we navigate to the browser

in the console we should see invalid

down property Clash did you mean class

name

so yes when it comes to react if we want

to add a class in the jsx we need to go

with class name not just class and once

we do that

it's exactly the same as we normally

would in

HTML basically we add the class and

we're good to go we have the Styles and

we don't need to worry about anything

else just the name is a little bit

different and in here I'm going to go

with book list

so book list and then the same I'll

apply to the book

so let me copy and paste I want to go to

the article

and then instead of book list it's going

to be a book

and basically I want to set up some kind

of grid layout once we get to 768

um as far as the book well I just want

to add some background make sure that

the image sits nicely in the card as

well as add some styles to you a heading

2. so let's navigate back to index CSS

first let's just grab the book list I'm

going to set up the width to be 90 of

the screen width then Max width is going

to be 1170.

so it's always going to be at least 90

percent of the screen width but it's

never going to be bigger than 1170. I

want to add some margin top bottom five

Rems I want to place it in the center so

I'm going to go with Auto and then I'll

right away display grid

and as far as the gap for the rows and

the columns it's going to be two Rems

again

the problem right now is the image

since the size is quite big that's why

we have this look so you know what I'm

actually going to skip a little bit and

I'm just going to say book so now I'm

selecting the article that has the class

and you know what I'll right away add

this IMG so I'll select the image and

I'm just going to say that width should

always be 100 so now it will nicely fit

in our card and object fit is going to

be equal to a cover we save it and

notice now of course

our project looks more presentable now

back to the book list once we get to 768

I want to set up that three column

layout so in here let's go with media

media okay screen and we're going to add

a Min width

so let's go here with and and min

width and that is going to be equal to

seven

68 pixels so once we get to that screen

size

we'll have that three column layout so

book list here and then inside of it

let's go with grid template columns

that's the property repeat and three and

one fraction let's save it as you can

see on a small screen

there's no difference but once we get to

the big screen we have nice three column

layout and now let me just continue with

the book

first I want to add some background and

I'm gonna go with the white one so

hashtag FFF then we want to go with

border radius and that is going to be

equal to 1 Rems then we'll add a little

bit of padding

in my case I'm gonna go with two Rems

and then text align Center so Place

everything in the center

we already have the image one so so we

really need to focus on heading two

that's it so book heading two

and then margin top one REM and as far

as the font size I think I'm gonna go

with one Rems and now what I can do is

set up the zoom again to 175 since

everything is nicely displayed in the

browser and again if we take a look at

the

bigger browser window we can also see a

nice list so that's how we can add

the most basic CSS to our react project

we create a CSS file again I'm going to

repeat yes

can be index it can be shaken back CSS

whatever if you want to set up the

folder the only difference is when you

import then of course you need to start

with DOT since it's going to be in the

same folder then forward slash the

folder name and then the file

effectively we want to import everything

so later with JavaScript you'll see how

we're importing something specific from

the file whether that is component

whether that is a data but with CSS we

grab everything and we need to provide

always always a extension as well which

is not something we're gonna have to do

with the JavaScript files

with this in place now let's talk about

the images in react okay and once we

know how we can apply

CSS to our react project now let's talk

about images and I can tell you right

away that

it's an optional video technically if

you don't want to follow along you don't

have to but again it's the case where

I'm getting questions about it in the

course q a so I just thought that it's

very useful if I showcase everything

step by step

and essentially when it comes to images

we have three options

we have external images that are hosted

on a different server please keep

something in mind

this image

is hosted

on a different server

so

Amazon

essentially

is providing this asset so we're not

doing anything we just take this URL

and we provide it for our image tag and

you can definitely take this URL and

you'll see that this is the image

so hopefully that is clear that's our

first option so let's say when we'll be

serving our data from our own database

or getting some external API

if there's going to be an asset for

example image asset then there's always

going to be a URL that points back to

some kind of external server so that's

our first option

pretty straightforward correct just

provide the URL and we're good to go

and after that we have two options for

local images one in the public folder

which we're going to cover in this video

but since it's less performant

it's not something we're going to

implement in our projects

and then we have local images in the

source folder which is a better solution

for assets since under the hood they get

optimized so throughout the course we'll

stick with the source folder if we have

local images but since we haven't

covered the imports and exports and all

that and since we'll have to utilize the

S6 modules for that for now

we'll just put it on hold

but since I want you to be aware of this

option of public folder even though it's

not something we're going to implement

since it's less performant in this video

I'll show you how we can set it up again

I'm getting questions in course q a

so

I might as well cover everything step by

step and essentially the steps are

following we want to save the image it

can be any image but of course I'll use

same image

we want to create a images folder in

public now technically you don't have to

again create the folder but since in

most cases you'll have multiple assets

for your project it kind of makes sense

to set up the folder structure as long

as that image is in a public it's going

to be available so keep in mind

technically you don't have to have the

images folder and then we want to copy

and paste the image we downloaded

we want to rename it now that's totally

optional but in my case I'll do that and

then in a source where we have the image

stack we want to replace the URL

so instead of the external one we'll use

the internal one and in the process

you'll see that pretty much any asset we

add to the public is right away publicly

available hopefully that makes sense so

in my case I know that I'm going to call

this book one and in the source notice

I'm going to go forward slash images

because it's in the folder if it

wouldn't be in folder then of course I

would just go with DOT forward slash and

then the file name and then book and the

full extension so let's try this one out

I'm going to navigate here I believe I

can actually

get it from the source as well but just

to Showcase that of course

we can get it from the entire list let's

navigate here notice the save image as

option and I'm gonna go right away over

here and I'm gonna say book and one

let's save the file now it's on a

desktop I want to navigate

to my desktop I'm going to open up my

project

okay then very important we want to

place this in the public so not in a

source The Source option will cover

later we want to go with images

then we want to drag and drop this

sucker here and then this one over here

and once it's available you'll actually

notice

if you take the URL now

again in my case the name is following

but if you use a different name then of

course you need to use that one if you

take here this forward slash and added

to your localhost 3000 you'll see that

right away it's available so I have this

localhost 3000 so that's the server

that I'm working with notice if we copy

and paste

the full path so images and then book

and whatever extension if I press here

notice this is going to be my image so

whatever we place in the public right

away is publicly available and what that

means is that we can also use it in our

code

so now we just want to navigate back to

index.js

and instead of this external URL

we want to go dot forward slash

then images and then book one on the

extension so essentially whatever we

place over there

is immediately available in our code

as well as in the browser

again the reason why this is not a

popular option is because

these assets

don't get optimized so later when we'll

place our Assets in the source folder

under the hood they get optimized

and therefore

the end result is better our application

is faster

but yes

you also have an option to

put your assets in the public and then

access them in a code or provide them in

the browser and lastly I just want to

showcase that if you go back to your

project and again inspect the elements

you'll see now that the path

URL path actually goes back to our own

server and notice again this is going to

be the full path localhost so that's our

server then images and then book one

so since the image the asset is on the

same

server we don't need to go with the full

URL essentially we just need to set up a

path that is relative

to our public folder hopefully it's

clear and up next let's talk about CSS

in jsx all right and once we're familiar

how we can add

styles using external style sheet now

let's take a look how we can add CSS

in our jsx and effectively we just need

to pick the element

we want to apply our styles to and then

we need to go with style attribute and

we need to set it equal to the curly

braces

and essentially these curly braces just

mean that we're going back to the

JavaScript plan and we'll discuss them

in more detail in one of the following

videos when we cover the rules of jsx

basically when we cover how we can add

JavaScript to jsx for now just focus

that you need to provide the curly

brushes and then inside of it we need to

provide a JavaScript object so please

don't think that it's some kind of

special

react syntax where you need to go with

these double curlies no

effectively since we need to provide the

object here that's why I have this

result we always start with one curly

braces and then at the end of the video

I'll show you how we essentially can

just pass the reference to the object

now when God's about the object is that

it's a JavaScript object what that means

is that if you have a CSS property

that has The Hyphen you'll have to

capitalize and as far as the values

they'll have to be here as string so

let's try it out here I'm going to save

let's navigate to

index.js and let's look for a heading

four so like I said we go here with

style notice automatically it's set up

with the curly braces and here we

provide that JavaScript object

so let's start here with color and as

far as the value again key value Pairs

and then the values are as strings so

hashtag 617

and we want to go d98 then we want to go

with font size so let's add a comma not

a semicolon and go with font size and

that is equal to again

quotation marks

0.75

Rems by the way it looks like in the

readme I'm missing the RM part

so of course in your case that's not

going to be the case anymore so let me

save here and then

we're looking for a third one and that

is going to be margin and again we are

not going with margin hyphen top we go

here with margin top and we want to set

it equal to 0.5

Rems let's save it

as you can see the styles were applied

but one gotcha we need to be aware of I

guess one more gotcha we need to be

aware of

at the end of the day these are inline

styles

so what that means General CSS rules

apply

so what am I talking about well if let's

say

you'll try to select the same heading 4

in CSS and try to change the properties

that we already set up over here with

the inline one it's not going to work so

letter spacing yeah it's going to work

since we don't have it over here

but as far as the color if I try to go

with red it's not going to work and in

order to speed this up I'm just going to

copy

so we're going to go here copy and paste

the notice yeah the letter spacing

change but not the color now why am I

telling you that is because later

as you're progressing with react you'll

most likely start working with external

libraries

I don't know maybe a slider library or a

model Library whatever

and one thing to be aware of

those libraries do use inline Styles

here and there

some quite often some less so keep in

mind if you'll want to change some

styles that the library provides

sometimes it's not going to be enough to

just go to the CSS and change it

if the library is using inline Styles

you'll have to figure out how you can

modify those inline Styles and only then

you will be successful so don't get

frustrated if you install the library

and you try to

add your own Styles but it's not working

always always

first check the elements and if you see

the inline Styles you know that you'll

have to do more work and lastly I just

want to mention that yes there is an

alternative

remember

we're providing here a object now we're

writing JavaScript correct

so what we can do

well we can create one

and we can create the object here we can

create it outside of the component that

doesn't really matter and we can just

provide the reference notice how the

values don't change

values exactly are the same

the only difference is that now instead

of passing that object directly

we just set up the reference so let's

try it out I'm going to go to index.js

and this is the case where if you have

of course the implicit return you will

have to refactor to explicit since I'm

going to be setting up this object over

here so you won't be able to do that

with a title

but since the author is right away

set up as a explicit I'm good to go so

let me go here and set up that long name

so const and then inline heading

Styles and that is equal to my object

and effectively I'll just cut it out

here

I'll cut it out here copy and paste and

then we go with inline heading Styles

now the reason why I'm showing you that

is because again

if you'll work with someone else's code

you might see either of these Solutions

you might see the object passed in

directly or you might see them

separately and basically

this is the point that I want to make in

this video for the most part

there are multiple approaches available

so there is no right or wrong

if your preference is to set up the

objects and pass them in this way

go ahead and do that if not if you want

to pass them directly in the code that's

also an option as long as the result is

the same it really comes down to your

preference

now why we won't use the inline Styles

in this course because if you ever work

with inline Styles you know that they're

somewhat of a pain so yes it's a good

solution here and there but in general

you'll want to stick with external style

sheet maybe some CSS libraries and all

that because adding styles of course one

by one to each element is somewhat

painful but please be aware of this

option because you might see that in

someone else's code all right and up

next let's see how we can use JavaScript

in jsx so in the previous video we

covered CSS now let's talk about

JavaScript and before we continue I want

to refactor this to a single book

component and I'm not going to give you

the entire speech one more time

essentially my preference is to set up a

component with all of these elements so

this is exactly what I'm going to do but

yes

you can always split it up into more

components so I want to navigate back

and essentially where I have the book

I'll remove all of them and basically I

just want to grab the elements one by

one of course I'll remove the other ones

so let me take this one out

so this is going to be right after image

and I'm also not going to use this

inline setup essentially I'm going to

add that code in CSS

so let me take the heading 4.

I'll place right after heading 2. I'll

move the style

and effectively I just want to copy

these Styles and set it up in the index

CSS and in order to speed this up I'm

going to grab this code as you can see

pretty much the same properties and

values I just don't want to spend time

on typing them so let me navigate back

I'll move this one and copy and paste

and as far as the index.js well I want

to remove all of this so now I have book

list

with four book components and then I

have a book component

now the only thing is that I need to

remove this semicolon now let's talk

about jsx

and like we already discussed in the

previous video

if we add these curlies in jsx that

means we're going back to the JavaScript

land so essentially we can use our

vanilla.js logic inside of the curlers

now one big gotcha is that the value

must be an expression so essentially it

needs to return a value and of course

I'll show you the example and I'll also

show you what happens if we provide a

statement so there's a difference

expression returns a value statement

does not and let's just start by setting

up the variable somewhere here

and

I'm going to name this title and

effectively where we have the heading 2

with the title let's pass it in so

notice in here we go back

to the JavaScript so we set up the

curlies and since we have the variable

we can directly access it and you'll see

what are the benefits back in the index

.js

let's go over here and let's grab this

value

for the title so let's cut it out and

I'll set it up over here I'll say const

title and again you can set it up inside

of the component or you can set it up

outside of the component in the file or

you can set it up in a different file

and then import it we just haven't

covered the es6 modules yet so let's set

it equal to a string so that doesn't

change and now instead of

card coding here in the heading two

we're gonna go here with title and

effectively whatever changes we apply

right away will be displayed in the

browser so it's already somewhat Dynamic

now of course we're not getting the data

from somewhere else from the external

API for example and all that stuff but

we're already moving in the right

direction

so when you think of dynamic think of

less hard coding

so that's the first then let's take a

look how we can set up the author as

well

so now let me take this value and just

to Showcase that it's still going to

work

I'm gonna go here and let's come up with

a value author copy and paste and same

deal we go back

huge JavaScript land and we simply

provide the variable in this case

then let me show you some instances

where this is going to fail where

basically if we'll set up a statement

it's not going to work so first let me

go right after the heading four and

we're gonna go with paragraph So if

we'll write a statement and if we'll say

let X is let's say equal to 6. pretty

much right away you'll get an error and

you'll get these quickly lines again we

can only pass here an expression

and essentially the expression returns a

value now this is a side note but if we

want to comment something out in jsx we

need to go with this syntax and of

course there is a shortcut for that so

in my case that is command and forward

slash but if you want to see in your

operating system go to edit and notice

it's going to be toggle line comment so

that's how we can comment out and of

course once I do

notice I don't get the error and let me

showcase one more time with the new

expression so let's say if I have 6 plus

6 this is going to work because again

this returns some kind of value

hopefully that is clear so every time we

want to go back to a JavaScript

we just set up the curlies and we can

start applying our logic and lastly let

me just showcase that we can do more

than just accessing the variables of

course when it comes to Strings we have

a cool method by the name of two

uppercase so we can simply provide that

we can invoke it and as you can see we

don't get the narrow the author is now

in uppercase now I'm going to clean up

basically I'll just leave these

variables over here

and remove these ones just keep in mind

that if you ever need a reference you do

have a readme so let me remove this also

this one as well I also want to clean up

this gibberish

and up next let's talk about props in

react all right and up next let's talk

about props and why they're so useful

and also so powerful

first let's start by doing a little bit

of spring cleanup or essentially I just

want to set up three variables with all

of the values so for author title and

image and where I have the book

component I want to access them so

pretty much the same thing again we're

just not

hard coding anymore and yes I'll place

it above the book list and you'll see in

a few videos why so let me move the

sticker up first then I want to do the

same thing with the author and now let's

set up that image one so const

const time G is equal to

um let's just grab this string now copy

and paste and now where I have the

source what do we do we set up the

curlies so now we're back in JavaScript

plan and we provide the variable name

awesome then the same we're gonna do

with alternative

so let's just provide here title and

before we go any further let's discuss

parameters and arguments and as a note

you can actually take this code

set it up anywhere in the index.js

and

effectively is going to run so if I go

and inspect the console I should see job

and developer so in vanilla Jazz for

every function we can provide parameters

when we're setting up the function and

then when we invoke the function we

provide the arguments and then of course

whatever logic we have in this case is

just a log

gets executed okay hopefully we're clear

on that and now let me remove this code

so what does it have to do with react

well

but it also has to be some kind of way

how we can pass the data down to our

component because at the moment yes it's

nice yes we're using the variables and

all that but ideally of course you would

want different

books rendered in the browser correct so

at the moment we're pretty much

rendering the same but we need to come

up with a way how we can pass data

different data

to individual components so we have the

same structure but the data is going to

be different and the way we do that is

by using of the props object so every

component we create gets automatically

there's props object which essentially

is the parameter now we can call this a

shake and bake it's an awesome choice

but a common convention is calling this

props

so again it's provided right away by

default so we don't need to do anything

so instead of creating a component and

then saying yeah there's going to be a

param it's right away provided

so react effectively injects that

so if I type here props I know that this

props will automatically be passed down

to me and now let's go with log and we

have a few places where we can log that

we can log it here in the function body

again above the return if you place

anything after returns not going to run

or we can do that directly here in the

jsx so we can go with console and log

now I'll actually remove this one right

away

but I just want to showcase and you know

there's going to be too many console

logs so I'll go back to two books for

now

and then eventually we'll add more so if

you take a look at the console you'll

see four objects again the reason why we

have four because we have two console

logs and we have two components so if we

do two times two yes we have four and

check it out now for now it's an empty

object but that's already a good start

that means that we'll be able to access

something now we have not provided that

something

so we have an empty object but it is a

awesome start and the way we provide

those values is here

so again

props here when we set up the component

but then when we render the component

that's where we provide eprops and again

we'll start with the manual way where I

can go here with job and then equals and

then if it's string then we need to use

the quotation mark if it's a number or

variable whatever then we need to

provide the curlish so

in here I can go job developer

and as far as the second book why don't

we change things around I'm going to say

here random

title and then the second one will be

number like I said

when it comes to numbers we need to use

the curlies

if we have a string then we just use

quotation marks and if let's say we want

to provide here the variable same deal

curlies and then we can access it for

now let's just use the number I'm going

to say 22. and the moment I say like I

said I will remove this log there's no

need to over complicate things

now what I see in the console job

developer so this is an object

that's the props object

and then for the second one I have title

and number okay so this is clear now how

we can access those values

well

just like any regular object it's an

object these are the properties and

these are the values what do we normally

do in JavaScript we go with object dot

property correct same deal over here

now since these are extra props

basically since we're just testing I'm

going to add more paragraphs and I'll

copy and paste essentially the most

basic way we go here with the curlies so

we go back to the JavaScript plan and we

go with props job

then we want to set up props again we're

referencing the same object go title and

then we go with props and a number let's

save it and don't care about the console

right now but you'll notice that

basically

our components now have some extra

values

now one important thing if you don't

provide the prop

even though in your structure you're

accessing it

you have nothing there so notice how the

first component has the job prop with

this value I don't see it anywhere in my

second component why well because it's

not over here it's not present in the

second component so that's very

important

to remember

the prop will be only displayed if it's

actually provided

so the first one doesn't get the title

or number notice nothing is rendered in

the browser why well because we don't

provide them

so again

you'll have the structure

you'll provide the props and then you'll

be able to display them if the prop is

not provided

either you're not going to display

anything or you'll get an error let's

say if you're trying to access some kind

of value that doesn't exist please keep

that in mind

so that should do it for

the generic setup again

we provide here the prop name then we

provide the value now let's use the

author title and image

so instead of the testing ones now let's

actually provide those values so I'm

going to remove all these paragraphs

let's save and then one by one let's

provide them

so what is the first value author now as

far as the prop name does it have to

match here no

you can write banana but when you're

accessing that's when you have to go

with props.banana

so this is the name this is the value

and yes

a common of course convention is to use

the same one but it's not always

possible so we just go with author

author curlies we go back to JavaScript

and then we provide the variable and the

same thing over here title is equal to

battle and then lastly what do we have

we have the image same deal we provide

all of them and in order to speed this

up I'll grab this and I'll copy and

paste and once we have successfully set

up all the props now of course instead

of accessing these variables directly we

need to go with props dot image props

dot title and yes of course in the

following videos we'll take a look how

we can shorten this up

but for now object property object

property and effectively it matches

whatever we're passing here

so we want to go here with props dot

title and then we want to go with props

dot author once we save if everything is

correct we'll have the same list

but the difference right now of course

that we are providing these values

dynamically which is really cool but we

also need to keep in mind that if we

don't provide some specific prop well

we're not going to render anything on

the screen check it out since the second

book component doesn't get the image we

just see the alternative hopefully that

is clear and in the next video we'll

take a look how we can

make our setup more Dynamic all right

and once we're clear on the most

straightforward setup

now let's make things more interesting

and create two of those objects yes

we won't have totally Dynamic setup yet

that is still coming where basically

we'll just iterate over the list grab

the values and render everything on the

screen but at least we'll be moving in

the right direction so here's what I

want you to do first create a object

with

the same three variables we already used

in the previous one so author title and

image now create a object in my case I'm

going to call this first book and set

them up as properties

then

create a second object and essentially

just go to Amazon and get those values

and don't worry about the local image

just use the external one it's going to

be faster unless you really want to just

keep in mind eventually we'll still

switch back to a local

image option using source so it doesn't

really matter and then we'll see how we

can provide unique values

paste on our data so let's start working

on that where first in the index.js I

want to create two

objects I'm going to go here with const

and then first book that's the object

and then we want to grab all of those

values I'm not sure whether I'm going to

be able to just copy and paste so I'm

gonna do it this way so author then we

want to grab your title

that is equal to this one

and then lastly I have IMG

and that is equal

to list string value we can remove the

properties

and let's just add for sure that image

hopefully it's clear

uh we need to provide all of the props

okay that's good as you can see we get

an error since there are no properties

anymore don't worry we'll fix that in a

second

so now we want to copy and paste and

let's come up with a different name of

course we can have two variables with

the same name

then let's navigate

to our list

and I'm just going to look for some

other random book and as I said this one

actually is a very good book again this

is not

some kind of Amazon promotion I'm just

saying it is a good book so let me grab

the title I guess first

then we want to grab the

author by the way

collect something

we want to take the title here

provide so that's the author and then

lastly we want to get that image so I'm

gonna go with copy image address and we

just want to provide it here so copy and

paste and now instead of accessing the

variables we're gonna go with first book

or the second book so either of these

objects and we can probably put already

two and two together we'll use basically

one object

per component and essentially we just

want to access

those properties so instead of author

I'm going to go here with the first book

and in order to speed this up I'll just

set up multiple cursors in my case that

is with option and the mouse click and

I'll just say first

book Dot and then whatever property and

essentially we want to repeat

for a second component as well so again

same deal

we use multiple cursors

second book and then dot once we save

check it out now we have already a

dynamic list

again it's not totally Dynamic but we're

moving in the right direction and if you

take a look at our console log you'll

see the values that we're getting

so these are already different values

the structure is the same but since

we're providing different values to our

props the result that we see on the

screen is also different

structure is the same the result is

different since the values the data that

we're providing is different right and

up next let's take a breather and let's

discuss multiple approaches how we can

access props in the component and before

we continue

let me just make something extremely

clear there is no right or wrong

again I know you're probably sick of me

saying this but it really comes down to

your preference the reason why I'm

showing multiple approaches because I

want you to be aware

just in case you see that in someone

else's code

also in this video we will highly highly

highly lean on the the structuring

concept in vanilla Jazz and if you're

not familiar with the concept or if you

see

a feature during the video that maybe is

new to you I suggest watching this video

the JS nuggets playlist on my YouTube

channel and the link is over here and in

there we cover everything in vanilla.js

setup and in more detail and ensure the

structuring in vanilla.js just allows us

to pull out the properties

so we don't need to reference the object

anymore and in the long run it just

saves us time as far as the example

again if you want to copy and paste you

can definitely do so you can set it up

in the index.js but I'm just gonna

show you here in the readme that if we

have an object with some kind of

properties instead of doing this so the

object name and then the property we can

just pull them out so that's the the

structuring we need to reference of

course the main object and here we go

with whatever properties we want to pull

out and then in rest of the code

we just need to reference these two so

we don't have to go anymore with some

object and then dot name and in our case

it just allows us to do this

where we have the perhaps object and

instead of going props.props dot props

dot we can simply go with props pull out

the properties that we know exist over

there again

let me repeat one more time you cannot

magically access the prop if it's not

there so if you don't provide when you

set up the component

it's not going to be there

hopefully that is clear and essentially

then we can just go with the property

name so let's try it out let me navigate

here

I know that I'll access over there

three

props

so object with three properties image

title and author

and that is equal to a propped object so

what do we need to do well now we just

need to remove

all the prop instances that's it let's

save and if everything is correct the

result is going to be exactly the same

the difference well we need to type less

we just reference these properties once

and we're good to go now alternatively

and this is something that I do discuss

in the video so again if this is new to

you I strongly suggest referencing that

video we can also destructure

in function parameters so in our case

that's the props object now keep in mind

though once we do that if you'll try to

cancel log props it's not going to be

defined so what am I talking about well

this is a function

right

and at the moment we have props

parameter now since it's an object we

destructured inside of the function body

instead I'm going to say all right I

know that the object is going to be

there and I right away want to pull

these properties out

Again Properties need to match exactly

and everything

but essentially we don't need to add

this line of code we can do directly

here in the function parameters let's

remove this

save and check it out again everything

still works and like I mentioned

in the beginning of the video it really

comes down to your preference you'll see

some people who use this type of setup

and you'll see some that implement this

one and it really comes down to

what is your preference

which code makes the most sense to you

at the end of the day they deliver the

exact same result instead of using

props.props.props Dot we just grab the

prop

and set it up in our jsx okay and up

next let's discuss special prop in react

called children

which provides access to everything we

render

between component tags as I say note the

goal of this video is just to showcase

the general concept of children prop

since honestly at least during the

course we'll only use it when we need to

set up context API

so if by the end of the video you're

still iffy on some stuff or just don't

see bunch of use cases for children prop

it's totally okay

we'll return to this concept

when we cover context API

and essentially let's imagine this

scenario what if for some reason

I want to render paragraph and a button

in one of the components it doesn't

really matter which one just one of them

well you can say we can go to a book

component let's add some dummy text

and let's also add a button

and let's just say click me let's save

and everything is awesome but of course

since we're adding it

to the component all the instances get

the paragraph as well as the button

so what's the solution well we could

render it

in between the tags we just need to pick

the component so in my case I'm gonna go

with the second one or I'm sorry I'm

working with the first one I'm telling

you the second one so I want to do that

with the first one but again it doesn't

really matter which one we just want to

create a opening and closing tag

then and as I know this is the incorrect

syntax we want to do it this way and

then place the paragraph and the button

in between those Stacks so let's get it

out here

and let's set it up and the moment I

save I actually don't see them in any of

the components so what's up with that

well you see

if we want to render something that is

between the component tags we need to

use a special prop

and the name is children

now before we access the children let me

just make something really clear

since we're already destructuring in the

component since we're accessing the

object we'll need to provide the prop

over here

now if you still have this setup where

you have props you can log it and you'll

see the children and that's why I will

switch to this one to the second

approach just so you can see that one

component

has the props and the other one doesn't

again you can use either of these

approaches just remember that children

is going to be over here

if you're destructuring right away in

the parameters so let me just showcase

that so we go here with children prop

and the name must be exact so don't type

here children like this don't say

children's or whatever no it has to be

children's so this is an extremely

important point it's a special prop

provided by react so we cannot use

whatever name we like we have to use

children and if we want to render the

children we simply go with curlies and

then

access the prop let's save it and now

you'll notice that the first one has the

paragraph as well as the button

now we can move this up and down as we

like so let's say if I want to place it

on top just render Children First

again there's really no rule for it

really depends on your setup and now let

me refactor it just so we can see

basically a props and that way I can

showcase the children so let me cut this

one out I'll say Here Comes copy and

paste let's set it equal to props

props over here and let's log it

so let's go over here with log and let's

say props

and once I open up the developer tools

and console notice over here

so I have two objects but the first one

actually has this children

so notice special prop and essentially

we just need to set it up in our jsx now

the second one doesn't have that

children prop

so as a result it doesn't render

anything

wait let me just showcase how it's going

to look like on a big screen so

basically we have these two cards and

optionally

if you want to

set up your cards in a way that they're

not stretching we just need to add a

little bit of CSS logic so

let's navigate to index CSS

we have book

heading four again I'm not going to keep

that paragraph and a button but just in

case

you want to keep it for your reference

we can add here margin

1 RM 0 and 0.5

so that's for the paragraph and then

if you want all your cards to

basically start at one point and just

end where the content ends you can go

here with align items and start and

essentially or at least it should work

not the line itself sorry align

and items and then start and once you

say notice so essentially your cards are

just going to be spanning as much as the

content instead of stretching so by

default

when it comes to CSS grid it stretches

all the items so if this one has a bunch

of content then this one will also

stretch like I said in my case I'm not

going to keep it if you ever need a

reference you can always find it in the

readme so I'll leave I guess the props

in such a way but I'll remove the

children

I'll move children over here I'll keep

the log because

pretty often we use it and now let me

remove the paragraph as well as the

button so that's the general concept

behind children which again essentially

allows us to access everything we are

rendering between the component tags

okay and now let's finally set up a

proper list and iterate over it which

will be our actual setup in all the

course projects

and most likely in all your other

projects as well so yes finally we have

arrived at the list which is going to be

our typical approach as they said now

during this video we'll utilize the rain

method called map and if you're not

familiar with it please reference this

JavaScript nuggets video where I cover

it in great detail

and essentially we'll start with

refactoring

first

I want to create an array in my case I'm

going to call it books and then let's

remove everything from the book list

and after that I'll show you an error

that we're gonna get if we try to render

objects so let's get cracking I'm going

to navigate back

I have two objects now I want to place

them in the array

so I'm going to say const and books so

that's my array and now let's Place both

of these objects in there so we don't

need the names anymore basically we can

just remove this

and this we can add right away comma

and we can remove this part as well as

the semicolon so now I have my structure

effectively I have an array

of items and each item is that object

now also we right away want to remove

everything that we have in the book list

otherwise of course we're going to get

the error and now let me showcase what

happens if we try to render objects in

react so if I go with the correlation so

I'm going back to JavaScript and I'm

going to say box so I want to access the

books variable

and then if we take a look at the

console we'll see these giant error

messages and essentially here's the deal

in react we cannot render

object directly in the jsx and I'm

purposely showing you this error because

throughout your react Journey

when you work with data here and there

you might see this error so the first

thing you want to do is double check the

data that you're rendering

if you see objects are not valid as

react child blah blah blah blah that

means

you need to double check your data

essentially somewhere in your data you

have an object and we cannot directly

display it in jsx now what's the

solution well eventually we'll use map

method we'll iterate over pull out the

properties

and one by one basically pass them to a

book component but before we do that

let me just show you step by step how we

can work with arrays in react so first

let me just remove this error again for

time being we won't see anything on

screen

and let's just create a basic array

let's say const names noun is equal to I

don't know John Peter and Susan why not

I'm not being particularly original but

hey it's Thursday and I think that

regular names are good enough if you

want to go on shake and bake Bobby Lee

of course you can do that and if I'm

gonna go back to my book list and if I'm

gonna change and I'll say names once I

save I can see that everything is nicely

displayed on the screen

so we can definitely render array

but most likely you will agree with me

that

it would be nicer if we could wrap these

values in some kind of HTML because

essentially at the moment I just have

here this string so again yes I'm going

to go back to the root I'll take a look

at the book list and notice effectively

I just have these string values

so how we can wrap this in some kind of

element

so instead of displaying these strings

essentially we'll display elements well

this is where the map method is going to

come into play

so let me show you first in the readme

basically react method creates a new

array from calling a function for every

array element so

I have names array I can use the map

method and I'm going to call a callback

function for every item in the array and

this is going to return a new array

and eventually

we'll wrap

our items

the moment these strings

in the heading one so let's try this one

out back in the index.js I'm going to go

here with const and then new

names then let's set it equal to names

map so again this returns a new array we

pass in the Callback function and

essentially the first parameter

references the item so if the item is

going to be an object it will reference

the object if the item is string

it's going to reference that string and

hopefully we are on the same page and

since it's a parameter we can name it

whatever we want in my case I'm going to

call this name and yes this is the case

where you can call this a vegetable as

long as you reference it correctly

you'll be good to go before we do

anything let's just see what are those

values so console log what do you know I

have John Peter and Susan so those are

the string values

and what's really cool that we can

effectively just set up a return

and we want to return a HTML element

wrapping that specific

string of course with objects it's going

to be a little bit different but for now

we simply want to go here with return

and then whatever element you want in my

case I'm going to go with heading one

and now I want to access it so now I

want to say you know what grab me this

name parameter and before we render

anything let me just showcase what is

the value for new names let's save it

and in the console you'll see a new

array which is of course awesome and

then check it out

now I have those react elements

so essentially instead of doing this

manually

we iterate over the list

we wrap it in some kind of element and

we're good to go and as a result

basically we can just replace names with

new names

save it and what do you know now I

actually have three heading ones with

these values and as you can see this

right away

opens up a lot of doors

because this truly is a dynamic setup I

have some kind of data which is a list

and I can iterate over that list

and return

whatever HTML structure I want to see on

a screen now don't worry about this key

prop

erly we'll fix this warning in few

videos also I want to mention that since

we have this option to go back

to JavaScript land essentially you can

also take this code and right away write

it over here remember we are looking for

expression so we want to get some kind

of value back and essentially with map

this is what we're getting so if you

don't like setting up the new variable

and then accessing it you can do this

directly so essentially we're still

doing the same thing the difference

right now is that we're writing

everything here inside of the component

again two flavors there's no right or

wrong

you can use either of these options the

result is going to be exactly the same

again we iterate over the list and we

just wrap the elements

in some kind of HTML structure

and once we are familiar with the basic

setup up next we'll take a look how we

can do the same thing with our books

array okay and up next let's set up a

proper list and essentially what I mean

by that is

iterating over the bookstore and then

for every item eventually we'll return a

component

so let's start by just navigating back

to index.js

and we want to remove everything that

has to do with names

of course you can keep it for your

reference just keep in mind that it's

already available in readme so it

doesn't really matter so again let me go

back to empty book list and like I

mentioned in the previous video if you

want to set up a new variable and then

render it in the book list

totally

okay option in my case I'm going to do

it right away in the book list

effectively I'll iterate over and return

that new array so we want to start here

with box then map and again we're

passing the Callback function so yes

you'll see the syntax over and over and

over and over again and the honestly

fetching data

and rendering it on a screen

is going to be your bread and butter

when it comes to react applications it's

hard for me to imagine a project where

you won't be doing at least one of them

so

yes this is the syntax you'll see over

and over and over again and don't worry

the more times you'll write this

the more familiar you'll be with the

entire setup so again we have this

callback function here and we just need

to decide what we want to return because

remember when it comes to functions by

default they return

undefined all right so yes explicitly we

need to set up a return and for now

let's just go here return and then div

and just so you can see that pretty much

everything works even if we don't access

values from the array let me just go

here with heading one we're heading two

whatever doesn't really matter and let's

just say item here

and you'll notice that actually

everything works

so I have those items on the screen why

well because I have an array with two

items we are iterating over here and

then for every item this is what we

return so technically we don't need to

even access it now it kind of makes

sense right

since we're iterating over the list we

want to access those values but

technically we don't have to and now

let's grab here this book

so this is what I'm going through

do with my parameter I'm going to name

this a book just please keep in mind we

cannot pass it directly so if I go here

with book and I'll do the same thing

I'll say book I'll get the same error

again object are not valid as a react

child so what do we need to do well

we need to pull out the properties

so we can either destructure them

or we can simply go to book that title

and the reason why I logged it because I

want you to see that we're iterating

over and pretty much we're getting

each object so yes if you have 200 of

them

you'll have 200 logs you'll access 200

items and now effectively we simply

wanna

like I said access the property now

eventually of course I will structure it

and all that for now I just want to

showcase that if I go here with title

I'll have title in my heading twos if

I'll go with author I'll get an author

now for the image of course it's going

to make sense if I

set it up

in different element but hopefully you

see where I'm going with this what's

next well even though we can nicely

return HTML elements directly in our

callback function

let's also remember that we still have

this book component

so why don't we put two and two together

so we have a book component that already

has the HTML

and it's simply looking for these three

things

image title and author

so if we go back

to our callback function

and if we return book and pass in the

values it should work

correct so let's try it out I'm going to

go back to my return I'm going to write

here book so I'm rendering now the book

component

and for now let's just pass them one by

one

in the following videos I'll show you

how we can pass the entire object as

well as how we can spread out the

properties which is my favorite way of

passing in the props but for now let's

just go one by one and let's say over

here book and then remember all these

properties are over here so above the

return we want to go with const then set

it equal to a book so essentially we are

destructuring something that we covered

already before and we want to go with

image then title and author and yes I

know that those properties are in there

so as far as the return since I know

that I need to pass them as props what

do we need to do we just go here image

is equal to image

title is equal to title and hopefully

you see where I'm going with this

one by one essentially I just passed

them in and as a result you'll see this

cool setup where again we have structure

in one place

we have a structure for the book

component

and essentially

we just iterate over

some data some list

we pull out the properties out of the

object

and then for every item we return this

component

and essentially we get this awesome

setup

where now all our logic is here

in order to render stuff on a screen we

simply need to iterate over and for

every item we just need to return the

component

all right next let's get rid of that key

prop warning in the console and

basically every time

you'll render a list of items in react

react wants to keep track of those items

so we need to provide a unique value and

set it equal to a key prop

and typically it's going to be an ID and

since we're creating this list ourselves

essentially we'll go back and just add

these two properties keep in mind that

the property name doesn't have to be ID

just these values need to be unique so

if you call this vegan food truck it's

totally okay as long as you provide

unique values and they don't have to be

numbers

essentially you can turn this into a

string of one and string of two and

hopefully you see where I'm going this

and lastly normally

will be fetching data from some kind of

external resource anyway so

those values again most likely IDs will

be right away provided

and I'll talk about the indexes

at the end of the video and why we

should

avoid that so first let's just go back

to index.js and we want to add those

unique values again not going to be

particularly original I'm just going to

go with id1 and id2 and yes if you have

10 of them then

basically manual you add this one id1

and id2 in my case

then we want to navigate and we want to

set this key prop on the main return

so it's not going to work if we go here

and set it equal to key and then the

Eddy

because this is the element that I'm

returning when I'm iterating over the

list

keep that in mind and

the reason why I'm saying that because I

get these questions in course q and I

where in some project it's confusing

where we should set the key so always

always always

look for the place where you're

iterating over

the data and then you want to set on the

item that you're returning basically if

there's going to be this type of setup

so let me go back here and show that ID

if you have this type of setup then add

it on a div not on a heading 2.

hopefully that is clear so let's go back

over here now we know that in the book

we actually have Daddy correct so we

pull it out and then just like they

suggest in console we just go with key

and set it equal to an ID and what do

you know the moment I save it everything

is fine

now

as you're looking at someone else's code

you'll see this approach as well

essentially this just saves a little bit

of time where

in the map the second parameter is the

index

so

you know that in JavaScript

arrays are zero index based the first

item is going to have the value of zero

then one and if you have 100 items that

means that you'll have those values from

0 to 99 and technically you can get away

with passing this index into a key yes

you'll see this type of approach in

general I don't advise doing that even

though you can get away with it

because it only works for the list that

you know will never change so basically

if we'll have some kind of option to

remove items from the list then this is

not going to work effectively there's a

high chance you'll get some bugs down

the road

now if you know 100 that the list is not

going to change yes you can cheat a

little bit but in general I don't advise

using such an approach so that's how we

can set up the key prop we just need to

set it equal to some kind of

unique value

that is in our data okay and before we

discuss events in react

let's take a look at two options how we

can pass the entire object as props

so effectively if we take a look at the

index.js Everything Is Awesome

but what if I don't know we have 20

items in this particular object

we can see that I think we're doing

double the work

I pull out all the items over here

and then I need to repeat the same steps

or if you go with props.name same deal

in the component

so is there any way how we can

simplify our life

here when we're iterating over the list

and essentially we have two options

we can pass the entire object as a prop

or we can use the spread operator which

essentially is the method that I prefer

the most

but let's start by passing the entire

object so inside of the map method

instead of pulling them out one by one

here's alternative I can simply go to my

book component and I can say book prop

so I need to come up with a name and

I'll name this exactly the same as my

parameter and I'll set it equal to my

book object

however once we save

we'll see nothing on screen why well

because remember

now props

is an object but inside of it I have

another object I have a book object

so in order to pull these properties out

I have two options I can go here with

props DOT book or another one if you're

destructuring right away in the function

parameter this is the syntax

again if you're not familiar with it

please watch the the structuring video

that I shared previously in the readme

so essentially I know that there is a

object and I just pull these properties

out that's the syntax again those are

our two options

either we just go with props Dot and

then whatever is the object

or we can restructure it right here in

the function parameters again

essentially it just saves us here on

getting these properties now we'll still

need to get an ID

so this is the case where you can either

pull it out or you can just say book and

then whatever is that property

and then of course in that case you can

just remove all of them this is totally

up to you

and the method that I prefer the most is

actually a little bit different

where we can use the spread operator and

again if you're not familiar with the

spread operator I will give you the

general overview but if you want to find

out more info just please follow this

link where I cover everything in great

detail and essentially the spread

operator so these three dots allow us to

copy

from the arrays or from the object so if

you have friends and then if you want to

create a new array you go here with data

dot friends and then let's say you want

to add a friend and if you log you'll

see that effectively you have two

arrange and again this is copying so

this is not going to be passed as a

reference and the same goes for the

object if you have some object and then

if you want to create a new one you go

with dot dot and you copy the properties

from some object and then let's say you

add another property and if you log

you'll see that essentially you have a

new object with all of these properties

now in react here's what we can do if I

have

a object

and if I want to pass all of those

properties

as props one by one I simply set up the

curlies here and I go with dot dot dot

and then that object

and once you log you'll see that all of

them are effectively passed down as

props so let's try this out and let me

know right away tell you that it's

not going to access anything from the

book so this line is going to

effectively fail

so let's go back to the book list and

instead of setting this up as book

equals the book

simply want to go with curlies

we want to go dot dot and when we want

to pass in the object again this line is

going to fail right now because we are

trying to access properties that don't

exist there is no book anymore

so now we need to go back and let's just

log and check it out so now one by one

we pass those properties down including

the ID of course now we don't use it in

a book

but it's not a big deal

so again

this is totally up to you

if you want to pass the entire object

down as props you can definitely do so

just come up with the property or you

can spread out all the values the end

result is going to be exactly the same

and it really comes down to your

preference

if you prefer the first wave

use that one if you prefer the second

one the spread operator

then of course go with that one now

since

I prefer the second option

that's why in the course you'll most

likely see me doing this

the spread operator approach rendering a

list with the help of components is

awesome

but of course it would be nicer if the

user could interact with our application

otherwise our app is somewhat boring so

long story short

our app needs to respond to events

for example when the user clicks the

button submits the form and rest of the

good stuff

so up next let's talk about how we can

handle events in react

now let me right away bring the cold

bucket of water and just say that all

our examples will focus on logging stuff

yes that's going to be the case simply

because we have not covered what is

State and react and what hook we use to

control the state

and therefore we really can't change

what we currently see on a screen don't

worry

all of that is coming up now let's just

focus on the main points

and essentially

if you're a little bit familiar with

vanilla.js you know that

effectively the setup is following

we have some kind of button form input

whatever then we select that element and

we can add event listener and I guess

the most common or basic or however you

want to say it is the click event

so we have the event we pass the name

and then we have the Callback function

in the Callback function we can access

the event object which

contains bunch of cool stuff for example

the element we're selecting

what value is inside of it and of course

bunch of other things and also we can do

something when that event takes place

and when it comes to react essentially

the setup is extremely similar

we have an element and of course in our

case that element is located in the jsx

in the component we have an event

and remember when we talked about Lee

kamokesh this is the time when we will

write on click instead of click

like we have been doing in vanilla.js

and then the Callback function

basically

a functionality we want to invoke

when that

event fires now if you want to see all

of the available

events in react you can follow this link

so let me copy this one just to Showcase

but I strongly suggest not memorizing

all of them because list is quite long

and essentially if you'll ever need to

use a specific event you can always go

there and get the exact syntax

the idea for all of them is the same

again

element event and a function and notice

over here how basically we're passing in

the reference so we go back to a

JavaScript land we set up the curlies

and same how we reference the variable

now we're referencing the function and

like I mentioned before

in all our examples we'll invoke alert

or log just because we haven't covered

how we can control what we can see on a

screen all of that is coming up

and I can also say that during the

course

mostly we'll use these three so on click

which responds to click events on submit

which fires off when the user submits

the form and on change which fires off

when the user is providing value in the

input again I strongly strongly

so just not memorizing all of them over

here

I mean in my opinion it's a waste of

your time if you'll ever have some kind

of specific use case

and come back over here you can get the

exact name for that event and you're

good to go because again the idea for

all of them is going to be exactly the

same

and once we have covered the journal

setup now let's create event examples

component which I'm going to render

above

the books one

and the reason why I'm doing that is

because eventually we'll just have the

books so this one will stay for your

reference

and of course since you have the readme

I'll be able to remove the event

examples so in the event examples

we want to set up a section form

with heading 2.

so some kind of title I guess input

and we want to go with a button with the

on click now let's not worry about these

functions for now as well as the name of

the event over here let's just set up

the basic return

so essentially let's just worry about

the jsx we're returning so let me

navigate to index.js and I think I'm

going to do right after the book list

because like I just said I am going to

eventually remove it anyway so why not

I'm gonna go with const and then let's

name this event

examples so that is going to be my

component

inside of it for now let's just go to

return

just so we can see that everything has

been set up correctly

so let's go with heading one and then

I'll say events let's save that and then

we want to go back to the book list

and effectively you want to do that

before the books so this is really up to

you if you want to set it up here in the

bottom

that's also an option but in my case I'm

going to go above and I'm just going to

access the event examples now if you

want to place them side by side in the

book list then of course just remember

that we need to use that react fragment

or div or whatever because there has to

be one element that we're returning and

also keep in mind that I'm placing this

in a section because there is already

some CSS so if you won't place it inside

of the section then effectively it's

just going to be hanging out here on the

left top corner so let me save it I have

your events so I'm good to go and as a

quick sign up this is usually what I do

I mean I'm not returning and hitting one

each and every time but I always like to

set up my component so I know that

definitely it's being rendered on a

screen there's no point to set up the

entire logic and then start chasing some

weird bugs

if let's say the initial setup was wrong

so in order to

avoid chasing my own tail I usually

start by rendering something on screen

and then once I can clearly see that I

mean the component setup is correct then

we can move on and start adding the

logic over here hopefully this wasn't

too long of the explanation and now

let's just set up that return

where basically we want to go

with another section

then inside of the section let's right

away go with form now we don't need the

action here

usually if you go damage right away it

gives you an action just as a side note

as far as the heading tools say typical

form

and then we want to go with inputs for

now it's going to be a text input but I

just want to add a little bit of

inline styles so let's go with style

it's an object and then let's say margin

one Rems usually we won't do that we

won't add the inline Styles but this is

the case where I thought

it's a great example of using such

approach and then let's also go with

name and we'll set up the example just

because I want to showcase something in

the following videos

and as far as the value I'm going to go

with examples so we know that in HTML we

can add name attributes

to the inputs and in the following

videos I'll show you how we can access

them in react and then right outside of

the form let's set up that button

as far as the value I'm just going to go

to click me

so we have our setup

and now let's just reiterate when I

covered I guess five minutes ago

where basically we have these events

so if we want to respond to user typing

something in the input the event name is

on change this is the case where we kind

of just simply come up with our own

names yes they need to match exactly

and if we want to respond to click

events we simply go here with on click

and then we need to pass in the

reference so we need to set up those

functions again they can be inside of

the component they can be outside of the

component they can be coming from

another file that part is irrelevant we

just need to pass those functions as a

reference and then every time that event

is going to fire

guess what react is going to execute the

functionality we have inside of the

reference function

I'm not going to be particularly

original I'm just going to say handle

form input handle button click yes in

react World this is somewhat typical

essentially to start the name with

handle but again it's not a rule so

let's go back to index.js let's go above

the return and let's come up with those

two functions now of course we can

pass them interchangeably

as long as you have the reference

function

you can pass the same one in the input

as well as the button click but

most likely you'll have some specific

Logic for the input or for the button

click so let's go here with handle form

sorry at four but form input for now

we're gonna go with pretty basic Arrow

function and we'll simply go log and

we'll say handle form input then we'll

copy and paste and we'll just change

some stuff around so it's not going to

be handle form input

we'll say handle button click and

instead of log why don't we go with

alert

let's save that and then like I said the

event

to handle

form inputs is on change

we go to any input in our case this one

the text one and we go with on change

so every time user is going to type

something in the input the event will

fire

and yes this functionality

will be executed so we go here with

handle form input so we pass the

reference and we want to do same thing

here with the button in this case though

the event name is on click

what do we do we pass here the reference

handle button and click I just make sure

that the name is exact and let me open

up the dev tool since there's going to

be some console logs as I said you know

it I think I can remove this sucker for

now the props one

if only to use it later of course I will

uncomment it so let's try that out with

a button check it out the moment I press

F handle form input then of course it's

because I didn't change the name my

apologies

so in here we want to go with handle and

then button click

of course you can leave the same one but

just so you can see that I'm not messing

with you I'm going to go click the

correct one

and of course we want to press OK OK

and then let's click one more time

handle button click awesome

so we can see that this functionality

works and the same is going to be with

our input so I'm going to go here and

start typing

notice in the console I have these logs

which means that again we're responding

to the events

and as a result of course our

application is more Dynamic and again

you'll need three things you'll need an

element you'll need an event

and you can always find all of the

events

in react docs and lastly you need a

reference to a function or a callback

function that you're going to invoke

once the event takes place or fires off

remember in the last video when we

discussed the events in vanilla address

we covered that

when we pass the Callback function we

have access to an event object

and in that object we can

find bunch of useful info and guess what

we can do the same thing in react

so every

callback function so every function that

we're referencing

is going to have

access to that event and since it's a

parameter of course we can give it

whatever name we want so you can go with

e which is pretty popular you can go

with event and always bananas is also an

option

and let's just log it in the input so we

can see

what values we're getting back and then

we'll talk about the form submissions so

as far as the annual form input I'm

going to go here and

we'll do few logs in this video so let's

start with an event and check it out and

here we'll find bunch of useful info now

the ones that we'll use the most are

event.target.name so Target effectively

is going to point back to an element in

our case since we're logging it in the

input yes it's pointing back to an input

and then remember in the previous video

we set up name is equal to an example

and if we want to access that name we go

to

event.target.name and if you want to get

the value we go with event.target.value

and essentially this is going to allow

us

to collect

the data from the input and again we're

not going to cover the entire example

because we haven't covered the state yet

but just to Showcase that it's actually

a case let me go here with log and then

event.target essentially is going to be

our input and then let's copy and paste

and if you want of course you can write

some additional text over here

just so you can see which one is which

but in my case I'm going to go the first

one name and then the second one value

and again it's going to log once we

provide some value in input and notice

so the first one is my element the

second one is the value that we provide

for the name so of course if I'll change

this around and if I'll say

product and if I'm going to go back to

an input any file type some kind of

letter now of course

in the console I'll see the product

and the third one is the actual value

in the input and last one is the

original

log that we set up in the previous video

so these two will use quite often

throughout the course and also we'll use

prevent default which is very useful

when we have it formed

so if we want to respond to form

submissions we just need to set up an

event so we're going to go here with on

submit and let's

create that function as well so let me

copy and paste and I'm going to rename

it to handle form submission

hopefully I'm spelling this correctly

and for now let's just log something at

least try to actually will fail

that's the whole purpose why we covered

the event object so let's go with form

sub method and then let's pass in the

handle

form submission

and once I save I mean it doesn't really

matter whether we type something in the

input or no if we'll press enter

essentially your turn we should see

something in the browser but we don't

so we can clearly see that something

happened notice over here we have this

product but we didn't see anything in

the browser and the reason for that is

because the default behavior of the

forms is to collect those values

and essentially

send it to

some URL now in this case we don't want

to do that we want to handle the forms

ourselves

and that's why we want to access the

event again

same as with handle form input we have

right away access to it and in there

there is a function called

event Dot and then prevent

default so this is also something that

we use quite often and effectively this

just means that we will handle those

form submissions ourselves and as you

can see now we can clearly see this log

in the console

so each and every

reference function is going to have

access to event in there we can find

bunch of useful things but mostly will

work with Target target.name

target.value as well as event prevent

default now if for some weird reason you

still don't see the log once you submit

the form don't panic and just try this

Mouse click on the input and then press

enter or return on the keyboard

basically we want to set focus on the

input

and don't worry in the following videos

we will add a button to submit the form

which actually is going to be our setup

for the rest of the course and in that

case we won't have to do all of these

acrobatics and before we continue let's

just take a small break and let's

discuss something that

pops up quite often in the course q a

and that essentially is how we can

handle form submissions in HTML again

please keep in mind that at the end of

the day we're still writing HTML we're

still writing CSS and yes JavaScript and

essentially we have two options

if we set up

a button with type submit

in the form

we can also utilize that button

but keep in mind that the value has to

be submit

so if it's just going to be a button

then it's not going to work so let me

just showcase what I'm talking about I'm

going to go back to index.js

and essentially where I have the form

first let me move this sucker up over

here let me add type and then equals to

A Button

and then let's copy and paste and we're

not going to have any on clicks over

here

and instead of type button we're gonna

go here with

submit and then instead of Click me just

so we can see which one is a which we're

going to go with submit and I'll move it

up

so let's save I have this submit one

and you know what

just so it's not all over the place I'll

add a div and just wrap the button the

second one the quick one and check it

out now of course we can click and

notice we nicely submitted the form

why well because we have on submit on

the form

and we have the Callback function and of

course we prevent the default and you

already know rest of the stuff

now if I'll click this one

I'll have the alert

so if we have just type button it's not

going to submit the form then please

keep in mind this is straight up HTML

setup

that's effectively how it works

now if you do want to set up an event

over here on this button let's say you

just don't like this unsubmit here in

the form you can definitely do so

and the logic is going to work exactly

the same but

the event you want to set up over here

is on click so here's what I'm talking

about

if for some reason you don't like this

setup you can remove

but in here you're not going to write on

submit

so you're not going to go here on submit

and then

let's say pass in the value let me try

that one notice over here up in paste

okay good

notice right so it's not going to work

you're going to get an error

in order to properly submit this form

we'll have to go here with on click

because it's a button

so you need to provide here on click and

then again both of them work so we can

submit the form with enter if I just go

to an input and press return key or if I

click the button and again both of them

are in your readme so you can clearly

see if you want to use the button code

on click if you're using the form just

make sure this one is type submit

because type button

it's not going to work hopefully that is

clear and now we can move on to the next

topic and while we're still on the event

topic let me throw you a mind grenade

remember I believe two videos ago when

we discussed the basic setup

in vanilla address

we use this example

now what is happening over here

I have here Anonymous callback function

right

now of course you can set up here the

variable set it equal to a function or

you can pass here directly

Arrow function which by default is

anonymous

the main point is that we can directly

pass in Anonymous function

so

do you think we can do that you know

react and of course the answer is yes

so you'll also see

this alternative approach

where instead of setting up those

functions here or in the file or in a

separate file

we pass the anonymous function directly

so in my case of course I'm passing here

the arrow function now please keep in

mind we're not invoking it over here

we just pass

the function so of course this logic is

going to run when well when we click on

a button in this case so let's try it

out I'm going to navigate back of course

I keep repeating this but I just want to

make it clear all of this code is

available and read me for your reference

so I'll simply do this I'll remove and I

don't think I'm gonna worry about the on

submit

so let me remove it keep in mind that

yes essentially it works the same way

but instead of using reference

I'm going to go with my arrow function

and then whatever logic we want to do

in our case what do we want to do we

simply want to log yes for now we'll

just be a little bit conservative so

let's go here with console log and then

say click me and of course we'll have an

error because we don't have here the

reference so let's do the same thing and

I guess one of the major gotchas here is

that we still have access to this event

object

so that doesn't change if I want to go

log

and inside of it I want to go with

event.target.value I'll still access

whatever is in the input and yes it's

still going to fire every time the user

types something in input again those

things don't change but you'll see this

shorter syntax

is there a rule no

if you want to use this one use this one

if you want to set up the reference use

that one mostly it depends on how much

logic you have if let's say you have

this input

and you're just accessing the value

quite often you'll see this approach if

you have some kind of button click and

then there's 20 lines of code

theoretically you can set it up over

here just keep in mind that you'll have

to set up the curlies and all that but I

mean most realistically then you'll set

up a reference function and now check it

out

both of them work exactly the same

but effectively we just have less lines

of code and since I'm enjoying mind

grenades so much I'm effectively

throwing them at you

let me throw another one

and that is the simple fact that

components are independent by default

and if this at the moment sounds like

okay well what's the big deal let me

show you an example

um after that I'll probably spend five

minutes just raving about it and let's

start I guess by removing the events

again we cover the basics we'll return

to events many times throughout the

course it's one of the main features to

any application if it's Dynamic so

there's no need to keep that component

here it's always available in readme and

therefore I'm going to go to index and

first I'll remove

the reference

and then I'll actually remove the

component

and now let's try to set up an event in

the book component and it's going to be

somewhat straightforward where I want to

set up a function I'll call this display

title if you want to practice

on setting up Anonymous callback

functions you can definitely do so in my

case I'll have a reference and I simply

want to log the title that's it

not much and of course we do need to set

up the event we need to reference the

function

and

it kind of makes sense to have some kind

of value in there as far as the value

inside of the button so let's start here

doesn't really matter where you place it

I think I'm gonna do it in between just

because I have some margins

so let's go here with on click for now

we don't have the function

so let me first just type display

title and then above it let's go with

that function const

display title and

let's go here and log that

so I already have the log so just so I

can speed this up or copy and paste oh

uncommon this one and we're gonna go

with title so what am I logging here

a title prop correct

so let's go here let's say display title

let's save it let's find the button

somewhere here

and check it out right away in the

console I see the same exact title that

is displayed in component

and guess what

if I click

the same button in the second component

it does the same only this time

it references the title that is

associated with the second component

and if you have done

pretty much any work in vanilla.js

you know that you need to do quite a bit

of acrobatics to get to that point

to essentially have some functionality

directly point to that one specific item

and just to give you an example let me

show you one of the JavaScript projects

that we're working on my course

I think it was this one either the

questions or the tabs I think it was

tabs

no sorry what was the questions my bad

my bad I'm gonna go back we're going for

questions and notice I mean it's not

earth shattering functionality basically

we're just displaying some kind of

content once we click on a tab but trust

me

in order to get to that point

where each of these buttons only

reference the specific item it's not as

easy as just setting up here to function

and the button so if you open up the

developer tools the sources tab

and more specifically MJS

you'll see that we're selecting all of

the questions we iterate over the

questions as we're iterating we're

selecting

the button and then essentially we

toggle the text inside of the function

now again there's multiple ways how you

can set up the logic

we also cover the alternative

that's not the point

the point is that in vanilla.js it

doesn't come by default

you cannot just right away go to a

specific element and say that

the functionality is going to apply only

to that element

you need to do more work and that is not

the case in react

so this is

an extremely powerful concept where

essentially whatever functionality will

have inside of the component

it's narrowed down to that component

where in vanilla.js in order to

have this type of functionality you need

to jump through the Hoops you need to do

some acrobatics

in react

it comes by default we don't need to do

anything okay and up next let's talk

about react data flow and in the process

I will cover what is prop Drilling and

the first thing we need to keep in mind

that in react

we can only pass the data down

so in our case we can only pass data

from book list to a book component

not other way around and yes if you have

a component

nested inside of the book component

and if you want to pass something from

the book list all the way down to that

component you'll have to go through the

book component of course there are

alternatives so later on

will cover context API we'll talk about

Redux and

of course you can use other state

libraries for that as well but by

default

we can only pass the props down

and essentially in a process we're doing

something called prop drilling so let's

just take a look at the example and

you'll see what I'm talking about first

let's navigate to index.js

I don't need the title

but I will keep the button because we'll

implement it in this example as well

it's not going to be display title we'll

just say click me doesn't really matter

what you write over there and then as

far as the book list let me come up with

first variable so const some value and

I'll go with Shake

and bake and up next let's set up a

function

so hopefully it's clear that when it

comes to this type of variable

effectively

we would just set up

the prop correct now in this case of

course we're iterating over the list and

we're passing into a book but let's say

if I have I don't know some component

over here so some component in order to

pass it down what would I do well I will

just pass it here as a prop right so I

would say some value is equal to some

value name is as always up to you but I

mean

in my case I'm just going to go with the

same name so some value equals the sum

value hopefully that is clear

but what about if we have a function so

let's say what if I have a function that

has a name of display value and in here

I'm accessing that variable in the

component

so I'm accessing the variable that is in

the book list component again we're just

going to be logging

we don't know how to control the state

yet so how do we pass this function down

well effectively it's the same thing we

need to come up with a prop name and we

need to pass it as a value

same deal we're iterating over the book

and we have actually this book component

so I'll pass it here just keep in mind

the same works with any component that

you have

in the jsx so let me remove this one

because otherwise I'll get an error of

course there is no sum component and let

me just go here with display value

equals

to display value

and how do we access it and as I say not

the first I'll have the error over here

because there's nothing in the on click

so for now

let's just deal with display value

and in order to access it

it's in the props again if you want you

can log it

sure

in my case I already know that it's

there so I'm gonna go display value so

we grab the function and again we just

pass it as a reference that's it that's

all we have to do and now if we open up

the devtools

we'll nicely see

that we log shake and bake and it's

going to work the same in all of the

components and again the main points are

we can only pass props down

so from the parent to the child

and effectively it means that if you

have really nested structure

you'll have to go through all of those

components which of course

can get annoying

and that's what prop drilling stands for

the annoying part of passing perhaps

literally down I don't know 10

components or five components or

whatever now at least in my opinion

passing the props

from parent to child is not a prop

drilling again that comes down to

preference but in my opinion that's

totally okay if you have a parent and

you pass it down to a child however

if there is a grandchild basically if

there is a child component inside of the

book and then you have to do the same

thing essentially you don't use it in

the book component but you pass it down

to whatever component in jsx yes in that

case at least in my opinion it becomes

prop Drilling and we'll come back to

this topic

a little bit later when we discuss the

Alternatives when we discuss context API

Redux and all that stuff again this is

just to give you a general infill

and one last time let me just repeat

that in react

as far as data flow we can only pass

props down from the parent to the child

okay and before we discuss es6 modules

in react applications let's also cover

more complex example when

we have a function in a component and we

need to invoke it in the child and as I

said this is something that keeps

tripping people up later in the course

so please pay a close attention

and in here we'll start with a little

challenge where essentially in the book

list component I want you to create a

get book function

now that get book function

accept ID as an argument

and it finds a book

I can give you a hint I'm gonna use the

find method and if you're not familiar

with that you can reference this video

in JavaScript nuggets

and we're not going to do anything

basically we want to grab the books all

right we're going to find the book that

matches the ID that we're passing in and

we just want to log it we want to log

our result again we don't know how to

control the state yet

so don't worry about that part just set

up the function log the book

that matches the ID that you passed in

and then pass that function down to a

book component and try to invoke it on a

button click

so essentially just like in the last

video

pass the function down come up with

whatever prop to structure it grab the

ID and try to invoke it

and

most likely you'll hit a bug and that

essentially is the entire reason for

this video so first try to set it up

yourself

and the next video I'll show you my

solution for the get book function and

also two possible solutions for the bug

that you might encounter okay so let's

get cracking I'm going to navigate back

for now I have this display value I

still know that I'm going to use the

button so I'll just

remove the reference as well as display

value

the prop is also not going to be here

I don't need these values and let's

first come up with the function so const

get book

then it's going to be looking for the ID

and

as far as the logic I want to find a

book so I'm going to go with constant

book is equal to books dot find

so I'll use the find method and in here

we pass in the Callback function and

we need to come up with the parameter in

my case I'm going to go with bulk and I

wanna search in the array for the book

whose ID matches this one how can we do

that well we can go with book.id is

equal to the ID that we're passing in

and then like I said we're not going to

be controlling anything what we can see

on the screen but we do want to log the

book

again I'm going to get this error and

you know what it's probably annoying to

some people so I'll just remove it and

I'll set it up from the scratch so let's

save it yep everything works all that is

nice now we need to pass it down okay

same deal just go get book is equal to

our function get book awesome then this

time let's log it just so we can

definitely see that it's there so both

of them get this function get book all

right awesome so let's grab it get book

it's coming this one out for now we

already have the button so we simply

want to go on click

and here comes the gotcha

so how are we going to invoke it

I mean

you can try to do this way

so get book here as a reference click me

undefined

why it's undefined well because it's

looking for ID

right

okay let's pass in the array

let's go here with get book Let's invoke

it and let's pass it in

so technically what's missing here is

the ID

all right so I know it's there I know

it's in the props object so let me just

grab it

but now I have a different issue so I

have the logs

all this is nice

but it's not happening on a button click

essentially it happens when the

application loads why

because we have parentheses here

and in JavaScript

essentially if we have a logic like this

where we have a function and then we

invoke it

what happens well we run the logic right

so it's the same thing if I would go

over here and if I would say I don't

know two for example right so in here

I'll pass in some kind of ID I will get

that book

so this is correct but we need to keep

in mind that this runs instantly and the

same thing happens over here

we're not running this when we invoke

this is not a reference anymore and the

reason why I'm being so annoying and I

keep repeating this because again later

in the course as our applications get

more complex this seems to be tripping a

lot of people up

yes in JavaScript once we set up the

function if we don't have it as a

reference if we have parentheses

we'll invoke it right away

and that's not what we want to do in

this case in this case we don't want to

do that so in the following video I'll

show you two possible solutions okay so

we have tiny bug in the code and the

first option is to set up wrapper inside

of the child component

so again our main issue is that we are

invoking this

where we have the on click

so in that case it runs instantly what's

the solution well in the child we can

come up with

a different function in my case I'm

going to call this get single book

and

will invoke the get book inside of the

function

so now we can pass the get single book

and we're good to go you'll see that

everything is actually correct so let me

just I guess comment this one out

just in case you ever need it for your

reference so get book get book all that

is good but instead of invoking it we're

gonna go with const get single book

again

if you want to name this get my

groceries that's also going to work

the main point is that we want to invoke

get book and grab the ID again this will

get us the ID

that belongs to that component as we're

iterating over list again in the second

component it's not going to get the ID

from the first one that's the beauty of

react and instead of going with get book

we're gonna go with get single book and

what do you know now of course

everything is going to work so I'll

save and once I click check it out this

actually gets me the book with an idea

of one

and it references

the book that is inside of the component

which is just awesome and of course I

can keep clicking and I'm going to be

getting this book so let me I guess

clean out the console and if I'll click

on a second one hopefully you see where

I'm going with this and yes

eventually this is how we're going to

remove items from the list now the logic

is going to be a little bit different

but the idea is going to be the same

again

the main thing that I'm trying to

Showcase over here is that

we need to pass a reference we cannot

invoke the function right away and as

far as the second option

it's a little bit more challenging I

guess as far as the concept where

I can pass the anonymous function

so think of it this way the general idea

doesn't change I still pass the

reference I'm just not naming it here

I pass in the anatoms function and then

I invoke it so let's go back to index

and

instead of get single book which is a

valid approach again this really comes

down to your preference the reason why

I'm showing you both of them because

again

as you're going to be looking at someone

else's project

you most likely see

one of those approaches so I just want

you to be aware of them where you can go

to get book and then pass the ID same

deal here is a reference and inside of

the function that's when we invoke the

book and check it out once I click again

I get the correct value in the console

all right and up next let's talk about

es6 modules

or a way for us to split up our

application into multiple files and of

course folders

and have the ability to Import and

Export the code

which essentially

helps us to organize our application

because if we take a look at the

index.js I mean everything is awesome

we have the list we iterate over we have

the book component and all of that is

great but you can probably imagine that

as our application grows this is not

sustainable I mean we need to have some

kind of way where we can split up the

code correct where we have separate

functionalities

in different places and then if we need

that if we need the component or data or

whatever

we just access it and the way we do that

is by using es6 modules which again are

not unique to react react just uses them

and if you have ever used node before in

the previous versions of node they used

to use only common JS now they also use

es6 modules and again it's the same

principle just the syntax is a little

bit different and you'll see it's

extremely straightforward so first I

just want to remove all the get book

logic as always

it's available in the readme if you ever

need a reference

so I don't need to get book and I'm

pretty sure I'm not gonna need the ID my

apologies if I will and if I'll have to

rewrite

hopefully you can forgive me and I don't

need the button okay good let's remove

that

and now

essentially I want to come up with a

file name we have two flavors when it

comes to imports and exports we have a

named one and we have a default one

as always you can use whichever you

prefer in most cases what you'll see if

you have let's say a one component in

the file you'll do that as a default one

and if you have multiples they will be

named now is it the only way how you can

do that no but if I'll show you pretty

much

every flavor of Import and Export this

video is going to be two hours long so

we'll focus on two main ones name the

export and default export and the only

thing we need to understand

is that when we import with the named

one we need to use the same name so name

must must must must must must be the

same and with the default one we can

come up with whatever value we want

literally that's the main difference

so first let's go to source and let's

create box.js and book JS so this is

going to be for our component and this

is going to be for our data and then I

want to remove books array from index.js

and I want to add it to books j s

so let's try this one out new file I'm

going to go with books JS that's where

I'll have my data and yes of course I

can name this data as well if I want and

I'm going to go with book JS let's start

with the books array

so let's get the data away from the

index so let's clean up this file so I

want to cut it out and I want to place

it in the box of course the moment I

save I'll have big fat error why

because books is not defined

of course I'm accessing it over here but

there is no books anymore

so in here we have this array and like I

said we have two flavors and essentially

with books I'll show you both and then

with the book one we'll just use the

default one so in here I can go with

export notice I simply want to go with

export and then whatever

variable I'm exporting or function or

hopefully you see where I'm going with

this now again there are a few different

flavors to this but we'll just stick

with the most common ones so we'll save

over here and then back in the index we

need to repeat these steps however this

is our own file so this is where that

path comes into play when we go to

import and this is extremely extremely

important we need to go with curlish

which means that

we'll be getting a specific item meaning

the item you're exporting is exported as

named export so this needs to match

exactly what I have in the file learn

from and what do you know I'm looking

for the books and remember I told you

when we covered CSS JavaScript files we

don't need to do that and the moment we

save check it out everything works now

if I'm gonna go here with carrot banana

or whatever Bob it's not going to work

so this is exported as books so anywhere

anywhere in your application you need to

access books that's a must you cannot

just willingly come up with a different

name so that's the first option we have

let me go here with books and like I

said I'll show you right away both of

them but we'll stick with the named one

now alternatively here's what we can do

I can remove this export for now

and I could say export default

and then of course I need to reference

the books

one thing we need to keep in mind that

we can only have one default export per

file

so you cannot have like 10 default

exports that's the whole point that you

have one default export and the biggest

difference is that in the index.js we

don't have any more this syntax we

simply need to go with import and pretty

much we're saying we're importing

anything and this could be banana

and I just need to change it here of

course right so I need to go here with

banana and of course everything works so

hopefully this gives you a good idea

again

named and default and the biggest

difference is that with default you

actually can

name it however we want in the index.js

this is something that we talked about

it before where you can technically set

up a component with lowercase and Export

it but when you import you will still

have to use the application so first let

me just go back to the name one

export we use like I said the default

one

in the book component

let's remove this and then in the

index.js that's when we want to go back

to the books

little detour

my apologies and now let's go with the

component the reason why I showed you

both I don't want you to think that you

can only do default with a component

you can do with any data so up next

let's take this sucker out let's remove

and

I have book JS copy and paste and

remember the extension that I used

before

so

the Snippets one

check it out I can of course create the

component this way as well and notice

how I right away have that export

default book so now you know what that

line of code is doing so let me copy and

paste again and we're going to go with

export

export default

and we're looking for the book component

then we're going to navigate back

and we want to go with import

and book from the book

also I want to right away mention that

technically vs code tries to provide the

Auto Import and when I say technically

because I mean unfortunately sometimes

it doesn't work but don't be surprised

if for example you see me or some other

instructor doing something like this

where I can go with book and then notice

out right away sets up that component

now of course I'm not passing anything

in here and it's looking for those props

and all that but hopefully you see that

yes I can type the component and visual

studio code is going to try to help me

and the reason why I say tries to help

you because here and there it just fails

so let me remove this one

the import is in place and as you can

see

the logic still works

I still have my list and everything is

correct the difference right now is that

I've nicely split up my code where the

component is in one place so if I ever

need to come back I can just navigate to

a book.js this is all the logic for this

one and you already know that we can add

code remove code and right away all the

components are going to be affected and

the same goes with book shares in few

videos we will cover

how to set up local images in the source

folder which essentially

is a better approach because

there's some optimizations

happening under the hood so the result

is better and yes all the work we're

only going to do in books.js

so we won't have to run back to index.js

as long as the import is correct

we're good to go again these are es6

modules they're not specific to react

you can use them in vanilla.js you can

use them in node

and essentially they help us to organize

our application all right and now let's

talk about how we can set up local

images in the source folder which

essentially is a better option for

setting up the assets because like I

keep saying when the react builds our

production application effectively it

optimizes those assets

so unlike the public one where there's

no optimization we just dump the asset

and that's it in this case react is

trying to help us and essentially by

optimizing those assets

the result is that our application is

going to be faster

and in order to Showcase how that works

I decided to add one more book

to our array and essentially we're just

going to utilize the es6 modules we

covered already in the previous video

so first I want you to go back

to Amazon so find that link or get your

own images it doesn't really matter

and just get for the book one and two

so

my guys have these two

so I'm going to go and save images I

think I'm going to place it on desktop

and I'm just going to go with book one

then let me find the second one

I'll do the same thing

and now I just need to come up with the

third one

this is probably going to be

challenge but I'm gonna go with this one

bad jokes why not

so let's go here and I'm gonna go with

book

three and before we navigate to a

desktop let me also get the data for

this book

so let me open this one up

and basically this is going to be the

title and this is going to be an author

so let's navigate to the box and like I

said we want to add the third one

so let me copy and paste and let's just

change the values around so these ones

I'm going to get from the Amazon

for now I just want to change the idea

which is going to be three

then we wanna

get the

title and I think I'm just going to go

with the short one here

title

and let's get

the author

UPS keeps running away from me

let me set it up over here

and now let's deal with those images

so I have these three images on my

desktop

the folder structure is definitely up to

you for the bigger project you'll mostly

have like assets and then images folder

the CSS folder and hopefully you see

where I'm going with this for now I'll

just create a images and place it in the

source but it's a must it has to be in

the source so even if the structure is

more nested make sure that the parent

the main directory is still within the

source please don't place it in the

public it's not going to work

so let's grab

the folder and then we just want to move

all of these images over here once

they're there let's move them to the

source like I just said

and here's the deal we simply want to

import those images one by one and yes

this is a downside if you have 100

images you'll have to do

this one by one

for example if you have

images in the public then of course you

can just reference it as dot forward

slash and then whatever is the path

so keep in mind yes

it is a little bit more annoying

technically because we need to do this

one by one but the results are going to

be better and essentially we want to

import we want to come up with some kind

of name and we need to look for images

and then the file name and notice again

full path basically extension included

and then notice over here instead of the

local one or the external one for the

image what do we do we simply pass in

that variable so one two and three in my

case so let me save this I'm going to go

to books again like I said we're not

working anymore in index.js we only need

to focus on box.js and one by one let's

grab them let's go here and say import

and IMG one from and now we're looking

in the images and then book I believe it

was a one and this was the extension so

now we want to copy and paste and then I

want to set up multiple cursors and

let's just change these values so this

is going to be book two and book three

and like I said one by one

or just change it we'll say IMG one

img2 and img3

img2

and last one is going to be img3

once we save we should have a list

of

three books

and as you can see

images work as expected again the main

benefit of such approach not just for

images again we're covering images keep

in mind it goes for all the assets is

that they get optimized when react or

more specifically create react app they

told that we're using build out our

production ready application and as a

result our applications are faster okay

and before we set up a production or the

application and deploy it online so

everyone can see our awesome project

let's work on two

challenges and the first one is

following I want to set up

numbers just like they have in Amazon

now please don't worry about the CSS

the main goal is to figure out how we

can get

the correct number

for the book

so if I have a list

each value represents whether it's the

first one second one and hopefully you

see where I'm going with this and I just

want to display those numbers again I'll

show you the CSS it's actually very

simple and all that but for now just

worry about getting that number

somewhere here in a component

and also we'll set up the title that's

going to be our Second Challenge and for

both of them pretty much

if you want to work on that

independently once I'm done explaining

the challenge just stop the video try to

accomplish it yourself and once you're

ready to compare the results just resume

the video now you don't have to you can

simply just watch and code along with me

and basically like I said I want to set

up those numbers so I can see

which

item this is in the list whether it's

the first one second one

or third one don't worry about the CSS

and I'll give you a tiny tiny hint I'm

going to use index

for this again I'm not using index for

the key I'm using it to get the value

so I can clearly display whether it's

the first book second or third again if

you want to work on this independently

please stop the video right now and

resume once you're ready to compare the

results

I'm going to go to index.js and then the

second parameter in map method is the

index so

we can reference it here I'm going to go

with index and I'm going to come up with

a different prop name

of course I can go with index index but

I'm just going to go with number and

then index all right good then let's go

to a book JS so now we Navigate to a

book component and we want to grab that

number correct we're going to go here

and remember

arrays in JavaScript are zero indexed

paste what does that mean that means

that if I'm gonna go here with log and

number

I'll nicely see

zero one and two which is awesome but it

doesn't really match exactly correct so

it should be one two three what's the

solution well we can just add plus one

and in my case I'm going to place that

in a span so right after the author I'm

going to go with span allari class just

because I'll add the styles

in a second and then we can go here like

this number

plus one which effectively will get us

the right number and the reason why you

see everything displayed because of

course I already added the CSS and my

apologies let me just remove this one

for now I was already working on that

we'll set that one up in a second if you

have the same setup you should see

number all the way after the author

and also I want to showcase that once we

go back to a JavaScript land of course

we can use the template literals as well

so let's say in my case I want to add

that hashtag in front of it

so in order to do that I'm gonna go here

with the template literals and then

remember in a template literal in order

to access

the variable we need to go with dollar

sign and then the curlies keep in mind

that is a JavaScript syntax

we are back here in JavaScript plan

so we just need to follow the same rules

I'll start here with the hashtag

and then I'll go to dollar sign and then

the curlies so again I'm accessing the

same number I'm still adding plus one

the difference is that I just nicely

added this hashtag that's it and then as

far as the CSS we want to go to index

CSS I want to make book relative because

of the span

with the value of number

is going to be absolute

so in order to control the absolute we

need to set up the parent as relative

then let's keep moving and we're going

to go with number like I said position

absolute then I want to go with top

zero left

is also going to be zero

and we have font size padding and I'm

just going to add those border radiuses

since I'm using the poor radius for

entire card I just decided that

it's a good idea to do the same thing

for the sponge so padding is going to be

zero point

75 Rems than font size one

after that we have Porter and I don't

want to go with border radius because

essentially this is going to apply all

around and it's hard to see because we

don't have any background so let's say

here red of course I mean it doesn't

look as good as

when we go with border top and we're

gonna go with left radius so only the

left side and I also decided to do the

right side now you don't have to so

let's copy and paste this is going to be

bottom

and then right

let's save that okay awesome and now

let's just add some background colors

and this one I actually got from the

Amazon so

it's not really a secret you can just go

there pick the color

and it's going to spit back this one

most likely

um let's just go with color

and set it equal to a white

and with that we're done with this

challenge hopefully you enjoyed it and

in next video work on the title

challenge all right and up next let's

work on the title challenge just like

the previous challenge CSS is optional

don't worry about the CSS the main goal

is to set up an element with some kind

of title and that element needs to sit

on top of our books same deal if you

want to work on it independently please

stop the video and resume once you're

ready to compare the results and

essentially I'm gonna go back to

index.js and here I guess the biggest

gotcha is that we cannot return two

adjacent elements correct so if I'm

gonna do something like this it's not

going to work what's the solution well

we need to come up with a parent

one option for parent is what it is

react dot fragment or we can have here

shortcut like a show so let me move this

sucker down

and then let's come up with that value

so I'm going to call this um Zone

and best

Sellers and like I said CSS is optional

but

I'm still at it somewhere there doesn't

really matter where normally I

place it

as I'm adding the item but in this case

I'll somewhere in the bottom I'm just

gonna go with heading one

and text align

text line Center

then margin top

I'm gonna go to four Rems and then

lastly let's go with capitalize so text

transform and let's set it equal to a

capitalized and then also

I want you to change the title

in the public one

remember

there is this index HTML where we can

change the title

come up with the value and just change

it in my case I have react tutorial at

the end I want best sellers or something

along those lines let me open this one

up public

access HTML remember

this is where our entire application

lives then we want to find the title

instead of react tutorial we'll go with

best

Sellers and with this in place we are

done

with the challenge hopefully everyone

enjoyed it and in the following videos

we'll build a production ready

application and deploy it on netlify

okay and up next let's work on the

production application you see this is

our development environment

which works really awesome we can right

away see the results in the browser and

all that

but when we want to deploy the

application

the setup

needs to be different

essentially we're not going to have the

source and then public and all that

and in order to set up that production

application so we can deploy it on any

provider we need to stop the server

and also we just need to take a peek in

the package.json remember

initially I showed you the script

so these are our commands so start

here's the development server a build

one

is the one that builds that production

ready application and in order to run it

I'm going to clear the terminal and the

command is clear we go with npm and then

we add this run

and build

npm run build and what you'll notice

once we run the command

create react app

is going to be busy building our

application and once everything is done

there's going to be an extra folder a

build folder this is where our

production ready application is going to

live now I don't know how long it's

going to take most likely oh no as I was

saying it actually finished it so notice

this build folder right now

and check it out this is our production

ready application

and if you'll take a look at it you'll

notice that it has a bunch of static

assets so a bunch of HTML CSS JavaScript

and all that so again we don't have any

more of The Source One

this is only while we're developing once

we run npm run build this is the

production ready application and

effectively we can use this build folder

with pretty much any provider that you

pick in our case we're going to go with

metal fiber you don't have to again if

you use some other provider it's going

to work the same way just like you

normally would with the HTML project or

vanilla.js project and hopefully you see

where I'm going with this once we run

npm build

we can get this build folder that we can

use with any of the hosting providers as

far as the hosting like I said already

50 000 times in the previous video you

can use your provider but since I use

nettlefive

during the course we'll use this one

now let me be very clear they're not

sponsoring this video they're not

sponsoring the course I'm not paid to

say this I just enjoy the service they

do offer generous free tier so

essentially the only thing you need to

do is sign up that's it you'll have to

provide your email and you're good to go

and once you sign up for account

just log in and this is going to be your

dashboard then you want to go for a new

site and of course

if you just opened up you're not going

to see the sites but since I'm using

this already for quite a while I have a

bunch of sites in here

you want to look for add new site and

we'll start with deploy manually yes

with a later project we will take a look

at the

GitHub option but for now let's just go

deploy manually

and essentially we just want to look for

that build one so let's go to tutorial

and let's grab this build folder

yep we want to upload

the

process

it's going to be pretty fast and once

netlify is done processing the files we

will have our site live and if you click

on this link

you'll see our awesome project one last

thing that I want to mention in this

video if you want to change the site

name

you just need to navigate here to a site

settings let's say you're not happy with

this generic name go to change site name

and you need to provide whatever value

you want now keep in mind unless you add

the custom domain it's always going to

have this notify that app which in my

opinion is not a big deal but just in

case you don't want to so yes you'll

effectively need to use the search

engine to figure out how you can set up

a custom domain which by the way is not

hard but we're not going to cover in

this course because this is a react

course and if the name is already taken

let's say if I'm going to go with react

of course I'm going to have this error

so just keep that in mind okay so I'm

going to go with the react

horse and fundamentals hopefully that is

not taken but you never know yep

everything works like I said this is the

link now that we can share

and anyone who visits this link is going

to see our awesome application so this

is it for react fundamentals hopefully

everyone enjoy this section and I'll see

you in the next one alright we're pretty

much done with react fundamentals and

before we start discussing Advanced

react topics let's quickly cover all the

files in the source folder

that create react app provides by

default

and I'll also show you which files

I typically remove when I start a new

react project with create react app

technically this video is optional so if

you don't feel like

following along feel free to move on to

the next video

if you however do want to follow along I

suggest installing new create react app

instance and remember the command was

following first

we want to navigate to

where we will set up the project so in

my case that is going to be desktop and

then we want to type npx create react

app at latest and then the app name so

type this command and resume the video

once all the dependencies have been

installed

and once the install is complete

just open up the project in your text

error

and you don't have to bother with npm

start

since essentially we'll spend most of

this video in the source folder so just

open up the project and text error and

then crack open the search folder if we

navigate to index.js you'll see that the

setup is almost almost the same so we

have

Imports for react and react Dom we also

have here import for index CSS now of

course if we navigate there we can see

that the code is a little bit different

and again the general idea is that

essentially this is where you set up

your Global Styles or maybe all the

styles again it really depends on your

application

then we have app component which I'm

going to talk about in a second we also

have this one

so the report web vitals and essentially

if you're interested learning more they

provide detailed info in the comments

now in our case we're not going to

implement that so here's what we can do

we can simplify we can remove this code

and we can also remove this import

so that's done then what's happening

here with app.js well you see unlike the

react fundamentals where if I remember

correctly

we ended up with a book list component

which was in the index.js

a common convention is to

set up that root component as a app

and set it up in a separate file

basically we have app.js so this is our

root component this is where all our

components are going to meet

um it's sitting in a separate file and

Convention is to call this app and most

likely I don't have to say that you can

call this orange and everything is still

going to work as long as the Imports are

correct

so again it's just a convention and

basically if we navigate here in the

app.js you'll see that the import logo

so this is where we can see over here on

the screen

and since we're already familiar how the

es6 modules work of course we're

familiar with this code and then rest of

the return now we'll start from the very

scratch so

I'll remove the logo actually I'll

delete the file in a second as well

and as far as the return well let's just

go here with simple heading one

and let's say Backroads app back roads

and app let's save it because I still

want to talk about the app CSS but while

we're still in the index.js one last

thing that I want to mention notice here

how in the render

not only we have the app so that's the

root component again

the exact same setup how we had in react

fundamentals the difference of course is

the component instead of book list now

we have app

but it's also wrapped here in this

strict mode

and essentially Street mode is a tool

for highlighting potential problems in

application

it activates additional checks and

warnings

for its descendants Now it only runs in

development so it's not going to impact

your production build

and one gotcha

is that in development it renders twice

and I'll showcase that in a second don't

worry now if you want you can remove

please keep that in mind it is an option

if for some reason you don't like the

warnings you don't like the fact that it

renders twice you can always remove this

component and just to Showcase that if I

go back to app.js somewhere here

if I go with console.log and if I'll say

hello you'll notice that the moment we

save

basically it runs twice that's something

that we need to keep in mind so again

once we refresh notice essentially we

have two hellos in the console and again

it's because we have strict mode

wrapping our app component our root

component however it is not going to

affect the production

so once we ship this to production the

strict mode is not going to affect our

application

now notice here how we have import for

app CSS so essentially we have two files

we have index CSS and we have app CSS

and you can already see that

essentially we can split up our CSS code

so instead of jamming

our entire CSS logic in one file we can

split it up

for example you create a component and

you right away set up a

CSS file with the corresponding logic

now one gotcha we need to be aware of

all of this is still

going in the same pile now what do I

mean by that

so let's say if in the index CSS I have

a code for heading 1. and I'm not going

to be particularly original I'm just

going to say here color red

if we navigate back of course everything

works now

if we go to app CSS

the thing is

it's not going to be isolated by default

basically it's not going to be scoped

to just this app Js

essentially whatever logic we're gonna

add here in the app CSS it's gonna get

added to whatever logic we have in the

index file or any other CSS file and

again just showcase that

effectively we'll remove this component

altogether in a second but for now let

me just go here with heading 1 and again

we need to go with color

I'm gonna go with blue and once we go

there actually this overrides wherever I

have in the the index CSS so yes you can

definitely

set up the files and split up the logic

however keep in mind one thing

you'll still need to be careful as

you're setting up the CSS now of course

there are solutions for that something

that we're going to cover in this course

for example I am a huge fan of CSS and

JS more specifically styled components

and that's why I will cover in this

course that solved this problem but

right out of the box yes

you can nicely split up your CSS code

but please keep in mind that you'll have

to be careful

because all that CSS code ends up in one

place

so hopefully that is clear it's not

scoped by default to a certain component

all right I think we covered everything

so now let me just remove this log

let me also remove the import we won't

need that essentially we'll just delete

bunch of files we won't need them so

let's start here with app CSS we'll also

remove test so this is if you want to

set up tests which we're now going to do

then we also want to select the logo we

don't need the logo this one as well as

setup best so you should only see

once you're done with delete app.js

index CSS and index

.js

so let me remove

and yep now I have again index.js

this is where we inject

our JavaScript logic into

index.html in the public one and the

app.js is our root component okay and up

next let's switch to beat basically

instead of create react app we're going

to use different tool to scaffold and

develop our react project now I really

don't want to spend too much time on

discussing benefits of beat if you're

interested in learning more there are

plenty of YouTube videos and blog posts

that cover that

and as a side note they also cover that

in a docs just click on why veed tab in

short at this point vid is much faster

than create react app and right out of

the box it provides tons of great

features

and as a result we get way better than

experience

now if you're wondering why we covered

create react app in the first place

effectively why we did not start with

Veet right away well there are two

reasons first

there's still plenty of

code examples that use create react app

so in my opinion it's useful to know the

general layout and commands second more

importantly I really want you to get

comfortable writing react code in any

environment you see

once you start working for a company or

switch to one of the react Frameworks

for example nexjs the dev environment

will be different yes you'll still write

the same react code but folders and

commands they will be different in each

environment and therefore it's important

for us to get comfortable working

in different setups with that said once

we cover beat setup you'll see that the

general idea is pretty much the same

it's just here and there the

implementation is tiny bit different

okay and in order to get started with

beat project we first want to navigate

to the Dachshund the URL is

dot Dev again URL is

dot dev then we want to go with get

started

continue scrolling and we're gonna go

with template now I'm assuming you're

using the latest node version so if you

don't if your npm version is less than

seven then of course

use this command

but since I'm assuming that most people

who are watching have the npm greater

than seven that's why I'm gonna go with

this command

so we're looking for npm create Veet at

latest then we need to provide the name

and then we have two sets of dashes

template and as you can see they provide

bunch of templates we have for

vanilla.js for view spelled and all that

now we're looking for the react one so

essentially we just need to

structure this command so let me

navigate back

I'm going to massively zoom in again in

my case I'm going to create that project

in the desktop

of course it's really up to you where

you want to do that and now let me

carefully

grab this command so I'll take

everything up to a template first I'm

going to change the name it's not going

to be my view app

it's actually going to be a react app

and then as far as the template we want

to go with space and then type react or

copy and paste react that's really up to

you as you can see

you'll right away get the project so

that's the cool thing again I did not

stop the video or anything like that you

right away get the project and now we

just want to spin it up so first let's

just open up the text editor then I'm

going to drag and drop

and you'll see that the setup is very

very similar to the create react app and

first let's just navigate to the package

Json and you'll notice that the command

we're looking for is npm run Dev so this

is going to spin up the dev server and

before we can do that we want to install

the dependencies so we go here with npm

install so

this might take a little bit but trust

me it's definitely going to be much

faster than create react app and then we

want to go with npm run Dev again

instead of npm start we go with npm run

Dev

and also the localhost is going to be

different so yes we'll still have the

react application and we'll take a look

at the code in a second and all that

but the Local Host is going to be 5173

so up until now we have been using

localhost 3000 but now it's going to be

5173 and before we take a look at the

application I just want to quickly

mention

if you're interested

in basically the info that I'm providing

if you want to keep that as a note it's

actually located in the fundamentals all

the way at the end of the readme

so after

all the fundamental stuff

over here you'll find info on create

react app as well as beat

so I guess our project is up and running

at localhost 5173 so why don't we

navigate over there just to see what we

have

and yes probably during this video it's

going to be annoying to some people that

I'll just keep repeating that as you can

see the setup is extremely similar

because that's the main point that I'm

trying to get across

even though we're switching to a

different tool the setup is going to be

extremely extremely similar so we

installed dependencies

if we want to run the project we go with

npm around Dev as you can see here at

the top we have node modules what do we

have over there those are dependencies

as far as the differences we must must

name our files

jsx so in create react app we can name

the file

JS or jsx

in wheat the rule is

jsx so if you'll name your file JS and

then start setting up the component yes

wheat will complain

so that's the first difference we must

use jsx extension in the read now second

you'll notice that

even though the public folder is there

and the idea is exactly the same

whatever we place over here is publicly

available

there is no index HTML

so

in here the index.html is sitting in a

road again the idea is exactly the same

notice we still have the div with an

idea root so this is where our

application effectively is going to live

we can still change the title over here

so for example I can say react project

and now of course once I save

this is what I'll have here in a tab so

that part doesn't change only the

location

and once we're done with index.html now

let's discuss main jsx so unlike create

react app where we used index.js

in beat project we need to use Main jsx

and yes

as you can see the code is extremely

similar to

the index.js in create react app

so the idea is exactly the same we just

need to use Main jsx and as you can see

we're importing the app so this is still

going to be our root component now the

only thing that we haven't seen

is the use State something that we're

going to cover in a few videos but if

for example

I go here and change the jsx you'll see

that I'll have the same result in the

browser so let me go here I'll remove

everything I'm gonna go with heading 1

and I'll say

our first

beat project

and check it out once we save course

this is what we'll have on the screen so

again the idea doesn't change

we still import

the logo the same way because notice now

the assets is sitting in the source so

this is the public one this is where we

have all the assets that are publicly

available however

within the project when we're going to

be importing those assets they are

nicely tucked away in this assets folder

in the source and this should look

already familiar since we did Cover the

es6 modules and all that

and the rest of it is pretty much the

same again don't focus on this one we'll

cover this hook in pretty much few

videos so don't worry about that we also

have app CSS where basically we have all

the Styles and also the index CSS and we

did Cover differences when we discussed

the folder structure in create react app

so I'm not going to repeat that and

lastly I just want to mention that

if we want to build the application we

go with

and PM run build which again is going to

create that production or the

application and let's try it out and PM

run and build and in this case is going

to be sitting here in the dist folder so

unlike create react app which creates

build folder we have this folder

same deal we can take this folder drag

and drop and notify and we're good to go

and yes

if you use continuous deployment

the idea is going to be exactly the same

and as a signal notify right away picks

it up so

if you go with Veet right away it will

say hey do you want to use the this

folder and do you want to use this

command so again

the general idea is exactly the same

whether it's the Imports whether it's

the root component the index.html and

all that so that is not going to change

only difference is that this tool is

much better so our Dev experience is

just going to be awesome compared to

create react app awesome and once we're

comfortable with react fundamentals as

well as Veet setup but finally discuss

Advanced react topics

so in the following videos we're going

to cover things like react hooks

conditional rendering fetching data

forms context API and bunch of other

cool things

I also prepared quite a few challenges

just so we can apply our knowledge right

away and hopefully that way by the time

you're done with the section

you'll be able to apply the concepts

while you work on your own applications

so if possible

try not to rush through the content

since such approach very rarely leads to

long-term results in order to follow

along you mean some assets and they're

located in the same GitHub repo so my

profile and then you're looking for

react course version 3. and even if you

already downloaded the repo

I suggest repeating that step since that

way you'll get the very latest version

you see as I'm recording I tend to

update some stuff for example read me

so once I'm here I'm gonna go for

download zip option

then I'm gonna navigate back

look for downloads crack it open

up the directory and then we want to

grab the advanced react folder

so it's up to you you can work in the

main folder but I always prefer to work

in a separate folder then I want to open

up the text editor

and right away I'll set it side by side

with the browser again this is going to

be the case where

I'm gonna choose this option

so let me set them side by side

and basically you'll notice that it's a

pretty typical beat project we just have

here some assets and of course I'll

discuss them

in more detail

in a second for now I simply want you to

navigate to the readme and in here

effectively you're looking for these

commands now if you can run them in your

operating system in such manner awesome

if not then just run them separately so

I want to open up the integrated

terminal I'll make this one bigger and

then we're gonna go with npm install

and you know what I'll just run them

separately

just so you can see that everything

works so

we have npm installed so we installed

dependencies and then we want to go with

npm run and Dev

and essentially this again is going to

open up the project on localhost 5173

and yep we should see a heading 2 with

Advanced react and rest of the info

essentially is going to be located in

tutorial marking on file so this is just

a general readme how we can spin up the

project and all that in tutorial you'll

find effectively all of the info we're

going to cover in the following videos

and as far as our workflow like I

mentioned before this is a traditional

Veet application I just removed some

boilerplate then provided some assets

like CSS and data and all that just so

we can work on more meaningful examples

and for that I do need some assets I

also removed the strict mode just so we

don't have a bunch of logs so remember

strict mode was adding that extra login

well working and essentially exploring

stuff I don't want to have too many

locks so if you'll take a look at the

main jsx you'll see that essentially

everything is the same

there's just no strict mode in the index

CSS you'll find all of the CSS we're

going to use data this is going to be

some data that we're going to use in

examples app jsx so this is going to be

our root component

then we also have some assets here

again something that we're going to use

during the examples and there's also

public which by the way we're not going

to use and of course there's no modules

which are our dependencies now if we

again navigate back to tutorial you'll

see that basically we have this tutorial

directory

and in here we have a bunch of folders

so it starts with your state all the way

to userducer and

I'm actually working on more topics

right now so probably by the time you

install this you'll see more folders and

essentially the idea is following each

folder is going to have final and a star

so we will do a work in a star folder so

there you'll find some files and it

really depends sometimes there's going

to be just a structure for component and

sometimes I'll provide already some

stuff so yes

sometimes we'll code pretty much

everything from scratch but if we

already have covered that topic and if I

just want to provide some extra info on

that then yes you'll find already some

code in the star and of course

if this doesn't make any sense right now

you'll see as we start working on the

examples and then in the final

you can find the complete source code so

this one you can use for two examples

let's say if you want to compare your

code to mine

or you simply want to see how the

feature looks like

once it's done since again I will be

setting up some challenges so if you

want to take a peek

out effectively runs in the browser then

just set up the file and the way we set

up the file is following

so in the app.js essentially we'll just

import that file

and then we'll render it over here again

you're gonna render both you can render

star and the final this is really up to

you but you'll definitely need to get

that starter so pretty much every

lecture is going to have its own star so

you'll have to import that and set it up

over here in the app jsx and then if you

want to see the final folder again it

could be any file just navigate to

tutorial in this case you're looking for

the final one and then whatever file you

want

and the reason why you have here this

container is simply for some basic

styling so notice how it's nicely

sitting in the center it has some

padding and all that technically if you

don't want to you can just remove it and

everything's still going to work and

just to Showcase let me just navigate

to let's say app jsx

let me move up now the component name is

really up to you I'm just gonna go with

star and final because it just makes a

little bit more sense so I'm gonna go

here with import starter so that's going

to be my component name and then from

and then for now let me just navigate to

tutorial then

just as a example I'm gonna go to let's

say use ref so that's going to be seven

and then starter like I said and in

there we only have one file so we grab

this one and for now let me just remove

that heading too

then let's go with starter

and then let me close the component so

once I save notice I'll have some code

already so essentially the idea is that

we're gonna go to that file so that is

zero seven user blah blah blah blah blah

your starter essentially this is where

we'll start setting up the logic and the

same is going to work for all of the

files and like I said if you want to see

let's say how the complete code looks

like you can simply take and you know

what let me close the sidebar I'll copy

and paste over here

and once I'm done with that I'm just

going to rename since we cannot use the

same name correct so I'm going to go

here with final and let's also look in

the final folder

so let's change things around and let's

look in a different folder just so you

don't think that I'm messing with you

I'm just gonna go to I don't know maybe

use effect or you know what let me go to

your state I'll show you a nice list so

let me go to use State again we're

looking for final

we're looking for use array so that's my

final and then as an example

I'll save it here and the notice will

have a list and we can remove some items

we can clear them and all that kind of

stuff so hopefully this is clear

effectively before each video I'm going

to show you which file we want to import

so let's say the first one is tutorial

use State star and then error example so

we want to import that in the app

jsx we want to render it and then we

want to navigate to that file and start

setting up the code together and again

if you want to look at any of the final

ones

just import the file and render it

somewhere here in the app jsxn

effectively my workflow is going to be

following

I'll simply

keep changing the file name so let's say

if I have this tutorial right now I just

go with forward slash your state and

again I know that all my examples are

going to start with starter and then I'm

just going to be changing files so

pretty much you can leave the setup here

as it is you're just changing the path

that's it that's all you have to do

unless you want to take a look at the

final one then of course I already

showed you what to do so let me go to

the arrow example that's the one where

we'll start and notice in this one we

just have a heading two so in here we

basically will code everything from

scratch now a few more things I want to

mention

there will be some challenges like I

said just so we can right away apply our

knowledge so if you keep scrolling

obviously over here you'll have the

first setup challenge so

in the beginning of each video where we

have the challenge effectively I'll just

read it to you

I'll try to explain as best as I can I

might show you

the final one just so you can see how it

looks like again I'm not going to show

you the code but I'm going to show you

how effectively the feature is supposed

to act and if you want you can work on a

challenge now some of them are purposely

essentially made to fail so you'll work

on a challenge and I'll right away tell

you hey you most likely hit this bug

because I want you to have a

Real World Experience what triggers the

bug and that way it's going to be easier

to remember

the possible solutions as well and one

last thing that I want to mention yes in

the beginning our examples are going to

be with numbers and buttons

just because we need to start with

something yes of course

as we progress with the topics

I purposely chose already more complex

examples just so it's not all the time

numbers and buttons but the first few

videos yes we'll have to utilize numbers

and buttons just so we can see the

workings of react hopefully everything

is clear if not utilize the course q a

and in the next video we're going to

start working on our first example the

error example

okay and let's start by taking a look

why we need a use State hook in the

first place which by the way we're going

to

cover in the next lecture

and essentially we'll run away start

with the challenge so I want you to

navigate to the file basically a

component and create a count variable

display the value in jsx add a button

and try to increase the value

now I can tell you right away that it's

not going to work basically you won't

see the latest changes in the browser so

I don't suggest

trying like 10 different options just

basically try the most obvious one and

then resume the video and yes

I'm not going to be extremely annoying

and I'm just gonna say this once if you

want to work on those challenges just

pause the video try to set it up and

then resume once you're ready to compare

the results

so let me just go to app jsx

let me check that I'm getting the right

component again we're looking in the

tutorial we'll start with zero on your

state star and then the arrow example so

let me navigate over here close and

somewhere here I'm gonna create my

account variable so I'm going to go let

count is equal to zero beautiful

then I want to display that value

somewhere and since at the moment I have

heading 2 and we know that we cannot

return adjacent elements I'm gonna turn

this into a div

then we're going to set up a heading 2

with the actual value so here I want to

display the count let me save and I see

the zero so that concludes this is

already a good start then we want to set

up the button

right away type is equal to a button

then we'll set up the unclick if you

want the arrow function you can

definitely do so in my case I'll set up

the reference and I'll just increase or

increment whatever

your heart desires and now let's set up

that function let's go over here let's

say const handle click

basically in here you want to go with

count count is equal

to count plus one correct and let me

right away even console log and you'll

see that technically everything works

but we won't say anything e in the

browser sorry for the spoiler so let's

go here let's save we have the button by

the way if you want to add

a little bit of styles you can go here

with class name

and you can go with button again this is

coming from Global stuff

and check it out everything is awesome

but as I'm clicking the button nothing

is happening

and actually if I take a look at the

console I can see that my logic works

so this is technically correct I am

updating this value

but nothing is happening why is that

well

because we're not triggering the

re-render

something we're going to do with use

statehook

so even though

this logic is awesome in vanilla

jazzland it's not going to work in react

if we want to see the latest changes

displayed in the browser in react we

need to set up a state value

and we need to trigger a re-render and

in the next video we're going to cover

how we can do that using use State hook

all right so how we can achieve our

previous functionality in react well we

need to use a hook basically a function

that react provides and the name is huge

State as a quick sign out during this

video will heavily rely on

the structuring array principle and if

you need to jog your memory or if you're

not familiar at all with this concept I

cover this in great detail in this

JavaScript nugget video and essentially

I just want to double check that I'm

importing correct components so notice

now I switch to use State Basics so

that's the second file and if we

navigate here this is what we will see

and effectively we want to import from

react the use statehawk now we have

multiple flavors we can do it this way

so notice this is going to be a named

import so unlike let's say react this is

written like this now we're actually

looking for the curlies and we go here

with euge State and this is coming from

react now I believe

vs code is going to try to help us so if

you type here you state notice you'll

right away get the import now

alternatively whatever logic we're going

to set up in a component you can also

type it this way you can just import

react and then go with react Dot and

then use State just as I say no this is

also going to work

so once we have the use State hook like

I said it's a function we want to invoke

that function and we want to pass in the

default value and let's start from the

very scratch let's just invoke it in a

log just so you can see that whatever

I'm telling

actually is true so let me save it let

me invoke it and you know what I'll

clean the console and I'll just refresh

and notice over here

like I said we have function we invoke

it

we'll need to pass here the default

value

and we get back two things we get an

array with undefined and we also have

the function so this is going to be our

state value which we're going to change

with the second argument with the

function and this also is going to be

preserved between the renders and don't

worry if the render re-render and all

that sounds kind of fuzzy actually we'll

spend the next video discussing them in

Greater detail so we have used statehook

this is where we need to pass in that

default value that's why we have right

now undefined so if I'm going to type

here Bob Yep this is going to be my

value if I'm going to type here one then

of course you can already guess that

I'll have the value over here one so

this is going to be my default value and

of course you can pass here array the

object and all that kind of stuff so

hopefully that's clear now let's discuss

how we can access these values now the

fastest way is to use array the

structuring but just to

kind of proved the point that I'm not

making this up I'll access them one by

one so let me comment this one out let

me just copy and paste and let me assign

to some kind of value so in here I'm

going to say that this is equal to hello

again we can change these values as we

want there's really no difference and

you know what

I'll actually remove this log I don't

need it anymore I'll log the value so

let me go here with const and this is

equal to a value and then since we're

getting back the array we can do it this

way where I'm accessing the first item

hopefully that is clear so if I go here

with value

you'll see over here that it's actually

hello so whatever default value that I'm

passing and if I'll copy and paste in

here and if I'll say func which actually

stands for function at me copying paste

here as well

and let's just log the function so two

things

the default value and the function that

controls that value

now y array the structuring is

technically better well because we can

use a one-liner so let me

common this one out

and let's keep on moving and notice over

here I can simply go with const then I'm

destructuring right away out items so in

my case I'm going to go with count and

set count

now as far as naming it is a convention

to go with set count basically whatever

is the variable name so if you have name

here then convention is to go set name

but you don't have to and I'll talk

about some other conventions as well for

example for booleans and all that then

we want to go with use State and we want

to pass in that value like I said we can

pass in the string we can pass in Array

we can pass in number whatever you want

to pass in this is going to be the

default value and this is going to be

the function that controls it again the

reason why we went the long route is

because

maybe some people are not familiar with

the syntax which is totally okay

the first time I saw this so I was also

like hey uh what's happening over here

so basically we're just destructuring

these values if you don't like the

syntax you can always use this one

but my guess is you'll stick with this

one and then in here let's pass in that

initial value in our case what is that

well we want to go with zero correct

so this is where we're going to start

then let's quickly again set up that

button I know that this is a little bit

of repetition but since we just started

working in jsx I think it's going to be

a good practice so let's go here with

heading four then we're gonna go with

you clicked and then let's grab the

actual count so notice not accessing

some random variable I'm actually

looking for the count one

so the one that I'm setting up with you

state and I'll just say times here then

we want to set up our button

so the same deal type is equal to button

then class name just so we have a little

bit of

CSS and now let's also again set up that

on click and we want to set up the

function

so in here we want to go with const and

let's call this handle click

and inside of that function what do we

want to do well we wanna

invoke the set count right so we're

gonna go here with set count and before

we pass the value I just want to mention

something very important

when we invoke set count technically we

can pass here anything

so if I'll pass here string of Bob yes

instead of number this will turn into a

string above just something to be aware

of now of course in our case we will

increase the count

but

this is a very important gotcha and I

see this a lot in the course q a so I'll

reference the handle click over here and

then as far as the count what do we want

to do well we want to go with count and

then plus one that kind of makes sense

right so let's save it

and by the way I didn't add anything in

a button let's say click me and now of

course

we'll see that in the browser and also

if you log you'll see that count is

nicely increasing so again let me remove

everything here and check it out

it's really cool

that now we're triggering that re-render

so every time we'll update this value

using the function the Handler function

we will also trigger a re-render

so unlike the previous example where we

were just updating the value we didn't

see anything now you can clearly see

that everything works and

also what's really awesome you state

preserves this value between the renders

now I'm not going to do this right now

since we have tons of examples coming

out but let's say if you were to set up

another button

and set up another

callback function that increases that

value

you'll see that this one will stay the

same between the render so it's not

going to go back to zero and again let

me just emphasize one more time that we

can pass here anything so we need to be

very careful I could go here with let's

say set count and I'll pass in the pants

because why not

so let me set up my pants here and check

it out I start nicely here with zero

everything is beautiful and then I have

you clicked pants times

which is great but probably not

something you were expecting so those

are the basics of you state again it's a

function that we get back from react

it returns an array with two elements

the current state value and a function

that we can use to update the state

value and in the function we want to

pass in the default value basically

whatever

we will set up in the state whether that

is string number array and blah blah

blah blah blah and then every time we'll

update that we will trigger the

re-render

and the cool thing is we'll see the

latest changes in the browser and also

that value will be preserved between

those re-render so if you have six use

State values and if you update one of

them rest of them will stay as they are

so they're not going to go back to zero

so those are the basics of use State and

up next

let's talk about renders re-renders and

all that cool stuff all right and before

we continue let's discuss two important

buzzwords render and re-render

so essentially when it comes to initial

render

it happens the first time that the

component tree is rendered to the Dom

basically it happens when the

application loads so of this

now there's another

use case when we toggle the component

but we haven't covered conditional

rendering yet

so for now don't worry about it we'll

come back to it once we actually cover

conditional rendering for now just

remember that

essentially when our application loads

that's when the initial render of the

component takes place and this is also

called mounting so we Mount the

component initial render happens and yes

later we'll also learn how we can

unmount the component

now when it comes to re-renders

they happen when the components state or

props change

so remember our previous example what we

were doing we were changing the state

value correct and as a result we were

re-rendering our component and

essentially we can

re-render component also when the parent

element re-renders again

something that will run into

quite a few times during tutorials so

once that happens I'll just say hey

remember we talked about it for now

just remember if you'll change the state

or perhaps or the parent re-renders

that's when essentially re-render takes

place hopefully this is clear and before

we discuss the general rules of hooks I

just wanna

change it back to correct one so it's

not going to be pants and I want to

stress one more time that let's say if

I'm gonna come up with another state

value

I'm going to say set name if you don't

want to import your state and if you

already have react keep in mind you have

to import react here then you can go

this way now this used to be more

popular when we have to import react for

every component we don't have to do that

anymore so notice both of them

effectively do the same thing as just

previously we needed to import react

and that's why it was somewhat

convenient just to avoid importing your

state but

since we don't have to import react I

mean I don't see the difference right

now you can either use use state or you

can import react just keep in mind that

both of them pretty much do the same

thing and with this in place now let's

talk about the general rules of hooks

awesome and now let's quickly discuss

the general rules of hooks

so all the hooks

the ones we get from react as well as

our custom one yes later we'll build our

own custom hooks they need to start with

use

so every time you see use and then some

kind of name

just remember it's a hook

so effectively all the hooks rules apply

now in order to work with a hook

component must be uppercase and this is

something we already discussed at the

very very very very beginning when we

talked about react fundamentals now also

we need to invoke

the hook inside of the component body

so if I'll try to do this over here

use State and then I don't know provide

something again it doesn't really matter

what

I'm just going to say here hello blah

blah blah invalid hook call so hooks can

be only called inside blah blah blah

blah something that I just mentioned so

that's something important to keep in

mind also don't call hooks conditionally

and again this is the topic that I'll

showcase once we are familiar with

conditional rendering because at the

moment I fully understand if you're

looking at it you're like what do you

mean by that and essentially long story

short you don't want to place for

example a hook inside of the

if commission so don't do it like this

don't say if and again the same deal set

up the EU state for example this is not

going to work regardless whether this

condition is true or not

this is not allowed so hooks all the

time need to be called in the same order

and lastly

set functions don't update the state

immediately and again this is something

we'll discuss later essentially don't

expect

V synchronous Behavior so for example if

I go here and log the count you'll see

that actually I'm going to be accessing

the old value notice even though this is

one the value in the console is zero

again something we're going to discuss

for now

just focus on the main ones it has to

start with use component must be

uppercase and we want to invoke it

inside of the function basically

component body not bad not bad I think

we are somewhat familiar with you state

and hooks in general

so why don't we

set up

a state value with array and in the

process we'll work on the little

challenge

so you'll need to go to zero three use

data array basically import it of course

in app jsx

and then

navigate to the file in there I want you

to import data and don't worry I'll show

you where the data is located

then I want you to set up State value

and the default is going to be the data

you're importing

now it's going to be a list and I want

you to render that in the browser again

something we already covered how we can

access the value it right over and then

display the results in a browser now

don't worry about CSS again that is

totally irrelevant if you can set up the

logic it's going to be already an

awesome result

and then once you can render the list in

the browser this is an extra challenge I

want you to create

two functions one that clears the entire

list

and second one

which removes the single item from the

list and just to Showcase what we're

looking for and you know what by the way

before the data is sitting over here so

if you navigate to the route you'll see

data GIS and then here we have this

array so this is what I want you to

import in that component and then first

render it in the browser now as far as

our final result

let me just copy and paste here

I'm going to call this final

again make sure that you of course

import the correct component and in here

I just want to change this to

I know

and let's also take a look what we have

so essentially this should be your

result like I said don't worry about the

CSS effectively you just wanna

render the name the button and also a

button to clear all the items so if you

click you remove that specific

person from the list if you click on

clear items obviously we are removing

all of them

and once you're done resume with the

videos

so let me first start by doing a bit of

spring cleaning we won't need that and

then we're not

I will actually leave

so I'm not going to render that

component but I'll leave this one just

in case

next time I need to access some final

component I already have the code I just

need to change the path and then we want

to navigate to use State all right in

the star over here and essentially let's

start by getting the data let's

jog our memory how we can do that using

es6

modules so in here we want to go and

import now this is a named one so we go

with data I already know that's the name

and notice you right away have the

correct suggestion where it is located

and then second I know I'm going to be

setting up the state value and just to

hammer this home I will set up my state

value with react dot used it and then

pretty much for rest of the course I'm

pretty sure I'm just going to import

your state so first let's go here with

import and we want to look for react

okay that's awesome and then let's go

with the const and that is equal to

people so this is what I'm going to be

setting up and then set people so one is

the state's value and then the second

one is the function that controls it and

let's go over here with react Dot

so react that and then we're looking for

use state

and what is default value well passing

the data

and now we want to essentially

set up our return

so at the moment we have heading 2

instead we're gonna have a div and

we're going to iterate over so I'll say

people map

and just so you don't think

that I'm making this up I'm just going

to go with return and you know what for

now let's just go with heading four and

let's call this item what I'm interested

is the person who I well because that's

going to give me access to this object

so if I navigate to data

check it out

so I have here ID and name so this is

what I'm going to log over here

so log

and let's look for the person

let's save notice we have four items

okay that's awesome

and also I'll see you over here

the object now we do have the warning

each child

and all that stuff don't worry we'll fix

that in a second so why don't we pull

out both of those properties we'll say

over here ID

and the person and that is equal to our

person right or I'm sorry this is not

person this is his name my bad so we

pulled these ones out I don't think we

need a log anymore or let me just leave

it here for your reference and then

let's go with our div

and be right away want to set up the

wiki so let's set it up here over here

key and that is equal to my ID and then

inside of it we want to go with heading

four and let's just render the name and

if everything is correct we shouldn't

see any warnings in the browser and we

have

nicely rendered our list in the browser

so that's the first step and up next

we're gonna work on

removing the items from the list all

right so now let's complete the

functionality and as a quick signal

during this video at least

I will rely heavily on filter method and

if you want to find out more info

you can just follow this URL where I

cover everything in great detail so

let's navigate back to our example

and essentially I want to set up two

functions one is going to be

for removing all the items in the second

one is going to be for removing a single

item so let's start with that one so

remove item for now I'm not going to

pass

anything in even though eventually yes

will pass in the parameter

and I mean if you want you can set up

the log but

I think in order to speed this up I'll

just copy and paste and I'll say clear

all items so that's my second function

then we want to set up two buttons

so we wanna

set up a button right here in a div and

also if you want to set up a button that

clears all the values and that one is

going to be outside of the curlers since

I'm not going to set it in the list so

first I guess let's just start with some

HTML elements I'm going to go with

button type that is going to be equal to

a button I'm not going to add

any classes it's going to be pretty

basic

we can nicely see the buttons and now

let's also set up that clear all so

let's go here button same deal type is

equal to a button then let's add a

little bit of styles just because I want

a margin so I'm going to go with margin

top and that is equal to two Rems

on click is coming up and now let's go

with clear

items and now let's go back to our tasks

so essentially this one and as a note

I actually need to add here class name

and then that is equal to a BTN

so this one

we want to use to remove all the items

correct so what do we need to do well we

have people and set people currently

it's equal to what to our data array how

we can remove all items well we can set

people equal to an mtra by just using

set people so if I go with clear all

items and I say set people and set it

equal to an empty array I'll move

automatically all the items and since

we're updating the state value we will

trigger what will trigger re-render and

of course

as a result

we'll see the latest changes in the

browser so let's go over here let's say

on click that's the event and now we

just want to pass the reference so let's

say clear

all and items

let's save that

Let's test it out yep we remove all the

items from the list now just so we are

aware remember we can pass here the

arrow function as well

so just for your reference we can do it

this way you can go with arrow function

and then set people invoke and pass in

the value again this is very very

important concept and yes I'm getting

quite a few questions in the course q a

both of them achieve the same result so

keep in mind if you see this code

essentially it's just a shorter version

of this one and as far as the remove

item well let's think about it so we

have IDs correct so those are unique to

each item now how we can remove a

specific item from array well we can use

a filter method

where we're going to grab the ID

whatever it is one two three four and

essentially we'll just remove that one

item whose ID matches and then we'll set

the people equal to that new array so

let's try this one out

first again I just want to emphasize the

point that

each item right away have that unique

value when it invokes the remove item so

let's say here I'm going to go with ID

parameter and log an ID and if I go back

to the div that I'm returning notice

over here if I go with on click and

first of all if I want to invoke

remove item right away I do need to set

up the arrow function first and I'm not

going to go back to this topic we

literally spent like I believe three

videos on that in the fundamentals so if

you are a little bit confused please go

back and re-watch those videos so remove

item I'll pass in the Eddie and you'll

see nicely

once you click on remove that each item

basically has that unique ID so whatever

we'll pass over here

is going to be unique to that item so

like I said what can we do well we can

create new array so const new people

that is equal to what well filter

returns a new array right so we go with

State value then we go here with filter

and then we need to pass in the Callback

function

now in a callback function I'll

reference each item as a person and I'll

say if the person

ID

does not match then return basically

filter is looking for a flag

and if it matches then it's going to

return in this case if the ID doesn't

match then it's going to return

that person to a new people

if it does match

then essentially it's going to exclude

it so we go here with set people and we

set it equal to any new people

that's it that's all we have to do let's

come in this one out and notice how one

by one basically we can remove the items

from the array and

if you're wondering can we pass this

entire logic directly and set people

the answer is yes

so you can also do something like this

grab this line

don't set up the variable and right away

pass in the functionality remember this

returns a new array at the end of the

day

so yes this will also work notice I can

nicely remove John so that's how we can

set up

a state value as an array and right away

make it Dynamic by just adding a few

buttons as well as the functionality and

as you can see we are basically relying

on all the concepts we cover in

fundamentals

the difference well now we're using this

one line of code we're basically using

the use state which allows us to change

that value and every time we change the

value we trigger what we trigger

re-render and as a result we see the

latest changes in the browser all right

and before we start setting up the

object as a state value now let me

quickly answer the question which most

likely I'm going to get in the course q

a

and the question is following since now

we know you state should we go back to

let's say previous project the back

roads one and effectively add huge state

in each instance we're reiterating over

the list and honestly the answer really

depends on what you're going to be doing

with the list

so of course if you'll be manipulating

the list if you'll be removing the items

adding the atoms and all that kind of

stuff then of course you will definitely

need use state

if you know that data is not going to

change

then of course you can leave it the way

it is I mean nothing bad is going to

happen so what I'm trying to say there

is no rule that you definitely have to

use State however it is a common

practice even if let's say you're not

going to be doing anything with list

you get used State you set it up and

that way if you ever want to change

something about list well you already

have a state value so long story short I

wouldn't go back to the previous project

and change it I would leave it the way

it is but in the future when you are

iterating over the list yes setting up a

state value is a good practice okay and

up next let's work on

setting up the state value as an object

and before we do anything

let's just see why that would be useful

in the first place just like we did for

example with huge state

and also in the process

will right away utilize whatever we

learned in the previous lessons so

here's what I want you to do navigate to

starter and then you're looking for huge

State object and you know what let me

grab quickly that file here

just so you have it for your reference

in the readme

over here and you're looking for zero

four and I believe the name was use

State object over here

so you want to import that of course in

the app jsx you want to navigate to that

file and you want to set up three state

values not in my case it's going to be

name age and let's say a hobby

set up all of them with use State

basically one by one render them and

then create a button

and every time the user clicks the

button invoke a function which updates

all three state values

so as a result once you click the button

different person is going to be

displayed in the browser so let's say

these are my default values peer Pages

24 and Peter enjoys reading books now

once I click on show John I'll have John

28 and John enjoys screaming at the

computer

and once we have this one in place we'll

refactor to object just so you can see

the actual use case so let's navigate to

the object one in the star and you know

what

pretty sure I can just comment this one

out for now

and uh want to go to that file over here

and I already have the huge state so I

already imported for you and effectively

you want to set up those State values so

one by one so const

let's go in here with name

set

name and that is equal to use State and

whatever is the default and like I said

Mike is going to be Peter right away

copying paste and we want to change some

things around where this is not going to

be name it's going to be age

we'll go with set age and

this one is going to be number so let's

go with 24.

then we want to go with that Hobby

Lobby

and then set Hobby

and that one will be equal to

well I guess let's go with reading books

because that is really nice so

say read books awesome then let's render

that

and this is the case where I'm going to

use the fragment

sure so we can jog our memory how we can

do that so that's my fragment and then

heading three

let's go with name copy and paste and

effectively I want to set up rest of

them so one two and after that we'll

have the button so why don't we do this

why don't we go with heading 4 here

first one name second one page

and let's add enjoys

otherwise scream at the computer might

be a bit confusing so let's say here

Hobby

and let's right away set up that button

so let's save okay we have initial value

and basically we want to go here with

button and we want to go to class name

BTN

and we want to add on click and

let's set up a function

from here let's go with cons display

person

first let's just set up the structure

and then we'll worry about

the actual logic

so let's say here display portion and

I'm gonna write here show John since I

know that's what I'm going to be doing

so let's say okay we have the button and

then

it's pretty straightforward if I want to

change all of these three values yes

this is what I'll have to do one by one

I'll go with set and name what is the

name well that is going to be John and

you can probably or guess the other ones

so age as well as the hobby so we simply

need to change here page

and this one will be for example 28. and

then lastly we have set Hobby and this

is where I'll type scream at the

computer so scream

at the computer

okay good now we need to change this one

to a hobby of course and like I said

it's very straightforward

you have 15 values over here

if you have this type of setup where

each value has its own Handler function

essentially you'll have to call them one

by one

and therefore in the next video we'll

take a look at the object example okay

and before we refactor our example to

one state value which is going to be an

object

why don't we do a little quiz so

remember when we discussed use State I

mentioned that pretty much every time

we'll update the state value will

trigger rearrender

now in this example we have three

Handler functions

so ten thousand dollar question do you

think we're going to trigger three

re-renders

or it's going to be only one

and if you guessed only one you're

absolutely correct

you see behind the scenes

react is using technique called Auto

batching

to effectively group the update

so what that means in our example even

though we have three handle functions

it's only going to trigger one re-render

now

prior to react 18

there were actually some instances where

yes

such a code basically when we have

multiple Handler functions would trigger

three re-renders but that's not the case

anymore with reactating so in react 18

pretty much every time you have multiple

Handler functions yes

it will trigger only one re-render

beautiful so our functionality Works

technically everything is fine but we

can save some lines of code if we

refactor this to an object

and of course

it's going to make even more sense if

you have more State values what do you

think is easier to have one object that

has let's say 10 Properties or to have

10 State values again it depends on the

use case of course

if you have

a use case for 10 separate values then

of course don't just randomly group them

together but let's say alert example

what is usually in the alert well you

want to know whether it's going to be

displayed so basically there's going to

be a Boolean value true or false you

probably also want to know whether it's

going to be danger or success whether

it's going to be some red alert or it's

going to be green and you also probably

want to change the text so that's a

perfect example where actually you don't

have to set them up one by one

you can just group them together

in one object so here's what I want to

do I want to go with const

and I'm going to call this person and

set person

now this is going to be equal to my use

state

and here we'll pass in my object

and

as far as the properties well we use the

same ones

we'll say name is equal to

Peter

and let's copy and paste one two and

let's just change these values around as

well so we're going to go here with age

that will be equal to

24 yep you're exactly correct and then

lastly we have our Hobby

so we go here with Hobby

and we'll go with read books

now I can remove all

these new States we won't need them

anymore and we also don't need to call

them one by one

so now I can go with one function which

is set person and I just need to provide

the object here I'll say John first then

age

28 and then I'll say the hobby is equal

to scream

at the

computer and once I save I actually get

an error why well because remember now

our state is an object so we can either

destructure it over here one by one just

grab the properties or

we need to go with person

.name

then we're looking for person.age

and then lastly of course we have person

and hobby correct so let's do that let's

save and now everything should work so

once I click check it out now I have the

new values now be aware of the gotchas

remember

we can pass whatever value in the set

function so even though this is an

object I can pass the string and what do

you think is going to happen well our

application is going to somewhat break

because there is no more object so let's

try this one out first I'll copy and

paste or I'm sorry I'll comment this one

out my bad so go here with set person

and then let's say shake and bake and

what do you know the moment I save the

moment I click I'm nothing rendered why

well again there is no object anymore so

I simply have the enjoys these ones

they're undefined so that's the first

thing to be aware of

second

you can also overwrite by just providing

one property or two basically not all of

the properties so in this example we

provided all of the properties so it was

kind of hard to mess it up but what if I

go here and say set person and I just

say you know what I want to change the

name I don't want to change the other

ones I just want to change the name well

now I'll only have a object with a value

of Susan so let's go here let's click

and check it out again the other ones

they're not there anymore because this

is the new state value this is the

object now a way around it is

effectively to just copy the properties

from the state

so first let's just copy and paste let's

uncommon this one and

first we want to copy all the values and

then we just need to decide which ones

we want to overwrite

so I'm grabbing all of the properties

with all of the values and if I just

want to overwrite one of them I say name

is equal on whatever value so in this

case there isn't so now everything is

going to work we'll still preserve those

current values so if I click over here

notice it changes to Susan hopefully

this is clear again

it's not a solution for

every use case of course there's going

to be use cases where you will have

multiple State dollars but this is a

Nifty approach

if you can

effectively group together the state

values since it's just going to save you

time on setting up the logic again be

aware of the gotchas it's very easy to

override the value and then run around

like a headless chicken and look for the

bug

okay before we wrap up your state and

move on to the next topic let's also

cover set function gotcha which by the

way we already touched upon and let's

take a look at the fix and a good use

case for using the effects and first

let's just set up a trivial challenge

let's go to the file here's State gotcha

installer all that and set up the state

value so again practice on setting up

the use State create a button like I

said in the beginning we'll have these

buttons don't worry in next examples

we'll start making more complex setups

add functionality to increase by one and

log the state value right after the set

function

and see what is going to be the result

so again let me just double check yep

and here I'm in Houston

okay that's awesome and then in the

gotcha

first I'm gonna get the use State here

so let me try the Auto Import yep that

works as far as the initial value I'm

going to go with zero and then

value and the function well

I'm not going to be particularly

original and I'm just gonna go with set

value so that is equal to my view State

okay awesome

after that we want to right away create

that handle click since I know that it's

going to be there so handle click that's

my function and in here

I just want to set up increase by one

so it's going to be equal to set value

and let's go with Value Plus one so the

gotcha is not here

again this is going to work as expected

then let's navigate to our jsx

we want to change this around it's not

going to be hitting two it's going to be

heading 1. with our value

so that is going to be correct here and

then let's also set up that button type

is equal to a button so button here

and let's add a class name class name

will be equal to BTN and let's say

increase and let's also not forget about

the handle click so on click

is equal to handle click

so once we have this one in place like I

said the gotcha is not in this setup so

this is going to work

what I want you to keep in mind

that this is not going to happen

synchronously

so if you log here the value

this won't be already the new value

notice once I refresh once I start

clicking this is one behind

so here I have the seven

and actually in the console I have a six

and again the problem is going to be if

you have some kind of functionality that

relies on that latest value

and in the following video we'll see how

we can get that latest value which

basically is the most recent State

update all right so now that we know set

function is not going to be synchronous

now let's look at the solution you see

there's another way how we can update

the state and that is using the function

approach so

instead of passing the new state value

like we have been doing for the last

whatever videos

we can actually pass in the function and

as a first parameter by default we get

the current state now since this is a

parameter yes

Bobby Lee or Joe Coy is an awesome name

but a more common convention is to call

this current state previous state Old

State whatever I mean again you can name

this banana it's still going to work and

yes it's by default provided

by react

it effectively just provides whatever

you have currently in a state so in this

case it would provide that number right

before the update and then in here we

just need to set up the functionality

where essentially we must return

something and this is one of the gotchas

with this approach

if you don't return anything it will

right away fail why well because there

is no value anymore it's now going to be

undefined remember in JavaScript

functions return by default what they

return undefined so you must return that

value

and whatever you're going to return from

that function that is going to be the

new value so let's try this one out but

essentially

I'm going to remove this one we'll pass

in the function yes this is what we're

doing we're passing function into the

set value that's the approach and like I

said if you simply

just leave it the way it is this is

going to be undefined now I do want to

showcase that we'll access the state

value and again in my case I'm going to

call this current state so this is the

state right before the update hopefully

that is clear and yes

the reason why I'm being so annoying and

repeating that this is provided by react

because

this is also one of those things that I

see a lot in cost q a yes we're not

doing anything

right out of the gate reactus provides

that value so let's go here with current

state and I'm purposely returning

nothing just so you can see that

essentially the functionality is not

going to work notice we get back

undefined now we did get the correct

zero over here right so if we have some

kind of functionality that relies on

that latest value we need to use this

approach now since I'm recording this in

tutorial I'm going to be more explicit

keep in mind that of course you can

simply return that new value in my case

though I'm going to go with const then

I'll say new state is equal to and then

I'm just going to go with current state

and then plus one and now let's just go

with the return

and new state and I'm not gonna log the

new state hopefully it's clear that yes

it's going to be latest value so we go

here and notice everything still works

only in this case we access that very

latest value and in the following video

we'll take a look at nice example where

such approach makes a lot of sense now

before you ask

do your after setup

set functions every time with function

I mean

it's really up to you there's going to

be some instances where you definitely

need to do that

something we're going to cover in the

next video

but should you go back and now refactor

every set function instance of this one

no I mean if it works with just a

regular approach where you're passing

the new value you can definitely leave

it some people use function for

everything

that's pretty much their preference

there's nothing wrong with that but

there is no clear rule that you always

always have to use this one again

there's going to be some instances where

you must use it otherwise the

functionality is not going to work but

if you're just changing I don't know a

list to an empty list no you don't have

to pass in the function you can just

pass in the new value all right and now

let's take a look at the good use case

where we need to use

function approach and for that for now

I'm just going to remove this one and

set everything from scratch and let's

imagine that we want to invoke

the functionality in some time and for

that we are going to use the set timer

and essentially

if you just pass here the set timer

you'll see that the functionality won't

work as expected so let's try this one

out I'm going to navigate back let's say

set timeout so now effectively I want to

change that value in some time let's say

three seconds

as we know we need to pass here the

Callback function first and then the

second in how long like I said in my

example it's going to be three seconds

and then let's simply go with set value

and then let's type Value Plus One now

what is our expectation first of all

well our expectation is that every time

we will click the button let's say five

times this is going to be invoked so set

timeout is going to be invoked and then

after three seconds we're going to get

that

latest Value Plus one so if I click five

times my expectation is

that I'm gonna see over here

value five correct are we on the same

page hopefully we are so let's refresh

and one two three four five

and the value did change in three

seconds but

it's definitely not five and I can click

all day long and the same thing is going

to happen

and if you don't believe me we can set

up a log over here

otherwise you might be thinking okay

he's just not clicking the button so

clicked the button let's try one more

time I apologize if you find this

annoying one two three four five

and

should see over here five yep so this is

correct I did click it five times

but again the value does not change now

why is that happening oh you see in our

callback function when we invoke set

value

we're not grabbing the latest value

we are grabbing the value that is within

these three seconds so essentially what

I'm saying

let's imagine that I'm gonna click the

button 100 times in those three seconds

all of them will reference this value of

zero and only once we switch then the

value is going to become 2. so again

regardless of how many times I click I'm

not updating that value right away or

here I'm just saying yep please update

that value

but I'm all the time using that old

value hopefully that is clear again you

can click five more times or six or

whatever again if that happened within

those three seconds it's all that I'm

gonna be using the value right before we

invoke the Callback function first time

hopefully that is clear now what is the

solution now we know how we can use the

function approach right

so we can pass in the function again we

have access right now to the latest the

current state value which by the way

will increase as we're clicking on a

button and then we just return the new

state value so in this case I'm going to

say current

and State

and we want to go with return

and let's go with current state plus one

and now you'll see that

or functionality works where essentially

again if I refresh and if I click

whatever times

in those three seconds I'll nicely

increase the state value

by the amount of times I clicked on a

button hopefully it's clear

we're pretty much done with use state

and we are ready to move on to our next

topic and up next let's talk about

another important hook called use effect

and we're gonna start just like the

other examples basically in the app GSX

we want to navigate this time to zero to

use effect we're looking for the starter

and we're gonna go with code example and

just like with use state

the first thing we're going to do is to

understand why do we need a use effect

in the first place and in order to do

that basically we'll take a look how the

code inside of the component runs

so let's navigate to that file you

should see on a screen something like

this value equals to zero and a button

so let me navigate over here and this

shouldn't look too foreign so we have

over here huge State we import that we

set up the value set value use State and

then of course I have jsx and what do

you know I'm updating the value and

again the gotcha is not over here

now let's talk about how the code runs

inside of the component

so let's say if I set up a function and

I'm going to call this say hello so

const say

and hello so that is equal to my

function

and inside of the function what do you

know I just simply want to set up some

console log

I want to go with log and hello there a

million dollar question again we're

doing the quiz yes you got that right so

previous time we went for ten thousand

dollar question why don't we go for a

million this time

so million dollar question

if I have a function over here

and if I invoke it and as I say not yes

the function declaration can be

somewhere else for example it can be in

different file or it can be above the

component my question is

if I invoke this function inside of the

component

how often do you think it's going to run

and possible choices

we have initial render basically when

the component mounts like so so once I

refresh

only then the function is going to

execute then I have after every render

and as I know you can already kind of

see that it's definitely happening when

the component mounts then we have after

every render

and then we have I don't know randomly

after every third render and if you

guessed that it's actually happening

after every render you are absolutely

correct basically the initial render

which again happens when the component

mounts in this case when we load the

application let's say when we refresh

the browser and all that and also every

time we re-render

because what are we doing over here

remember we use state every time we'll

change the value we will re-render

correct

so let's try this one out

notice I start clicking and what do you

know in the console I have bunch of

hello there's

now it's not a good thing or a bad thing

it's just a fact that's how it works if

you have some kind of function here that

is being invoked

and for example this declaration yes

it's going to be set up pretty much from

scratch every time so every time we'll

re-render

react is going to create this function

and also if you invoke the function it

will run the code

now when do we need to be careful

well when we update the state why

because we can trigger infinite Loop so

let me showcase that I'm going to add

comment here so be careful

you will have infinite Loop

now how can we have infinite Loop if we

update the state value inside of this

function so let's go over here with set

value and then I'm going to go to Value

Plus One and before we run it let's

discuss why we're gonna have the

infinite Loop well let's think about it

so we have initial render this is where

we set up the state value and also we

set up the function and we invoke it

now inside of the function what do we do

we trigger re-render correct we go with

Value Plus One

so when we re-render again we do the

same thing we create a state value and

we set up the function inside of the

function we do what we update the state

value and hopefully you see where I'm

going with this

so hopefully this is clear and now let

me just save the file and you'll right

away see a bunch of errors in console so

again just be careful yes there are

going to be times when you will set up a

function here actually by the end of the

section I'll share a resource where

you'll see that

react is somewhat pushing for it

instead of using a bunch of use effects

to use functions like this but again

there are nuances we need to be mindful

when we set up such functions there's

nothing wrong with setting them up the

gotcha is you don't want to update the

state in such a fashion because yes you

will have an infinite Loop and that's

why in the next video we'll cover use

effect and how use effect helps us to

run code

conditionally in our application

basically we'll be able to choose when

do we want to run certain code inside of

our component all right so now let's get

familiar with use effect hook so in the

app.js I'm importing or I guess app.jsx

I'm importing the second one use effect

Basics and you'll notice that pretty

much it's the same starting point so if

I go here yes I have the same function I

have the log now in this case I'm not

updating the state value and I also have

my state value on a button and

essentially when it comes to use effect

hook in react it allows us to perform

side effect in the function component

now there's no need for Urban Dictionary

basically any work outside of the

component and if at the moment it

doesn't make any sense

trust me it's going to be more useful if

we cover some examples essentially it's

things like subscriptions fetching data

fetching data is by the way very popular

or let's say if we want to directly

update the Dom remember in vanilla.js we

can select the Dom nodes with things

like query selector and all that

this is where you would do that we also

can set up some event listeners and

timers and all that kind of stuff we'll

pretty much cover all of these examples

so

please just be patient and essentially

when it comes to use effect hook

we import use effect it's looking for

two arguments the second one is optional

and the first one is the Callback

function

and effectively whatever you have inside

of that Cobalt version is going to run

now by default by default it runs after

every render

which means pretty much initial render

and re-renders but there's a caveat

where we can provide the dependency

array and somewhat important we cannot

return a promise from the Callback

function so let's tackle all of those

things first we want to import use

effect from react whatever we do we

simply go with use and then the name is

use effect like I said hook starts with

use so all the hooks our hooks react

hooks they will start with use okay that

is clear

then let's go I guess pass say hello and

let's just go with huge effect like I

said it's looking for two arguments the

first one is going to be the Callback

function which is going to be invoked

well that depends what we have

independency array by default it's going

to be invoked after every render so

let's try this one out let's go here

with the function again you can pass the

reference you can pass here the arrow

function that is really up to you and

let's go here with log and I'm going to

say hello from and use effect

and what you'll notice that

we have few loaders so let me refresh

basically I want to start from scratch

and

you'll also see hello from use effect

and basically every time I'll click

we'll have both of those logs and as

you're looking at you're like well wait

a minute pal

we were supposed to fix this issue while

you're showing us the use effect well

remember

this is the default Behavior so by

default it runs on each render however

there's a second argument that we can

pass which technically isn't optional

but I mean quite often you'll pass that

argument and that is the dependency

array and if we set up the dependency

area empty

then it's only going to run on the

initial render so let's try this one out

like I said second argument so we go

here with comma and then we pass in the

dependency array so now once I save

check it out

you'll see that yes we have the initial

render and all that everything is

beautiful

but once we click the button actually

you won't see the second log in the

console so notice over here I only have

the hello there however the login

use effect only runs

in the initial render that's it so

that's the biggest difference if we have

just a plane function or we invoke the

function inside of the

component yes it's going to run

on initial render and on every re-render

our with use effect we can start

controlling when this functionality

around

now lastly I just want to mention that

from this function we don't want to

return a promise so

later on we'll be setting up

functionality to fetch data and a pretty

common approach is to go with a sync

right so we set up our function to be a

sync and then we can wait for something

fetch axios whatever

now we cannot do that with use effect

because there's a special thing that we

are returning from this use effect

something we're going to cover a cleanup

function and remember a sync functions

what do they return do I need to do

another quiz or no I think no so I'm

just gonna tell it to you async

functions return promise

so if we set up this function as a sync

it will return a promise and use effect

is not okay with that now keep in mind

within the Callback function I can still

set up a synchronous function and invoke

it so if I go here with some funk I set

it up as a sync and basically have the

await

keyword inside of it and again just for

sake of it I'm gonna go with Fetch and

I'm not going to provide anything and if

I invoke something this is okay you just

don't want to set up the first argument

the Callback function that we're

providing as a sync and don't worry once

we start fetching data most likely I'll

come back and discuss this particular

thing one more time so now let me just

remove that let's save and hopefully

it's clear that we have use effect talk

we import that from react we invoke it

and we provide few things

we provide a callback function which is

going to be invoked

pretty much after every render unless we

provide here a dependency array in that

case if we have dependency array and if

it's empty

the functionality inside of the use

effect is only going to run once

only when the component mounts on the

initial render unlike the regular

function which is going to be

declared and invoked

on initial render and also on every

re-render okay and up next let's talk

about dependency array and how we can

have multiple user effects in our

application

so in the app.js we want to navigate to

zero three and multiple effects and once

we navigate to this file you'll see use

State you'll see user effect and

essentially two State values

this is the case where I didn't see the

point of creating all of this from

scratch there's always so many times

when creating a button and a state value

is useful and notice over here we have

two heading ones in the jsx with two

buttons and guess what pretty much every

time we'll click we'll update that state

value and let's start with the simple

fact that yes you can have as many use

effects in your component as you want so

pretty much you can set up a use effect

for every smallest feature now just

because you can doesn't mean you should

and again I'm going to return to the

point that at the very end of this

section I'll show you a very useful

resource which is going to cover all of

these cases in more detail so please be

patient for now just remember just

because you can have like 10 use effects

in your component doesn't mean that you

should do that and essentially if I go

here with the first use effect if I

uncomment we'll see that basically once

I refresh

there is initial load right so this is

where we'll have that console log and

all that and then pretty much every time

we'll update the state values I mean

we'll see nothing in the console and the

same deal we can set up another use

effect that also is going to run only

when the application loads and again I

can keep clicking all day long and I'll

only see those two logs in the console

so that covers multiple use effects yes

you can have them in the component

doesn't mean that you can only have one

use effect

now also let's talk about this

dependency array notice how when it's

empty it only runs when the component

mounts correct but we can provide values

over here so if I'm going to go here

with value which essentially is my first

one you'll notice that not only this

user Factor runs

when the component mounts and again for

that I'll have to refresh but also

when we update this value

so this is already very powerful where

not only this functionality is invoked

on the mount but also when we're

clicking on the first button however

it's not going to happen if we click on

the second one it's only going to happen

if I add the second value over here

yes at that point

we'll have a log when we click on the

first one as well as the second one and

as you can see this is very powerful

stuff since I can have one use effect

for one value and then the second one is

going to be for the second one and you

can probably already guess that the

first one is only going to show up if we

click over here and then the second one

is going to be when we click on the

second button and of course you're not

limited to the amount of values you can

pass over here you can start with empty

dependency array and then you can have

three five or whatever so that again

really depends on situation just keep in

mind few things first you can have

multiple use effects again I'm not

saying you should but you can and then

the second one is the dependency array

where we can pass

multiple values and every time that

value is going to change we will invoke

the functionality inside of the Callback

function one more time and once we're

familiar with the user effect basics

why don't we work on a little challenge

we're essentially I want you to

fetch some GitHub users from the URL and

render them on the screen

now before we continue let me just

mention that during this video I will

use fetch API and yes I'm fully aware

that there's Library called axios and in

fact we will

use it later on in the course we'll have

tutorial and then for more complex

projects we'll definitely use axios and

if you're not a fan of fetch you can

definitely install axios and use it but

in my opinion for simple examples fetch

is good enough now if you're not

familiar with fetch at all then I

suggest utilizing this link effectively

this is the Jazz nuggets video where I

cover fetch API from scratch and as far

as the challenge we want to go to app

jsx we want to get the star from zero

four fetch data

and essentially in there we want to set

up the state and set up the use effect

and as far as the users the default

value is going to be empty all right

then set up a user effect but make sure

that it only runs on initial render keep

in mind that the URL I provided it has

some rate limits so if you'll just be

randomly testing out stuff by omitting

the dependency array well you'll exceed

that limit then you'll basically have to

wait to work on the challenge

then in the Callback function in the

user effect create a function which

performs fetch functionality

and use the URL I provided in Star file

now you can go with that then or async

that's really up to you so either you

can set up the async function or since

fetch returns a promise you can go with

that 10. and for now I suggest just

logging

so if you're somewhat confused just try

to set up fetch functionality and log

them

nothing more

just log the users if you can log the

users you already in good shape

now if you want to challenge yourself

more then set up users equal to a result

just remember that fetch returns a

promise we need to go with that then and

then we need to return that Json in

order to get the data and I want to set

that result from that Json equal to my

users

the state value and then I want to

iterate over the list and basically

display them

now I don't suggest worrying about CSS

it doesn't really matter

you can show them in any way you want

effectively I just want to show the

profile the link to the profile as well

as their image that's it and a tiny hint

if you don't want to deal with big

images and if you don't want to set them

up in CSS just add inline style for that

image and set up the width for I don't

know 50 pixels or something along those

lines again go to the file try to set up

the logic if you can log that's already

a awesome start and once you're ready to

compare the results continue with the

videos beautiful so now let's start

working on a challenge I'll comment out

the final one in the app jsx just so

it's not in the way

then we want to navigate to fetch data

and you can either use Auto Import or

you can go

basically with import and then those two

values I'll try to use the Auto Import

I'm going to go to use State yep that's

what we're getting from react and like I

said I'll set it equal to a users and

the default value here is going to be an

empty array so I'm going to go users and

then set users now that is equal to my

use State and as far as my default value

I'm going to provide empty array after

that let's set up that user effect so

let's go here and say use effect

notice we have nice Auto Import and I

pretty much always start just by logging

stuff because I don't want to set up the

functionality and then it turns out that

I don't know I'm invoking it the wrong

way or something along those lines

so I'm gonna go ahead with log and I'm

going to say hello let's save it and let

me check

yep I am nice hello in the console and

again please please please please please

please add over here the empty

dependency array otherwise you'll pretty

much have to wait to work on the

challenge you'll right away exceed the

rate limit and you'll have to wait I

believe like 15 minutes or something

along those lines so once we have the

use effect whatever we want to do well

we want to fetch data from this URL

correct and like I said we don't want to

set up this function as async because

for example in my case I'm going to use

a single weight

so I want to set up the fetching

function as a sync

but we cannot do that with the Callback

function that's not allowed what we can

do though is to set up a sync function

inside so I'm going to remove the hello

and I'm going to come up with a function

I'll call this fetch data

this is going to be my async function

and I'm not going to provide the URL

here I'm just going to say empty

parameters and all that

and I'm going to start by just waiting

for fetch so response that is equal to a

weight and then Fetch and let's provide

the URL like I said effectively this is

going to return a promise and I want to

turn this into a Json

so I'm going to go here with const users

and that is equal to a weight and then

we want to go with response and then Dot

and then Json like so we want to save

that and like I said

we just want to start by logging stuff

so in here I'm going to say users and if

in the console

I'll nicely see the users that are

coming from this URL we're good to go

now what's the problem well I'm not

invoking it correct so I'm going to go

here with Fetch and then data and check

it out once I refresh notice now I have

all my users

now when it comes to sync functionality

it's a good practice to set this up in

try catch just in case you have any

errors now I can tell you right away

that when it comes to fetch it doesn't

treat 404 as an error so unlike the

axios which essentially is going to run

the code inside of the catch if you have

404 that's not the case with the fetch

one that's kind of a gotcha so first let

me just cut this one out over here I'll

place this one inside of the try and I'm

just going to lock the error but again

if you'll go here and change the url for

example to users you'll see that

basically the error is not going to run

so go here with error and then again let

me go here with users and then notice

yes we do have an error but it's

actually called in line 13.

so we're not invoking the catch one over

here just again something to keep in

mind because for example axials if you

have 404 yes then the functionality is

going to be invoked in the catch that's

just a tiny side note so once I have the

users what I can do well we can set our

users equal to whatever users we're

getting back correct so why don't we do

this I'm going to go with set users

equals to the users and of course now I

do need to fix the URL

let's save it over here

and if you want you can actually go to a

big browser and let's test out the state

value so let me navigate to the big

browser I'm gonna go with the new tab

and all that

and I want to paste that 5173a

and if we inspect again we can take a

look at the console if we're logging or

we can simply go with components then we

have the fetch data and notice I have

the user effect so I have my function

and I also have my state value so if

we're successful this is what we're

gonna see we'll have this array of users

in the state and like I said that's why

the react Dev tools are so powerful

because you can right away pretty much

get the info okay that's good now let me

remove all these errors and all that I

don't think they're useful and now let's

just worry how we'll render them so

let's navigate to the jsx

and we'll start by setting up the

section so I guess I'm just going to

remove this one there's no need here so

section then inside of this section I'm

going to go with heading three and let's

just come up with some kind of value so

GitHub and users let's save that and

then we want to go with an ordered list

and actually already set up this CSS in

the CSS file so if you'll navigate to

index CSS and if you look for users

you'll see that basically there is

already some CSS attached to it

and essentially this is what you can use

if you want again the CSS part is really

irrelevant

the main point of this challenge was to

set up the logic so let's go here with

another list let's right away add a

class of users and then instead of that

on our list I want to iterate over so

I'm going to go here with users then I'm

going to go with map so we're mapping

over and I'll reference each and every

item as a user now for now let's just

return

the list item with some kind of value

and why I'm doing that because I want to

log and show you what is inside of the

user so let's go here with return list

item and I'm just going to say item

again there's going to be a warning

don't worry about it and yes I already

have a little bit of CSS over there but

if we log we should see what properties

we have inside of that user

so let me scroll up I mean all of them

are going to be the same but I'm going

to start with the first one and check it

out so we have the Avatar URL

effectively this is where we can get the

picture

we also have the login that is going to

be the user account and we have HTML URL

which leads back to the profile and also

we have a ID why do we need ID well

because we have the key correct so what

we can do

we can pull out those properties so I

can say here const and then ID then

login then Avatar and underscore URL

HTML underscore URL and all of that is

equal to my user and then as far as the

return well now let's provide the key

that's the first thing so here we'll go

with ID and then as far as the item I

want to place the image and I want to

set up the div again if you don't want

to use my CSS I just suggest adding the

inline for the image

otherwise they're going to be pretty big

as far as I remember so image now for

the source we want to go here with

Avatar URL alternative I'm just going to

provide the login

it's kind of a shortcut in here

and then right after that we want to go

with div

and then inside of the div we're gonna

go with heading five and we'll display

the name so let's go here with login and

then lastly let's set up that link that

navigates back and if you're interested

in the CSS again please just reference

the index CSS C essentially the styles

that I added they're not that many so

let's go here and let's go for HTML URL

and then instead of the link I just say

profile let's save that and this is what

we should see on the screen essentially

a list of GitHub users hopefully

everyone enjoyed the challenge and I'll

see you in the next video all right as

you can see in the readme technically

our next topic should be use effect

cleanup function however we'll actually

skip this and the following user effect

topic and come back to them once we're

done with conditional rendering

if you're wondering why are we hopping

like that

simply because use of a cleanup function

is somewhat tricky topic

so in this course iteration I decided to

use different example in the hopes that

it will help students to understand the

main Concepts better

and since in the example we're going to

toggle component

we first need to cover conditional

rendering yes I also prefer to cover

everything step by step

essentially in order but in this case

I did not see any other option

so again let me repeat we will skip use

effect cleanup function for now and come

back to it once we're done with our next

main topic

conditional rendering and next let's

talk about conditional rendering in

react

and in short in the following videos

we'll learn how to control what is

displayed in the browser based on some

commission and let's just start with

multiple returns

so as far as the setup

in the app jsx you should import starter

from zero three yep we're switching the

folders and then starter and then zero

one multiple returns

and effectively once you navigate to the

file you should see just the heading to

with two Imports for use effect and your

state and as far as the topic it's

actually not controversial or anything

new

let's think about it in vanilla.js

we can set up multiple returns in a

function so if I have a function say

hello that is looking for the name

parameter if name exists I can go to

early return I can say you know what the

function is going to return hello and

then whatever is the name now if

the name is not provided then of course

you will bypass the safe condition and

then we'll return whatever

we type here in the bottom now just keep

in mind that by default

JavaScript functions return undefined so

if you're not going to return anything

then basically it's just going to return

undefined so if let's say we invoke the

say hello with the parameter if we

provide the argument then it's going to

be hello and then whatever the argument

if not then it's going to be hello there

now

since our components are functions can

we do the same in react and you can

probably already guess that the answer

is yes

and effectively in this file

here is the setup we have used effect in

your state so why don't we set up a

State value and I'm going to call my

state value is loading so that's a tiny

side note where a convention is to call

Boolean values is and then whatever is

that Boolean

value so if it's loading then is loading

and then the function is set is loading

again

it's a convention

so taco and burrito is also a good

approach but

most likely a lot of times you'll see

this type of approach so I'm going to go

with is loading and then we're gonna go

with set is loading so that's the

function that controls it and we'll set

it equal to use State and the default

value is going to be true over here

and essentially it's a Boolean so we can

flip it like a switch

from True to false and false to true and

then let's keep on moving why don't we

set up a condition so I do have my

return

which essentially just says heading 2

with multiple returns Basics however I

can go here with if and I can say if is

loading basically my state value if this

is true then I want to return something

else so I'm going to go here with

heading 2 and we're going to go with

loading and then dot dot now before you

ask yes

essentially if you want you can return

entire application over here

I'm just showing heading 2 but you can

place here 10 000 divs and whatever

functionality you want and check it out

now since this is true we actually

return this heading too so we don't even

get to this return and that's how early

returns work in JavaScript functions if

this condition is true then we return

whatever we have inside of the cartilage

and now the next question is can we make

this dynamic because at this point it's

like okay I can go here and I type false

and of course everything is going to

work but

I mean in the real application you kind

of want to change this programmatically

correct and the answer again is yes now

in our case we'll just Tinker with set

timeout but in the following examples

I'll show you how we can actually do

that if let's say we fetch data for now

we'll just basically pretend that we are

fetching data so I'm going to go here

with use effect I'll provide here my

callback function and I'll say that I

only want to run it once and the

component mode and then let's set up set

timeout and inside of the set timeout we

again need to provide a function that's

going to be invoked and then in how long

and here I'm gonna go with three

thousand basically three seconds so

those are milliseconds and I'm just

gonna add comment here done fetching

there again this is going to be pretty

common example

for using multiple returns that's why I

keep referencing fetching the data

so let's go here with set is loading and

let's set it equal to false and what

you'll notice once you save basically

the way it's going to work while we're

loading while we're getting some kind of

data

will display something to the user so

user knows hey things are happening

users not looking at just blank screen

and then once we're good to go then

we'll display basically the jsx we want

to show to the user

um once we're familiar with the basics

why don't we work on another challenge

and effectively we want to implement

multiple returns when we fetch data

which again

is most common use case for using the

use effect and that's why of course

we're implementing multiple returns with

the fetching data example so back in the

app jsx you should import starter

from the zero to multiple returns fetch

data and then if you navigate to the

file this is what you'll see use effect

in your state imported and then the URL

that I want you to use

and then as far as the challenge first

practice on setting up these State

values so for now practice on a user my

default value is going to be null for

the user and then fetch data from the

URL again

you should do that of course and use

effect and all that and I'm not going to

provide any more details that's the

challenge and again for now just log the

result if you want of course you can set

up the state value and render something

on a screen

but if you see the user object in the

console

and you're already in good shape

so let me navigate back to the component

and effectively like I said the first

thing that I want to do is set up that

state value I'm going to go with const

and then user and then set user that's

my function that is going to be equal to

use State and like I said by default I

want to provide value no so nothing is

going to be there and now let's set up

that user effect so use effect in here

let's provide a callback function

and let's just make sure that we invoke

this again only

when the component loads so we don't

wanna

basically run this use effect after

every re-render and up next I want to

set up that function so I'm going to go

with fetch user is equal to a sync

that's the function and then we're gonna

set up the functionality where oh right

away Place everything in the try and

catch and as far as the

catch I'm just gonna go with error in

here and then when it comes to try now

let's again get the response back first

and that is equal to a weight so we're

waiting then fetch will provide the URL

and let's right away turn this basically

into a Json so const and then user is

equal to a weight again then response

and Json let's invoke this like I said

if you want you can set user equal to

user for now I just want to log this I

want to see whether everything

is working as I expected

so notice over here at the moment I

don't see anything

um and of course the reason why nothing

is happening because I keep forgetting

to invoke the functionalities with me go

with fetch user and now check it out in

the console

I should see the info about the user and

as you can see this is just more info

compared to when we fetched data and in

the following videos set up multiple

returns and also we'll set up a proper

jsx now before we continue you know what

let me just go over here and then

comment this one out so essentially

we can set this one up together

okay and now let's put two and two

together

effectively we know how we can work with

multiple returns and the reason why we

want to use them with fetch data because

essentially you'll have three states

you have the loading one

when we are waiting for data arrive

because keep in mind when it comes to

fetching data it's a synchronous so it

doesn't happen instantly then second

there might be an error so I don't know

maybe the values were not correctly

provided maybe the network doesn't work

I mean whatever there could be all kinds

of errors and then the last one is the

success

and essentially we go through those

States those are our options

and therefore in a state we actually

want to set up two more booleans for

loading and for error and then depending

on the values we want to display

or jsx so let's start working on that

where first I want to navigate back to

the component and let's set up those

State values again the convention is to

go with is and then the name

technically you don't have to so if I'm

gonna go here with is loading and then

set is loading and you know what by

default I'm going to set it equal to

true and then I'll do the same thing

with error now this one by default will

be false

so let's set it back to false

and then as far as these values let's go

error and we want to also change it over

here

let's save it and then let's keep on

moving before we set the user

why don't we set up two conditions so

one is going to be for loading and one

if we have an error now please

placement here is important

so if you place the loading after

the actual jsx you want to return

then it's not going to make sense

because

loading is going to be first and

JavaScript effectively reads everything

top to bottom

so if you have returned before the

loading commission then essentially you

all the time display the jsx and that's

not what we want so make sure that you

set the loading first

so the whole point

of this rant is that the placement is

extremely important and then let's go

here with the return

and we want to provide whatever value

so in my case it's going to be again the

heading 2 with loading and dot dot and

now let's do the same thing with an

error now keep in mind since this is

true we'll right away hit this condition

so this is what will return and error

basically

is going to be displayed only when we

set this one to false so we bypass that

condition and this one to True again

something very important to keep in mind

then I keep getting these questions all

the time and of course q9 that's why

spending more time on that so let's go

over here with loading instead of that

we'll just go with there was an error

let's save this and for now we'll right

away have the loading why well because

this is equal to true then let's

navigate back to our fetch user and

let's go through the logic

so we start over here fetching we

display loading okay everything is

awesome now what do we want to do when

we get back to user well we want to set

our state value right that kind of makes

sense so let's go over here let's go

with set user and now this one is equal

to a user okay beautiful

and then right after these conditions

the try and catch we wanna

essentially

set loading to false because we're done

loading so at that point we have only

two options

either there was an error we didn't get

the data or if everything was successful

then of course we want to display the

user again

it starts with loading

loading is true and then once

we're done with loading then we only

have two options and that's why right

after the catch I want to go with set is

loading and we'll set it equal to false

now let's move up here and let's take a

look at the error so if something goes

wrong

basically this should get triggered

right but again the gotcha with fetch

that it's not going to do it if let's

say the

resource doesn't exist let's say 404 and

this is something that we'll cover in

following videos so I'm not going to

spend too much time on that I'm just

going to say that yes we'll sit here set

is error and we'll set it equal to true

but you'll see that it doesn't work

with all the errors again with axios yes

this is going to be the case

this will be always in the catch but not

with the fetch something important to

keep in mind so now notice first we're

loading and then we have fetch beta now

the loading one is going to be very

quick by the way because again we're

working locally on all that so of course

it's going to happen instantly once we

set up the return yes I'll navigate to a

bigger browser and I'll slow down the

network just so you can see that it's

definitely there so once I have the user

in my state what we can do well we can

navigate down here and essentially

return something display the user we

were actually fetching and here I'm

gonna go with div I'm gonna set up first

the image this is the case where I said

that basically I want to go with inline

styles

just because I know that it's going to

be massive and I don't want to spend my

time in the CSS so this is a good use

case in my opinion for the inline ones

that's why I will go here with width 150

pixels and I'm going to add a little bit

of Border radius here so as you can see

I actually have the error make sure that

you have proper JavaScript syntax

basically we need to come over here and

we're going to set it equal to I don't

know 25 pixels now at the moment we

don't see anything because of course we

need to provide those values and

essentially for the

image I want to go again with that

Avatar I believe yep so we go here with

user and Avatar now keep in mind the

reason why we'll have to go with

user.user DOT user dot is because now we

have an object

so this essentially is the object that's

in our state

so I have a user object and now in order

to access those properties we either can

destructure it something we'll do later

because there's one gotcha I want to

show you or we can go with the object

which in my case is user and then the

property again the Avatar should be

somewhere over here

probably first one yep notice over here

that's the Avatar then as far as the

alternative I'll provide the name here

so let's go here with user and then

Avatar

underscore URL as far as the alternative

we're gonna go with user and name and

then we just want to provide

again name in heading 2 company and a

bio so we have an image then we want to

go here with

user and the name

and then after the name

we're gonna go with heading 4 works at

and again let's grab the curlies we'll

go with user and then company

and then at the very end we have the

paragraph with basically a bio

so user and then bio let's save this and

check it out now we have nicely fetched

a GitHub user so now let me just grab

this URL and let me set it up on a

bigger browser window just so you can

see how basically everything works so

let me open this one up in new tab copy

and paste everything is awesome and

essentially let me slow down the network

and we can do that if we navigate to the

devtools we're looking for the network

one and notice over here I'm actually

using fast 3G that's why I was wondering

why it

took so long in the use effect examples

oh well so actually I was all the time

using that never mind notice basically

if we go the regular it's going to load

right away however if I'm Gonna Change

it to let's say fast 3G

you'll notice that first we'll get the

loading

that's going to be displayed on the

screen so we'll have loading dot dot dot

and then we basically get the user so

that's our setup and up next let's talk

about the fetch errors not bad not bad

we can nicely fetch data in our

application we can display multiple

returns so user is aware what's

happening in our application

however before we

move on to the next topic

I also want to discuss fetch errors

gotcha now if you're not interested if

you're like I'm always going to use

axios and all that feel free to skip

this video technically this is optional

by the way let me add that over here I

mean if you don't want to follow along

you don't have to essentially when it

comes to fetch unlike the axios

it doesn't consider for example

400 or 500 to be an error instead

essentially it treats that as a

successful request now why does that

matter let's go back to our component

and let's try to mess with the URL

so first let me just mess it up the

domain and the moment I do that notice

right away I have error displayed so

this is going to be the error response

so this is going to trigger the sketch

block with fetch however

if I'm going to change this around and

if I'll add the S over here

and basically if I refresh now I'll have

this works at

so as you can see

there is an error but it's not actually

handled in here again why is that

happening because patch doesn't consider

this 404 as an error effectively we do

have the successful response over here

it's just not the user we're looking for

and the way around that is essentially

to look for the OK property if you go

over here and if you log the I'm going

to go with response notice we have the

response and then the value is true for

okay however again if we'll have here

404 and hopefully I'm not going to run

out of the requests while I'm showing

that

check it out over here this is now false

so what we can do in the success block

we can check for that response and if it

is an error we can set again the state

value so let me first I guess just

navigate to a try block and

notice over here where we have the user

so I don't want to get the Json if we're

not successful

so right after the response we can set

up a condition and I'm going to say over

here if response is not true that's what

that exclamation point means so if the

response that we're giving back is not

okay if this Boolean effectively is

false here's what I want to do I'm going

to go with set is error I want to set it

equal to true so now we'll display which

return this one over here correct

and then

after that we do want to set again

loading is false because I want to

return from this function

what I don't want to do is keep reading

I don't want to go with response Json

so I want to return however I also want

to set loading to false so this is where

we need to do technically double the

work where I'm gonna go up I'm gonna

copy and paste and now check it out I

have true for error loading is false and

then I'm returning from this function

what it means that JavaScript is not

going to read rest of the code because

again I don't want JavaScript to go with

response Json why well because I'm not

getting back the user

what's the point of turning the error

into a Json so let me go here and remove

the log let's save that and now notice

how we nicely have is error

even though technically fetch doesn't

trigger the catch block so that's the

fetch error catcher I want you to be

aware of and up next we're going to

return to the topic why or matters when

we are setting up multiple returns

beautiful and up next why don't we come

back to something we already discussed

before that order matters

and why don't we work on a little

Challenge and if I can ask you something

please don't dismiss this topic this is

literally the most discussed question in

course q a

because we do Implement that feature

later on in the project and all that and

this seems to be tripping up a lot of

people that's why I purposely in this

course iteration recording a video in

tutorial just so we can cover this in

great detail and essentially the

challenge is following I want you to the

structure properties so instead of

user.user.user.in jsx

destructure them out of the user

and access them directly

and I'm purposely not telling you where

you should do that because you might or

might not encounter the bug

and effectively that's the whole purpose

of the video

so let's start working on that I'm going

to go back to my file

let's keep on moving and again the idea

is that I don't want to go with user

user user

I just want to grab the properties and

nicely display them in the jsx so what

we can do well we can go above the

return and then one by one pull them out

right so I can go with Avatar URL then

name

then company and I believe I also have

the bio in there and that is going to be

equal to what that is going to be equal

to my user so my state value and now of

course

instead of

user.user.user dot you can simply select

and then remove those instances

so let's go over here and it looks like

a messed it up over here a little bit

that's okay let me save and if you're

refreshing everything still works we are

in good shape

now what's the purpose of this video

well

if you're gonna go above

the loading and I'm purposely going to

place it over here just so you can

clearly see the values but again

typical question is this one if you

place before these conditions why we

have there so let me move this sucker up

all the way over here by user and then

let's save

and what you'll notice that we right

away have big fat error in the console

and JavaScript is complaining

it says I cannot the structure properly

from the user since this is no

so very very important to keep in mind

if you have those multiple returns if

you're just structuring something you

need to do that after the conditions

because keep in mind this is still null

so as JavaScript is basically reading

the code okay users now let's keep on

moving and even before we have hit the

loading or error and all that you right

away start the structuring them from the

null and that's not going to work

there's a reason why we have those

conditions so only when we bypass both

of these conditions we will have that

user

I mean if there's an error then of

course we'll return this one we're not

even going to get to that line

so essentially we'll have the early

return because if there is an error then

there is no user this is still null and

again this is not controversial in the

readme I left some code examples where

this is null and we cannot pull

properties out of null so this doesn't

change we right away basically just try

to read properties out of the no not out

of the object now after returns after

the is loading and and the error yes at

that point we set the user

so at that point we should have the user

object in the state and at that point

it's great you can definitely do so

this is going to work for sure

but before that nope and again let me

just emphasize this by showing you a few

vanilla.js examples because I was hoping

that this is going to help you so if you

have some object you have a property

there

with some kind of value

I mean you can always go object.name

okay that's awesome we can get the

string now what we can also do is simply

go some object and then let's say that

we messed up the property but it's not

there this is still going to work

JavaScript is going to be like okay that

property doesn't exist however

I cannot do this we cannot say hey this

is null and then I'm going to pull

something out of the null JavaScript

will scream

yo uncomplained we cannot do that and

also the same thing is going to work

with arrays and the reason why I'm

showing you arrays example because in

one of the projects this is what we do

we fetch a list but I only want to

display the first item

and what do I need to do well I need to

go with random list or whatever array

you have and then grab the first one

however again in the beginning this is

empty so this will return undefined How

can there be a first

item in the array if the array is empty

so again if we're gonna go here with

random list

when this is just empty and then pull

out the property let's imagine I'm

trying to access some kind of property

from the first item not cool at all

JavaScript will scream yell and complain

now if you're familiar with optional

chaining of course you can make a good

argument well we can avoid all those

things and yes you're right a bunch of

times you will actually

avoid those errors if you use such

approach

and we'll definitely cover optional

training later on in this tutorial

because it is a very important concept

however

the biggest takeaway from this video is

that order matters and that's why we

have the error because the object is

still null

so essentially

it's whatever is the default value so

now let me go back over here and then

let me move this second all the way

where I have the return and now of

course everything is going to work and

we'll have no errors all right and

before we discuss one of the rules of

hooks

let's also quickly cover the location of

the fetch function

so as you're looking at this component

probably one of the questions you have

is following can we just move this fetch

user outside of the use effect or maybe

into a different file

and as far as different file yes you can

do that for sure but just keep in mind

that we're actually invoking functions

from this component

so in that case of course you need to

pass them as

parameters correct basically set up the

parameters and pass them as arguments

but as far as moving this in to a

function body yes basically component

body it's an option so what I could do

here cut it out

and then call it into a use effect now

this copy and paste and everything is

going to work now it doesn't do that in

feed however in create react app if you

do that

essentially there's going to be a

eslinteral that's going to complain that

you need to provide the fetch user as a

dependency and I want to tell you right

away not to do that why well because

we'll have ourselves a problem

so we'll have our initial render where

we'll set up the state values and all

that and during initial render what do

we do over here we invoke fetch data now

what is fetch data doing it's updating

the state value

we already know that so we will trigger

the rerend

so when the re-render happens this gets

created from the scratch and essentially

as far as this dependency array is

concerned

its value changed so what happens here

again we fetch data and again this

problem is going to be easier if I

showcase that over here now you don't

have to do that because I believe you'll

use up all your requests notice I have

403 right now basically I used up all my

searches so yeah for sure don't do that

now I have there was an error right and

effectively the reason why we have that

is because we have this infinite Loop so

my suggestion for now if you're placing

the function outside of the user effect

for now just ignore the eslint warning

you get in the console again you're not

going to have it with Veet but if you're

using let's say a create react app

that's going to be case and later when

we discuss use callback I'll show you

two approaches how essentially we can

make eslint happy and

have the function here

and also pass it here as a dependency

okay and next let's return to one of the

rules of the hooks and as a side note if

you don't want to follow along with this

video you don't have to so in my case

yes I will import the file and all that

but basically I just want to showcase a

few things and the reason why I set up

the file just so you can have it for

your reference so long story short if

you don't feel like it you can just sit

back and relax and watch me struggle so

if I navigate to the file d03 hooks rule

you'll notice that I have a your state

and use effect I have some kind of

condition again this is just a random

value and

the Boolean value is true

so remember when we discussed hooks one

of the rules was don't call hooks

conditionally

so this is not going to work you cannot

place a hook inside of the if condition

hooks need to be called in the same

order

and just to show you another example

which sometimes gets discussed in the

course q a let me first comment this one

out and then uncomment the second one so

you'll notice over here I have the early

return

now this again is not something you want

to do you don't want to place use effect

after this condition because keep in

mind if you're returning that's it we

stop reading the code so effectively we

call the use effect conditionally and

Veet is not going to throw you a bunch

of errors but if you use for example

create react app

you'll have a bunch of warnings and

errors in the console and all that so

again just few things to keep in mind

don't place

the hook inside of the if condition and

also be careful if you have multiple

returns basically if you have jsx

returned based on some condition don't

Place use effect after them make sure

that use effect is always before those

conditions and then yes of course you

can set up tons of multiple returns so

that is still okay but you don't want to

call this one conditionally it's not

going to work okay and up next let's

quickly discuss truthy and falsy values

as well as short circuit evaluation in

JavaScript

because we'll heavily rely on these

topics in the following videos now I can

tell you right away that if you're

familiar with these topics feel free to

skip this video I'll just quickly cover

the major things we need to be aware of

again the whole purpose is

we'll use that in react and I really

want to make sure that we're all on the

same page if you're familiar with these

Concepts then feel free to skip that and

effectively in JavaScript we have falsy

and truthy values and it's going to be

easier to remember the falsy ones and

those are false zero empty string null

undefined and not a number with that

said you have to sit here and memorize

them now just don't be surprised when we

use for example empty string in our

conditions just remember that it is

falsy now why do we care about that well

because

truthy and positive values can be

evaluated in the condition

so we can set up a condition not with

just true and false the Boolean value if

let's say I have hello and as a quick

side note so these are the falsy ones

and all the other ones are truthy that's

why it's going to be easier to remember

the falsely ones so fuzzy ones will

evaluate in the condition to false and

truthy ones will evaluate to true so

again back to your example if you have

these values so X Y and Z and the first

one is a string a valid string second

one is an empty one and third one is a

zero

for the first one if you'll set it up in

the condition actually you'll see in the

console axis truthy so this evaluates

the true again instead of a Boolean this

is a string with some kind of value now

when it comes to a second and third if

you'll run this code you'll actually see

in a console that it evaluates to false

so in the console you'll see Y is fuzzy

now why do we care about that because we

also have short circuit evaluation

and essentially it just allows us to

write code in more concise way and we

can do that by using and operator

and or operator

and as far as the end operator it

Returns the first operand basically this

value over here

if it is fuzzy or the second one if the

first one is truthy so let's just back

up a little bit and let's start

everything from scratch so this one is

zero what it is it is falsy correct and

this one is what it's truthy because

it's essentially a integer that is not

zero now if we have this and operator

then basically if this one is falsy

it will be returned

so if you have two of them and the first

one is falsy then that's the one that's

going to be returned from this

expression now

if it's the other way around if you have

truthy as the first one

then it will return regardless the

second value

something to keep in mind and when it

comes to or operator

it Returns the first operand if it is

truthy

or the second operand if the first one

is fuzzy so as you can see it's the

other way around

if we have example of again zero and one

since this is falsy

the second one is going to be returned

so opposite of end operator

and if this is truthy

then the first one is going to be return

hopefully that is clear and again the

reason why we quickly covered both of

them is because we will use them in our

react setup and as far as

function example since we're working

with functions if I have function

display name and if I'm looking for the

argument of name

if it is provided

then of course I'll have the argument

because in return I have a short circuit

operator I have the or one and remember

if this one is full zip

basically if we don't provide it then

it's right away gonna return the second

value

if this one is true then it's going to

return the first value again let's

double check

if the first one is palsy second one

will be returned if it's truthy then the

first one is going to be right away

return

hopefully we're on the same page and up

next let's see

how we can set up such functionality in

our react components beautiful and once

we have jog your memory on the short

circuit evaluation as well as truthy and

falsy values in JavaScript now let's try

to set them up in react and we'll write

away start with the challenge where

basically I want you to navigate to this

file and I want you to create two State

values one is going to be truthy and one

is going to be falsy and then in the jsx

I want you to set up both conditions for

each operator so

try two of them with palsy so or and and

and the same goes for truthy and a tiny

hint

you want to do that in the curlish in

the jsx so let's start working on that

basically

in the objects I have a star and at the

moment I'm rendering this file okay

that's good

that's an awesome start now let me

navigate over there as you can see I

just have huge State import and now

let's set up those

two State values now you can go with

Boolean that's definitely an option but

I'm just going to go with empty string

and string with some kind of value so

those are going to be my ones I'm going

to go over here and say fuzzy now let's

create that value so text and set text

and that is equal to use State and like

I said we'll start with the false even

then I'm gonna copy and paste so with me

select both of these lines over here and

this is going to be true thing so truthy

over here and as far as the name I'm

gonna go with name

and set name

set name and in here as far as the

default one I'll go with Susan

okay that's awesome

so now let's navigate to jsx and let's

go over here with div and before we type

anything let's just refresh our memory

that in a jsx we cannot do something

like this I cannot set up here a if

condition if and then something this is

not going to work so we'll have some

kind of condition regardless of the

value

will get right away an error something

to keep in mind so let me set this one

up

in a separate line

and let me just add that value

just so it stays for your reference so

let's go over here and let's say it

won't work

I'll work over here and let me comment

this one up and since we cannot use if

conditions in jsx but we obviously still

want to display stuff based on some

condition that's exactly why we need to

understand how short circuit operators

work in react and now let's keep on

moving and effectively you want to set

up four heading fours and in there again

I'll have both conditions so let me

start with the first one and I'll say

fuzzy and this is going to be or example

let me set up a colon then I'm going to

go with the curlies and I'm looking for

a text so that's my falsy value and I'm

going to use my or operator

so now you have to guess which one is

going to be displayed is it going to be

the text one basically empty string or

is it going to be a hello world and once

I save I have Hello World why well

because with or operator if this is

going to be falsy then it's going to

display the second value so now let me

copy and paste then like I said I want

to set up four of them so this is going

to be and and then this will be truthy

so now let me select both of them

and I'll say truthy

and this one will be and

and here

effectively I just want to change the

operator and once I save notice now I

have empty string

so this is how it's going to work in

react again it's the same as in

JavaScript if we have falzi and we have

and then effectively we display the

first one so now let's just change this

around where it's not going to be text

essentially I want to go with name and

you'll see that we have

opposite Behavior where if this is or

then we'll display the first one however

if we have the and one

then of course we'll display the second

one so if this is truthy

then we right away display the second

value and lastly I just want to mention

that of course we're not

limited to just set up this

functionality image.jsx directly I can

also do something like this where I'm

going to go with constant and code

example and that one is equal to

whichever value I want so again I'm

going to use the same one where I'm

going to go with text and then

hello world and then we can render it

right away in the jsx just showing you

multiple

options that you have let me save that

and of course since this is falsy again

we have or operator so we display the

second value

ratcheted for General concept and up

next let's look at the most common

examples okay and once we're familiar

with the general concept now let's take

a look at some examples so in the app

jsx I want you to import zero five and

then the examples and as far as the

component notice over here

we have a few more values basically we

still have the empty string still have

some kind of text also a user and we

also have a Boolean value

and effectively when it comes to or

quite often it is used to display some

kind of default value so let's say if I

navigate here and if I set up a div and

then inside of that div

I want to go with some kind of heading

2. Imagine This

I have some kind of value

in this case I'm going to go text and if

that value doesn't exist then I want to

go with some kind of default one now if

you're wondering like why value wouldn't

exist well keep in mind that quite often

we'll be getting stuff

from the API and it's not guaranteed

that for all the items that property is

actually going to be there so this is

very useful where you can be like okay

try to set this property if not then use

the default value and of course let's go

with name here and you'll see that if

the value is there then of course it

will display the value so that is a

pretty common approach for or operator

in react now when it comes to and it's a

little bit different where instead of

text you essentially control what

elements are going to be displayed now

I'm going to show you both examples

where we use the elements as well as the

components just keep in mind that both

of them effectively work exactly the

same way so if I go here and right after

text I'm just going to go with the

curlies and I'll say if text

evaluates to true what do I want to do

well then I want to return a div with

two heading twos so let's go over here

and let's say div

close div here and then inside of the

div we want to go with those two heading

Tools in one I'm gonna display the name

so I'm going to go over here and I'll

say adding two whatever

and return

and then right after that we want to go

with heading two and I'm going to access

the name over here and notice once I

save I don't see anything why well

because this is false correct so this

one is an empty one

and as a result we don't return anything

basically we have nothing in the browser

and that's something important to keep

in mind where in this case

there's always going to be that having

two tag however if we use and operator

and basically we set up whatever we want

to return you'll actually notice that

there is no div with those heading tools

it just doesn't exist so we only have

this heading 2 with default value we

don't have that second dip now of course

if this is going to be truthy if we'll

add just let's say even one character

you'll right away notice that first of

all

since we have the or operator here it's

going to display this one and when it

comes to text well now since this

evaluates the true now we actually

render div with those two running twos

and of course we access the name here as

well so those are pretty common

approaches where again we use or inside

of the element if we want to display

some kind of default one and we use and

to control effectively what we return

now of course this is going to be

dynamic at the moment we're just hard

coding but normally this is going to be

dynamic so let me set it back here to an

empty string and again notice how we're

not returning anything and before I show

you the component example let's also

cover that we can use the not operator

so at the moment this is fuzzy right

that's why we don't display anything

however

if I stick a not operator in front of it

you'll see that actually everything is

displayed now if you're not familiar

with not operator in readme essentially

you'll find code examples for vanilla.js

again I don't want to spend too much

time on that because I want to move on

with react topics but again if you need

to jog your memory on the not operator

please utilize the readme where you'll

find the vanilla Jazz examples and of

course it's going to be easier to

understand so essentially if I just

stick here the exclamation point in

front of it I'm good to go I'm actually

displaying this why well because by

default essentially this is all Z

however with not operator I'm looking

for the opposite value so now this is

true thing

and I display it over here again

something important to keep in mind so

I'll copy and paste I'll remove this one

and I'll just comment this one out over

here just so we don't have too many and

as always you can reference do you read

me as well and now since we're familiar

how we can use the and operator to

return some elements why don't we also

take a look how we can do the same thing

with components so below my first

component I want to go with second one

I'm going to go with const and then I'll

just say sum component now I know that

I'll pass the prop so I'll write away

the structure it and essentially I'm

going to be looking for the name prop

so let's go over here

and then as far as the return we'll do

the same thing

it's just now we'll return from the

component so if I go with return Then

space and I'll cheat a little bit then

I'm just going to copy and paste so

that's going to be my component

let me scroll up over here and I guess

I'll do after not so I'll set up over

here a logic where

essentially if

the value is true then I want to return

that component and in this case I'm

going to be looking for the user just to

use a more complex example so notice

user set user use State and this is an

object and of course this will evaluate

to true so now let's scroll down and

let's say over here that if the user

exists only then I want to display the

component so say over here some

component and then I want to pass in

that name prop now what is it going to

be equal to well I'm going to go with

name equals to user.name and then I want

to close over here the component and as

you can see now in the browser we have

John because that's the value over here

again both of them do exactly the same

thing

so either you can return a bunch of

elements or you can set it up here in

the component and also please keep in

mind that like I keep saying this is

going to be dynamic so essentially

you'll try to fetch the user from the

database if the user exists then I want

to display

some kind of component with the values

that represent that user and if it

doesn't exist let's say if

the API or database returns that this is

null what do you know we're not

displaying that component altogether

hopefully that is clear and up next I

also want to show you how we can use

ternary operator in jsx okay and while

we're still on the topic of conditional

rendering examples when we also quickly

cover turning operator because this is

also something that you'll see quite

often in jsx and just jog your memory

effectively in JavaScript we have this

option to check for condition and if

it's true when we return the first

expression if not then we return the

second one and the way it's going to

work in jsx first I want to navigate

back to the same file so again we're not

changing the files in here we're working

the same one first I'll start with some

kind of divider and I'm going to go with

heading 2 and I'll just say bernary

operator

and then in here when we add a little

bit of

CSS and I'm just going to add some

margin top bottom

and left and right I'll keep it zero so

one Rems and then a zero and after that

I want to render the button so let's go

with button let's add a little bit of

styles here so I'll say here last name

and then that one is equal to

BTR and then inside of the button

I'm gonna check for is editing and if is

editing is true then as far as the

content is going to be added and if not

it's going to be add so let's go over

here and let's say is editing and then

we want to set up the question mark here

and then the first value is going to be

if it's true so if is editing is true

then we'll display edit if not then

we'll go with ADD save that and now of

course since this is false that's why we

go with ADD now if we'll change this to

True you'll see right away that text

actually is added and not to sound like

a broken record but of course normally

this is going to be dynamic so if I go

back over here to false then I'll have

ADD and I also want to showcase how we

can

use the theory operator to return

elements just like we covered with and

operator so this is one option where we

just check if the value is true and then

we return the component but we can also

use turnary operator and essentially if

it's true then we return one set of

elements or the components and if it's

false then of course we return

other set of elements and in here again

I'm going to check for user so I set up

the curlies I'll go here with my ternary

operator and let's start with a div and

again just to speed this up I'm going to

grab this value over here so let me go

here we wanna copy and paste Yep this is

what we want to do now I'm not going to

probably return two of them you know

what I'm just going to go here with

heading 4. and then inside of it I'll

say hello there and user so what am I

doing over here well since I have a user

object

if it's true if it's not null then of

course I'll display div with the

username now if it is false

then I'm gonna go with colon over here

and basically I'll just say hey

you need to log in so there is no user

so in order to do that I'm just going to

change here heading 2. I'm not going to

be looking for a user because now I know

that this is false of course and then

I'll just say please login and you'll

notice that right away we have hello

there user John

and if we change this to null again then

of course I'll have please login so let

me go back to John and we successfully

covered the most common examples I know

that last few videos were probably a

little bit tedious because we were just

flipping the values from True to false

and that's why up next I'm going to work

on two challenges where you'll be able

to utilize this knowledge all right and

first I want to work on the toggle

challenge so in the app GSX import this

file zero six toggle challenge this is

what you'll see on the screen and as far

as the challenge I want you to create a

state value and in this case I'm going

to go with Boolean please keep in mind

that of course you can set up a

different value again we're talking

about truthy and falsy just to make it

easier I'm gonna go with Boolean then in

the jsx we want to return a button and a

component or element so for sure turn a

button

and then after the button set up some

kind of element or a component that's

really up to you in my example I'm going

to use the component but of course you

can use the element as well and then

when the user clicks the button toggle

the state value this sucker over here

and then based on that value

conditionally render component element

and I want to right away tell you that

there's multiple ways how we can set

this up so again if your logic works

do whatever makes the most sense to you

now as far as my setup first of all I

want to navigate to the file so I'm

going to go to toggle challenge you want

to grab the use State again I'm going to

go with Auto Imports so I'm gonna go

with use state

let's grab that one and it's going to be

false by default now as far as the name

I'm gonna go with show alert and then

comma and then set show

alert now that is equal to of course my

value okay good let's save that and like

I said now we want to set up that button

so in here I'm going to go with div

and first is going to be my button

so begin blah blah blah blah class name

BTN and then on click for now let's not

worry about it I just want to showcase

how it's going to look like so I have my

toggle button and like I said after that

if you want to set up elements or

element you can definitely do so in my

case I'm going to set up the alert just

so I can showcase some classes that we

have in CSS so in here if I go with

alert component

and then as far as the return if I go

with let's say div

return and then div let's add class name

so we have two of them alert which

basically adds the general Styles and

then I also have alert danger which

essentially just adds some colors and

all that kind of stuff so let me close

it here and let me say hello world let

me save this and now I want to go up

where I have the toggle Challenge and I

want to just display the alert for now

this is what we're gonna see on the

screen now awesome

up next I want to actually toggle this

value so first of all let's come up with

the function and in my case that's going

to be toggle alert so I'm going to call

this toggle alert that's my function and

then before I set up the functionality I

want to actually invoke it every time I

click so remember it was on click and

then we want to go with toggle and alert

and as far as the functionality well we

want to toggle the state value right and

like I said there's multiple ways how we

can set this up at the end of the video

I'll show you a shortcut but for now we

can simply do it this way where I'm

going to check what is the value of show

alert basically if this is true then I

want to go set show alert then I'll set

it equal to false and very important we

want to go here with the return Why well

because I'm going to be setting up logic

after my condition and if I don't add

the return Then basically it's going to

hit this

functionality as well because that's how

JavaScript is reading the code so let me

go here with true and notice so if this

is true I want to set equal to false if

not then basically we'll just skip this

condition and we'll set it equal to true

so this is awesome but of course alert

is always going to be displayed we also

need to implement right now our and

operator correct so I'm going to go with

show alert if this is true and what do I

want to do well that's when I want to

display that alert so let me save it

over here and notice

once I click this is of course now true

and I display the alert once I click one

more time then of course it's false and

I don't display the alert and as far as

the shortcut let me keep scrolling and

notice over here this is not operator so

essentially we can just make it a

one-liner where instead of setting up

the entire function and all that I can

just pass here the arrow function and I

can say set show alert and then not so

the opposite value of the current value

of show alert so if it's true then set

it equal to false and if it's false then

set it equal to true hopefully that is

clear

so I'm gonna navigate back again I'm

gonna comment this one out just so it

stays for your reference and now let's

do that one liner where basically we

will go here with my arrow function and

then we'll just say set show alert and

set it to the opposite value

let's save that and then notice our

functionality still works Everything is

Awesome we still have that alert

component if this is true however now we

have less lines of code

all right and up next I want to work on

the user challenge so essentially in the

app GSX we want to import this one the

zero seven

user Challenge and as far as the

challenge we want to set up the state

value in my case I'm going to go user

and default value is going to be no then

I want you to create two functions One

login function that sets the user equal

to a object with a name property so you

simply want to set it equal to object

that name property and some kind of

value again that value is totally up to

you and then we also want to set up a

log out

button

and for that we'll need a logger

functionality

and in there I want you to set user

equal to a null

so set it back to the default value

which is null and then in the jsx use

the ternary operator to display two

different setups so if the user exists

we want to go hello there and then try

to get the username because remember

we're setting the user equal to an

object with the name property and also I

want to display the logout button

so if the user has already logged in I

don't want to display the login button

that doesn't make sense I want to

display the logout button and then if

it's false if the user is false I want

to go with heading 4 and please log in

and a login button so let's start

working on this challenge first I'm

going to go with const and like I said

in my case I'm going to go to user and

then set user that is equal to my use

and then state so that's imported and

we're going to go with no that's going

to be the default value and right out of

the gate let's set up those functions so

const login

and that one is equal to a function here

and then I want to go with set user and

I want to set it equal to an object so

name and in my case I'm going to go with

vegan

food truck because why not and then I

also want to add here a comment where

normally

connect

to DB or API so essentially you're not

going to be hardcoding this

normally you'll connect to the database

if everything is correct if it's the

right password and an email and all that

you'll get back the credentials for the

user and that's where you'll set it in a

state value now if it's not then of

course nothing's gonna happen you'll

display probably some kind of error

message

but hopefully this is clear so of course

in this example we're basically hard

coding we're saying yeah once we log in

everything is going to be fine but it's

not always the case

and of course later in the course we

will connect to a database and we'll

check what's happening and if everything

is correct that's when we set the user

but again the main idea is going to be

exactly the same you have that flag the

user basically and if it exists it's

awesome I want to display it if not then

I want to go with a logarithm hopefully

that's clear copy and paste I don't need

a comment here

I can set it up as null as well

no and

I want to call it logout here

let's save this and now let's work on

the jsx so first I want to display the

div then instead of the div I want to

set up right away js6 and I want to go

with user

so essentially I'm checking that user

value and remember I have two options if

it's true it's one thing if not then

it's something else so let's start if

it's true and again yes you can set up a

component over here so if you want to

work on the challenge more

you can set up these returns as separate

components so in here let's go with div

I'm going to set it up as heading four

remember in this case user exists so we

can simply go with hello there

and we can try to access the username

now if it's null then it's not going to

make sense correct so user.name okay

that's awesome and as far as the button

well like I keep saying we're not going

to display the login

we want to display the opposite one

which one is that well that's the logger

one so let's go with button class name

BTN okay that's beautiful on click and

now let's go with our log out button and

the same goes for the text so log out

here let's save it and we'll have an

error don't worry we'll fix that in a

second

essentially we want to grab here this

div

and we want to copy and paste

now here we're working with opposite

values correct so we're going to go here

with please log in and we're going to

change the button this is going to be a

login button

over here

as well as here let's save that and

check it out

now we have

div with these values and the moment

we'll click will actually flip it

so notice this is what we have right now

e in our browser right so these are the

elements we're returning however once we

click check it out now we're turning

different values so now we have hello

there vegan food truck so essentially

we're displaying that user has logged in

successfully and now he or she has an

option to log out and once we log out of

course we have the previous screen The

Heading 4 with please login hopefully

everyone enjoyed the challenge and I'll

see you in the next video all right and

now let's go back and discuss use effect

cleanup function and why it's useful so

yes

once we're done with conditional

rendering we'll actually go back to zero

to use effect and

take a look at the cleanup function and

you'll see in a second why and let's

start with the challenge so I want you

to create a state value and

in jsx set up a button which toggles the

state and based on that condition return

a second component now that's a totally

simple return you don't need to worry

about returning 10 000 elements

literally it can be a heading 2. now

what's important in the second component

create a use effect and run it only

on initial render and remember in order

to do that we needed to use a second

argument

in the use effect and once you have the

example in place then we'll discuss

why we have such interesting Behavior so

again we're looking for use Effect Star

and then zero five cleanup function

that's what I have in the app jsx and

then as far as the file

first let's just go with some kind of

state value so in my case I'm going to

call this toggle const and then toggle

set

toggle and that is equal to use

huge State and by default let's set it

equal to false but after that let's set

up that return

so right away go with return and I'm

going to remove the heading too and I'll

go with div instead and then in here

let's create that button then we're

going to go to class name and that BTN

we also want to right away add on click

and let's pass in the arrow function as

far as the logic will go with set toggle

and we'll use that not operator so set

it equal to the opposite value and then

in here

I want to set up some kind of text and

I'm going to go toggle component let's

save that yep I have the button

everything's awesome so now let's set up

another component and based on that

state value let's toggle it so in here

I'm going to go with const and then for

random

component

again the entire gotcha is the result

you'll see in the console so that's the

most important one first for now let's

just go in random component then

let's go with heading one man we'll say

hello there

hello there now we already know that of

course we can toggle it correct so if I

go here and if I'll say toggle and paste

on that value if it's true then I want

to return the random component if not

then nothing is going to be displayed

so we're expecting this Behavior correct

all of that is good so now we're putting

two and two together where we can use

conditional rendering we can display the

component but also keep in mind that in

any component we can set up the use

effect correct so let's try it out we're

going to go here with used effect so

we'll pass it here and then remember

like I said we have two arguments we

have the function that's first

and then we have the dependency array

now as far as the function here we're

going to go with some kind of log we'll

say hmm that's interesting and you'll

see in a second why so

um

this is interesting okay good let's save

it and now million dollar question yes

we're going back to the quiz

how often do you think this is going to

show up

so remember use effect

it has the dependency array and

technically this is empty

so two options

either it's going to show up only once

when the component renders or

there's actually a gotcha and we'll see

it more often so let's try it out I'm

gonna go over here and check it out

every time I click

I actually have this Behavior

now before we continue why is this

happening well remember long long long

long time ago we discussed

the render and re-render correct so

let's go with I don't know initial

render maybe this way I'll be able to

find it

yep over here remember

we discussed the initial render and

re-renders and I said that

for time being let's think of initial

render

where basically the application loads so

that's when we render for example this

sucker over here the cleanup function

however

when we start toggling the component

essentially we Mount and unmount the

component and during the mount we repeat

initial render

so of course the functionality inside of

the use effect will run even though the

dependency array is empty but notice now

I'm displaying the hello there that's

the initial render and yes if there's

going to be some kind of logic inside of

the random component of course it will

re-render if you'll have to use state

but my main point in this video is to

Showcase that just because we're used to

use effect just running once

when the application loads it's not

going to be the case if

you're displaying the component

conditionally because in that case that

initial render is going to happen every

time you basically Mount and unmount

Mount and unmount

and this is why

the cleanup function which we're going

to discuss in the next video is going to

be useful just don't be surprised if you

have some kind of component that is

being mounted and unmounted and even

though you do have this dependency array

as empty the functionality inside of the

use effect which in this case is just a

simple console log

keeps running every time we basically

show the component again it's not a good

or a bad thing in the following videos

we'll take a look at few examples and

when it becomes a problem just something

very important to keep in mind but yes

you have this initial render when the

application loads but for components

that are being displayed conditionally

actually it's going to happen when you

also Mount the component okay so

hopefully it is clear when we're

toggling the component when we're

mounting an unmounting component the use

effect even though it has empty

dependency array is going to run every

time we show the component basically

every time we Mount the component unlike

in this example the cleanup function

which is only going to be mounted once

now this is just a fact

when it becomes an issue well if we have

some kind of functionality that

essentially just keeps on running

now I picked two examples the set

interval and the event listeners keep in

mind that of course there are other use

cases and essentially the main point of

these videos is just to showcase

how we need to be careful when we are

toggling the component if we have some

kind of functionality that might

possibly lead to an issue that's when we

need to go back and set up the cleanup

function please keep in mind you won't

need to set up cleanup function for

every use effect but yes in some

instances it's a good practice now when

it comes to set interval basically it

comes from vanilla just just like the

event listeners and essentially we go

here with set interval we want to pass

in the function we want to invoke and

then

essentially the interval so in my case

I'm going to go with one second and I'm

not going to be too

dramatic and I'm just going to pass here

the log I'm going to say hello from

interval and what do you think right now

is going to happen

so if I toggle the component

I have

is interesting okay that's what I

expected but I also have this hello from

interval so that's the functionality

now where it becomes really interesting

is when we actually

on toggle the component notice how this

just keeps running even though the

component is not displayed and again

this can lead to some serious issues

let's imagine you're subscribing to some

kind of service

and essentially you still have this

running in a background even though the

component is not displayed anymore

what's even more interesting the more

times I'm going to click the faster it's

going to go because now I'll have more

set intervals now what is the solution

well it's a cleanup function and the

syntax is a little bit funky so just

bear with me we want to go here with

return

and we want to return a function and

then whatever is within this function is

going to be invoked and I'll showcase

when it's actually invoked and that's

the reason why we don't want to set this

one up as a sync like so because react

is expecting that if you're returning

something you're actually returning a

function now when it comes to set

interval it actually returns an ID so in

here I can go to const and then whatever

the variable and then in order to clear

this interval we want to go with special

method it's called clear interval and we

want to pass in that ID again this is

just for Interval but effectively yes

when you have a cleanup function what

you want to do is essentially just to

clean up whatever functionality you have

over here so if you're subscribing to

some kind of service you want to

unsubscribe otherwise it's going to be

running in the background and now notice

something interesting we're basically

I'll click I'll have the hello from

interval but the moment I hide that's it

the interval is not running anymore and

I can click all the time

but

you'll see that essentially it's not

going to be running if the component is

not displayed now when this one runs and

this one is a little bit tricky where

basically if I go here with log and if I

say render

and you know what let's clean out these

logs for now

let me comment them out you'll see that

of course when it runs well on a show

render right so this one we're not

toggling only when we Mount the

component basically when the application

loads that's when we essentially render

this component the cleanup function now

if we go here inside of the cleanup

function and if we type log and we'll

say

clean up

you'll see that essentially it runs

after this render

and before the use effect so that's how

we can clean up after ourselves so let's

refresh one more time initial render

then once we click what happens well we

re-render this component right

because we change the state value

and now check it out once I'll click

again I'll re-render and I'll clean it

up so notice

I have another re-render because again

we flip the value and then I have the

cleanup so essentially it runs after the

render and before the use effect so in

our case basically when the component

and mount that's when we run it

hopefully that is clear again this is a

function we want to return we want to

set up here some kind of functionality

and

we want to do that in order to clean up

whatever we have in the use effect just

so it doesn't run in the background okay

and now let's take a look at another

example and in this case we're going to

use event listeners again something that

is coming from vanilla JS and

essentially the way the event listeners

work in vanilla JavaScript we just go

with the element in this case I'm going

to go with window and then we add The

Listener and then whatever event we want

to listen for so in this case I'm

looking for the scroll one and then we

want to pass in the Callback function so

essentially this callback function is

going to be invoked every time this

event fires and in our example

we want to go over here we want to set

up the function inside of the use effect

and all that and then we want to attach

that listener on the window and then

we'll see some interesting behavior and

of course after that we will clean this

up because that's the main point of

these videos so let's start over here by

just removing everything and let's come

up with that some funk again doesn't

really matter what happens in here and

therefore I'll basically leave it blank

that's irrelevant over here so I'm just

going to say here some logic and then

now let's go with window again in react

we do have access to the window object

we go with add event listener we're

listening for scroll and basically we go

with comma and then some function so

this is going to be invoked so let's

again click and

refresh and all that let me click over

here notice we have the render okay

that's what we expect what we don't

expect probably is if we go

to a bigger browser window and if we

check the event listeners in tabs and if

we refresh basically see over here that

we have quite a few event listeners so

let's go here notice how I toggle the

component and once I refresh I have here

the scroll and now notice how many I

have over here so essentially

every time I toggle the component I'm

actually attaching that event listener

on a window and again

eventually this can lead to an issue now

some students have complained that they

don't see that and every time I go and

double check in my browser I can still

see it again you're looking for event

listeners and then you want to refresh

and you want to check out every time

you'll toggle the component essentially

the value is going to increase over here

so you'll have more event listeners now

if you don't see that again just trust

me that that's the behavior so now let

me navigate back and let's see how we

can

fix that issue and again we want to go

here with the return

a function and we want to go with window

then the method name is remove event

listener and in here we want to pass in

the scroll then comma and then we want

to pass the same function so in this

case it's going to be some function and

now you'll notice that

once I refresh

once I toggle the component and refresh

yep I have one so that's fine but then

once I hide the component and refresh

notice I don't have any more of that

scroll event and effectively that's how

we can use the cleanup function in a

Year's effect not bad not bad we're

pretty much done with use effect as well

as conditional rendering for that matter

but before I let you go let me share one

particularly useful resource which is

from react docs and it essentially

covers use effect Alternatives now

before you start yelling at the screen

yes there are still use cases for use

effect so no we did not waste our time

on learning use effect especially

if you consider how much code out there

is still using use effect

now since the article is quite extensive

I'm just going to give you a general

gist

you see when the react hooks came out I

believe it was version 16.

developers started using use effect for

pretty much everything

and as a side note yes

I was one of those developers as well so

I'm not casting any shade however

such approach basically to have use

effect on top of use effect can

potentially lead to clunky code

basically hard to read and manage as

well as some performance issues

so in this article the reactive is

simply encouraging the community to

consider alternatives before jamming yet

another

use effect in the component

and if I may make a suggestion try to

find some free time to skim through this

resource again you don't have to go line

by line take a look at the general ideas

and the next time when you want to set

up a use effect just come back to it and

see whether there is a better

alternative

quite often you'll be able to achieve

the same functionality by adding logic

straight in the jsx or by setting up an

extra function in the component

lastly one major use case for use effect

used to be data fetching something we

already covered in the previous videos

however as I'm recording this course

iteration at this point in time there

are some great libraries for example

react query which actually allows to

fetch data with just one line of code

so basically without doing too much work

we already can use less use effect

instances in our applications

as you can see in the code example we

simply install the library use a custom

hook and right away get back data error

loading and a bunch of other useful

stuff about our request what's more such

libraries also take care of things like

caching and synchronization so it's no

surprise that they are gaining

popularity with the speed of light

especially for bigger projects with

bunch of requests and yes as a side note

we will build a project later on of

course with react query now does that

mean that you have to use such library

in a small project where you have only a

few get requests

no I probably wouldn't do that just

something to think about when you start

working on your own projects simply be

mindful and consider alternatives all

right and up next let's talk about the

project structure essentially I just

want to showcase few ways how we can

structure our project because while

we're working on somewhat small project

this type of approach where you set up

the components folder or whatever you

want to name this folder and then set up

all your components there is awesome but

as your project grows and you have a

need for more files you might want to

implement different approach and

effectively we're going to work in the

zero four project structure will work in

a star one and as you can see at the

moment it's empty and also in the app.js

I'm not importing anything so jsx is

empty I just have the container

and effectively one way how we can

set up the structure for our project is

by

setting up every component as a folder

so let's imagine that we have some kind

of nav bar component and instead of just

setting it up as component I want to set

it up as a folder and in there I'll

actually have the CSS file now

the goal here is following essentially

as our project grows we might want to

keep all the files that are associated

with that component in one folder

and in turn is just easier you don't

have to run around your project and look

for CSS files the test files and all

that you know that hey this is a

component and these are all the files

that are associated with that component

so let's try this one out and in the

process we'll take a look at multiple

approaches so in here I'm going to go to

starter I'm going to go to a new folder

and let's just call this navbar and in

here we'll just set up some example

component again

it's really irrelevant what we have over

there so I'm just going to go with

navbar jsx let's create the component

I think I'm going to change it to

heading like so and then I'll create

empty CSS file again it's irrelevant

what we have over there

just want to showcase the example so

I'll go here with navbar and then CSS

and of course

if you want to test it out you can set

up the CSS over here and you can Import

in Napa I'm not going to do that then I

want to go back to app jsx and I want to

import that component again

the goal of this setup is essentially to

keep all the files that are associated

with that component in one place in this

case it's just navbar CSS but of course

there's other things that you can keep

over there and in the app jsx if we want

to grab this component we simply go with

the name of the component and we use the

Auto Import and check it out now of

course I have the nav bar displayed on

the screen and again all the files that

are associated with this particular

component are located in one place but

here's the gotcha

not as this one

we have navbar and then navbar

and this is somewhat annoying

where essentially yes I have a nice

folder but I don't want to keep using

two names here one after another which

essentially are the same and one

solution for that is to create here

index

so we're going to go over here with

index.js and basically we can set up the

logic here in the index.js so for time

being I'll just copy and paste because

we will change our logic in a second for

now I just want to showcase that if

let's say I go to index.js and then if I

go back to my app one I can omit that

nav bar now I do need to fix the

extension my apologies I keep forgetting

with Veet that we need to go with jsx so

let me save Here and Now check it out I

have the navbar so essentially we save

that one word here so instead of navbar

navbar since this is a node project it's

essentially a node thing where if you

have index in the folder that's going to

be used as an entry point so whatever

you have over here here is going to be

right away exported so in our example we

don't need to look for specific file we

can just say Okay so get me the navbar

folder aka the navbar component

now what is the issue with this setup

well if you have tons of files

effectively it just becomes bunch of

indexes so it's very hard to navigate

around your tabs so let me show you a

way how we can

have our cake and eat it too basically

we won't have to use that nav bar nav

bar and we also will have a bunch of

these indexes over here so I have the

navbar component and I have the

index.jsx what I can do in

index.jsx I can import

the nav bar and then export it as

default so it's going to look like we're

going to go over here export and then

default

and we're looking from and since it's in

the same folder we just look for the

navbar and if I navigate back to the app

jsx first of all if I want to do

something in the navbar well I'll be

using this tab right so this is my

component and I'm just using index to

export that component and here nothing

changes so if I want to grab the navbar

component then of course I'm just

looking for the folder and as you can

see everything still works so we have no

issues

so that's how we can set up essentially

a folder for every component and few

ways that we can use index.js to

simplify our workflow now let me stress

something it doesn't mean that now you

have to use this kind of setup for every

project again this only makes sense

if your project is big and you need some

kind of structure to navigate around the

project all right and up next let's take

a look at another approach where we can

set up named exports and this is

definitely something we're going to use

during the course but again I want to

stress something this only makes sense

if you have a bunch of components in the

folder and you'll see what I'm talking

about in a second and effectively we'll

definitely use this one when we're going

to work with react router because in

that case you have quite a few pages and

it just makes easier

if you set up such named exports so

first we want to navigate to the starter

and we want to create another folder and

in this case let's call this pages

now inside of the pages what we want to

do

we want to create two pages the home

page and the about page and little

spoiler alert when we're talking about

pages in react essentially we're just

talking about the components so I'm just

going to create here home jsx I just

need to remind myself all the time that

I need to go with jsx so we want to set

this one up this is going to be our home

page and then we want to do the same

thing with about so about and then js6

same there we want to create that this

is going to be our about page and if we

navigate back to app jsx

I mean everything is awesome we'll be

able to access the pages same deal we go

here and then we also want to go with

about so this doesn't change but notice

how

we're getting quite a few lines of code

over here and imagine if you have 10

pages

so essentially every time you want to

use all of them you'll have like I don't

know 20 lines of code or something like

that and there's a way how we can

simplify this

so first let me remove this number we're

not going to need that and back in our

Pages we can create another index.jsx so

remember that's going to be our

entry point over here and we can import

or the components from this directory

so essentially we can do like this I can

go with home so I'm importing home and I

also want to do the same thing for about

like so so I'm going to go with about

and then from the index I want to export

that so I'm going to go with export and

I'm going to go with home and about and

essentially if you have 20 components

this is what you'll do you'll import all

of them in the index.jsx and you'll

export and the beauty here is that if I

go back to app jsx

I don't have to provide the path for

every component I can do like this let

me remove now these ones are named

exports so the names need to match

that's something important so here I do

need to go at home and I do need to go

with about if you'll go here with

contact or whatever it's not going to

work so first let me just showcase how

this works and then

we'll take a look at the error example

as well so now let me remove home

because notice now we're looking for

that index and check it out everything

still works

so essentially if you have 20 components

you can nicely import them effectively

in one line of code no I mean the path

is a little bit longer so it's

technically two but hopefully you see

where I'm going with this so instead of

using

the import for every component we're

going to import all of them together

again we set up index jsx in that folder

that's going to be the entry point and

one by one we grab those components and

then we export them but again keep in

mind if you're gonna do here like this

if you'll say hey get me the contact

what do you think is going to happen

we'll have big fat error right so if

we'll save notice it says well there is

no named export contact that's just

something to keep in mind now you can

set up the aliases and all that I'm not

gonna go as deep

in these examples we'll just stick with

the ones that we just covered so this is

a nice way how we can group all of our

components together and Export them as

named exports okay and lastly let me

showcase how we can export group of

components so this is going to be a

little bit different and also a very

useful extension glean and maybe less

useful to some people but to me also

very useful a code spell checker so

first let's start with example directory

where

we'll take a look at how we can export

as a group

first I want to navigate to app.jsx I

want to clean this up so I'm going to

remove the existing ones then we want to

navigate back to the star we'll create

another

folder and in this case the folder name

is going to be example

example in here let's create two more

components

so I'll call this first component and

second

as always sex jsx so let's create that

component I think I'm going to go with

adding two just so we can see it better

so first component okay awesome and then

we want to do the same thing here with

the second one so second and

component

jsx okay beautiful let's create that

awesome and then let's change it to a

heading two so another way how we can

export from this example essentially I

can set up a index

and I can import all of these ones

what I have in the example in the jsx

now why that would be beneficial well

let's imagine you have some kind of

component that is using

for example five other components again

instead of those components being just

scattered around your project if you

know that you'll definitely use those

five components inside of that one

component well it kind of makes sense

you set up index.jsx you just import all

of them and you're good to go so just to

Showcase that we can go new file then

remember yes index

jsx or JS is going to be the main entry

point so at the moment we create that

file yep as far as the paths and all

that it's going to point to this example

and in here we simply want to create a

component

and let's call this I don't know example

why not so let me select

all of them and we're going to call this

example we'll also rename this and then

we want to import those two components

so we want to go here with the first

component and second component and you

know what I think it's going to make

more sense if I'll place a div over here

and then one by one I'll add both of

those components so first component

close it here and then second component

as well so Auto Import second component

awesome let's save that and it looks

like I forgot to change it over here so

we need to go with example

and now we simply want to go back to app

jsx and when we want to grab that

example folder so let's go here example

and check it out I'll have example and

first and second component again

something that has a very specific use

case you don't have to do that for every

project but here and there it's somewhat

Nifty and that's why I decided to add a

two tutorial and now let's take a look

at those two extensions like promised so

first of all this one somewhat

straightforward but extremely extremely

useful for me the code spell checker and

it's somewhat self-explanatory it just

checks for spelling errors this is very

useful especially if you're following

along

because it will right away notify you if

your name is off now it's not looking

for the error you're just going to say

Hey listen

the spelling here is incorrect and why

I'm telling you that because quite often

I see students

sharing their code and I can see that

the problem is that they used the wrong

name in the first place let's say

there's some kind of spelling error and

then later on they use the correct one

and then things don't work so I think

it's going to be easier if I showcase

that let's imagine that in here I'll

have some kind of function so I'm going

to go with const and then handle and

change

now everything is awesome but let's

imagine that as I was adding this

function instead of handle I went like

this so right away I have this blue

squiggly line which is going to tell me

Hey listen I mean technically there's

nothing wrong with your code but you

should probably check this does this

really make sense as I know this is

super useful for me because I'm the

worst speller ever and then I also want

to showcase the glean extension and

what's really cool about this extension

we can pretty much take elements we want

to set up as component and right away

create a file so let's imagine the

scenario in the app I have some kind of

element let's say div and inside of it

I'm going to have a heading three and

I'm gonna say hello world now if I want

to set up a separate component what is

normally the

path well I need to create a component

somewhere here right then I need to grab

the elements and then copy and paste and

it's much faster with gleam so

effectively I can select the elements I

want to extract I want to click on the

light bulb and check it out we have this

option extract component to file we

click we need to pick the directory my

case I'm going to go to Source keep in

mind but of course you can go tutorial

for example I'm just picking the easy

option and then we're going to go here

with test so the file name and I'm going

to go with jsx and notice how right away

not only it sets up the component not

only it Imports it but it also right

away sets up the component file as well

and what's really cool it even provides

the props which is super Nifty if for

example you're iterating over the list

and then you're passing in some props

into the elements you can essentially

right away set it up as a component and

extract it again super super useful

extension we save it over here and

notice

the result did not change however this

is much faster and effectively this

concludes the project structure

section and up next I want to talk about

how we can leverage JavaScript in react

all right and up next let's talk about

how we can leverage JavaScript basically

how we can use JavaScript to fix issues

if the data is missing and if you're a

little bit confused on this entire topic

don't worry as we're going to be working

through the examples you'll see what I'm

talking about first notice over here

that in the app I'm not importing that

and I'm doing that on a purpose because

we'll set up everything from the scratch

so let's navigate to tutorial and we'll

right away start with the challenge and

as you can see the further we get in

tutorial the more challenges we have

because now I want you to utilize

everything that we have learned so far

and in this video or

more precisely in this section so most

likely in the following video will rely

heavily on optional chaining and if

you're not familiar with this topic

please utilize this

JavaScript nuggets video now I do have

the info also in the readme so if you

don't feel like watching the video you

can just scroll down in the readme as

well so first I want you to navigate to

zero five leverage JavaScript and you're

looking for the starter

and in there we basically want to set up

the component now before we set up the

component I just want you to navigate to

data.js and take a look we have this

people array so this is what we're going

to be importing into a list one so

whenever I say people just think of this

array and as you can see in here we

basically have list of objects and each

object represents the person and the

question here is that some object

have the properties for example nickname

and the images URL and some don't and

before you wonder why is that the setup

because this is I wouldn't say quite

typical but don't be surprised if you

work with an API and that's the case

again I'm not saying that every API has

this issue where basically the data is

missing but you will run it through some

instances where essentially yes

some items have certain properties and

some don't and also it happens quite

often when you work with headless cmss

essentially a nice graphical interface

where you can add your own data and for

some weird reason let's say you forgot

to add that data that quite often

happens with an images trust me on this

one for sure and if you're wondering why

we have this weird nested structure

again when it comes to images don't be

surprised if you actually see this in

the real world it's not as

flat as you might expect so you're not

going to have a bunch of items with just

okay name nickname and image no when it

comes to real apis yes you have this

nested sometimes weird structure so the

sooner we get comfortable with that the

better it's going to be in the long run

so hopefully this is clear hopefully you

haven't turned off

since I was just ranting here about the

array and now let's navigate back so

effectively this is the challenge we

want to create a new component I'm going

to call this list call this I don't know

orange still going to work and in the

list I want to import the people all

right again from the data I just showed

you and I just want you to iterate over

and render name that's it let's just

start very simply

we'll display the name now once

everything is correct once you can see

the name in the browser

after that I want to set this one up in

a separate component basically what

we're turning and this is a good use

case to try glean extension now you

don't have to but I will I'll just

showcase how the extension works and

then in the person try to render all

three properties and I'm sorry this is a

mistake we're not going to be looking

for a sister we're going to be looking

for the image so initially when I was

building this example I used sister but

in fact we're looking for the image and

as far as your question do I effectively

need to get this URL yes you're

absolutely correct so in order to show

the image you'll have to figure out how

to access the URL which is quite nested

as you can see

and if everything is correct yes there

will be a bug effectively that's the

point of these videos to show you how we

can avoid such bugs so try to work on a

challenge and whenever you're ready to

compare the results resume with the

videos Okay so let's start cracking

first I want to navigate to the star and

I'm going to create that list so as you

can see the star is empty and I simply

want to go list j s x in here let's grab

the data

so we're looking for people array in the

data I'm pretty sure it's going to give

me an auto import so I just want to set

up the list first and then inside of it

I want to iterate over data so where I

have the div I'll simply go with an

expression and I'll try to type people

and if everything is correct I should

see them yep as you can see everything

Works nicely now I have the people okay

that's good it's going to be an array so

I do want to iterate over

so let's go here with map and I'll

reference each and every item as a

person and then as far as the return

like I said simply for now we want to go

with person.name because that's the

property that all of the items have as a

quick send out

when it comes to key you can actually

use the name in this case as well so

remember all this time I've been showing

you following approach where if you have

the div or whatever element you want to

return

um if this is where we're iterating we

want to go with key of course and then

we want to go with that unique one so up

to this point all the time we have been

using the ID keep in mind that in this

case let's imagine that we don't have

the ID over here

we're still loving the name and at least

in this case since I have four items all

of them are unique so yes

you don't always have to go with ID but

it's going to be somewhat common because

with the case of ID it's always going to

be unique so here I set up the key it's

going to be equal to person ID and then

I want to render that I want to go with

person dot name let's save it now I want

to navigate back to app jsx I think I'm

just gonna do it right after the hearing

2 because why not and in here I'm

looking for less than again I'll rely on

the Auto Import like I said if

everything is correct this is what we

should see on the screen

great start and now let's navigate back

to the list and now try to set up this

one as a separate component now if you

want you can create the file yourself

and all that or you can utilize the

extension I showcased I believe in the

previous section

basically which one was that this one

over here the project structure so I

want to hover over it I'm looking for

that light bulb and I want to go here

with extract component to the file and

in here we just need to look for the

correct path we need to make sure that

this is the one that we click okay

awesome we want to create a new file and

we want to come up with a name so in my

case I'm going to call this person and

then j s x and check it out again we

right away have the import we right away

have the component and then if you check

the person notice we right away have the

prop set up as well now as you can see

there are some issues here so basically

either all I have to pass the person

from the list or in my case since I'm

going to be spreading out I'm actually

going to remove these values over here

so it's not perfect but at least it gets

us halfway correct so let's just

navigate back and in here essentially

again I want to set up that key so I

guess this is the case where I can just

simply grab this one

over here person and like I said we can

use the name over here like so and then

after that I want to pass the entire

person

so I'm going to be spreading out all of

the properties we can most likely save I

believe and then back in the person

I'm not going to be accessing person in

such a way

I'm gonna go one by one so I'm going to

go with name then I'm also looking for

nickname that's the second property that

I want to showcase and I also want to

get that URL

now in order to access that URL what

I'll have to do well I'm gonna go with

images correct since that's the array

over here

and for now let's just leave it the way

it is and let's decide what are we gonna

be returning so in here there's going to

be a div and let's just try it out with

a name because like I said there's going

to be a bug So eventually we'll have an

error so for now let me just see whether

everything works yep so I can nicely

display the name now let's go with

nickname so right after that we want to

go with paragraph and I'm going to come

up with whatever value so nickname and

as I say note this is now what I wanted

to do

so let me just take this one out

and then I'll place it here before the

curlies and now let me access the

property

and we already have a little bit of

issue where notice only the stud muffin

is displayed since only Bob as this

particular property and again this is

something that we're gonna fix in the

following video and when we'll

definitely get a bug is when we'll try

to get the image now I'll purposely

access it above since it's just going to

save me essentially setting up the whole

thing in the jsx so if I have a bunch of

nested properties essentially that is my

preference where I do it above the jsx

keep in mind that of course you can do

it in the GSX as well as far as the

alternative I'm going to go here with

the name and I'm sorry I forgot to

actually mention a

tiny suggestion you probably want to go

with a small width my bad so let's go

here so if you have massive images just

add in-line Styles like I'm doing right

now so we're looking for 50 pixels and

now let me grab that image so let's go

over here const I'm going to call this

IMG and whatever we want to do well we

want to go with images correct that's

the area over here and

I'm looking for the first item

and there I'll have the small so that's

the object itself and then in there I

have the URL so one by one let's

navigate there again we're looking for

the first item

then I want to grab the small object in

there

I'll have the URL property and that is

going to be equal to my image and let's

try to access it over here

and like I said we'll have big fat error

so in the following videos

we'll work on these errors and we'll see

how we can leverage straight up

JavaScript

to fix it and have something displayed

on screen and before we cover the

solution let me just quickly mention

that in the readme you'll find info on

default values

and also the optional training so

both features will implement

in this video and if you want to find

out more info if you're not familiar

with them you can always utilize the

readme so back in the person

let's start with the nickname that's

going to be a little bit easier so let

me just comment out the image just so we

don't have that massive error and notice

over here we still have it because of

course I am also accessing the image

over here so I'll have to do it in two

places let's comment this one out and

for now let me just remove those

messages

and as far as the nickname what is the

issue well again

not all of them have that property

what's the solution well one of the

solutions is obviously to use the poor

Operator just like we covered in

conditional rendering correct

so I can go here and say shake and bake

and what do you know now all of them

have at least some kind of value

okay that's good but we can also utilize

the fact that when it comes to functions

in JavaScript we can provide right away

a default value

so if you're setting up a function and

you're passing in the parameter you can

also provide a default value just in

case it's not provided shown here I know

that I'm going to be looking for a

nickname however if it doesn't exist

what can we do well you can set it equal

to shake and bake

and what do you know now the result is

going to be exactly the same again this

is just straight up JavaScript something

that you can utilize as you're setting

up your react components now the second

one is

sort of the same the problem again we're

having in here if we comment out we have

that annoying

error which essentially says hey you

cannot access

the properties from nothing

why well because if we go back again

only the third item has the images

so if I'm trying to do this for Bob

Pierre and all that it's not going to

work

so what word can do well we can do it

the long way so bear with me I'll show

you basically what we were doing before

the

optional training and then I'll show you

effectively why optional chaining is so

cool

and the way it worked before

we simply needed to

repeat bunch of and operators

so in here I'm going to go with image

and I don't think I'm going to leave

this one for your reference I don't

think there's any need so first I go

with images and I'll say listen

if the images exist then look for the

first one

so essentially I'm using the N1 now if

there is a first one then I'll look for

small so essentially one by one you just

keep repeating them so what I'm saying

here is if images exist get me the first

one now if the first one exists then get

me the small property so in here I just

want to take this copy and paste and yep

I want to say hey

if it's there then grab me the small one

and you can probably already guess that

yes in order to get the URL what do we

need to do we need to copy and paste and

then we need to just chain essentially

here this URL like so so we grab it here

and notice how we nicely don't have the

error so essentially if I refresh I'll

see no errors in console and also

the one that has the image

is going to have that in the jsx as well

so once we save notice I have

person displayed now rest of them don't

have it

so that's something that we need to work

on but at least the one that has the

image well I'm nicely rendering that in

the jsx

and essentially let's first worry about

how we can shorten this code and then

we'll worry about how we can display at

least something in the browser so first

yes this is awesome

but I mean it would be nicer if we could

just get it done in less lines of code

essentially less characters and the way

we can do that is by using optional

chaining in JavaScript so here we go

with const and then again IMG and if

you're wondering this code is going to

be again located in the readme so you

can always reference it so we want to go

here with images and then we just go

with question mark

and if

the property

exists basically if it's not null then

everything is good if not then we'll

right away just get undefined this is

also awesome where we don't have that

annoying hey you cannot get properties

out of null so essentially what I'm

saying here if images exist awesome get

me the first one if that exists then get

me small if that exists then actually

get me the URL now

this is great but it doesn't solve the

issue

where at the moment notice only one of

them has the image and it's probably a

nicer setup if you have at least some

kind of default image correct and not to

do that

you actually need to look at the assets

and you'll see that I provided some SVG

and yes basically this is something that

you'll need to set up manually yourself

whether that is in the cloud Mary

whether that is locally

you'll need somewhere a default image so

in my case that's the default Avatar in

the asset so now let's navigate back to

the person and we want to import that

now please keep in mind that we're

sitting in a source so we need to import

we need to name the variable and then we

need to provide the path so in this case

I'm going to go with this one I'll call

this Avatar and then from and now let's

go one level up then two levels up three

levels up we're looking in the assets

and we want to go default and then

Avatar and then SVG

and now we can utilize the or operator

where I can say Hey listen check four

Images check for the first one check for

small and URL and if it's there awesome

return this one if not well just set it

equal to my default Avatar and what do

you know now we have a list and if the

item doesn't have the image at least we

display something now quite often as

you're looking at the optional chaining

code you'll see this approach as well

where essentially let me comment this

one out

and you'll see this one and effectively

this operator let me go back to read me

I left it here for your reference so

it's this one that's the operator you're

looking for now I'm not gonna go into

great detail what's the difference there

extremely similar uh if you're

interested then please utilize the

search engine again

instead of the or you'll see these two

question marks and that's this operator

and if you want to find out more info

just please go to your favorite search

engine and pretty much we're done with

the challenge as you can see we can

utilize straight up JavaScript

to essentially fix the potential bugs

that we might encounter once we start

working with apis and I know that some

of you think this is totally weird

example there's no way there would be

such structure and then there's no way

that properties would be missing I mean

he's totally making this up and again I

don't want to be a bearer of bad news

and I'm not saying that every API is

going to have the issues but once you

start working with external apis just be

prepared that structure

might not be what you

expect it's going to be pretty nested I

can tell you that right from the get-go

and also here and there properties are

going to be missing so if you ever seen

a console JavaScript complaining that it

cannot access certain property right

away think ding ding ding ding ding

there's a property missing so even

though I'm expecting something

back from the API and I'm trying to

render it here

well it's not coming through and as far

as suggestions my always suggestion is

to limit the amount of items you're

rendering so if I hit this bug yes one

by one effectively I comment out the

stuff and then I go back and check which

value is missing so normally I would log

the person back here in the list and

then I would go over where potentially

that property might be missing just to

Showcase that if we go here with log in

person we'll right away see that only

some of them have those values now of

course this is somewhat simple example

where I right away can see that but

normally this is the place where at

least I can start working on the problem

because this is going to give me at

least the idea of what data I'm getting

back awesome and next let's talk about

forms in react and we're going to start

working in this folder so we're going to

go to zero six forms and we'll start

with the first file however

since I want the examples to look

somewhat nice

we'll spend the first video just by

setting up the form with some

classes and labels and all that now if

you're not interested in doing that just

navigate to the readme look for

controlled inputs and basically copy and

paste this content so this component

copy and paste and set it up in the

controlled input essentially that's

going to be the first step now don't

worry we're not going to do that pretty

much for every file

I believe we have all here five of them

so essentially in the next videos we'll

just reuse this nice looking form

so first I want to navigate to app jsx

like I said we're looking for zero six

forms then starter and then controlled

inputs so that's what I have on the

screen now let's navigate over here

and effectively we just want to set up a

form and if you're wondering where the

classes are coming from that I'm about

to use well they're located over here

so if you look here in this file let's

say if we search for class of form

you'll see these Styles and then same

goes for label input and all that so if

you're interested of course

you can navigate over there and see what

styles I'm setting up

so let's go over here in the controlled

inputs we'll remove the heading 2. and

effectively we're going to return a

formal ad right away a class form as

well

inside of it let's place a hitting four

and let's say controlled input so that's

going to be our first topic after that I

want to set up a div with a classiform

row and you can think of it as a divider

so it's just going to add some nice

margin so let's go here with div let's

add a class of form

row and then inside of it first let's

set up a label again it's just a HTML

thing and notice over here it's going to

give this html4 so that's the HTML

attribute by the name of four and you

add that to the label and then once you

click on the label then it nicely sets

the input in the focus and you'll see

once we set it up how it works so in

here we want to provide the ID so

whatever ID we're about to set up on the

input so I know that my one is going to

be named so of course I'm going to set

this one up as name then we want to type

the text inside of the label and you

know what there's one thing missing and

that is the class

and for that we want to go with form and

label then we want to go with that input

and we'll start with the most basic one

the text input so let's go here let's

look for text name for now let's leave

it blank because I want to show you

what is going to be the use case so for

now let's not worry about it but yes

eventually we will use it and then here

we want to go with name so again these

two need to match and in react it's

html4 in normal HTML it's going to be

just A4 attribute and we do want to add

here a class so we'll go with class name

and that is going to be perform input

let's save it and this is what we should

see on the screen and again if these two

match then basically what happens notice

once you click on a label

it nicely sets the

Focus for the input and

since I also want to set up one for

password or email sorry password is

coming up for now let's just go with

email and we want to change those values

so everywhere where I have the name I'll

set it up as email and as far as type

yes it's also going to be an email so

let me select over here

let me go to email let's say that okay

we have the second input and lastly

let's just add that submit Button as

well so for that we want to go button

then we want to go with type and submit

and in here let's go with class name ptn

again Global button class and then we

want to go with BTN block which just

stretches

that button

to the size of the container in this

case form and as far as the text I'm

going to go with sub emit let's save

that and we're pretty much good to go so

this is going to be our setup for the

remaining videos in this section

and of course in the next video also set

up the functionality for now we just

have a good looking form okay and now

let's start working on controlled inputs

and essentially when you hear controlled

inputs just think that there's going to

be a state value now it can be one value

which represents all of the inputs

something we're going to cover a little

bit later or it can be a case where each

input is going to have

a state value that is associated with

that input and as you're changing the

value in the input

you're automatically also changing the

value in the state

and then in turn the input shows the

state value and if this is somewhat

confusing just think of it this way

basically whatever we're going to be

typing this is going to be added to the

state value and then whenever you're

ready to submit the form you can just

grab that state value and do whatever

you need to do whether that is to post

some data on a server or to set up some

kind of functionality and hopefully you

see where I'm going with this so if this

sounds a little bit confusing again just

bear with me basically like I said we

want to start by setting up State values

and in this case we'll do a state value

for each input later yes we'll combine

all of them in one so for that we just

need to go with your state and

since I have name and email it kind of

makes sense if I name my state values

the same correct so I'm going to go here

with name and then set

name and that is going to be equal to

use and state that's what we want to set

it up over here and we'll start with an

empty string because this is what we

have in the input and then we want to

change it around where this is not going

to be name

it will be email and then we're looking

for set an email

so this is our initial setup and then we

want to set up a function that is

actually going to be invoked every time

the user is going to type something in

the input and remember in the react

fundamentals we covered that the event

that we want to add to the input is on

change so as the user is going to be

typing something in the input we will

invoke the Callback function which of

course we need to set up first so let's

go here and let's say const and then

handle

and I'll change that's going to be my

function and remember that we right away

have access to the event object there

and for now let's just leave it blank

and then when it comes to input if we

want to set up controlled input on each

input we need to add two things

we need to add a value

and this needs to be basically equal

to that state value so I'm going to go

here with name and second one is that on

change and yes both of them need to be

there

otherwise it's not going to work so in

here I'm going to go on change and then

I want to pass in the Callback function

correct so I'll go with handle change

and save it now the last thing

that we want to do is to set up the

functionality and if you remember in

react fundamentals I said that we have

access to the event object and from

there we can get tons of cool things the

two most important ones I guess the ones

that we're going to use the most in the

course are

event.target.name and event.target.value

now for now we don't have the name and

I'll showcase that basically we'll get

an empty string but we'll definitely get

the value

so let's go over here

let's say log

and we want to go with event dot Target

dot name copy and paste and we also want

to set up the value and for this I'll

actually move to the bigger browser

window because I do definitely want to

showcase the state so this is going to

be the form on a bigger browser window

and if we inspect

the components right away see the

controlled inputs okay awesome notice

our two State values so they do exist

and then as I'm going to be typing I'm

going to get two things first one is

going to be empty because there is no

name set on the input our second one is

going to represent whatever the user has

typed now notice something interesting

though we're not persisting this value

input so this will always stay empty

string why well take a look

because our state value is an empty

string

so when we're setting up controlled

inputs that's why we need

all of those things we need a state

value we need both of those

attributes on the input we need the

value as well as the on change and in

the Callback function this is where

we'll update the state value

how we can do that well we can use set

name correct and again keep in mind this

is going to be empty if there is no name

attribute and later we'll set up the

name attribute and we'll use it but I

definitely want to showcase that if

there is no name attribute then I mean

it's just going to be empty so I'll

leave these ones for your reference

and here's what I want to do I'm going

to go with set name and then I want to

grab whatever I have in the value so

let's involve that and let's say event

dot Target dot value and now the

interesting thing is going to happen

so we have the state value we have the

on change and as the user is typing

we'll be setting the state value equal

to whatever is in the input and then in

turn we use that value here to display

it in the form so check it out here and

I think again I'm going to use the

bigger browser window just so you can

see that we're definitely updating that

state value now check it out essentially

whatever I have in the form gets here

has a state value and that's why

I can see that in the form as well so

hopefully this makes sense okay so that

should do it for the first controlled

input but what about the second one what

about the email

because as you can see at this point

we're just updating the name so if I'll

add this handle change to the email I

mean it's not going to work

even though I can add the email as a

value

to the input I mean in here I have set

name not set email

so what are our options well we can set

up another function so let's say we can

rename this so it's not generic I can

say handle name change and then for the

email of course I'm going to go handle

email change or we can use the error

function and effectively

this is totally up to you if you have

more logic then of course it makes sense

that you set it up here as a separate

function however if you're just passing

event.target.value then we also have

this option where instead of the handle

change which by the way you can always

find it in the readme and therefore just

so it's cleaner I'm going to remove

what we can do here is set up our Arrow

function remember we do need to grab the

event so that doesn't change and then

invoke set name directly here so I can

go here with email dot Target dot value

and you guessed it correct

for all the inputs we basically need to

repeat these two steps we need to set up

the value I mean considering that you

already have the state value

we need to set up the value and we need

to set up the on change and then in the

on change we just go with set and then

whatever is the name of the input so

let's go here

let's keep on moving this is going to be

my input I want to copy and paste again

these are different values so it's not

going to be named it's going to be email

and the function is also going to be

email let's save that and again let's

navigate to the big browser window and

if I'll type over here

let's say some kind of dummy email

doesn't look like it works here

maybe just needs a little nudge let me

try right now John

and as you can see now everything works

so now both of them are controlled

inputs and essentially our workflow is

going to be we'll set up value and on

change and then we'll set up the on

submit as well so let's navigate

where we have the state values

and let's just add a on submit on the

form

and let's

create a handle submit

so I just need to create that function

handle

submit and

hopefully you remember from the

fundamentals that again we have access

to the event object and in here the

first thing we want to do is prevent the

default Behavior so we invoke prevent

default and then we can do something

again at the moment we're not going to

do anything in this video but

technically this is where you post to

the server where you do something with

the value so say do something and

essentially we just want to access both

of the values so in my case I'm just

going to log it so I'm going to say

name

and email and once I save

notice how I can nicely type so John and

then John at gmail

and once I click on submit and check the

console notice I have both of the values

I have the John as well as the email so

essentially that's how we can set up

controlled inputs in react beautiful and

once we're familiar with controlled

inputs why don't we work on a small

challenge and first what I want you to

do if you haven't done that already go

to app jsx and look for zero two user

Challenge and this is what you should

see on a screen

basically I prepare the form now I

didn't set up any functionality again

it's just a straight up form you'll have

to do all of the work and as you can see

in this case we're just using one input

that's it that's pretty much the only

difference and as far as the challenge

well it's following so first

create a control input

and in my case I'm going to call this

name and you'll see why it actually

makes sense then set up on submit

basically for now just a placeholder

don't worry about the logic yet

if you can log

that user has submitted the form

basically if you have prevented the

default and all that you're in good

shape so first set up those two things

then I want you to import data array

from data

and just to drag our memory so we're

here so this is what we want to get

we want to get this data array and

that's why we'll go with name input

because this is the property we have in

the object and once you have

successfully imported the data set up

another state value in my case I'm going

to call this users and set the array as

a default value and I'm purposely being

somewhat vague because we have covered

all of these things already then I want

you to iterate over

the list and display right after the

form so if we navigate to the user

challenge notice this comment over here

so this is where I want you to display

the users that are in the array again

don't worry about the CSS if you can see

the name

correctly displayed in a browser you're

in good shape

and at the very end we want to set up

following functionality when the user

submits the form

add a new person to the list now

if you find this one easy you can work

on extra challenge where I want you to

add a button

to whatever we're returning basically

the item and set up the functionality to

remove the user from the list

so if you're interested work on this

Challenge and once you're ready to

compare the results resume with the

videos Okay so let's get cracking first

I'm going to navigate to the user

challenge

and I'll create those State values

basically I know that I'll have two of

them so

while I'm setting up one I might as well

set up the second one so name and then

set name that is equal to use

State let's pass in the empty Value

First copy and paste then like I said

Marcus I'm gonna go with users

set and also when I do it over here now

for now since I haven't imported

anything let me just set it up as an

empty all right let's save this and now

I want to set up that controlled input

so

I need to look for my input and then

here remember value

that is equal to the state value and

then the second one is the on change and

this is going to be equal to our Arrow

function we'll grab the event object and

we'll go to set name and we'll pass in

the event dot Target and then the value

so now we have our controlled input next

I wanna set up just the log

when we submit the form so here notice

Veet is pretty quick basically the

moment you type the value it spins back

the center don't worry you don't have it

everything is correct and like I was

saying we want to set up that handle

Summit so let's go here and I'm going to

call this handle submit

we're gonna get the object yes the event

object more precisely and here let's

start with prevent

default and I'm going to go with just

log

I'll say

form

submitted okay good and now let's

navigate to the form

and then let's set up on submit

beautiful and let's pass in the handle

submit let's save that and if everything

is correct we should see form submitted

awesome

and once we have this setup in place now

let's grab that data so let me try here

whether I can actually do it data and

nope that doesn't give me anything okay

let's grab it from the file so import

data and then from and now we need to go

quite a few levels up so one two and

then this should be coming from the data

let me just double check quickly so data

data yep that's the correct one probably

not the best naming but as I was setting

up

that's the one that I used so this is

going to be our default value for the

users and now let's navigate over here

where we render and then like I said

right after form we're gonna go users

and now let's iterate over those users

and simply return a div since we

potentially might set up a button again

that is totally up to you but in my case

I'll try to do that at least and then

users map so we're iterating over and

then this should be already very

familiar we have done that quite a few

times during the course and that's why I

keep pushing for you to set it up on

your own

because we have covered that you just

need to practice that's it there's no

real secret and as far as the return I'm

gonna go here with div

and then let's set up the key this is

where we're iterating over so I'm gonna

go to user ID because I know

that in my array in the object more

precisely and then as far as the value

well like I said let's not over

complicate things we're just going to go

to user and then name let's save and

this is what we should see on the screen

so here's our task and you know what let

me make this one as heading to so it

stands out now every time

the user submits the form

essentially we want to add a new user to

our array

so this basically is the main challenge

and effectively we can do it this way so

first I have the handle submit correct

now I need to grab the value of the name

but here's the thing user might try to

submit the form basically without

entering anything

and this is normally where we would

display the alert or some kind of toast

or whatever that all the values need to

be submitted but in this case we'll

simply return from this function

so the most basic check is following I

can say if

and if there is no name if you want of

course you can log stuff that's totally

up to you but in my case I'm just going

to go with the return and you'll notice

that if the user tries to submit the

form with empty values I'll have nothing

in a console so again this stresses the

point that we're not going to get to

this line JavaScript is going to keep on

reading and this is the earlier turn

jumpsuit is going to be okay

this actually matches there's no value

in here so I'm just going to return from

this function that's the most basic

check again for the empty value and yes

before you ask if you have multiple

values let's say name email password and

all that then basically you go with or

and then again you check so we go this

not operator and we say

if it meets the condition then we're not

essentially doing anything we're just

returning from the function so that's

the first step now the second one if

there's actually some value so let's say

if the user types something and I click

notice form submitted now I want to

construct that user

and this is the case where yes basically

I'll have to create a new object on the

Fly and I'll have to add it to my

existing array

so let's start over here let's say that

there is some kind of value

first thing we need to do is set up that

ID now of course you can hard code

somehow but one neat trick while you're

basically working on some simple

application like this one you can just

use some helpers and in this case I'm

going to use date dot now again this is

not for serious projects in that case of

course it's going to be more complex but

also keep in mind one thing that

normally you're communicating with

database anyway and database is

responsible for setting up those IDs so

this is just for practice where since I

know that

my user has both ID and name I just

manually need to create that ID

because name of course is going to be

provided by this input hopefully that

makes sense so let's go here with cons

and then fake ID and like I said I'm

just going to use date dot now but

please don't use that in any serious

project and if you want you can log

essentially those are going to be

milliseconds

from I believe 1970 or something along

those lines so if we go over here

and if we type check it out notice this

is going to be my value again

just something Nifty that we can use

while we're working on this project so

let me just comment this one out for

your reference if you want and then now

let's construct that user so we're going

to go here with const new user and that

is equal to an object so I have two

properties first one is going to be at e

which is going to be equal to fake ID

and then the second one is the name Now

where's the name coming from well it's

coming from the state correct over here

and we only get to this functionality if

there's some value in the input if not

then we won't even get to it and now

let's construct that new array the one

that we will set up using set users so

in here let's go with cons and then I'll

call this updated users and then that

one is equal to first I want to spread

out all of these values because I'll be

adding to this array again I don't want

to override that keep in mind we can

pass here whatever we want so if you'll

just simply Place new user in the set

users you'll set your array now equal to

an object that's not what we want to do

we want to spread out so we want to copy

all of the current values from the users

and then we want to add the new one so

say here new user and we'll use this

updated users and set it as our new

value so go to set users and we'll pass

in an updated users and lastly

it kind of makes sense if we clean out

the input right

otherwise it's just going to stay there

and the way we do that is simply by

typing set name again same function

whatever we have over there and we just

provide the empty value now I don't

think we need any more of this one we

can remove and now check it out

essentially

as I'm going to be submitting something

this is going to be my new user and then

if user tries to submit with empty

values nothing happens however if we do

provide the value and if I say Bob

then check it out if I take a look at my

browser I have Bob over here and input

is also nicely set to an empty string

and Just for kicks as far as the extra

challenge now let's also set up those

buttons and let's remove the user if the

button is clicked so first we want to

navigate where we have the return that's

why I set up the div and we're going to

go with button and I'll just type remove

in here we're gonna go with on click and

eventually we'll set up some Logic for

now simply go and empty Arrow function

just so we don't have the error and I'm

also going to add the class name and I'm

going to say BTN so that's going to be

my generic button class

and now let's move up and set up that

functionality where essentially I'm

going to call this remove user it's

going to be looking for one thing and

one thing only it's going to be looking

for the Eddie and as far as the logic I

want to use filter again

and essentially return only the items

whose ID does not match whatever I'm

passing in so again I'm going to call

this updated users in this case I'm

going to speed this up a little bit by

just copying pasting so this is going to

be the same however I'm not gonna spread

out values this way I know that filter

returns a new one so I can simply say

users

and then filter

and as far as the Callback function I'll

call this person and I'll say if the

person ID

person ID

doesn't match then return

if it doesn't match the ID that we're

passing in however if the ID matches

then that person is not going to be

returned and of course again we set

users equal to this new value and now we

just navigate down here where we have

the arrow function and essentially we

want to go with the remove user and

we'll grab the user ID so user dot ID

let's save this and now one by one I can

remove them that concludes the entire

challenge hopefully everyone enjoyed it

and I'll see you in the next video okay

and up next let's talk about how we can

set up one state value for multiple

inputs and before we begin let me just

stress something it's not something that

you have to do if you have multiple

inputs so it's not a requirement however

you'll see this quite often and

therefore I think it's important that

you know how to set it up and basically

the logic behind it also

during this video will heavily rely on

Dynamic object keys and if you need to

jog your memory on that please utilize

this JS nuggets video so first we want

to navigate to app jsx you want to make

sure that we're sitting in the zero

three multiple inputs and then let's

navigate to the file

so in here

we want to set up one state value

which is going to represent all of the

inputs so at the moment notice instead

of just name and email I also have the

password so instead of setting up three

state values I'll set up one how we can

do that well we can create that State

value as an object correct so let's go

to use

State this is going to be my object and

I just need to come up with the

properties now before we do that why

don't we also

come up with a name so in my case that

is going to be user and set user so that

is going to be my set function

so as you can see nothing changes

that part still stays the same

difference right now is that we'll have

an object and basically each input

we can set it up as a property in here

so we'll have name I'll also have the

email

and also have the password and as far as

my default values they will be empty

string if you want to go with some

different

value of course that is totally up to

you so now I have the user and now let's

think about it

in order to set up the input

we will have to have a function correct

so why don't we create that and the

beauty here is that we can use only one

function since we have only one

State value as an object we can also set

up only one function so I can say handle

change and hopefully you see that it

kind of saves us a little bit of time if

we have multiple inputs so again we only

have one state value and we'll only have

one function so that's basically the

benefit of such approach and now once I

have the function

let's not worry about any logic in here

I will navigate to all of the inputs and

here's what we want to do

we want to set up the value however in

this case

it's not equal to the state value it is

equal to a state value which is a user

and then that and then the property and

in this case of course it is name and as

far as the function well we go here with

on change and we set it equal to our

handle change

and effectively we want to repeat that

for all of the inputs again we have name

email as well as the password so let's

change it here to email

and

let me grab this one more time

and copy and paste

so of course now the state value is

going to be a password all right awesome

now let's decide how we can access the

actual value

because if I'm going to go over here

if I'm going to say e and

first let's just log e dot Target and

value you'll see that everything is

correct but we don't know which

input we're referencing here as far as

the target again let me remove this one

and then notice yeah everything is

awesome

I mean I can see whatever letters I'm

typing and of course the reason why we

don't see anything in the form is

because we're not updating anything so

the state values stay empty however

the big problem here is that I don't

know which input am I typing here

so yeah I have S but what is it name

email password and therefore we need to

use the name attribute remember the very

very

beginning of this section I covered it

we can also access the event Dot

target.9 and of course

that needs to be here in the input as

well and therefore I'm going to go here

with name and I'll set it equal to name

why I work because that's my state value

basically so this is always the funny

one when you show in the example because

it's like name equals to name yeah

that's effectively my property now it's

probably going to make more sense here

with an email because now name will be

equal to email and you guessed it

correctly we need to do the same thing

for the password so this is a must if

you have such setup where you have one

state value and it's an object yes you

will need to use this type of approach

you'll definitely need the name as you

saw before when we had two inputs and we

used Straight Up functions these State

functions you don't have to do that

I mean you can always add the name but

it's not a requirement in this case

since we have one function yeah this is

what we need to do so let's go here with

log and let's say event.target

and yes this will reference

basically whatever

input the user is typing in so this is

name and then this is the value the same

is going to be for email and you guessed

it for the password again we see nothing

yet in a browser because we're not

updating

but this is already an awesome start

so we have the name and we have the

value so here's what we want to do

we want to take this name and we're

going to update that specific property

here

in the object with what with this value

how we can do that well

this is the interesting part we need to

use the following logic first of all we

go with set user so that's our set

function then remember we have multiple

values so I cannot simply go with name

and then whatever

this is going to effectively remove

these two

if I use such approach so that's not

going to work what we can do

solution is dot dot and then user so

essentially I want to spread out again

all of the existing values first

because I'll be overriding

only one at a time right I'll be typing

in one input at a time and after that we

want to dynamically update the proper in

the state and set it equal to Value so

first let me set up the code and then

I'll try to

explain as best as I can because again

this is something that pops up quite

often in the course q a where I'm gonna

go with these square brackets I'll pass

in

event.target.name and please keep in

mind that this value

will be either name email or password in

this case

so of course if you have 15 of them

then it's going to be one of those 15.

so this will reference whatever we have

here in the name and what happens it

will access dynamically this property in

the object that's why it's so important

that they are the same

that essentially you have the properties

in the object and they match exactly

what you have over here because

otherwise if this value for example is

names

and you'll try to set it in the object

it's not going to work so make sure that

they match exactly whatever you have in

the object so we are accessing

dynamically this property and we'll set

it equal to what we have here the value

right so we'll go with

event.target and then dot value let me

save and like I promised I will come

back to this one don't worry and now

let's go over here and notice we nicely

type and I still have those logs I don't

think I need them let me navigate to the

big browser

and let's see we should see the state

value as well

looks like I need to refresh here as far

as Veet let me try multiple inputs

notice so now my state is an object and

as I'm typing I'm actually providing

values over here

for the name for the email hand password

and like I said yeah this triggers a

bunch of questions in course q a

so as far as my explanation well let's

think about it if I'm gonna go over here

and if I'm gonna just hard code one of

the properties if I'll say

name like so in any input I'm going to

type

I'll be just updating the name so let's

try this one out notice

I can save all here and basically notice

how it essentially just typing a value

over here even though we're typing in

this input and the reason why we see

nothing in these ones well because these

ones are still empty correct so even

though I'm typing in the correct input

as far as the value it's showing up here

in the name because I'm hard coding here

and the same is going to work for

password the email and all that that's

why we need to set this one dynamic

so this will be dynamic depending on

what depending what we have here

so if it's time then this will

dynamically access the property in the

object that is name

if it's email then it's email hopefully

you see where I'm going with this and

that's why we go here with event Target

and name of course if you have already

some experience with Dynamic object Keys

then this should look very familiar

again the reason for that is because we

have multiple properties we have

multiple inputs but we have one function

and therefore every time the user types

something in one of the inputs I want to

check two things not only I want to get

the value but I also want to get the

property and I want to access that

property and I'm going to set it equal

to whatever value I have in the input

and as far as the handle submit let's

set it up here let's say on submit in

this case

let's come up with the function name and

I'll submit and you know what I think

I'm just going to copy and paste I think

it's going to be faster so handle not

change we're looking for submit we do

want to get the object we do want to

prevent the default

and instead of setting the user I simply

want to log it

and again the only gotcha right now is

that it's a state value so once I type

here and of course since this is an

email

field we will have to add the add one

and let's go with mail.com

and check it out the moment I press

submit

now I have the object in the console so

essentially rest of the logic is the

same whatever you want to do after that

so yes of course you'll check for empty

values then you'll set up some kind of

functionality and a common approach is

then to clear the values so this doesn't

change the only difference that right

now we have an object and while we're

still in a row let's also cover

a few other input options more

specifically I'll show you the gotcha

when it comes to check boxes and we'll

also take a look how we can display the

select input basically when we have a

list of options so in the app jsx grab

the starter from zero for other inputs

and this is what you should see on the

screen essentially a forum with few

labels and a submit button

so first let's go to the file we're

looking for other inputs in Star and

this is going to be our entry point

um let's start by setting up two State

values and let's start with shipping

which essentially is going to be our

Boolean value so here let's go with

const and then shipping and set

shipping

and we'll set it equal to use State and

by default it's going to be false and

then we want to navigate to our form and

we're looking

for this one the first form row where we

have the free shipping in the label and

in here let's set up the input first

it's not going to be equal to type text

we actually want to go with checkbox

and since Emmett right away spits out

this name one we might as well provide

that so we're not going to use it

in this example but normally if you

would you type whatever is the state

value over here and then when it comes

to Eddie same deal we're going to go

with shipping let me save and now notice

where I have our own little checkbox

over here after that let's set up the on

change and also let's create the

function now unlike the input the

typical text or email or password we

actually want to go with checked and we

want to set it equal to that state value

so unlike the value equals to the state

value now we go checked

so let's go here first checked and that

is equal to my state value which again

is a Boolean and then when it comes to

function first we need to create one so

let me go over here and in my case I'm

going to call this handle

shipping

so that's my function I'll be looking

for the event

object and as far as the logic

first let's just log

event.target.checked so that's the one

that we're going to use not event.target

that value

because notice we don't have the value

in here we have the checked so let's go

here let's say event dot Target and

checked and I'll right away use the

value that's coming back and I'll set it

equal to my shipping in the state so in

here I'll say set shipping and set it

equal to that value

and essentially it's going to be either

true or false depending whether you have

clicked on it or not

and the very last thing we want to do

over here is to set up on change and set

it equal

to the handle shipping let's save this

again we'll have this warning in the

console but basically you'll notice that

every time we click on the checkbox

we'll get back the value and we're

setting that in a state

and I guess the major gotcha about the

checkbox is that we want to use the

checked instead of the value and when it

comes to select input essentially it's a

list of options so normally you'll have

some kind of list again typically it's

going to be dynamic so it's going to be

coming from the API and you want to

render them inside of the select input

and you'll set them up as option element

and then you're going to State there's

going to be that one value that

represents whatever the user has

selected

so first we need to create a state value

and here just be careful because I named

the state value framework

and the latest Frameworks

and

you don't want to mix them basically

when we want to display the options we

want to iterate over Frameworks but when

we want to provide the value we want to

look for framework

and

I'll remind you that once we get there

so frame work and that is going to be

equal to set framework

so let me copy and paste and I just want

to change it to a uppercase and as far

as the default value this is totally up

to you I'm gonna go with react since

that's the first item here in this list

but of course you can set any of these

values

let's also create the function because

we'll need that

so for now

copy and paste so it needs to be the sub

we won't

actually use the checked one so of

course I can remove we won't set up the

logic for now we'll simply go with

handle and then let's call this frame

work let's save that and after that we

want to set up the select input where we

have the label for the framework so

let's go here with select again Emmett

is going to spit right away name and ID

so we might as well provide those values

so in here let's just write framework

so again this is very important we are

now referencing the state value not the

list

we'll work with the list in a second so

set it equal to framework

and as far as the options this is where

we want to iterate over the list so

first let's display them and then we'll

add the value as well as the on change

so let's start over here we effectively

want to iterate over the Frameworks so

we set up here the curlies we go with

Frameworks then dot map so we're mapping

over and then as far as the value

I'm going to reference this as a

framework

framework and as far as the return we

want to go with keyword and then we're

looking for the option

then since we have a list yes we still

need to provide a key

and in this case we don't have the Eddie

however those names are unique so I'm

going to go with framework so

essentially I'm referencing the

parameter and then inside the option

This is Where I Wanna showcase

one of those options let me save and

notice that everything is correct

however nothing is going to happen

so essentially yes we're changing this

but if we navigate to the big screen

you'll see that I'm not changing that

state value

because we haven't set up the logic yet

so technically this is view but of

course in the state I still have the

react and it's very similar to typical

input

so we don't need to go here we checked

that was only for the checkbox again we

go with value we go with frame work

very very important not Frameworks but

framework

and as far as the on change well we want

to provide

our handle framework correct let's

provide this function

and as far as the functionality we

simply want to go with set framework and

it's going to be located again in event

dot Target value so if you're wondering

can we pass directly the arrow function

like we have been doing yes absolutely I

just thought since we have handle

shipping here we might as well set up

another one so we go with framework and

then we'll look for event.target and

then the value let's save that and now

if I navigate to the big screen we

should see that we're also successfully

changing the state value so that's how

we can work with check boxes as well as

select inputs in react okay and as a

very last thing in this section I want

to show you a very Nifty alternative to

controlled inputs you see we can also

submit the form with uncontrolled inputs

basically without referencing the state

value now in the following section I'll

show you an example

of how we can do that using use ref hook

but in this video I'll show you how we

can accomplish the same task with form

data API which in my opinion is a better

approach if you have more than one input

as far as form data API it's coming from

vanilla.js and effectively

it's a interface that allows us to

construct

a set of key value pairs representing

the form fields and their values and if

this sounds somewhat funky don't worry

as we're going to be working through the

example you'll see what I mean now if

you're not familiar with form data API

or

you just want to get more info on it

please reference this JS nuggets video

where I cover warm data API in Greater

detail effectively form data API has

quite a few methods on it

and since I don't want this video to be

half an hour long I'll just show you the

most common ones so first let's just go

to app GSX notice over here I have the

starter

I'm looking for zero five form data and

once you navigate you'll see that we

have a state value so essentially it

doesn't do anything I'm just going to

use it to Showcase something we also

have right away handle submit on the

form and we prevent a default hopefully

we are clear why we need that and then

we have three inputs so we have the name

one the email as well as the password

and as you can see I messed up over here

that should be a password I already

provided the ID and I also provided the

names this is very important when you

work with form data it's a must to have

a name that

effectively represents that input so if

you do decide to work with form data

just don't forget about the name it's

very easy to do that and then your

functionality is not going to work

and as far as the setup let's start with

this

let's get on the same page that if I go

to handle submit and if I log not

event.target but if I log event dot

current Target

this will point to what

this will actually point to a form so if

I go to console and if I submit notice

this returns a form element

and as far as the difference so the

event.target

refers to the Dom element that triggers

an event however the current Target

refers to the Dom element that event

listener is listening on so in simple

English in our case

since the event

our on submit is set on a form

sure enough

event dot current Target returns are

form element now why is that useful

because in vanilla Jazz there's form

data API which is just a cool setup how

we can directly access the inputs we

have

as well as the values so in this case

I can go with const and I'll call this

form data and I'll set it equal to new

form data and one gotcha don't call the

component form data essentially you'll

have an error that's why I named this

uncontrolled inputs not form data

because essentially

react is going to think that you're

referencing the component and once we

have the new form data it's looking for

that form that's why we're going to go

with event dot current Target so we go

here with event and current Target and

let's just see what we get back so let

me move this sucker down

and I'm going to go with form data now

don't be surprised if you see Elvis in

the console so don't freak out

essentially everything is correct it

just works a little bit differently so

the first time I started working with

form data I was like well wait a minute

did I pass the correct

Target because I don't see anything

don't worry

in order to access the values

we have few approaches we can use the

get method on this form data so for

example

if I want to get the name

I'm going to go here with name I'm going

to set up some kind of variable we go

with form data and we go with get and

then whatever is the name so again

that's why it's important whatever is

this value over here so if I'm going to

go with name you can probably already

guess what we're going to be getting

back correct so let's try something else

why don't we try

let's say email I'm gonna go here email

and yes of course that input needs to be

there and if I log this

I'll actually see the value once we

submit the form so if I'll type here

John and Gmail once I submit check it

out I'll have this value over here so we

have a few options like I said I'm not

going to cover each and every method if

you want to find out more about form

data please reference that video but in

this instance what we can do one by one

we can grab the email password and name

yes that's definitely

one option however there's a little bit

better option where we can transform

this into an object directly and the way

we do that we use object Dot from

entries which again is

essentially a method that we get from

vanilla.js because what we need to keep

in mind that this form data actually is

an array of arrays and just so you don't

think that I'm making this up let me go

here where I have the log let me go with

spread operator I'm going to go dot dot

and then we're looking for form data Dot

and I'm going to go with entries just so

you can see both of them then let me

save with me refresh and I'll have to

provide the values again so in this case

I'm going to go John

John over here as well

and then lastly we want to go here with

some kind of password and once we click

like I said what we're getting back from

form data entries and as I said you can

find all these methods over here notice

it has quite a few of them that's why I

said that we're not going to cover all

of them I can spread out the entries and

I'll have this array of arrays so this

is going to be the name of the input and

then this is going to be the value

and even though this is nice

most likely you'll want the object for

example if you want to submit this data

to a server how we can do that well

first of all let me comment these ones

out as always

all this functionality is available

already in the readme and let me go here

with const and I'll call this new user

and I'll set it equal to object dot

again this is coming from vanilla.js

basically it's not provided by react

it's just JavaScript and effectively

object Dot from entries

turns an array of arranged data

structure

into a object with key value pairs

and you can find a vanilla.js code

example in readme and then here we pass

in the form data and what you'll see are

as a result we have this new user now so

once I click check it out now I have an

object with all of these values

and the kicker here is that I can send

it to a server I can do some kind of

functionality and all that cool stuff

again the main point of this video is

that we don't always have to set up

those controlled inputs if we don't want

to

for example we can use form data pass in

the form as long as we have the names

and all that we're good to go we can set

up the functionality here in the handle

submit

so please don't think that you always

always have to set up controlled inputs

it really depends on your preference and

pretty much the application you have in

some instances you'll do that in some

you'll be like nope I actually want to

go with phone data and lastly let's look

at one major gotcha so we did something

with this user data we're good to go now

we want to clear out the values

you see

if we just re-render those values that

are going to stay over here and that's

why we have over here the state value

the set value so just to Showcase that

I'm going to go to set value and I'm

going to go with Value Plus One

and essentially what you'll notice that

even though we re-render correctly

because remember we're updating the

state value

these are going to stay and as far as

the values just so we can save a little

bit of time I'm just going to type some

G brush ones

I don't think makes any sense to type

anything meaningful let's click and

notice we did update the state value

it's actually happening everything is

correct however

these ones stay in input and if you want

to clear the values you want to go with

event dot current Target and then the

method name is reset so we save this one

and now notice pretty much the moment I

will submit

basically I'll do something with the

data and as a quick sign out of course

you would check for empty values so in

that case either you would get them one

by one or in the vanilla.js video I

actually show you how to do that by

iterating over array which is just less

lines of code and then once we click on

submit notice how we nicely clear the

values and again

don't think that they always stay empty

again if we provide over here something

in the inputs notice again we'll have

the new values here as far as the new

user and we also nicely clear out the

inputs awesome and up next let's cover

use ref hook

it's a lot like use state

so it preserves the value between the

renders but the difference is that

updating userf does not trigger

re-render so remember when we work with

use state every time we

update the value

we trigger re-render

now it's not the case with user ref very

often use ref is used to access

downloads but there are some other Nifty

use cases as well of course it really

depends on the projects you're going to

be working on but at least in my

experience

since I don't use use ref to access form

inputs

use ref is not something I use in every

project but once in a while there's a

very specific use case where user f is

the right tool for the job we're going

to start just like with the other

examples where essentially we want to

look for zero seven user F star and then

zero one use ref Basics and

of course I want to import that in the

app jsx and I want to navigate to that

file and notice over here I already have

the state value I have handle submit

that just prevents the default and I

have the form

as well as the heading one

with the button and as I'm clicking I'm

increasing the value here and you'll see

why we have this kind of setup in a

second so essentially if we want to

start working with us ref just like the

other hooks we want to import that from

react and we want to come up with the

name so in this case we're not looking

for an array of values we're just

looking for one value so I'm going to go

here const and then we just come up with

a name so in my case I'm going to call

this container as a quick sound I

actually like to think of use ref value

as a container

then that's just my mental model and we

want to go here with use ref

so that's the hook and then we want to

pass in that default value

so in my case I'm going to start with

null but keep in mind you can pass here

whatever you want and then if we log

you'll notice something interesting

if I log the container

and if I take a look at the devtools

you'll see that it is an object and it

has the current property and the current

property is equal to that null so

current property is always going to be

equal to

whatever you sit here as a default value

and yes react behind the scenes is going

to set this one up as an object so

notice we did not do anything basically

we just set up the user ref and this is

what the react return now once we have

this one in place essentially

we have two ways how we can set this

value because of course you don't want

to always keep it as no

one way we can set it ourselves

basically using some kind of

functionality which is going to be

actually our second example or you can

use this container and set it equal to

any of the Dom nodes now in our example

yes we will use the input because it's

somewhat common but keep in mind you

don't have to

I mean you can set it equal to any Dom

nodes and if I remember correctly in the

project we're actually going to use the

navbar just so we have multiple examples

but yes this is pretty typical to set it

equal to an input if you remember when

we talked about controlled inputs and

form data API in the previous section I

mentioned that there's another way how

we can use uncontrolled inputs and

essentially that is using use ref hook

so once I'm done with my long speech and

all that here's what we want to do

we want to find the element again in my

case that is going to be the input and

we're going to go with the ref so that's

the attribute we want to use and we want

to set it equal to what well we want to

set it equal to ref container so

whatever you created with the user of

now we don't see anything because of

course this is essentially the initial

render correct so in order to see our

actual value we need to set up the user

effect

so in here I'm going to go with user

effect and then we'll pass in the

function now I don't care about the

dependency array I just want to showcase

that essentially once our initial render

takes place

we run this user fact and in there we'll

see a different picture so here we're

going to see error of container that

actually has this input again something

important to keep in mind that yes we

have two ways that we can set up the

user of

we can either set it equal to any of the

Dom nodes and the reason why we see that

right now because this runs after

initial render correct this one is

happening during the initial render

that's the difference and we can also

for example set it

ourself again that is going to be our

second example and once current is equal

to our Dom node

what can we do well pretty much anything

once we get the Dom node I mean sky is

the limit

for example

I can grab the value and this one of

course I'll do it in handle submit so

again this was just the Showcase that

after the initial render

now in the rough container we'll have

access to that input but we'll actually

use it over here in the handle submit so

in here effectively we want to grab the

value by using value property again this

is just coming from vanilla.js so if I'm

going to go here in the handle submit

and if I'm going to take a look at the

value it will actually give me whatever

is typed in the input so if I'm going to

go here with cons name and ref container

then current again I'm accessing the

property and since the property is the

input

basically I can run with value again

this is coming from an ljs you access

the Dom node and if it's an input you

can actually run dot value and

effectively this is just going to get us

whatever the user has typed in and then

again we can do something about it now

that's something in our case it's simply

going to be logging the name so notice

this essentially is no let me comment

out we have quite a few logs here but

then if I type something and if I press

submit check it out now I'm getting this

value so this is how we can set up again

uncontrolled inputs using use graph so

that's the first example we're going to

look at and in the following video we'll

take a look how we can use use ref

to avoid running some functionality on

the initial render and you'll see what

I'm talking about in a second okay and

now let's take a look at our second

example where we will change the value

of use ref and we're going to start just

like the first one where essentially I

want to create a value with user and in

this case I'm going to call is mounted

and I'll set it equal to use ref and

just like before

I want to provide some kind of default

value and in my case I'm going to go

with false again I probably don't need

to say that now is mounted essentially

is an object in there there's a current

property and that one is equal to a

false now I also probably don't need to

remind you that if I have here a huge

effect and if I add here

dependency array and if I provide here a

value basically

the state value over here every time

I'll click on a button guess what

essentially the functionality inside of

this use effect is going to run correct

so let's kill two birds at the same time

I'm gonna go with is mounted and let's

save and notice pretty much every time

I'll click I have this current is equal

to false and once we have established

this why don't we talk about a very

specific use case

what if I don't want to run certain

functionality after initial render so I

do want to run it

after that every time the value changes

but not on the initial render again this

is not probably something that you're

going to use in every project but here

and there this is

a Nifty solution where essentially you

can just avoid running some

functionality after that initial render

and the way we do that we essentially

check this value

and if this one is false

we set it equal to true

and then after that every time this

value changes this is equal already true

and then the functionality is going to

run now one gotcha though don't check is

mounted because this will always be an

object

so this will be true we need to check

for the current property and if you're

someone iffy on that let me showcase

what I'm talking about

so inside of the use effect first of all

I think I'm going to remove this one I

can set up the if condition and I can

say if is mounted current

is false then don't run basically return

from the use effect so in here I can say

is mounted and current again don't check

for is mounted because it is an object

so essentially

it's going to be true

I'm checking for the current property

which in the beginning is false and if

that's the case then I want to go with

is mounted so notice now I'm actually

changing that value myself

I'll set it equal to true and then I'm

going to return so true and then I

return and after that if condition I

actually want to set up that

functionality now again in my case that

functionality is simply going to be

log and then re-render like so but let's

take a look what is the result so notice

I refresh and there's nothing in the

console and I'll only see something in

the console once actually

I'm changing this value

so essentially what we're doing we're

avoiding to run whatever functionality

after initial render again not something

that you'll do in every project but once

in a while you might hit this use case

and lastly I just want to showcase how

we can set up nice Focus around our

input and since we're not triggering

re-render we won't have this infinite

Loop so I have rest container which

essentially is pointing to my input

correct so I can set up a use effect

instead of the use effect

I'm going to pass in the function and

then since I know that I'm accessing

container then current so that's my

input in vanilla.js we also have this

Focus we just invoke it again this is

not reacting this is vanilla.js and

check it out basically the moment I'll

refresh I'll have this Focus around the

input and what's really cool that since

use ref

does not trigger re-render essentially

you won't have this infinite Loop like

you would if for example you would be

using use effect without the dependence

array and then updating the state value

hopefully that is clear and we can move

on to the next topic okay and up next

let's see how we can create our own

custom Hooks and custom hooks are great

for

abstracting some functionality basically

to have less lines of code in the

component and as a result it's going to

be easier to manage our component and

also once we have custom hook

we can bring it from Project to project

which of course speeds up our workflow

our rule of thumb quite often use effect

logic is a great option for custom hook

and lastly

all the hooks rules apply to our custom

hooks for example they do need to start

with use for the setup in the app GSX

look for zero eight custom hooks star

and then zero one toggle so we'll start

with somewhat basic example and then

we'll work on the fetch one and once you

navigate here

in the component you can see that I'm

using your state I have show set show

default value is false and then every

time I click on a button what do you

know I'm toggling the component

and essentially

if I have for example three four five or

whatever components that have this kind

of functionality the toggle

functionality

I can set up a pretty simple custom hook

where first we're going to navigate to

the starter and go with new file and

let's go with use again this will have

to start with you so might as well right

away set it up and I'm gonna go with

toggle and in this case we can go with

JS now if you want of course you can set

up jsx but in my case I'm going to go

with Js and essentially the way it's

going to work

we'll just take this functionality and

return from that customer so first let

me grab this just so it's faster then

let's come up with the function again we

need to go to use and in this case I'm

going to go toggle here when I know that

I'm going to be looking for some kind of

default value that's why I'll use this

as a parameter I'll say default and then

value and of course I'll pass that value

when I invoke the custom hook

and in here as far as the logic it's

pretty much the same I want to have show

and set show and I want to pass this

default value so let's go back over here

and we'll cut it out

copy and paste and instead of false I'll

actually go default and then value now I

also want to set up the toggle function

the one that I'm invoking here and I'm

going to go with const toggle let me

close the sidebar

as far as the functionality same deal

basically I want to go with Seth show

and then the opposite value whatever it

is and then from this huge toggle we

have multiple options

if you want you can return an array so

you can go here and say return

and then the first value

can be show and then the second one is

toggle so notice basically we're making

a huge state

just a little bit more complex

so in here I also have the toggle

function so hopefully it's clear so we

have the state value but I'm just adding

this extra function

so now I'm returning this and then

backing the toggle

I can access it the same way I can go

use toggle and then the first value and

the second value now I actually prefer

turning this as an object

It just fits better my mental model

where I know that there's going to be

some properties there and I just want to

access them now

this is totally up to you

if you want you can set it up as an

array and then of course we want to

export that so I'm going to go here with

export default

and then we're looking for use and then

toggle that's what we're exporting

and now back in the toggle one instead

of State we don't need the State anymore

we want to import the use and then

toggle and I'll rely on my Auto Imports

remember we do need to provide the

default value

either that's true or false and just so

you can see that it works I'll actually

go through and then remember we are

returning the object correct and as far

as the properties what do we have over

there well we have show and we have the

toggle so now this stays the same this

doesn't change but here where I have the

on click

basically I have the toggle

notice the moment I save right away see

the component why well because the

default value is true and then the

functionality still works I purposely

picked a very basic example

of course

as you're looking at it you're like well

I mean are we really saving time again

it really depends if you have 10

components that use the same toggle

functionality yeah this is very Nifty

and in the following example you'll

truly see the power of the custom hooks

again this is just to showcase the main

setup yes we can use here use State yes

we can use use effect whatever hook you

want make sure that you start with use

and then when you actually invoke the

hook if you have some default value you

need to pass it in so for example if I

flip it to false notice now I don't see

the component on the initial render but

if I go back to true this is still going

to work so again I refresh and I'm good

to go so that's the basic setup and in

the following video we'll try to do the

same thing with our fetch functionality

okay and once we're familiar with the

fundamentals of custom Oops why don't we

cover more complex example and here's

the challenge

in the app jsx import 0 to fetch data so

it's in the same folder just a more

complex example and once you navigate

there remember this is essentially

a component that is fetching a GitHub

user

and now let's try to set up a custom

hook

so effectively we want to move away

pretty much most of the logic so try to

come up with that custom hook

and a hint

hooks should return is loading his error

and user and it should take URL as a

parameter so again if you're interested

try to set it up and once you're ready

to compare the results resume with the

video

effectively like I mentioned use effect

quite often is a good use case for the

custom hook notice all these lines of

code it would be nice if we could just

move it to a separate file and

effectively we'll have less lines of

code and it's going to be easier to

grasp the functionality once you come

back I don't know in two days three days

or I don't know a half a year

and the way we can do that we can set up

the custom hooks so let's navigate back

to the starter I'm going to go with use

and I'll set up two examples first one

is going to be use fetch person

this is going to be kind of a specific

case and then I'll show you how we can

make this more generic basically how we

can have a custom hook for any data so

let's start over here I'll say fetch

person.js and then let's create that

function first

so let's go here with const use fetch

and then user

or person sorry

I mean it can also be a user of course

correct then we want to set up the

function body and first let's just take

a look at our component

so I have is loading is error and user

all of these three state values can we

move them to a custom hook yes of course

because essentially What's Happening

Here

we just set up a use effect and

eventually we get back the user or of

course if there is an error

so let's try that first I guess let's

grab these Imports and I'll right away

basically cut them out we won't use them

in this file

set it over here

then we pretty much want to take the

whole thing yep it's that drastic so I

want to First Take These State values

set it up over here inside of the

function

and then we want to grab the use effect

so whole thing over here let's cut it

out as well

and copy and paste because this Hook is

going to be looking for that URL now of

course if you know that you're going to

be using the same URL you can hard code

in the use fetch person but if you want

to make it more Dynamic set up the

parameter so here I'll say whenever I

invoke use fetch person I'm going to be

looking for that URL and of course in

this case it's this getup one and then

we're pretty much done we just want to

return all of these three values yes

effectively it's that simple remember

the use toggle

in the component what did we do well we

invoked it correct so initially is

loading is going to be true

then we're going to invoke the use

effect only

after the initial render and here we

have all this logic where we'll grab the

URL which matches the parameter of

fetched the data if there's an error

will return now if not then we'll return

a user

so essentially yes it's that simple and

here let's just go with return

and we want to go with is loading again

if you want you can return an array but

especially if I have like three values

that's definitely a good use case for a

object in my opinion let's go here and

then we also want to return a user and

then we want to navigate back to fetch

data

and essentially in here we just want to

go to use fetch for some reason it's not

importing that's fine let's just pass in

the URL and remember this one is

returning three things it's loading his

error and if there is a user correct so

we go here we set it equal to and then

we just check for is loading

same goes for is error and then we have

the user and now million dollar question

which one is easier to read

if you have eu's fetch person or

all these lines of code and as I said

the reason why nothing worked actually I

didn't export that my bad so I'm going

to go here with export default

and then use fetch Versa let's do this

and then back in the fetch data of

course we want to import that

so I'm gonna go here with use Fetch and

I'll cheat a little bit where I'll grab

the import but I'll remove this line of

code because otherwise I'm going to get

the narrow so now everything should work

again notice we have nice loading one

if there's an error we'll get an r and

eventually we get the user so that's how

we can set up a custom hook with more

complex example and as a side note

whenever you start working with react

query or other fetching libraries the

setup is going to be extremely similar

that's why I thought that it's very

important for us to understand how

fetching works with use effect of course

those libraries do way more than just

this

they do caching and all kinds of cool

things but the idea is going to be the

same you're going to get some kind of

custom Hook from the library that hook

is going to be looking for some

parameters and of course it depends on

the library what parameters the hook is

looking for

and essentially you'll get back a bunch

of useful info about the request and you

can use that info to set up

conditions to access the data and all of

that cool stuff and lastly as far as the

custom hooks let me show you how we can

make our function more generic basically

our use fetch person because I mean

chances are we'll probably want to fetch

more than just the user for example we

want to fetch an array or something

along those lines so again the

functionality pretty much is going to

stay the same I'll just change some

names and what we're returning from the

function and as a result we'll be able

to use the custom fetch hook with pretty

much any data not just with a user

object so let's try this one out where

first I want to navigate to the star

I'll create a new file and I'll call

this use fetch pretty generic correct

then pretty much I want to take the

whole thing

one by one we'll just change some values

so copy and paste over here and instead

of user why don't we call this data I

think that's pretty generic correct so

data set data and as far as default

value I'll still keep it as a and L then

we want to change around the name it's

not going to be fetch user I'll actually

call this fetch data and I just need to

remind myself that pretty much

everywhere where I have fetch user I

want to also

rename it to a fetch data so page data

here and then we also invoke it now I

don't have user anymore I have the data

so instead of user from this hook I'm

returning a data and then lastly notice

over here

as far as the response I'm calling this

a user well

we can come up with response so that's

going to be pretty generic where I'm

going to go with set data and I'll set

it equal to respond now let's save it we

want to navigate to batch data and let

me double check yep

of course I have a mess up here it's not

fetch person

I'm gonna go with use and then fetch and

same over here now technically this

should work because the export is

default but

I'm gonna rename that and then back in

the fetch data instead of use person or

move this

and we want to set it from the scratch

where I'm gonna go with use and then

Fetch and we still want to pass in the

URL now you're probably wondering okay

what about the user since that's what

we're using in this component well we're

not getting back any more user this is

actually data so we have two options you

can remove the user and go with data but

then just keep in mind that everywhere

where you have reference to a user you

also need to use data or you can simply

add an alias again a JavaScript thing

where I'm saying yeah I want to grab the

data out of the use fetch however in

this component I'm going to call this a

user that's it notice everything still

works in this case we have the generic

one which effectively we can take from

Project to project and then every time

we want to get some data we just invoke

the use fetch pass in the URL and if

everything is corrected we have no

errors

once we're done loading we'll get back

the data and up next let's discuss

context API and we're going to start

actually with the challenge where I want

you to see the pain of prop Drilling and

the challenge is following

first you want to navigate to the star

in zero nine context API and create

three components create nav bar jsx

then nav links which you want to Nest

inside of the number and then user

container

which you want to Nest inside of the nav

links one so yes I don't want you to

Nest use your container and nav links

inside of the navbar no our use case is

going to be the navbar component which

basically is our parent then the child

is nav links and then the user container

is nested inside of the navic so

essentially we have this

three level structure now after that

once you have the basic setup in place I

want you to import navbar.jsx in the app

jsx

now as far as my solution I'm going to

remove the container just so it looks

like a nav bar because I have all that

padding in the container and all that

and it doesn't look very good if I place

that nav bar but you don't have to do

that and also don't worry about the CSS

the main goal of this challenge is to

work on a logic if your example doesn't

look exactly like mine don't worry about

it again we're just focusing on the

functionality so once you have that

nested structure

then in the nav bar I want you to set up

a user State value the default is going

to be an object with some kind of name

property

again whatever you want to place over

here as well as the logout function

that sets the user back to no

no

I want to pass both of them down to a

user container and just to give you a

hint yes you will have to pass those

values through the nav links now in the

user container I want you to display

user as well as the button and then once

the user clicks the button I want to set

it equal to null now there's an extra

challenge

you can also use conditional rendering

and basically if the user is null then

you can display please login notice over

here that's the final example but again

this is an extra challenge our main

focus is to get both of these values

down from the nav bar to a user

component and once you're ready to

compare the results

resume with the videos Okay so let's

start working on the challenge

first I want to navigate to that folder

so again we're looking for context we're

not looking for the final one

we'll start working the star and we want

to set up those components let's start

with the main one so nav bar jsx let's

set up the component okay awesome and

then we want to do the same thing for

the nav links as well as the

what was the name

I believe they named it user container

yep that's the one so let's continue I'm

going to go with nav

links jsx again create the component

okay awesome and then lastly we want to

create that user container user

container jsx again

set up the component let's save now

remember we have nested structure so

I want to go to navbar and First grab

the nav links so in the nav bar I will

add a class here

of navbar just for style so I'll say

here nav

let's add the CSS and the class is

navbar and then in here inside of the

nav bar I'll have the heading 5 with

some kind of logo

so in this case I'll go with context API

and then I also want to grab those

navlicks so let's set up that component

and we want to import them like so let's

save now I don't see anything because of

course in here I'm importing the

complete one so now I right away want to

go I guess

two hey app jsx and when I grab the nav

bar from the star

so again

we'll have two of them and like I said

I'm not placing anything inside of the

container and since I still want to

showcase the final one I think I'm gonna

go with the react fragment

so I'm gonna go here with star

then it's not coming from the final it's

actually coming from the Star and then

let me set up that fragment first

and then inside of the fragment we'll

place a final so that's going to be on

the top and then we'll have the star

let's save it and I actually get the

narrow because

in the final one I'm looking for context

and of course the moment there is no

context now if you're wondering about

the folder structure notice the final

one there's going to be two examples

there's going to be a prop drilling

which is the one that we're going to be

working on right now so if you ever want

to compare the results look for prop

Drilling and then there's going to be

the context one so that's going to be

our complete example with context API so

in here I need to change the path where

it's not going to be context it's

actually going to be a starter and then

nav bar let me save it this should do it

and now notice

so I have context API that's my logo and

I have the nav links so up next I want

to go to a now links and I want to set

up the logic as well and in here it's

going to be a div with nav container and

then inside of it we'll have an old list

with nav links and then the user

container so I guess let's start by

setting up that div we do want to add a

class of nav container

and then let's go with that on our list

so this is where we'll display those

links so an ordered list and let's call

this nav links and in here list item and

I'm just going to go with an href and

for time being I'm just going to pass in

the hashtag so we're not going to go

anywhere and then let's copy and paste

and this one is going to be about

now after the unordered list I'm gonna

display that user container so again

let's use the Auto Imports let's grab

the user container and now notice

I have the links and I also have the

user container and before we set up any

kind of logic

in the user container I want to set up

those values in the navbar and

effectively I want to set up the state

value the user and I also want to get

the logout one so let's go over here

let me close the sidebar I'm going to go

with use

State like I said the default value is

going to be that object in my case the

name will be Bob so name is equal to a

bob now what are we getting back well

we want to get back the array

the user and set user now we also want

to set up right away what the logger one

so const logout and as far as the

function in here we want to go with set

user and set it back to no

and like I said the main

challenge here is to get both user a log

out down to a user container

so not just the nav links but the user

container how we can do that well since

we can only pass props down

we go to in nav links and we come up

with a prop so I'm going to go with user

is equal to user and then log out is

equal to a logout

let's save that now we want to go to a

nav links and essentially yes even

though we're not using any of these

props in the nav links component we'll

have to grab them and we'll have to pass

them down to a user container so it's

not an official name but effectively

it's called prop drilling where you're

passing

through the components that are actually

not using those props because again we

can only pass props down and as you can

see in this case we only have what three

levels basically we have parent child

and let's call it grandchild but it's

pretty normal in the application to have

five six or whatever levels so probably

your next question is are we gonna have

to do that well yeah if we're not using

the state libraries or the context API

which we're going to cover in the

following videos essentially that's the

setup there's no way around it so let's

go back over here let's say that I'm

going to be looking for a user and a log

out and yep the same deal I want to go

with user is equal to a user and I

probably don't have to say that of

course you can name this prop

differently but I just find it

convenient if we go with the same name

so I'm gonna go logout is equal to a log

out and then in the user container this

is finally where we're going to use them

so again same deal we go with user and

we want to set up the logo and now let's

work on pretty straightforward jsx where

I'm going to set up a div I'm going to

add a class name of user container and

then inside of it for now I'm not gonna

render anything conditionally I'll just

say hey grab me the user and also set up

a logout button so I'm going to have a

paragraph with hello

their comma then let's grab the user and

remember the property his name and then

right after the paragraph We will set up

a button

so button

class name

is going to be a button and then on

click

it's going to be equal to our logar one

so log out here and as far as the text

let's just go with logout let's save and

notice I have Bob and once I click I

actually set this equal to null now

we're going to have an error here

because once the user

essentially is null then of course we

cannot access the name property and in

order to avoid this error remember we

have the optional chaining where I can

say Hey listen if the user exists then

grab the name if not then just return

undefined so no others

once I click hello there and basically I

have nothing there because the value is

undefined and I also want to add to

uppercase just to Showcase that we can

use multiple

optional training operators and I'm

gonna go with two

upper

and case here let's save it so I'm

saying if there's a user grab the name

if there's a name then set it to an

uppercase so now once I refresh notice I

have Bob and then again once I click I

have nothing and then lastly let's set

up that conditional rendering where

if the user exists then of course I want

to provide the paragraph and the button

however if there's no user I simply want

to go with please login and for that

I'll first set up a paragraph I'll say

please log in and then above both of

them for now I'm gonna go user and

remember we go with question mark and

then we have two options

so first if it's true we return

something and then if it's false so

let's start here by cutting this out but

there's another gotcha if you copy and

paste there's actually going to be an

error because notice we have effectively

two adjacent elements and we can only

return one

now the way around that is again either

to set up a div or we can go with a

fragment copy and paste and now

everything works and then in here since

I'm returning only one cut it out and I

can set it up so now notice since the

user is no I have login

however once I have the user I have

there hello there Bob and once I click

now essentially I log out the user now

pretty much most of the functionality we

already covered

at some point during the fundamentals

and tutorial like I mentioned already

previously the main reason for this

challenge was to give you a first-hand

experience

of such nested structure so if you do

have

a component a parent

and you have the nested structure where

you have some kind of child and that

child has child on its own and you want

to pass something down from the parent

to let's say

grandparent let's call it that then you

will have to pass the props

through all of the components even

though technically this component is not

using any of these two props all right

and now let's take a look how we can use

context API which is provided by react

to essentially solve our issue like I

mentioned already in the previous video

if you want to see the exact example we

just completed look for prop drilling so

in the context one

you'll actually see

the setup which we're going to work on

right now now the reason why I'm telling

you that because I'll remove essentially

the user and logout from the nav links

as well as the nav bar and user

container so we'll start from the

scratch keep in mind that if you ever

need a reference it's right over here in

the final so one by one let's remove

them because that's not how we're going

to pass them down so let's remove over

here

let's save

then we want to do the same thing in the

now links

effectively we're looking for a way to

bypass

this one or multiple components that we

have sitting in between the main one the

parent and then whichever component

wants to use those values so let's

remove this and we'll probably have a

narrow right now so you know what

let me just

return something else for now again

we'll remove this I just don't want

react to start looking for the user

value and all that let's just go with

the return and we'll go with hello world

let's save it we should be good to go

now how we can pass those values

down without doing the prop drilling

well like I said we need to use context

API now there's multiple ways how again

we can invoke this if you have react

imported you can go and react and then

create context but again you'll have to

import react of course notice once I

save I'll have big fat error because

react is not defined just like with huge

state or we can right away import that

correct so since we already have used

State we can go to create context

and essentially in the parent we want to

invoke that create context and this is

going to return two things it's going to

return a provider component and a

consumer component however

since there is a huge context hook

I mean there's really no need

for the consumer however we will use the

provider so first I want to go above the

nav bar and I'll right away export since

eventually we will import the context

I'm about to create in the user

container that's why I right away go

export and then const and come up with a

name and since we're working in the nav

bar I mean kind of makes sense

if I named the snap bar context that one

is going to be equal to create context

we can pass in the default value but

we're not going to do that and

essentially once we invoke this

we get back bunch of useful stuff and we

can log that one here

so if we go here with context we should

see a bunch of cool things in a console

let me just

clean it out notice

essentially this is what we're getting

back but

our main interest is in this provider

that's what we definitely want to get

again

we used to use consumer but now use

context hook which we're about to cover

actually replaced it so there's no need

for it anymore and basically if we go

here with DOT notice

I have these options and the provider is

what we're looking for

so we want to grab that provider and go

to a main parent basically the component

which is going to provide those values

and we want to wrap the return

in that provider so we go to our nav bar

and let's say not I think I can just

move this and then we want to wrap our

nav in the navbar context that's the

name Dot and then the provider now

what's really cool that provider has a

value prop

and essentially whatever you'll pass

over here you'll have access anywhere in

that tree again we have three components

but please keep in mind you can have a

setup with 15 components so anywhere in

that component tree you'll have access

to this value now

you can simply go here with hello and

you'll be able to pass it

however as you're looking at it you're

probably thinking what's the use case of

hello I mean it's nice that I can access

it in the user container but that's not

what I'm looking for and you're

absolutely correct

so here's what we can do we can turn

this value into an object so please keep

in mind this is not a special syntax

again I'm just simply going back to a

JavaScript land and I'll set it up as an

object

that's it this is not a special Syntax

for double curlies I keep getting these

questions in the course q a

so I really want to stress that I simply

want to set up an object and if you

want to make it more readable

you can set it up over here you can

create an object and then pass it

directly here in a value if that's

easier for you to read

I'm not gonna do that but

just an option so I have an object and

now notice effectively I can pass both

of them down here in the subject as

properties I can say user is equal to

user and logout is equal to a log out

let's save that and now we need to go to

a user container and notice how we're

nicely bypassing the nav links and we

want to grab those values and for that

we'll need two things we'll need a

navbar context that's why we're

exporting and also

we'll need a huge context Hook from

the react so let's navigate to a user

container

and in here let's import both of those

things the use contacts as well as nav

bar context

so I'm gonna go for now above the return

again I don't want to get the error and

essentially we want to go with use

context talk which is a special hook

which is looking for that context again

this is coming from react

just like you state use effect and all

that

and we want to pass in that nav bar

context or whatever context you have

so the one that's in the parent whatever

you create over here you export and then

the use context is going to be looking

for that so here I can go with navbar

and context and since my Auto Imports

are working we're good to go now what is

this returning well

let's go back to your navbar what are we

setting up over here an object correct

so let's try this one out I'm gonna come

up with a variable and I'll set it equal

to a value and you'll notice nicely in

the console that we have access to that

object so every user with the name

property as well as the logo

so in my jsx I can either go with Dot

and then grab the logout or user or we

can do the structuring right so instead

of grabbing the value I'll say yep I

know for sure that I'm getting back the

object so let's go here with user and

then the logout and of course I simply

want to return hello world and

everything is going to work like peaches

and again the main goal here is to

bypass the navx notice

networks is not getting any props it's

not passing any props

I'm getting everything directly here in

the user container and my functionality

still works and since we just covered

custom hooks why don't we put our

knowledge to a good use

so notice in the user container

we are getting used context and we're

getting that nav bar context and

essentially in any component all

throughout your application I mean in

this case of course it needs to be

nested inside of the nav bar but in the

following videos I'll show you

how we can set up a global context

hopefully that is clear pretty much

anywhere where I want to use that yes

I'll have to grab these two things I'll

have to grab the use context as well as

the navbar context

now this is a good use case for a custom

hook

so instead of these two Imports I can

set up one custom hook and then just

import that

so back in the nav bar

I first want to come up with the name in

my case I'm going to call this use app

context but sky is the limit so let me

add here custom hook and then

effectively we want to export it because

same deal we will use it so const and

then call it use

so notice we still using the used so

that doesn't change

otherwise the stuff is not going to work

use app context that's my function and

what do I want to do from this function

I simply want to return use context

which I'm importing over here

and the nav bar context

so effectively this line over here so

first let me navigate back I'll remove

both of them from this user container

just so you can see that I'm not messing

with you let me go to a nav bar

copy and paste we don't of course need a

nav bar context but we will need this

use context in the enable one and as far

as the logic we just want to invoke this

used context once and we want to provide

the nav bar context so I'm going to go

with use context and then I'll provide

nav bar context so now I want to save

and again keep in mind we're exporting

this so now in the user container I can

replace this used context with use and

then app context now please keep in mind

that there's also one in the final

so don't grab that one just set up this

one over here let's save it and then

notice how

our functionality still works and if

you're looking at it and you're like

well this just saved us one line of code

keep in mind when you use context

globally against something that we're

going to cover in the next video

you'll be accessing

that context quite a few times and then

it's much easier to just use one hook

instead of importing the use context as

well as that particular context each and

every time you want to access it in the

component okay now let's see how we can

set up a global context basically how we

can provide some data to all components

in our application now for this one I

will create a new application just

because I want to set up everything from

scratch and if you want to access my

final application basically the

application I'm about to create

I will add it to the main repo

in the Z assets folder so as I'm

recording this video of course that

folder does not exist but by the time

you're watching the video just go to the

main repo effective way where you got

the advanced react and then the last

folder should be there and the name is

going to be Z assets and in there you'll

find this application now if you're

interested you can also try to set it up

yourself the global context and here are

the steps I'm going to create a new

application with feet and we're going to

go with npm create and blah blah blah

blah blah then we'll install

dependencies and run npm run Dev

to spin up the dev server in the source

create a context jsx file and set up two

things a global context with create

context

and a component which I'm going to name

app context with one state value now

from the app context return a

globalcontext DOT provider the component

and then wrap the entire application

which we're gonna do in the main jsx and

there's going to be a gotcha effectively

we'll have to jog our memory on the

children prop so if you're struggling to

set this up this is totally fine now

once we have wrapped our entire

application

then we want to set up a custom hook so

we don't have to import two of those

things

when we want to access the context and

then just try it in app GSX there's

going to be app.jsx and in there just

try to lock whatever you have in the

value prop in the global context

provider and if you can see some value

that means that it's going to work

everywhere in our application

so let's get cracking and

I think I'm just going to copy and paste

there's no need for you to watch me how

I tap this so I'm just going to go with

City

bus stop

and let me

massively zoom in copy and paste again

npm create beat latest and Global

context that's the name of the

application

Dash Dash or hyphen hyphen space dash

dash template and then we want to go

with react one so once that is done I'm

going to open up a new window

because I might want to showcase

something and read me

and this is again totally optional but

I'll send them side by side

so there's my browser

that's my text error let me open up the

integrated terminal we want to go with

npm install and we also want to go with

npm

start or I'm sorry it's not create react

app we're going to go with npm run Dev

and I know I already have set this quite

a few times but if both of those

commands don't work one after another

just run them separately result is going

to be exactly the same and once I open

up 5173

this is what we should see on the screen

and since we're now familiar with the

use state

this shouldn't look very foreign we have

count set count your state and what do

you know every time I click on a button

I'm increasing the account

so now let's set up that Global context

please do that in the source so don't do

it in a public or the node modules let's

create a new file here and I'm going to

call this context

a new file

let's go with context and jsx

and first I guess let's set up that

Global one

so first let's go with const I'm not

going to export that because there's

going to be a global hook basically a

custom hook that's gonna set up

everything

so I'm gonna go with global context and

that is equal to create context and we

just want to invoke that that's the

first step after that we want to set up

the component which we're going to

return from this file and I'm going to

call this app context that's going to be

my function here

as far as what we're returning well

we're going to return a global context

dot provider correct so let's go with

return keyword

and then let's set up that Global

context dot provider

and for now we don't have anything in

there so we're not going to set the

value and as far as

what are we gonna set up in between the

component tags well that's the gotcha

that we're going to discuss in a second

so for now don't return anything and of

course we do want to export that so

export default

and we're looking for app app context

okay good

before we set up the value why don't we

also

create the actual State value in my case

simply going to be name

and set name and as far as default value

I'm going to go with Peter okay good and

then remember

there is a special prop on this provider

and the name was value I do want to pass

in the object in here and inside of the

object there's going to be a name

property and also a set name property

save that now both of them are

effectively passed down but of course we

haven't wrapped our entire application

correct and as I said I don't know

whether I covered this before but

in es6 essentially we can do the

shortcut so if you're looking at your

like I don't understand how are we

passing here name equals the name

well if we have this kind of setup

where the property name is basically

equal to a variable and the same over

here so set name is equal to set name we

can shorten this up again if you have

this kind of setup

then essentially you can shorten this up

and just type one

in this case name and set name okay good

we have covered that so now let's

navigate to the main GSX because we want

to wrap our entire application

effectively our app component

and it's located over here so unlike the

nav bar

where effectively we imported a nav

links and then the user container inside

of the knowledge now we want to wrap our

entire application

so we're not going to import for example

app over here no we want to go to

main.jsx we want to import our app

context

so the import is in place and now this

is really up to you if you don't want

the strict mode if you don't want those

extra logs and all that you can simply

remove it or just place the app context

within the strict mode just please don't

wrap the

react trig mode in the app context

that's not going to make sense so we

want to go here we want to set up a App

context and yes I'm basically creating a

new component and I'll just remove this

one over here so now we're good to go

but there's one gotcha the moment we

save we're going to see nothing on the

screen

uh if you're wondering why is that

happening well remember long long long

long long long long time ago we talked

about the children prop I believe it was

all the way back in the fundamentals

and at the moment if we take a look at

the context notice we have nothing in

here so of course I can type here

context and everything is going to be

fine it's going to be displayed on the

screen but essentially that's not the

goal so I want to grab that app

component and then since all my

components are going to meet over here

in the app

I wanna wrap it in the provider and as a

result all my components

are gonna have access to in this case

name and set name

how we can do that well I kind of

already gave you a hint

since app right now is within the

component tags

now we want to go back to context and

essentially we want to access the

children we have few ways we can go here

with props

and then instead of the silly context

I can set up correlate and we can go

with props Dot children or

of course we can just shorten this up

and set up the structuring and as you

can see the moment I save everything is

correct so now everything is going to

work

again this is totally up to you if you

want to go with props

in my case I'm going to go children here

and then I can remove the props as well

before we go to app.jsx Let's also set

up that custom hook

in this case I'm going to export it

right away and I'll call it use global

context that's my custom hook as far as

the functionality

I want to invoke use context so please

be careful most likely vs code will try

to invoke the same one the use Global

context we don't want to do that

essentially we want to go with use

context which is coming

from react again this is a special hook

that is looking for one thing and one

thing only it's looking for the context

you want access to in this case it's

going to be a global context since we're

exporting this I can nicely hop over to

app jsx I know that I'm getting back the

object correct so I'm just going to go

here const and the structure it right

away I'm not going to look for set name

hopefully it's clear that I'll have

access to both of them and that is going

to be equal to my use Global context and

I just invoke it and just to Showcase

that everything works

I'm going to log name so if I go right

now

to my devtools I'll see Peter which

means that any component that is going

to be in the app where basically all our

components meet

it will have access and not only those

components but if I have any components

inside of those components

so hopefully that is clear this is how

we can set up a global context using

context API and also hopefully you see

how useful is our custom hook where now

we don't need to do those two Imports in

every file essentially we just grab the

use Global context and we're good to go

okay and next let's cover use reducer

hook and essentially you could think of

user doucher as a light version of Redux

one of the most famous State Management

libraries out there so here's the deal

as your application grows in size it's

going to be very hard to manage

everything with just use State

especially if you have multiple

developers working on the project

that's where State Management libraries

like Redux come into play since they

provide much needed structure and set of

rules which in a perfect world leads to

less bugs and easier code management

the problem with such libraries is that

they require quite a bit of boilerplate

code

and some time to get used to the

terminology so react released use

reducer hook and I like to think of use

reducer as a middle ground

between using full-blown State Library

and just using huge state

now a few more things before we begin

exploring user reducer first

don't get frustrated if some of this

stuff looks foreign and weird

It's Perfectly Normal

it simply takes time and few projects to

get used to use reducer or any State

Management library for that matter

second because I have to introduce quite

a few new weird sounding terms like

dispatch and reducer and the action I

purposely picked the example we already

worked on

and we'll just refactor it to use

reducer

hopefully that way it's going to be

easier to grasp all of the funky use

reducer terminology and lastly please

don't think that from now on you only

have to use use reducer or even more

drastic refactor all your existing apps

to use reducer it's a tool that has a

very specific purpose and as you work on

the bigger project you'll definitely

notice when there's need for it

basically when it's a good time to

implement use reducer or completely

switch your app to State Management

Library like Redux toolkit okay and as

far as the setup we're looking for

folder 10 use reducer we want to grab

the star and we're looking for use

reducer and essentially if you take a

look at the file and folder structure

you'll see that we have only one file so

I want you to grab that starter in the

app GSX for now I have

commented it out because I want to

showcase something so essentially grab

the starter and if you navigate to the

file you'll

notice that it's one of the projects we

worked on before

and effectively we cover that in New

State when we talked about the arrays so

this is the same exact example where

we're importing the datum

we set this using use state so that's

our default one and then we display all

the people and then we have an option to

remove specific person or clear playlist

like I said I purposely picked this

example because I think it's going to be

easier to grasp all of the use reducer

Concepts since you don't need to worry

about this functionality we already

covered it before and let's start with a

tiny challenge

I want you to add to this one a reset

functionality now don't worry we're not

going to do that right away with

userducer we'll simply do it by just

adding a function

and in that function essentially I want

to set back the state to an array and

once you have the function I want you to

set up a button

and once the user clicks the button then

we set basically the empty array to all

of the items and I want you to render

that button conditionally a hint you'll

most likely use the ternary operator so

notice two options either I remove them

one by one

and once I have the clear list I have

now reset button which essentially sets

it back to all of the items or

we can simply clear it and same deal the

moment I have empty list I want to have

a reset button which essentially sets it

back to our default people all right so

first let's work on that and then we'll

Implement user reducer essentially I

just want to add a little bit more

functionality

just so

it's more interesting when we cover use

reducer okay I'm done with my big speech

let me navigate here use reducer

hopefully I'm in the correct one yep

it's in the star and essentially let me

just set up the function I think it's

going to be faster if I just copy and

paste I'm looking for the function name

which usually is the most

hardest thing in programming

so let's go here with a reset list and

instead of empty array what do I need to

do well

I already have the data correct so I

just pass here this is an empty one this

just resets to

our original array and then we want to

keep on moving Keep On Moving I have

this button now I need to set up a

functionality where once the list is

empty

I'll display one button and if I have

some values then I'll have the clear one

how do we do that well we go here with

the curlies and what is going to be our

condition people and length correct let

me double check it that's my state value

so don't set this as data that's a

little bit different that's our original

array and here we're looking for people

and I'll say if it's less than one I

have two options what is my first one

well that's a reset one correct because

this is the one that

is displayed if it's less than one then

I want to reset and I'll work on that

one in a second and now let me check if

this is false basically if I have some

items I want to display this button so

let me cut this one out okay good that's

my first one and basically I'll use the

same structure so just copy and paste

over here I just need to change some

values around where the text inside of

the button is not going to be clear it's

going to be reset and instead of

clearing the list what do we need to do

yep correct we need to go with reset so

now check it out again two options I

think I'll pick this one just because

it's faster and notice now I can reset

now of course I'm showing this because I

already have the complete application in

my app.js

my apologies notice here I have the star

I will I guess remove the final there's

no need hopefully I didn't make some

egregious errors

you save notice that the result is

exactly the same so that's already a

good start

I can remove yep I can reset and I can

also clear so that was the first

Challenge and up next we'll get to know

use reducer all right so now let's

refactor our application to use reducer

since there are going to be multiple

steps of course we're not going to do

that in one video

but let's just do a basic setup and

arrive out of the get-go I can say that

most likely this video is going to be

the most difficult one

because unfortunately I'll have to throw

multiple terms at you right out of the

gate unfortunately there's no other way

in order just to create that setup

I need to provide you values and yes

they have funky names so my apologies if

something sounds weird my best

suggestion is just to re-watch the video

a few times and hopefully by doing so

you'll understand the stuff better now

eventually we'll remove this one but

since I don't want to have some massive

errors on the screen since I think it

might get distracting for now I'll just

leave this one over here again

eventually this is going to be gone what

I do want to do for now is just comment

out this functionality because we'll

move this one to a reducer a function

we're about to create so it's not going

to be sitting here anyway and I don't

want that functionality to run so let's

just comment this one out so as the user

clicks any of the buttons nothing should

happen that's exactly what I want so in

order to get started with use reducer

first we need to grab be hook correct so

we go over here now of course we can do

the Auto Import and all that but why

don't we change this around and just say

use reducer again all of this is coming

from react now

when it comes to you state what do we

pass in

we pass in the default State correct now

with use reducer

it's a little bit more complex we need

to pass in two things we need to pass in

a default State and we need to provide a

reducer

effectively a function

that is going to manipulate the state

like I said

right away many funky terms now keep in

mind that it's just a convention to call

this reducer you can call this banana

pudding it's totally fine but yes most

likely you'll always see the reducer so

let's start working on that I'm going to

go to use reducer I invoke the hook and

yes eventually we'll set up the values

that we're getting back for now let's

just worry what we need to pass in like

I said two things a reducer function and

a default state

so first let's come up with that

function

I'm going to go to constant you simply

want to create a empty Arrow function

that's all you need to do the hardest

part probably is going to be coming up

with the name that's why I'll stick with

convention and I'll just say producer

not a vegan food truck so reducer here

and for now let's just try it with empty

one I'm not sure maybe we'll right away

have to pass in the state but let me

just try with an empty one so this is an

empty function that's our reducer this

is where we'll control essentially our

entire state so we need to pass this one

first so then

we need to pass in the default State Now

default State can be anything however in

my case it's just going to be an object

with a people property which is going to

be equal to the data so pretty much

whatever we have over here

but yes normally you have multiple

things in there you can have is the

modal open have you fetched the data is

it loading and all that kind of stuff

um

while we were working on a project

you'll definitely see that for now let's

just start very simply and create that

default state so I'm going to go here

with const and you know what I think I'm

just going to move this one up because

pretty much once we set up that default

state

there's not going to be much work in

there but reducer yes we'll do quite a

few things in there so let me just move

this one up default state so that's the

second thing you'll always always need

to provide

and of course keep in mind one thing

just because initially you add people

doesn't mean that

you cannot add later for example is

loading so as your application grows

essentially you just keep adding these

items in a default state

that's how it works so don't worry that

pretty much prior to setting up your

whole application you need to right away

come up with the state no keep in mind

you can keep adding things that's

perfectly fine and all of them

eventually

will be over here as our default state

so let's pass it

I'm gonna go with default State and

we're pretty much done with this part

so now let's move on the other side of

the equation over here

remember would you state what did we get

back eight people and set people right

so a state value and a function it's

very similar

with use reducer however

we're getting back a state and we're

getting back a dispatch so the main idea

is the same but the implementation is a

little bit different so let's try this

one out I'm gonna go with const yes it's

still an array but this time it's not

just

one state value this is our entire state

so if I'll have 50 values in here yep

it's going to be represented here in the

state now again in my case I only have

people

but I want to stress one more time

you can have a bunch of values and all

of them will be represented here with

the state

now since this is an object how we can

access things in our application well

state DOT State DOT state DOT hopefully

that's clear now the second thing is the

dispatch so we're going to go here with

dispatch again this is a naming

convention

a bobo is also a nice alternative

and yes this function is updating the

state but here's the biggest gotcha

there's the biggest difference between

you state and the use reducer when we

talk about dispatch we'll have to do

this

somewhat funny uh syntax where let me

keep moving and show you that so when it

comes to dispatch we need to do this

we'll basically go dispatch will invoke

it like so and then we'll pass the

typing now all of that is coming up I'm

just showing you that essentially the

area is the same yes we are updating the

state however this is not happening

directly

so remember with set people or any of

the set functions in each state

we just invoke them and this immediately

changed the value of people that's not

how it works with user reducer so that's

where that structure comes into play you

cannot just willy-nilly come in here and

start updating the state no what you'll

do you'll dispatch you'll pass in the

action basically what you want to do and

then it's gonna go through the reducer

and then whatever we get back here from

the reducer it's going to be our new

state so yes multiple

steps and multiple new terms like I said

this is probably going to be the hardest

video because I just have to cover these

things unfortunately there's no way I

can show you a use reducer setup without

talking about them that's not going to

make sense so let me try this I might

need to pass in state I kind of want to

leave it for later videos but if I'll

get some bugs of course we'll have to at

least talk about it a little bit so this

is going to be our initial setup now we

can bravely

take this one out so we won't need it

anymore that's it we can remove it and

then remember

we have people now do we have a state

value now well

not really right so what do we have we

have state and in there I have the

people so let's keep on moving and you

know what I'll just log so you can see

the state

but since again I don't want to have

some unnecessary errors I can tell you

right away that in a state we have the

people and now instead of accessing the

people directly we're grabbing the state

so here's the deal

as far as access yes we still do the

Good Old State value and then since this

is an object we're grabbing some

particular property but the update is

not going to be like this you're not

going to go hey

um let's update the people already in

the state let's create new people and

set state DOT people equal to that no

that's not how it's going to work we'll

have to use the dispatch it's going to

go through the reducer and all that

shebang so let's keep on moving at him

here I also have people and I just want

to add State again let me see whether

we're getting back the error if we don't

return the state we might so let me save

and if everything is correct then I will

talk about these suckers in next video

the state and action that we need to

pass in and up everything

seems to be working and check it out

so this is my state object

and this is my array correct State

object I have people and now everywhere

in my application I basically grab these

values whatever they are again in our

case it's just a people but there can be

more things in there so that's the

general setup for use reducer and in the

following videos of course we'll start

talking about how we can update this

state because it's nice to have a

default state but obviously we want to

implement some functionality okay we

have the initial setup in place up next

let's talk about how we can Implement

some functionality and like I already

probably mentioned 10 000 times in a

previous video essentially when it comes

to use reducer or again since it's a

Redux light effectively the same

functionality Works in Redux you want to

dispatch something called action and

that action is going to be handled here

in the reducer and then whatever gets

returned from

the reducer is going to be the new state

so here's the deal by default this

function whatever we said over here

whether that is a vegan food truck or

banana pudding or Bobo whatever it gets

two things it gets state so that is the

state right before the update and the

action basically what are we trying to

do and since those are parameters we

simply go State again just a convention

and an action

okay hopefully we're clear on that and

now let's see how we can change

something in that state basically how we

can Implement some functionality

because what we need to understand it

was the same deal over here when we for

example remove the item we just change

the state value and essentially we want

to do it over here as well we just don't

want to do it directly you want to do it

through the reducer and you can pick any

of the functions I think I'll start with

clear list because in my opinion it's

going to be the easiest one to grasp and

essentially if we want to update

something if we want to change that

state value we go here with dispatch

and like I said we have this somewhat

funky syntax where we invoked this patch

but dispatch is looking for an object

and we must must must must must must

must must must must must provide type

over here type property yes you just

have to do that I didn't make that one

up

and as far as the type it's equal to a

string so I can say here do something

or I can type whatever string value I

want and I'll handle that in the reducer

now a convention

is to use

all uppercase and actually assign a

variable to this one I'll show you in a

separate video why we want to assign a

variable for now let's just stick with

convention and what are we doing over

here

we are clearing the list right so yes

essentially I would go with clear

and then list

this is just a convention you can write

it in camel case you can write it all in

lower case that's totally up to you just

remember that you'll have to handle that

here in the reducer so whichever option

you pick just stick with it otherwise

it's going to be very confusing and

don't be surprised if you are working on

a bigger project with other developers

and you'll see this syntax yes this is

pretty common so essentially what I'm

saying I want to clear a list so now

dispatch is like okay reducer now you

handle that I did my work

I dispatched an action so back in the

reducer

like I said we have two things

we have the state and we have the action

so state is going to be the state before

the update so once we're done with this

function there's going to be a new state

value please keep that in mind and the

way we handle that let's just First Lock

two things state or you know what let's

start with an action just to Showcase

what we have so notice here right so I

have my array now once I click there's a

big fat error and we'll talk about it

why we have nothing on the screen but

for now let's just focus on this one so

notice here I have the clear list in

line 9. so this is what I'm getting

that's my action now why we have this

whole thing not just type well because

we can provide more data in here and

you'll see that in a second once

essentially we need to remove a person

so we'll add more things over here but

if we just log this action this is going

to be the object that we're passing in

now what are we interested in well we

want to get the type correct because

we'll do something with that type that's

the one that screams hey I want to do

something

now

why do we have this massive error well

whatever we're going to return from the

reducer

is going to be that new state value so

notice this line 27 here

our state why is it undefined

well because reducer is basically a

function by default returns undefined so

this underscores the point whatever

you'll return here from this reducer

will be that state value so check it out

I can go here with return

and I can say shake

and bake

now I'll still most likely have the

error once I click the clear again once

I save technically everything is fine

but check it out I'll have the same

error and again we can scroll down and

we can see that nothing works why

because again line 28

shake and bake

is my people property somewhere in the

shake and bake

and of course the answer is no so

here's what we want to do first of all

we'll talk about the default returns in

a second that for now let me just get

rid of it and I'll also remove the

console log here in the reducer

essentially one by one will check for

these actions yes

if you're wondering do we have to do

this manually that's correct that's the

setup we go here with if now quite often

you'll see this switch operator used I

actually don't like that approach again

switch is an alternative to a bunch of

if statements I actually find if

statements more readable so we go here

with if and then I want to check for

action and remember the type is the

property correct so we go with type and

I want to check whether it is equal to

now what am I passing here clear list so

what do I need to set here same deal yep

that's correct so we'll take it here

copy and paste and that's why I'm saying

you can come up with whatever string

value you want over here just make sure

that you use the same one in the reducer

otherwise it's not going to work and

then we need to set up the functionality

so whatever we'll return from this is

gonna be my new state value

so how our functionality is going to

look like well we'll go with the return

because we want to return something and

essentially I want to spread out the

current state values why well because

even though I'm clearing the list keep

in mind that if I have is loading over

here and let's set it equal to false

what do you think is going to happen if

I'll just return empty array yes as far

as the people array my functionality is

going to work but keep in mind

if I'm not going to include this is

loading then essentially your reducer is

going to return a new state and that is

loading is going to be gone

so just like previously

effectively we want to spread out or

copy

the current state values so this is the

current state before this update and we

want to spread them out we want to copy

them

so now we're also passing this is

loading otherwise it's going to be gone

and then we want to overwrite then I

want to go with okay what is going to be

the new value of the people well we

wanna set it equal to an empty array

correct so we go here with people

and check it out it's not different

to what we have already in a clear list

we're just doing that in reducer and I

really want to stress that point that's

why I picked this particular example so

now let me save it let me clear out the

console app a bunch of errors in there

and now everything should work where

again

in clear list we dispatch a specific

action called clear list and then in the

reducer

we handle that I check for Action type

I grab the current state whatever it is

of course now we have the default one

but keep in mind that as we add more

functionality of course it's going to

update itself

so the state

is going to be the current state before

that particular action and then we

return a new value

this is our new state this is what we'll

see so now let me clear and check it out

notice everything works here

so there was no error and notice this is

my new state now

so initially I had four items and now I

have zero however notice how nicely we

still keep the is loading so we did not

lose this one over here so essentially

that's the general setup when we want to

update something in the state with

dispatch

we need to provide a type which is going

to be our action we need to tell what

we're going to do

and then in the reducer we handle that

type and whatever we return from the

reducer is going to be our new state

value okay and before we set up rest of

the functionality let's just talk about

the conventions and first let's start

with actions like I already previously

mentioned it can be any string you want

but in order to avoid some weird typos a

convention is to set this one up as a

variable

and then you're just avoiding some silly

bugs just to Showcase that if we go back

to our application notice in here we

have clear list but what if in the

reducer I mistyped and I said clear list

now do these ones match

and

the answer of course is no so now what

happens when I clear the list well I'll

have big fat error because

we are right now returning undefined

that's the default one since

we're not hitting this condition correct

and a way around that is effectively to

set up variables

that have the same name so if you have

clear list yes the variable name is also

going to be clear list so

why don't we right away set up those

variables we have only three pieces of

functionality so it's going to be pretty

quick I'm gonna go with clear list and

the other one is equal to my clear and

underscore list then I want to do the

same for reset something we're going to

work on in the next video so reset list

now that one is equal to reset and

underscore list and then lastly I have

remove item so again const and remove

item and at the very end of this section

will actually set it up in a separate

file and we'll import it because that is

a pretty typical setup since you're not

going to handle everything in just one

file so remove underscore and then item

and now where I'm checking in the

reducer as well as in the clear list

where I'm dispatching instead of passing

this string directly I go with clear

list that's my variable which holds the

string so this just

omits some weird bugs let's save this

let's first double check

we don't want any bugs here yep we can

nicely do so and now let's talk about

the state that we're returning from

reducer

you say what if I go to a reset list

something we're going to work on in a

second

and just pass some random stuff now this

could be because I just haven't created

yet the functionality in the reducer to

handle that dispatch or I just for some

weird reason access to your wrong

variable what if I do something along

the lines of type and then something

again we'll have big fat error correct

because we're not handling it here and

essentially we have two approaches just

to Showcase bam this is what we'll get

we only have clear list over here and

you can always return each state like so

so I have bunch of conditions I'll check

for reset list I'll check for remove

item and all that now if

the action type does not match any of my

conditions I'll simply return H state

so notice a clear that should definitely

work and once I reset technically

nothing happens I'm just returning a

state

which was right before the update and

since we did not perform any update I

just returned State and call it a day

now this is a valid approach however

how are we going to know if we have a

bug

so alternatively you can actually throw

error and this is very useful because it

right away tells you like something's

wrong with your application you need to

check it and the way we do that and

I think I'm just going to leave this one

for your reference just in case so

return State and the way we throw the

error we go through new error again this

is a JavaScript thing we're not making

this up just because we are in react

then I'll set up a template string and

you'll see in a second why so I'll say

no matching and essentially I'll look

for the action type action and then type

so access it and I'll just add here a

text action and type let's save this and

like I already said probably

twenty thousand times effectively this

just helps me if I see this I know that

listen somewhere I'm dispatching an

action that I'm not handling it that's

very useful notice reset bam and at

least I can go to console and I can be

like no matching something action type

so let me double check

the action that I'm dispatching so

essentially those are the conventions

when it comes to actions as well as how

we handle an action that we're not

catching in the reducer all right and

once we're familiar with the

fundamentals now let's work on a small

challenge where

you can try to reset the list yourself

so set up a dispatch and handle the

action in the reducer and once you're

ready to compare the results resume with

the video so

I'm going to navigate to use reducer

basically I'm looking for reset the list

instead of something

I'll use my variable and what is that

well that is reset list awesome

I'm pretty sure I can remove this one as

well as the previous one here

and then let's just scroll up and inside

of the reducer right after my clear list

I'll set up the reset one now please

keep in mind in this case order does not

matter if I place it before or after

clear list I simply want to check again

for Action I think in order to speed

this up I'll just copy and paste we're

not checking for Clear list we want to

go with reset so now notice how nice it

is that we have that variable which

right away grabs me in that string

and instead of

returning empty I'll just set it equal

to data that's all we have to do again

let's refresh so we don't have

the errors in the console and let's just

try it out

yep

it's empty and once we click on reset we

set it back to data array okay and we

also want to do that with a remove

person our last piece of functionality

and again if you want to set it up

yourself

set up a dispatch and then handle that

action in the reducer a tiny hint as far

as ID

you want to pass it as an extra property

in the object the one that you're

passing into a dispatch so let's get

cracking I'm going to navigate to use

reducer I'm looking for a remove item

and here we want to go with this patch

we want to invoke it we want to pass in

the type and in this case I'm looking

for remove item comma and you can

definitely pass here the ID like so you

can go with ID equals to any because

keep in mind that if you don't pass the

ID how are you gonna know which item you

want to remove I mean remove item okay

but which one

so you can set up the condition you can

even return a state but it's not going

to make sense if you don't have access

to that specific ID

and you can pass it like so ID equals to

NAD however the convention is to call

this property a payload

set it equal to an object even though

you're passing in one property yep set

it up as an object and then pass the ID

the name whatever so let me just

showcase the

could mention we go with payload that's

our second property it is an object yep

and then in here we go with ID and then

equals to an ID

so now let's navigate up

and in the reducer right after reset

list

I want to come up with another condition

I'll say if action type and in this case

I'm looking for remove item if that is

the case what do I want to do well first

let's just start by returning a state

and I want to showcase where we have

that ID right now so I'm going to go log

and then I'm just going to look for

Action let me save and then you can

click on any of them and check it out

you'll see here remove item and then

you'll see the payload so in order to

grab that ID what do we need to do well

first of all my spelling and notice this

is even with the extension so just

imagine how well air quotes I'm doing

without it so this is a payload my bad

and let me save it again basically we

want to go with payload and then Dot

and then the ID that's what we have to

do so type is remove item and then they

payload over here

so now let's navigate to that condition

and the setup is going to be pretty much

the same I'm gonna go with people filter

right so of course I'll have to access

it using state I'm going to get back to

new people and in here instead of ID

I'll say action payload and ID and of

course I can destructure it so let me

take this one up there's no need to set

it from the scratch again the difference

right now is that

people is in a state

so we go here with state DOT people and

the second thing this ID is located in

the action dot payload Dot and then the

Eddy and like I just said before of

course you can destructure it above you

can look for ID which is located in the

action payload and as far as what we're

returning well instead of State we're

going to go with dot dot state so we

return all of the properties and then

let's set people

equal to our new array which is going to

be new people

and that's it that's all we have to do

now again let's be clear we have a bunch

of things in here

doesn't look like I have any more logs

pretty sure I can remove this one and

our functionality should work check it

out I have the list I can clear it I can

reset and I can move them one by one we

get to an empty array and we set it back

to I believe four items okay and lastly

in the use reducer section I want to

show you

the approach we use as our application

grows basically

as we're getting more and more actions

and we handle them in the reducer

it's not going to be

easy to keep it in one file as you can

see it's getting hard to read and

therefore we just essentially split it

up of course in our case we have only

three actions

so this is only going to make sense if

you're getting more actions but still

the structure is going to be exactly the

same and if you want you can work on it

yourself essentially create a new file

I'm going to call this actions JS and in

this case since we're not going to be

creating a component we can get away

with just JS I think this is too much

and then you want to set up all the

actions from the use reducer in there

and you want to export them

and of course you want to import them in

the user Edition since you'll still need

to use them you just want to keep them

in a separate place and as soon as this

is not reducer this is actions like so

then you also want to do the same thing

with the reducer

copy and paste the logic in that file

and then keep in mind that you'll still

need an actions

so yes you'll have import for actions in

two places in use reducer as well as the

reducer JS and then lastly from the

reducer JS export reducer and then

import it in the use reducer

so let's get cracking I'm gonna go with

new file I'll call this actions Js

beautiful

and then the second one is going to be

reducer JS as far as the actions I think

it's going to be more straightforward

where in the reducer I just want to grab

them here

copy and paste and we simply want to add

those exports

since we'll use them in the use reducer

as well as the reducer so now if we go

back

to a use reducer

we want to go above the default state

remember we have a bunch of things right

now coming from the file and one by one

we can just access them so clear list

first one then reset

list and then lastly we have remove item

so all of them are coming from the

actions and if everything is correct

then the functionality is still going to

work so that's the first step we

separate the actions now let's do the

same thing with reducer and just so we

can speed this up I can tell you right

away that we'll need those actions in

the reducer so copy and paste yep that's

going to be the setup pretty much for

every action that you have you'll need

to import it most likely in two places

where you dispatch it and also in the

reducer that's quite typical setup

so let's go with our reducer right now

take this one out

copy and paste and then we want to

export so export default

and then reducer beautiful let's save

that and then back in the user educer we

also want to import the reducer and I'm

gonna try to do the Auto Import let's

see whether that works yep so I can

nicely grab my reducer and like I just

said if everything still works

which by the way it doesn't data is not

defined ah you see something really

interesting that I forgot to mention of

course we also want to grab the data in

the reducer right now since we're using

it over here so let me add that one to a

readme

where I have the reducer import actions

import data

so let's go back to I guess user user

first let's copy this one since it's in

the same folder we don't need to change

the path

simply you want to copy and paste and

now everything should work so let's try

this one out

I can clear I can reset and I can remove

them one by one

so those are the fundamentals of user

reducer and now you're ready to move on

to the next topic okay and up next let's

see how we can test and improve the

performance of our react applications

now before we begin few disclaimers

react as fast by default so all the

techniques we're going to discuss in the

following videos

make way more sense when you are working

on a bigger application not a small

to-do list type of application

also please keep in mind that I

purposely picked simple

and straightforward examples just so we

can spend all of our time and energy on

the performance topics okay and at the

very beginning of our react performance

Journey let's see what exact issue we're

trying to solve so first in the app jsx

navigate to this folder so tutorial 11

performance starter 0 1 and Lower State

and once you get there you'll see that

it's pretty typical application I have

here index GSX this is where

my components meet in this case it's

just a list and also there's a person

component now in the

index.jsx I have two State values one is

people

which is using data which is coming from

our data file as the default one

and I also have the count

and the initial value is zero so at top

I have the button and below it I have a

list component where I'm passing the

people prop

you can probably already guess that in a

list I'm just going to iterate over it

and return a person component and in a

person component I simply render a name

and in here I have a console log that's

it I mean it's not a magical application

so here's what I want to show you though

what's really interesting that every

time I will click on a button and I'll

increase the count

my person component will re-render so at

the moment you're looking at the console

you can see okay I have four renders

well that makes sense I have four people

in the array I can clearly see that on

the screen

however what we probably don't expect is

this notice every time I click

I'm getting more renders now is it the

end of the world in this application

absolutely not again these are just

example applications where we're trying

to take a look at the issue and what

Solutions we have however

in a bigger application if you have a

component tree of

whatever 60 components yeah that is an

issue if you're basically re-rendering

for nothing you're just changing one

value here in the Lower State component

and then

your entire tree

constantly just re-renders now before we

take a look at the tools and solutions

and all that let's discuss why is that

happening so if we navigate back to a

readme file you'll see that

when we covered re-renders I mentioned

this

component re-renders when the state

or props change correct

but if you take a look at the setup

right now you

are probably wondering okay but nothing

changes over here so the people stay the

same as well as the person stays the

same right whatever I'm passing in the

list

it's not changing it's pretty much the

same thing I'm just passing in that

person object

so there's another reason why components

re-render and that is when the parent

element re-renders so what's happening

here in the index.jsx every time

we update the count what do we do we

trigger re-render correct we cover that

when we talked about use State the set

function

and what happens

the list which is a child also

re-renders

once the list re-renders what's

happening with person component it also

re-renders

and before we

take a look at the tools

let me also quickly cover something that

has been popping up

in a course q a and essential is this

setting up a use effect is not going to

solve our issue so let me navigate here

notice this use effect

let me

save and refresh yep I have now two

console logs four for render and four

for this log inside of the user effect

and technically as I'm clicking I only

see the render however

this doesn't stop the component from

re-rendering essentially the only thing

we're doing we're invoking whatever

functionality we have here in the user

effect when the initial render takes

place

but

the component itself still keeps

re-rendering

so yes it's a solution if you have some

kind of function that you don't wanna

trigger each and every time the

component re-renders however it's not

going to solve the issue of person

component re-rendering just because the

parent component re-rendered and if you

still don't believe me in the next video

we'll cover tools and then you'll

definitely see what I'm talking about

and before we take a look at our first

solution let's see how we can utilize

react Dev tools to measure the

performance of our application needless

to say that my assumption is that you

already have installed the react Dev

tools so if you haven't yet please

reference the react fundamentals part

where I covered the install

step by step and once we install the

tools we'll get these nice tabs

in the devtools the components and the

profiler and throughout the course we

have been looking at the components

however in this section we'll spend a

lot of time in the profile and before we

navigate to the profiler let's also

discuss something very important if I

navigate through my extensions

while I'm developing I can see that the

react developer tools have that red icon

and once I click on it notice it right

away tells me that the page is using

development build of react and something

important to keep in mind

by default while we're developing our

application is going to be slower

because react is doing

extra checks so don't be surprised if

your development application is slower

again that is happening for a reason and

that is happening by default so for

example if I navigate to one of the

projects we worked on during the course

and notice this is a hosted URL and if

I'll check I'll see that this one is

actually blue and this is also something

very important to keep in mind you don't

want to ship your development

application to production

so you don't want to host your

development application

well I will because it's not meant for

production

so whenever you want to push this up to

production make sure that is actual

production ready application hopefully I

make myself clear and once we navigate

back

now let's go to a profiler and before we

even look at anything let me just show

you my setup so we're all on the same

page so once I click over here notice as

far as the general

I'm using the Dark theme but of course

you can switch to light or Auto or

whatever

then as far as density I went with

comfortable I just like that they're

spanning all across and this one is very

Nifty this checkbox and you'll see in a

second why basically every time I'll do

something it's just gonna highlight the

components that are re-rendering then we

have debugging in here I have first two

check boxes and then when it comes to

components I'm just expanding the tree

by default and I don't think I changed

anything in here I have this setup and

then for the profiler I just have record

y each component rendered while

profiling and essentially if we want to

take a look what's happening in our

application we just go to this button

notice the start profiling it's going to

turn red and then start doing something

in the application and like I mentioned

before

I like that option where it highlights

pretty much

all the components that are re-rendering

and

I'm going to use this ranked I just

prefer this setup better but of course

you can also use this one

and effectively you can see that okay my

application loads right I expect all of

them to render then on every button

click notice all of my components

re-rendered and it even nicely tells me

why the parent component rendered

so what happens

all the items in my list are

re-rendering pretty much I clicked 13

times and same scenario now of course

the times are going to be different and

all that but that's not the main point

the main point is

that all my components are re-rendering

just because I'm changing one value in

the state and in the upcoming videos

we'll cover possible solutions to such

problem okay and what's our first

possible solution well we can lower the

state

in other words

I could just move the state variable as

well as the button to a separate

component let's think about it do we

really need this count over here in the

Lower State I mean I'm just showing it

in a button

so simply I could create a different

component let's call it counter move all

of the logic over there

and then

just import that in the Lower State and

as a result yes we will be updating that

state value but that is not going to

trigger re-renders in the Lower State so

let's try this one out when navigate to

the star we want to create a new file

and we'll call this counter jsx and once

I'm here I'm just going to create that

new component and then basically we want

to jump back to index.jsx and grab the

values I guess let's start with our

return and in this case I can just cut

everything out but that is not going to

be the case with the import so make sure

that you leave that use stately imported

because in the index we're still using

it correct so this one just copy

let me set it up above the counter

let's go over here copy and paste and

then in here I just want to grab this

count one

so this one again we're cutting it out

set it up over here in the counter and

then lastly we wanna

go back to the index and we want to set

up that counter component so counter

component let's save that and now let's

use the dev tools that we covered in the

previous video so now let me navigate

back Let me refresh

that's always a good starting point and

then let me again record notice I'm

starting profiling and I can right away

see that only my box

is being highlighted which essentially

is a good thing that means that only

this counter component is re-rendering

our not the rest of the list so now let

me stop over here and notice all this

time only the counter is rendering right

so that's my initial render and then all

of these times I'm clicking on a button

only the counter is basically

re-rendering why well because State

change notice

why this rendered well hook one changed

which effectively is our name now

million dollar question are you going to

be able to do that in all the instances

of course not

but this is definitely something I want

you to consider before you grab the

memos and use callbacks and all that

they're going to be instances where you

can simply just split up the logic

so instead of jamming everything in one

component and then having those

unnecessary re-renders essentially the

moment you move

the logic to a separate component that's

not going to be the case anymore so

notice now I only have 400 and I still

have of course the use effect code so

that's the first solution to our issue

we can simply lower the state right so

we can just set up separate component

and add all of the logic in there so

that way we're not going to be

triggering these unnecessary re-renders

okay and once we're familiar with the

concept now let's work on a small

challenge so first in the app jsx change

the folder so now you wanna get the

starter from the second one and once you

navigate there you'll see that there is

index.jsx there's also a list so the

same deal and the person

now the logic works just fine if I go

here and say Bob it's going to be nicely

added to the list or notice as I'm

typing stuff in the input all of my

components again are having that

flashing border around them why well

because we are re-rendering those

components so I want you to fix that

just like we covered in the previous

video so navigate to

index.jsx and the side

what do you need to move to a separate

component to avoid this issue and I can

give you a tiny hint once you set up the

entire functionality you'll also need to

fix the ad person so that's the only

place where you'll actually have to

change your functionality a little bit

so try working on that and then once

you're ready to compare the results

resume with the video

so first let me just navigate over there

that's my index let me just double check

that's the correct index one

and once we're here let's just establish

why is this happening well I have the

Forum correct I have the value and on

change and in there

I have a name State value

so every time I'm going to be updating

that state value

I will trigger what a re-render

so what happens with a list and a person

they also get re-rendered so first we

always need to look what is causing the

issue in this case it is the name one

now million dollar question can remove

name into a separate component basically

can I set up a form in a separate

component and of course the answer is

yes

I'll just have to move some

functionality as well

and lastly I will have to pass in the

add person down to a form so this one

we still want to keep it here because

we're working with the list

however we'll have to provide a

parameter because add person won't have

access to the name State value and

you'll see in a second what I mean so

first we find what is causing the issue

it's this name State value and now we

just want to set it up in a separate

component

so let's navigate here I'm going to go

with new file we want to go with form

jsx

then here let's create that component

that's my Forum I'm exporting all that

is awesome and then one by one let's

grab everything that we need so I'll

start here with my return so we won't

need it over here cut it out

copy and paste in the form okay awesome

then as far as the logic

like I just said add person will stay

here

I mean I'm working with the list makes

sense for this function to be in the

Lower State component however I do want

to grab this one and I'll submit

and I also want to set up that state

value correct so let's cut this one out

and we will also need that use state so

back

in my index I just want to copy this one

so I will navigate here copy and paste

and now everything is nice now the only

thing that's missing is that add person

however like I already

said I believe two times now add person

does not have access to this name

anymore so what do we do well we just

pass it as a parameter we just say name

here that's it and you nicely saw how it

was crossed out essentially add person

doesn't have access to the name unless

we provide that as a parameter so in

here we want to go first with the form

so form component

like so we grab the form and we want to

add that person correct so add person is

equal to add person we pass the prop we

can save it here now it's going to

complain and all that don't worry about

it

back in the form

you want to grab add person and now

everything is fine we just need to pass

in the name so we go here with the name

that's it that's all we have to do and

essentially

I want to clean out my console now

notice how nicely as I'm typing only my

form lights up why well because we're

not triggering those re-renders anymore

that's it we're only working with the

form and of course once we submit yeah

of course we're updating the entire list

so there's going to be a re-render

that's exactly what we want so once we

create that new list I do want to

re-render the list as well as the person

but I don't want to do that while I'm

typing stuff in the input okay so we

know how we can push the state down

awesome

but it's not going to be possible in

every instance so there's going to be

times when yes you basically need to

have that state value

but you still wanna

avoid those re-renders

and in order to do that we can use a

react memo function now please don't

confuse it with use memo which we're

going to cover in few videos

essentially this is a memo function that

is coming from react I want you to start

by navigating to this folder so zero

three hooks in the app

jsx and essentially once you navigate

here you'll see that we have our first

example where as I'm clicking on a

button I'm increasing the count which in

turn

re-renders the component which in turn

re-renders the list as well as the

person component and if I need to have

this state value here there's nothing I

can do I cannot just move it to a

separate component we can

pass the component the list component in

this case through the memo one basically

we go and look at the tree of our

components and essentially you decide

that hey if I stop this list from

re-rendering

what's going to happen well the person

also won't re-render

and the way we do that we simply

navigate to a specific component in this

case again it's a list so you would look

at the component tree and then we want

to get that memo function from react

as with the rest of the functions we

have few flavors we can go the react dot

memo and then pass the component let me

add here component

so component here or I can just grab the

memo function and effectively

it returns a memoized component in

simple English it just means that now

the component will check whether the

props have changed and if they haven't

which again is happening right now with

our people the people prop is not

changing we're just re-rendering the

Lower State component and if that's the

case if the props haven't changed well

then the component won't re-render let

me go to a list

so now let me go above my list and I'm

going to go with memo and that is coming

from the react and effectively where we

have the export we simply want to wrap

the list

in the memo so essentially we invoke the

memo and we pass down the list

and as a result notice once I refresh

only the component the parent component

lights up because that's where we're

setting up those State values and if you

don't believe me let me navigate to the

bigger browser window I will refresh and

all that let's start from the scratch

and check it out notice over here I'm

increasing the count all of that is good

once I stop notice only the Lower State

we rendered so rest of them the list and

each person component they didn't

re-render because props did not change

so essentially lists stayed the same and

as a result we did not trigger those

unnecessary re-renders

okay and once we have established that

memo function is awesome

now let me throw you a mind grenade what

if we have a remove person function

and keep in mind

it totally makes sense

to set this function in this component

why well because the list is here

so let's set up this function remove

person

pretty much the logic is going to be

following we'll grab the ID and we'll

only

return items whose ID does not match and

then we'll set

the array the people are equal to that

new value and then we want to pass it

down because of course I want to invoke

it in the person component now in my

case I will copy and paste

since we have done that quite a few

times during the course I really don't

see the point of setting this up from

the scratch so let me go back to the

next copy and paste and then we want to

pass it down to a person like I said so

we're gonna go the remote person is

equal to remove person okay beautiful

then I'll copy and paste right away

because we want to do the same thing in

the list we just need to remember that

we need to structure it here as well of

course so remove person and then let me

save the index

and then back in the person I want to

actually grab two things

I want to grab the remove person

and I also want to grab the ID and then

right after the heading four I'm gonna

go with button I'm not gonna set up any

classes you can definitely do so if you

want I'm just gonna go with on click and

this is going to be equal to my arrow

function and here let's go with remove

person and let's pass in the ID

now everything is awesome and by the way

everything is not awesome because I did

forget to add some kind of value here

and I'll just say your room move so now

everything is awesome however we'll

probably notice something interesting

every time I'll click on remove

I'll be re-rendering so this is

something we expect okay we're changing

the list so of course it's going to

re-render okay but what about this

what about count

we have a memo right

so this shouldn't be happening

I mean we established in the previous

video

that memo is checking for those props

and if they haven't changed

well then the component doesn't

re-render

and we saw that in a previous video that

was the case however we add this

function and now even without going to

the performance tab I can clearly see

that these ones are also re-rendering

so why is that happening

you see memo is doing its job

everything is fine with the memo we

don't need to pass some kind of extra

argument or anything like that

the problem is this function

if you remember all the way back when we

covered them let me find this

use effect the first one code example

what did I say

I said that

this function

is going to be created from the scratch

correct and it's also going to be

invoked if you're invoking it here so

every time the component is going to

re-render two things are happening this

function gets created from the scratch

so in our case let's remove person and

in here we also invoked it now we're not

doing that in the

component here but we are creating this

function from scratch every time

the state gets updated

and here's the thing

as far as JavaScript is concerned

this prop has changed so every time we

click on Account button we re-render the

component correct

and every time we render

we create that function from the scratch

be a remove person

so now in the list component yes this

value is not changing this one pretty

much stays the same

so memo fix that however

when it comes to remove person

since it gets created from the scratch

each and every time

JavaScript things that yeah the prop

changed and we can actually go to a

devtools and we can see that so let me

first go to a profiler record and now

check it out I'll click I can clearly

see that they are rendering and we'll

nicely see that the reason for that is

because props changed

so notice it even says the remove person

changed that's why the list is

re-rendering even though it's the same

function

and therefore in the next video we'll

cover a huge callback hook which

actually helps us to solve this issue

okay so how we can fix this mind grenade

issue well we can use use callback hook

which in react allows us to memorize a

function or basically remember the

function it takes two arguments the

first one is the function you want to

memorize so of course in our case that

is going to be remove person and the

second one is the array of dependencies

and we're already familiar with array of

dependencies because we have worked with

it when we used use effect hook correct

so

it only creates that function if the

value in dependency array changes

so for example if it's empty if it's

nothing there then of course it's only

going to create that function the first

time the component

renders basically when the initial Mount

takes place so let's try this one out

we're going to navigate to

index.js and as I know I suggest pausing

the video and try to set it up yourself

in the readme you can find the

syntax that you need to use just try to

implement this in our component and

effectively we want to grab the hook

it's called euge callback and then where

we have the function

now I want to pass this function into a

used callback so that's going to be my

first argument and the second one is

going to be that dependency array so

first let me navigate here let me push

this one down and also use callback and

first I'll just pass empty dependency

array just so you can see one major

gotcha

so now this is empty now this is

happening only

when the component mounts let me cut

this one out and we pass this one in so

it still removes the person all of that

is good

is just now we're creating it

only once only the first time when the

component renders so now check it out

once I click count I don't have those

unnecessary re-randers and we can

actually double check that if we again

navigate to the profiler

record

over here looks like I need to refresh

yep I start recording and notice

only the component re-renders not the

person one so let me stop it over here

and check it out everything is awesome

however

I said that there's a gotcha so

everything is beautiful use callback

creates this function only once but

you'll notice that our functionality

doesn't quite work

notice I basically removed one person

after that I get stuck and just keep

flipping these values and the reason for

that is following you see when we create

this function

basically

this is the list that we're working with

so once we remove that first person we

actually change that value correct

initial Aid was 4 and now it's three

but we still keep using that old value

and I think it's going to be

very useful if we log it so let me go

with console.log and let me set up

people and you'll see what I'm talking

about so let me refresh over here

function gets created okay I don't see

anything because I'm not invoking it but

check it out once I click I have four

items over here right but then the next

time I still have the four items and

that's where the issue is functionality

is not going to work because pretty much

all the time just working with the

initial array but since we're moving

items of course

our array is changing the people State

value so long story short this is why we

want to pass the people as dependency so

pretty much every time

will change the people array we also

want to generate this function from the

scratch so there's going to be instances

where you just create this once

basically you'll have empty dependence

here and yes there's going to be

instances where you do need to provide

some various independency array

otherwise as you can see our

functionality went bananas so now let me

save and let's test it out notice our

functionality works and yes we do

re-render the

person that's totally expected because

we're actually updating the people State

value however

the person is not going to be

re-rendering

if we're clicking on account so now

notice as I'm clicking on account

everything stays the same and if you

still don't believe me

we can go back to our favorite profiler

record

and check it out I only have that main

component over here I won't have the

person re-rendering just because I'm

updating the account value again we did

that with use callback hook which takes

two arguments first we want to pass in

the function we want to memorize or

essentially remember and then the second

one is the dependency all right okay and

once we're familiar with use callback

hook

now let's see a pretty typical use case

for it and for that we're actually going

to navigate away

from the performance one

and we're looking for the final one in

the use effect technically this video is

optional if you're not interested you

can just watch and don't switch the

directories so essentially remember when

we fetch the users in the user fact zero

four fetch data I did mention that

essentially we don't want to set the

fetch data outside of the use effect

and then pass it in dependency array

which Veet doesn't complain about but if

you're working with create react app

you'll see this es lint warning now I'm

not going to place it in dependency

array because I don't wanna

basically run out of my requests however

I will cut this one out from the use

effect let me copy and paste so that's

my fetch data

notice once I run everything is still

awesome everything still works but like

I just said normally with create react

app you'll get that warning in the

console now that is not an error but it

is a warning

the reason why we don't want to pass

fetch data directly in the user effect

same deal because this one gets created

from the scratch so essentially you'll

have that influent Loop however since

now we know how to work with use

callback here's what we can do

I can go here with comma use callback

and essentially just set up this

functionality over here

so let's try this one out I'm going to

go to use callback in this case it's an

empty dependency array so I don't want

to pass anything in here cut this one

copy and paste and we're good to go let

me save it notice the functionality

still works

and in this case I can nicely add fetch

data to dependency array because now

this fetch data will only be generated

once

when the component mounts during the

initial render and while we're on a

topic of news callback why don't we also

cover use memo which is very similar the

difference is that use memo memorizes

the value that we're getting back from

the function so essentially again it

remembers that value now in this example

I'll just show you with slow function

but later on of course we'll use it to

debounce some functionality so in one of

the complex projects essentially there's

going to be a input and we'll use use

memo to the bounce some functionality

basically to run some functionality

later now why am I telling you that just

so you don't think that we can only use

for the example I'm about to show you so

use memoize is actually very cool you

can do a bunch of interesting stuff

again in our case we'll just take a look

look at the slow function example so

the way use memo works is very similar

to use callback we get use memo and then

again notice

it's looking for two arguments first one

is going to be the function however in

this case we're returning something from

the function

and then the second one is going to be

the dependency array now in our case in

our example we won't have any values in

dependency array it's only going to run

once now as far as our example

let's imagine that in our project

we have some kind of slow function

that's doing some kind of calculation

now I will simulate that by setting up a

very ugly for Loop so please don't judge

me on this one so essentially let's

create a function I'll call this slow

function.js in there set up this

function again simply there's a value

that I'm setting up a for Loop which I

haven't done probably in four years or

so and then once I'm done with this long

for loop I just return a value

effectively it's just going to take

quite some time to generate that value

so this function returns a value and in

the index I want to import the slow

function I want to invoke it and I want

to set it equal to value and you'll see

the result so let's navigate to the

hooks like I said in my case I'll call

this slow function and as I said if you

don't want to work on this example you

don't have to you can just see the

result and I'm pretty sure you'll get

the main gist of use memo so let's go to

tutorial let me grab this I don't think

there's a need to create it from the

scratch

now I want to make sure that I'm going

to start

yep that's my function then we want to

navigate back to index we want to import

that function and I'm going to rely on

Auto Import and I'll right away set it

equal to a value so say value is equal

to and then slow function yep we invoke

it we don't need to pass anything and I

simply want to log the value

so let me go with console log

and we're looking for the value let me

save and again same deal

pretty much every time I'll click on

account

it's gonna take

time for my component to render you'll

see that it's definitely slower

if you would have for example some kind

of input and if you're typing it's going

to be with delay

so let me just showcase that I'm going

to go to button and I'll click like six

seven times

and you'll notice that the value is not

updating right away why well because

again we're changing the state value we

are re-rendering and what do we do in

each render we run this slow function

and since our slow function is really

slow well that's why it takes ages for

me to see that count of nine and this is

where the use memo hook can definitely

help us again the syntax is extremely

similar to use callback we can go with

use memo we import the hook and now I

wanna

set up this slow function in the used

memo and as a result you'll see that the

slow function is only going to run once

when our initial render takes place so

let's go to user memo again two

arguments in this case I'll pass in

empty dependency array then

I wanna grab my slow function but again

this needs to return a value so let me

cut this one out I'll pass here the

arrow function like so and then we'll

invoke slow function and now you'll

notice that once we refresh yep the

initial render takes a little bit of

time but after that everything's cool

so unless I provide some kind of value

in this dependency array

this initial value the one that takes

really long time

for the slow function to calculate

it's only going to run once

I'm only going to get that value on

initial render and that's it since the

value is not changing essentially I'm

not slowing down my component every time

a state update takes place with react 18

we also got use transition hook

which we can use to treat some

functionality as less urgent so imagine

this scenario in your app

there is some kind of user interaction

which triggers some heavy computation

for example user types something in the

input and based on the input value you

filter I don't know 20 000 items

here's the thing while the computation

is taking place it will actually block

the UI

basically our app will be less

responsive and as you can imagine that's

not a good thing ask yourself

as a user what's more annoying waiting

for some data to arrive or tirelessly

clicking on the button

so use transition just allows us to Mark

certain functionality as less urgent

which in turn prevents the whole UI

blocking thing

with that said like I already mentioned

before react is Fast by default

so even though this is a very cool

addition to the library it has very

specific use cases and most likely it's

not something you'll use immediately in

all your applications and once we're

familiar with the general concept now

let's take it out for a test drive

in this video we will heavily rely on

array Dot from method so if you're not

familiar with it or you need to jog your

memory please utilize this JavaScript

nuggets video where I cover everything

in great detail

as far as the location in the app.jsx we

want to grab the starter

from zero four react 18. again zero for

react 18. this is what we should see on

the screen basically there's going to be

an input and we'll have some items below

and if we navigate to the file

you'll see that I have two State values

I have one for text so that's for the

input and I also have one for items

which initially is just empty array so

in here I have the form everything is

awesome I have the handle change I also

have heading 4 right below the form so

this is where we are displaying the

items at the moment they're empty

there's nothing there and as far as

handle change well I have set text I'm

just grabbing the value all of this is

awesome

however let's imagine that

I attempt to do something very

interesting

first I'll create new items

using array.com and I want to construct

a very big array therefore I provide

here an object with a length property of

5

000 and then the second one is the

Callback function which gets invoked for

every item now I don't care about the

actual item I do care about the index

and yes this is the case where I'll

cheat a little bit and I'll set up the

key as the index

now inside of it I also want to return

an image

which essentially is that nice and cute

wheat SVG

so remember the public folder I talked

about at the very very beginning in

react fundamentals since it's in the

public I can just go forward slash and

beat SVG then once I create that array

the 5000 items basically just a bunch of

wheat SVG images I want to set it equal

to my new items and if everything is

still fast we can also slow down the CPU

because it's one thing to work in

development with a fast computer but

it's totally different if you're

somewhere out there with Spotty Wi-Fi

struggling with I don't know iPhone 3 or

whatever so the way we can slow down the

CPU so again we're not talking about the

network we can also do it with a network

in this case I want to slow down the CPU

we go with performant insights let me

make this sucker bigger

and then notice here it says no

throttling I can actually go with CPU

and I can make it I don't know four

times slower something along those lines

now let me make this one again smaller

and you'll notice something interesting

since I'm running this pretty much on

every keystroke

you'll actually notice that my input is

going to be somewhat slow so I haven't

saved the file yet so notice I can

nicely type and everything is awesome

however the moment I save the file and

the moment I create those 5 000 items

every time user

presses something in the input you'll

right away notice that it's very slow so

I typed few characters and notice how

long it took for them to show on screen

and it's going to be a little bit faster

once we already have all the items and

all that since of course we're not

changing the path but hopefully you can

see the issue

so we need to somehow fix this where I

still want a fast response here in the

input

and then this one the new items well

that can happen in the background so

let's try this one out where I want to

go to import and I want to grab use and

then transition so that's the hook I'm

looking for then I want to go right

after the items and I want to invoke it

and it's getting back to you things

it's getting back is bending and the

start transition

so the slow function this one over here

or functionality

maybe be more precise we want to place

that in the start transition and then is

pending we'll use

effectively to Showcase that something

has happened so we're gonna go here with

const and then is and pending

and then comma and we'll say start

transition now like I said that is equal

to my use transition and I think

I'll make this one smaller it's somewhat

annoying here so yep we invoke them then

let's go to a handle change

and let's set up that start transition

and now let's pass both of these things

inside of it now we do need to set up

the function here first

so let's do that let's grab these two

suckers so the

array with 5000 items and the set new

items good and now let's scroll down a

little bit and where we have the items I

actually want to look for the is pending

the value of spending and then if we're

loading basically if it's true then

we'll display loading dot dot and once

we're good to go then we'll display the

items so right before D heading four

let's open up the curlies I'll go with

is pending and I'm gonna go with the new

operator so if it's true what do I want

to showcase let me go here with heading

four and then loading dot okay awesome

and then if it's false basically once

we're done then we want to display those

items so let me cut this one out copy

and paste and once I save you'll notice

something interesting that now the

response in the input is going to be

much faster and notice we have this

loading so essentially something we want

to keep fast which is the response to

our user

is still going to happen fast however

the slow functionality

is going to happen in the background

okay and now let's see how we can do

code splitting in react

which in turn will allow us to

progressively load or lazy load our

application

before we take a look at the code let's

discuss the main benefits of such

approach first

improve performance by splitting up a

code into smaller more manageable chunks

we can reduce the size of the initial

JavaScript payload that needs to be

loaded this results in Faster load times

and improved performance especially on

slow networks or low end devices

second better user experience

with code splitting only the essential

code needed for the initial render of

your application is loaded the remaining

code is loaded as the user interacts

with your application

leading to a smoother less blocking user

experience

you see especially when it comes to

bigger projects not all the pages and

components are equal

meaning there are certain resources that

are used More Often by the users for

example typically

which page do you think gets more

traffic

the homepage or the contact page

so million dollar question

if some resources are used less often

than the other ones does it make sense

to jam all of that code when we

initially ship our application to the

browser because keep in mind the more

code we send

the more time it will take for the

browser to compile it which in turn will

affect how fast the user can interact

with our application

so wouldn't it be nice if we could

prioritize the important resources over

the less important ones

in order to Lazy load our components or

progressively load our application we'll

use a tool called suspense now suspense

is a series of apis and it actually has

been around for quite some time but at

this point in time only the code

splitting feature which we're about to

cover is fully supported other ones are

still experimental including data

fetching and therefore we won't discuss

them at this time lastly in our example

we'll progressively load a big component

when the user clicks the button

however a more realistic scenario is to

Lazy load our component when we have

multiple Pages which is something we'll

cover when we discuss routing in react

so this is just general info and we will

revisit this topic later on in the

course okay and now let's see suspense

in action

for that we want to navigate back to the

same folder

the zero four react 18. and notice over

there I created a slow component and

essentially the idea is going to be

exactly the same as in the previous

setup where I want to create 5000 items

remember those are images and then

in the component I'll use use State I'll

set this one up as default value and

essentially I just want to render them

on a screen so now I want to go back to

index.jsx

and effectively I'm not going to touch

any of this logic I just want to

showcase something

so I'm going to go below this is pending

and I'll just showcase the slow

component and as I said you know I'll

just refresh just so we don't have two

of them on the screen so still within a

section I want to go with slow component

let's save that we should eventually see

the component on the screen so let me

refresh notice it took a little bit of

time but eventually we see those 5000

items again the idea is exactly the same

this time we're not

getting them from the input

we are importing the component and of

course the reason why everything is

happening so slow is because I'm still

throttling the CPU now

what's also interesting

if I navigate to the bigger screen

you'll notice in the network tab

more specifically if we look for Js

since we are right away

displaying the slow component we are

also importing the JavaScript code

correct but what if we have a different

setup what if I create a state value

I'm going to call this show

and

set show and I'll set it equal to let's

say the default one will be false so

that's my Boolean value

then I'll set up a button that toggles

it so right above the component

I'm going to go with my button

I'll set up on click

let's invoke here

the set show so set show and we'll set

it equal to the opposite value whatever

it is in a state and let's just call

this toggle now in this case I do want

to add a class so class name is equal to

BTN

and then when it comes to slow component

I want to go to show

and only if the value is true I want to

display it

so let's go here

let's save again let me navigate to the

big screen

and notice

even though I'm displaying this

component only

when the value is true

I'm still importing

right out of the gate right so I'm still

grabbing that JavaScript logic even

though there's no guarantee that the

user will click the button

and essentially it would be better if we

only import this logic when we actually

need to display that component correct

so instead of importing everything on

our initial render which of course is

going to add the loading time we only

want to import that slow component when

the user actually wants to work with it

in this case clicks the toggle button so

how we can do that well we need to First

navigate up and we'll need to grab two

things we'll need to grab suspense

components so this is a component that

react provides and we also need to go

with lazy then we have this somewhat

interesting setup where we want to go

with const we need to come up with an

iron in my case it's still going to be

slow component and that is equal to lazy

so invoke this then we provide a

function and then we go with import so

as you can see now we're importing this

dynamically

so we go with forward slash and of

course the path is still the same so now

I want to remove this one the straight

up import and then let's keep on moving

and now we want to wrap

our component

in the suspense

and we also want to provide some kind of

fallback so I'm gonna go

and I'll wrap the slow component in the

suspense

component then pullback prop basically

what do we want to display when we're

loading and I'll just cheat I'll grab

this value over here

and after that we want to place the

slow component inside of the suspense

and now notice something interesting

when I navigate to the big screen and

refresh you won't see anywhere the

import for the slow component JavaScript

code

only once I click here notice then I'm

importing which again is really really

awesome because it allows us to decrease

our initial load time

since we're not grabbing all of the

JavaScript code and only if the user

decides to interact with the component

only then we import so essentially this

is how we can lazy load our components

or in other words we only import the

functionality when there is a need for

it One Last Thing Before I Let You Go

typically we will wrap our entire return

in suspense

since that way we can lazy load multiple

components

now the syntax and the result is the

same

we will still provide fallback prop and

for all of the components we import

progressively the fallback value in this

case the loading text will be displayed

the reason why I wrapped only the slow

component in the previous example was

just to underscore which component we'll

get that fallback value all right up

next let's cover what is Redux toolkit

and why it's so useful

you see when it comes to bigger

applications

especially

if they're built by a team of Developers

one of the biggest challenges is State

Management yes context API is very

useful tool but it clearly has its

limits especially when we talk about big

applications with tons of features

and in order to solve the issue over the

time various State Management libraries

have been introduced by the community

and without a doubt for very very very

long time one of the most popular state

libraries has been Redux now before we

continue let me stress something Redux

is not part of official react again

Redux is not part of official react even

though they are used together very often

now

even though Redux solves a lot of

problems it also introduces some new

headaches in short it requires bunch of

annoying boilerplate and manual setup

especially when it comes to Advanced

features since you'll need to install

more libraries and add some more config

setup which over time especially if you

have to do it for every project just

becomes annoying and this is where Redux

toolkit comes into play so creators of

Redux notice the general need for

opinionated approach while setting up

Redux applications and as a result they

came up with Redux toolkit which

effectively is Redux with batteries

basically it means that all the popular

extra libraries and setups are built in

and do not require extra setup

as a result there is no time consuming

setup

and over time it speeds up our workflow

tremendously

so with Redux toolkit we can have our

cake and eat it too meaning we get all

of the benefits of Redux without any of

the manual labor and as always we'll

start with extensive tutorial where

we'll cover all of the major building

blocks of Redux toolkit during tutorial

we'll build this card application and in

the process we'll see all of the cool

Redux toolkit features in action so

things like store slice reducers action

creators and of course create async

thunk which handles a synchronous

functionality in order to follow you

will need a star and you can find it in

this GitHub repo so look for my profile

Jones milgar and the actual repo name is

Redux toolkit tutorial then the name of

the repo that you're looking for is

Redux toolkit tutorial and once you get

here just pick the option that makes the

most sense to you

I think in my case I'm gonna go for

download zip option then

I want to crack it open

and in the folder you'll find two more

folders

the final as well as the starter and

needless to say that in the final one

you'll find the complete source code and

then in a star is where we'll do all of

our work so let me take this sucker out

let me open up

the text editor Visual Studio code

oh right away set it side by side now

this is a standard react application I

used create react app the only

difference is that I removed some

boilerplate code and I also add some

resources so in here what we want to do

is run npm install and also npm start so

npm install

and PM start and there is an app so at

the moment notice there's only having

two we have some car items which we'll

use in the beginning as our data and

also a few icons

I'll discuss them a little bit later

index CSS all our CSS and also of course

index.js so once you get the repo once

you get the star install all the

dependencies Run npm start you should

see in the browser they hear into with I

believe it was Redux toolkit and if you

do we're in good shape and we can

proceed to The Next Step a quick update

I upgraded this project to react 18.

which also means that in the index.js

you'll find create root method instead

of react Dom render

which was used when I recorded this

project

now let me be very clear

all of the upcoming content is still

valid and up to date

only few lines of code in the index.js

are different

since the latest react version uses

create root method instead of react Dom

render and yes in a few videos when we

set up Redux store

we still want to wrap the app component

in the provider just like I showcase

during the videos so again let me repeat

all of the upcoming content is still

valid and up to date the only difference

is the react version now this app uses

react 18. in the star you'll also find a

readme file where I laid out all the

steps we're going to take as well as

some useful links and first if you want

to find more info about Redux token you

can always utilize this link so this one

goes directly to their docs and we have

few ways that we can add Redux toolkit

to our project first we can go with

straight up template

so in that case instead of going npx

create react app and then the app name

we also add this hyphen hyphen and then

template and Redux now from my

experience they add way too much

boilerplate so essentially I always

avoid that and in general I just go with

the Redux toolkit so I set up the

application let's say with create react

app and then install the toolkit

separately and we do that with npm

install and then add Redux JS and then

forward slash toolkit and also We'll add

react Redux

and I'll talk about it in a second now

let me just quickly mention that if for

some reason

you get some issues when you just run

MPX create react app and again it's not

specific to this template one if

something goes bananas with npx you can

always try to go with create react app

and then the latest one so this is just

a side note now back to the toolkit so

when we install

reduxjs toolkit we actually install fuel

libraries so we install the Redux which

is going to be our core Library we also

install Emer which is going to allow us

to mutate the state we install Redux

thunk which will handle the async

actions and also we install reselect

which will simplify the reducer setup so

these things of course will only make

sense if you already have worked with

the Redux so this is already provided

for us and of course we'll see all of

those things in action and if you didn't

work with the Redux before don't worry

of course I will explain all of them and

also as an extra we get right away Redux

devtools and also combined reducers

right from the get-go again if you

haven't worked with Redux I totally

understand if none of those things make

sense but don't worry we'll talk about

them later now why we also install this

package the react Redux well you see

Redux can be used with any front-end

framework it's not specific to react in

order to connect our application to the

Redux this is where we'll use the

package by the name of react Redux now

needless to say that of course if you'll

take a look at the packages on

you will see the both packages you'll

see the toolkit as well as the react

Redux but just so you don't think that

there is some funny business going on

let me copy this line of code let me

install both packages and once the

install is complete we can start setting

up our Redux store so the install is

done we go with npm start and if we take

a look at the package Json you will find

the toolkit as well as react reduct and

with this in place now we can start

setting up our application with Redux

toolkit okay and once we have installed

all dependencies up next I want to set

up the store and you can think of store

as the entire state for your application

so remember previously we used context

API now in this case we'll use toolkit

and we'll set up the store and the

syntax is following where first we want

to create store.js somewhere in the

source we want to import configure store

function from the toolkit and yes in

order to speed this up I'll just

reference it as toolkit please keep in

mind that of course I'm talking about

the Redux token and then in this

function

we want to pass in the object and in the

object there is going to be a reducer

property which is going to be object

itself and then in here we'll set up our

features and I fully understand that I

mean this can look somewhat fuzzy don't

worry as we start setting up the

features you'll see everything in action

so for the time being just bear with me

and then once we have the store we want

to export that and this is the case

where you can export this as default

so the difference of course is just

export default and then the store or you

can go with name export and then we want

to go back to

index.js we want to import store from

the store file as well as the provider

from react Redux like I said this is the

library that connects Redux store or

Redux to our application and similarly

to context API

we want to wrap our entire application

so we're going to grab this provider

there's a store prop and we just want to

pass in the store coming from the store

file so let's get cracking first

I'm gonna go with store Js

in here let's import configure store so

import we're looking for configure store

notice right away I have suggestion for

that and then let's set up that store

like I said at the moment it might look

somewhat funky the moment we'll set up

some features it will make sense so

let's go here with const and of course

I'm adding export as well I'm going to

store that is equal to configure store

let's pass in the object let's set up

the reducer is an object itself and for

time being it's going to be empty and

most likely we'll get the warning in a

console don't worry about it again

all of this functionality is coming up

and then let's navigate to index.js

Let's import both of the things let's go

with import then store

um this is coming from the store file of

course and also we want to get that

provider so import and then we're

looking for provider now that is coming

from react Redux and now let's wrap our

entire application so let's say provider

here let's close it out let's wrap our

app and then we want to set up a store

prop and we want to set it equal to our

store

and if nothing breaks we are heading in

the right direction so then we can set

up the slice again like I said

if you see this warning don't worry

we'll fix it in a second beautiful and

once we have the store in place now

let's set up the slice and I fully

understand that this name is totally

funky you're like what slice are you

talking about and I want you to think of

slice as the feature of your application

so if we take a look at the complete

project you'll notice that yes we have

the card functionality

but we also have the model

and you can think of it as two features

our application so we have one feature

for the model and the second one is

going to be for our card and of course

the bigger our application

the more features we're going to have

and in the Redux toolkit land it is

called slice now in order to set up

slice a common convention is to set up

features folder but of course naming is

always up to you but then whatever is

going to be the name of the feature so

in my case it's going to be card that's

why I'll set up a card folder and then

we want to set up a file again like I

keep mentioning the naming is up to you

but again typically you'll go with

whatever feature and then slice JS now

in there

you'll want to get create slash and

don't worry about this one that create

async thunk let's say not I'll remove it

worry about that later and then we want

to invoke that function create slash we

want to give it a name again it's

totally up to you but in my case I'm

going to go with card and then we have

initial State Property

where we just set up whatever state we

want in my case I'll set it up as a

separate object and in here I'm going to

go with cart items with an amount so how

many items I have in a cart what is the

card total both of them zero and then is

loading true because eventually we will

load this from the API then I'll log the

sucker

the card slice and in there we'll have

the reducer and of course I'll talk

about this one a little bit later once

we get there and eventually what we want

to do is in the store we want to import

cart reducer so that's going to be the

function that controls this state in our

slides so think of our application we'll

just split up the functionality where

this slice is just responsible for the

cart and this reducer specifically is

going to modify it whatever

functionality we set up and then in that

reducer that we set up in the last video

notice there's a complaint that there's

no valve reducer now we want to set up a

key now key name is really up to you

just like everything else and I know

that you're probably sick of hearing

this but I just want to make this clear

where this is totally up to you you can

call this banana pudding if you want

just remember that later once we start

setting up our functionality yes of

course we'll have to access this name so

therefore I'm going to go with cart and

I want to set it equal to reducer so the

function that we'll have access to

and a function that will allow us to

control this

piece of State for this specific

functionality hopefully this is clear so

now let's go to Source we want to create

new folder like I said common convention

we'll call this features so features our

application in our case cart and model

then let's create another folder and

we're gonna go here with cart then

inside of the cart let's go with new

file and we're gonna go with cart slice

Js so once we're here we want to import

we want to import and we'll say create

and slice now for some reason it does

not oh yep it does so I have the

suggestion and let's right away invoke

it I'm going to call this const card

and slice and that is equal to create

slice

it's a function we pass in the object

and here we can set up a bunch of

properties

so first we want to set up the name

so I'm gonna go here with card then we

want to go with that initial State this

is the case since I have more properties

might as well set it up as a separate

object so let's set up here initial

state

and then we'll add card items which

initially is going to be empty array but

then we'll take a look at multiple

approaches to local data and then the

data coming from the API I also want to

go with amount so how many items I have

in the cart and Please be aware that I'm

not just talking about the products I

have in my card I'm actually

looking for the item count

so how many items of that specific

product I have and this is going to be

that amount hopefully that is clear then

we want to go with total so Total Money

both of them zero initially and that is

loading because eventually we'll pull

this from the API so that's going to be

our initial State once we save notice

right away

initial studio in here references the

initial property then we want to log

this sucker and we want to quickly

import install.js now in a second we'll

do more proper setup I just want to

showcase what we have in the card slice

so let me save it then I'll navigate

back to the store and for time being

let's just import the entire file like I

said more proper setup is coming let's

just go here with the features

red card and then card slice and once we

import of course we right away invoke

the file and here we'll see that console

log so we'll have some actions here

something that we'll discuss a little

bit later once we set up some reducers

we have case reducers again something we

don't need to worry about right now get

initial State again a function that gets

the state name and then notice all the

way in the bottom we have that reducer

so this reducer

is the one that is going to control that

state in this slice that's why we want

to export that we want to export this

and in the store we want to come up with

a key and set it equal to that reducer

so let's try this out I'm going to go

with cart then instead of just getting

the file I'll actually look for that

reducer but I'll set it up as a default

one so for time being I'll comment this

one out we'll come back to this one

because again we'll talk about these

actions eventually and now I just want

to export that reducer now there's

Million Ways How we can export Us in

this case I'm going to go export default

and then cart slice dot reducer again

this is an object and this is a property

so let's export this event in the store

we wanna import so I'm gonna go with

cart not slice but reducer again if you

want to name this differently of course

you can and then we're going with from

and now go with cart equals to card

reducer and we shouldn't see any error

messages anymore because now we have the

proper set up so now we can take a look

how we can access the data first from

that initial State and then of course

eventually also take a look at how we

can set up functionality to control this

but our first step is going to be

accessing this data okay and before we

go any further let's also quickly

install Redux devtools and the good news

is that as far as the code we don't need

to add any configuration basically the

moment we install Redux toolkit we're

good to go however when it comes to

browser we do need to install extra

extension and the extension you're

looking for is this one Redux Dev tools

and in the Chrome if you want to install

extension just go to your extensions

and then more specifically look for open

Chrome web store and then in here look

for the Redux one not the Red X 4K

apologies Redux so this is the extension

you're looking for and once you do that

let me open this up in the big browser

so that's my localhost 3000

you'll notice a tab it Redux Tab and

here we'll be able to find bunch of

useful info now at the moment

I mean we have a clean application we

only have the state but yes eventually

once we set up the reducers the actions

and all that yes this is going to be a

very useful tool now at the moment the

only thing that I want to showcase that

this is our state notice that's my card

card items amount total and is loading

and yes of course

in our store

once we add more reducers

all of them will meet over here and

that's why this tool is very useful

because as will dispatch our actions

we'll clearly see how our state changes

beautiful and once we have set up

the Redux details up next let's see how

we can access that initial state in any

of the components

so we have the initial state in the

slice

and let's say that I want to set up a

navbar component where I want to access

the amount

and the setup is following where we do

want to create the components folder

then navbar.js and in there we'll import

cart icon so that's the component that's

coming from the icons folder and I'll

discuss how we can set up the component

e in the following video because at the

moment I do want to focus on the state

value access and then we want to import

use selector so that's a hook coming

from react reduction

and then in the navbar component before

the return we want to invoke use

selector and the selector is looking for

one thing it's looking for the function

and as a parameter we get access to the

entire state so we're talking about the

entire store

again in our case we just have the card

but eventually we'll add more reducers

over here so since this is a parameter

of course we can call it whatever we

want so you'll see probably state but

actually my preference is to call this a

store because that signals to me that

that is entire store so the entire state

of my application and then more

specifically I'm looking for DOT card

wire

because that's the name of the property

over here and then initial state if you

remember we do have the amount property

and of course there's Million Ways How

we can set this up for example we can

just return from this function this

amount or since in this case we're

returning the entire object we can to

structure it so let's try to set this up

where in the source I want to create a

new folder and I'm going to call this

components over here then let's set up

that nav bar

nav bar JS in here

like I said first let's import card icon

something I'm going to discuss in the

following video then we also want to get

that U selector

so let's say use

selector hook that is coming from react

Redux and now let's set up that navbar

component so I'm going to use my

extension I'll set up the number and

first let's set up the return and then

we'll worry about the actual state so

let's say here nav I do want to add here

a div so inside of the div let's go or

I'm sorry inside of the nav let's go

with there let's add a class name of nav

Center and here we want to go with

heading 3 Redux toolkit

and after that let's save it and we

don't see anything so let me refresh

don't see anything in the browser and of

course the reason for that is because I

didn't import in the object so let me go

back

and in the app.js let's import the nav

bar

and then let's set it up over here

so what I want to do as far as the

return in app.js

I just want to go with Main and then the

number so instead of the heading to

index toolkit we'll go with main tags

and then first we'll set up the nav bar

and then we'll set up rest of the card

items as well so that should be our

number okay that's awesome

and as far as the other stuff

I think I'm gonna go here

with a card icon but that is going to be

placed in the nav container so right

after this heading three I'm gonna go

with div the class of nav container and

here let's set up that cart icon yep

that is how it's going to look like and

then let's go with div the class of

amount

container and then paragraph with a

class of total total hyphen

and amount and at the moment let's just

place a zero here let's save this and

now let's see how we can access the

entire state of our application so first

let's just log the sucker let's say use

selector

so that's the hook and like I said it's

looking for one parameter which is going

to be our function and then inside of

this function as a parameter we get that

entire store so for time being I'm gonna

call this store and I'll log it I'll say

but the only thing that I want to do in

this function is log the store and what

you'll notice in the console

is our entire state which is just

awesome if you ask me so take a look

over here we have card items we have a

mount and we have the total so again I

know I'm repeating myself

but essentially the idea is that

using this use selector notice how we

don't need to pass anything coming from

the specific slice or nothing like that

we can right away in this function axis

our entire store

and essentially what we want to do we

want to return something

whether that is specific

property for example amount or of course

you can return the entire card and then

you can the structure so first let's

just set it up where

we return the amount so notice over here

we have undefined in line five because

we're not returning anything from this

function yet

and let's set up over here in the

paragraph and then we'll take a look at

the the structuring option as well I

don't think I'm going to leave this for

your reference because again

we'll set up multiple ways anyway so

first let's go with a mount and that one

is equal to Let's again invoke use

selector let's pass in the function and

I'm going to be setting up the arrow

function and I'll go right away with

implicit return so again in here we are

accessing the entire state of our

application and we go with store cart

because that's the property value

and yes once we add more reducers

in our store then of course we'll be

able to access it so I'm gonna go here

let's say with modal and I'm not going

to pass anything in because I do need to

set up the reducer then of course we'll

be able to access with

store dot model hopefully that is clear

and this is very very useful because

again we don't need to import anything

specific from that slice we have access

to entire store and then let's go with

the mount so this is what I'm returning

from the function

and probably it's not going to be

surprising if I pass here the value

still going to be zero now let's test

this out though let's go to our features

slice and let's change this around let's

say there's going to be five items

number one I save notice now of course I

have this value of five so we know that

our functionality works and like I said

there's million different ways how we

can set this up and one of them is

actually the structuring so I know that

I can return store Dot card which is

essentially a object correct and then

inside of it I have the amount property

so this is also valid honest value did

not change and we didn't get any bugs so

that's how we can access data from our

slice we need to pick the component we

need to use a use selector and here we

pass in the function

and as a parameter of this function gets

the entire store and then we just need

to pick what we want to return in my

case I want to return cart from this

function it is an object and it

represents this initial state

and more specifically I'm looking for

the amount that's why I destructured it

and then I display it here in the return

as far as the icons in this project I

decided to go different route where I

use the hero icons site so once you

navigate there you'll notice a bunch of

nice icons and essentially I just set

them up as components so let me show you

with one and then you understand the

general concept just pick the icon you

want in this case I think I'm gonna go

with this bad one and as far as I

noticed there's really no difference

whether you go with jsx or SVG

so let me just copy this one let's

navigate back and then in the icons

you'll notice full-blown components that

I will right away export so let me keep

scrolling and I'm going to call this

testing so I'm going to say export const

that's going to be my testing component

and in here you just want to set up the

value you want to return

so this essentially will be the icon now

I am styling it though in CSS and in a

second you'll see what I mean so I have

this testing icon right now so that's

the return that I just copied so now

let's navigate to the navbar since I

already have the import for the card

icon

and let's set up over here the testing

one as well

and we can place it anywhere we want so

let me put it side by side and you'll

notice that this is a giant ore I'm

sorry well I already applied The Styling

so maybe this is not gonna work over

here maybe let me set up here the

fragment and then you'll see what I mean

so let me move the sucker down again

this is just temporary you don't have to

follow along

but you'll notice that if we don't apply

a styling we'll get this massive icon

basically that's the default that they

provide

so in the Styles in the index CSS

I added some styling for specific icons

so now I'm talking about the cart icon

and also same applies for these ones

over here as well so not only you'll

need to get the icon but notice over

here I applied some width as well as the

color and of course you can add more

Styles so essentially that's how I set

up

my icons where I created icons Js

and in here you'll find three icons so

one for the cart and then the other ones

for the actual card items and I imported

the icon from the hero icon so I set it

up as a component I export and then I

import in any of the components that I

want and then I just need to apply a

little bit of styling and you want to

Target the SVG so now let me remove the

testing one

and also let me remove it from the icons

since we won't use it and now let's

proceed to The Next Step all right and

up next let's work on our car items so

at the moment it is empty array or I did

prepare

an array of products just so we can set

up the initial functionality yes

eventually we'll fetch this data from my

API and in the process we'll practice of

how we can set up asynchronous

operations in Redux toolkit but for time

being this will be hard-coded data and

it is located in the car atoms and as

you can see it is an array where each

item is an object with some properties

so what we're going to do we're going to

set up the initial State equal to that

array so of course we just need to

import and then we'll repeat the same

steps like we did with an amount in

number however since we have unraveled

after iterate over and all of that cool

stuff so first what I want to do is go

to the card slice and we want to import

we want to import those card items so

let's go here with car items it is a

default export so it doesn't really

matter how we call it here

and then we need to go two levels up

we're looking for the card items and in

here

what do we have the initial State let's

set up current items equal to current

items now if we want to see that we can

either go to the nav bar since in there

we have the use selector and we can of

course log it or

we can take an advantage of the Redux

devtool so let's navigate here

let's refresh just so we're on safe side

if we navigate to the Redux depth tools

now what you'll notice that card items

in the card

is an action array like I said each

object represents that item with a bunch

of useful properties so our next step is

going to be setting this up in the

app.js where we'll grab them we'll

iterate over and then for each item

we'll return a component with the image

the title and rest of the stuff not bad

not bad so we set up the card items

equal to an actual array instead of

empty one now let's set up two more

components the cart container just and

cart item.js

and just the Showcase so this is going

to be the container where we'll have all

of the items as well as the total

and the clear card functionality now

eventually we'll add the model but the

idea won't change if we click on clear

card then of course we'll have empty

card and then we also want to set up

that cart item where again we'll display

all of this info and yes we'll practice

on use selector again where in the card

container we not only want to get the

car items we also want to get the total

as well as the amount because we'll use

that amount

to display some things conditionally in

this case if the amount is less than one

then I'll display this and then if there

are some items in a card then of course

there's going to be a different logic

and in the card item we'll just pass in

the ready as a key as well as the

properties of the atom and then we'll

destructure it now when it comes to card

item for the most part we'll get there

our action creators which of course will

set up a little bit later so for now we

just want to worry about rendering the

cart items on the screen

so let's get cracking where I want to go

two components and let's go here with

cart

container.js

and I also want to set up that card

item.js now when it comes to car animal

work on that one in next video

for a moment and as you know it should

be card items should be call Item one

and now let me fix this one as well

where I'm gonna go with cart item now we

want to import that in the cart

container so let's set up this component

as well

so r a f c e and that's right away

import that card item so let's go here

with cart item then we want to navigate

to the app.js and we also want to get

that card container so let's get that

one and I'll place it right after the

container meaning the number sorry and

we should see on the screen card

container awesome

now what's next well let's take a look

at the readme where we do have the car

item we also want to get the use

selector and now from my application

State I want to get the entire card and

I'll adjust the structure columns total

as well as the amount like I said the

amount we'll use to display

conditionally empty card

um again I already showcased that but

let me show you one more time this is

what we want to set up if the card is

empty and we'll control that with the

mod now if there are some values in the

card then this is what we want to return

we want to go with Section header

iterate over card items

and then also in the footer we want to

display the total with the clear card

button so let's set this one up where

I'm gonna go with import then use

selector from yeah Redux let's right

away access all of the items so let's

say here const

I'm looking for cart

and items

total also we want to get the amount and

all of that is equal to use

selector let's pass in the function and

what we want to return we want to go

here with store or state however you

want to call it

store and then cart so we get all those

values right away let's set up that

condition where I'll say amount is less

than one if that is the case what we

want to return well we want to go here

with section

then let's add a class name of card

and let's set up some logic over here

let's say here header

and side of the header we'll have a

heading to your

bag and then right after that let's go

with heading four and we'll say empty

card now we do need to add here empty

cart class

and let's add a text your card is

currently empty or your bag

it's empty let's save it now since the

amount is zero this is exactly what we

display so in order to see the atoms of

course we'll have to navigate back to

the card slice and again for time being

we'll just hard code this don't worry

eventually we'll set up some action

creators

that control this logic essentially will

set up some reducers and by default

Redux toolkit is going to give us those

action creators so let's go back to the

cart container

and right after this one you want to set

up another return so as you saw this one

was if we have less than one and now

since we hard-coded we have four

so in here we want to go with another

turn

another section

and we do one on a class so class will

be

equal to cart

and then the same deal we want to set up

that header

so header over here

and inside of it we're just gonna go

with heading to your bag

your bag let's save that one and yeah as

I know this is wrong so it should be

class name

then we want to iterate over the card

items so for time being we just want to

set up a div then we want to grab those

card items we want to run the map and

this is the actual array correct and

then for every item we want to return

that card item that we just set up

and we want to pass in the data now on

the screen we'll just see that text

whatever we have over there so here we

have the Karam but eventually yes we'll

access it and we'll correctly display it

so we're mapping over I'll call this

item so now I'm talking about each and

every object over there let's go with a

return then let's set up a cart item we

do need to pass in the key since this is

react and I already know that there's a

an ID property now if you don't believe

me

you can navigate over here and you'll

clearly see that so each and every item

has that ID property so let's say here

dot ID and then I want to use the spread

operator Dot and then pass in rest of

the properties let's save it so since we

have four items we have four card items

on the screen and then right after this

one right after this div let's set up a

footer this is where we'll display the

card total as well as the clear button

cut which eventually will revoke the

model and clear the card so I'm gonna go

with a horizontal line here then let's

add heading 2. with some data so total

span and set of this one I want to set

up a dollar sign I'll say total yes the

moment it is going to be zero

don't worry about it and as I not

actually messed it up over here it

should be there with a class of card

total my apologies that's why the CSS is

not correct

and after that we want to go with that

clear card button so still within the

footer

we want to go with a button let's add a

class right away it should be the end

clear begin

and let's say clear card

let's save this let's refresh so we

don't have any errors and this is what

we should see

on the screen where again we used use

selector

to access our entire store more

specifically we looked for cart which

represents that initial state in the

initial State we have all these values

so we're able to structure and then we

check for the amount

if it's less than one we display the

message if we have some items in there

then we just iterate over them and for

every item we return that card item and

then below that we have total which at

the moment is zero eventually this will

be dynamic as well as the clear card

button which eventually will remove all

the items from the cart awesome and up

next I want to set up the card item

where we're passing in all of the data

from the cart items so we go here with

dot dot an item basically we spread out

all the properties so we can access them

of course here when we destructure the

props and then we just want to set up

some return with the image title and

rest of the stuff yes of course none of

the buttons at the moment will work but

at least we'll have a better looking

card item and also we want to get two

icons from the icons we want to get rest

of them the Chevron down and Chevron up

so I'm gonna navigate to the card item

first let me grab both of them let me

get the import then we're looking for

Chevron down and Chevron

Chevron up

after that we want to go in the

structure all of the props so we're

looking for ID

image title price as well as the amount

and as far as the return let's start

over here with simple article

so we want to go here with article and

let's add a class of cart

item then we want to go with image and

Source will be the image

so let me say here dynamically image and

as far as the alternative well we have

the title for that so let's save it and

we should see the images and if we do

and of course we can proceed to the next

step

after that we want to set up a div

ing four is where we'll display the

title so let's save that then we also

want to set up the price so let's say

here heading 4 with the class of item

price which comes with a little bit of

styling and then I'll add the dollar

sign and I'll say a price let's save

that then we want to set up the button

so right below we'll go with button then

class and remove

iPhone B10 and we'll say remove would

save that and then we just want to set

up those buttons to increase or decrease

the amount so we want to do that right

after this div

so this is where we set up the heading

force and the button but after that we

want to go with another div there's

going to be no class

well we want to set up a button let's

call this amount

hyphen BTN and then let's add that icon

over here so in this case I want to go

with Chevron up let's close it okay good

then we want to copy and paste and set

up the rundown

so the class is going to be the same

mount button and here we just want to

say Chevron down and in between them

this is where we'll place the amount so

let's say here paragraph class name

amount and we want to render the amount

so say amount over here let's save it

and for all of them we have one

of course in the following videos we'll

set up the functionality that allows us

to change that and with this in place

now we can start slowly

adding our first reducers okay so how we

can set up the functionality with Redux

toolkit so if you remember previously we

needed to set up the action we needed

dispatch and then we always always need

it to return a new state and then just

of course copy the values and all that

now this is not the case with Redux

token in fact it's much much much easier

and the way we can do that we simply go

with a reducer's property in the slice

and again key value pair

so in my case I'm going to call this

clear card that's going to be the name

of my reducer over here now as a

parameter this function gets a state and

notice how we don't have to return

anything I don't have to return the new

state and always avoid the mutation

basically remember with user reducer we

always always needed to return a new

state we don't have to do that right now

why because when we installed Redux

token we also installed email Library

which behind the scenes does all the

heavy lifting so in our case we can

modify the state or mutate the state

directly and yes you're not

hallucinating this is clearly the code

that mutates the state

the reason we can write such code is

because Redux toolkit comes with Emer

library now it's also really cool that

if we take a look at card slice

Something That We're logging right now

in the card slash.js we have actions and

the moment we create that reducer

will be able to see the action created

by the name of yes exactly the same

Clear card

and what that means is that we don't

need this code again remember with use

reducer we set up the action we set it

equal to string and we didn't set up the

action Creator per se when we used user

reducer

but the idea would be that we actually

set up a function that returns that type

so we don't need to run around with this

variable basically have right away

function and

optionally we can also pass in the

payload now why am I saying this because

now we can directly use this clear card

we don't need to set up the variable we

don't need to create the function

essentially it's already provided for us

and then in order to invoke it

we need to get another Hook from the

react Redux and this is use dispatch

so remember

with userducer we use dispatch in this

case we right away get it if we invoke

use dispatch and then we invoke this

patch so whatever we're getting back

from here and we just pass in action

Creator so yes we do need to import

clear card that's why we're exporting

over here on this export console and

then name import or I'm sorry name

export

and then we just need to use it and

don't worry if some of this seems

confusing at this point

it will make total sense once we

complete the entire setup so first I

want to navigate to cart slice like I

said we want to start over here by

setting up that reducer the one that is

going to clear the cut so let's go here

with a reducers

and it's going to be an object inside of

it we just need to come up with name for

our reducer okay so it's going to be

clear card it's going to be a function

that gets the access to the state now

also we'll have access to the payload

basically

let's say we want to pass in the ID

something we'll do a little bit later

which is going to be a second parameter

for now we don't need to worry about it

I'll set it up as a arrow function and

like I said

I know I keep repeating this but we can

mutate the state directly because behind

the scenes immer takes care of that so

we can go here with State then what is

the value here it is card items whatever

I want to do I want to set it equal to

an empty array that's it that's all I

want to do and now let's go to the cart

slice let's uncomment the log

and we'll see in the console that yes we

have name and all that but now in the

actions we have a function we have

action Creator by the name of clearcard

and again the beauty indices

the fact that we don't need to set up

anything manually as far as the action

as far as the action Creator we right

away get in by default

and the only thing we want to do is pass

in

the clear card function

into whatever we're getting back from

this bachelor use dispatch and then pass

it in so let's go back to the slice and

instead of logging which as I said I'll

comment this out we want to go with

export const so all of these will be

named and yes we'll add more functions

of course over here

and let's go with clear card and now

where are we looking we're looking in

the cart slice dot actions so let's set

it equal to cart slash Dot and actions

so from that object we export this and

now we just need to decide well in which

component we're going to use it of

course in our case that will be cart

container yes eventually we'll set up

the model

so we will move that functionality from

the card container to the model but for

now

let's just see how we can invoke it in

here so let's say use

this patch that's the first one then

comma and Below or above it doesn't

really matter we want to go with that

huge dispatch

so const is going to be equal to this

patch whatever we get back use dispatch

invoke we don't need to pass anything in

then let's keep on scrolling keep on

scrolling this is where we have our

button and now we do want to pass in the

arrow function because of course I don't

want to invoke this immediately I only

want to invoke it when we click on a

button so let's say here on click

then let's pass in the arrow function

and we'll say that every time we'll

click on a button will dispatch

an action and in here let's pass in that

clear card again

the beauty here is that we don't need to

do all of that manual labor we just pass

in the function that the side note I

didn't import so let me go back we want

to go with clear card which is coming

from the card slice now let me save it

and in here it says unknown event

handler because I probably did some oh

yeah this is not right and once we click

this is what we'll see now we're not

displaying this one the condition simply

because we're not controlling the amount

yet don't worry all of that is coming up

for time being we are just displaying

The Heading 2 with your back here and

the total basically since we removed all

of the items since it's set equal to an

empty array we just have the your back

and the total and with this in place now

we can set up rest of the reducers and

while we're still on the topic of State

Management in the Redux toolkit reducers

let's also cover

an alternative option

and that is simply the fact that we can

return a new state from the reducer so

let me comment this one out let me type

here return but we need to be aware of

the major gacha and that is following

whatever we will return

from reducer as our new state will

become the new state so let's say if I'm

going to return an empty object yes our

state will immediately turn into an

empty object without any of these

properties same works if I'm gonna

return here empty array so let's say if

I return an object and if I just say

card items equals to an empty array yes

I will update this property

but automatically I'll remove these ones

just to Showcase that let me save it let

me click on clear cut and you'll notice

that now I'm nothing here as far as the

amount as well as the total and I can

clearly see that if I navigate two

adapto's so let me open up the Redux

death tools on a small browser window

and then when it comes to our state

notice all of the properties are missing

now only the card items is there

so let me comment this one out and let's

take a look at the use case where

this is going to come in handy so in one

of our upcoming projects we'll have some

pages and in there we'll have a bunch of

inputs that are going to be our state

values

and essentially there's also going to be

a clear button

and the idea is like this once the user

starts typing something let's say

changes some values around here

at some point maybe he or she wants to

clear out all the input values so in

that case we're gonna take that initial

state

and we'll just return that from our

reducer so let's say you set up your

state with whatever default values

and then

when you have the reducer that just sets

it back to default you just pass that

initial State as a return in your

Edition so that's one of the use cases

where this comes in handy but we do need

to be careful again whatever we're going

to return from the reducer will become

that new state value so if we omit some

of the properties yes they will be

excluded okay and once we can clear the

cart

it's a smooth sailing from here

we just want to set up those functions

we want to add the functionality and yes

we will take a look at the action how it

looks like and why we're looking for the

payload and I know I said this already a

million different times but

since right now we can modify the state

directly

there's tons of ways how you can set

this up now I purposely kind of tried to

showcase the mutation approach where yes

of course

in these examples for increase and

decrease we can return a new array

but I purposely just found the exact

item and then updated the amount plus or

minus and also of course you can combine

increase and decrease into one function

let's say you can call this toggle and

of course you'll just have to provide

here more values whether you're

increasing the equation that could be

your challenge for now we just want to

focus on remove

item and the first thing that I want to

showcase is the fact that we can access

the payload so whatever we pass in

because in order

to get the specific item in order to

remove it I do need to get the Eddie

correct if you're paying attention in

the card item we did this structure

already however

we haven't used it here so this is

something that we will pass into the

function

and essentially as far as the remove

item I'll get it from action.payload

because that is a structure I'll name

this item ID

and then I just want to set equal State

card items to the new array now I wasn't

doing this purposely again there's tons

of ways how you can set it up but in

like I said just thought that filter is

the fastest one so let me go to state

DOT card items we filter it we look for

specific item

that does not match the Eddie and we

return that into this car items so if

the ID matches

so whatever we pass in Manchester to the

80 then that item won't get returned and

in the process we'll move it from this

array so let's try this one out where in

the cart slash

let's set up that remove item so I'm

gonna go here with a move item and first

I just want to showcase

how we can access the payload so first

one is the state so we access the state

here then I'm gonna go with action and

later I'll showcase how we can structure

that and for time being let's just look

for the action and now let's think about

it where do we want to access all these

functions they remove items increase

decrease and not calculate totals so

only these three well we want to get

that in the car item so first in the

card slice we want to export that again

what's really cool is the fact that the

name is exactly the same we don't really

need to think about it and as I said it

shouldn't be remove items it should be a

remove item I apologize for some reason

I just keep adding those s's there then

let's navigate to the card item first we

want to import the remove item so we're

looking for a remove item

and notice how right away we get that

named import and also we want to get

that dispatch so let's just set it up

over here where we'll say import then

use dispatch that is coming from react

Redux then

the very top we're gonna go here with

const dispatch

and that will be equal to use dispatch

let's invoke it and then let's look for

that remove button

so now basically every time you click on

a button

we will remove that specific item so

let's say here on click

again we do want to pass in the arrow

function first and then let's say

dispatch and we'll go with a remove item

and now let's pass in the ID

so first thing what you'll see once you

click is the log in the console so let's

click and check it out

in here we see two things

first we see type

so notice how that is right away already

set up for us like I said we don't need

to do anything right away it has cart

and then remove item so this is the

action that we're dispatching and we

also get the payload now can you pass in

the payload as an object absolutely but

if we pass in as a simple property

then we have payload is equal to

whatever

so knowing this we can set up rest of

the functionality where in the card

slice

I'll assign action.payload equal to an

ID const and I think I'm gonna call this

product ID or sorry now I'll call this

item ID so const

Item ID is equal to action payload

and then

let's set up the new value for the state

card items State again yes we're

modifying this we're going to go with

cart items is equal to and now let's

access the old value basically before

the update and we can do that with State

card items then let's run filter and

like I said if the ID matches the item

won't be returned so essentially we'll

remove it from our cart items array

we're going to call this items and I'm

gonna go with implicit return where I'm

going to say if item id does not match

the item id only then return it from the

array

and as a result check it out and click

and we just keep removing the items from

our bag again yes we're not affecting

the amount as well as the total all of

that is coming up but we should be able

to remove all of the items from our cart

be it with clear card or individually by

clicking on the remove button all right

and now once we're familiar now we can

remove item let's also do the same thing

with increase and decrease now in order

to make things interesting I already

destructured the payload so remember

we're getting the action object and

we're looking for the payload so in this

case I just destructured that in the

case of increase I'm going to State card

items find so we get that specific item

in this case where the ID matches unlike

the filter approach and then I just want

to update the amount so every time I'll

click on the increase button will

increase the amount of specific items we

have in the cart for this phone or that

phone

and hopefully you see where I'm going

with this and eventually of course this

will also affect the amount as well as

the total and yes I'll set them up

pretty much right away since the

functionality is exactly the same apart

from the fact that in this case we

increase and in this case we decreasing

like I said if you want to challenge

yourself set up a toggle functionality

where you look for one more value

increase or decrease which of course is

going to be in the payload and then

depending on that set up the

functionality but for now let's just

worry about these two so we're gonna

navigate to cart slash and then right

after move item let's say here increase

let's set up our function

let's say State like I said we'll right

away look for the payload

I'll set it equal to

and when it comes to functionality we

want to go with const first we want to

get that card item each specific one

where the ID matches and we can do that

with state

card items dot find then let's pass in

the Callback function let's say item and

then Item ID is equal to payload and

we'll pass this in as an object so it's

going to be payload

dot ID

and then

let's increase that amount so now I'm

accessing that one specific card item I

have the amount property and please

don't confuse this with the total amount

so that's the total with all of the

items that we have in a cart

when we're talking about this cart item

on property we're talking about this one

over here for that specific card item

and we'll just say card item

mount

so whatever it is right now plus or yeah

in this case plus one and then

in order to set up decrease you want to

copy and paste you want to go with

decrease still going to be a payload

okay all of that is awesome we'll still

look for the card item the difference

here is minus one and then we will add

them of course to our exports so let's

say increase

decrease and we want to navigate to the

card item

we want to import the other two as well

so we're going to go here with increase

then decrease

both of them and first let's set up the

increase because for a decrease we'll

have to add a little bit more

functionality

so let's go with mount button let's say

on click we already have dispatch so we

don't need to worry about that one and

we just want to pass in the increase

so we're gonna go here with this patch

and then inside of this patch let's pass

in the increase and like I said in order

to make this interesting I'm gonna go

with an ID now normally if you're

setting this up as an object of course

you'll pass in more properties

but in this case I won't do that and for

some reason oh yeah my bad so I set up

the import in the wrong place

me out of comma here

and hopefully everything is going to

work Yep looks about right and if we try

this out notice how again we're changing

this value over here for each item and

again the functionality here is

following where we look for the payload

which in this case is an object that's

why we go here with payload dot ID just

to Showcase that we can pass in more

data and then we just increase the

amount and the same thing we can do with

decrease so let's go back to the card

item

I'll take this entire thing 40 on click

or copy and paste and now let's go with

decrease instead so say decrease again

pass in the area that doesn't change

it's refreshed so we start from scratch

and now notice how we can decrease the

amount now the problem is that we're

going negative

so I think it's going to make a bit more

sense if we'll check for the amount and

again we're talking about the amount of

specific item not overall amount and if

it is equal to one

we want to remove it since that way

we'll have zero items in the cart

and if it's bigger than one then of

course we just want to run the decrease

so I'm going to go back to this on click

and we'll set up if amount is equal to

one that means that we're pressing the

button amount is already equal to one

and if that is the case well we might as

well remove the item from the card

correct we'll say remove item and we'll

just pass in the edit now we do want to

pass the return right after because you

don't want to continue reading the code

and if the amount is bigger than one

then of course we just decrease the

amount so let me go here let me refresh

and notice I can increase I can actually

decrease so all of that is working but

the moment I get

the amount of one if I will click the

decrease I'll automatically remove the

item from the cart all right and up next

let's take a look at how we can

calculate the totals because at the

moment yes

we can nicely control our cart but that

is not affecting the amount then we have

all the way at the top and also it's not

affecting the total and in order to fix

that we'll come up with new reducer

we'll call this calculate totals and I

went with this functionality so I

created new variables amount and total

then I iterate over the current cart

items and each of them has the amount of

property

so I just add to the overall amount one

so the one that represents the entire

card and the same goes for a total only

in this case I multiply

the amount of items I have with the

price and that is equal to the total one

so I set up the loop I add

both of these values and at the very end

and just go with State amount is equal

to amount so whatever we created over

here the same goes for total now where

do we want to invoke that one that's a

good question let's keep on scrolling in

the readme and I actually set this one

up in the app

so in the app

I will set up a use effect

on that user effect will depend on the

car items so use use selector grab the

card items from the cart and then every

time there's going to be some change in

the car atoms will dispatch the

calculate totals and as a result

both of those values will change in here

as well as in the total so let's try to

set this one up and let's start by

creating the function

calculate and then totals

again it's going to be our function

we'll access the state as far as the

logic let's go with let amount is equal

to zero and let's say not I have a tiny

bug over here then I want to copy and

paste and let's just say total so by

default it's always going to be zero and

zero

then we want to go with State then cart

items let's iterate over so call this

for each and then we'll access each and

every item and each and every item has

the amount and Total Property and we

just want to add this to the total

amount therefore we'll go with plus

equals and then item amount now when it

comes to the amount of money we want to

multiply the price that each item has

with the amount of items we have in a

cart so total is equal to and now in

this case we'll go with plus equals item

amount multiplied by item dot price and

once we have this one in place

up next we want to set State amount

equals to amount that we just set up and

the same goes with total so let's go

here let's say total is equal to total

and after that we want to export that so

let's say calculate totals and we just

need to set it up in the app.js so let's

navigate to app.js

and in here let's grab first the U

selector and use dispatch we'll need

both of them

so let's say import use dispatch use

selector and we'll set it equal to from

react reduct and also I want to get that

calculate totals so let's say calculate

totals that is coming from the features

okay beautiful and as far as the logic

well first let's grab the card items and

we'll use you selector for that so cart

items now that is equal to use selector

let's pass in the function and let's say

here store is equal to store cart and

I'm not going to repeat myself how we

can access that and also we want to set

up that dispatch so const dispatch

not is equal to use dispatch let's

involve that

and let's finally set up that use effect

so let's say here use effect

and then as far as the Callback function

we will invoke this every time there's a

change to the cart items so every time

we'll update something

related to the card items we will invoke

this use effect specifically we want to

go with dispatch and we want to pass in

calculate totals so check it out

now we still have four here but I can

clearly see my total

and what's going to happen every time

we'll click on any of the buttons and

all that nicely display whatever items

we have in the card now there's tiny bug

over here

basically we need to set this one to

fixed essentially how many uh numbers

after that and don't worry we'll do that

in a second but the goal here

is that now every time we remove item

from the card or we clear the card

altogether

it will affect the amount of items we

have which we display over here and also

the total now in order to fix the bug

there with too many numbers we just need

to go to card container

and where we have the total let's go

with two fixed so that's again the

JavaScript method that we have access to

and we'll say that we only want two

numbers after the dot so now everything

is going to work

and just like that we have calculate

totals in place and every time we'll

make some changes to our cart

they will affect our initial state in

the card slice all right and up next I

want to set up a modal and in the

process we'll create another slice and

we'll see how we can access data when we

have multiple reducers in our store and

the first step is going to be creating a

model JS with following code and then we

want to import that in the app.js and

place it above the number so we'll start

working on that where first I'm going to

create model Js

I'm going to set up any kind of imports

in this case

we haven't set up the slice yet so let's

just create that component

and as far as the return we want to go

here with a side

and we want to add a class name of modal

container and as I said if you're

interested in the CSS just please look

for those classes in the index CSS then

we want to create a div of the class of

model inside of it let's say heading 4

with the text of remove all items from

your shopping cart and after that we

want to go with button container where

basically we'll place two buttons just

to Showcase how it's going to look like

let me go to complete one

and again we'll display that once we try

to clear the cloud so this is going to

be the result so right off 30 heading

we're gonna go with div with a class of

BTN

container inside of it let's place two

buttons first one will be confirm one

and the second one will be the clear one

type for both of them will be button

then class name BTN and I'll call this

confirm vtn and as far as the text I'm

gonna go with confirm as well and the

same deal with the clear one we just

want to change some values around where

it's not going to be

confirm it's going to be cancel instead

and instead of confirm hyphen vtn we're

going to go with clear BTN now we want

to go to app.js

we want to get this particular component

so

I mean let me try here with the Auto

Import Let's see we have model yep

that worked and once we save check it

out this is going to be our model so we

have the component now we just need to

set up the logic all right up next let's

set up the slice for the model

so remember we have features folder

for time being we only have one feature

we have the car

but now I want to add the Moto feature

which is going to be located in the

model slice and then we want to set up

the functionality where again we're

going to go with create slice

we want to set up some initial state in

this case it's going to be is open

and I'll set it equal to false then we

want to go with model slice come up with

name initial State and right away let's

set up those two reducers we're gonna go

with open model and close model we want

to export that and we also want to

export model slash reducer and in the

store we want to set up another key only

in this case it's going to be equal to

this model slice reducer and

as a result we'll be able to access the

state as well as the reducers all over

our application and the first thing that

we'll do

is in the app.js we'll grab is open

and we'll display this one conditionally

so I'm gonna go to the features we want

to create a new folder let's call this

modal then we want to go to new file and

we'll call this model

slice JS and then inside of it we first

want to grab the create slice so let's

go here with create and let's see

whether yep gives me the import then we

wanna

set up the initial state in my case just

going to be one property again this is

just a practice

working with more realistic application

where of course there's going to be more

features so we're going to go here is

open and by default let's set it equal

to false

false and then let's set up that slice

so const modal slice is equal to create

slice let's pass in the object name

model

then initial state is equal to initial

State let's right away set up those

reducers now what reducers we're gonna

have we're gonna have open motor reducer

which is going to be equal to state

and action again we're just practicing

as far as the action we're not going to

use it and in here let's just say state

is open so if I want to open a model

what is going to be value well you might

as well set it equal to True kind of

makes sense don't you think then let's

copy in page then now we want to close

the model now what is going to be the

value for is open well let's set it back

to false then we want to export three

things the main reducer and I'm not

going to log it we already have done

that so export default now of course we

have different object but the property

we want to export meaning the

method is still the same we want to

export the reducer that's number one and

then remember those action creators so

we're gonna go here with export const

and now we're looking for open model

close model and both of them are coming

from modal slice and the actions now

in order for everything to work we

definitely definitely definitely need to

go to store

so let's find where is that sucker over

here and then in the store now I want to

get the modal slice

so I have to change some things around

this is going to be coming from the

model

name will also be modal this is going to

be a modal reducer and yes of course the

property I'm going to go with model as

well so model will be equal to modal

reducer

so that's good now let's try it out in

our application on a big screen

and

at the moment we're calculating the

totals notice we have our E2 actions not

only the init and we also run calculate

totals what I want to showcase though is

that

set up just cart now we also have the

model

and now let's utilize that we're in the

app Js

not only I want to get the model I also

want to access what I want to access is

open

and I want to set this one up

conditionally since in a second we'll

add all the functionality so in here

remember we were accessing the cart

so the only difference is that now I

want to access the modal and I'll say is

open

is

open and that will be equal not to the

store cart

I'll say store model

and where I have the model

will have the conditional rendering

where I'll say is open if it's true only

then display the model so let's move it

in and since the value is false we don't

display the model now if I'll manually

go back to model slice and I'll say that

the value is true

I mean

you're not going to be surprised

probably by the fact that we display the

model okay awesome

so now let's add that functionality

where instead of just clearing the cart

why don't we open up the model when we

click on this button and then once we

get to the modal container then we'll

decide do we really want to remove all

the contents and then close the model or

we simply want to close the model so

first let's start in the card container

and I'll send out yes you'll find all of

the logic here in the readmewhere first

in the car container we want to get the

open model from the model slice and

instead of clearing the card directly

we'll go dispatch and open model and

from there we'll finish everything in

the model just so let's start in the

cart container

so we have all of these Imports okay

that's awesome

but we want to copy and paste and we

want to get open modal from the modal

slice open model and instead of card

slash we're gonna go here with model and

then modal slice then let's keep on

moving I don't think we actually need

this import anymore

so we can remove it and then where we

have the clear card

now let's pass in the open modal

same deal we invoke it so that doesn't

change now the difference of course is

going to be that now once we click on

clearing cart we display the model so

now let's navigate there and let's

handle that

so what first do we need over there well

we'll need quite a few things first we

want to get the closed model because

regardless on which button we click I

want to clear it I want to get the use

dispatch I'll need it since I wanna

invoke some reducers and I also want to

get the clear card so notice how again

we're getting this data from multiple

slices model slice and card slice and

then of course we'll just set up the

functionality so

let's go back over here let's set up all

those three Imports we're gonna get the

closed model

closed model and I also want to get the

clear card for your cart and also we

want to get the use dispatch so let's

see where that is going to work so use

this patch yep I have all of them so now

I can remove these suckers then we want

to quickly

set up the dispatch where effectively we

just go with use dispatch and we invoke

it and now it's set up the functionality

where if we click on confirm I want to

do two things

not only I want to clear the card but I

also want to close the model now if we

go to cancel then we'll just close the

model so let's go here with button we're

gonna go with on

click and then in here let's pass in the

function

and then

We're not gonna pass in any kind of

argument we'll just go with dispatch

then clear

card

that's the first thing we want to invoke

and then the second one it looks like I

have some weird bug oh yeah oh here and

the second thing is the close model

so let's pass this one in and I know I

keep repeating this but I really like

the fact that we don't need to do any of

that manual labor where we need to set

up the actions and all that in this case

we simply right away get those functions

and we pass in dispatch which obviously

is way less time consuming and also less

chance for errors so let's do the same

thing with this button and the only

thing we want to change here is clear

card where we basically want to remove

it so if we confirm then our card is

empty if our we just click on cancel we

close out the model so that's how we can

add another feature to our application

all right and now let's see how we can

set up a synchronous functionality with

a Redux toolkit so here's the plan so I

have quarters API

basically an API that serves some Json

data just so we can practice on fetching

data and in the use reducer project we

already work with this URL so it's

course API and then react use reducer

card project which essentially Returns

the same data that we currently have in

the card items so use this URL to fetch

data when initially our application

loads

and here's the thing we cannot just

simply set this up in our current

reducers it's not going to work that's

why with redex toolkit we install

another Library the thunk one and from

the Redux tokit we get this create hsync

funk

and we right away wanna invoke it and

the result we want to export

so this is something that will require

directly in our components so it's a

very similar to how we exported the

action creators from the reducers

however in this case we export this

directly in my case I'm going to call

this get cart items so we invoke create

async Funk and it's looking for two

things for the action type so

essentially in here we just come up with

a name

of our action and second is going to be

that callback function

now in the following video I'll show you

more options but at the very least we

pass here this function and this

function needs to return a promise

um I'm just using fetch to fetch data

and remember

when we go with fetch dot then we return

basically a success response and with

catch of course it's going to be the

error but regardless from this function

we are automatically returning the

promise this is what the Callback

function is looking for it's looking for

that promise and of course you're not

limited to the just fetch you can set up

all kinds of things in here but just

remember that this function needs to

return a promise so of course if you

just stick async in front of it

then by default it's going to return

promise which is something that we'll

take a look at in the next video and

then in the fetch I want to pass in the

URL

so the one that gets me the product and

when it comes to this callback function

it returns a life cycle actions so if

you remember when we work with promises

we add few options

promise could be pending it can be

fulfilled and rejected

so where we have the create slice what

we want to do is set up extra reducers

property it's going to be an object and

then in order to access those life cycle

actions the syntax is like this where we

go with name what we're getting back and

then that pending fulfilled and rejected

and yes

these need to match to the T

because

they're provided by the Redux token and

then we wanna and close this with the

square brackets

and then we'll set this equal to a

function so what do we want to do when

we're pending basically when we're

loading that's why we have the state

value is loading and we'll set it equal

to true then what do we want to do if

we're successful and this is the case

where the data that we're returning in

the case of success in our case response

that Json is going to be located in the

action payload and of course the lug it

just so you can see so once we have

successfully data we want to set is

loading to false and card items to the

actual payload and if there's some kind

of error we have rejected option and in

that case for this application we just

want to set is loading to false

and also keep in mind that when it comes

to fetch 404 is not an R so we'll only

have this one if there's some kind of

network error and at the very last we

want to grab get card items in the app

app component and then when our

application loads we want to do two

things we want dispatch get card items

so the asynchronous function

and then we also want to grab is loading

from the state and while we're loading

we'll display this

and once we're successful we'll set the

state card items equal to the data that

we're getting back

so let's try this one out where I'm

going to go to card slice

and first I want to grab that create a

sink thunk so that one is coming from

Redux toolkit then I want to set up the

URL so right after the import let's go

here with const URL and you have two

options you can either get it from

readme or you can just navigate here in

the browser so since I already have it

open in the browser

I'll use this approach so again this is

the URL where we can fetch those

products just like we have in the card

items and then let's keep on scrolling

and we'll go with

create a sync thunk and we'll set it

equal to our function but we want to

right away export it so let's say const

get cart

items and that is equal to creative sync

Duncan like I said it's looking for two

things

the type so in here we just need to come

up with a name in my case I'm going to

go with cart forward slash get

card and I'm so that's going to be my

action and second will be that callback

function

and here let's right away go with return

fetch let's pass in the URL then that

then so if you're successful I want to

turn this into a Json so say response

response Json let's invoke that and then

let's also go with catch and don't worry

next video to take a look at more

reasonable approach how to handle this

but for time being I just want to get

that data from the URL so let's go here

with error and then log that sucker

and once we are done

we want to keep on scrolling and in the

create slides right after reducers the

property name is extra reducers notice

we right away get that suggestion and

like I said then we get those life cycle

actions

so for every function that we will

create

in this case it is get card items we'll

get those three life cycle actions

pending fulfilled and rejected and the

way we can access that we go with the

same name so get card items in this case

and then notice we right away have those

options fulfilled pending and rejected

so in my case I'm going to start with

pending that is why we're still loading

and in this function same way we can

access the state and also we can get the

action so action is going to be useful

once we get the data for now while we're

pending we just want to grab the state

and I want to set the state is loading

value equal to what equal to True

correct so while we're loading is

loading will be equal to

true then we want to copy and paste like

so we just want to add the commas so

there's no bugs in here and we want to

change these ones around where instead

of bending now I'm looking for fulfilled

and in this case I do want to add

another parameter which is going to be

action and again this action will

contain the result

if we're successful so in this case if

we're successful we return the Json

response and what I'm going to do is set

my card item so state

and then cart items equal to what action

and payload and yes let's also log it

just so you can see where it's coming

from but I can tell right away that

there's a payload property and that's

the one that holds those card items so

let's log the action and lastly

we also have rejected

and like I said since we're using fetch

it's only for network errors and for

time being also the sequel to false and

also

there's a tiny issue here once we have

the data of course the loading will be

false

so we don't need to export this we're

actually in good shape we already export

that function

here with export now we just want to go

to app.js we want to grab the function

get cart items we want to invoke it

once our application loads and we also

want to check for is loading so let's

navigate to app.js

and since we already import

the calculator from the card slice

simply want to add a comma and we'll go

with get card items and then let's keep

on moving not only I want to get the

card items I also want to check for is

loading sorry for loading then we'll

display different return and then let's

set up a different use effect

where I'm going to go with use effect

and I'll invoke it

only when my application loads so once

my application loads what do I want to

do I want to dispatch and we'll go with

get card items and we'll invoke it it's

also set up that return

where basically if we're loading this is

what we want to return we want to go

with Dave with glass of loading and then

heading one loading so let's set it up

here if is loading it's true then we

want to go with return

then let's set up the div here let's add

a class of loading and on the side of it

we're gonna go with heading one and

loading dot dot and once we save for

second we'll notice that loading and

then we get the product and if you don't

believe me

let's navigate to the big screen over

here let's refresh and then let's check

it out in here we have the pending which

is going to be for that loading one and

we can clearly see our state

so notice how awesome it is in the feed

explos where you can clearly see your

actions so what actions were dispatching

and what is the state at that time and

we can even see the difference so

basically if I'm gonna go here with

fulfilled notice this is going to be the

difference so in the cart

we basically get this is loading and we

set it equal to false and also in the

console you can see what we're getting

back remember I said that once we log

over here in the card slice

we are logging the action so what is in

this action it is a payload and that's

the data that we're getting back so we

have this array of four items we set

here State card items equal to the

payload so again something we can

definitely double check over here so if

I go here with State notice with

fulfilled for example this is going to

get me those car items those four card

items and one more thing that we can

actually do is go back to the cart slice

and set this equal to an empty array so

the car items and that way you'll

clearly see how we can change this once

the Theta gets here asynchronously so

let's navigate back again let's refresh

just so we are on the safe side and if

we go right now with action fulfill them

if we take a look at the difference now

I'll notice two things first of all is

loading changed from True to false and

also notice how we switch the card items

so initially it was empty array and now

essentially we get those four items and

again all of our functionality still

works we can clearly see that in our

actions over here

but now we're getting this data

asynchronously once our application

loads all right and lastly I just want

to showcase what options we have with

the Callback function because in our

previous example we just looked at the

most basic setup

so now let's go over the more complex

one and don't worry in this video you

don't have to type along and in fact we

won't use any of this extra data in our

current application the goal is to

Simply get the gears in your head

turning and showcase large amount of

options we have and first what I want to

do is install another Library the HTTP

Library by the name of axios because I

do want to showcase

how essentially we can return a value

for the error and since fetch is not

responding to 404 basically for fetch

the 404 errors are not errors I actually

want to use the axios instead again if

you don't want to do that you can just

sit back and relax where I'm going to go

with npm install axios first then we

definitely want to spin up the dev

server of course so npm start let me

close this one then we want to navigate

to cart slice I think I can remove the

items we won't need it anymore so axios

from axios let's keep on moving and

before we do anything

like I said we can create this function

right away as a sync which essentially

just means that we'll right away return

the promise correct so go here with a

sync and that also means that we can

await so we can set up more logic so let

me remove all of this code here and

let's just go with try and catch right

away since we can also do that and then

let's wait for that response so I'm

going to say here const and then

response is equal to oh wait now I'm

going to go with axios and then I'll

pass in the URL and if we're successful

what do we want to do we want to return

that response again keep in mind we are

returning a promise and yes we're

handling that in the X reducers so none

of this functionality changes right now

we're just switching right now our

create a sync done callback function to

a sync where we're using axios now once

we save we will get some errors in the

console don't worry about it the reason

for that is because when it comes to

axios the data is located in the data

property and just to Showcase that let

me go here with log and then response

and you'll see in a console

if you scroll up you'll notice over here

this is what we're getting back and

essentially what we want to do we want

to pass in this data property

down to these lifecycle actions so we're

talking about this one over here so

let's scroll up and we'll go here with

return and let's go with response and

then there again

this is just because that's how the

response is structured so once we save

notice how everything worked correctly

where again we're getting those items

and if we take a look at the action it's

still the same thing we're getting this

payload and the payload is that array

so that's the first thing that I want to

mention also well we can pass here the

arguments now what does that mean well

in our case we're not going to use that

but we need to imagine that let's say

we're going to be setting up some kind

of functionality and we do want to pass

here the value let's say whether that is

a user or some kind of parameter or

something so in this case I'm just going

to say random

and if we want to access that again in

our case it's not going to change

anything but if we want to access that

this is going to be the first parameter

so in my case I'm going to go with name

and let's simply log that and we'll

clearly see

that we can access that value again not

something we'll use in our application

but it's very very important because

there's going to be applications where

of course this is going to be important

the fact that we can pass something here

from our component and we can access it

in our create async thumb that's the

first thing that I want to mention now

second we also have access to thunk API

again you can name it differently but I

mean common convention is calling this

Bank API which gives us even more

options now what am I talking about well

first of all let's log something let's

go with log then let's access bank API

and you know what let's just log the

entire thing

so you know what there's quite a few

things here in the console so let me

remove this action basically I'll

comment this one out for your reference

and also hopefully it's clear how we can

pass the parameters from the components

so that's clear

but then check it out we have this

somewhat giant object with bunch of

useful things

so here's the thing we could get the

state now what's interesting we're

getting the state of the entire

application

and this should get the wheels turning

in your head because that means that we

can get any values from the rest of the

features so let me quick quickly

showcase that so I'm gonna go with log

and then thunk API and then let's go

with get State and let's invoke it and

in the console I have both I have the

values for the card as well as the model

so imagine if you have for example a

user feature where you're setting up the

user yes when you're setting up your

async action

you can actually access it so I can set

up the user in a different feature

and I can still access it with the help

of this tank API which is very very very

powerful and also what's interesting

well we can dispatch

if we take a look at the object over

here notice we have this dispatch option

so what we can dispatch well for example

let's open up the model while we're

fetching so let's try this one out we're

right after the get State and all that

we go here and we're gonna go with funk

API

we're gonna go with this patch and now

we want to pass in open and modal again

something that is not even in our slice

and check it out and as I said I forgot

to add here

the parentheses notice even though this

reducer is not even in this feature we

can still access it with tank API and I

know you're sick of hearing this but

this is extremely powerful because we

can do all kinds of functionality in the

create async thumb and lastly what I

want to showcase is how we can return a

specific response because at the moment

yes we have catch and we are basically

getting the error but normally from the

API

you'll get some kind of specific message

so first of all how we can pass this

through again we're gonna look for thunk

API and we want to go here with the

return first of all and then the

property or the method you're looking

for so let's go here with thunk API is

reject with value so in this case I will

hard code this but keep in mind that

normally with axios it's going to be

located in error dot response so in here

let's say something

went

wrong like so and then let's keep on

moving let's keep on moving and where we

have the rejected now we can look for

that action in our case again we don't

have any error values in the state or

nothing like that but let's just log

whether we can see that action whether

we can see that everything works and

since we are using axial so now I can

mess up the URL and for axios it will be

an error what that means well we will

trigger this and we'll basically pass

this value

down to our rejected so let's save it

and then notice in the console we right

away see this log and we have this

payload where we have something went

wrong so for example if we're getting

some kind of error from the API it's

going to be located and error response

and we can actually pass this down using

thunk API and then reject with the value

so that's how we can set up asynchronous

functions with Redux toolkit and this

concludes our tutorial hopefully

everyone enjoyed it and I'll see you

next videos if you have been following

along with the videos and if your app

uses latest Redux toolkit version most

likely

you see the following warning message in

the browser the object notation for

create slice extra reducers is

deprecated and will be removed in rtk so

Redux took it

2.0 please use the Builder callback

notation instead

and before we navigate to the docs

effectively

it means that we need to refactor our

extra reducer setup in the card slice

now the good news is that we won't have

to change our logic too much only the

way we pass our callback function and

life cycle actions

so let me click on this link we'll

navigate to the docs create slice yada

yada and we're looking for that I mean I

keep forgetting his name the Builder

callback notation that's the one that we

want to use effectively like I said we

won't have to change too much

so we'll go with X reducers and I will

have a function so pass in the function

and the first parameter they call

Builder so we will also call it Builder

and then we go with Builder the dot add

cache

and then lifecycle actions stay the same

so we're still looking for pending

fulfilled as well as rejected and the

same is with the Callback function it's

still going to have the same parameters

we'll just pass it here as a argument

so life cycle actions stay the same as

well as the Callback function the only

difference is that now we need to pass

them as arguments in this ad cache and

yes for every life cycle action

just like we did with object notation

we'll just add this case

and I think

it's going to make more sense if we just

start working on that so let me navigate

back again I'm located in the cart slash

I have my extra reducers as you can see

we have these lifecycle actions for get

card items and now we just want to

refactor this to Builder I mean again

let me double check

for some reason I just can't remember

the name Builder callback notation

that's the one that we want to use

um in order to

make it easier I'm just going to type

here extra reducers on top and I'll

reuse the code

so that way you can clearly see that the

setup is pretty much the same so here we

want to passively function like so

that's the first step then we want to

set up the parameter

and we'll call this Builder and then we

go with Builder and then add cache so

this is a method so we need to pass in

some arguments the first one is going to

be that a life cycle action what do we

have over here we have get card item

spending so that's the one that we want

to use so let's cut this one out pass it

in as you can see syntax stays exactly

the same the only difference is that now

we don't pass this into the square

brackets that's it that's the first

parameter second one

or argument more correctly the second

thing that we want to pass is that

callback function and notice how the

syntax pretty much stays exactly the

same and yes

the same parameters State and action and

yes we still update the state within the

function body again I know I'm being

annoying right now but I just want to

make it extremely clear

that all the functionality we have

learned so far stays the same the only

difference is how we invoke it here

that's it that's the only difference so

let's cut this one out again the

function make sure that you don't have

any syntax bugs and we're done that's

our first case for depending one and of

course what do we need to do we need to

set up the same ones for fulfilled

rejected then we can remove the sucker

altogether and we're going to be good to

go we'll have no warning messages in the

console and as you saw in the message

where if you're using the

Redux toolkit 2.0 or creator of course

then

essentially it's not going to be

supported so let's just go with that

case yes effectively we just want to

change here add one and then I'll add

one more case right away like so and now

let's set it up

this one is going to be straightforward

we just want to copy and paste

there's not much logic in here so let's

cut it out let's pass in the comma the

only thing you need to look out for is

some uh sewer syntax bug

so let me take it here which by the way

I'm an expert on so I'll take my sweet

time while I'm setting this one up comma

here copy and paste yep everything is

good to go we just remove the extra

reducers we save once I navigate to the

browser as you can see I have no error

so now our extra reducers is using the

Builder callback notation all right that

concludes the video thank you for

watching I hope you enjoyed this video

and learn something new

if you want to continue learning react

and take your skills to the next level

be sure to check out my reactors in

there you'll find bunch of additional

in-depth tutorials challenges and

projects designed to help you master

this powerful library to get started

just head over to johnsmilk.com thanks

again for watching and I'll see you in

the next one