Download "React Course For Beginners - Learn React in 8 Hours"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Ff55qeKGgB_M%252Fmaxresdefault.webp&w=1139&q=75)
Table of contents
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F6ZQQklg4WLk%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FCgkZ7MvWUAA%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FFXm7Dfre60I%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FGK2TiAAxmQ0%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FMJxHuxd5b5s%252Fsddefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FQGXUUXy0AMw%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FXnbUHzZkypQ%252Fmaxresdefault.webp&w=1139&q=75)
![Real Hiring Middle Ruby on Rails Interview [ENG]](/_next/image?url=https%3A%2F%2Funidownloader.com%2FcontentImages%2F1kuGQBWaVOoYq0-aeDYYDWGE8kc%3D%2Ffilters%3Aquality(80)%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fi7WxxjJX0wA%252Fsddefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fj1UnaZ-De10%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fre3OIOr9dJI%252Fmaxresdefault.jpg&w=1139&q=75)
Video tags
Subtitles
Russian
00:00:01
with another video and today I'm really00:00:04
excited to bring to you guys my00:00:06
finalized react.js beginner course as00:00:08
many of you might know I've been making00:00:09
react tutorials for the past three years00:00:11
and I started this channel by creating a00:00:14
very simple react course for beginners00:00:16
but that course is very outdated so I00:00:19
decided to create this whole playlist or00:00:21
this whole video in order to help those00:00:23
who are trying to learn react and are00:00:24
having difficulties with it now I'm00:00:26
basing this whole course on my personal00:00:29
experience because I I learned react00:00:31
without buying any paid courses without00:00:34
going to class without boot camps00:00:36
without anything it was all teaching00:00:38
myself so I had to struggle just as many00:00:41
of you have in order to learn this00:00:43
technology now that I am way more00:00:44
experienced with it I feel like it is my00:00:46
job to help those who are exactly in the00:00:49
same position I was three years ago so00:00:51
that's exactly the reason why I decided00:00:53
to make this course and for those00:00:54
wondering in this course we're going to00:00:56
learn a variety of different topics00:00:58
we're going to learn everything from00:00:59
some basic hooks learning how to create00:01:02
components all that kind of stuff to00:01:04
also using some very commonly used00:01:06
libraries at the end of this course00:01:08
we're going to build a three-part00:01:09
project where we're going to basically00:01:12
build a simple social media type project00:01:16
using Firebase and react it's really00:01:18
cool00:01:19
um I would stick around and watch00:01:20
everything from the beginning but if you00:01:22
already know a little bit of react and00:01:24
you just want to learn a specific topic00:01:25
you can use the timestamps that are00:01:27
attached to this video in order to00:01:29
navigate through it I know it's pretty00:01:31
long so if you just want to learn a00:01:32
single part of it you can just go00:01:33
through it or you can also check out the00:01:35
playlist with all of those videos posted00:01:37
separately I always do this when I make00:01:39
a course I post it separately and also00:01:41
unite them into a single video so if00:01:43
you're interested in that you can just00:01:44
check it out not to mention at the end00:01:46
of each topic I'll also present an00:01:47
exercise and the solution to it and all00:01:50
of the code in the video will all be in00:01:51
the description you can just go to the00:01:53
source code then it's going to be a00:01:54
GitHub repository you can change the00:01:57
branch to each episode or each module of00:01:59
this course and and just look at the00:02:00
code you're interested in now I'm really00:02:02
proud of this course especially because00:02:04
those who watch the course from the00:02:07
beginning uh really really enjoyed it00:02:09
and I enjoyed making it as well so if00:02:11
this ends up helping you don't forget to00:02:13
leave a like or leave a comment just00:02:15
letting me know because then I'll know00:02:16
to make more videos like this so without00:02:18
wasting any more time let's get into the00:02:21
video00:02:22
[Music]00:02:23
[Applause]00:02:25
[Music]00:02:29
[Applause]00:02:31
okay everyone so the first thing I want00:02:34
to go over is why exactly you should00:02:36
learn react now this is a kind of a00:02:39
trivial question because if you're00:02:40
watching these videos00:02:42
um you're probably already know why you00:02:44
would want to learn react however you00:02:46
got to understand exactly why it is00:02:49
required for you to learn react in order00:02:51
to improve as a developer or a web00:02:54
developer more specifically now the00:02:56
reason why I'm saying this is because I00:02:58
remember in the beginning I was really00:02:59
used to just coding websites using00:03:02
vanilla JavaScript or some really00:03:04
outdated framework such as jQuery and00:03:07
when I started learning react I was00:03:08
wondering to myself why am I wasting00:03:11
time learning this when I can when I can00:03:13
do all of this using some sort of00:03:15
outdated method and that really stunted00:03:18
my my growth for a bit it definitely00:03:21
made it so that I took a little bit00:03:22
longer than than usual to learn the00:03:25
basics of react and and for that reason00:03:27
I wanted to start out by just explaining00:03:29
to you guys why you should actually00:03:30
learn react now the first thing I want00:03:31
to say is that you will love react I'm00:03:34
be honest if this is the first framework00:03:36
you're learning I'm not saying react is00:03:38
perfect but I'm just saying if this is00:03:39
the first time you're learning a00:03:41
framework and you're coming from just00:03:42
knowing vanilla JavaScript and coding00:03:44
websites without using any of the00:03:46
available Frameworks out there I'm going00:03:49
to let you know that you might not like00:03:50
it in the beginning but you will love it00:03:52
after a while the the the way in which00:03:55
using a framework abstracts complexity00:03:58
in your project is is really nice I I00:04:01
love it as soon as I realized um how00:04:03
much less code I had to write in order00:04:06
to make a complex website compared to00:04:07
something like using normal JavaScript I00:04:10
I really fell in love with using00:04:12
something like react now like I00:04:14
mentioned react is not the perfect00:04:15
framework at all it is an open source00:04:17
Library created by Facebook and00:04:19
maintained by a Facebook group which00:04:21
constantly deals with uh backlash and00:04:25
opinions from other people people on how00:04:27
certain things should be handled react00:04:29
is constantly updating and constantly00:04:31
being maintained which is really nice00:04:32
and has a massive Community around it00:04:35
everyone knows their react dominates the00:04:37
the JavaScript framework Library00:04:39
industry right and the reason for it is00:04:42
because react right in the beginning00:04:43
when it started to be created it came up00:04:45
with a concept called the virtual Dom00:04:47
which was pretty new at the time you see00:04:50
angular which is another framework00:04:53
copied or it's got inspired by this this00:04:56
concept but I feel like react did it in00:04:59
a better way and was already getting00:05:00
more popular by the time that angler00:05:01
released its new version now react00:05:04
changed a lot throughout the years you00:05:06
might go to YouTube and watch a tutorial00:05:08
from 2018 and see code that is00:05:10
completely different from what it is00:05:11
right now so it is important for you to00:05:14
recognize that the date in which you're00:05:16
watching your tutorials is really00:05:17
important now most companies out there00:05:19
will be using react or some sort of00:05:21
alternative to react that is based on00:05:22
react such as nexjs for example and and00:05:26
that's for my in my opinion already a00:05:28
really a pretty good reason for you to00:05:29
start learning it because if it is a00:05:31
standard in the industry00:05:33
um and you're going to be working on the00:05:34
industry you better be aligned with what00:05:36
people are using and you'll have a much00:05:38
easier time finding a job if you know00:05:39
something that is way more popular a lot00:05:41
of the big companies out there are using00:05:43
react and some sort of part of their00:05:44
application and00:05:46
um it is important for you to understand00:05:48
that it's not only how the framework00:05:51
Library performs that makes it good the00:05:54
community and the the amount of people00:05:56
who Embraces that project definitely00:05:59
plays a role in it and react definitely00:06:01
wins in that specific case now it's hard00:06:03
for me to talk specific things about why00:06:05
you should use react because you haven't00:06:07
probably used react in the past so00:06:09
explaining stuff that are more technical00:06:11
is pretty hard so I'm gonna be00:06:13
mentioning this kind of stuff throughout00:06:15
the course00:06:16
um just so you guys can refer to that in00:06:18
the beginning but for now just00:06:19
understand that react is widely used in00:06:22
the world it is it will make your life00:06:24
way easier when you start building any00:06:26
thing which is a little bit more00:06:28
complicated than a than a medium project00:06:29
and00:06:31
um it will make your life easier in the00:06:33
long run so that's why I think you00:06:35
should be learn and react now I want to00:06:37
go over uh some of the stuff that I'm00:06:39
expecting you to know before we get into00:06:41
the course00:06:42
um so these are the kind of stuff that I00:06:43
will gloss over or not explain much00:06:45
because00:06:47
um it's assumed that you already know in00:06:49
order to start learning this course now00:06:51
what I'm assuming is that you already00:06:53
know HTML and CSS now I'm also assuming00:06:57
that you know a little bit of JavaScript00:06:59
I personally didn't learn00:07:02
um JavaScript before react I knew the00:07:04
basics like really basic stuff but I00:07:06
wasn't good at it at all so for that00:07:08
reason I am assuming you know HTML CSS00:07:10
and the basics of JavaScript00:07:12
um because if you don't00:07:14
um it will make learning the score this00:07:16
course a little bit difficult however I00:07:18
will still be going over some JavaScript00:07:20
stuff like00:07:21
um some functions that are going to be00:07:22
consistently using some different00:07:24
methods and Concepts that are important00:07:26
so if this isn't you and you don't know00:07:29
the stuff that is required for this00:07:31
course I recommend just working a little00:07:33
bit before you actually start watching00:07:34
the videos so now that I went over all00:07:36
of the stuff that I really wanted to00:07:37
talk about let's start with actually00:07:40
working with our first piece of code00:07:42
what we're going to be doing is we're00:07:43
just going to start by setting up a00:07:45
react application inside of our computer00:07:47
and just looking at how the project00:07:50
looks so let's get into it so let's get00:07:54
started on setting up our first react00:07:56
application I want to start off by00:07:58
saying that the code for every episode00:08:00
in this whole course will be in the00:08:03
description so if you want to go to the00:08:05
code for a specific episode you can just00:08:07
go to the link in the description or you00:08:09
go to the original repository on GitHub00:08:12
and just move throughout the different00:08:14
branches that I'm gonna create for this00:08:17
project or this whole course so what we00:08:19
need to do in order to set up our first00:08:22
react application is make sure that we00:08:24
first have a code Editor to work with i00:08:27
a hundred a thousand percent recommend00:08:29
using vs code it is pretty much a00:08:31
standard in the industry and I've tried00:08:32
a bunch of editors this one is the best00:08:34
one00:08:35
um so I would definitely recommend using00:08:36
it00:08:37
um also you need to make sure that you00:08:39
have both npm which is uh one of the00:08:43
most famous package manager out there00:08:45
you want to have it installed it doesn't00:08:47
have to be this specific version this is00:08:48
just the one that I'm using and you also00:08:50
need to have node.js installed so our00:08:54
node installed right so you can see I00:08:56
have both of them installed into my00:08:58
computer so those are the two things00:09:00
that are necessary for you to actually00:09:02
create your first react application now00:09:04
in order to create your application you00:09:07
need to open up a project a folder00:09:09
inside of your vs code so what I did is00:09:11
I just opened over here as you can see00:09:13
that I have a folder called episode one00:09:15
and I just opened it up inside of my vs00:09:18
code um like app and inside of the terminal00:09:21
over here what I want to do is I just00:09:24
want to run the command npx00:09:26
create00:09:28
react00:09:30
app like this now what this does is the00:09:33
create react tab will generate a00:09:35
boilerplate code for a very basic react00:09:39
application and we can specify where we00:09:42
want to create this application by00:09:44
putting for example the name of the00:09:46
folder where our app will be created00:09:48
right so if I I had a I was creating for00:09:51
example a social media website I could00:09:53
create put over here social media00:09:55
website and what would happen is it00:09:58
would create a react application and00:10:00
would also create a folder called social00:10:02
media website and put the correct react00:10:04
application inside of that folder in our00:10:06
case we want to create the react00:10:07
application inside of the folder we are00:10:09
already inside which is the episode one00:10:11
so what we can do in that case is just00:10:13
put a dot it doesn't matter what way you00:10:16
do it you can do it both ways I'm going00:10:19
to do it this way so that when I press00:10:20
enter you'll see that it will start00:10:22
generating our application and it will00:10:24
generate the files inside of the the00:10:26
folder we are currently inside so it00:10:29
will start running all of these commands00:10:32
um and it won't take a while it actually00:10:34
doesn't take uh it takes less than a00:10:36
minute but I'll be back in a second when00:10:38
this is done okay as you can see00:10:40
um it just finished everything you00:10:41
you'll notice it finished because at the00:10:43
end it will say happy hacking and that's00:10:45
the the signal that you have that00:10:47
everything was installed um correctly00:10:49
we're gonna clear it up and just close00:10:51
our terminal and you can see we have a00:10:53
bunch of different folders and files00:10:54
over here on our left I'm going to go00:10:56
over each one of them and explain to you00:10:58
guys what they mean so basically we00:11:00
first have a readme which is just00:11:02
something for GitHub for example uh I00:11:05
would just ignore it for now00:11:07
um we also have the git ignore which is00:11:09
also something for GitHub I would also00:11:10
just ignore it then we have our00:11:13
package.json and our package log.json so00:11:17
this comes when you install any packages00:11:18
using npn00:11:21
package.json is just a Json file which00:11:24
contains information about your project00:11:25
and also about all the dependencies that00:11:28
you have installed in your application00:11:30
so our project as you can see by default00:11:33
its name is episode one because it's the00:11:35
name of the folder you can obviously00:11:36
change all of this this is more for00:11:39
documentation purposes00:11:41
um because for example if you were to00:11:43
create or clone this application00:11:47
um you can just look at all the00:11:48
dependencies which are just La extra00:11:49
packages and libraries you install in00:11:51
your project to then know what you need00:11:53
to install in your own project so you00:11:55
can see we have already with the command00:11:58
installed the react library and the00:12:01
react Dom Library together with all of00:12:03
the other stuff that comes with this00:12:05
command now all this stuff over here00:12:07
they're meant to I wouldn't worry about00:12:10
them for now we will go over all of this00:12:13
later but for now let's just keep it00:12:14
like this just understand that this is00:12:16
mainly for documentation purposes then00:12:19
I'm also going to ignore the package00:12:21
log.json because it really doesn't00:12:22
matter for now and also the node modules00:12:25
because most of you guys might know this00:12:26
is just a folder containing all the00:12:28
packages and libraries you installed so00:12:30
we have over here by default in a react00:12:32
application our public and our source00:12:34
folder our public folder is just00:12:37
containing a bunch of00:12:39
um kind of static files right so we have00:12:41
an a bunch of pictures by default like00:12:43
logos that come with the boilerplate00:12:46
code we also have a bunch of text files00:12:49
and Json files and also importantly an00:12:53
HTML file now why do we have an HTML00:12:56
file over here when we are working with00:12:58
a react application we're not going to00:13:00
be creating HTML files this is something00:13:02
that is really important to understand00:13:04
because react provides us with a method00:13:07
of creating an application which is a00:13:09
single page application and what does00:13:11
that mean exactly it means that our00:13:13
whole app will exist inside of one00:13:15
single HTML file which is the index.html00:13:18
so what happens is inside of this file00:13:21
over here we're going to have a div as00:13:24
you can see over here a single div with00:13:26
an ID of root and what react does is00:13:28
when you on when you enter in the00:13:30
website page react will grab all the00:13:32
code you write all the react code you00:13:34
write with JavaScript and just put00:13:37
everything inside of this div now why is00:13:40
this good well there's benefits and00:13:41
there's negatives to it one benefit is00:13:44
that you will not need to be downloading00:13:46
more files as you move in your00:13:48
application if you just have multiple00:13:50
HTML files for each page of your app you00:13:52
need to download that HTML file every00:13:54
single time you move on your app but00:13:56
with react that's different everything00:13:58
is is downloaded before and you don't00:14:00
need to download anything more when00:14:02
you're navigating right so this is00:14:04
important to understand because we're00:14:05
not going to be creating HTML files but00:14:07
rather our whole app will exist inside00:14:10
of JavaScript files which you can see00:14:12
over here or typescript files if you're00:14:14
going to use typescript we're going to00:14:15
talk about typescript later on inside of00:14:17
this course but this is how the source00:14:20
folder basically00:14:21
um looks like so we have a couple files00:14:24
over here we have our test files our00:14:26
setup tests and we also have a report00:14:29
web vitals.js we have a logo which like00:14:32
I mentioned it just is just coming with00:14:34
the initial boilerplate code we have an00:14:38
index.js file a index.css file00:14:42
um a test an app.test.js file and app.js00:14:45
file and an app.css file now I want to00:14:49
run this application right now before we00:14:51
before I go over those files and before00:14:52
I do anything so you guys can see how00:14:54
our app looks using the create react tab00:14:57
command now in order to run our first00:14:59
react app I just need to come over here00:15:01
and I just need to put npm start now00:15:05
what this is going to do is this is00:15:06
going to start running our application00:15:09
into a live server inside of our browser00:15:11
the server will run on the localhost00:15:14
3000 so make sure you don't have00:15:15
anything running on the port 3000 and00:15:18
every time you make any changes into00:15:19
your code and you save the file it will00:15:22
automatically refresh and rerun your00:15:23
application so it shows the changes so00:15:25
I'm going to press enter over here and00:15:27
it will start running everything and you00:15:29
can see on my browser now I am inside of00:15:32
the localhost 3000 this is how our00:15:34
project in additionally looks like00:15:36
because this is how it comes with the00:15:38
create react tab command but we're00:15:40
obviously going to make a single change00:15:41
into our project so we can show Hello00:15:44
World appearing in our screen so in00:15:46
order to do that I want to come over00:15:47
here and I want to go over what the00:15:49
files are right so some of these files00:15:52
are actually unnecessary and I won't00:15:54
even go over them right now and that's00:15:56
important for me to emphasize because if00:15:58
you try to understand them now it will00:16:00
just waste your time because you00:16:01
definitely won't be using them for a00:16:03
while in the beginning of your journey00:16:05
for learning react so I'm going to00:16:07
delete this set of tests over here the00:16:10
report web vitals the local.svg the00:16:14
index.css the app.test.js and that's00:16:18
basically it so I'm just going to delete00:16:20
them like this and now it should be fine00:16:23
now since we deleted the index.css and00:16:27
the report web vitals if you recall I00:16:29
just deleted those files you also have00:16:30
to delete their import statements from00:16:32
the index.js so I'm going to delete both00:16:35
of them and this call over here00:16:38
and I'm going to save it right now00:16:40
then I also need to delete the stuff00:16:43
that we imported in the app.js which is00:16:45
the logo00:16:47
and I'm just going to delete all of this00:16:49
code over here because this is the code00:16:51
that comes with that makes our website00:16:54
appear like it was before right now you00:16:56
see it's just a blank page because we00:16:58
deleted everything00:16:59
now what I want to explain to you guys00:17:01
is that when you have that HTML file00:17:04
over there right we have I mentioned to00:17:06
you guys that we have the single HTML00:17:08
file well inside of the index.js this is00:17:11
where we create a react like element a00:17:15
route to all of our code and we put it00:17:17
inside of the element in the HTML file00:17:20
with the ID root so you see what it's00:17:23
doing over here is it's grabbing this00:17:25
div over here and it's putting all of00:17:28
our code inside of that div now what00:17:31
exactly is it putting inside of that div00:17:33
well it's going to be putting this thing00:17:36
over here which is known as a component00:17:37
I'm going to go over components in the00:17:39
next video but think about it this this00:17:42
way all of the code in your project will00:17:44
initially exist inside of this app00:17:48
function over here now I know if this is00:17:51
the first time you're looking at react00:17:52
you might think this is this looks weird00:17:54
you're creating a function that Returns00:17:56
what looks like HTML well don't worry I00:17:59
will go over this in the next video but00:18:01
for now if we want to display hello00:18:03
world inside of our project all we have00:18:06
to do is just write hello world over00:18:08
here save it and if we come to our00:18:11
Google Chrome you'll see it says hello00:18:13
world in our screen okay everyone so00:18:16
like I mentioned um in this episode00:18:17
we're going to start actually working00:18:19
with react code and in order to start00:18:21
talking about react code I need to00:18:23
explain to you guys what exactly is jsx00:18:26
so if you've like I mentioned in the00:18:28
previous episode00:18:30
um this over here might look kind of00:18:32
weird for people who are used to normal00:18:34
HTML or normal JavaScript because what00:18:38
it looks like is a JavaScript function00:18:40
that returns a HTML div which is weird00:18:44
because this is not how you actually00:18:46
normally do when you're working with00:18:48
something other than react or any other00:18:50
framework that does something similar to00:18:51
this and the reason for that is because00:18:53
this isn't JavaScript and this isn't00:18:55
HTML this is something called jsx This00:18:59
is a syntax presented by react which00:19:01
makes it a lot easier for you to mix00:19:03
rendering logic with UI stuff right so00:19:07
we're just mixing our JavaScript and our00:19:09
HTML together to create this thing00:19:11
called jsx now what exactly does this00:19:14
mean well it means that every single00:19:17
time you're going to display some sort00:19:18
of UI in your screen or a group of uis00:19:20
you're going to create a function that00:19:23
will return some HTML now I'm going to00:19:26
go more into that later on in this video00:19:28
when I'm talking about components but00:19:30
for now just know that probably all of00:19:32
your jsx will be rendered inside of some00:19:35
sort of function that is returned00:19:38
instead of a return statement of some00:19:39
sort of JavaScript function so what00:19:42
exactly does this benefit us well think00:19:44
about it this way you've probably used00:19:47
some sort of template JavaScript00:19:48
language that allows you to put00:19:51
Javascript inside of HTML but with jsx00:19:54
it's very simple for example we have00:19:56
over here our hello world being00:19:58
displayed which as you can see it just00:20:01
displays hello world in our screen but00:20:04
if I want to for example create some00:20:06
sort of variable let me call it name and00:20:10
I set it equal to pager which is my name00:20:12
right I can do this this is inside of a00:20:15
function so I can I can just declare00:20:17
variables but if I want to display Pedro00:20:19
inside of my UI or instead of my div00:20:23
what I can do is I can just delete this00:20:26
hello world and I can just open and00:20:28
close curly braces and what I'm saying00:20:31
here is that I'm going to be putting00:20:32
some JavaScript inside of this div or00:20:35
inside of this and I'm saying with00:20:37
quotes HTML because this is not HTML00:20:39
this is called jsx so whenever I say jsx00:20:43
just note that I'm I'm talking about00:20:45
this whole kind of syntax over here00:20:47
which includes the JavaScript and the00:20:49
HTML so what exactly I can do here is I00:20:52
can just display the name and what it00:20:54
will do is it will get this string and00:20:57
just put it inside of the div so if I00:21:00
save this and I come over here you'll00:21:02
see that my name is being displayed so00:21:05
what I want to to try out with this is I00:21:07
want to play a little bit more with this00:21:09
so why is this cool well because00:21:11
obviously if I wanted to have multiple00:21:14
um instances of this variable I could00:21:18
just do something like this I can just00:21:19
declare name inside of a for example a00:21:23
header tag like this and I could just00:21:25
copy and paste this three times and I00:21:27
don't need to rewrite that in Pedro00:21:28
because the variable will represent it00:21:31
for me and I can just come to my Chrome00:21:32
and you can see that Pedro is being00:21:34
displayed in our screen so you can get00:21:36
an idea of why this is cool right but00:21:39
that's not all you can do right here00:21:41
we're just name is just a string right00:21:43
and that's all in all we have to declare00:21:45
our H1 tag every time we want to declare00:21:49
a name but what if we don't want to do00:21:51
this what if we want to just by default00:21:54
say that the name variable is already a00:21:57
header tag well you can do that because00:21:59
with Js GSX like I mentioned you can mix00:22:01
JavaScript with HTML so any variable can00:22:05
actually be represented by some sort of00:22:07
HTML or jsx element so instead of name00:22:11
being a string it can actually be a00:22:14
header tag with00:22:16
um the name Pedro like this I can say00:22:19
over here00:22:21
Pedro00:22:23
or I'll put it normally like this and00:22:25
now instead of saying name three times00:22:27
inside of an H1 tag I can just say name00:22:30
three times like this00:22:32
and I'll just put it twice because you00:22:34
guys will get the point but you'll see00:22:36
that it still is an H1 tag it's not a a00:22:39
normal uh I don't know P tag or a normal00:22:42
string instead of our00:22:43
um a website it's an actual header tag00:22:46
so this is really cool00:22:48
um you can see how this can be really00:22:50
useful and will be really useful later00:22:52
on but this is kind of the introduction00:22:54
I wanted to give to you guys of what00:22:56
exactly GSX is it's just a mix between00:22:58
JavaScript and HTML which allows you to00:23:01
put Javascript variables and logic00:23:03
inside of your UI now this is really00:23:06
cool right00:23:08
um but imagine if you want to create00:23:10
some sort of00:23:11
I don't know some sort of Imagine This00:23:13
is a website and we have a div over here00:23:16
which is displaying something like uh00:23:18
information about a user right or a00:23:20
person00:23:21
well I could create variables like name00:23:23
like this and I could00:23:27
um just say Pedro I could also create00:23:28
some variable called age and just00:23:31
display it as a h2 tag just to make it00:23:34
different and just say for example I'm00:23:37
21 and I don't know I'm going to put one00:23:39
more thing probably email00:23:41
as just as an example but we want to00:23:43
describe an email and say something like00:23:46
Pedro at pedro.com something like this00:23:49
right00:23:50
well I could put all of these variables00:23:53
inside of this div like we did before00:23:56
and say age like this and then email00:23:59
like this and it will be displayed in00:24:02
our screen right we can see it over here00:24:05
but what if we want to have multiple00:24:07
instances of this user in our screen00:24:09
well we can just copy and paste this00:24:12
obviously a bunch of times and that00:24:15
would be cool as you can see over here00:24:17
now the thing is00:24:20
um00:24:21
this is very ugly you can see we're just00:24:23
our code is becoming bigger and bigger00:24:25
every time we do this you might argue00:24:27
that we can just create00:24:29
um something like this a user and set it00:24:33
equal to00:24:34
um00:24:35
one of this right this whole thing and00:24:39
then just display it a bunch of times00:24:41
inside of here because this is something00:24:44
I mentioned to you guys right I said00:24:46
that you can just store your y inside of00:24:48
a variable and you can just display user00:24:50
and then user and then how many times00:24:54
you want right and this will work as you00:24:56
can see over here it will work if I come00:24:58
to my browser you can see it is00:25:01
displaying each user a bunch of times00:25:03
which is great but there's a better way00:25:06
to do this right if you look at here00:25:09
we're storing all of this UI stuff all00:25:12
of this jsx or HTML inside of a variable00:25:16
you might also notice that there is it00:25:18
was automatically input here a00:25:20
parenthesis around this00:25:22
um and I'll go over more of that later00:25:25
but just know that because this takes up00:25:29
more than one line in our code because00:25:32
obviously we can all we can put all of00:25:34
this into one line but this is currently00:25:36
taking up more than one line we have to00:25:38
surround it with parentheses that's just00:25:40
something I wanted to mention you see it00:25:41
over here as well it's just part of how00:25:44
the syntax works but you see we're00:25:47
storing all this UI into a single00:25:49
variable but there's a way better way of00:25:51
doing this which is more important and00:25:54
you'll be using a lot of it throughout00:25:56
your your code right through your00:25:58
projects which is using a component00:26:01
inside of your project now what exactly00:26:04
is a component well you're looking at a00:26:06
component right here inside of this code00:26:08
because this function over here the app00:26:11
function is what is known as a component00:26:14
well a component is just a JavaScript00:26:17
function that returns some sort of UI or00:26:20
some jsx or if you still are used to the00:26:24
word HTML it's just a JavaScript00:26:26
function that returns and quotes HTML00:26:28
because it's not HTML it's jsx so what00:26:32
does this means well it means that for00:26:34
example I'm going to come up with some00:26:35
example over here I'm going to create00:26:37
two functions so I'm going to create a00:26:40
function called get name like this and00:26:44
this function will return a string00:26:47
called Pedro00:26:49
and I'm going to create another function00:26:52
called get or get name component I'm00:26:56
making it really obvious which one is00:26:58
the component and which one isn't and00:27:00
this will return00:27:01
an H1 tag which is jsx and it will00:27:06
return the word Pedro now this over here00:27:10
is a JavaScript function this over here00:27:13
is a react component what is the00:27:16
difference well like I said this returns00:27:19
some sort of primitive JavaScript type00:27:21
or it just doesn't even have to return00:27:23
anything it can just be a function that00:27:24
doesn't return anything but with00:27:26
components you will always be returning00:27:29
UI stuff such as a H1 tag or divs or00:27:33
whatever you want there's important00:27:35
stuff for you to know as well every00:27:37
component needs to start with a capital00:27:39
letter so you can't create a component00:27:42
that starts with a lowercase letter00:27:45
while in in JavaScript you can create a00:27:48
function that starts with a lowercase00:27:50
letter both components you can't so00:27:52
that's important for you to notice00:27:53
because it's a mistake that a lot of00:27:54
beginners make when they're trying to00:27:56
create components and they they don't00:27:57
understand why it's not working well it00:27:59
might be because of this well I'll just00:28:01
explain to you guys what a component is00:28:03
and how to create one but I haven't00:28:05
really gone into too much detail about00:28:06
why you would much might want to use a00:28:08
component well I'm letting you know00:28:10
right now components are one of the most00:28:12
important things in react and you will00:28:13
be using it throughout your whole00:28:14
project the reason for this is because00:28:16
whenever you have some sort of piece of00:28:18
code that you might want to reuse it00:28:20
really easily or you might want to00:28:22
organize it in some sort of way that00:28:24
will make your project not look messy00:28:26
you would always do this using00:28:28
components so for example using the00:28:31
example that we had before right where00:28:33
we have this user thing that includes a00:28:36
name and agent email well inside of this00:28:39
file I can just create a user component00:28:42
like this and remember capital letter in00:28:46
order to be a component and just put00:28:48
that this will return a div00:28:51
including all of this information right00:28:54
now name Asian email it doesn't have to00:28:57
be a variable uh like I was doing before00:29:00
uh we can just delete this like this I'm00:29:02
just going to delete all of this and I'm00:29:04
just going to put all of this inside of00:29:07
um this div I'll just say that there's00:29:09
an H1 tag which is going to be saying00:29:11
Pedro00:29:13
um00:29:14
then there's uh I'm going to do for the00:29:16
other ones as well00:29:18
um one which is my age and it will say00:29:21
21 and then one which will be my email00:29:23
which will say Pedro pedro.com right so00:29:27
we now have this function called user or00:29:29
this component called user which returns00:29:32
this div right so what I can do now is00:29:35
if I want to display it inside of my00:29:37
compo inside of my app component which00:29:39
if you remember the app component is the00:29:42
first component that is being displayed00:29:44
in the website so when you go into the00:29:45
website this is this UI over here is00:29:48
what is going to be displayed so would00:29:51
it work if I just came over here and00:29:53
called user like this like we were doing00:29:55
before let's check it out00:29:58
um it doesn't it doesn't because this is00:30:00
not how you actually work with00:30:02
components you can they're not variables00:30:04
you can't just call them like this with00:30:07
components they in order to call them00:30:10
what you have to do is you have you have00:30:11
to use this specific syntax where you00:30:14
write component names like this00:30:17
and you self-close it as if it was some00:30:20
sort of HTML element right now you can00:30:24
make it like this as well00:30:26
um but not now this is something we'll00:30:28
learn later on into the course before00:30:31
most of the components you'll start in00:30:33
the beginning and even later on they are00:30:36
all self-closing like this so this is00:30:38
how we're calling this component and you00:30:40
can see that this works because over00:30:41
here we're displaying the information00:30:44
now if I want to reuse this we can just00:30:47
do this many times and just paste it00:30:49
many times like this and you'll see that00:30:51
it will be displaying all the times that00:30:53
we copy and paste it now like I said00:30:56
this is great because instead of uh just00:30:59
rewriting all this code again and again00:31:01
we're just calling this function or this00:31:04
component three times and all of the00:31:06
code inside of that displays a user is00:31:09
Now hidden inside of this component so00:31:12
it makes your code look better because00:31:15
if for example we put this in a00:31:16
different file now this file doesn't00:31:18
have to have all the logic for this now00:31:21
as a beginner you shouldn't probably00:31:23
shouldn't be worrying that much about00:31:24
making your code look beautiful or about00:31:27
making your code look as optimized as00:31:29
possible but don't worry because we're00:31:31
gonna ease into working with more00:31:34
complicated in this stuff and making00:31:36
your project look better as we're going00:31:38
through the course but for now this is00:31:39
amazing now there's a concept I want to00:31:42
go over which is extremely important00:31:45
um because as you can see over here we00:31:47
are reusing this user component three00:31:49
times when there's a catch here the00:31:51
thing is it's displaying the same00:31:53
information for all of them which is00:31:55
kind of annoying right00:31:56
um like I don't want to see three like00:31:59
divs seeing the same name age and email00:32:03
I want to kind of change them00:32:05
um for each user that we try to display00:32:07
so how exactly would we do this well you00:32:10
know that in functions in normal00:32:11
functions in JavaScript you can just00:32:13
pass arguments right you can pass for00:32:15
example00:32:16
Pedro over here or something like that00:32:18
right but this is not how you do it in00:32:21
um react with components what you can do00:32:24
is you can have what is known as a prop00:32:26
and a prop is00:32:28
um just an object so a JavaScript object00:32:30
that exists inside of the argument of00:32:34
some sort of component so every react00:32:36
component will accept an argument to it00:32:40
which is an object called props like00:32:43
this and this object will represent all00:32:47
the data that we might want to pass in00:32:49
to this component so what kind of data00:32:52
can we pass in well we can pass every00:32:54
kind of data we want and how do we00:32:57
Define it well for example if I want to00:33:00
pass a different name a different age00:33:01
and a different email for each kind each00:33:04
kind of user well I can just say over00:33:06
here that for this user for each user00:33:09
I'll just pass a name like this and I'll00:33:12
say that for the first one is Pedro then00:33:14
I'll pass an H which I'll say that the00:33:17
age is00:33:19
um I'm gonna say 21 again and00:33:22
um you'll see over here with strings you00:33:24
can just pass it like this but with00:33:26
numbers you have to put curly braces00:33:28
that's something I wanted to mention in00:33:30
order to get confused by it and the last00:33:32
one is an email so I can just pass an00:33:34
email like this and say Pedro pedro.com00:33:38
right so I'm passing these three pieces00:33:41
of information to this component as00:33:44
props you'll know it looks kind of weird00:33:46
but this is how you actually do it in00:33:48
react so now we have three fields that00:33:50
are gonna exist inside of the props00:33:53
object so how will this props object00:33:55
look like well it will look something00:33:57
like this if you're familiar with with00:33:59
JavaScript objects this is one of the00:34:01
things that I've I assume you already00:34:03
know for this course but it looks00:34:06
something like this00:34:07
um it's an object with the a name that00:34:12
is something uh called Pedro then it has00:34:16
an age which is 21 and then there is an00:34:19
email which is the one that we wrote00:34:20
over there so this is how the props00:34:23
object now is being represented inside00:34:26
of our component which means that00:34:28
instead of manually displaying our names00:34:30
our ages and our emails we can just say00:34:34
something like this props dot name00:34:38
and say something like this props00:34:41
dot h or for this one we can say props00:34:46
dot email00:34:48
and you'll see that since we only00:34:50
displayed since we only passed in00:34:52
information for the for the first user00:34:57
you'll see that in our Chrome over here00:34:58
it only displays the first user because00:35:01
the other ones don't actually have any00:35:03
information coming in from the props but00:35:06
you can see it definitely worked right00:35:07
which means that if we want to call00:35:09
three different users we can just copy00:35:12
and paste this and just pass different00:35:13
props for each of them I can create one00:35:16
that is called Jake one that is called00:35:18
Jessica00:35:20
um Jake might be 29 Jessica might be 19000:35:25
um Jake might have an email also at00:35:28
pedro.co and Jessica as well and you'll00:35:31
see that00:35:32
um now it's really easy for you to00:35:33
rewrite code that looks different but00:35:36
has minimal changes to our actual code00:35:39
file components and props reduces the00:35:42
amount of code you have to write for00:35:44
more complex00:35:45
pieces of UI for example like this over00:35:48
here where a normal HTML and JavaScript00:35:51
we would have to maybe rewrite the div00:35:55
three times to display these three00:35:57
pieces of information here we can just00:36:00
do something like this and just reuse00:36:02
the code three times like this and00:36:04
change them depending on the props that00:36:06
we pass so I really want you guys to00:36:09
practice something like this before you00:36:12
get into the next video I'm gonna give00:36:13
you guys some sort of exercise that you00:36:15
can do on your own00:36:16
um and I really hope you guys understood00:36:19
what props components and jsx actually00:36:22
mean if you have any questions please00:36:24
leave a comment in the description00:36:25
especially with this course I will be00:36:28
100 focused on answering every single00:36:30
question because00:36:32
um I really want everyone to enjoy as00:36:33
much as you can from this course so00:36:36
please leave any comment in the00:36:38
description in the comment section and I00:36:39
will be answering so let's get into the00:36:42
exercise I want you guys to practice00:36:43
before going into the next episode okay00:36:45
everyone so the exercise I want you guys00:36:47
to practice is creating another00:36:49
component similar to the user one but00:36:52
for something like job information so I00:36:56
want you guys to create a component00:36:57
called job and it will have three00:37:00
different props it will have a salary00:37:01
prop uh position prop and a company prop00:37:05
now I want you to display very similarly00:37:08
to what we did in the video00:37:10
um just display them in the screen00:37:12
um one by one the salary amount the00:37:15
position and the company you can do it00:37:17
however you want00:37:19
um I would recommend not looking at the00:37:21
code that we wrote for user before00:37:23
starting doing this try to do it without00:37:26
looking at it and see if you can do it I00:37:28
don't think I need to write the solution00:37:30
for you guys but00:37:32
um I'll just show it to you in like 1000:37:34
seconds so do it00:37:36
um check to see if it's working and come00:37:38
back to see if you did it right so okay00:37:40
everyone um yeah this is this is the00:37:42
solution it's extremely similar to what00:37:44
we did before it's just I just tweaked a00:37:47
little bit the the values and the props00:37:50
um but this is how you would do00:37:51
something like that and I would00:37:53
recommend playing around with this um00:37:55
trying to display different information00:37:56
trying to do whatever you can to like00:37:59
make some sort of changes to it and see00:38:01
how it works and what happens okay00:38:03
everyone so to start off this episode00:38:05
I'm gonna first talk about how to00:38:08
implement00:38:09
um CSS inside of react and the reason00:38:12
why I even want to mention this and not00:38:14
just let it slide and assume you you can00:38:16
figure it out on your own is because for00:38:18
some reason I've dealt with this like I00:38:21
when I started this was something that00:38:22
annoyed me and it took me like 30 or 4000:38:25
minutes to figure it out for some reason00:38:26
so for that reason I just wanted to talk00:38:28
about it a little bit and explain to you00:38:30
guys how you do it so basically it's not00:38:33
that different at all00:38:34
um an example I have over here is we00:38:36
have this uh I just have my name Pedro00:38:38
being displayed and um over here we have00:38:41
a header tag an H1 tag display in my00:38:44
name Pedro right but there's a class00:38:46
name which is equal to name so what I00:38:49
want to explain to you guys is at the00:38:51
top by default it comes with an app.css00:38:54
right I mentioned to you guys that this00:38:56
comes by default right and it already00:38:58
has some styling to it because if you00:39:00
look at what we've been doing so far00:39:01
it's all been centered which is not how00:39:04
a website is by default so this is how00:39:06
it looks by default when you install00:39:09
using the create react app command so00:39:13
this file over here you can simply just00:39:15
add any CSS as you want I could just00:39:18
come over here00:39:19
and say dot name and for example make00:39:23
the color of the text be read and since00:39:27
we are importing over here it will work00:39:30
and you'll see that now it's red so the00:39:34
only thing I wanted with this is to show00:39:36
you guys that whenever you have a CSS00:39:38
file you can just import it like this by00:39:41
saying import you don't give it a name00:39:43
you just import and put the path to00:39:45
where that file is now there is00:39:48
something important I wanted to tell you00:39:50
guys as well there is something called00:39:51
CSS modules which is a different way to00:39:54
write your CSS so if you came over here00:39:56
and changed the name of this file from00:39:59
app.css to app dot module.css what this00:40:03
will do is it will make this file into a00:40:06
CSS module style sheet so what exactly00:40:09
does that mean it means that when I00:40:12
import instead of importing this way I00:40:14
can actually import it by saying import00:40:16
styles00:40:18
from00:40:20
App dot modules or module.css and then00:40:24
instead of declaring the the strings for00:40:27
the class names for example saying app00:40:29
or name directly over here what I can do00:40:32
is I can treat them like objects I could00:40:35
just say Styles dot app like this00:40:40
then say something like00:40:42
Styles dot name00:40:45
now why would you want to do this well00:40:47
it's kind of annoying to have strings00:40:49
all over your website or your code so00:40:52
maybe if you prefer to do something like00:40:54
this it's fine00:40:56
um I'm actually not going to do it this00:40:57
way although a lot of people do it this00:40:58
way you see that it still works even00:41:01
though we're doing it this method so you00:41:04
can see it works I'll just follow the00:41:07
normal way you use CSS because it's what00:41:08
I'm used to and um but I just wanted to00:41:11
point this out because a lot of people00:41:12
see this as well when they're coding in00:41:14
react so this is the basics of how do00:41:17
you how to use CSS in react now let's00:41:19
get into some more interesting stuff00:41:21
such as how to conditionally render in00:41:24
react okay so let's start talking about00:41:26
conditional rendering in react so like I00:41:30
mentioned when I started this course I'm00:41:31
assuming you know some stuff from00:41:33
JavaScript but I'll just do a really00:41:35
quick recap on the ternary operator00:41:38
which is a concept in JavaScript which00:41:41
allows you to write if statements00:41:43
without actually writing if statements00:41:45
right so you know if statements are used00:41:47
for conditionals when you say something00:41:49
like if this then that00:41:52
um but you there's a shorthand notation00:41:54
which which is way more useful when you00:41:57
have situations where you don't like00:42:00
want to use multiple lines so this is an00:42:02
example that just demonstrates uh what00:42:04
can be done so for example imagine we00:42:06
have a variable called H and we want to00:42:09
control log the text is over age if it00:42:12
is under over 18 and console log is00:42:15
underage if it is under 18. well if00:42:19
we're using an if else statement we do00:42:20
it this way00:42:22
but we could use instead of this just a00:42:25
ternary operator and say something like00:42:27
if age is greater than or equal to 1800:42:32
then we want to00:42:35
console log00:42:37
the text right I'll just write whatever00:42:39
here uh but else00:42:43
we want a console log something else00:42:45
right now I'm not going to finish00:42:46
writing this because it's redundant but00:42:48
you can see that this serves as an if00:42:50
and this serves as an else and this is00:42:52
really important there's also the double00:42:54
am percent which serves as kind of like00:42:56
if something is true then do this right00:42:58
and I'm not gonna go too much in depth00:43:01
about this because this is something00:43:02
that you should have learned in in00:43:04
JavaScript but it will be super00:43:06
important when you're working with react00:43:09
and I'll show you guys exactly why that00:43:10
is important if we have some text over00:43:12
here where we want to display based on00:43:14
some sort of condition we can do that00:43:16
very easily by using conditional00:43:18
rendering so the most simple simplest00:43:21
way to conditionally render in react is00:43:23
by actually having an if statement for00:43:25
example if I create this variable called00:43:28
age over here like I mentioned and set00:43:30
it equal to 15.00:43:32
um I can just come over here and say if00:43:35
age is greater than or equal to 1800:43:38
then00:43:39
return00:43:41
um and an H1 tag I'll just make an H100:43:44
tag a header tag that says over h00:43:48
and if it's under 18 I want to say under00:43:52
H right now it's 15 so you can see it00:43:56
will say over H and then else over here00:44:00
else we just return whatever is down00:44:03
here and we say that the person is00:44:06
um under age right you'll see that by00:44:09
this logic it should be displaying that00:44:12
the person is under age00:44:13
but if we change this to 19 which is all00:44:17
of a sudden they're over age it will now00:44:19
say over age so you can see we are00:44:21
conditionally changing what the UI is00:44:24
being shown00:44:25
um depending on some sort of condition00:44:27
which is in this case if the number 1900:44:29
is greater than the number 18. now like00:44:32
I said ternary operators can make this00:44:34
look way better because we're currently00:44:36
having an if statement um if statements00:44:38
aren't bad in itself right if you're00:44:40
going to use an if statement I wouldn't00:44:42
even put an else over here I would just00:44:44
do something like this because it's00:44:45
still since you're returning something00:44:47
it will still work this same way but in00:44:51
this case I would much rather do00:44:52
something different I'll just remove00:44:54
this over here and down here directly00:44:57
inside of one return statement I would00:44:59
just put some JavaScript code using00:45:01
ternary operators that will display the00:45:04
different pieces of information for00:45:05
example I can come over here and say if00:45:09
age00:45:10
is greater than or equal to 18. then I00:45:14
want to display an H1 tag that says over00:45:17
H right but else if it's not if this00:45:23
condition is false then I want to00:45:26
display something else I want to display00:45:27
another H1 type that says under age and00:45:33
you'll see that in a single line we're00:45:35
able to do the same thing that we were00:45:37
doing with all of those lines before and00:45:39
because of how react mixes your00:45:43
JavaScript logic with how your UI is00:45:45
being displayed this works perfectly00:45:47
right it says overage because 19 is is00:45:50
of Rage but if I put 17 now it will say00:45:53
under age like I said there is other00:45:55
ways in which you can conditionally00:45:58
render stuff for example you can use a00:46:00
double ampersamp which is just an if00:46:02
statement not an if else statement and00:46:04
an example for that would be if we had00:46:06
some sort of actual Boolean here let me00:46:09
say something like00:46:11
um is green and this is actually a good00:46:13
example because this example will show00:46:16
you guys another way to use CSS in react00:46:19
that I didn't mention in the previous00:46:20
segment of this video in this example00:46:22
think of this as green as a Boolean that00:46:26
starts that is false but if it is true00:46:30
then it will make the text00:46:33
um being displayed become green right so00:46:36
that's the whole point of it if it's not00:46:38
then the text will remain the same so00:46:41
how could we do something like this and00:46:42
which text are we talking about well I'm00:46:44
going to create a text over here which00:46:46
is going to say something like this has00:46:48
color00:46:50
uh it's just a random text but you can00:46:52
see that it will always appear no matter00:46:54
what down over here and if we want to00:46:56
add some sort of styling to it we can00:46:58
either edit by using the CSS file like I00:47:00
mentioned previously in this video or00:47:02
you can actually directly add some00:47:04
styles to your individual elements now00:47:07
styling like this inline styling like00:47:10
this already exists in normal HTML00:47:12
however the difference here is that00:47:15
you're actually going to be using00:47:16
objects to do something like this so00:47:18
it's a bit different so the way we do it00:47:21
is we declare a style property into00:47:24
whatever HTML or jsx element we're going00:47:27
to be altering the style for and then00:47:30
over here we just put another curly00:47:32
brace because it is an object and what00:47:35
we put over here is all the different00:47:36
styles we want to add to this element we00:47:38
can add for example caller and it00:47:40
already has autocomplete for us which is00:47:42
amazing right there's like so many00:47:44
things we can add to style this element00:47:46
but in our case we only want color00:47:49
I also want to point out that00:47:51
um in normal CSS like over here if I00:47:54
want to say color red I can just say00:47:56
color red but since this is not this is00:47:59
Javascript it's not actual CSS that00:48:01
we're writing inside of this object if I00:48:03
want to say color red I have to put red00:48:04
inside of a string right I'm just00:48:07
pointing this out because it's small00:48:09
things that can confuse you if you're00:48:11
working on your own and I just want to00:48:13
point them out now so that you don't00:48:14
make the mistake whenever you're working00:48:16
on your own now other another thing I00:48:18
want to point out is that when you have00:48:20
some sort of style that includes a00:48:23
hyphen so like something like background00:48:26
color instead of saying background00:48:28
hyphen color you gotta say background00:48:32
color like this right so that's00:48:34
basically it for inline styling the only00:48:37
style that we want to know over here is00:48:39
the color one which is we set by default00:48:42
to be red and you can see it displays00:48:44
the color red now what I want to show00:48:46
you guys is how do we integrate this00:48:48
Boolean to be part of this color00:48:51
definition right how can we say that if00:48:53
is green is true then make this color00:48:56
green but if green is false make it red00:48:58
well by just using the ternary operator00:49:02
that we we created over here we can just00:49:04
do something like this if00:49:07
um is green is true00:49:10
then00:49:12
we make this green00:49:14
but if it's false we make it red you see00:49:17
this one line logic over here can have00:49:19
great impact on how your website can00:49:22
look like so right now it's red but if00:49:24
we turn this to true00:49:26
now it will be green right and this is00:49:28
really cool because later on you'll see00:49:30
how we can use this kind of logic to00:49:33
make your website look really cool00:49:35
um and not actually be manually altering00:49:37
what the value of this um variable looks00:49:40
like so this is uh basically it for00:49:43
conditionals like I said you can use the00:49:45
double ampersam to this to just do an if00:49:47
statement instead of an if else an00:49:49
example would be00:49:51
um saying like is green over here and if00:49:54
is green then I want to just display I00:49:57
know uh00:49:58
a button right a button that says00:50:01
something like00:50:02
this is a button now this example is00:50:04
kind of dumb but all this is doing is00:50:06
it's showing you that this is an if00:50:08
statement if is green is true then we00:50:10
show the button but if we set it to00:50:13
false00:50:14
then we don't show the button right so00:50:17
I'm just showing you guys some very00:50:18
simple logic that you can integrate into00:50:20
your projects and that will be really00:50:22
useful later on now what we're going to00:50:24
talk next in this video is about how to00:50:26
use the lists in react the reason why I00:50:29
want to mention this specifically is00:50:31
because lists are extremely important in00:50:33
a complex website special websites that00:50:36
you use react to create we're going to00:50:38
be using them so much throughout this00:50:40
course that I really need to already00:50:41
point you guys in the right direction so00:50:43
you guys already start getting used to00:50:45
it so let's start working with lists00:50:48
right now so in order to work with lists00:50:51
or arrays in react00:50:53
um I just came up with this really quick00:50:54
example over here which we're going to00:50:55
be working with throughout this next00:50:57
part of this video so I created an array00:51:00
called names and the array is just an00:51:03
array of strings where it just includes00:51:05
names of people00:51:07
which just includes names of people00:51:09
right so we have Pedro Jake Jessica Mike00:51:11
and Dustin so what I want to do is I00:51:14
want to display the name of each of00:51:16
those people00:51:18
um in a very easy way00:51:21
um without having to repeatedly write00:51:23
each of those names right for example if00:51:26
I'm being lazy in some sense I could00:51:29
just come over here write an H1 tag00:51:32
and I could just say for example that I00:51:35
want to display the00:51:37
first element in the names array right00:51:39
by saying something like names zero and00:51:43
you'll see that this works it definitely00:51:44
works it says Pedro if I do names one it00:51:48
will show J as you can see over here00:51:51
um and so on right however I don't00:51:53
really want to display each of them like00:51:55
this like putting each other00:51:57
individually because that's stupid that00:51:59
would take forever especially if it is a00:52:02
big array what I want to do is I want to00:52:04
use this array and tell it basically say00:52:06
that we want to Loop through this whole00:52:08
array and for each of those elements I00:52:10
want to display something else now this00:52:12
is where I assume you know some of00:52:15
JavaScript as well the basic stuff that00:52:17
I assume is that you know some of the00:52:19
JavaScript array functions so we have00:52:21
some functions for example we have four00:52:23
each right you can say something like00:52:27
names.4h and that serves to Loop through00:52:29
each element and I don't know do00:52:31
something for each of those elements00:52:34
we also have map we have filter we have00:52:39
reduced we have so many different00:52:41
functions that you can use with arrays I00:52:43
would definitely recommend practicing or00:52:45
learning at least some of them because00:52:47
they're going to be really important one00:52:48
of the most important ones for us in00:52:50
react is the map function why exactly is00:52:53
the map function important well because00:52:55
with the map function you grab an array00:52:57
and for each of those elements you can00:52:59
re change a part of it right you can00:53:02
change something in in each of those00:53:04
elements and why is that important00:53:06
because if we want to display each of00:53:09
those elements in some sort of UI form00:53:12
inside of our project we can very easily00:53:14
do that by just coming over here and00:53:16
saying names00:53:18
then dot map and the map function it00:53:22
recalls it requires that you pass over00:53:23
here a callback function so a callback00:53:26
function is just an anonymous function00:53:27
like this a function that has no name00:53:30
that exists in as a return like as an00:53:34
action00:53:35
um after you call this map function you00:53:37
can grab a value and a key right the key00:53:41
is just for example the index of each of00:53:44
the elements so for this element the key00:53:46
will be zero for this one it will be one00:53:48
right it's just the index in the array00:53:50
the value is at the actual value of it00:53:52
right so for the first element the value00:53:54
will be Pedro the second one it will be00:53:56
Jake the third one will be Jessica00:53:58
obviously we're not going to call it00:54:00
value and key you can actually call it00:54:02
key if you want to00:54:04
um but what I'm going to call this over00:54:05
here is name and just to make it make00:54:09
sense with the data that we're working00:54:11
with and what I want to do is for each00:54:13
of the elements in this array I want to00:54:16
return some sort of HTML or some sort of00:54:19
jsx and I want to return an H1 tag which00:54:23
means that it's going to Loop through00:54:25
each of these elements and for each of00:54:26
the elements it's going to create it an00:54:28
independent H1 tag now what I want to00:54:30
display inside of this H1 tag well I00:54:33
want to display the name right I want to00:54:36
display whatever is over here now never00:54:39
forget that whenever you're inside to00:54:42
GSX or HTML tags you always have to use00:54:46
curly braces to declare your JavaScript00:54:49
and also one thing that is kind of00:54:52
annoying with react is the fact that00:54:54
whenever you're looping like this00:54:56
it will always require that you use the00:54:59
key in some way or another so what you00:55:02
can do is you can just pass this key00:55:04
property over here to remove remove an00:55:07
annoying warning that always comes with00:55:08
react it's not important for you to know00:55:10
why you have to do this right now and00:55:12
trust me when I say it's not important00:55:14
for you to know it's just it will take00:55:16
unnecessary space in your brain when00:55:17
you're learning so many things in the00:55:19
beginning so just know that to remove00:55:21
that warning you can put this over here00:55:23
you can also not do you do anything with00:55:26
this key at all and it should be fine as00:55:27
well but the important thing is that now00:55:30
if you come over here we are displaying00:55:32
each of the elements um in our screen00:55:34
which is amazing right if I add another00:55:36
person over here for example Lucas00:55:39
um it should not display Lucas as well00:55:40
inside of our website so this is the00:55:43
basics of actually looping through an00:55:45
array now what are some more complicated00:55:48
ways you can do something like this well00:55:50
usually when you're working with data00:55:53
you work with objects right and objects00:55:56
can exist inside of a race for example00:55:58
if you have a list of users that you get00:56:00
from some sort of database it's going to00:56:02
be a list of objects right so I'm going00:56:05
to create an example over here where we00:56:07
have information about each of the users00:56:09
and we just want to display those00:56:12
information in for each of the users00:56:14
inside of our website so I'll be back in00:56:15
a second okay everyone so to make it00:56:17
simple I remove move half of the people00:56:19
in the list and I only kept three of00:56:20
them so we can just work with three of00:56:21
them and I created for each of them an00:56:24
object that only contains two different00:56:26
fields a name and an age right so this00:56:29
is a list of users as you can see and00:56:31
this example is really cool because you00:56:33
guys will see how easy it is to work00:56:35
with objects inside of a race in react00:56:37
so what I want to do is I want to Loop00:56:39
through each of these users and I want00:56:41
to display a div that includes a name00:56:44
and an H so to do that we can do the00:56:48
exact same thing as we did before00:56:49
obviously our array has a different name00:56:51
now so we'll change to users instead of00:56:54
names and instead of returning an H1 tag00:56:58
we're going to return a div tag right00:57:01
because it will include multiple pieces00:57:03
of information also I need to change00:57:05
this name variable over here to user00:57:09
because it makes more sense right we're00:57:10
not just displaying a name in each00:57:12
element in the array now we have an00:57:14
object containing two different pieces00:57:16
of information about the user so could00:57:18
we just do something like this and just00:57:20
display the user info like this no it00:57:23
will break actually it won't display00:57:24
absolutely anything because user is an00:57:27
object and not a string like it was00:57:28
before so if we want to display both the00:57:31
name and the age I would have to do00:57:33
something like user.name00:57:35
and user.h00:57:38
and you'll see that now what it's doing00:57:41
is it's actually returning the correct00:57:45
information in our screen now one thing00:57:48
one cool thing that we can do is instead00:57:51
of just displaying the div like this we00:57:52
could actually create use what we00:57:54
learned in the previous episode and00:57:56
create a component for the user we could00:57:58
come over here and just similar to what00:58:00
we did before if we want to create a00:58:02
component I can just call it for example00:58:05
user and it's just a function a normal00:58:07
function in react that returns some sort00:58:10
of jsx now what jsx are we going to00:58:13
return well we're going to return this00:58:16
div which includes both a username and00:58:19
age right now that information we're00:58:23
going to grab from the props if you00:58:25
recall that's what we usually do when we00:58:27
have components so instead of saying00:58:29
user.name we say props.name and props.h00:58:32
now how exactly are we going to grab the00:58:36
name of the age from prompts well now00:58:39
instead of saying they were returning a00:58:40
div for each of the elements in the00:58:42
user's array we're going to be returning00:58:44
the user component and the user00:58:47
component will now have a name prop00:58:49
which its value will be user.name00:58:53
and it will have an age prop which its00:58:56
value is going to be00:58:58
user.h and you can see that it looks a00:59:01
lot cleaner if we do something like this00:59:03
and it still works right it works00:59:05
perfectly and we're using what we00:59:07
learned in the previous episode of using00:59:09
a component to make our code look better00:59:11
now one thing I didn't mention in the00:59:13
last episode on purpose because I didn't00:59:15
want to make it super complicated right00:59:17
in the beginning is the fact that00:59:19
normally when you are creating new00:59:22
components you're not putting all of00:59:23
them into a single file like I'm doing00:59:25
over here the reason for that is because00:59:27
you don't want to have a file with like00:59:29
a thousand lines of code right you00:59:31
usually create different files for00:59:33
different components I'm going to go00:59:35
over more about project structure later00:59:36
on in the course but for now just know00:59:38
that when you're going to create a new00:59:39
component you should be creating a file00:59:42
for it so let's create this file called00:59:45
user.js which is going to contain the00:59:48
user component so all we have to do is00:59:50
we just have to copy this user component00:59:51
over here00:59:52
and literally just paste it over here00:59:55
now how are we gonna access this inside00:59:57
of the app.js because right now we are01:00:00
calling the user component but it's01:00:02
breaking because01:00:04
um it doesn't know what user is because01:00:06
user exists in a different file so the01:00:08
way we do this is we just export this01:00:11
component in this file and in our app.js01:00:15
at the top we'll just say import01:00:18
from and we put the path towards that01:00:21
component which is in the user file just01:00:23
like this because the user file is over01:00:25
here and we just grab the user component01:00:27
like this and if we save this now it01:00:30
should be working like before but01:00:32
instead of having everything in the same01:00:33
file it now exists inside of a different01:00:36
file I like doing this way it makes code01:00:38
look easier and better01:00:40
um and yeah it's just the center pattern01:00:42
and react so this is basically it for01:00:45
this video I know this is actually a lot01:00:47
of information and I thought about01:00:49
making my videos into really small01:00:51
videos uh it one for each topic but that01:00:55
would I don't think that I don't like01:00:56
that idea I don't I don't personally01:00:58
love that I like videos where you're01:01:01
able to work with a lot of stuff but at01:01:03
the same time I don't want to over01:01:04
complicate each video so the middle01:01:06
ground is making this medium length01:01:09
videos for each episode where I go over01:01:11
a few different topics which are kind of01:01:13
kind of related to each other so let me01:01:16
know what you think I'm gonna give you01:01:18
guys some exercises at the end of this01:01:19
video right now so you can practice on01:01:23
your own but let me know what you guys01:01:24
think in the description in the comment01:01:25
section and yeah that's basically it so01:01:28
let's get into the exercise okay so for01:01:30
the exercise what I want you guys to do01:01:32
is I have this list of planets over here01:01:35
it doesn't include all the planets in01:01:37
our solar system but it's just a section01:01:40
of it that I wanted to show you guys but01:01:42
basically what I want you guys to do is01:01:44
I want you guys to write code for01:01:46
looping through each of these planets01:01:48
and displaying their names just their01:01:50
names but for each of those planets I01:01:53
only want you to display their names if01:01:56
they are a gas planet so if you guys01:01:58
don't know only I think four planets are01:02:00
gas planets01:02:02
um and some of them are over here like01:02:04
three of them over here and I want you01:02:06
guys to display only the gas planets01:02:09
names over here right as a list so how01:02:13
you should do this well just do exactly01:02:15
how we did before Loop through this list01:02:18
list the new ternary operators which we01:02:20
learned in the beginning of this video01:02:22
in order to decide which ones you should01:02:24
show and which ones you shouldn't and01:02:26
then if you want you can also make them01:02:28
into a component right make the planets01:02:30
into a component and just make01:02:31
everything that we've learned previously01:02:33
into a single piece of code right so the01:02:37
code for all this will be in the01:02:38
description but I'll put this even over01:02:41
here like right over here I'll call this01:02:43
planets.js because the code for all of01:02:45
this will be in the description right so01:02:48
you can just check it out but if you01:02:50
guys want to use this before you see the01:02:52
actual solution for this problem you can01:02:54
just come to the planets.js file and it01:02:56
will be over there but work on this and01:02:59
come back whenever you're done because01:03:00
I'm going to show the solution right now01:03:02
okay so this is the solution for this01:03:04
exercise it's really simple as you can01:03:06
see which is Loop through each of the01:03:09
planets and for each planet we just ask01:03:11
okay if the planet dot is a gas planet01:03:15
is true then return an H1 time01:03:18
displaying the name of the planet and as01:03:20
you can see this is exactly what happens01:03:22
in our screen however if we want to use01:03:26
ternary operators to do this instead it01:03:29
would actually look a lot better we can01:03:31
actually we don't even need to use this01:03:32
return over here and we don't need to01:03:33
use an if statement instead of using01:03:38
instead of using this curly braces we01:03:42
can actually just return directly some H01:03:45
some jsx right after the arrow function01:03:48
so this is equally valid as you can see01:03:52
over here this code over here is equally01:03:55
correct instead of actually putting01:03:57
curly braces and saying return we can01:03:59
actually just return like this and01:04:02
instead of using an if statement we01:04:04
could just use something like a prinary01:04:06
operator right we can say if the planet01:04:09
dot is gas planet then display this01:04:13
right something like this and this would01:04:17
still work as you can see it still only01:04:19
displays the correct information we01:04:21
could do the opposite as well we can say01:04:22
if it's not a gas planet then display01:04:25
the name and you can see the other three01:04:27
planets that are not not gas planets01:04:29
will be displayed in our screen so01:04:30
that's basically it for this video okay01:04:33
everyone so like I mentioned we're going01:04:35
to be going over what states are in01:04:37
react and I'm gonna tell you guys trade01:04:39
off this is my favorite topic to teach01:04:42
because I remember when I was learning01:04:44
react and I first learned about States I01:04:48
was completely mind blown because that01:04:50
was the point where I was like okay01:04:51
react is is good or not only react but I01:04:55
was like okay I really need to learn01:04:57
some sort of JavaScript framework01:04:58
because this is way better than how you01:05:01
usually do it in um just vanilla01:05:04
JavaScript so in this video we're going01:05:05
to be going over states by going over a01:05:07
couple examples I really want to01:05:09
emphasize01:05:10
um on you guys memor understanding what01:05:13
states are so that whenever someone just01:05:16
asks you oh what is the point of of01:05:18
creating a state in react you're going01:05:19
to be able to answer it with the01:05:22
knowledge and ability of implementing it01:05:24
as well um inside of your code so what01:05:28
exactly are states well the best way I01:05:30
find to explain a state in react is as01:05:33
is just a variable right now it's01:05:36
technically not just a variable but but01:05:38
think of it as just a variable that01:05:40
holds data and it can be either a string01:05:43
it can be I'm going to create just an01:05:45
example here for example the variable01:05:47
name right or actually I'll create a01:05:49
variable called age and we can obviously01:05:53
set it to be a number we can set any01:05:56
variable to be any kind of type right we01:05:58
can set it to be a string a Boolean01:05:59
whatever we want but an H is a number01:06:02
so we have this age variable over here01:06:04
right if I were to display this I could01:06:07
easily display it in my screen like I01:06:09
showed you guys in the past by just01:06:11
putting some jsx over here and it will01:06:13
show zero whenever I go to the page01:06:15
right this is the browser you can see01:06:17
it's just displaying the amount that we01:06:19
have over here let's try doing something01:06:20
really cool over here let's try creating01:06:22
a button right a button that when you01:06:26
click on it it will increase the age01:06:29
so to create a button you can just01:06:31
create a button tag like normal HTML put01:06:34
a text inside of it and close it like01:06:37
this now what will happen is you'll see01:06:40
that in our browser now we have this01:06:42
little button that obviously nothing01:06:43
happens when we click on it because we01:06:45
haven't implemented anything for it now01:06:47
in react very similar to how you do in01:06:50
normal JavaScript you can pass what is01:06:52
known as an on click function to this01:06:55
button now properties in01:06:59
inputs such as a button a normal01:07:02
JavaScript you usually put it with like01:07:04
lowercase but in react you put it like01:07:06
this with uh on being lowercase and the01:07:09
C being capitalized so this is really01:07:12
important because we're going to be for01:07:14
the first time dealing with events in01:07:16
react so what is an event just something01:07:19
that happens as a response of something01:07:21
else so in this case we're going to do01:07:23
something after we click on this button01:07:25
right01:07:26
so what do we want to do well we can01:07:28
pass a function inside of this on click01:07:30
that will be called whenever we click on01:07:33
the button so we can just create this01:07:35
function over here I'm going to call it01:07:37
increase age01:07:38
and it will be just a normal uh Arrow01:07:41
function which we can now just pass it01:07:44
inside of here just like this01:07:46
now what do we want to do with this01:07:48
increase age well we basically want to01:07:52
whenever we click on this but on this01:07:54
value we want to increase the value of H01:07:55
by 1 each time right so intuitively if01:07:59
you if you know JavaScript and01:08:01
programming you would just do something01:08:02
like this right age equals to h plus 1.01:08:06
if it's zero then we'll decide it to be01:08:09
equal to zero plus one which is one so01:08:11
age will become one if it's one then it01:08:13
will be one plus one which is two right01:08:15
so it's increasing by one each time now01:08:17
we want to also console log over here01:08:21
the value of H after we increase each01:08:23
time just so we have an idea to see if01:08:26
it's working or not so let's check out01:08:28
to see if this will work right it should01:08:30
work because we're increasing the value01:08:31
and we're displaying the value over here01:08:33
now let's go to Google Chrome and let's01:08:35
try clicking on the button and you01:08:37
immediately see that it doesn't work01:08:39
because you see over here it says zero01:08:41
right when it should be whatever value01:08:43
it is right now after clicking this01:08:45
button a bunch of times so you may argue01:08:47
okay it's not changing because we set it01:08:49
as a constant so let's try setting it as01:08:51
a let or a VAR right the constants01:08:54
obviously can be changed so if we set as01:08:55
a lead or a VAR it should work right01:08:57
okay let's test it out01:08:59
it still doesn't work it still doesn't01:09:02
work but doesn't mean it's not changing01:09:03
the the value of this variable over here01:09:06
well no it is actually because if you go01:09:08
to the console log over here01:09:11
it is actually increasing by one every01:09:14
time you click on this button so you're01:09:16
probably really confused because this is01:09:18
exactly how I was when I was learning01:09:19
States why is the variable changing01:09:22
value but whatever is in my screen isn't01:09:24
changing as well I thought that01:09:27
um this should be representing this01:09:29
variable well it is but there's a point01:09:31
that you need to understand with react01:09:33
react will render this component over01:09:36
here initially once and what do I mean01:09:41
by render it will just display the UI it01:09:43
will generate the UI for this page once01:09:45
so what happens is initially it will01:09:48
look at whatever the value of age is it01:09:50
will see it's zero and then it will01:09:52
display zero it doesn't matter how many01:09:54
times we change the value of this01:09:56
variable react doesn't know that it01:09:59
needs to re-render to show whatever01:10:01
value it is01:10:03
um currently right so it renders once01:10:05
and we can change the variable by01:10:06
changing a variable value doesn't mean01:10:08
react will re-render because of it so01:10:10
that's a exactly what states are because01:10:13
if you were using normal JavaScript01:10:15
whenever you change a variable like this01:10:17
and you wanted to change something in01:10:19
the HTML to show the value of the01:10:21
variable you would do something like01:10:23
saying document dot get element by ID or01:10:27
I don't know using a query selector and01:10:29
then manually changing the the HTML but01:10:32
here you don't have to do that because01:10:34
in react if we wanted to create01:10:35
something like this we could very simply01:10:37
just use a state so in order to use a01:10:40
state we have to come over here at the01:10:41
top and import01:10:43
from the react Library so I'm going to01:10:46
say react and we're going to import what01:10:49
is known as a use State hook01:10:52
so whatever so there's this concept in01:10:54
react called a hook and I'll obviously01:10:58
go way more in depth of about what Hooks01:11:00
are01:11:01
um when we have our hook section of of01:11:04
this course just know that when I01:11:05
mention a hook I'm just talking about a01:11:07
function that for now all you have to01:11:09
know is that it's a function that starts01:11:11
with the word use later on I'll01:11:13
obviously talk about it more but for now01:11:15
just keep that in mind so they use State01:11:18
hook over here is what we use to create01:11:20
a state and in order to create a state01:11:22
that for example in this case a state01:11:24
for the variable H we would have to do01:11:26
the following we'd have to say const01:11:29
then open and close01:11:31
square brackets then set it equal to use01:11:35
State and open and close parenthesis so01:11:38
we're just calling the use State01:11:39
function and this use State function01:11:40
will return some information that we're01:11:43
getting inside of this square bracket so01:11:46
what kind of information can we get well01:11:48
we can get the a variable and we can01:11:51
call it01:11:52
um whatever we want right in our case01:11:53
the variable will be called H and then01:11:56
we need to create a function that will01:12:00
be used to change the value of this01:12:02
variable now that definitely sounds01:12:03
confusing if this is the first time01:12:05
you're using States because that's how I01:12:07
felt but just know that the standard is01:12:10
if you have a variable for example01:12:11
called age you put over here a function01:12:13
that is called set and then the name of01:12:16
the variable for example set H now01:12:19
you'll see what this does in a bit but01:12:21
just know that this is how you structure01:12:23
the use state01:12:24
so then over here you can put an initial01:12:28
value to the variable remember that01:12:30
initially we set age to be equal to zero01:12:32
so this is where we put this zero right01:12:35
this initial zero value we put it over01:12:37
here so now what we just did is we just01:12:40
created a state that is01:12:42
um obviously a number because we set its01:12:44
first value to be zero and we have a01:12:47
variable for it and we have a function01:12:49
that is able to change its value01:12:51
so here's where it gets good if I want01:12:53
to display this age I can still do it01:12:56
right it's exactly how it was before I01:12:59
can just I can just put age inside of01:13:01
here and you'll see that it will display01:13:02
the zero right I'll just refresh the01:13:04
page and you guys can see it says zero01:13:06
if I change this to one01:13:08
it will show one because that's the01:13:09
initial value but now what happens is if01:13:13
I came over here to this increased age01:13:14
function and I wanted to increase this01:13:17
age variable by one every time I click01:13:19
on the button I could just say something01:13:20
like set age call this function and01:13:24
inside of here I can just put whatever01:13:26
value I want H to become01:13:29
so for example I can say five by default01:13:32
just say five and what happens here is01:13:35
if I click on the increase H button it01:13:38
will turn this into five right and the01:13:41
reason why this is happening is because01:13:42
the whole point of a state is it is a01:13:45
variable that when its value changes01:13:47
react will be notified it will look to01:13:50
see if the value is different from what01:13:52
it was before if it is it will trigger01:13:55
the UI to re-render to redisplay what01:13:59
the whole UI so that now it will include01:14:02
the new value for that state which is01:14:05
amazing and that's the whole point of01:14:07
creating a state now obviously I don't01:14:09
want to keep it as set age to five01:14:12
because all it's doing is it's changing01:14:14
from zero to five no matter how many01:14:16
times I click on this but one way I can01:14:18
make it increase every time I click on01:14:20
the button is if I were to come over01:14:22
here and I just said that the age will01:14:24
be equal to age plus one because it will01:14:27
get the current value and increase by01:14:29
one and you'll see that now if I keep01:14:32
clicking on the button it will keep01:14:34
increasing just like we wanted before01:14:36
obviously I could do something like01:14:38
subtracting01:14:40
um and it would do the exact same thing01:14:42
but the opposite way as you can see uh01:14:45
but it's it's nice right because uh this01:14:48
is the whole point of creating States01:14:49
and they're extremely useful you'll be01:14:51
using them a lot in react so there's01:14:54
also more use cases for a state a really01:14:57
cool use case that I um that I like to01:15:00
represent always is when you're whenever01:15:02
you're using inputs right so for example01:15:05
let's delete this code over here and01:15:09
let's instead of creating an age let's01:15:12
just put an input inside of our react01:15:14
app so I'm going to say input over here01:15:17
and I'm going to close it like this now01:15:18
in input as you might know can be a lot01:15:20
of stuff but in our case it will be an01:15:22
input of type01:15:24
text01:15:25
now that means that if we come over here01:15:27
you'll see there's a text like input01:15:30
that we can just write on it right so01:15:32
what I want to do here is I want to be01:15:35
able to type on this input and as I'm01:15:38
typing I want to display a text that01:15:41
displays exactly what I'm typing on this01:15:44
input01:15:45
so how would we do something like that01:15:47
well we would have to create a state to01:15:51
represent that value so let's come over01:15:53
here just like how we did before and01:15:56
let's create a state so to create a01:15:58
state you just do something like this01:16:01
um and since this will be a text it will01:16:04
be a string we just initialize it as an01:16:07
empty string like this the initial value01:16:09
will be this01:16:10
so what we want to do here is we want to01:16:13
create a state that will represent01:16:14
whatever this input is so let's give it01:16:16
a name let's call it input of value01:16:20
obviously we could give any names but01:16:22
this in this case it just makes sense01:16:24
and then we need to create a function01:16:25
that will change this input value so01:16:27
we'll call it set input value now I want01:16:32
to display that input value so I'll just01:16:33
come over here and say input value and01:16:37
you'll see that nothing changes because01:16:38
input value initially is an empty string01:16:42
but what I want to do is as I type on01:16:44
this input I want to change this input01:16:47
value by using the set input value01:16:49
function to be whatever exists inside of01:16:53
this input so how would we do something01:16:55
like that well01:16:57
I would come over here and say on change01:16:59
so if you worked with inputs before you01:17:01
know that every input has an on change01:17:03
which is triggered whenever there's any01:17:05
change to the input so a change could be01:17:08
you're typing something on the input so01:17:11
we can pass a function over here so01:17:13
let's create a function for this01:17:15
I'll say const and I'll call it handle01:17:19
input change01:17:22
right create this function handle input01:17:24
change and we can just grab this and01:17:27
pass it inside of here now every input01:17:29
when you pass when you have a function01:17:31
that is inside of this unchanged01:17:33
property over here it actually has an01:17:36
argument by default called event which01:17:39
is an argument that if you're familiar01:17:40
with HTML and JavaScript it's used to01:17:43
grab information about the input so if I01:17:47
were to say for example console log01:17:50
um01:17:51
event01:17:53
dot Target dot value for those who know01:17:57
what this means it will basically01:17:58
console log the value of whatever is01:18:01
being is currently written on the input01:18:04
so this is really it's used so many01:18:07
times in react because whenever you want01:18:09
to grab something from an input uh01:18:11
that's that user is writing you do it01:18:14
like this you grab it by saying01:18:15
event.target.value and what is happening01:18:17
right here is we're calling this01:18:18
function every time there's a change and01:18:20
we're console logging the value meaning01:18:22
that now if I open up my console log01:18:24
every time I type on this input it will01:18:27
now console log whatever the value of01:18:29
this input is right by like01:18:31
automatically I can delete it as well I01:18:33
can write whatever I want and it will be01:18:36
always console login01:18:37
so in our case over here what we want is01:18:40
we actually want to set this value over01:18:42
here to be equal to this input value so01:18:46
all we have to do is instead of console01:18:47
logging this we just say uh we want to01:18:50
set input value to be equal to that01:18:54
and now magically whenever I type01:18:57
anything on this input it will now start01:18:59
displaying over here which is amazing01:19:02
like it's it's completely useless to in01:19:06
this example to just show the string but01:19:09
I remember I was so mind-blowing when I01:19:11
saw this for the first time that I had01:19:13
to show you guys but this is the power01:19:15
of this of States because every time the01:19:17
value of the the variable is changing it01:19:20
triggers a remenders and shows the new01:19:22
value in our page right so in this case01:19:26
uh we won't be whenever we do something01:19:28
like this it would be mostly to try to01:19:30
grab information from like inputs so we01:19:32
can I don't know there's like a form in01:19:34
the website and we want to grab whatever01:19:35
the user typed on the web on the form we01:19:38
can do it this way but I found this to01:19:40
be a good example whenever you're01:19:42
learning States okay so we just went01:19:43
through two different examples on how01:19:45
they use statehood can be used but01:19:48
um I know that you might still be01:19:49
doubting its practicity or how important01:19:52
it actually is so I'm going to give you01:19:55
guys two more examples that are actually01:19:57
really cool and can show you the power01:19:59
of this so the first example is imagine01:20:03
that we have something like this we have01:20:05
a some sort of text in our screen that01:20:09
says something like01:20:11
um01:20:12
hi my name is Pedro01:20:16
now obviously this is just an example01:20:17
but imagine that we have this text in01:20:19
your screen and we want to be able to01:20:22
have a button over here that whenever we01:20:24
click on the button it will either show01:20:28
or hide01:20:29
this text so what I want is I want to be01:20:32
able to click on this and every time I01:20:34
click it will either display this or01:20:36
hide it so if currently it's being01:20:38
displayed so if I click on this I want01:20:40
it to now not display this anymore and01:20:42
then if I click again it will display01:20:43
this now I know for a fact that if I was01:20:46
doing this01:20:47
um with normal HTML and JavaScript the01:20:49
way I would probably approach it is I01:20:51
would probably change it to CSS or maybe01:20:53
remove the thing that completely from01:20:55
the HTML it would be way more work than01:20:58
what we're going to do over here because01:21:00
with States all I have to do is I just01:21:03
have to create a state just like this01:21:04
but obviously the names here will change01:21:06
we'll call something like I don't know01:21:09
show text or something like this and01:21:12
then obviously this would be set show01:21:14
text and then over here this would be a01:21:17
Boolean right because uh we want to01:21:19
either set this to true or false so01:21:23
instead of having an empty string or a01:21:25
zero for a number for a billion we can01:21:27
start it out as true right because we01:21:32
want to first show this text and then if01:21:34
I click on it I want to hide it so now01:21:36
we have the state so all we want to do01:21:37
in this case is we want to say okay if01:21:40
show text is equal to true then display01:21:43
this over here so if we were to combine01:21:46
what we learned in the last episode01:21:47
where we talked about ternary operators01:21:49
we we could just say something like if01:21:53
show text is equal to true01:21:56
then we put the double Ampersand because01:21:59
this is just a then show this this logic01:22:03
makes sense right and obviously we have01:22:04
to put the curly braces around here01:22:06
because we're now putting some01:22:07
JavaScript in the middle right so all01:22:11
this is saying is if show text is true01:22:12
then display this so let's see if that01:22:15
works we'll come over here obviously01:22:18
it's true so it will be displayed but if01:22:19
we set the state by default to be false01:22:22
it will not show anymore01:22:24
now another thing you can do is01:22:26
obviously uh with with if statements01:22:29
like this you don't have to say if this01:22:31
Boolean is equal to true you can just01:22:33
say if show text and obviously it will01:22:36
work the same way as you can see but now01:22:39
the cool thing is we want to be able to01:22:41
click on this button and whenever we01:22:43
click on it we want to be able to toggle01:22:45
between show text being true or false so01:22:48
we could just create a function over01:22:49
here right by saying something like01:22:51
const01:22:52
toggle text or something like that right01:22:55
just like how we did before but actually01:22:58
you can also just create the function01:23:00
anonymously inside of here so what does01:23:03
that mean well I can either create an01:23:05
external function and Define its name01:23:07
like we did in the previous two examples01:23:09
or directly inside of the on click I can01:23:11
do what is known as an anonymous or01:23:13
inline function which is just a function01:23:15
like this that doesn't have any names01:23:18
it's just a parenthesis and a arrow and01:23:21
then the curly braces and then inside of01:23:23
here I can do whatever I want I can for01:23:25
example come over here and alert a01:23:27
message saying hey and you'll see that01:23:30
every time I click on the button01:23:33
it will alert the message right so this01:23:35
is also like used a lot in react it's01:23:38
just a function that is created inside01:23:40
of um some sort of event or some sort of01:23:43
prop right so in our case we don't want01:23:46
to alert it what we want to do is we01:23:47
want to set the show text to be01:23:51
um true if it's currently false and01:23:53
false if it's currently true so how01:23:55
could we do something like that well we01:23:57
could just use the current value of show01:23:59
text and say that we want the opposite01:24:01
of that because if it's false it will01:24:03
now become true if it's true it will not01:24:05
become false so let's test it out to see01:24:07
if this is working right it will start01:24:08
out as true so we are able to see the01:24:10
text but if I click on this it will set01:24:13
the variable to be the opposite of true01:24:15
which is false so now it's not01:24:17
displaying and I can click again and it01:24:19
will display I can click again and I'll01:24:21
display you don't understand how useful01:24:23
this is to many websites there's so many01:24:26
UI things you can do that um with this01:24:30
that is super easy to make because of01:24:31
how States work in react and um that's01:24:34
just an example of of how cool this and01:24:36
this can actually be now you can even do01:24:39
more to this right for example you can01:24:41
actually change CSS directly by using01:24:44
States so what I mean by that is for01:24:47
example if we want to scratch out this01:24:49
whole show logic and just make it always01:24:52
show the text right01:24:54
um something like this we always show01:24:56
the text but whenever I click on the01:24:58
button now I want to make this text01:25:00
become green and then when I click it01:25:02
again I want to toggle back to to Black01:25:05
right so that would be hard with normal01:25:08
JavaScript but it's super easy with01:25:10
using States because then I can just01:25:12
create a state let's call it text color01:25:15
and the function will be set text color01:25:20
and it will be a string because in CSS01:25:23
you can call uh callers like red or blue01:25:27
or whatever you want and using what we01:25:29
learned in the previous episode you can01:25:31
actually write CSS directly inside of01:25:35
um your your HTML or your jsx right so I01:25:38
could come over here to this H1 tag and01:25:40
I can just give this tile crop like this01:25:43
and open and close parentheses and over01:25:45
here I can do whatever I want with this01:25:47
style including give it a color I can01:25:50
obviously set this to Red by default and01:25:53
it will oh it's broken oh it's because01:25:55
we obviously have there's no such show01:25:57
text anymore because we changed the name01:25:59
but like I was saying you can also set01:26:02
this to Red by default and you can see01:26:03
it works but what we want to do is we01:26:05
want to use the state to change the01:26:07
color directly inside of here so what we01:26:10
can do is we can just say text caller01:26:12
is equal to the caller is equal to the01:26:15
text caller State and now all we have to01:26:17
do is we just have to come to this on01:26:18
click and say that whenever you click on01:26:20
the button we'll just set the text color01:26:22
to be red and you'll see that if we set01:26:25
this by default to Black because the01:26:27
initial call is black now when we click01:26:29
on this button it will become red so01:26:31
we're altering the CSS of our page very01:26:34
easily by using States now if I click01:26:36
again01:26:37
obviously it's not changing because01:26:39
we're not implementing any logic for01:26:41
this all we're doing is whenever you01:26:43
click on the button it will set it to01:26:44
Red so if it's already red all it's01:26:46
doing is setting to itself which doesn't01:26:48
make sense but to do something which uh01:26:51
mimics a behavior of it like toggling01:26:53
between black and red what we can do is01:26:55
we can use ternary operators which is01:26:57
something like I mentioned we learned in01:26:59
the last episode we can do something01:27:01
like saying if the text caller is01:27:05
currently equal to Black01:27:08
then01:27:09
we want to set it to red right we just01:27:13
set it to red but if it's not so else we01:27:17
set it to Black so really try to01:27:20
understand this logic over here we're01:27:23
putting inside of this parentheses what01:27:26
color we want the state to represent so01:27:28
what we're seeing over here is if it's01:27:30
black then then we want to put red01:27:33
inside of this parentheses if not we01:27:36
want to put it we want to put black01:27:37
because the color should be black and if01:27:40
we run this you'll see this is exactly01:27:42
what happens we keep alternating between01:27:44
the colors which is obviously the01:27:46
behavior we want so those are the actual01:27:49
four examples I really wanted to bring01:27:51
to this episode I don't know how long01:27:53
this episode is but it shouldn't be a01:27:55
short episode because states are super01:27:57
powerful and will be really useful01:27:59
throughout our course for example in the01:28:01
next episode we're going to be using01:28:02
States so much that I guarantee you will01:28:04
start feeling very comfortable with it01:28:06
by the end of that episode so in order01:28:09
for you guys not to be confused because01:28:11
I know some of you guys might still be01:28:12
confused with how States work I'm gonna01:28:14
obviously like I did in the previous01:28:15
episode leave a little exercise here at01:28:18
the end so that you guys can do I'll01:28:20
show you guys the result on how to solve01:28:22
the exercise but obviously do it before01:28:24
you see the answer and yeah let's let's01:28:26
get into the exercise okay everyone so01:28:29
this is the exercise I want you guys to01:28:32
um complete so this is a very famous01:28:34
example of something01:28:36
um you can use States for which is a01:28:38
counter app and I wanted to leave this01:28:40
as an exercise because the examples I01:28:42
showed you guys I really didn't want to01:28:44
repeat a counter but a counter is a very01:28:46
easy way to to understand States so I'm01:28:49
going to leave you guys to do this01:28:51
exercise so basically what I want you01:28:53
guys to do is you you need to create a01:28:55
state called count which is a number01:28:58
right and similar to with the age I want01:29:01
you guys to have three buttons in your01:29:03
screen I want to be able to click on01:29:05
this increase button and see this number01:29:07
increasing then click on this decrease01:29:11
button and see the opposite happening so01:29:13
the button decreasing the number01:29:14
decreasing and also when I click on the01:29:17
set to zero button no matter what the01:29:19
value of of the number over here is01:29:22
um I want to set it to zero and I want01:29:24
to be able to do all of that using01:29:26
States so I'm use everything we learned01:29:29
in this episode to do this and come back01:29:31
whenever you're ready to see the01:29:33
solution so yeah if you're ready now01:29:35
let's see the solution okay so this is01:29:38
the solution to the exercise as you can01:29:40
see it's not super complicated I didn't01:29:42
want to make a complicated exercise01:29:44
because we're going to be working with01:29:46
more complicated stuff in the next01:29:47
episode so but all you have to do is01:29:50
create three different functions each of01:29:52
them have their own purpose for the01:29:54
buttons so the increase function similar01:29:56
to the one we did before it just01:29:57
increases the count by one and sets the01:29:59
count to be that value then the decrease01:30:02
does the opposite it decreases the count01:30:04
by one and sets the account to be the01:30:06
value and the set to zero one is the one01:30:08
that is a little bit different because01:30:09
you just set it to be zero no matter01:30:11
what and what we did is we just passed01:30:13
all of them to the on clicks of their01:30:15
respective01:30:17
um buttons and now you can see that if I01:30:19
play around with this I can now increase01:30:21
I can decrease I can go negative as you01:30:24
can see I can Return To Zero No Matter01:30:26
What by just clicking on that button and01:30:29
it's a very simple counter app but01:30:32
um it obviously shows how quick it is to01:30:34
just create an app something like this01:30:38
using react okay everyone so let's get01:30:40
started writing the code for our first01:30:43
um crud application in react where we're01:30:45
going to be building a to-do list so01:30:48
like I mentioned this episode will be01:30:50
mainly focused on01:30:52
um in like emphasizing01:30:54
um how to use States and enforcing01:30:57
um the best practices when you're using01:30:58
States and exactly why you would use01:31:00
States in react because when you create01:31:02
something like a to-do list states are01:31:04
extremely important so that's the whole01:31:07
point of us making this video so I have01:31:10
over here just an empty application01:31:13
um just like we had before you see01:31:15
there's only three files01:31:17
um and I'm just I just have a little01:31:18
world written over here and what we want01:31:21
to build is we want to build an app01:31:22
where over here in the website there's01:31:25
going to be a list for01:31:28
um to like tasks that you might want to01:31:31
complete and inside of that list each01:31:34
task will either be colored green for01:31:37
completed or just white for not01:31:40
completed yet so you can you can01:31:42
basically check them to say that you've01:31:44
completed a task and if you did the task01:31:47
will be come green you can also delete a01:31:49
task if you want to we're going to add01:31:51
all of those functionalities and01:31:53
obviously you will be able to add a new01:31:55
task to your list now if you're01:31:58
interested in seeing how this will look01:31:59
you can just go to the end of the video01:32:00
where I'm going to be showing this but01:32:03
basically this is one of the best01:32:04
projects in my opinion I know it's01:32:06
overused and there's a lot of tutorials01:32:08
out there for this already but there's01:32:10
no way I'm going to make a react course01:32:11
without including this because this was01:32:13
definitely one of the projects that01:32:15
um got me got me understanding what01:32:18
states are and what and how they are01:32:20
used so that's why I decided to make01:32:22
this video so let's get started right01:32:25
now I'm going to open up vs code over01:32:26
here I basically want to create a div01:32:29
over here because we're going to divide01:32:31
our project our website into two right01:32:33
two parts UI wise right we're gonna have01:32:36
over here at top part where there's01:32:38
going to be an input and a button01:32:40
because we're going to be able to write01:32:42
which task we want to complete and01:32:44
there's going to be a button which when01:32:46
we click on it we're going to be able to01:32:48
add the task to our list so we're going01:32:50
to have that port and we can even give a01:32:52
class name over here of something like01:32:57
inputs or actually I'll just call it add01:33:01
task something like this right just a01:33:04
part where you're going to be able to01:33:05
add a new task to your list and then01:33:07
we're going to have another div which is01:33:09
going to be the div with a list now this01:33:12
whole course I don't want to focus at01:33:13
all on CSS because that's not important01:33:17
in my opinion for someone learning react01:33:19
although it is important for a website01:33:21
it is not important for react so what01:33:24
I'm going to do is whenever I add some01:33:25
minor CSS I'm just going to show you01:33:27
guys the CSS and you guys can just look01:33:30
at it use it if you want to but I'm not01:33:32
going to be wasting my time of this01:33:34
course right teaching you guys CSS01:33:36
because it's not the point of the course01:33:37
but over here we have two divs and on01:33:40
this div over here what we're going to01:33:42
put is we want to put an input01:33:44
and a button so two things the button01:33:48
will be the add task button so we'll01:33:52
look over here and you'll see right now01:33:53
we have the input and the button and01:33:56
over here is where we're going to01:33:57
display the list of tasks which01:33:59
obviously initially will be empty but01:34:02
um let's leave this for now and just01:34:03
focus on this part over here so what we01:34:07
want is we want to have some sort of01:34:09
variable inside of our application which01:34:11
is going to keep track of a list of01:34:13
tasks right so we could have a task for01:34:16
example do homework right where we we're01:34:19
just saying that I need to do homework01:34:21
or we can also have a task which is wash01:34:24
dishes right01:34:27
um something like this so a good data01:34:29
structure that could hold the01:34:31
information about which tasks we have to01:34:34
complete is an array right it's it's a01:34:37
list and array so what we want over here01:34:38
is we need to have a variable which is01:34:40
going to keep track of our list of tasks01:34:43
and01:34:44
um we want to Dynamic likely change the01:34:47
like how the the variable looks because01:34:50
we want to display the list in our01:34:51
screen and whenever we make any changes01:34:53
to the list we want to re-render the UI01:34:55
to show the new changes a change would01:34:58
be for example adding a new task the01:34:59
list we want to immediately see that the01:35:01
new task appear over here or when we01:35:03
delete or when we complete we want to01:35:05
see those changes appearing immediately01:35:06
so the way we're going to do that is by01:35:08
creating a state which is what we01:35:10
learned in the previous video so01:35:12
if you want to refresh you can watch the01:35:14
previous video to see how you create a01:35:16
state but the way you do it is you01:35:18
basically say const you open and close01:35:20
uh curly square brackets like this and01:35:23
you set it equal to the use State hook01:35:26
and we obviously need to import the use01:35:29
statehood from react so I'm going to say01:35:31
import01:35:32
from01:35:33
react and we're going to import the hook01:35:36
that we're using use state so to declare01:35:39
this hook we need to give a name for the01:35:42
for the variable I'm going to call it01:35:43
to-do list01:35:45
and a function that will be used to01:35:47
change the value of this variable so I'm01:35:49
going to call it set to-do list01:35:52
then like I mentioned in the previous01:35:53
video of this course you need to set an01:35:56
initial value for this variable for the01:35:59
state so the initial value will be an01:36:02
empty array because initially this list01:36:05
will be empty so this can be a good01:36:07
initial value right what we want to do01:36:08
over here is we want to be able to01:36:11
whenever you click on this list we want01:36:15
to add something to you want to add that01:36:17
task to the list right but in order to01:36:20
do that we need to keep track of the01:36:22
value of what is inside of this input so01:36:26
if I write over here do homework we need01:36:28
to get the information we need to get01:36:30
this do homework string inside of this01:36:32
input and use it to add into our list01:36:36
and the way I taught you guys in the01:36:38
previous episode to get information from01:36:39
an input is by creating a state to01:36:42
represent the input value so I'm going01:36:45
to create another state over here and01:36:47
I'm going to call it we can call it01:36:49
whatever we want I'm going to call it01:36:50
new task because it is is going to01:36:52
represent whatever we're writing on the01:36:54
input when we want to add a new task01:36:56
and then I'm going to say set new task01:37:00
like this and I'm going to set this01:37:02
equal to use State and it will be a01:37:05
string initially right because it's a01:37:07
string inside of an input so now we have01:37:09
two states and this is basically what is01:37:12
necessary for our to-do list01:37:15
so01:37:16
um what we want to do now is we want to01:37:18
make it so that whenever you type on01:37:19
this input you now keep track or you01:37:23
update this new task state to represent01:37:26
the value inside of that input now the01:37:29
way you do this as I mentioned in the01:37:30
previous episode is you can give an01:37:33
unchange function to this input so01:37:36
whenever there is any change to the01:37:38
inputs value so whenever you type a01:37:39
letter in the input this function over01:37:41
here whatever function you pass inside01:37:43
of this will be called so we're going to01:37:45
come over here and create the handle01:37:48
change function like this01:37:51
and01:37:53
um inside of here we're going to write01:37:55
the logic for this so we're just going01:37:56
to copy handle change01:37:58
and put it inside of here01:38:00
now inside of this handle change01:38:02
function since it is inside of an input01:38:03
like I mentioned you can have an event01:38:05
as an argument to this function and you01:38:08
can use that event to grab the value of01:38:12
the input so if I want to set the01:38:14
variable a new task to be equal to the01:38:17
value of the input all I have to say is01:38:19
set new task equal to event dot Target01:38:22
dot value now all of this I've like I01:38:25
mentioned I've talked about this in the01:38:27
previous episode but it's extremely01:38:28
important for me to show myself using it01:38:31
again in a better context so you guys01:38:33
keep refreshing how like how everything01:38:35
works and understand how everything will01:38:37
be used so now what we have over here is01:38:40
we have a variable called new task which01:38:44
I'm gonna even just for now just to show01:38:46
you guys that this is working I'll just01:38:47
display this in our screen over here in01:38:50
our UI new task and you'll see that it01:38:53
is actually working as I type on this01:38:55
input it is setting the variable new01:38:59
task to be equal to do whatever's over01:39:01
here and the only reason why we're01:39:02
seeing it over here is because I just01:39:04
decided to display it as I go just to01:39:06
show you guys that it's working so I'm01:39:08
going to delete this for now because01:39:09
this is not where are the point of this01:39:11
video01:39:12
um but it's good to know that it is01:39:14
working the handle change function so01:39:16
now that we have this new task variable01:39:18
and we have access to what the user is01:39:20
typing on the input we want to be able01:39:22
to add to this array over here the new01:39:26
task that we just typed on the input so01:39:29
the way we're going to do that is we01:39:30
have this button over here which01:39:32
whenever it's clicked we want to add to01:39:35
the list so we're going to create a01:39:38
function over here and call it add task01:39:43
right because it is the the function01:39:45
that is going to be called when we want01:39:46
to add a new task to the list01:39:48
and then inside of this button we're01:39:50
going to give it an on click property01:39:52
because01:39:53
um we're going to say that whenever you01:39:55
click on the button we want to call the01:39:57
add task function so we haven't worked01:39:59
previously with01:40:01
um using States and lists before but01:40:03
States and lists are extremely01:40:05
interesting because it is very common01:40:08
for you to use it and they're going to01:40:11
appear so many times that it is01:40:12
important for you to get good with it01:40:13
now when you have a normal array I want01:40:17
to emphasize this to you guys when you01:40:18
have a normal array right imagine I had01:40:20
this array over here which was just an01:40:22
array an empty array usually in01:40:24
JavaScript if you want to add a value to01:40:27
that array for example I want to add the01:40:29
ver the variable name which is equal to01:40:32
Pedro if I want to add Pedro to the01:40:34
array I could say something like array01:40:36
dot push01:40:37
and put name over here right and this01:40:40
would work we would see that now after01:40:43
this a rate would have the the name uh01:40:47
the name inside of it right but this01:40:49
doesn't work with States and the reason01:40:52
why it doesn't work with States is01:40:54
because we don't alter we don't mutate01:40:56
the state directly remember with States01:40:59
we always have to use the the function01:41:02
that is used to mutate the value so we01:41:05
don't I can't just say something like01:41:07
new task is equal to01:41:11
event.target.value this is why we have01:41:13
to put the value inside of the function01:41:15
parameters not not by setting them like01:41:17
this so I couldn't say something like a01:41:20
radar push but what I can do is01:41:23
I can create a a new array for example a01:41:27
new to-do list01:41:30
and01:41:31
say that whenever I want to add a new01:41:33
task I basically want to have a new01:41:37
to-do list which is made out of the old01:41:39
to-do list01:41:41
with the addition of the new task that01:41:43
we want to add if you're not familiar01:41:45
with this thing over here this is the01:41:48
spread operator and it is extremely01:41:50
important when you're using react01:41:52
because this kind of JavaScript is used01:41:54
a lot in react especially when you're01:41:56
working with States basically what this01:41:58
means is when you put the three dots01:41:59
over here you're just saying that you01:42:01
want to add you want to make an array01:42:03
that is composed of everything in this01:42:05
list plus this value over here so that01:42:09
means that now I can just set the to-do01:42:12
list to be equal to the new to-do list01:42:16
and what we're doing here is we're just01:42:18
adding the new value to the list so this01:42:21
is amazing right it it will be working01:42:23
it is working01:42:24
um but we're not able to see it working01:42:26
for now because we're not displaying01:42:29
um the value that the list inside of our01:42:31
UI I could add over here do homework01:42:34
but there's nowhere where like it is it01:42:37
added this task but there's nowhere to01:42:40
be seen a list in our UI so the way01:42:42
we're going to show that list is inside01:42:44
of our div over here for a list we want01:42:47
to grab the to-do list which is a state01:42:49
which is an array and using what we01:42:51
learned in my in the third episode of01:42:53
this course we want to map through this01:42:57
list now why do we want to map through01:42:59
this list because when you have a list01:43:01
and you want to display each element in01:43:03
the list and react as a UI element you01:43:07
say the name of the list dot map and01:43:10
then it will iterate through every01:43:11
element and you just grab the task or01:43:14
each element in the array and as an01:43:17
argument to a function and inside of the01:43:20
function you just return some sort of UI01:43:23
that you want to display based on that01:43:26
specific element so I want to display an01:43:29
H1 tag for each element in the to-do01:43:31
list now what do I want to display for01:43:34
each element what well I just want to01:43:35
display the task that is being01:43:38
represented in that specific index so if01:43:41
initially it should be empty because our01:43:44
array is empty but when we add a new01:43:46
task then it will Loop through the array01:43:49
it will go to that task and just put the01:43:51
name of the task inside of this H1 tag01:43:54
so you can see that since we already01:43:56
added the do homework now it's being01:43:58
displayed but I'll refresh again to01:44:00
first so you guys can see I'm going to01:44:01
say do homework01:44:04
and when I click add task now it just01:44:06
added to the list I could add more stuff01:44:09
like wash dishes01:44:12
and it will keep adding let me do01:44:15
another thing um clean room01:44:18
and you can clearly see that um our list01:44:20
is working it is adding to each element01:44:22
in the list then it is looping through01:44:24
the list and just displaying it in our01:44:26
screen so this is the basis of how a01:44:29
to-do list Works01:44:30
um there's some optimizations or just01:44:32
things that we could do to make this01:44:33
look better for example01:44:35
um code wise I usually don't separate01:44:38
the array into a separate variable and01:44:41
then set the list like this I just did01:44:43
this so you guys could have a better01:44:44
idea of what is happening here I usually01:44:47
just copy this and put it inside of here01:44:49
without creating a new variable and this01:44:52
will work the same way01:44:54
now everything else is is looking good01:44:57
right it's like it's basically 29 lines01:45:00
of code 31 lines of code for a pretty01:45:02
cool project right we can add a bunch of01:45:04
stuff and um it's looking pretty nice so01:45:06
this is to emphasize how how quick you01:45:09
can write complex code in react01:45:11
um without writing a lot of code at all01:45:13
so what we want to do now is we want to01:45:15
make this project to look a little bit01:45:17
cooler right we want to add some01:45:18
functionality that will um definitely01:45:21
bring up the value of this project and01:45:23
the first thing we want to do is we want01:45:24
to add the ability to delete a task so01:45:28
the linear task would be01:45:30
um if I I don't want to do homework01:45:32
anymore there will be a little button01:45:34
right over here which we can click and01:45:36
this will be removed from the list so01:45:38
how can we do something like this well01:45:40
the first thing we want to do is add the01:45:42
button for each element in the list and01:45:44
we can easily do that by coming to our01:45:47
to-do list map over here and say that01:45:49
for each element in the in the list01:45:50
instead of just returning the name of01:45:52
the of the element we can actually01:45:54
return a div and this div will include01:45:57
not only the task name but also a button01:46:00
which we'll just put an X to represent01:46:04
delete and you'll see that this is01:46:06
exactly how it looks at the end like I01:46:09
said I'll add some CSS and everything01:46:11
will look a little bit better so you01:46:12
guys can copy the CSS but for now let's01:46:15
just leave it like this but you can see01:46:17
that each element now has a button which01:46:19
doesn't do anything when I click but01:46:20
we're going to obviously add the01:46:21
functionality in a bit so in order to01:46:23
delete a task from the list we're going01:46:25
to create a function over here called01:46:28
delete task right01:46:30
and this function will be called01:46:32
whenever we click on that button01:46:35
so I'm going to come over here and I'm01:46:37
going to put an on click to this button01:46:41
now what I want to explain to you guys01:46:44
is the following how am I going to know01:46:46
inside of this delete task function01:46:48
which element in the list we want to01:46:52
delete01:46:53
because we want to delete a specific01:46:56
element right so how are we going to01:46:58
know which one we want to delete well we01:47:01
can actually inside the delete function01:47:03
over here we can pass an argument to it01:47:05
which we're going to get the specific01:47:07
task that we can delete so for now let's01:47:10
just try deleting it by using the name01:47:13
of the task over here so I could come01:47:15
over here inside of this function say01:47:17
that it accepts a task name01:47:19
and over here inside of an on click you01:47:23
might imagine that I could just come01:47:24
over here and pass the task from the01:47:27
to-do list map as the argument to the01:47:29
function but there's an important thing01:47:32
I want to mention to you guys in react01:47:33
when you have an on click like this01:47:36
and you have a function that has um has01:47:39
a parameter so something that they have01:47:41
to put inside of parentheses over here01:47:43
you can't just put it like this this01:47:46
format like this is just for functions01:47:49
that don't have a parenthesis or01:47:51
arguments in its parentheses when we01:47:53
have something like this we actually01:47:54
need to create a function that returns01:47:57
this function call so this is kind of01:48:00
weird but um just know that whenever you01:48:02
have a parenthesis like this you gotta01:48:04
write on this syntax over here which01:48:06
basically is you're you're creating a01:48:08
new function and you're calling the01:48:09
delete the delete task function so01:48:12
um what we can do now is we could come01:48:14
over here instead of our delete test01:48:16
function and we could do this similar to01:48:19
the add task we're going to set the01:48:21
to-do list01:48:23
to be equal to a new array now with the01:48:26
two when we're adding a new element all01:48:28
we're doing is we're just creating a new01:48:29
array with everything that it ha that01:48:32
the to-do list had before and the new01:48:33
tasks that we want to add but with uh01:48:35
when we want to delete something we01:48:37
actually need to use something called01:48:39
the filter function01:48:40
and now the filter function01:48:42
um I mentioned that it is important for01:48:44
you to already know this but if you01:48:47
don't I'll go over really quickly what01:48:48
this is so imagine you have an array01:48:51
over here right01:48:52
um let's just this is an example if I01:48:54
had an array which has the following01:48:56
elements it had01:48:58
um the name Pedro it had the name01:49:01
Jessica and it had the name James01:49:05
and I want to get this array keep it the01:49:09
same like create a new variable over01:49:10
here right call it new array01:49:14
and but the difference is I want to keep01:49:16
every element in this array but Pedro so01:49:19
I want to delete Pedro from this array01:49:21
I'm going to create a new array which01:49:22
Pedro isn't in there anymore to do that01:49:25
I could do the following I could say01:49:27
array dot filter01:49:29
like this then it's going to Loop01:49:32
through every element and I can grab the01:49:34
element in the array like this let me01:49:37
call it name over here and for each01:49:40
element I'm going to ask okay if the01:49:43
name is equal to Pedro01:49:48
then01:49:50
return false else return true so we're01:49:55
going to say else over here01:49:57
return true so why are we doing01:50:00
something like this well the filter01:50:02
function it takes in a function inside01:50:04
of it which you return true to the01:50:08
elements you want to keep and false to01:50:10
the elements you don't want to keep so01:50:12
in this case we're just asking okay if01:50:14
the name variable so if the element in01:50:17
the array is equal to Pedro then return01:50:20
false if it's not return true so I'll01:50:23
explain why this is useful for our case01:50:24
because we can just go through every01:50:27
element in the to-do list and say okay01:50:30
if the task is equal to the task name01:50:32
then remove it if it's not keep it so01:50:36
return false when the when the task is01:50:38
equal to the test name and return true01:50:40
when it's not so we could do something01:50:43
exactly like that I'm going to delete01:50:45
this over here and I'm going to again01:50:47
create a newer a new to-do list01:50:49
so new to-do list01:50:52
set it equal to the old to-do list dot01:50:54
filter like this01:50:56
and I'm going to Loop through each of01:50:58
them and for each task in this to-do01:51:00
list we're going to run the same logic01:51:02
we're going to say if the task01:51:04
is equal to the task name that we're01:51:07
grabbing from this01:51:09
um from the from the the map over here01:51:12
from the call of the function01:51:13
then return false because we don't want01:51:17
to keep it01:51:18
else else01:51:20
over here01:51:22
we want to return true01:51:25
so we will then have an array with01:51:29
everything but the element we want to01:51:30
delete which is the whole point of this01:51:32
and then we can just set the to-do list01:51:34
to be equal to that so we can test this01:51:37
by coming over here and adding more01:51:39
elements to our to-do list so I'm going01:51:40
to say do homework01:51:42
and01:51:44
I'm going to say wash dishes and you'll01:51:47
see that now when we click on the delete01:51:49
button I can delete do homework and do01:51:52
homework is not here anymore because it01:51:54
looped through every element in the list01:51:55
and it deleted all of them which had the01:51:58
name do homework now if you look at this01:52:00
logic over here it is kind of it looks01:52:03
kind of complicated because it has like01:52:04
one two three four five six seven lines01:52:07
of code you can actually make this into01:52:09
one line of code and it is it looks a01:52:12
lot better why can you do something like01:52:14
that well because01:52:15
um you can just say something like this01:52:17
instead of having an if else statement01:52:19
you can just say return01:52:21
if the task is not equal to the task01:52:25
name so what it's going to do is if it01:52:28
is equal to the task name which is the01:52:30
element we want to delete then it will01:52:32
return false if it is not for every01:52:34
element element it will return true01:52:35
you'll see that this same logic now01:52:38
still works right if I add do homework01:52:42
over here and wash dishes and I delete01:52:47
wash dishes it will delete wash dishes01:52:49
and keep do homework meaning it's01:52:51
working you can even condense this even01:52:53
further by removing the curly braces01:52:55
over here and the return statement01:52:58
and just doing something like this and01:53:00
it will still work because that's just01:53:03
how JavaScript works and even better01:53:05
like I mentioned over here we don't even01:53:07
have to create a new variable we can01:53:10
even just grab this and put it inside of01:53:13
here01:53:14
and this whole logic is now condensed01:53:17
into a single line of code which still01:53:20
works and it's amazing you can see I can01:53:22
still delete it so it's looking perfect01:53:25
right but there's an issue with this an01:53:27
issue that I purposively didn't tell you01:53:30
guys till now because I feel like I need01:53:32
to go through the wrong part first to01:53:35
then explain to you guys why we're gonna01:53:37
fix this in a different way so the issue01:53:39
is the following if I do if I write a01:53:41
task called do homework over here01:53:45
and I write another task called do01:53:47
homework again right I want to be able01:53:49
to delete the first two homework without01:53:51
deleting both of it at the same time01:53:52
right it doesn't matter if I have two01:53:54
tasks read the same name there are01:53:56
different tasks because I added them01:53:57
separately right but at the moment this01:54:00
won't be possible because if I delete01:54:02
one of them it delete both because what01:54:04
it's doing right now it's it's looping01:54:06
through every element in the in the01:54:07
array and it's deleting all of them with01:54:10
the name equal to the name that we01:54:12
wanted to leave so these two elements01:54:13
have the same name both of them will be01:54:14
deleted which is not good at all01:54:17
so what we can do to fix something like01:54:20
this is we have to have some sort of01:54:23
identifier to differentiate each task in01:54:26
the list01:54:27
now what kind of identifier we can use01:54:30
well an identifier that is extremely01:54:32
common in every web development project01:54:35
out there which is an a variable called01:54:37
ID for each element in the list so now01:54:42
instead of having a to-do list which is01:54:44
just an array of strings right an array01:54:47
that is like do homework or01:54:49
or just a string right we can now have01:54:52
actually each task be an object like01:54:55
this an object which has an ID for01:54:58
example one and a task name01:55:01
which is equal to do homework01:55:04
right with this way we're now going to01:55:07
have more information for each task01:55:08
which we can use to differentiate them01:55:11
and you'll see how this can grow to be01:55:13
even better when we write the part of01:55:15
updating the task so this is what we01:55:18
want we want to change this to instead01:55:20
of taking strings inside of this array01:55:22
we're going to take an object which is01:55:24
going to have an ID and a task name so01:55:26
let's delete this over here because I01:55:27
was just explaining to you guys and how01:55:29
we're going to do this is first of all01:55:31
when we add a new task we don't want to01:55:34
just set the new array to be equal to01:55:37
the old array plus the new test because01:55:39
new task is a string and not an object01:55:41
what we want to do is01:55:43
we're going to create this object over01:55:45
here for whenever we want to add a task01:55:47
which will have an ID and it's going to01:55:50
have a test name which is what we we01:55:52
said we wanted before task name we know01:55:54
it will be01:55:56
um the value for new task and we'll just01:55:59
pass this over here but while we will01:56:01
put for the ID well the first element in01:56:03
the list we want the ID to be one right01:56:05
because it's the first element in the01:56:07
list the second one we want it to be two01:56:09
the third one it will be three so what01:56:13
we want to do is we want to grab the01:56:17
element in the array before the current01:56:20
one and just add one to that ID so it01:56:24
would be something like this I would say01:56:25
to-do list then go to do list dot length01:56:31
like this minus one meaning we want to01:56:34
go to the previous one the previous01:56:36
element that's the last element before01:56:37
the one that we want to add right now01:56:38
and we're going to grab the ID for that01:56:40
element and add one to it if you're01:56:43
confused by this logic I can go over01:56:44
again basically we're just grabbing the01:56:46
idea of the the last element and we're01:56:48
adding one to it because now we're01:56:50
adding a new element and we want the ID01:56:51
to increment by one right that makes01:56:53
sense but there's an issue with this an01:56:55
issue that is pretty obvious initially01:56:58
the array is empty so there's no ID to01:57:01
the less element so what we can do is we01:57:04
can ask over here first if the to-do01:57:08
list dot length is equal to zero01:57:11
right we're going to use a turnover01:57:13
operator we're going to see if it's01:57:14
equal to zero then the ID will be 1.01:57:17
else we'll just grab the previous01:57:19
element like we like we said before and01:57:22
we're going to add one to to it so if01:57:24
it's a second element it will be two if01:57:25
there's a third it will be three I01:57:27
understand if this is a bit confusing01:57:29
especially because we're in the01:57:30
beginning of the course but if you guys01:57:32
are interested just let me know any01:57:33
questions in the description and I'll be01:57:35
able to answer everything also we have a01:57:37
community on Discord which is going over01:57:38
this course so if you're interested in01:57:40
checking that out just go in the01:57:41
description you'll see the link for the01:57:43
Discord so this logic makes sense to me01:57:47
I hope it makes sense for you too but01:57:48
let's continue forward so we're here now01:57:51
we are adding a new task which is01:57:53
perfect but despite the logic here being01:57:55
correct it's breaking now you see it's01:57:58
breaking every time I need to I want to01:58:00
add a new task it breaks the reason is01:58:01
because we updated the format of the01:58:04
to-do list01:58:05
um of how it looks of this array now01:58:07
instead of being a string it's an actual01:58:09
object so when we're displaying over01:58:11
here we can't just say something like01:58:13
display the test because task now is an01:58:16
object and not a a string if we want to01:58:18
display like it was before I have to say01:58:20
task dot task name like this and you'll01:58:23
see that01:58:25
um now it's adding as well but the button01:58:28
the delete button is still broken01:58:29
because it looks like it isn't but it is01:58:32
still broken because01:58:34
um basically we're passing the whole01:58:36
object over here when instead of that we01:58:38
want to actually pass the ID and now01:58:40
we're going to delete the element by01:58:42
using the ID instead of using the task01:58:43
name01:58:44
so we're going to change this to say01:58:46
task.id01:58:48
and instead of this delete task function01:58:50
all we're going to do is we're going to01:58:51
change this to ID and we're going to say01:58:54
if the task dot ID is not equal to the01:58:57
ID that we just passed then you want to01:59:00
delete it right so let's try that again01:59:02
let's say do homework we're going to01:59:04
even write it twice right we're going to01:59:06
use the same thing twice just like how01:59:07
we did before before we were going to01:59:09
delete it based on the name so if both01:59:12
of them would be deleted because they01:59:13
both have the same name but now what I01:59:15
expect is this one over here to have an01:59:17
ID of one and this one over here to have01:59:19
an idea of Two And since we are now01:59:21
deleting by the ID we should only delete01:59:23
one which is exactly what happens uh it01:59:26
looks like it deleted the wrong one but01:59:28
it's just because the list updated and01:59:30
now the second one is in in the first01:59:32
position but you can see now we can have01:59:34
multiple tasks with the same name so our01:59:37
project is looking kinda nice right my01:59:40
plan with this is I want to actually01:59:42
just add some CSS right now so it looks01:59:44
a little bit better I know a lot of01:59:46
people like to see something visual like01:59:48
visually pleasing while they work with01:59:50
so I'm gonna just write some CSS come01:59:53
back with the CSS you'll be able to see01:59:54
the CSS if you if you even want to copy01:59:56
the CSS the link for the code will be in01:59:58
the description so you can just check it02:00:00
out and then we're going to come back to02:00:02
do the exercise for this episode which02:00:04
you guys will write it and I'll show you02:00:06
guys the solution02:00:08
um after you guys write it so like just02:00:10
like I did in the previous episodes so02:00:11
I'll be back in a second after I've02:00:13
written some CSS just to show you guys02:00:14
how it looks okay everyone so we're back02:00:16
and this is the CSS changes that I made02:00:19
it's not a lot I just changed the color02:00:22
of this made it look like semi okay I02:00:24
don't care that much about CSS like I02:00:27
said the whole point of this course is02:00:28
react and not CSS but you can see this02:00:31
is how it looks now still works the same02:00:33
we can add more we can add tasks we can02:00:35
have multiple tasks and just delete them02:00:37
and um if you're if you're interested in02:00:39
just copying the CSS which again it's02:00:41
not it's not even that good this is the02:00:43
CSS that I wrote It's not a lot it will02:00:46
all be in the description so check it up02:00:49
so what I want to do now is I want to02:00:51
first try to show you guys how to use02:00:56
components to make this look a little02:00:57
bit better and then I'm going to present02:00:59
you guys the X the exercise for this um02:01:02
video so we've talked about components02:01:04
before right and components um make it02:01:07
easier for you to abstract a lot of02:01:09
logic into a single02:01:11
um like compact function right so the02:01:15
kind of logic I'm talking about is jsx02:01:18
which is a mix between JavaScript logic02:01:20
and uh like HTML or UI so we can02:01:24
Implement components over here by taking02:01:27
away this part over here and putting02:01:29
into a single component the reason for02:01:31
that is because this part02:01:32
um it think about how how it rep how02:01:35
it's represented right it's a piece of02:01:36
UI that is consistently being changed02:01:39
depending on a different value for some02:01:41
sort of data such as the task name and02:01:43
the ID so if I wanted to create a02:01:46
component for representing this I could02:01:49
come over here and I could create a file02:01:50
called task for example and I would just02:01:54
create the component which we all know02:01:56
is just a function in JavaScript with a02:01:59
capital letter first and a function that02:02:01
will return UI so the UI we're going to02:02:04
return is this over here so I can just02:02:06
copy this and paste it over here now02:02:08
obviously we need to take in props for02:02:11
this to work so over here at the top we02:02:13
can just say props like this and02:02:17
simply come over here and say02:02:19
props.taskname and props.id same thing02:02:22
as before it just works the same way but02:02:25
the difference now is instead of having02:02:27
all this stuff over here I could just02:02:29
have a return and return the task02:02:32
component that we just created right it02:02:36
just abstracted the whole Logic for that02:02:38
the whole UI for that and put it in a02:02:39
different file in a different component02:02:41
now we have to import this component so02:02:44
I'm going to come over here and I want02:02:46
to export this right by exporting and02:02:49
then over here I can just say import02:02:52
from and then we put the path02:02:55
to that file so it's the task file02:02:58
because it is in the same level and then02:03:01
I just want to import the task component02:03:03
so now this should be working the exact02:03:06
same way but we do have to pass the02:03:08
props that we determined that we need to02:03:10
get over here the two props that we need02:03:12
is a task clean prop and an ID prop so02:03:15
we'll just come over here and say task02:03:17
name like this and we'll pass the task02:03:20
dot task name02:03:23
and we'll get an ID which is uh task dot02:03:27
ID02:03:28
so now we get both of those pieces of02:03:31
information directly from the props and02:03:33
it should be working the exact same way02:03:34
oh it says delete task is not defined oh02:03:37
so that's another thing I wanted to02:03:38
mention02:03:39
um we have this delete task function02:03:41
over here right and we need to access it02:03:45
inside of the task component but how02:03:47
exactly are we going to do something02:03:48
like that well the way we can do02:03:51
something like that is by for example02:03:53
passing this delete task function inside02:03:56
of as props for this task component now02:03:59
we could copy this and paste it over02:04:02
here and you would imagine that this02:04:03
would work the same way but it wouldn't02:04:05
because we don't have access to the set02:04:07
to-do list or the to-do list inside of02:04:09
our component we could pass both of02:04:11
those interfaces of information as props02:04:13
but it's much easier for us to instead02:04:16
of doing something like this over here02:04:18
we have just we can just say props dot02:04:20
delete task and just grab just pass the02:04:25
delete task as a prop to this component02:04:29
just like this so if you were if you02:04:31
didn't know this02:04:32
um you can pass everything as prop02:04:34
um you can pass variables just like I02:04:37
numbers and and strings but you can also02:04:39
pass functions so we're just passing02:04:42
this to this component the task02:04:43
component and accessing it over here and02:04:46
you can see that it still works the02:04:48
exact same way as before which is02:04:50
amazing so this is how we would abstract02:04:53
this make this look a little bit better02:04:55
because now we just have this task02:04:56
component and all the UI is over here so02:05:00
now what I want to do is I want to02:05:01
present you guys the exercise for this02:05:03
episode the exercise is creating the02:05:05
update functionality like I mentioned in02:05:07
the beginning so what is the update02:05:09
functionality well I want to have a02:05:11
little button over here in the task02:05:15
um like similar to The X the delete02:05:16
button we can have another button right02:05:18
over here02:05:20
um and we'll just say complete I'm going02:05:23
to save this you'll see that um this is02:05:25
how the button looks right so what I02:05:28
want is to be able to click on this02:05:29
complete button over here and it will02:05:31
make the task be completely green right02:05:34
so every task that you complete it will02:05:37
become green to symbolize that the task02:05:39
has been completed to do that I'll give02:05:41
you a hint you have to create a new02:05:44
property inside of02:05:46
um like inside of this object over here02:05:49
instead of just having each task having02:05:51
an ID and a task name you're going to02:05:53
have another thing for example called02:05:54
completed which will be in a Boolean02:05:57
like false or true and use that to02:06:01
change the value and use that to02:06:03
determine which tasks are completed or02:06:05
not now I'm going to obviously show you02:06:07
how this is like the solution for this02:06:09
but I want you to do this on your own02:06:10
I'll also tell you that for updating02:06:13
something like this you will not use the02:06:15
filter function you'll do something02:06:16
similar to this but you will use the map02:06:19
function so you can do whatever you want02:06:22
to to solve this you can try on your own02:06:24
if you already know have an idea of how02:06:25
to do it you can also just look02:06:28
tutorials online or anything like that02:06:30
or just search online how to do02:06:31
something similar I'm obviously going to02:06:33
explain to you guys at the end of this02:06:34
video but I'll give you some time to do02:06:36
this and come back whenever you're ready02:06:38
okay everyone so this is the solution to02:06:41
how to do something like that you see02:06:43
that right now we have over here we02:06:45
could add a task and if I I'll just do02:06:50
another one wash dishes and if I want to02:06:53
complete one of the tasks I can just02:06:55
click on this and it will become green02:06:56
to represent that it's been completed02:06:58
and it will work with every other one as02:07:00
well so the way we can do something like02:07:02
this is like I mentioned we'll have a02:07:04
field called completed which will be a02:07:06
Boolean to determine if the task is02:07:07
completed or not it will start out as02:07:09
false but if we click on the button it02:07:13
will call this complete task function02:07:15
which is the main Port where we work02:07:18
with some logic right so I mentioned02:07:20
that you guys want to use the map02:07:21
function because the map function allows02:07:23
you to Loop through the to-do list or02:07:26
any array and for each element you can02:07:29
change its element depending on some02:07:32
sort of condition so over here the02:07:34
condition is02:07:35
if the ID of the task is equal to the ID02:07:38
that we want to complete then I want to02:07:41
I want the element in that list that02:07:43
element then I want that specific02:07:45
element to remain the same but the02:07:48
completed property in it so this thing02:07:50
over here will now be true instead of02:07:52
false so if again if you've never seen02:07:54
this syntax over here the three dots02:07:57
mean the spread operator it means that02:08:00
you're basically is this structure02:08:03
you're basically saying that you want to02:08:04
keep the whole object the same but the02:08:06
field completed will be now set to true02:08:09
and if it's not the element that we want02:08:12
to complete then we return test because02:08:14
it is just we want to keep it the same02:08:16
so if you're not familiar with map then02:08:18
it's one of the things that I assume you02:08:20
should know for this course is it's a02:08:22
JavaScript function but this is the02:08:23
whole point of it whatever you return is02:08:25
will be replaced in the list so we're02:08:29
replacing in this case with completed02:08:31
equal to true in this case we're not02:08:32
replacing at all we're just keeping it02:08:34
the same and then we pass this complete02:08:38
task function to our task as props and02:08:42
we also passed the completed property02:08:44
from the task as props as well because02:08:46
now in our task over here we call that02:08:49
complete task function just like we did02:08:50
with the delete task like this and also02:08:53
to make it green we add a style to our02:08:55
div like we did in the previous episode02:08:57
and the style we changed its background02:08:59
color depending on if it's completed or02:09:02
not if it is completed we make it green02:09:04
if it's not we make it white and all of02:09:07
this allows us to have a project that a02:09:11
to-do list that works perfectly as we02:09:13
wanted in the beginning so again I know02:09:17
this all might seem a little bit02:09:18
confusing because it's the first time02:09:20
we're actually using a lot of logic in02:09:22
react we're doing a lot of states and02:09:24
stuff like that but I don't want to02:09:26
overwhelm you guys although I might I02:09:28
think it might a little bit I remember02:09:31
this was the the hardest thing for me in02:09:33
the beginning but just being able to02:09:34
play around with the code and02:09:35
understanding everything really helped02:09:37
up the the points that I want you guys02:09:39
to spend the most time understanding is02:09:42
um how the ad Edition part of the to-do02:09:45
list Works how the deletion works and02:09:47
how the updating or the completing works02:09:50
because this over here will be massively02:09:53
useful for us later on in the course02:09:55
understanding the filter and the map02:09:57
function are extremely important also02:09:59
understanding the part where we just02:10:01
separate into a component and how props02:10:03
work it just refresh your knowledge on02:10:04
stuff that we've worked in the past so I02:10:06
I would recommend you also spending some02:10:08
time okay everyone so in order to start02:10:10
explaining how lifecycle Works in react02:10:13
and how um the use effect hook Works in02:10:16
react as well I want to first uh I02:10:18
created this example over here that is02:10:21
going to be able to explain to you guys02:10:22
exactly how everything works but I also02:10:24
want to give you guys some terminology02:10:26
before we start working with this so02:10:28
life cycle like the word um says it's02:10:31
basically a description of how a02:10:33
component like the Collide cycle02:10:35
component just explains how everything02:10:38
happens from the birth of the component02:10:40
to the death of the component obviously02:10:41
that's an analogy but um everything that02:10:44
happens from the beginning till the end02:10:45
so there's three different stages in the02:10:49
react life cycle there's the mounting02:10:51
stage there's the updating stage and02:10:55
there is the unmounting stage so the02:10:58
important word to know here which you02:11:00
might not know is mounting and mounting02:11:02
basically just think of mounting as the02:11:05
component appearing in the screen or the02:11:07
component starting to exist in your02:11:09
project and then mounting being the02:11:11
opposite of that so the components stop02:11:13
appearing in the screen so in in a02:11:16
website uh that would be the an element02:11:18
a component that represents a bunch of02:11:21
HTML elements or jsx elements suddenly02:11:24
appearing in the source code and then02:11:27
unmounting would be basically that02:11:29
disappearing and then updating you guys02:11:32
might know what the word means it just02:11:33
means that that component opponent it is02:11:36
changing the UI and and whatever it's02:11:39
returning inside of the component is02:11:40
changing depending on something such as02:11:43
for example a prop has changed or a02:11:46
state inside of the component has02:11:47
changed or something like that right so02:11:49
those are the three words that we need02:11:51
to understand because those are the02:11:52
three stages of a react component life02:11:55
cycle now we can see this existing and02:11:59
working very easily by creating a simple02:12:01
project that showcases this so there's02:12:04
many different projects that you can02:12:05
just create to to Showcase that this one02:12:08
over here I find it to be pretty simple02:12:10
and it just uses stuff that we've done02:12:12
in the previous episode so I find it to02:12:14
be really cool basically we have over02:12:16
here our app component and inside of it02:12:19
we have a state called show text which02:12:23
is just a Boolean true or false and a02:12:26
button which when we click on it it02:12:28
should change the value of the state to02:12:30
the opposite of what it is right now so02:12:31
if it's false and we click on the button02:12:33
now it will become true and the state 802:12:35
is used to determine if this other02:12:38
component called text is being is02:12:40
appearing on the screen or not now this02:12:42
other component called text is pretty02:12:44
simple as well all it has is this other02:12:46
state called text which is a string and02:12:50
we're showcasing it on the screen over02:12:52
here inside of a header tag but every02:12:54
time we type on an input it will change02:12:57
the value of that text and you can see02:12:59
this working over here because basically02:13:02
we have the show text button and show02:13:05
text state is false when I click on this02:13:08
the text component appears and I can02:13:10
start changing the value of the text02:13:13
state right and if I want to basically02:13:17
turn it off I can just click Ctrl text02:13:18
again and it will disappear now you can02:13:21
easily see here the three stages of a02:13:24
react component lifecycle because if we02:13:26
inspect element which is something I02:13:28
would recommend you guys get really02:13:30
familiar with because it helps a lot02:13:32
with any kind of web development not02:13:34
just react02:13:36
um and we open our screen over here we02:13:38
try to navigate throughout our app we02:13:40
see right now inside of the div with the02:13:42
class app which is where our whole app02:13:46
exists there's only a button right so02:13:49
this stuff over here all of this UI over02:13:52
here is not currently in our code and02:13:55
that makes sense because it's not being02:13:56
shown right but when I click on this now02:13:59
this div appears so this div represents02:14:02
the text component which means that02:14:05
right now what happened is we just02:14:06
mounted this component into our project02:14:09
so this component was not existing02:14:11
inside of our project or inside of our02:14:13
um inside of our web page and now it is02:14:15
existing now if we open this up you can02:14:18
see there's an input and there's an H102:14:20
tag the H1 tag is obviously empty02:14:22
because the text state is empty02:14:24
initially and the input is over here02:14:25
just chilling nothing is happening to it02:14:27
so what we can do now is we can start02:14:29
typing on this and you'll see02:14:31
immediately that the code inside of this02:14:34
component over over here is changing02:14:36
right it's updating in real time because02:14:39
we are updating our component so this is02:14:42
the second stage of the react life cycle02:14:44
you can see it is literally updating as02:14:46
we go now we want to see the last stage02:14:48
right so unmounting if we click on this02:14:51
over here it's going to go back to what02:14:53
it was before now we don't have that div02:14:56
anymore which means we don't have that02:14:58
component anymore now this is extremely02:15:00
important to understand because in a lot02:15:03
of times you want to make your02:15:05
components as efficient and make them02:15:08
just work exactly how you want them to02:15:09
work so understanding how a component02:15:12
exists and and the life cycle stages of02:15:15
it is extremely important and there's02:15:17
one specific concept that will02:15:20
encapsulate all of that in react and02:15:23
it's called the use effect hook so back02:15:27
in the days there was actually three02:15:29
different methods that you might have02:15:31
seen if you're digging up react code you02:15:33
might have seen something like component02:15:35
did Mount something like this ignore02:15:38
this kind of stuff if you see it in the02:15:40
internet that's all like old react02:15:43
that's when class components was a thing02:15:46
um so if you see that don't worry you02:15:48
don't need to learn that what you need02:15:49
to learn is that there is a hook and02:15:51
react called the use effect hook this is02:15:55
one of the most important hooks in react02:15:57
in my opinion it is the second most02:15:59
important one before they use State02:16:01
although I can argue that you can have a02:16:03
project without a use State hook but you02:16:05
cannot have a project without a use02:16:06
effect hook so the use effect talk is a02:16:09
hook that is used to basically control02:16:13
what happens depending on which stage of02:16:16
your component's life cycle it is so02:16:18
with this hook over here this simple02:16:19
function over here we can we can create02:16:22
some sort of action that will be02:16:24
triggered when the component is mounting02:16:26
or when the component is updating or02:16:28
when the component is unmounting so02:16:32
that's something extremely cool because02:16:34
it exists and you can do all that inside02:16:37
a single hook inside of single function02:16:39
so I know that might seem a little bit02:16:42
confusing if this is the first time02:16:44
you're working with the use effect so02:16:45
I'll give you guys a very easy example02:16:47
just continuing with whatever we have02:16:49
over here and I'll show you guys exactly02:16:51
what I mean so I'll come over here and02:16:53
if you want to use the use effect hook02:16:55
all you have to do is you just have to02:16:57
say use effect02:16:58
and just open and close parentheses and02:17:01
then put a function inside of the use02:17:03
effect so like this just a function that02:17:06
exists inside of this now the use effect02:17:08
by default what it does is whatever you02:17:12
put inside of here as of right now it02:17:15
will call for example console log a02:17:17
message over here saying component02:17:20
mounted02:17:22
like this component mountain and when02:17:25
the component mounts this will be02:17:27
console logged that's all it will do02:17:29
right now you'll see that this happens02:17:32
because if I refresh my page go to my02:17:34
console and I click on this button it02:17:37
will say component mountain now there's02:17:39
a thing you might be wondering why did02:17:41
it console log twice now if you watch02:17:44
tutorials about the use effect before02:17:46
early this year which is 2022 you might02:17:49
know that people might say that this on02:17:51
the console log once it's because react02:17:53
updated I don't want to get too in-depth02:17:56
about what happens here but I want to02:17:58
emphasize that because that can confuse02:18:00
a lot of beginners What's Happening Here02:18:02
is now what react does is if you have02:18:05
this thing over here called the strict02:18:08
mode it is supposed to help you write02:18:10
better code that's the whole point of it02:18:12
so if you have that currently in your02:18:14
project it will do it will console log02:18:17
twice and you see I just removed and it02:18:19
will only console log once because what02:18:21
we does is it's basically checking to02:18:24
see if you're handling your use effects02:18:26
correctly again I won't explain that02:18:28
right now I'll explain it at the end of02:18:30
the video for only for those who are02:18:32
interested it's actually a pretty02:18:33
interesting topic but for now just02:18:36
imagine that the use effect only run02:18:38
once let's just imagine that I'll02:18:40
actually keep this console logged02:18:42
because it's better for for you to02:18:45
understand it this way so as of right02:18:47
now the use effect only is calling02:18:50
itself when the component has mounted02:18:52
and you'll see that I need to save this02:18:56
like this I need to do this so as of02:19:00
right now you can see that when the02:19:01
components it says component amounted I02:19:04
will I'll unmount it again and then I'll02:19:06
mount it again and you'll see it will02:19:07
console log again so the user effect02:19:09
right now is allowing us to execute an02:19:12
action exactly when the component mounts02:19:14
which is something we have never done02:19:16
before so what what kind of action could02:19:18
we put over here well in the beginning02:19:20
this is very useful for when you for02:19:22
example have a page where you need to02:19:24
make an API call to get data from02:19:27
somewhere immediately when you go into02:19:28
the web page you just put it over here02:19:30
and what happens is when you go into02:19:33
that specific page it will fetch the02:19:35
data immediately and display in the02:19:37
screen that's a very very easy example02:19:40
on why you might want to do something02:19:42
like this right why you might want to02:19:44
execute some sort of action when the02:19:45
comp when the component appears or when02:19:48
the component mounts now as you can see02:19:49
over here this is as it is right now02:19:51
it's only executing an action on one of02:19:54
the three stages of a react component's02:19:56
life cycle so how would we make it so02:19:59
that we can console log when it's02:20:01
updating and we can console log when02:20:03
it's unmounting we want to see if we can02:20:05
actually detect and Trigger some sort of02:20:07
action when those two stages are02:20:09
occurring so for actually updating it's02:20:12
actually pretty simple so with the user02:20:15
fact over here this will be called every02:20:18
single time there is a state change so02:20:21
what I mean by that is whenever this02:20:23
component re-renders whatever is inside02:20:25
of here will be called again so what02:20:28
happens is if the component itself02:20:30
updates in any way it can either be a02:20:33
prop that is receiving changes or a02:20:35
state inside of it like this one over02:20:37
here changes then this will be called02:20:39
again so let's see if that actually02:20:42
happens so you'll see it will be called02:20:44
once because it mounted and now if I02:20:46
change a state inside of this component02:20:48
it will keep calling itself meaning that02:20:51
over here whatever we put inside of here02:20:55
as it is right now will also be called02:20:57
when the component is updating so the02:21:00
two stages are now being triggered now02:21:02
there's a caveat what if we only want to02:21:05
console like this if it's mounted but02:21:07
not when it's updating well the user02:21:09
fact hook allows us to put an array over02:21:11
here in this array basically tells us we02:21:15
can specify what props or state changes02:21:18
we want to trigger the use effect so if02:21:22
I put the text over here02:21:24
then what will happen is the same thing02:21:27
would happen right it will console log02:21:30
and Trigger the use effect hook whatever02:21:32
is inside of here every time the text02:21:33
changes so the same thing was happening02:21:35
but02:21:37
if I remove the text from here02:21:39
you'll see that now02:21:41
it doesn't trigger it anymore only the02:21:44
mounting triggers so if you want to02:21:46
execute an action only once when the02:21:48
component mounts you put an empty array02:21:51
over here but most importantly if you02:21:54
want to trigger an action every time a02:21:56
specific State changes or many different02:21:58
state changes you can just put them over02:22:01
here for example putting the text over02:22:03
here this is really cool and it comes in02:22:06
handy in so many situations so it is02:22:08
extremely important for you to02:22:09
understand how this works however I know02:22:12
that since this is the first time you're02:22:13
probably seeing the use of I took it02:22:15
will be hard to come up with examples in02:22:17
your head and see the how useful this is02:22:19
but don't worry I have that in mind02:22:21
we're going to be using this a lot02:22:23
especially in the next video now we've02:22:25
done two different stages what is the02:22:27
third stage of a react component's life02:22:30
cycle well it's unmounting how do we02:22:32
execute an action when the component02:22:35
disappears so with a use effect we can02:22:38
return a function02:22:40
and this function over here will be02:22:43
executed when the component amounts so02:22:46
if we want to console log for example02:22:48
something saying component02:22:51
unmounted like this so now if we remove02:22:55
this over here I want to remove it just02:22:57
so you guys can see this working better02:23:00
what will happen is immedially when we02:23:03
show the text the component issued02:23:05
console log that the component was02:23:07
mounted and if we decide to not show it02:23:09
anymore it will console log that the02:23:11
component was unmounted so I'll come02:23:13
over here refresh the screen show the02:23:15
text it will say component mounted and02:23:17
then remove it and you'll you'll see02:23:19
that it says component unmounted so we02:23:22
are triggering both things immediately02:23:24
so how can this be useful there's many02:23:27
different situations imagine that you're02:23:30
you want to make a I don't know a02:23:33
request to a service an API when you02:23:36
render a component so when a component02:23:38
mounts you want to make a request to an02:23:39
API and continuously make that request02:23:41
but then when the component disappears02:23:43
you want to stop that request well you02:23:46
can put the the logic for making the02:23:48
request over here and put the logic for02:23:50
stop like the logic for stopping to make02:23:52
that request over here so this serves02:23:55
for you to kind of clean up the mess you02:23:58
made not the mess you made but like02:24:00
whatever logic you put over here if it's02:24:02
an object that might cause leaks after02:24:04
this you might want to fix it over here02:24:07
so that's basically it for the use02:24:10
effect hook now again I know that02:24:14
um it might not have seemed that useful02:24:15
right now because I'm just using console02:24:17
logs but the next episode is where I02:24:19
show you guys the first major example of02:24:22
using the user effect inside of your02:24:24
project it is might have been in the the02:24:26
main one you used in the beginning02:24:28
um afterwards you'll be using this all02:24:30
the time when you get more advanced in02:24:31
react but um I just needed to make this02:24:34
video first so you guys could have an02:24:36
idea now I want to explain to you guys02:24:39
the whole uh streak mode thing so if02:24:42
you're not interested in that you can02:24:43
just go to the next episode if you're02:24:44
interested I'll go over why um this02:24:47
thing makes the request in the use02:24:49
effect twice or makes the use effect run02:24:51
twice so stick around for that so02:24:54
basically we have over here what is02:24:56
known as strict mode so I mentioned to02:24:58
you guys that strict mode over here is a02:25:00
way for react to kind of help us write02:25:03
better code right so what do I mean by02:25:05
that well react has certain rules02:25:08
um inside of their project that a lot of02:25:10
people like not following and streak02:25:13
mode will make some checks for you02:25:15
um while you're writing your code and02:25:17
prevent you from making those mistakes I02:25:19
would always recommend keeping this on02:25:21
because if you're make if you're writing02:25:22
some code that strict mode is not02:25:25
allowing you to you should probably not02:25:27
be writing that code so just removing it02:25:29
is kind of redundant because you're02:25:31
literally doing something that is an02:25:33
anti-pattern something that react02:25:34
doesn't recommend and it doesn't matter02:25:37
what use case you have you're running02:25:39
into there's always a solution and02:25:41
strict mode is just telling you that the02:25:42
one you have right now it's not the best02:25:44
one so that's a little bit of a rant for02:25:46
those who don't want to use trick mode02:25:47
in my opinion you have to and what02:25:50
happens over here with the component02:25:52
mount running twice is that if I go over02:25:56
here right now into our project right02:25:58
with strict mode and I show the text02:26:00
you'll see that what happens is the02:26:02
component mounted once the component02:26:04
unmounted right after it and then the02:26:07
component mounted again so that's02:26:09
something interesting to see right we02:26:12
thought it was running twice but what is02:26:14
really is happening is with strict mode02:26:16
react forces the component to mount once02:26:19
then unmount immediately after and then02:26:22
Mount again02:26:23
so that's just to check to see if your02:26:28
user fact is running correctly because02:26:30
if you messed up over here like I said02:26:33
you messed up and you wrote some code02:26:34
that can cause some leak so if you wrote02:26:36
some code over here that can cause some02:26:38
type of leak or some some type of memory02:26:40
leak then you react you will know02:26:42
because uh what happens is a react will02:26:45
force the component to unmount meaning02:26:47
the leak will will become evident and02:26:49
then it will Mount again now what02:26:52
happens is if your code is running02:26:54
correctly meaning that whatever logic02:26:58
you put over here you're cleaning up on02:27:00
the unmounting stage then it shouldn't02:27:02
have any issues with it because what is02:27:04
going to happen is it's going to mount02:27:05
for a sec for like a small amount of02:27:07
time then immediately unmount so if your02:27:09
component is running correctly02:27:11
everything should remain the same and02:27:13
then it's going to mount again to02:27:15
actually run the use effect like you02:27:17
intended to so this is just a way to02:27:19
check to see if you wrote your code02:27:21
correctly if you didn't then immediately02:27:23
you'll see everything will be breaking02:27:25
there's infinite examples of this but02:27:27
like I said since this is the first time02:27:29
you guys are learning use effects02:27:31
um it might get kind of confusing if I02:27:33
just went on a rant about02:27:35
um different use cases of this when you02:27:37
guys might have never used the use02:27:39
effect before this video so02:27:41
um this will become really more evident02:27:43
as we go on into the series there's02:27:44
actually a really cool video02:27:46
um from another YouTuber which goes over02:27:48
just this specific topic02:27:51
um meaning the the use effect calling02:27:53
twice I'll Pro I'll probably tag it up02:27:55
here on the video if you're interested02:27:56
in checking it out02:27:58
um it's really interesting so with that02:28:00
in mind this was it for the video02:28:01
there's no exercise in this video it's02:28:03
the only video with no exercises because02:28:05
it's hard to come up with an exercise02:28:07
for the use effect when we haven't02:28:09
learned stuff like API requests or or02:28:11
something like that but keep in mind02:28:13
that's going to be in the next few02:28:15
videos okay everyone so like I said02:28:17
today we're gonna be learning how to02:28:20
deal with apis in react how to fetch02:28:22
data and how to to create an application02:28:24
that is fed by some sort of external API02:28:28
that sends data through some sort of02:28:30
request into our project and does02:28:32
something with it right so the first02:28:35
example is going to be a very very02:28:37
simple one but it's really cool because02:28:39
it will explain to you guys 95 of of02:28:43
what fetching data in react really is at02:28:46
least the basics so basically what we02:28:48
want is we want to have this project02:28:50
over here which all it does is when you02:28:52
click on this button over here A text02:28:54
will appear over here with a random cat02:28:57
fact so that's that whole project is02:28:59
very random it's not like something very02:29:02
useful but in order to generate the02:29:05
random cat fact it's not going to be us02:29:07
generating it's going to be there's a02:29:09
database out there with a bunch of facts02:29:11
about cats and they provide us the data02:29:14
through an API request and we get it in02:29:17
our react app and just show it in our02:29:19
screen so the whole process of getting02:29:21
data from an external source and02:29:23
displaying it our screen is everything I02:29:25
want to teach in this video so for those02:29:27
who don't know an API is just some sort02:29:30
of code that was written and that you're02:29:34
using in your project but it isn't it02:29:36
isn't part of your specific project or02:29:38
your the specific part of your project02:29:40
you're working in so an API can mean a02:29:43
lot of different things in this case02:29:45
this over here is a website called02:29:48
catfact.ninja effect and this they02:29:52
created some sort of API uh that02:29:55
generates this and every time we refresh02:29:58
or I don't know just go to this URL02:30:01
you'll see the web page is kind of weird02:30:03
right it might look different for you02:30:05
but the say the thing that is the same02:30:07
is that it will always show some sort of02:30:10
um almost like a JavaScript object right02:30:12
this is not a JavaScript object this is02:30:14
actually what is known as Json and it is02:30:17
a way to describe data now you see it02:30:21
changes every time we refresh the page02:30:23
because this is just how this API Works02:30:25
what we want is we want to make a02:30:27
request to this website and get this02:30:30
data and display it in our project right02:30:33
so this is completely free I made sure02:30:36
to get one that is completely free02:30:37
because02:30:38
um you guys can just use it and it's I02:30:41
don't know you don't even have to put02:30:42
anything you just go to this URL if you02:30:44
refresh it you'll see you get the the02:30:46
information so how exactly would we do02:30:49
something like this well first of all we02:30:52
would have to have some sort of react02:30:53
project right and we have this one over02:30:55
here very simple02:30:57
um nothing different from what we've02:30:58
been working so far there's just a02:31:00
button that says generate cat fact and a02:31:03
P tag a paragraph tag which is empty for02:31:05
now but we're gonna put the cat the cat02:31:07
fact inside of here02:31:09
so to do this we would want to fetch the02:31:13
data from this API so fetching the data02:31:17
just means that we want to make a02:31:18
request to the this website and get02:31:22
whatever information this URL returns02:31:26
now this isn't a tutorial about fetching02:31:29
data and um about requesting data in02:31:31
apis in general because I feel like if02:31:33
you're learning react you probably02:31:35
already learned that when you're02:31:36
learning JavaScript this is a main part02:31:38
of 99 of projects websites out there so02:31:42
I would um I wouldn't go too much in02:31:44
depth about the fetch API but I'll show02:31:46
you guys how to use it to make something02:31:47
like this so in real in JavaScript02:31:50
actually it's not even02:31:51
um in react it's it's also not02:31:53
JavaScript it's just something that is02:31:54
built on and available when you use02:31:57
JavaScript is02:31:59
um there is a function called the fetch02:32:01
function and this function it is used to02:32:04
fetch data from an API now if I want to02:32:07
fetch data from this API over here if I02:32:11
want to get this data I could do02:32:12
something like this I could grab the URL02:32:15
for this API I would come over here put02:32:18
over here the URL for this02:32:22
um for this API then what I can do is I02:32:26
can say dot then because the fetch02:32:28
function returns a promise and this will02:32:31
return exactly what we get over here but02:32:35
it needs to be converted into JavaScript02:32:37
objects because we get it as a Json02:32:40
right and a Json like I said is just a02:32:43
method or a way to represent data but it02:32:46
looks very similar to an object so it's02:32:48
very easy for you to convert a Json to a02:32:49
JavaScript object and it's a lot better02:32:51
for us to deal with this as a JavaScript02:32:53
object so what we can do is we can grab02:32:56
the response from this API request I'll02:32:59
call it res for response and just turn02:33:02
it into uh Json into a JavaScript object02:33:06
like this then02:33:08
we'll say we'll grab that value02:33:11
and we'll call it data02:33:13
and what we can do is we can just use02:33:16
this02:33:17
uh this data that we get back from the02:33:19
API inside of here so this is the very02:33:21
quick explanation of how the fetch02:33:23
function works as it is used to fetch02:33:26
data from an API and you have to do it02:33:28
this way because that's how you you have02:33:30
access to that data I could do something02:33:32
for example console log to data and you02:33:34
would see that if I put this over here02:33:39
just over here uh you'll see that we02:33:43
will get the console log uh I'll come02:33:45
over here refresh the page and you'll02:33:48
see that in our console now we have this02:33:51
object02:33:52
um that actually displays the02:33:55
information from the ninja fact02:33:58
API if I kept refreshing you'll see theDescription:
Hey Everyone! Welcome to my full React Beginners Course where I teach you everything you need to know as a beginner in React! The first 1,000 people to use the link will get a 1 month free trial of Skillshare: https://www.skillshare.com/en/signup?partner=PedroTech&coupon=pedrotech1122&onboarding_tag=24%2C6%2C1816%2C35%2C1761&redirectTo=&ytExp=true&classes=78310865%2C2147147253%2C910481864 Join our Discord: https://discord.com/invite/WE92Cqs6Vk 🚀 Learn ReactJS By Building 6 Projects: https://codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: https://codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin: https://www.linkedin.com/in/machadop1407/ Instagram: https://www.instagram.com/_pedro.machado_ Github: https://github.com/machadop1407 Business Email: [email protected] 🌟 Gear / Hardware I Use and Recommend 🌟 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 💻 https://www.amazon.com/Samsung-Computer-Compatible-Border-Less-LS24R356FZNXZA/dp/B08X6RQRN3?refinements=p_85%3A2470955011&refresh=1&rps=1&th=1&language=en_US 💻 Monitor 🖱️https://www.amazon.com/Logitech-G403-Hero-Gaming-Mouse/dp/B07L4LRCXN?language=en_US 🖱️ Mouse 📷 https://www.amazon.com/Canon-EOS-M50-II-International/dp/B0BXBHTY8V?language=en_US 📷 My Camera 🎤 https://www.amazon.com/Professional-Condenser-Microphone-Streaming-Podcasting/dp/B07QKQJL17?language=en_US 🎤 My Microphone ⌨️ https://www.amazon.com/HK-Gaming-Mechanical-Illuminated-Programmable/dp/B07PP3XLR1?th=1&language=en_US ⌨️ My Microphone ⚡ https://www.amazon.com/Govee-Modern-Assistant-Million-Bedroom/dp/B099WTN2TR?language=en_US ⚡ LED Lights In the Background *REACT COURSE FULL TIMESTAMPS* 00:00:00 | Introduction 00:07:52 | Module 1: What is React? 00:18:14 | Module 2: JSX, Components, Props 00:38:02 | Module 3: Ternary Operators, Lists and CSS 01:04:33 | Module 4: States in React, useState Hook 01:30:39 | Module 5: CRUD in React, ToDo List 02:10:08 | Module 6: Component Lifecycle, useEffect Hook 02:28:16 | Module 7: Fetching Data from API's 02:57:09 | Module 8: React Router DOM 03:13:03 | Module 9: State Management, useContext Hook 03:32:02 | Module 10: React Query 03:51:38 | Module 11: Forms in React 04:19:01 | Module 12: Custom Hooks 04:40:27 | Module 13: Typescript, Type Safety 05:06:12 | Module 14: Redux Toolkit 05:29:29 | Module 15: Firebase Project (Part 1) 06:05:40 | Module 16: Firebase Project (Part 2) 06:46:08 | Module 17: Firebase Project (Part 3) 07:41:58 | Module 18: Deploying a Firebase React App Tags: - ReactJS Tutorial - ReactJS and MySQL - NodeJS Tutorial - API Tutorial
Preparing download options
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "React Course For Beginners - Learn React in 8 Hours" video?
http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "React Course For Beginners - Learn React in 8 Hours" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "React Course For Beginners - Learn React in 8 Hours" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "React Course For Beginners - Learn React in 8 Hours" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "React Course For Beginners - Learn React in 8 Hours"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "React Course For Beginners - Learn React in 8 Hours"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.