Download "React Full Course for free ⚛️ (2024)"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FCgkZ7MvWUAA%252Fmaxresdefault.jpg&w=1139&q=75)
Please wait. We're preparing links for easy ad-free video watching and downloading.
Table of contents
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F9TBiWycStLI%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FB91wc5dCEBA%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FEPh_VbMxu4E%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FGW5PwlzXBDc%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FIUEkRTov_E4%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FT8EYosX4NOo%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FUbPiCgCkHTE%252Fsddefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FYqz4rA85o68%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FcqaqoFhm1P4%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FhFOZYaVHD6A%252Fmaxresdefault.jpg&w=1139&q=75)
Video tags
Subtitles
Russian
00:00:00
hey what's going on everybody it's your00:00:01
bro hope you're doing well and in00:00:03
today's video I'm going to show you00:00:04
everything you need to know to get00:00:05
started working with reactjs so why00:00:08
don't you go ahead and sit back relax00:00:10
and enjoy the00:00:12
show react is a JavaScript library not00:00:16
framework that's used to easily build00:00:18
and arrange user interfaces for web00:00:21
applications react focuses on building a00:00:23
web application using these things00:00:25
called components a component is a00:00:27
self-contained section of code that00:00:29
functions as as a reusable building00:00:31
block think of Legos you could say a00:00:32
Lego is similar to react component each00:00:35
Lego represents a section of reusable00:00:37
JavaScript and HTML code we can build a00:00:39
diarama or other complicated structure00:00:42
from these Legos if we use enough of00:00:44
them and in the correct places react00:00:46
uses a syntax extension of JavaScript00:00:48
known as jsx meaning JavaScript XML jsx00:00:52
allows you to write HTML like code00:00:55
within your JavaScript files react also00:00:57
utilizes a virtual Dom it's a00:00:59
lightweight version of the real Dom of a00:01:01
web page we can keep track of any00:01:03
changes made to the virtual Dom and only00:01:05
apply that specific change to the real00:01:07
Dom without needing to refresh the00:01:09
entire web page only that specific00:01:11
section this reduces rendering00:01:13
performance overhead before we do begin00:01:15
you will need to know JavaScript since00:01:17
react is a JavaScript library everything00:01:19
up to arrays classes objects and es600:01:22
feature such as Arrow functions will be00:01:24
necessary HTML will also be mandatory00:01:27
since our react components involve00:01:29
rendering HTML elements and applying CSS00:01:32
I do have full free courses on my00:01:33
YouTube channel on these topics if you00:01:35
need to catch up or you need a refresher00:01:37
so that's a quick overview of react00:01:38
we'll move on to the installation00:01:40
instructions next we're going to00:01:42
download nodejs from this URL nodejs.org00:01:46
node.js is a backend JavaScript runtime00:01:49
environment it executes JavaScript code00:01:51
outside of a web browser we're mostly00:01:53
interested in the node package manager00:01:55
that comes with it let's download the00:01:58
latest version of node.js00:02:01
open it when the download is00:02:06
complete select next read the license00:02:09
agreement yes I did read it that fast00:02:12
next select a destination folder I'll00:02:15
keep it as00:02:16
is you can define a custom setup but00:02:19
that's outside of the scope of this00:02:21
tutorial series we'll press next we'll00:02:24
skip tools for Native modules press next00:02:28
and install00:02:32
then00:02:33
finish you'll also need a text editor I00:02:36
recommend vs code since you've made it00:02:39
this far in my web development series00:02:41
I'm assuming you already have one00:02:42
downloaded which you can get from this00:02:44
site code dovisual studio.com and select00:02:46
the correct download for your operating00:02:48
system within VSS code I'm going to00:02:51
create a project folder let's go to00:02:53
explore open folder just for convenience00:02:57
I'll place my project folder on my00:02:59
desktop00:03:00
I'll create a new folder I'll name mine00:03:04
website then we will select this00:03:07
folder we're going to need to open up00:03:09
command prompt if you're using Windows00:03:11
or terminal if you're on Mac you can00:03:13
also do this within vs code go to the00:03:15
hamburger menu up top terminal new00:03:21
terminal we within our website folder we00:03:24
will type the command npm meaning node00:03:27
package00:03:28
manager00:03:30
create vit at latest meaning latest00:03:34
version V's a development server it's a00:03:38
modern replacement to create react app00:03:40
which is now00:03:42
outdated hit00:03:44
enter we'll need a name for this project00:03:47
a common naming convention for a user's00:03:49
first react project is my react app00:03:54
that's a common name that you'll see00:03:56
enter select a framework using the arrow00:03:59
keys we can select whatever framework we00:04:01
would like to use we will select react00:04:04
hit enter are we going to use typescript00:04:07
or JavaScript we'll stick with plain00:04:10
JavaScript all right here are the last00:04:12
few commands and they are given to us00:04:15
we'll change the directory to our react00:04:18
app CD meaning change directory my react00:04:23
app and that's the name of the folder00:04:25
where our project is00:04:27
located npm install that is the second00:04:35
command the last command is npm runev to00:04:39
start the development server npm00:04:43
runev all right so our web server is00:04:45
found at this address let's copy it then00:04:48
open up a web browser let's paste that00:04:51
address and here we are within our00:04:53
development server this is a sample00:04:56
project that's given to us it even00:04:58
includes this little counter00:05:01
hey this is future bro I was editing00:05:03
this video and I totally forgot to00:05:05
mention how you can restart the server00:05:07
if you close out of it all you got to do00:05:09
is open up a terminal let's go to00:05:10
terminal new terminal we have to be sure00:05:13
that we're within our application folder00:05:15
I'm going to change my directory by00:05:17
typing CD the name of the folder my00:05:21
react00:05:23
app then npm run Dev to start the00:05:27
development00:05:28
server00:05:30
and let's refresh that yep it seems like00:05:33
it's working so yes I forgot to mention00:05:35
that that is all I'm quickly going to00:05:37
cover the project structure of our react00:05:39
application we'll begin with the node00:05:41
modules folder this folder contains00:05:44
external libraries and packages that our00:05:46
project relies on a few of which are00:05:49
build tools utility libraries routing00:05:51
libraries just to name a few we won't be00:05:55
spending any time directly in this00:05:56
folder but you should still be aware00:05:58
what it's for if it just contains00:06:00
external libraries and packages that our00:06:02
project relies on next we have the00:06:04
public folder the public folder contains00:06:07
any public assets one of which in here00:06:10
is a vit image it should be this image00:06:12
right here this folder can contain00:06:15
public fonts images videos they're not00:06:18
bundled during the final output they're00:06:20
typically available via a URL just to00:06:23
demonstrate I'm going to delete this00:06:25
image file and see what00:06:27
happens yep and that logo is gone so my00:06:31
vit logo was a public asset via a URL00:06:35
and let's put that00:06:36
back then we have the source folder00:06:39
we'll spend 99% of our time within the00:06:42
source folder we have an assets folder00:06:44
that can contain images and videos the00:06:47
assets folder is very similar to the00:06:49
public folder but files within the00:06:51
assets folder are bundled during the00:06:53
final output public assets are not and00:06:55
they're generally available via a URL my00:06:59
re act image is within the assets folder00:07:02
currently we have a main jsx file00:07:05
remember that jsx is Javascript XML in a00:07:08
way this functions as our main00:07:10
Javascript file react works with00:07:13
components we're adding a single00:07:14
component an app component which we are00:07:18
importing so let's take a look at our00:07:20
app component the app component in this00:07:23
example you could say is the root00:07:24
component we have two different00:07:26
stylesheets a stylesheet for app and we00:07:30
have an index CSS stylesheet this is the00:07:32
main CSS file for our application we're00:07:35
importing this file from our main jsx00:07:38
file right here so that's the source00:07:40
folder then we have an index HTML file00:07:43
this is the main entry point into our00:07:45
program within the body of our document00:07:48
we have a development with an ID of root00:07:51
as well as a script to our main jsx file00:07:54
a few other things you should know about00:07:56
is this package Json file Json file00:07:59
files are structured in key value pairs00:08:01
this file contains metadata about our00:08:03
project such as the project name the00:08:06
version number what build we're using00:08:08
we're using vit and the react version00:08:11
number just to name a few all right00:08:14
everybody so in just a moment we will be00:08:15
creating our first react component we00:08:18
already do have one component that is00:08:20
app right now this is serving as a00:08:22
sample project for us then we are00:08:24
importing app to main jsx this is our00:08:28
main J s x file think of it as the main00:08:30
JavaScript file we are creating a root00:08:33
element and including our app component00:08:37
within our app component we do have a00:08:39
function delete everything within this00:08:45
function that should eliminate our00:08:47
sample00:08:49
project and we no longer need these00:08:52
Imports we can delete them00:08:54
too but you do want to keep this export00:08:57
statement components can have dedicated00:08:59
stylesheets which you can see here for00:09:01
app CSS we are going to delete this00:09:04
because we no longer need00:09:06
it we do have an app component that's00:09:08
going to serve as the root we will add00:09:10
other components to our app component00:09:12
our app component ties them all together00:09:15
to create a new component go to your00:09:16
Source folder we're going to rightclick00:09:18
then go to new file we will create a00:09:21
component for a header the extension is00:09:25
jsx because it's a JavaScript XML file00:09:30
we will be working with function based00:09:33
components we will create a function00:09:36
with the name of header do pay attention00:09:39
to the00:09:40
capitalization then we would like to00:09:42
export this component so we can import00:09:44
it elsewhere at the end of this file00:09:47
type00:09:48
export default the name of the00:09:52
component header within our header00:09:55
function we can write a combination of00:09:57
JavaScript and HTML00:09:59
all we're going to do within this00:10:00
function is return something return00:10:04
parentheses semicolon within the return00:10:07
statement you can write pure HTML I will00:10:10
create a header00:10:11
element so react components they're only00:10:14
capable of returning a single element00:10:17
but you can place children elements00:10:19
within within our header element I will00:10:21
create an H1 element with text of my00:10:27
website just to be sure everything is00:10:29
working let's save I'm holding contrl s00:10:32
on Windows we will go to our app00:10:34
component then import the header00:10:36
component So within app we will type the00:10:40
statement import the name of the00:10:43
component00:10:45
header from a location that location is00:10:49
going to be do SL header.00:10:54
jsx we can now use this header component00:10:57
within our app component we will also be00:10:59
returning something so we will need a00:11:02
return statement return parentheses00:11:04
semicolon what are we going to return I00:11:08
would like to use my header component so00:11:10
to add a component we need a set of00:11:13
angle brackets then type the name of the00:11:15
component00:11:18
header like this they're a pair of two00:11:22
and the second one is closed that's why00:11:24
we have a forward slash preceding it we00:11:26
now have a header component you can00:11:29
shorten the syntax as well take your00:11:32
component end it with the forward slash00:11:35
that also works too it's a shorthand way00:11:37
of writing the same thing let's head00:11:39
back to our header component We'll add a00:11:41
few more00:11:42
elements after our H1 element let's00:11:45
create a navigation00:11:47
element then within the navigation00:11:49
element we'll create an unordered00:11:52
list within the unordered list we'll00:11:54
create a few list00:11:57
items the first will be00:12:01
home these are list items you would00:12:03
typically see for a navigation bar00:12:07
home00:12:11
about00:12:15
services and00:12:17
contact we now have our unordered list00:12:21
I'll enclose our list items within00:12:23
anchor tags to make them00:12:25
hyperlinks a hre equals00:12:29
I don't want these to go anywhere I'm00:12:30
just going to leave these empty I'll add00:12:33
a pound00:12:34
sign and then be sure to close these00:12:37
anchor00:12:38
tags we'll place our text within the00:12:40
anchor tag so they are now hyperlinks00:12:43
okay let's do that for the other list00:12:53
items there we are then after my00:12:56
navigation element I will add a00:12:58
horizontal rule to make it look00:13:00
nice okay there is our header component00:13:04
we no longer need to work with this00:13:05
header component we do have some styling00:13:08
already applied those Styles can be00:13:09
found within index.css if you would like00:13:13
to start fresh and eliminate all of00:13:14
these Styles you can delete everything00:13:16
from here then you do have HTML with no00:13:20
CSS in a future video I'll show you00:13:22
various ways in which we can apply CSS00:13:24
to a react component but for now we'll00:13:26
just keep this the same our head element00:13:29
is now complete we will create a new00:13:31
element for a footer again go to our00:13:34
source folder right click go to new00:13:37
file00:13:38
footer.00:13:41
jsx we are creating a function based00:13:44
component it's a function that's going00:13:47
to return a footer00:13:50
component then at the end of our script00:13:53
we will export default the name of the00:13:56
component footer so that we we can00:13:58
import it elsewhere our footer is going00:14:01
to return something so we need a return00:14:04
statement then within the set of00:14:06
parentheses we can return a single00:14:08
element we will return a footer00:14:13
element but remember you can place00:14:15
children elements within an element it00:14:17
still only counts as one then so what do00:14:20
we want to do for our00:14:21
footer I'll include a paragraph00:14:27
element00:14:29
within the paragraph element I'm going00:14:30
to add a copyright symbol to add a00:14:32
copyright Mark Type ampersand copy semi00:14:36
call00:14:37
in then afterwards I'll add your website00:14:43
name all right now we need to import00:14:46
this footer going back to our app00:14:49
component we will00:14:51
import00:14:53
footer from footer.00:14:57
jsx then I would like to include a00:15:00
footer component after the00:15:03
header now pay attention to00:15:06
this we're returning two00:15:09
components we have this warning we only00:15:12
have the capability of returning a00:15:14
single component that's how our return00:15:16
statements are designed jsx elements00:15:18
must be wrapped in an enclosing tag do00:15:21
you want a jsx fragment so since we only00:15:25
have the capability of returning a00:15:26
single enclosing tag we're we're going00:15:28
to enclose our components with what's00:15:30
known as a00:15:32
fragment it's just an empty set of ankle00:15:35
brackets so we will enclose all00:15:37
components within a00:15:40
fragment and that should work we have00:15:42
our footer component following our00:15:44
header component we have our00:15:47
header and our footer let's make a few00:15:50
more changes to our00:15:52
footer I'm going to zoom out a little00:15:55
bit within our return statement we can00:15:57
insert some Javas script to insert some00:16:00
JavaScript you need a set of curly00:16:02
braces I will create a new date object00:16:06
this is some JavaScript code00:16:09
new date parentheses I would just like00:16:13
the year I will follow this object with00:16:16
get full year method let's save and take00:16:20
a look so I'm filming this video near00:16:23
the end of 2023 your web application00:16:26
should return the current year when ever00:16:28
you're watching this all right our00:16:30
footer component is now00:16:32
done I'm going to create a component for00:16:35
a unordered list to sandwich between our00:16:37
header and our footer I'll create a00:16:40
component for food we will go to our00:16:42
source folder create a new file this00:16:46
component will be food.00:16:50
jsx again we are creating a function00:16:53
based component with the name of00:16:57
food then we will export this component00:16:59
when we're done export default00:17:03
food be sure to add a return00:17:07
statement before we add anything to the00:17:09
return statement I will create some00:17:11
JavaScript variables so normally if00:17:14
you're adding JavaScript code within the00:17:16
return statement you need a set of curly00:17:18
braces but outside of the return00:17:20
statement you don't I will create two00:17:23
JavaScript constants const food one pick00:17:28
some food for me I will pick an00:17:31
orange let's make that00:17:34
Capital all right then let's create a00:17:36
second food00:17:38
variable food 2 for me will be a00:17:42
banana within the return statement we00:17:44
can utilize these00:17:46
constants what do we want to return00:17:49
exactly I will return an unordered00:17:54
list we'll have a few list00:17:57
items three to be00:18:00
exact my first list item I'll just add00:18:03
some text I'll add an00:18:05
apple just to be sure that everything is00:18:08
working let's import this food component00:18:10
from our app00:18:12
component again we need an import00:18:14
statement import food from food. jsx we00:18:20
can now use the food component we will00:18:23
add that after the header we will add00:18:27
food then here is our first list item an00:18:30
apple okay let's head back to our food00:18:33
component for our second list item I00:18:35
will add food one that's our constant00:18:38
now pay attention to this if I type food00:18:40
one well we're literally printing the00:18:43
text food one since we're within our00:18:45
return statement I would like to include00:18:47
some JavaScript code we're including a00:18:49
JavaScript variable so I need to enclose00:18:53
this variable within a set of curly00:18:55
braces because we're within the return00:18:57
statement and now now my second list00:18:59
item is an orange then let's include00:19:02
food 2 but I'm going to add one more00:19:04
thing food 2 however I'm going to use00:19:08
the builtin 2 uppercase method just to00:19:12
demonstrate that we can use JavaScript00:19:14
functions all right and there is our00:19:16
unordered list we have an apple orange00:19:18
and a00:19:19
banana so these components are now00:19:21
complete and the cool thing about react00:19:23
as well is that we can keep on reusing00:19:25
these components if we would like I00:19:27
would like a couple food components so I00:19:29
will just paste another component we now00:19:31
have two food components or even three00:19:34
or00:19:35
four you can rearrange these components00:19:38
however you would like by rearranging00:19:40
them we can change the feel and style of00:19:42
our web application for demonstration00:19:44
purposes I will put our footer on the00:19:46
top that doesn't make any sense but I00:19:48
just want to demonstrate so our footer00:19:51
is now on the top followed by the header00:19:53
then the food component or maybe I would00:19:56
like the food component on top00:20:00
we now have our food component footer00:20:03
component then our header00:20:06
component all right everybody that is an00:20:08
introduction to react react is all about00:20:11
reusing components a component is a00:20:14
small section of code that can include00:20:16
JavaScript and HTML your function will00:20:19
return that code and make it reusable00:20:21
and that is your introduction to00:20:25
react hey what's going on everybody and00:20:28
today's video I'm going to get a little00:20:29
more in depth with creating components00:20:31
and by the end of this topic we will be00:20:33
creating our own card component so sit00:20:36
back relax and enjoy the00:20:39
show in today's topic I'm going to get a00:20:41
little more in depth with react00:20:43
components as we've discussed in the00:20:45
previous topic a component is a section00:20:47
of reusable jsx code it's HTML like code00:20:51
that can contain JavaScript I thought00:20:53
today we could create some card00:20:54
components card components are fairly00:20:56
popular with react app applications00:20:59
typically they involve a picture a title00:21:01
and a description you can use cards for00:21:03
all sorts of things in the previous00:21:05
topic we did delete all of the contents00:21:07
within our app function let's go ahead00:21:09
and do that now if we haven't already00:21:11
and we'll delete these Imports we will00:21:13
not need them for this lesson in the00:21:15
previous topic we did have a stylesheet00:21:17
for our app component we can delete this00:21:19
too we are now ready to begin within our00:21:23
source folder we will create a new file00:21:26
the name of the component will be card00:21:28
this is a jsx file jsx meaning00:21:31
JavaScript XML our components will be00:21:34
function based function type the name of00:21:37
the component card parenthesis then00:21:40
curly00:21:42
braces we will be exporting this00:21:44
component so that we can import it00:21:46
elsewhere so type export default the00:21:49
name of the component00:21:51
card within our card function we will be00:21:54
returning some HTML like code00:21:59
we'll begin with the div00:22:03
element we will be applying some CSS00:22:06
Styles we will need to set the00:22:08
class however with jsx class is a00:22:12
reserved keyword to set an elements00:22:14
class we have to instead use class name00:22:17
do pay attention to the capitalization00:22:19
the N is00:22:20
uppercase okay we will set this div00:22:23
section equal to00:22:26
card so cards typically have an image00:22:29
we'll include an image element we'll set00:22:32
the source00:22:34
later they usually have a title we'll00:22:36
use an H2 element and a description00:22:39
we'll include a00:22:40
paragraph for our H2 title why don't you00:22:43
go ahead and type in your name I'll type00:22:45
in my YouTube channel name but feel free00:22:47
to use your own00:22:49
name then let's add a description for00:22:52
the description of Year card type in00:22:54
what you do for a living or if you're a00:22:56
student what are you studying for me00:22:59
personally I make YouTube00:23:03
videos and add a hobby of viers I make00:23:07
YouTube videos and play video00:23:12
games so far so good let's import our00:23:15
card component just to be sure that it's00:23:17
working within our app component I will00:23:20
at the top import the name of the00:23:22
component card from a file location00:23:27
these files are right next to each other00:23:29
so I will00:23:31
type SLC card.00:23:36
jsx within our app component we will00:23:39
return within the return statement list00:23:42
the component we would like to return we00:23:45
will return our card component to00:23:47
include a component within angle00:23:49
brackets type the name of the00:23:51
component these are typically in00:23:54
pairs you need an opening tag and a00:23:56
closing tag and there's our card so far00:23:59
we'll be applying some CSS styling00:24:02
momentarily there is a shortcut in place00:24:04
of using an opening and closing00:24:06
tag take the opening tag end it with a00:24:10
forward slash that's also valid let's00:24:13
head back to our card component we'll00:24:15
include an00:24:16
image within our opening image tag it is00:24:19
good practice to set the alt attribute00:24:22
just in case this image can't be00:24:23
displayed or if somebody is using a00:24:25
screen reader the alternate text will be00:24:28
displayed or read out loud will include00:24:30
a profile picture for us let's set the00:24:33
alternative text to be profile00:24:37
picture we're going to set the source00:24:42
attribute now I recommend pausing the00:24:44
video and finding a profile picture of00:24:46
yourself from you know Facebook or00:24:48
Twitter or whatever you use for social00:24:50
media pick a smaller picture something00:24:53
around 200 x 200 pixels would be decent00:24:56
if you don't want to follow along you00:24:58
can include a placeholder image just for00:25:00
this lesson which you can get from this00:25:02
site this will be an external URL https00:25:06
colon to slashes Via00:25:11
placeholder doc1 15 that will give you a00:25:15
placeholder image otherwise if you have00:25:18
an image you would like to use I'm using00:25:20
the profile picture from my YouTube00:25:21
channel all we got to do is place this00:25:24
image within our assets00:25:26
folder00:25:29
from our card class we will import that00:25:33
image00:25:35
import then we need a name for this00:25:38
import I'll name my import profile pick00:25:44
from a00:25:46
location so we need to navigate to the00:25:49
assets directory then get our00:25:53
image slash the assets directory slash00:25:57
the the name of the image so mine is00:25:59
profile and it's a JPEG yours is likely00:26:02
going to be different do pay attention00:26:03
to00:26:04
that profile.00:26:07
jpeg for the source00:26:11
attribute I will set the SQL to a set of00:26:13
curly braces then we will include our00:26:16
profile pick that we're00:26:19
importing there's my profile picture00:26:22
depending on the dimensions of your00:26:24
profile picture it might be fairly big00:26:26
you may want to choose a smaller image00:26:28
or otherwise within our CSS file we can00:26:31
change the dimensions of the picture00:26:33
okay let's head to our CSS stylesheet we00:26:36
already do have some Global CSS00:26:38
properties already applied but I'd like00:26:40
to start fresh let's delete everything00:26:42
within the CSS stylesheet that should00:26:45
eliminate all CSS within our web00:26:47
page we will select the name of the00:26:50
class card remember that with jsx we use00:26:54
class name not00:26:56
class with within our index CSS00:26:58
stylesheet let's select our card class00:27:01
I'm going to go through these CSS00:27:03
properties real quick we should already00:27:05
have some experience with CSS okay let's00:27:07
add a border border one pixel00:27:12
solid I'll set this to be00:27:14
black I do like using hsl values I'll00:27:18
pick a light gray00:27:20
color let's set the lightness to about00:27:22
80 for the00:27:25
Border I'll set the Border radi to be 1000:27:28
pixels to round the corners the corners00:27:31
should now be rounded as you can see00:27:33
here I'll add a box00:27:36
Shadow the first value is for the00:27:39
horizontal offset the second is for the00:27:41
vertical offset the third value is for00:27:44
the blur00:27:46
radius I'm going to pick a lighter color00:27:48
though so I'm going to select black00:27:51
change this to an hsl00:27:54
value but I'm going to change the00:27:56
transparency to be00:28:00
10% so 0.1 that is not bad00:28:04
looking okay let's add a little bit of00:28:07
padding 2000:28:09
pixels padding is found between the00:28:12
elements and the border so if I were to00:28:15
increase this we have more padding but00:28:17
let's stick with00:28:19
20 I'll add some00:28:21
margin margin is for the space outside00:28:24
of the Border let's go with 10 pixels00:28:28
I'll text align Center to Center the00:28:30
elements within text align00:28:33
Center I'll set a Max width for the00:28:37
card to be 25000:28:40
pixels then I will set the display to be00:28:44
an inline00:28:46
Block in case we have more cards they'll00:28:49
at least flow within our container if we00:28:50
have00:28:51
more because normally divs are Block00:28:54
Level elements okay so let's work on the00:28:56
card image00:28:57
next we'll head back to our card00:29:00
component00:29:01
class we'll add a class name to the00:29:04
image element class name00:29:10
equals let's say card image go back to00:29:14
our CSS stylesheet we are accessing our00:29:18
cards class then access the card image00:29:21
class00:29:23
within I will set a Max width I will set00:29:26
a Max WI width to be 60% of the width00:29:30
available I will set the height to be00:29:33
Auto to automatically resize if you00:29:37
would like a circular image you can set00:29:39
the Border radius to be00:29:43
50% I'll add a little bit of margin on00:29:45
the bottom with margin bottom 1000:29:51
pixels all right let's work on our title00:29:53
next going back to our card00:29:56
component let's add a class00:30:00
name the class name will be00:30:03
card-00:30:05
title going back to our CSS00:30:09
stylesheet we will select our card class00:30:12
then select the card title00:30:16
class with my card title I will set a00:30:18
font family to be pick a font I like00:30:22
Ariel I'll set a backup of s serif in00:30:26
case Ariel can't be displayed for some00:30:28
reason I'll set margin to be zero to00:30:32
remove any00:30:34
margin I'll set the text color to we'll00:30:37
set the color property to be pick a00:30:40
color again I'm using hsl00:30:43
values I'll set the lightness to be00:30:47
20% now let's change our card text going00:30:50
back to our card00:30:52
component within our paragraph element00:30:54
we will set the class name to equal00:30:59
card-00:31:01
text going to our CSS00:31:03
stylesheet we will access the card class00:31:07
then access the card- text00:31:11
class I'll set the font family to be00:31:13
aerial as00:31:15
well and I will change the00:31:18
color I'll set the lightness to be 40%00:31:21
again I'm using hsl00:31:23
values uh maybe00:31:25
30 I would say that looks decent enough00:31:29
we have now created and styled a card00:31:32
component within our app component we00:31:34
can reuse the card component however if00:31:37
I were to add00:31:38
another Well jsx elements must be00:31:41
wrapped in an enclosing tag our return00:31:43
statements are only designed to return a00:31:46
single element you can enclose all00:31:48
elements within what is known as a00:31:50
fragment it's an empty set of angle00:31:54
brackets then technically we're only00:31:56
returning a single El element we now00:31:58
have two cards however they are00:32:00
identical though and we can use this00:32:02
card component whenever we want I can00:32:04
include four if I would like all right00:32:07
everybody so that is us making a card00:32:09
component in the next video I'll discuss00:32:11
props where each component can have00:32:13
different values because we don't want00:32:15
all of our components to look the same00:32:17
and that was some react practice by00:32:19
making a card00:32:24
component yo what's going on everybody00:32:27
so in today's video I'm going to show00:32:28
you a few ways in which we can style00:32:30
react components with CSS this topic00:32:33
doesn't include external Frameworks such00:32:35
as Tailwind or pre-processors such as00:32:38
SAS I'm going to cover a few of the more00:32:40
basic techniques including external00:32:43
modules and inline CSS styling we will00:32:46
need a component to work with let's00:32:47
begin with a button component let's go00:32:49
to our source folder new file button.00:32:54
jsx we'll create a function based comp00:32:57
component because we like function based00:32:59
components be sure to export it because00:33:02
I sometimes forget to do that so let's00:33:04
do it now export default the name of the00:33:08
component then we will00:33:10
return a single button00:33:16
element with text that says click me00:33:20
normally when setting a CSS class you00:33:22
use the keyword class however in jsx00:33:25
that's a reserved keyword00:33:27
we'll instead use class name with a00:33:30
capital N I'll set my class name to be00:33:35
button all right then we just need to00:33:38
import this button component going back00:33:40
to our app component that's the parent00:33:43
we will import button from its00:33:48
location SL button. jsx and now we have00:33:53
a button component to work00:33:55
with there's my button let's begin with00:33:58
external CSS styling we should already00:34:00
be a little familiar with it already00:34:02
heading to our index CSS stylesheet we00:34:05
can apply some Global Styles we will00:34:07
select the class name of button dot to00:34:10
select a class button let's apply the00:34:14
following CSS properties but feel free00:34:16
to make any changes or alterations I00:34:19
will begin with a background color I've00:34:21
already pre-picked a color personally I00:34:23
like using hsl00:34:25
values 200 for the Hue 100% for the00:34:31
saturation 50% for the lightness that00:34:34
will give you a light blue color for the00:34:36
font color that would be the color00:34:38
property I will set that to be00:34:41
white for00:34:43
padding let's say 10 pixels by 2000:34:48
pixels border radius to round the00:34:50
corners I will set that to be five00:34:54
pixels border none to remove the00:34:58
Border then let's change our cursor to00:35:01
be a pointer when we hover over the00:35:04
button that's not a bad looking button I00:35:07
am zoomed in to like 300% just for this00:35:10
demonstration all right we have utilized00:35:12
an external CSS stylesheet they're easy00:35:15
to use for simple projects such as00:35:17
making a YouTube video tutorial it gives00:35:20
you flexibility with media queries and00:35:21
pseudo selectors you can use external00:35:24
stylesheets to apply Global Styles00:35:26
throughout your application however00:35:28
using external stylesheets can lead to00:35:30
naming conflicts especially when you00:35:32
have more components and classes to work00:35:33
with if you have a large web application00:35:36
you'll likely have all sorts of00:35:37
different buttons you would need a00:35:39
strong naming convention and good00:35:41
organization two buttons you may create00:35:44
might have the same class Name by00:35:45
mistake and with large applications it00:35:47
might be difficult to keep track of all00:35:49
the different class names moving on to00:35:51
Method two let's cut all of these00:35:53
properties save we're going to create a00:35:56
module now that's the second method00:35:59
we'll create a dedicated CSS stylesheet00:36:02
specifically for each component what you00:36:05
may see some developers do is they'll00:36:07
create a new folder specifically for00:36:09
their component let's create a new00:36:12
folder which we will name button the00:36:14
name of our00:36:15
component let's move our button00:36:17
component to the button folder let's00:36:20
move it be sure to update any Imports as00:36:23
well my app component is now importing00:36:26
the button component from the button00:36:29
directory within our button folder we'll00:36:32
create a new file this will be a CSS00:36:34
stylesheet which we will name the name00:36:37
of the component in this case00:36:39
button. module.00:36:43
CSS let's paste all of those properties00:36:45
that we cut00:36:46
before now from our button component we00:36:50
will need to import this module at the00:36:53
top we will import styles00:36:57
from the location of that00:36:59
module00:37:01
SL00:37:03
button. module.00:37:06
CSS for our class name we will use a set00:37:09
of curly braces to use a dynamic00:37:13
value our class name will equal our00:37:16
import of styles dot the name of the00:37:19
class00:37:23
button and there's our button again the00:37:26
thing about modules is that it avoids00:37:28
naming conflicts because a unique class00:37:30
is going to be generated for you via a00:37:32
hashing algorithm if I were to right00:37:34
click on this button and go to00:37:37
inspect this class name is unique it's00:37:40
generated via a hash so with modules we00:37:43
don't have to worry about naming00:37:45
conflicts modules are also convenient if00:37:47
each component has its own unique style00:37:50
however a few of the downsides though00:37:52
with using modules is that it does00:37:54
require additional setup and Global00:37:56
Style aren't applied easily you would00:37:58
have to import them from elsewhere and00:38:00
that's a whole thing let's remove our00:38:02
button component from the button00:38:03
directory let's put it back in00:38:06
source and delete our button00:38:10
directory going to our button component00:38:13
then remove the import as well we don't00:38:15
need that anymore now we're going to use00:38:17
inline00:38:19
Styles what you see some people do is00:38:21
they'll create a JavaScript object named00:38:25
styles Styles equals a set of curly00:38:28
braces for an object let's paste all of00:38:31
those CSS properties we're within jsx00:38:34
code right now we can't use any dashes00:38:37
we'll switch to a camel case naming00:38:43
convention all values Should Be00:38:55
Strings each property should be comma00:39:03
separated let's remove our class00:39:06
name we will set the style attribute to00:39:10
equal use a set of curly braces to00:39:13
insert a dynamic value we will insert00:39:16
our Styles object that contains all of00:39:18
these CSS properties and now we have00:39:21
done inline CSS styling inline CSS00:39:24
styling is convenient and easy easy to00:39:27
understand it prevents Global style00:39:28
conflicts because we're not working with00:39:30
class names it's great for isolated00:39:32
components with minimal styling such as00:39:35
a like button or a subscribe button00:39:37
however inline styling can be00:39:39
increasingly Less maintainable in large00:39:41
applications it reduces the readability00:39:44
of your components especially if you00:39:45
have a lot of CSS properties it's not00:39:48
great for any complex styling such as00:39:50
responsive CSS it tends to be better for00:39:52
components with minimal styling all00:39:55
right everybody so those those are three00:39:56
different ways in which we can style00:39:58
react components with CSS external which00:40:01
is great for Global Styles or small00:40:03
projects modules which is preferred for00:40:06
individual components that have their00:40:08
own unique Styles and inline which tends00:40:11
to be good for any small components with00:40:13
minimal styling use what's best for your00:40:15
project or your own personal preference00:40:17
or whatever your team prefers if you're00:40:19
working on a project together there's no00:40:21
one siiz fits-all approach unfortunately00:40:23
myself I prefer to use modules but00:40:25
throughout the series I'm going to be00:40:27
using a lot of external CSS just because00:40:29
our projects are really small and well00:40:31
everybody those are a few ways in which00:40:33
you can style react components with00:40:39
CSS hello everybody so today I got to00:40:42
explain props props short for properties00:40:45
they are readon properties that are00:40:47
shared between components a parent00:40:50
component can send data to a child00:40:52
component when you include a component00:40:54
within a parent you can send that that00:40:56
child component key value pairs in the00:40:59
last video we made cards but all of our00:41:01
cards were identical using props we can00:41:04
send a child component individual values00:41:07
so that they're all unique let's go over00:41:09
an example we're within our app00:41:11
component I will create a new00:41:13
component let's go to our source folder00:41:16
go to new file we will create a00:41:18
component for students to display00:41:20
student data student.00:41:25
jsx we need to create a function00:41:27
function student parenthesis curly00:41:30
braces then don't forget to export00:41:33
default the name of the component00:41:35
student in order for this component to00:41:38
accept props this function needs a props00:41:41
parameter props is going to be a00:41:43
JavaScript object so let's add our00:41:46
return statement we'll include a few00:41:48
HTML00:41:50
elements we'll start with a00:41:52
div within our div I will include a00:41:55
paragraph element00:41:57
within our paragraph We'll add the text00:41:59
Name colon space we'll include a set of00:42:03
curly braces to inject some JavaScript00:42:06
let's take our props this is an object00:42:09
access the name property however we00:42:12
still need to pass in a value for the00:42:14
key name so heading back to our app00:42:17
component we need to import the student00:42:19
component let's do so at the top import00:42:23
student from the location where the00:42:26
student file is00:42:29
found/ student.00:42:33
jsx let's include a student component00:42:36
within our app00:42:38
component00:42:40
student now if I would like to send some00:42:43
data to my student component student is00:42:45
going to be the child in this case app00:42:47
is the parent we'll need to list key00:42:50
value pairs the key will be name equals00:42:54
some value for the value associated with00:42:57
the name key let's say00:43:00
SpongeBob when I save and update00:43:02
everything we have the name00:43:05
SpongeBob when we send key value pairs00:43:07
to a component they're all stored within00:43:10
this props object to get the value00:43:12
associated with the key you type props00:43:15
dot the name of the key that will give00:43:18
you the associated value on my web page00:43:20
I'm going to zoom in a little bit just00:43:21
so you can see it that's good for now00:43:24
heading back to our app component00:43:26
let's send another key value pair let's00:43:28
send an age if you're going to store00:43:31
some data as a value if it's not a00:43:33
string literal you got to enclose it00:43:35
within curly braces let's say Spongebob00:43:38
his age is 30 we now have access to this00:43:41
age key heading back to our student00:43:44
component let's create a new00:43:46
paragraph age colon space to include00:43:50
some JavaScript we got to use a set of00:43:52
curly braces we are accessing the props00:43:55
object do access the key of age00:44:00
SpongeBob's age is00:44:01
30 okay let's send is student is00:44:04
SpongeBob a student we'll create a key00:44:07
of is student equals add a set of cly00:44:12
braces is student will be a Boolean true00:44:15
or false SpongeBob is in boting school00:44:17
currently he is a student let's save00:44:21
heading back to our student component00:44:24
I'll include a new paragraph00:44:27
student colon space curly00:44:31
braces props do is student SpongeBob is00:44:36
a student that is true however our00:44:39
Boolean is not displaying so with a00:44:42
Boolean I recommend using the trary00:44:45
operator if is student within props is00:44:49
true then we'll return a string literal00:44:52
of yes otherwise we'll return a string00:44:56
literal of00:44:57
no let's update everything yes SpongeBob00:45:01
is a student you can place complex00:45:04
JavaScript code within your HTML code00:45:06
booleans don't display directly to the00:45:08
Dom you typically find them used within00:45:11
tary operators or some sort of00:45:12
conditional if some value is true return00:45:16
or do this if not do something else now00:45:19
if I were to pass in a Boolean value of00:45:22
false well that will change to no00:45:25
SpongeBob is not a student let's change00:45:28
that back to00:45:29
true now before I include a few more00:45:31
components I'm going to do a little bit00:45:32
of CSS styling just so that all of this00:45:35
is going to be more readable I'm going00:45:37
to zoom out to 100% where it was00:45:40
originally within my student component00:45:43
within the enclosing div element I will00:45:46
set a class name remember that with jsx00:45:49
you have to use class name not class00:45:51
because class is a reserved00:45:54
keyword let's name this class00:45:57
student then heading to our CSS00:45:59
stylesheet index.css feel free to clear00:46:02
out anything within here I will select00:46:05
the class of00:46:07
student I'll change the font family to00:46:11
be aiel I'll add a backup of s serif in00:46:15
case aiel can't display for some00:46:18
reason let's change the font size to 200:46:22
em for 200% I'll add a little bit of00:46:25
padding00:46:26
1000:46:28
pixels I'll add a00:46:30
border border one pixel00:46:33
solid pick a color I like hsl00:46:37
values I'll set the transparency down a00:46:40
little bit to like00:46:42
80% let's go with like 50%00:46:45
lightness I'll remove any margin around00:46:48
the paragraph elements we are accessing00:46:50
the class student then access any00:46:53
paragraph00:46:54
elements margin00:46:56
zero okay that's not too bad so this is00:47:00
a student component to display some00:47:02
student data we'll reuse the student00:47:04
component but pass in different data00:47:06
each00:47:07
time we'll create a new student00:47:12
component this Student's name will be00:47:17
Patrick Patrick's age Patrick will be00:47:22
42 is Patrick a student is student00:47:26
I will set that to be false let's update00:47:29
our web application and there is00:47:31
Patrick's data name Patrick age 4200:47:35
student no let's add a few00:47:39
more00:47:41
student name00:47:44
equals00:47:46
Squidward Squidward's age will be00:47:51
50 is00:47:54
student Squidward will not be a student00:47:56
that will be00:47:58
false then let's add Sandy she'll be the00:48:01
last00:48:04
student student00:48:07
name equals00:48:10
Sandy sy's00:48:12
age will be00:48:16
27 is Sandy a student she will be that00:48:20
will be true there we are all right we00:48:23
have created four student components00:48:26
each has different values depending on00:48:27
what we pass into props we're going to00:48:30
move on to prop types prop types prop00:48:34
types are a mechanism that ensures that00:48:36
the past value is of the correct data00:48:38
type for example within props we have an00:48:41
age we would like to ensure that the age00:48:44
value passed in is a number not a string00:48:47
or a Boolean if it isn't then react can00:48:50
emit a warning within our console mostly00:48:52
for debugging purposes if you're working00:48:55
with props it is good practice to also00:48:57
use prop types so here's how to create00:49:00
prop00:49:01
types after our student function we'll00:49:04
type the name of the component00:49:07
student. prop00:49:10
types equals curly00:49:13
braces now we do have to import prop00:49:16
types it's found within the node modules00:49:19
folder where is it this should be an00:49:22
alphabetical order there it is prop00:49:24
types00:49:28
at the top of our jsx file we will00:49:30
import prop00:49:32
types00:49:34
from prop types00:49:38
prop-types within our prop types I would00:49:41
like to ensure that any name passed in00:49:44
is going to be a string if it's not00:49:46
we'll issue a warning within our00:49:48
console Name colon00:49:51
space prop00:49:53
types. string00:49:56
let's do this with age age will be a00:49:58
number age colon00:50:00
space prop types.00:50:05
number then is student is student will00:50:08
be a Boolean is student colon space prop00:50:13
types dob for00:50:16
Boolean all right and those are our prop00:50:18
types heading back to our app component00:50:21
for SpongeBob's age if I don't pass in a00:50:23
number let's say I pass in a string a00:50:25
string of 30 well this won't prevent the00:50:28
program from running but it will issue a00:50:31
warning within our console if we00:50:33
rightclick go to inspect go to00:50:37
console we can see a warning failed prop00:50:40
type invalid prop age of type string00:50:44
supplied to student expected number and00:50:47
here's a location so this is good for00:50:49
debugging it won't stop the application00:50:52
from running just issue a warning it is00:50:55
good practice ice to include prop types00:50:56
if you're accepting props then lastly00:50:59
we're going to discuss default00:51:02
props default props are default values00:51:05
for props in case they are not passed00:51:08
from the parent00:51:09
component let's say we create a new00:51:11
student component but we don't pass in a00:51:13
name we can add a default value such as00:51:16
guest just in case that value isn't00:51:18
passed in one way or00:51:21
another okay let's add default props00:51:24
down here00:51:29
student. default00:51:32
props00:51:34
equals set of curly braces for the name00:51:38
the default value will be00:51:42
guest age will be00:51:46
zero is00:51:48
student will be00:51:51
false to test this let's go to our app00:51:54
component00:51:56
we'll create a new student component but00:51:58
don't pass in any props we'll create an00:52:01
empty student component with no00:52:04
props that appears to work the name is00:52:06
guessed the age is zero student is set00:52:09
to know so if I were to include a name00:52:12
let's say name equals00:52:16
Larry well Larry's name is going to be00:52:18
set we didn't include any key value00:52:21
pairs for age or is student we ended up00:52:23
using the default values zero and no all00:52:27
right everybody so those are props they00:52:29
are readon properties that are shared00:52:31
between components a parent component00:52:34
can send data to a child component when00:52:37
you include a component you can send00:52:39
that component key value pairs which00:52:41
allows you to reuse that component but00:52:43
have unique data and those are props00:52:45
with00:52:48
react hey sup everybody in today's video00:52:51
I'm going to give you an introduction to00:52:54
conditional rendering in react00:52:56
conditional rendering allows you to00:52:57
control what gets rendered in your00:52:59
application based on certain conditions00:53:01
by utilizing conditional rendering we00:53:03
can show hide or change components00:53:06
here's an example we'll create a user00:53:09
greeting00:53:10
component let's go to our source folder00:53:13
new file user greeting and this will be00:53:18
a jsx00:53:19
file I will be using function based00:53:22
components function the name of the00:53:24
component00:53:25
user00:53:26
greeting we will have one parameter00:53:30
props we learned about props in the last00:53:32
video before I forget I'm going to00:53:35
export default the component name just00:53:39
so that we can import it later heading00:53:41
back to our app component we will return00:53:44
a user greeing00:53:47
component user greeting by using props00:53:51
we'll send two key value pairs to our00:53:53
user greeing component00:53:55
is logged in this will be a Boolean00:53:59
value we'll check to see if we're logged00:54:01
in or not and a username username equals00:54:07
this is a string so we do not need a00:54:09
placeholder type in your name or00:54:12
username then we do need to import user00:54:16
greeting import user greeting from a00:54:22
location. slash user00:54:26
greeting.00:54:31
jsx let's save everything head to our00:54:34
user greeting component we have these00:54:36
two key value pairs that are stored00:54:38
within our props object I'll use an if00:54:41
statement to check to see if we're00:54:42
logged in or not if props is an object00:54:47
we will access props followed by dot is00:54:52
logged00:54:53
in is this true or not not if it is then00:54:57
let's return an H2 element with text of00:55:02
Welcome I'd like to include some00:55:04
JavaScript I'll use curly00:55:06
braces let's take props dot our00:55:11
username let's see if this00:55:13
works welcome bro code or whatever your00:55:16
name00:55:17
is so what if we're not logged in I will00:55:20
set is logged in to be00:55:23
false well nothing appears to happen00:55:26
going back to our user greeting let's00:55:29
add an else00:55:30
statement else we will return an H200:55:34
element with text of please log in to00:55:41
continue please log in to continue00:55:44
within our function based component we00:55:46
can check some logic using an if00:55:48
statement if some condition is true00:55:50
return this if not return something else00:55:54
now Technic technically you don't need00:55:55
the else statement you could just say00:55:58
return because when you return you exit00:56:01
this would work00:56:03
too as you can see I don't think it's as00:56:06
explicit as using an lse statement00:56:09
another option is to use the tary00:56:11
operator which we learned in00:56:13
JavaScript we will00:56:17
return check props do is logged in add a00:56:22
question mark is this true or is it00:56:24
false00:56:25
if it's true then we'll return an H200:56:27
element that says00:56:30
welcome I'll add some00:56:32
JavaScript props do00:56:36
username I'm going to close this menu00:56:38
just so we can see if this condition is00:56:41
true return this otherwise add a colon00:56:45
we'll return something00:56:48
else we'll add an H200:56:50
element please log00:56:53
into00:56:56
continue this statement is pretty00:56:58
lengthy I'm going to put each part of00:57:00
the statement on a new line just so we00:57:02
can read it00:57:06
easily if is logged in is true return00:57:10
this H2 element if not return this H200:57:14
element currently we're logged in that00:57:17
is true if I set this to be00:57:20
false well then we get that login prompt00:57:23
please log in to continue you'll more00:57:25
commonly see people use tary operators00:57:28
rather than IFL statements just because00:57:29
they're more concise let's apply some00:57:32
CSS00:57:33
styling going back to our app component00:57:35
we'll set is logged in to be00:57:38
true We'll add a class name to each of00:57:40
these H2 components class name equals00:57:45
the first H2 element if our condition is00:57:47
true we'll have a class name of Welcome00:57:51
Dash00:57:53
message00:57:55
our second H2 element will have a class00:57:57
name of login D00:58:01
prompt going to our CSS stylesheet let's00:58:05
select the class of Welcome00:58:07
message I'll apply the following CSS00:58:10
properties let's set the font size to be00:58:13
2.500:58:16
em I'll change the background00:58:20
color I like using hsl00:58:23
values00:58:27
I'll go with this shade of00:58:29
green let's change the font color to be00:58:33
white I'll add a little bit of padding00:58:36
1000:58:38
pixels I'll add a border radius around00:58:41
the00:58:44
corners then set margin to be00:58:48
zero here is our user greeting component00:58:52
if the user is logged00:58:53
in let's style the login prompt class00:58:58
next do login prompt really I'll just00:59:01
copy these properties but we'll change00:59:03
the background00:59:04
color let's change the background color00:59:07
to be00:59:08
red all right let's set is logged in to00:59:11
be00:59:12
false then our user greeing component00:59:14
should have those different CSS00:59:18
properties please log in to continue if00:59:21
I set that to be true well then we're00:59:24
logged in welcome your00:59:27
username within our user greeting this00:59:29
tary operator is very verbose here's00:59:33
another way in which we can use the tary00:59:35
operator in this00:59:36
situation let's create two constants00:59:39
const the first will be welcome00:59:42
message be sure not to include any00:59:44
dashes00:59:46
though separately we'll store these H200:59:50
elements I'm getting a copy of this00:59:52
first H200:59:53
element we'll store that within our00:59:55
welcome00:59:57
message just so we can read it I'm going00:59:59
to place each line on a new01:00:05
line then let's create another01:00:09
constant const login01:00:12
prompt be sure to eliminate any dashes01:00:15
we will be using a camel case naming01:00:18
convention take our second H2 cut01:00:23
it paste01:00:29
it and there we go I find that a lot01:00:31
easier to01:00:33
read so we're going to take our01:00:35
condition is logged in if that's true01:00:39
we'll return our constant our welcome01:00:42
message otherwise we'll return our other01:00:45
constant our login prompt and that will01:00:48
work still the same let's set that to be01:00:50
false please log to continue set it back01:00:53
to be true welcome your username I find01:00:57
this syntax a lot easier to read now it01:00:59
is good practice if you're accepting01:01:01
props to set up prop types just in case01:01:04
the values that are passed in are not of01:01:06
the correct data type you'll at least01:01:08
get a warning for debugging purposes01:01:10
it's a good habit that we should develop01:01:12
we learned about prop types in the last01:01:14
video so at the top let's01:01:17
import prop types from01:01:23
prop-types after our function take our01:01:26
user greeing component do propop types01:01:32
equals take our keys is logged in the01:01:36
value with this Associated key should be01:01:39
a Boolean prop that's capital T types01:01:44
dob then a string for01:01:46
username user01:01:49
name prop types. string all right the01:01:54
last thing we're going to do is set up01:01:55
default props what if somebody's logged01:01:57
in but they don't have a username we'll01:02:00
set a default for the username as guest01:02:03
so after our prop types we'll set up01:02:05
some default props again take user01:02:08
greeting that's the name of our01:02:10
component. default01:02:13
props01:02:15
equals is logged in will be01:02:20
false and01:02:22
username will be G01:02:25
if there's no username passed in all01:02:28
right going back to our app component if01:02:30
a user is logged in but there's no01:02:33
username let's eliminate that we'll get01:02:36
the welcome message of Welcome guest now01:02:39
if a user is not logged01:02:41
in regardless we don't display the01:02:44
username all right everybody so that's01:02:46
conditional rendering you can check some01:02:48
sort of condition based on if that01:02:50
condition is true or false we can show01:02:53
hide or change components there's many01:02:55
different ways in which you can do that01:02:57
and well everybody that is an01:02:58
introduction to conditional rendering in01:03:03
react hey everybody I have a huge video01:03:06
for you today today we're going to talk01:03:08
about rendering lists in reactjs this01:03:11
can be pretty complex we'll go through01:03:12
it step by step what we'll do in this01:03:14
tutorial is create a new component to01:03:16
hold our list let's go to our source01:03:19
folder create a new file I'll name this01:03:21
component list this will be a Js x file01:03:26
to finish creating this component this01:03:28
will be a function based01:03:30
component with the name of list then be01:03:34
sure to export it export default01:03:39
list we'll start with something very01:03:42
simple we'll create an array of fruit01:03:44
this will be const fruits equals think01:03:48
of some fruit for me I'll pick an01:03:51
apple01:03:53
Orange01:03:56
banana coconut and a01:04:01
pineapple let me show you what would01:04:03
happen if we were to return our array01:04:06
within our list component we will01:04:08
return our array of fruits but we will01:04:12
need to import it going back to the app01:04:15
component we will import our list01:04:18
component import list from a location .01:04:25
SL list.01:04:28
jsx we need a return statement to be01:04:30
sure you have one we will return a list01:04:38
component and here is our list let me01:04:40
zoom01:04:41
in it's all one big string Apple orange01:04:45
banana coconut pineapple heading back to01:04:47
our list component we need to convert01:04:49
our array of strings into an array of01:04:52
list item elements we can use the01:04:54
built-in map method to do that we'll01:04:57
create a new array of list items the map01:05:00
method is going to return a new array01:05:02
after running it through a function01:05:04
const list items equals take our01:05:08
original array a fruits use the built-in01:05:12
map method then we'll either pass in a01:05:15
callback a function expression or an01:05:18
arrow function we'll use Arrow functions01:05:20
because I like Arrow functions for every01:05:23
fruit in fruits Arrow meaning do this01:05:28
we'll create a new list item01:05:32
element that has the text of our fruit01:05:36
the array item we're not going to return01:05:38
our fruits array we're going to return01:05:40
an unordered01:05:43
list we're going to insert some01:05:46
JavaScript with curly braces will01:05:48
include our list items it's an array of01:05:52
list items and here's our array whoops01:05:55
but I forgot to enclose fruit with curly01:06:00
braces my mistake they much better or if01:06:05
you prefer we can turn this unordered01:06:07
list into an ordered list with a pair of01:06:10
O01:06:11
tags01:06:13
o there they're all numbered that's how01:06:15
to render a simple array if you're01:06:17
working with an array of strings and01:06:19
you'd like to sort this array beforehand01:06:21
you can use the sort method fruit do01:06:24
sort the sort method will sort an array01:06:27
in place however this doesn't work with01:06:29
numbers because we're sorting lexico01:06:32
graphically we would treat numbers and01:06:34
symbols as characters more on that later01:06:37
let's go over example two we'll convert01:06:40
our array of strings into an array of01:06:42
objects each object will have a name01:06:45
property and calories calories per01:06:48
serving so let's enclose all of our01:06:50
elements within a set of curly braces to01:06:52
make them objects01:07:00
I'm going to place each of these objects01:07:02
on a new line just so that I can read it01:07:04
more01:07:07
easily each of these objects will have a01:07:09
name property the name property will be01:07:12
set to the original string for our array01:07:15
the first object will have a name of01:07:17
Apple let's add calories too calories01:07:19
per01:07:21
serving I did a quick Google search of01:07:23
some the calories per serving for these01:07:25
fruits I don't know how accurate these01:07:27
are but they seemed right our first01:07:29
object has a name of Apple calories is01:07:32
set to01:07:34
95 name orange01:07:38
calories01:07:41
45 name01:07:45
banana calories01:07:49
105 name01:07:52
coconut01:07:56
coconut01:07:58
calories01:08:01
159 name01:08:04
pineapple01:08:06
calories01:08:09
37 all right we now have an array of01:08:12
objects there's a few changes we're01:08:14
going to make if I run this again our01:08:17
list isn't rendering I need to display01:08:19
the name property of each fruit fruit.01:08:23
name property01:08:25
we have one issue behind the scenes I'm01:08:27
going to right click go to inspect then01:08:30
go to01:08:36
console warning each child in a list01:08:39
should have a unique key prop react01:08:42
wants us to assign a key to each list01:08:44
item each key should be unique in my01:08:47
array of objects each fruit has a unique01:08:49
name I could use that we will set the01:08:53
key attribute to equal include some01:08:56
JavaScript fruit. name that warning01:09:00
should go01:09:04
away which it did if there's a01:09:08
possibility that two objects can share01:09:09
the same name you'll want to use some01:09:12
sort of unique ID in a real world01:09:14
scenario if you're pulling data from a01:09:16
database each row of data is going to01:09:18
have some sort of unique ID so we're01:09:20
going to mimic that let's add a new01:09:23
property for01:09:24
id id will be one for Apple these will01:09:28
be in ascending order orange will have01:09:31
an ID of two banana is01:09:34
three coconut is four pineapple is01:09:39
five we'll set the key to be each01:09:43
ID this would be much better than using01:09:46
the name you can have a naming conflict01:09:48
if two objects share the same name like01:09:51
if these were people you could have two01:09:52
people named Bob01:09:54
that warning should be01:09:57
gone which it is react would like a01:10:00
unique key for each item just so it can01:10:02
more easily keep track of items being01:10:04
inserted and removed along with each01:10:07
element I'm going to display the01:10:09
calories next to each01:10:10
element so we'll make a few changes I'm01:10:13
going to put these HTML elements on a01:10:15
new line for01:10:16
readability after the fruit's name I'm01:10:19
going to add a01:10:20
colon a non-breaking space character and01:10:24
Pand nbsp for space oh then not a01:10:29
semicolon forgot about01:10:31
that then we'll insert some01:10:34
JavaScript fruit. calories for the01:10:37
calories of each01:10:38
fruit I'll make it bold I'll enclose our01:10:42
calories with a pair of bold tags which01:10:44
is just01:10:51
B now we're going to sort the items in01:10:53
our list we'll do that before the map01:10:56
method I'm going to sort our array of01:10:59
objects by their name property we'll01:11:02
take01:11:03
fruits use the sort method the sort01:11:06
method will sort an array in place we'll01:11:09
write a custom sorting function we have01:11:11
two parameters A and B A for the first01:11:15
item B for the second then we iterate01:11:18
over the entire01:11:19
array we need an arrow meaning do01:11:22
something to lexicographically sort01:11:25
string properties within an array we can01:11:27
use the following method we'll take the01:11:29
name property of a use the built-in01:11:33
local or local some people01:11:36
say compare method I misspelled01:11:39
that yeah I can't spell01:11:42
compare to b.n01:11:45
name that should sort our aray of01:11:47
objects by their name property for01:11:50
reverse order let me turn this line into01:11:53
a comment01:11:54
this is01:11:58
alphabetical for reverse alphabetical01:12:02
order we just have to replace a with B01:12:06
and B with a there pineapple orange01:12:09
coconut banana apple with apple being at01:12:11
the01:12:12
bottom let's sort by01:12:15
calories fruits. sort this one's easier01:12:19
again we have our parameters a comma B01:12:23
Arrow01:12:24
the calories of a a.01:12:26
calories minus b.01:12:30
calories that one's easy we have01:12:32
pineapple at the top followed by orange01:12:34
apple banana01:12:35
coconut this is in numeric01:12:39
order for reverse numeric01:12:45
order reverse01:12:47
numeric or descending you could say the01:12:51
calories of B minus the calories of a01:12:54
now we have coconut at the top with01:12:56
pineapple at the bottom with the least01:12:57
amount of01:12:59
calories in this next section I'm going01:13:01
to demonstrate to you how we can filter01:13:03
objects by a certain criteria we'll01:13:05
filter anything that's greater than 10001:13:07
calories we'll create a new array of01:13:09
fruit that has low01:13:11
calories we'll create a new array const01:13:14
low cal01:13:17
fruit equals take our original array of01:13:20
fruits use the built-in fil01:13:25
method we'll have one parameter of fruit01:13:29
examine each fruit in our array of01:13:32
fruits Arrow then a condition here's the01:13:36
criteria check the calories property of01:13:39
our01:13:41
fruit if it's less than 100 filter it01:13:45
and add it to a new array instead of01:13:48
displaying our array of fruits let's01:13:50
display our new array of low calorie01:13:52
fruit oh that should be plural local01:13:55
fruits when we create our array of list01:13:57
items replace fruits with local fruits01:14:01
and any instance of fruit with lcal01:14:04
fruit01:14:06
singular so we have three instances of01:14:08
fruit let's replace01:14:11
those let me clean this up a01:14:14
little feel free to pause the video if01:14:16
you need to write this01:14:18
down we have three fruits that are low01:14:20
calories the calories is less than01:14:23
100 let's find any high calorie01:14:28
fruits we can just copy this line of01:14:30
code paste it but change the condition01:14:34
examine the calories of each fruit01:14:36
filter it out if the calories are01:14:38
greater than or equal to01:14:40
100 the name of this array will be high01:14:43
Cal01:14:45
fruits replace low cal fruits with high01:14:48
Cal01:14:49
fruits replace low cal fruit with high01:14:53
Cal fruit01:14:55
singular and do that for the other01:14:57
instances as01:15:00
well there we are we have two fruits01:15:02
that are high in calories bananas and01:15:05
coconuts that is US using the filter01:15:07
method to filter out list items let's01:15:10
replace High Cal fruits with fruits high01:15:13
Cal fruit with fruit to display our01:15:16
original01:15:22
array for the next part of this lesson01:15:24
we're going to transform this list01:15:26
component so it's reusable with01:15:28
different lists currently the way that01:15:30
we set this up is that each list01:15:31
component that we create has its own01:15:33
list of fruit so we're going to make01:15:36
some01:15:37
changes let's cut our list of01:15:41
fruits going to the parent component of01:15:44
app we'll paste our list of fruits then01:15:47
pass it as props to our list01:15:52
component01:15:54
with our list component we will have a01:15:57
key of items equals insert some01:16:02
JavaScript our list of fruits let's also01:16:06
add a category01:16:07
key category equals for my category01:16:12
let's say fruits eventually we'll add an01:16:15
H3 heading we're now going to send all01:16:18
of this data to the list component but01:16:21
we have to set up props with in the list01:16:24
function we have a parameter of01:16:28
props we'll access the items of props to01:16:31
get our01:16:33
fruit we'll create const item list01:16:38
equals not to be confused with list01:16:41
items list items is what we get after we01:16:44
map01:16:45
it item list equals props do items and01:16:50
remember that items is our fruits array01:16:54
replace fruits with item01:16:57
list replace fruit with01:17:00
item do that here here and01:17:04
here there's our list01:17:07
again if you're going to sort or use the01:17:09
filter method be sure it's item list not01:17:12
fruits because now list is a reusable01:17:15
component I'll add our Category 2 that's01:17:18
stored within props const category01:17:22
equals01:17:23
props do01:17:27
category currently we're returning a01:17:29
single ordered list I'll also include an01:17:31
H301:17:35
element include some JavaScript we need01:17:37
curly braces add our01:17:40
category however with our return01:17:42
statement we can only return a single01:17:44
element or many elements that are01:17:46
wrapped within a fragment let's create a01:17:49
fragment that will enclose all of our01:17:52
markup01:18:00
there we01:18:01
are going back to our app component01:18:04
let's create a new list just to make01:18:06
sure that our list component is01:18:09
reusable let's copy our array of01:18:13
fruits paste01:18:15
it we'll create an array of01:18:21
vegetables the IDS will be 6 7 8 901:18:27
10 the name of my first item will be01:18:31
potatoes calories 110 per01:18:34
serving01:18:36
celery calories will be01:18:41
15 carrots calories01:18:46
25 corn calories01:18:51
63 broccoli01:18:55
calories01:18:57
50 now we should be able to create a new01:18:59
list01:19:01
component within our return statement01:19:03
we're going to need a fragment01:19:10
again we'll return a second list item01:19:14
component the items will be vegetables01:19:18
the category will be a string of01:19:21
vegetables Bo boom there we go here's01:19:24
our second list01:19:25
component so our list component is now01:19:28
reusable we can pass in many different01:19:30
types of lists to make this look better01:19:33
let's apply some CSS styling we'll have01:19:36
to set a class name01:19:38
first our H3 element will have a class01:19:41
name equal01:19:43
to list-01:19:47
category our ordered list will have a01:19:50
class name of list items01:19:56
all right going to our CSS stylesheet01:19:59
index.css let's work on our list01:20:02
category01:20:03
first use dot to select a class list01:20:08
category I'm just going to run through01:20:09
these real quick I'm going to make sure01:20:12
I'm zoomed in to 100 because I was01:20:14
zoomed in01:20:15
beforehand font size 2.501:20:20
em font weight will be01:20:26
gold pick a01:20:28
color I'm going to stick with hsl values01:20:32
I'll set the lightness to be01:20:35
20% I'll add a little bit of margin on01:20:37
the01:20:40
bottom 1001:20:43
pixels text align01:20:50
Center I'll add a border01:20:53
three pixel01:20:56
solid I'll add a border radius to round01:20:59
the01:21:05
corners and a background01:21:09
color pick a color again I'll use01:21:15
hsl this one I pre-picked already01:21:19
18501:21:21
100% 50% % that's not a bad looking01:21:25
color pick whatever color you would like01:21:27
let's work on our list item01:21:29
elements we need to select the class of01:21:32
list01:21:33
items do list items select each list01:21:38
item within this01:21:40
class I'll increase the font size to be01:21:43
201:21:46
em I'll remove the list style but you01:21:49
don't have01:21:50
to list Style01:21:53
will be01:21:54
none pick a color again I'm using hsl01:22:01
values I'll set the lightness to be01:22:06
25% text align01:22:11
Center and margin will be01:22:15
zero all right now when I hover over one01:22:18
of these list items I'll apply a hover01:22:21
effect01:22:23
take our class list items take each list01:22:25
item access the hover sudo01:22:28
class I'll change the brightness the01:22:32
color will be something a little bit01:22:34
brighter I'll set the lightness to be01:22:37
45% and then the cursor will be a01:22:41
pointer yeah not bad that's how we can01:22:44
apply some CSS styling to list01:22:46
components all right heading back to our01:22:48
app component what if we have an empty01:22:51
list for example with our fruits I'm01:22:53
going to cut01:22:55
it we can use conditional rendering to01:22:58
render our list only if there's elements01:23:02
let's put those back we're going to01:23:04
write some JavaScript we need some curly01:23:06
braces let's take our array of fruits01:23:10
access the length01:23:12
property is it greater than01:23:15
zero question mark if it is we'll return01:23:19
our list01:23:21
component01:23:23
colon if it's false we can return null01:23:27
let's do that with our vegetables01:23:29
too take our array of vegetables access01:23:33
the length property is it greater than01:23:36
zero tary operator if it is return our01:23:40
list01:23:42
component if not we can return01:23:45
null if one of these lists doesn't have01:23:47
any elements we won't render that01:23:51
component01:23:56
there is a short hand to the tary01:23:58
operator we don't need to write or else01:24:00
return null what we'll use instead of01:24:03
the tary operator is the and logical01:24:05
operator we can effectively shortcircuit01:24:08
the first01:24:09
expression then we don't need colon null01:24:13
it's a little less01:24:17
code our list component will always be01:24:20
true because it exists01:24:23
however the first expression might not01:24:25
be so if this condition is false we01:24:29
don't render this if it is true we will01:24:32
render this let's try that again let's01:24:35
remove these01:24:37
elements we don't display the fruits01:24:39
list01:24:40
component and we will not display the01:24:43
vegetable list01:24:44
component this is known as short01:24:47
circuiting one thing to consider what if01:24:50
our category is missing let's remove our01:24:53
category from01:24:54
fruits well I would like to add some01:24:56
sort of placeholder here or what if one01:24:59
of these arrays was01:25:01
missing well nothing displays not even01:25:04
vegetables we should add some default01:25:06
props in case one of these properties is01:25:08
missing so going back to our list01:25:11
component before we export it let's set01:25:14
up some default props take our component01:25:17
name01:25:18
list. default props equals01:25:22
within a set of curly braces let's set01:25:25
our01:25:26
category category01:25:29
property to be category as a01:25:34
placeholder if for some reason these01:25:36
components don't have a01:25:38
category We'll add a placeholder of01:25:40
category which at least looks better if01:25:43
we're missing an array that's a bigger01:25:45
problem let me go to inspect then01:25:51
console01:25:53
we're trying to map something that's01:25:55
undefined we have no array to work with01:25:58
so nothing is rendering so as a backup01:26:01
within default props let's set our items01:26:05
to be an empty01:26:06
array items will be an empty01:26:11
array if one of these arrays was missing01:26:13
for some01:26:15
reason at least the category is01:26:17
displayed as well as the subsequent01:26:19
components at least something will01:26:21
display01:26:23
okay then lastly as good practice if01:26:25
we're accepting props we should set up01:26:28
prop types I'll walk you through it if01:26:30
you're just joining us with prop types01:26:33
if the incorrect data type is passed01:26:35
into props when we debug it'll give us a01:26:38
warning to use prop types we have to01:26:41
import it at the top of our list01:26:43
component we will01:26:45
import prop01:26:47
types01:26:49
from prop01:26:51
types01:26:54
take our component of01:26:56
list01:26:58
list. prop01:27:02
types equals set of curly braces for our01:27:07
category this will be a01:27:09
string category colon01:27:12
space prop types.01:27:17
string add a comma for another line okay01:27:21
this is where it's going to get tricky01:27:23
we have an array of01:27:25
objects we'll access the items01:27:28
property items colon space prop types01:27:34
I'm going to move down a little01:27:37
bit dot we have an01:27:40
array01:27:41
array of we have an array of01:27:45
objects prop01:27:47
types. shape method we have to define01:27:51
the shape of each object object each01:27:53
object is going to have its own data01:27:55
types we have a number string then01:27:59
number we're defining an object we need01:28:01
a set of curly01:28:02
braces ID01:28:05
colon prop types do01:28:09
number comma for another01:28:12
property I'll put the next one on a new01:28:14
line for01:28:18
readability we have a name property01:28:20
which will be a string01:28:22
prop types.01:28:27
string then01:28:31
calories prop types.01:28:35
number and that's01:28:38
it let's head back to our app01:28:41
component our prop types should raise a01:28:43
warning if some of our data is of the01:28:45
wrong data type for example let's say01:28:48
that calories is now the string Apple01:28:52
maybe somebody mistyped it01:28:54
twice you can see that right here it01:28:56
changed let's go to01:28:58
inspect01:29:01
console and here's our warning because01:29:03
we have prop type set up invalid prop01:29:06
items index zero calories of type01:29:10
string if we didn't have prop type setup01:29:12
we wouldn't receive that warning this01:29:14
may go unnoticed it is good practice if01:29:16
you're accepting props to also set up01:29:18
prop types it's a little more01:29:20
complicated if you have an array of01:29:22
objects but here are the steps all right01:29:24
everybody I know this was a massive01:29:26
topic thank you all for watching feel01:29:28
free to take some time to study and work01:29:30
with this before moving on to the next01:29:32
topic if you would like we did Cover a01:29:34
lot of material and well those are01:29:36
various ways in which we can render01:29:38
lists in01:29:43
react hey uh so today I'm going to01:29:45
explain click events and how to handle01:29:47
them in react a click event is an01:29:49
interaction when a user clicks on a01:29:52
specific element we can respond to01:29:54
clicks by passing a call back to the01:29:56
onclick event handler in this example01:29:59
we'll create a button let's create a01:30:02
button component go to new01:30:04
file button.01:30:08
jsx we will use a function base01:30:11
component function01:30:14
button then be sure to export it export01:30:17
default01:30:19
button going back to our parent01:30:22
component of app we will need to import01:30:24
our button import button from its01:30:29
location button.01:30:31
jsx then we will create one button01:30:36
component going to our button component01:30:40
we will return a single button01:30:44
element the button will have text of01:30:47
Click01:30:49
me hey for fun I'm just going to add it01:30:51
an emoji but you don't have01:30:57
to and I will zoom in so you can see it01:31:01
many HTML elements have an onclick event01:31:05
handler we can set the SQL to a01:31:07
JavaScript callback but we need a01:31:09
function to work with So within our01:31:12
button function we can write an inner01:31:15
function const handle click I will01:31:20
assign this equal to either a function01:31:22
expression or an arrow function I like01:31:25
Arrow functions so I'm going to stick01:31:26
with an arrow function when we click on01:31:29
the button what do we want to do let's01:31:32
console.log the word01:31:36
ouch so we have our function we will set01:31:39
the onclick event handler equal to a01:31:42
callback a call back to this function01:31:45
when we click on the button do this if I01:31:48
went to my console inspect console01:31:52
Let me refresh this if I click on the01:31:55
button we execute this code we will01:31:58
output the word ouch every time I click01:32:01
the button if your function has parameters01:32:04
there's one change we'll need to make01:32:06
let's create a second function const01:32:10
handle Click01:32:13
2 this function will have a parameter of01:32:16
name we'll use an arrow function we will01:32:20
console.log01:32:22
I'll use a template string let's display01:32:25
the01:32:26
name stop clicking01:32:30
me for the onclick event handler we will01:32:33
set a call back of handle click to but01:32:36
we have parameters that means we need to01:32:38
send a matching number of arguments I01:32:41
will send my first name but feel free to01:32:43
use your name I didn't click on the01:32:45
button yet I'm going to go to inspect01:32:49
console uh Let me refresh all this01:32:52
I didn't click on the button yet but01:32:54
we've already called that function if01:32:56
you add a set of parentheses after a01:32:58
call back you'll invoke it right away so01:33:01
we don't want to do that if we have01:33:03
arguments we need to send to a function01:33:05
we could wrap this call back within a01:33:07
function expression or an arrow function01:33:10
let's use an arrow function when we01:33:12
click on the button do this that will01:33:15
prevent us from calling this function01:33:17
right away so let's refresh01:33:20
everything then when I click on the01:33:22
button then we execute this code bro01:33:25
stop clicking me bro stop clicking me01:33:28
bro stop clicking me so that's how to01:33:30
send arguments to a01:33:32
function now in this next example We'll01:33:34
add some01:33:36
conditions let's set the onclick01:33:38
attribute to be a call back to handle01:33:40
click if you have more than one line of01:33:43
code for your arrow function you'll need01:33:44
to use a set of curly01:33:47
braces let's add a count variable let01:33:51
count equal01:33:53
Z with our handle click function let's01:33:57
have one parameter a name what would we01:34:00
like to do let's check to see if our01:34:04
count01:34:05
variable is less than three if it is01:34:09
let's increase count by01:34:11
one then01:34:15
console.log I'll use a template01:34:18
string let's add our name parameter01:34:22
you clicked me add a01:34:25
placeholder01:34:27
count time or01:34:30
times else if the user clicked me more01:34:34
than three times let's console. log a01:34:38
different01:34:39
message let's01:34:41
say add a placeholder name stop clicking01:34:49
me with the onclick event Handler we01:34:52
have a parameter that means we have to01:34:54
wrap this call back within a function01:34:56
expression or an arrow function let's01:34:58
use an arrow function for01:35:02
Simplicity we'll pass in a first name01:35:05
pass in your own first01:35:06
name so let's save and refresh01:35:09
everything go to inspect01:35:12
console when I click on the button once01:35:15
it's going to display bro you clicked me01:35:17
one time bro you clicked me two times01:35:20
bro you clicked me three times after the01:35:23
third time we'll display a different01:35:24
message bro stop clicking me bro stop01:35:27
clicking me bro stop clicking01:35:30
Me So within your functions you can01:35:32
write some01:35:33
conditions now I need to explain the01:35:36
event01:35:38
parameter let's recreate that handle01:35:40
click01:35:41
function const handle click equals with01:35:47
click events were automatically provided01:35:49
with an event argument it's an object01:35:52
that describes the event that occurred01:35:54
but as a parameter people usually01:35:56
shorten the event parameter to be simply01:35:59
e let's print our01:36:02
event01:36:04
console.log e our event we'll need to01:36:08
set the onclick event handler we have01:36:10
one parameter so we need to wrap this01:36:13
within an arrow01:36:15
function handle click for the arrow01:36:18
function we'll have e for the parameter01:36:21
and E for an argument for the handle01:36:23
click01:36:28
function let's click on the button we're01:36:31
now outputting the event its type is01:36:34
synthetic base event and it has all of01:36:37
these properties and01:36:39
methods such as where you clicked on the01:36:42
screen there's a timestamp and a Target01:36:45
by utilizing this event object that01:36:48
gives us many different possibilities01:36:50
for this demonstration let's change the01:36:52
text content of the01:36:54
button so there should be a Target01:36:56
property here I am going to change the01:37:00
text content that should be a01:37:03
property yep there it01:37:07
is so what we'll do after clicking on01:37:10
the button we will access that event01:37:13
object follow this with DOT that's the01:37:16
property01:37:17
accessor we're selecting the inner01:37:20
target object01:37:22
then selecting the text content property01:37:26
let's set that equal to be01:37:29
ouch so now when you click on the button01:37:32
the text of the button should change to01:37:35
ouch I'm going to add an emoji01:37:38
too there we go okay let's try this01:37:41
again this will be fun click me01:37:45
ouch there's also the on doubleclick01:37:48
event handler instead of onclick you'll01:37:50
say say on double click so when we click01:37:54
on the button once now nothing01:37:57
happens but once I double click that's01:38:00
when we'll execute this function now I'm01:38:02
going to double click01:38:05
ouch if you need to handle a double01:38:07
click you just have to use the on double01:38:10
click event01:38:11
handler all right let's move on from01:38:13
using a button this time let's use an01:38:15
image in my assets folder I do have my01:38:18
profile picture from my YouTube channel01:38:21
find a profile picture of yourself or a01:38:23
picture you01:38:24
like we're going to create a new01:38:26
component let's go to our source folder01:38:29
I will name this component profile01:38:32
picture.01:38:35
jsx we will create a function with the01:38:38
name of profile01:38:42
picture then be sure to export it export01:38:47
default profile01:38:49
picture then going back back to our app01:38:52
component we will import our profile01:38:55
picture component from its01:38:58
location profile picture.01:39:02
jsx let's include our profile picture01:39:05
component instead of our01:39:10
button all right so within our profile01:39:12
picture component I will store a URL01:39:15
within a constant constant image01:39:20
URL I will list a relative file01:39:23
path so my image is within my assets01:39:27
folder my file location but it might be01:39:30
different for you mine is going to01:39:33
be SL Source SL assets slash the name of01:39:39
the image including the extension mine01:39:42
is profile.01:39:44
jpeg we will return an image on01:39:49
lint I AMG for an image01:39:52
element I will set the source equal to01:39:55
some JavaScript I need to set a curly01:39:58
braces I will set it equal to my image01:40:02
URL and let's see if that worked yes it01:40:05
did but I'm going to zoom out to like01:40:09
150 my image is01:40:12
small let's add a handle click function01:40:15
const handle click equals an arrow01:40:19
function to test it let's console.log01:40:23
the01:40:24
word01:40:26
ouch then we'll need to set the onclick01:40:29
event handler within our01:40:31
image on click equals a callback to01:40:36
handle01:40:37
click so let's save and refresh01:40:40
everything let's go to inspect console01:40:43
when you click on your image it should01:40:45
display the word ouch every time you01:40:47
click01:40:49
it let's utilize the event object that's01:40:52
generated we have one parameter e for01:40:55
our event that means we'll have to01:40:57
change the call back to Be an Arrow01:41:00
function e for the parameter01:41:04
Arrow handle click we have one argument01:41:08
of e so what should we do now when we01:41:12
click on the image let's hide the image01:41:16
we'll need to access that event01:41:18
object access the target object that's01:41:21
found within access its style then the01:41:25
display01:41:27
property we will set the display to be01:41:29
none when we click on it so then if you01:41:32
were to click on your image it should01:41:35
disappear so by accessing the event01:41:37
object that gives us a load of different01:41:40
possibilities for what we can do all01:41:42
right everybody so that is an01:41:43
introduction to handling click events in01:41:46
react a click event is an interaction01:41:49
when a user clicks on a specific element01:41:51
we can respond to clicks by passing a01:41:53
call back to the onclick event handler01:41:56
and well everybody that is an01:41:57
introduction to click events in01:42:03
react hey what's going on everybody in01:42:06
today's video I'm going to explain the01:42:07
usate react hook and near the end of01:42:09
this video we're going to create a01:42:11
reactive counter program so sit back01:42:13
relax and enjoy the show I haven't01:42:16
explained what react hooks are yet a01:42:18
react Hook is a special function that01:42:21
allows functional components to use01:42:23
react features without writing class01:42:25
components this was a change made in01:42:27
react version 16.8 basically we no01:42:29
longer need to write class components we01:42:31
can write function-based components that01:42:34
use react hooks to use react features01:42:36
there are many react hooks if a function01:42:39
begins with use it's probably a react01:42:41
hook use State use effect use context01:42:43
use reducer use callback and more UST01:42:46
state is the most widely used UST state01:42:49
is a react hook that allows the the01:42:50
creation of a stateful variable and a01:42:53
Setter function to update its value in01:42:55
the virtual Dom basically by using the01:42:58
usate hook we can create not just a01:43:00
variable but a stateful variable when01:43:03
you update this variable that change01:43:05
will be reflected in the virtual domum01:43:07
normal variables don't when you use the01:43:09
UST State hook you're given a variable01:43:11
and a Setter function specifically for01:43:13
that variable so what we'll do in this01:43:15
example is create a new component going01:43:17
to our source folder we're going to01:43:19
create a new file we'll name this01:43:21
component my01:43:24
component we use react hooks in function01:43:27
based components so make sure you're not01:43:29
writing a class01:43:31
component with this component we will01:43:34
export it export default my component01:43:38
then be sure to import this because I'm01:43:40
probably going to forget if we don't do01:43:41
it now so we will import my01:43:46
component from its01:43:49
location slash my component and this is01:43:53
a jsx file let's return one my01:43:59
component and we are ready to begin in01:44:02
order to use a react hook we need to01:44:04
import it at the top of this component01:44:06
we will import the react Library however01:44:10
we don't need the entire react Library01:44:13
we can use object destructuring to01:44:15
extract individual variables or01:44:17
functions I would just like the UST01:44:19
State function we don't need the entire01:44:22
react library from its location react we01:44:27
now have access to this UST State01:44:29
function using the UST State function01:44:31
we'll create a stateful variable and a01:44:34
Setter function to update that variable01:44:36
so let's declare const we're going to01:44:39
use a set of straight brackets for array01:44:41
destructuring equals use State01:44:46
function the use State function returns01:44:49
an array with two ele elements a01:44:51
variable and a Setter function we're01:44:54
going to use array destructuring to01:44:56
destructure these two elements we'll01:44:58
create a stateful variable for name then01:45:00
we're given a Setter function01:45:02
specifically for this variable a common01:45:04
naming convention is to type set than01:45:07
the variable name with camel case naming01:45:10
convention and that's it if we ever need01:45:13
to change the value of the stateful01:45:15
variable we have to do so with this01:45:17
Setter it's a function at the bottom01:45:19
we're going to return01:45:21
return a div01:45:24
element within this div element we'll01:45:27
create a paragraph element and a button01:45:30
we'll begin with a paragraph element01:45:32
that has text of name and I'm going to01:45:35
zoom in a little bit I will insert some01:45:38
JavaScript using curly braces let's01:45:40
display our name following our paragraph01:45:44
element let's include a button the01:45:46
button will have an onclick attribute01:45:49
equal to a JavaScript function so we01:45:52
need a set of curly braces to embed that01:45:54
let's create a function to01:45:57
update name for the text of the button01:46:02
let's say set01:46:04
name all right now we just need to01:46:07
declare this function I'll use an arrow01:46:09
function const update name equals Arrow01:46:16
function so what would we like to do01:46:19
okay let's attempt to set our name equal01:46:23
to type your name or some other name I'm01:46:25
just going to type in01:46:27
SpongeBob if I click on this button we01:46:30
should update our name right well that01:46:33
doesn't appear to01:46:35
work so if I were to01:46:38
console.log my name01:46:41
variable then attempt to update it using01:46:43
this button if I were to go to my01:46:46
console hold on I'm going to use let so01:46:49
we can update it if I attempt to change01:46:52
this name of the01:46:54
variable it does so within our01:46:56
console but it doesn't update in react01:46:59
the virtual Dom is still displaying the01:47:01
previous state so if I would like to01:47:03
display any changes I will want to use01:47:06
that Setter instead of setting our name01:47:08
equal to a new value I'm going to change01:47:10
this back to be a01:47:12
constant we will use the setter function01:47:16
and pass in a new value so let me type01:47:19
in a new value01:47:22
and that should work we have updated our01:47:24
name when you use the setter function of01:47:26
a stateful variable it will trigger a01:47:28
render of the virtual Dom normal01:47:31
variables don't that's why the UST State01:47:33
react Hook is useful we can create a01:47:36
stateful variable when the stateful01:47:38
variable gets updated with its Setter01:47:40
function it triggers a rerender of the01:47:42
virtual Dom with the usate function you01:47:45
can pass in an initial state currently01:47:47
we're not passing in anything for the01:47:49
initial state State I will set this to01:47:51
be01:47:52
guested when I refresh everything and01:47:54
start over the initial state is guessed01:47:57
whatever value you pass in to the UST01:47:59
State hook then I can set my name again01:48:02
to something else now we're going to01:48:04
create an age variable and increment01:48:07
it const we're going to use array to01:48:09
structuring we need a stateful variable01:48:13
like age and a Setter function for that01:48:16
age set age equals use01:48:21
state if you would like an initial value01:48:24
you can place that within the UST State01:48:25
function I'll set the initial value of01:48:28
AG to be01:48:30
zero I'm going to copy this paragraph01:48:33
and this01:48:35
button change name to be01:48:39
age we'll create a function to increment01:48:43
age the text on the button will01:48:46
be increment age now we just need this01:48:51
function01:48:53
const increment age I'll use an arrow01:49:00
function to increment our age we will01:49:02
use the set age01:49:06
function let's take our age +01:49:10
one so our initial value for our age is01:49:13
zero but every time I click on the01:49:15
button we will update the value of that01:49:18
variable so every time I click the01:49:19
button button we're increasing our age01:49:21
by01:49:22
one or even a different number this time01:49:25
I'll increase our age by two on each01:49:27
button click so we start at zero then01:49:30
we'll increment by two 2 4 6 8 10 now01:49:34
this time we'll create a Boolean01:49:36
variable and toggle it between being01:49:38
true and false using the US state hook01:49:42
we will create const is01:49:45
employed the setter function will be set01:49:49
is01:49:51
employed equals the use State01:49:56
hook I would like an initial value a01:50:00
false let's create a paragraph element01:50:02
and a01:50:04
button I will set the text of the01:50:06
paragraph to be is01:50:10
employed instead of displaying a Boolean01:50:13
directly let's use the tary operator for01:50:16
conditional rendering is employed if01:50:19
that is true will display yes otherwise01:50:24
no when we click on the button let's01:50:27
create a function01:50:28
to01:50:30
toggle toggle employed status that's01:50:35
kind of a Long Function name all right01:50:38
let's create a function const toggle01:50:41
employed status equals an arrow01:50:46
function we will use the setter function01:50:49
set is employed01:50:51
pass in a new value let's switch this01:50:53
value from being false to true and true01:50:55
to false every time we click the button01:50:57
since this is a Boolean we can use the01:51:00
not logical operator to reverse it so01:51:03
let's say not is01:51:06
employed and let's see if this works is01:51:08
employed no oh let's change the text on01:51:11
the button01:51:13
too toggle01:51:17
status there we go all right when we01:51:20
click on the button we can toggle this01:51:21
Boolean from being true to false and01:51:23
false to true and this should happen01:51:26
every time I click the01:51:28
button as a project what we're going to01:51:30
do now is create a counter program so01:51:33
let's close out of my01:51:35
component we'll create a new component01:51:37
for a counter component counter.01:51:41
jsx this will be a function base01:51:45
component01:51:46
function01:51:48
counter then be sure to export it export01:51:53
default01:51:55
counter going back to our app component01:51:58
we will import our counter component01:52:01
from its location counter. jsx then we01:52:05
will include one counter component and01:52:09
that's it in order for us to use the US01:52:12
state hook we have to import it from the01:52:14
react Library import react we'll use01:52:17
object destructuring just to get the UST01:52:20
State hook and nothing else from its01:52:23
location of01:52:25
react all we need is one variable a01:52:29
counter let's say const we'll use array01:52:32
destructuring create a stateful variable01:52:35
of count and a Setter function for that01:52:38
count set count equals the use State01:52:44
hook would we like an initial value for01:52:46
count we would like the initial value to01:52:49
be zero01:52:50
we'll create a few functions to01:52:52
increment decrement and reset the01:52:55
counter const01:52:57
increment equals I'll use an arrow01:53:02
function to update the count to01:53:04
increment it we will use the set count01:53:07
function the value we'll pass in is01:53:10
Count +01:53:12
one then let's do this for01:53:16
decrement01:53:18
const decrement01:53:20
count minus one then01:53:24
reset const reset for set count we'll01:53:29
pass in zero to reset the01:53:31
count now we're going to return some01:53:35
elements we'll also style this with CSS01:53:39
let's begin with the div01:53:41
element I'm going to scroll down a01:53:42
little01:53:46
bit my div element will have a class01:53:49
name name equal to01:53:53
counter-01:53:55
container I will create a paragraph01:53:57
element with a class01:54:00
name equal to count display to display01:54:05
the number for the text of the paragraph I01:54:08
will insert some JavaScript and display01:54:11
our count01:54:13
variable we'll create three buttons for01:54:16
the first we'll create a button element01:54:19
this button will have a class01:54:22
name of01:54:24
counter-01:54:26
button the onclick attribute will be set01:54:29
equal to a JavaScript function this01:54:32
first button will be the decrement01:54:34
button for the unclick attribute we will01:54:36
set this equal to the decrement function01:54:39
for the text on the button we'll say01:54:45
decrement and there's our first button01:54:48
so let's copy this button paste it the01:54:52
second button will be for reset the text01:54:55
will be01:54:57
reset then the third button will be01:55:00
increment onclick will be the increment01:55:03
function the text will be01:55:06
increment all right and that's all that01:55:08
we need let's check it for functionality01:55:10
to be sure that everything works we can01:55:12
increment this number we can decrement01:55:16
it and we can reset it so for the icing01:55:20
on the cake let's style it with01:55:22
CSS going to our index CSS stylesheet01:55:26
we'll apply the following CSS let's01:55:29
select our counter01:55:32
container do counter container I will01:55:36
text align01:55:39
Center change the font01:55:43
family I will pick a s serif font of01:55:46
Arial with a backup of s serif01:55:50
next we'll select the count01:55:53
display select the class of count01:55:56
display that would be this number will01:55:59
increase the font size to something01:56:00
massive like 10 em RM works too oh okay01:56:05
that's a little too big but I am zoomed01:56:06
in actually you know what that's perfect01:56:09
I will set the margin top to be zero to01:56:13
close this Gap and I will set the margin01:56:17
on the bottom to be 5001:56:20
pixels then let's work on the counter01:56:23
buttons01:56:25
next select the class of counter button01:56:29
I will set the width to be 15001:56:34
pixels the height to be 5001:56:39
pixels the font01:56:42
size to be 1.501:56:46
em I will set the font weight to be01:56:51
bold set the margin to01:56:54
be 0 pixels by 501:56:57
pixels this would be for the left and01:56:59
right of the01:57:01
buttons change the background01:57:05
color pick a color that you01:57:08
like I'm going to use hsl values01:57:13
though that's pretty good I will set the01:57:17
color of the font to be white01:57:20
remove the01:57:21
border border01:57:24
none set the Border radius to round the01:57:29
corners five01:57:32
pixels and change our cursor to be a01:57:36
pointer if we hover over the button when01:57:39
we hover over the button I'm going to01:57:40
change the background color of the01:57:42
button so with the counter button class01:57:45
with the counter button class we will01:57:47
select the hover sudo class01:57:50
we'll take our background color decrease01:57:53
the lightness to be 10%01:57:55
darker there we are and that is all the01:57:58
CSS styling that we need we have our01:58:00
counter program we can increment the01:58:03
counter we can decrement it and we can01:58:06
reset01:58:07
it all right everybody so that is the US01:58:10
state react hook it allows the creation01:58:12
of a stateful variable and a Setter01:58:14
function to update its value in the01:58:17
virtual Dom when you include the UST01:58:19
State hook you're given an array of two01:58:21
elements we use array destructuring to01:58:24
create a stateful variable and a Setter01:58:26
function to update that variable and01:58:29
well everybody that is the UST State01:58:31
hook in01:58:36
react yo yo yo yo yo what's going on01:58:38
people so today I got to explain the01:58:40
onchange event handler in react onchange01:58:44
is an event handler used primarily with01:58:47
form elements including but not limited01:58:49
lied to input text area select and radio01:58:53
buttons onchange triggers a function01:58:56
every time the value of the input01:58:58
changes so let me give you an example we01:59:00
will be using the UST State hook so we01:59:03
need to import it import react I would01:59:07
like the use State Hook from01:59:11
react using the use State hook we're01:59:14
going to create a name variable a01:59:15
stateful variable const name and we need01:59:20
a Setter function for this variable set01:59:23
name equals the use State hook you can01:59:28
set an initial value I'll set mine to be01:59:30
an empty string I will be returning a01:59:33
div element to enclose all of our01:59:37
markup within my div element I will01:59:39
create an input01:59:43
element and here's my input element I01:59:47
will set the value of the input element01:59:50
to be some JavaScript my stateful name01:59:54
variable then I will set the01:59:56
onchange event01:59:58
handler to be a reference to a02:00:01
JavaScript function which we still need02:00:03
to create this will be a call back let's02:00:07
create a function to handle a name02:00:09
change it's going to be similar to02:00:11
handle02:00:12
click function handle name change we02:00:18
have one parameter an event that's going02:00:21
to be provided to us when we change the02:00:24
value of this input element I will02:00:26
invoke our set name02:00:29
function we will set our name variable02:00:32
to be access our event02:00:35
object access its Target then get the02:00:39
value property onchange is going to be02:00:42
set equal to a call back to this02:00:44
function when we type something or02:00:46
somehow change the value within here02:00:48
call the this function and then02:00:51
afterwards I will include a paragraph02:00:53
element that has the text of name and02:00:57
include some JavaScript I will include02:01:00
my name variable so what should happen02:01:03
is when I type in a name it will update02:01:06
in real02:01:10
time with use State I can set the02:01:13
initial value to be something too I'll02:01:15
set my initial value to be02:01:18
guested02:01:21
the onchange event handler triggers a02:01:24
function every time the value of the02:01:26
input02:01:27
changes right now we have an initial02:01:29
value if I start deleting this my name02:01:31
is going to02:01:32
update this time we'll create an input02:01:35
element for a number instead of text I02:01:37
will create a stateful variable for a02:01:40
quantity as if we're ordering something02:01:43
quantity and we need a Setter function02:01:47
set quantity02:01:50
equals the use State02:01:53
hook would we like an initial value not02:01:57
yet but we'll get to that later I will02:01:59
create a function to handle quantity02:02:05
change it's the same formula as before02:02:08
we will be provided with an event so02:02:11
let's write a parameter for that we will02:02:13
use the setter function for the02:02:15
quantity set quantity02:02:20
we'll pass in Access our event access02:02:23
its Target then access its02:02:26
value then we need some HTML elements02:02:30
let me scroll down I will create an02:02:33
input02:02:36
element I will set the value of this02:02:39
element to be our02:02:43
quantity then I will set the onchange02:02:46
event handler to be a call back to a job02:02:48
JavaScript function handle quantity02:02:52
change I will set the type of this02:02:54
element to be a02:02:56
number type02:02:58
equals02:03:01
number afterwards I will add a paragraph02:03:05
with our02:03:06
quantity and display our quantity02:03:11
variable so now we have arrows to select02:03:15
a number I will update the quantity to02:03:18
be one two 3 402:03:21
five I'll set an initial value of one02:03:25
let's pretend that we're ordering02:03:27
something we're going to assume that the02:03:29
user wants to buy at least one of02:03:30
something that's how you can use02:03:32
onchange to reflect a number that's02:03:34
changing within an input02:03:36
element all right now we're going to02:03:38
create a text area a user is going to be02:03:41
buying something we'll have a user leave02:03:43
a comment I will create const comment02:03:50
set comment equals use02:03:55
State I'll set the initial state of my02:03:57
comment to be an empty02:03:59
string then I'll create a function to02:04:02
handle comment02:04:04
change02:04:06
function handle comment02:04:10
change we have one parameter and event02:04:14
we will use our Setter for our comment02:04:17
then pass in Access our event access its02:04:20
Target then access its02:04:23
value then we need our HTML02:04:26
elements we will create a text area02:04:31
element I will set the value to be our02:04:36
comment02:04:37
variable then set the onchange event02:04:40
handler to02:04:42
be a call back to handle comment02:04:45
change I'm also going to add a02:04:47
placeholder for some placeholder02:04:50
text02:04:52
placeholder02:04:53
equals in my specific example this text02:04:57
area will be for specific delivery02:04:59
instructions if somebody's shopping on02:05:02
your site and they order something they02:05:04
might want to provide additional02:05:05
delivery instructions leave package on02:05:08
the back porch ring the doorbell after02:05:10
the delivery is complete stuff like that02:05:13
so for my placeholder I'll type in enter02:05:17
delivery02:05:20
instructions and there's my placeholder02:05:22
text then just to see if this updates02:05:25
I'll add a paragraph02:05:27
element with my02:05:30
comment then insert my comment02:05:33
variable all right let's see if this02:05:36
works02:05:38
leave package on front porch and avoid02:05:45
the killer02:05:47
Chihuahua02:05:49
that's how we can use onchange with a02:05:51
text area all right the next one's going02:05:53
to be a little more02:05:55
complicated we're going to use a select02:05:57
element for a drop- down menu we'll02:05:59
create a drop- down menu for a payment02:06:01
is somebody going to pay with a Visa a02:06:03
MasterCard a gift card02:06:07
const payment set payment this will be a02:06:12
payment type we'll use use02:06:15
State I will set the initial value to be02:06:18
an empty02:06:19
string then we need a Handler02:06:23
function function02:06:26
handle payment02:06:30
change we have one parameter and02:06:33
event then we'll use that Setter02:06:35
function for the02:06:37
payment set02:06:39
payment event access its Target then the02:06:46
value our select element has as a pair02:06:48
of02:06:50
tags we'll Place option elements within02:06:53
our select element the opening select02:06:56
element is going to have a value equal02:06:59
to our payment02:07:02
variable I will set the onchange event02:07:05
handler equal to a call back to the02:07:09
handle payment change function we have02:07:11
some options within our select02:07:16
element the text on my first stop option02:07:18
will be02:07:20
select an02:07:23
option so now my drop- down menu has02:07:25
select an option for this option's value02:07:29
I will set it to be an empty string this02:07:32
will be the02:07:33
default let's create another02:07:38
option the text on this option element02:07:40
will be a Visa if somebody's paying with02:07:42
a Visa02:07:43
card the value will be a string of Visa02:07:49
besides the defaults we do have an02:07:51
option for Visa then02:07:57
MasterCard Master02:07:59
Card the value will be a string of02:08:04
MasterCard and then a gift02:08:09
card gift card the value will be gift02:08:14
card so besides our default we have Visa02:08:18
MasterCard and gift02:08:20
card after our select element I'll02:08:23
create a02:08:24
paragraph the text on the paragraph will02:08:26
be payment then I'll display our payment02:08:29
stateful02:08:32
variable when I select Visa our payment02:08:35
is going to update with02:08:36
Visa Mastercard and gift02:08:40
card with use State I can even set an02:08:43
initial value I could set the initial02:08:45
value to be for example02:08:47
Visa02:08:49
Master02:08:50
Card or a gift02:08:53
card but I'll keep it as an empty string02:08:55
so we get that default text of Select an02:08:58
option the last form element I'll cover02:09:01
is radio buttons and these are going to02:09:03
be the most complicated we'll create a02:09:05
pair of two radio buttons for a delivery02:09:07
method either pickup or a delivery does02:09:11
somebody want to come into a store to02:09:12
pick up our package or is a driver going02:09:14
to take it to their02:09:15
residence I will create comp02:09:20
let's say02:09:21
shipping for the shipping method and a02:09:24
Setter function for set shipping equals02:09:29
use State for the time being I will set02:09:33
the initial state to be an empty02:09:35
string we'll create a Handler02:09:38
function function handle shipping02:09:43
change we have one parameter of02:09:46
event I will use that Setter function of02:09:49
set02:09:52
shipping access our event argument02:09:56
access its Target access its02:09:59
value within our HTML02:10:02
markup we're going to create a pair of02:10:04
radio buttons we'll create a label we02:10:07
need a pair of label02:10:09
elements the text on the first label02:10:11
will be pickup are we going to pick up02:10:14
our package from a store we'll create a02:10:16
second label I'll just copy what we have02:10:19
paste it the second label will be for a02:10:24
delivery within my label I'll create an02:10:27
input02:10:31
element I will set the type to equal02:10:36
radio I will set the value of this radio02:10:39
button to02:10:41
be02:10:46
pickup I'll place the these additional02:10:48
properties on a new line just for02:10:51
readability I will set the checked02:10:53
attribute equal to a JavaScript02:10:56
expression let's check to see if our02:10:59
shipping stateful variable is strictly02:11:03
equal to our value of02:11:06
pickup this will evaluate to be true or02:11:10
false if this expression is02:11:13
true then we'll trigger our onchange02:11:16
vent Handler and set it equal to a02:11:19
JavaScript function it's going to be a02:11:22
call back to handle shipping02:11:26
change let's copy this input element02:11:29
then within our second label paste02:11:32
it but we'll change our value to be pick02:11:35
up to02:11:38
delivery within our checked property02:11:40
check to see if shipping is strictly02:11:43
equal to02:11:44
delivery if this expression is true then02:11:47
checked will be true through this will02:11:49
trigger the onchange event02:11:51
handler just to reflect the change I'm02:11:53
going to add a paragraph02:11:55
element with text of02:11:58
shipping I will insert some02:12:01
JavaScript I will insert our shipping02:12:03
stateful02:12:05
variable I'm going to add a break after02:12:07
our first label just for readability I02:12:10
think that looks better if I were to02:12:12
select pickup the shipping method02:12:14
changes to pickup we're going to pick up02:12:16
our delivery from a nearby store02:12:19
if I change it to delivery the shipping02:12:21
method changes to delivery with the US02:12:24
state hook we can set an initial State02:12:28
let's assume that if somebody is02:12:29
ordering something from our site they02:12:31
will want it delivered I will set the02:12:34
initial state to be02:12:36
delivery and that did update but if02:12:39
somebody does want to pick it up they02:12:41
can easily just change that by selecting02:12:43
this radio button all right everybody so02:12:45
that is the onchange event handler it's02:12:47
used primarily with form elements02:12:50
including but not limited to input text02:12:53
area select and radio buttons onchange02:12:57
triggers a function every time the value02:12:59
of the input changes so for example if I02:13:02
were to type in my name into this input02:13:04
element that change is immediately going02:13:06
to be reflected in real time and well02:13:09
everybody that is the onchange vent02:13:10
Handler in02:13:15
react hey what's going on everybody in02:13:17
today video we're going to create a02:13:19
Color Picker program using react this02:13:21
serves as more of an exercise now that02:13:23
we know how the UST State Hook and the02:13:25
onchange event handlers work so let's02:13:28
get started all right let's begin02:13:29
everybody within our source folder we'll02:13:31
create a new file for a Color Picker02:13:35
component this will be a jsx file we02:13:38
will use function based components02:13:41
function Color Picker there are no02:13:45
parameters then let's be sure to export02:13:47
this export default Color02:13:51
Picker we need to return something for02:13:54
the time being I'm going to return a02:13:56
fragment just so that everything works02:13:59
going back to our app component we will02:14:02
import our Color Picker component from02:14:06
its02:14:09
location SLC colorpicker02:14:13
djsx then let's include one Color Picker02:14:16
component and that is all we need with02:14:19
the app component heading to the Color02:14:21
Picker component we will need to import02:14:23
the UST State hook import from react02:14:27
we'll use object destructuring just to02:14:30
get the UST State Hook from02:14:34
react within our Color Picker function02:14:37
at the top we'll use the UST State hook02:14:40
to create a stateful color02:14:42
variable const we're going to use array02:14:45
D structuring and create a color and a02:14:48
Setter function for that color we will02:14:51
use the use State02:14:53
hook for the color if you would like to02:14:56
set an initial color you can do that I02:14:58
recommend using hexadecimal values to02:15:01
keep it simple for example if you would02:15:03
like white that would be02:15:05
6fs personally I'm a fan of using hsl02:15:08
values for Hue saturation and lightness02:15:11
but that can get kind of complicated you02:15:14
would need to pass in a JavaScript02:15:15
object with those three properties we02:15:17
stick with heximal values just to keep02:15:19
it02:15:20
simple then we'll create our HTML02:15:22
elements So within the return statement02:15:25
I will create a div02:15:30
element this div element will have a02:15:32
class02:15:34
name of Color Picker02:15:39
container with react when using CSS I02:15:42
like to use a hyphenated naming02:15:43
convention this development will contain02:15:46
everything we need for our Color Picker02:15:48
component within this St elment I will02:15:50
create an H1 element for a heading The02:15:53
Heading will be Color02:15:56
Picker after this H1 element I will02:15:59
create a nested div02:16:01
element this nested div element will02:16:03
have a class name equal to02:16:08
color- display this is what's going to02:16:11
change color this02:16:13
development now I will set the style02:16:15
attribute equal to some Java script if I02:16:19
attempt to set the background02:16:21
color to our color02:16:25
variable well with any CSS properties in02:16:27
JavaScript we need to enclose them02:16:29
within an object so we will use a double02:16:32
set of curly braces and that would work02:16:35
if you're embedding some JavaScript and02:16:37
then you're changing some CSS properties02:16:40
you'll need to enclose those CSS02:16:41
properties within a JavaScript object02:16:44
within this Nesta div element we'll02:16:46
create a paragraph element ment that has02:16:49
text of selected02:16:52
color embed some JavaScript include our02:16:56
stateful color02:16:58
variable after this development I will02:17:01
create a02:17:02
label this label will have text of02:17:06
select a02:17:09
color I'll create an input02:17:12
element02:17:16
input02:17:18
the type attribute is going to be02:17:20
color we'll have an input element for a02:17:24
color the default is black I'll set the02:17:28
value equal02:17:29
to our state full color02:17:33
variable then to change the color I will02:17:36
set the onchange event handler equal to02:17:40
a call back to a02:17:42
function we will handle color change but02:17:47
we still need to to Define this function02:17:49
that's the last step in this02:17:51
component so we will create a function02:17:54
to handle color02:17:56
change there will be one parameter an02:18:00
event all we're going to do is use our02:18:02
Setter function for our color whichever02:18:06
color we02:18:07
select that's going to be its value02:18:09
either RGB hsl or02:18:13
hexadecimal we will access this02:18:16
event Target02:18:18
access its value set the color to02:18:21
whatever that value is so if I set the02:18:24
color to be I don't know blue well that02:18:29
color is going to change to be blue and02:18:32
that is everything we need for this02:18:33
component we haven't applied any CSS yet02:18:35
so it's not very impressive although it02:18:38
does have functionality so be sure to02:18:40
save everything we will go to our CSS02:18:44
stylesheet let's select the body of our02:18:46
document I will set the font family to02:18:50
be aial with a backup of s02:18:54
serif I will take our class of Color02:18:59
Picker02:19:01
container this is what contains02:19:04
everything this div02:19:07
element take our Color Picker container02:19:10
I will use02:19:11
flexbox because I like02:19:13
flexbox display02:19:16
Flex Flex02:19:18
direction will be a column right now02:19:20
it's a02:19:22
row and02:19:24
align items in the02:19:27
center much02:19:29
better let's take our H1 element that02:19:31
would be this heading we are selecting02:19:35
H1 let's add some margin of 5002:19:40
pixels and increase the font size to 302:19:46
r02:19:48
let's select our color display that02:19:49
would be this element right02:19:51
here that has a class of color-02:19:57
display I will set a width of 30002:20:02
pixels a height of 30002:20:06
pixels I'll use flex box for all the02:20:08
elements within display02:20:13
Flex02:20:14
justify02:20:16
content02:20:17
in the02:20:19
center then02:20:21
align items02:20:24
Center I'll add a border around this02:20:28
element border 5 pixel02:20:33
solid I'll use hsl for the02:20:37
color let's pick something light gray02:20:41
I'll set the lightness to be02:20:43
80% then I'll round the corners with02:20:45
border02:20:46
radius02:20:48
border02:20:49
radius 2502:20:52
pixels I'll add a little bit of margin02:20:54
to the bottom margin bottom 2502:20:58
pixels so when we select a color it's02:21:02
going to02:21:04
change I'm going to add a transition02:21:06
effect so the transition is a little02:21:09
more smooth I will set the transition02:21:14
property after a quarter of a second 0 202:21:17
5 Seconds we will ease this02:21:20
transition so this animation should be02:21:23
more02:21:30
smooth let's select this paragraph02:21:32
element and style it take our color02:21:35
display02:21:36
class access the paragraph element02:21:39
within for the color I'll use hsl02:21:42
values 002:21:46
0% then02:21:48
20% this will make the text a dark gray02:21:51
color although it's kind of small you02:21:53
can't really see02:21:54
it I'll increase the font02:21:56
size to 202:22:00
RM then text align02:22:04
Center let's work on the text of the02:22:07
label we're going to select our label02:22:10
increase the font size to 1.502:22:14
RM let's set the font weight to be02:22:20
bold and add a little bit of margin to02:22:22
the02:22:23
bottom margin bottom 1002:22:27
pixels the last thing we need to do is02:22:29
change this input element so it's a02:22:31
little bigger I will select our input02:22:34
element but I don't want to select all02:22:36
input elements I'll use an attribute02:22:38
selector select all input elements that02:22:40
have a type of02:22:43
color so that'll be just this02:22:46
one I will set a width of 7502:22:51
pixels a height of 5002:22:55
pixels some padding of 502:23:00
pixels I'll set a border radius to round02:23:02
the02:23:03
corners of 1002:23:06
pixels then set the border to be 302:23:09
pixels solid and for the color I'll use02:23:13
hsl zero for the Hue zero for the02:23:16
saturation02:23:18
80% for the lightness that should give02:23:20
us a thick gray border all right02:23:22
everybody so that is a Color Picker02:23:24
program you can create as an exercise02:23:26
for02:23:30
react yo what's going on everybody so in02:23:33
today's video I got to explain updator02:23:35
functions in react an updator function02:23:38
is a function passed as an argument to02:23:41
set State usually for example I have a02:23:44
Setter function for a year if I need to02:23:46
increment my year by one I would just02:23:48
add plus one to year this does in fact02:23:51
work but a better practice would be to02:23:54
pass in an updator function as an02:23:57
argument usually this is represented as02:24:00
an arrow function by passing in an02:24:03
updater function this allows for safe02:24:05
updates based on the previous state you02:24:08
typically see updator functions used02:24:10
with multiple State updates and02:24:12
asynchronous functions it is a good02:24:15
practice to use updator functions when02:24:17
ever possible so in this basic example02:24:20
I've made a counter program we can02:24:22
increment count decrement count and02:24:25
reset count within each of these02:24:28
functions I'm taking my state variable02:24:30
of count adding + one minus one or set02:24:34
and count to equal zero in the case of02:24:36
reset I don't want to increment once I02:24:39
would like to increment twice I will02:24:42
take set count update the state again02:24:45
using count plus one this is different02:24:47
for me adding two to count I want to02:24:50
increment count by one twice I will set02:24:53
the state of count twice count + one02:24:56
then count plus one if I attempt to run02:24:59
this I will increment count twice with02:25:02
every button click however our count02:25:05
only increases by one during each button02:25:07
click I'm very persistent let's try and02:25:10
set count again because you know the02:25:13
first two times didn't work during each02:25:16
button click02:25:17
I would like to increment count by one02:25:19
three times but we're still only02:25:21
updating by one still here's the reason02:25:23
why we're using the current state of02:25:26
count to calculate the next state after02:25:29
using a Setter function this doesn't02:25:31
trigger an update react batches together02:25:34
updates for performance reasons you02:25:36
would imagine that after these functions02:25:38
we would02:25:42
update but that's not necessarily the02:25:45
case using react we batch together the02:25:48
State updates for performance reasons in02:25:50
reality it's going to look something02:25:52
like02:25:53
this we're taking count which is zero02:25:56
adding one to it count didn't update yet02:25:59
it's still zero add one to it take count02:26:02
which is still zero because we didn't02:26:03
update add one to it in reality what02:26:06
we're doing is setting count to be one02:26:09
three separate times and then updating02:26:12
this would be similar to me hitting the02:26:13
refresh button on my web browser a bunch02:26:15
of times02:26:17
we've sent a bunch of commands to02:26:18
refresh the web browser but we may only02:26:21
end up refreshing once not each time I02:26:23
click the button that's because our web02:26:25
browser has its own event Loop cycle02:26:28
that's a similar way of thinking about02:26:29
it if for some reason you need to use02:26:32
multiple State updates you'll want to02:26:34
use an updator function here's02:26:37
how we're going to write a function our02:26:40
function has one02:26:41
parameter count in this case Arrow then02:26:45
do this let's write an arrow function02:26:48
for each set02:26:53
count so this will work however you'll02:26:56
want to rename count to be something02:26:58
else we're going to be working with the02:27:00
previous state of count not the current02:27:03
state we're using the previous state of02:27:05
count to calculate the next state02:27:08
according to the react documents you'll02:27:10
want to rename count as either something02:27:12
like previous02:27:15
count02:27:20
such as this or you can take the first02:27:23
letter of the state variable in this02:27:25
case02:27:30
C I find taking the first letter of the02:27:33
state variable much more easier to read02:27:35
it's less ver Bose so this will work02:27:37
then when I press the increment button02:27:40
we're updating the state three separate02:27:42
times C represents the previous count02:27:46
not the current count with our updator02:27:48
function we're taking the pending state02:27:51
to calculate the next state not the02:27:54
current state we don't update until02:27:57
later when we pass in an updator02:27:59
function we're adding all of these02:28:01
updator functions to a q a q is a type02:28:04
of data structure a q is similar to a02:28:07
bunch of people waiting in line it's02:28:09
first come first serve the first person02:28:11
in line is going to be helped first so02:28:13
during the next render it will call all02:28:16
of these functions in order rather than02:28:18
batch them all together when using02:28:21
multiple State updates you'll want to be02:28:23
sure to use updator functions it is good02:28:25
practice whenever possible to use02:28:26
updator functions just for consistency02:28:29
even if you're only going to update the02:28:31
state02:28:34
once it would still be good practice to02:28:36
use an updator function it will help02:28:38
future proof your code in case you ever02:28:40
need to update the state02:28:43
again so now let's take our decrement02:28:46
function currently we're updating the02:28:48
current state of count not the previous02:28:50
state let's begin by setting up a02:28:52
parameter of count Arrow then do this02:28:57
but we'll want to be sure to rename02:28:58
count just to show that we're working02:29:00
with the previous state not the current02:29:02
state let's rename count as the first02:29:05
letter of the state variable which is c02:29:08
c arrow take C minus 1 let's do this two02:29:12
additional times now when we increment02:29:15
we will increment 3 separate times and02:29:18
we can decrement three separate times02:29:21
now last we have02:29:22
reset with the setter function we're not02:29:25
dependent on the previous state all02:29:27
we're doing is setting count to be zero02:29:30
if I was going to use an updator02:29:31
function it would look like this C Arrow02:29:35
C equals z we really don't care about02:29:38
the previous state this would still02:29:41
technically work we don't really need02:29:43
our count for anything we're setting c02:29:45
equal to zero because by passing in zero02:29:48
we're already setting it to be zero in02:29:50
this specific example an updator02:29:52
function wouldn't be necessary because02:29:54
we don't need the previous state all02:29:56
right everybody so those are updator02:29:57
functions it's a function passed as an02:30:00
argument to set State usually when02:30:04
updating a state variable you'll pass in02:30:06
an arrow function if we were working02:30:08
with a state variable of year I would02:30:10
pass in an arrow function that looked02:30:11
like this we have a parameter of Y Arrow02:30:15
let's take y + 1 if I was incrementing02:30:19
our year by one in this case by using02:30:21
updator functions they allow for safe02:30:23
updates based on the previous state not02:30:26
the current state this allows for02:30:28
multiple State updates and is used with02:30:31
asynchronous functions it's a good02:30:33
practice to use updator functions02:30:34
whenever possible we will be using02:30:36
updator functions in the future and well02:30:38
everybody those are updator functions in02:30:44
react hey everybody so in today's video02:30:47
I'm going to show you how we can update02:30:49
the state of objects be sure that you're02:30:51
importing the UST State Hook from react02:30:53
so we'll Begin by creating a constant02:30:56
use array D structuring our object will02:30:59
be a state variable of car then we need02:31:02
a Setter variable for this car set car02:31:06
equals the use State hook you can set02:31:10
the initial state with you state so what02:31:12
we're going to do in this lesson is02:31:14
create a JavaScript object we're going02:31:16
to create your favorite car with three02:31:18
properties a02:31:20
year a make who manufactured the car and02:31:24
a model so pick a car that you like I02:31:28
like a02:31:31
202402:31:33
Ford02:31:35
Mustang if you would like although not02:31:37
necessary you can put each of these02:31:39
properties on a new line for02:31:42
readability personally I find that02:31:44
easier to read so car is going to be an02:31:47
object with these three properties but02:31:50
later on we're going to update these02:31:51
properties with a few text boxes within02:31:54
our return statement we will create a02:31:56
development to wrap02:31:59
everything I will create a paragraph02:32:01
with some02:32:02
text your favorite car is so we have02:32:07
that text currently We'll add our cars02:32:11
year followed by The Cars02:32:15
make then the cars02:32:19
model so for me my paragraph States your02:32:23
favorite car is a 2024 Ford Mustang02:32:28
after our paragraph element we're going02:32:30
to create three input elements one for02:32:33
year make and model so let's do that I02:32:36
will create an input02:32:39
element the type of this input element02:32:42
will be number for the year so we should02:32:45
have some arrows on this input element02:32:47
to increment or decrement I will set the02:32:50
initial value to equal the year of our02:32:55
car car02:32:57
doe I'll add a break02:33:03
afterwards let's copy this input element02:33:05
paste it twice the second input element02:33:08
is going to have a type of text for a02:33:12
string the initial value will be the02:33:15
make of our car02:33:16
in my case Ford the third input element02:33:19
will have type text the value will be02:33:23
model I have a 2024 Ford Mustang when I02:33:27
interact with these input elements I02:33:29
would like to change the property of my02:33:31
object we'll need to use the onchange02:33:34
event handler the onchange event handler02:33:36
is going to accept a call back to some02:33:39
functions function handle year change02:33:44
there will be one parameter02:33:46
an02:33:47
event the event object is going to be02:33:50
provided to us through the onchange02:33:51
event handler when we add that in in a02:33:54
moment let's copy this function we'll02:33:56
fill it in02:33:58
later then we will have a function to02:34:01
handle make02:34:02
change then handle model02:34:05
change we have our three functions to02:34:08
change the year the make and the model02:34:10
properties of our object with our input02:34:13
elements we will set the on change event02:34:16
handler equal to a call back a call back02:34:20
to handle year02:34:21
change so let's set the onchange event02:34:24
handler to the other two input02:34:27
elements onchange handle make change02:34:32
onchange handle model02:34:36
change the last thing we got to do is02:34:38
finish filling in our functions we'll02:34:40
begin with handle year change if I want02:34:43
to change the state of my car object I02:34:46
will use the setter function that's02:34:48
provided to us with use02:34:50
State set car set of02:34:53
parenthesis we will be using an updator02:34:55
function but there's something I want to02:34:57
explain first we're going to set our car02:34:59
to be a JavaScript object if I were to02:35:02
take the year and set it equal to02:35:05
2025 this is what happens if I interact02:35:07
with this input element let's say I02:35:10
decrease this input element well the02:35:12
value changes to 2025 that worked but02:35:16
the make and the model of our car02:35:17
disappeared these properties no longer02:35:19
exist what we've ended up doing is02:35:22
replacing the initial object that has02:35:25
these three properties with a new object02:35:27
that has this one property of year we02:35:31
need some way to retain the make and02:35:32
model of our car the previous properties02:35:34
that we're not updating that's why we're02:35:37
going to precede this property to be02:35:39
changed with the spread operator of our02:35:41
car when we update the state of our car02:35:44
we're going to be creating a new new02:35:46
object spread all of the current02:35:48
properties of our car and add a year02:35:51
after using the spread operator it's02:35:53
going to look like02:36:00
this we'll have a year make model and02:36:03
year again if you have an object with02:36:05
two properties with the same name you'll02:36:07
end up using the later one and02:36:09
disregarding the first JavaScript02:36:11
doesn't allow for duplicate Keys that's02:36:14
why we're going to be using the spread02:36:15
operator on our car object than updating02:36:18
the year that should allow us to retain02:36:20
the previous properties if I were to02:36:22
interact with the year we'll retain the02:36:25
previous properties they won't change02:36:28
currently the setter is only set to02:36:30
change the year to 2025 we're going to02:36:32
access the event object provided to us02:36:34
from the onchange event handler behind02:36:36
the scenes I will change the year to be02:36:39
access our event object access its02:36:42
Target access its02:36:44
value when I interact with this input02:36:47
element the year property is going to02:36:49
change02:36:50
accordingly but a better practice with02:36:52
use state would be to use an updator02:36:54
function which we learned about in the02:36:56
last video we don't want to modify the02:36:59
current state of car but rather make a02:37:01
reference to the previous state this02:37:03
allows for safe updates we're going to02:37:05
turn this object to be part of an arrow02:37:07
function so let's create our Arrow02:37:09
function we will take our car Arrow do02:37:13
this so with an arrow function if you02:37:16
have a set of curly braces after the02:37:17
arrow function JavaScript thinks you're02:37:20
trying to write a multi-line statement02:37:22
but that's not the case we're trying to02:37:23
create a JavaScript object what you02:37:26
could do is surround your set of curly02:37:27
braces with a set of02:37:29
parentheses that will allow you to02:37:31
create an object within an arrow02:37:33
function since we're working with the02:37:35
previous state of car and not the02:37:37
current state we would want to name this02:37:39
to something else one common naming02:37:40
convention is to take the first letter02:37:43
of the state variable and use that to02:37:45
indicate that this is the previous state02:37:48
so c will be our parameter we will use02:37:51
the spread operator on the previous02:37:53
state of car represented as02:37:55
C and that should work this allows for02:37:58
safe updates especially if you're02:38:00
updating the state of your car more than02:38:02
one time within a function see my video02:38:05
on updator functions if you'd like to02:38:06
learn more about that all right then we02:38:08
have to handle make change we will use02:38:12
our setter set car we're going to be02:38:15
replacing the initial object with a new02:38:17
object we will use the spread operator02:38:20
on our02:38:21
car access the make set it equal to02:38:25
access our event parameter that's02:38:27
provided to us access its Target access02:38:31
its value we'll upgrade the statement so02:38:33
that it's an updater function let's take02:38:35
our car Arrow do02:38:40
this then we will rename car as C to02:38:43
indicate that we're working with the02:38:45
previous state of car not the current02:38:48
state I can change my year and I can02:38:51
change the02:38:52
make and that should02:38:54
update we have one last function to work02:38:57
with handle model change again set02:39:01
car we're creating a JavaScript object02:39:05
use the spread operator on our card to02:39:07
spread the properties so we don't lose02:39:09
them update the model with our access02:39:13
our event access its Target access its02:39:16
value then we'll change this to be an02:39:18
updator function we have parameter of02:39:21
car Arrow do this since we're creating a02:39:24
JavaScript object within an arrow02:39:26
function we need to surround it with a02:39:28
set of02:39:29
parentheses and then rename car as C to02:39:33
indicate we're working with the previous02:39:34
state and that should work I will change02:39:38
the02:39:39
year the02:39:41
make and the02:39:44
model02:39:46
all right everybody so that is how we02:39:47
can update the state of an object using02:39:54
react hey what's going on everybody in02:39:56
today's video I'm going to show you how02:39:58
we can update the state of an array02:39:59
using react all right everybody here's02:40:02
how we can update the state of an array02:40:03
using react be sure to import the UST02:40:05
State Hook from react we'll Begin by02:40:08
creating a constant use array D02:40:10
structuring the name of our array will02:40:13
be Foods because I'm hungry like you ual02:40:16
we'll need a Setter function for the02:40:17
state variable set Foods equals use02:40:23
State we will set the initial state to02:40:26
be an empty array if you would like to02:40:29
include some initial elements you can02:40:30
put that within here such as an02:40:33
apple an orange and a02:40:38
banana we'll create two functions a02:40:40
function to add an element to this array02:40:43
and another function to remove an02:40:44
element we'll create a function02:40:47
to handle add02:40:51
food there are no02:40:53
parameters and we'll declare a function02:40:56
to handle remove02:40:59
food we'll fill these in later within02:41:02
our return statement let's wrap02:41:04
everything within a div02:41:08
element I will create an H202:41:13
heading that says list of02:41:17
food we'll create an unordered list with02:41:20
a pair of UL tags within my unordered02:41:23
list we will embed some JavaScript code02:41:26
let's take our array of02:41:28
foods use the built-in map method the02:41:31
map method will return a new array what02:41:33
would we like to do with all of these02:41:35
elements of our array well we're02:41:37
provided with an element which we will02:41:39
name as food and an index these are the02:41:43
parameters that we'll receive02:41:44
automatically02:41:45
we'll write an arrow function to do02:41:47
something I will create a list item02:41:50
element we have three already because02:41:53
our array initially has three elements02:41:55
an apple orange and a banana if I were02:41:57
to go to my02:41:59
console react wants us to add a key for02:42:02
each list item so it can keep track of02:42:05
them so with the opening list item tag I02:42:08
will set the key attribute to equal our02:42:12
index within each list item I I will add02:42:16
the current food element and let's see02:42:19
if this works yes it does Apple orange02:42:22
banana if I were to change the initial02:42:25
values of this array within new state02:42:27
that should be02:42:28
reflected after the unordered list we'll02:42:31
create an input element to enter in the02:42:32
names of some02:42:34
food I will create an input02:42:37
element the type the type will be text02:42:41
because we're adding a02:42:42
string I will set the ID equal to be02:42:47
food02:42:48
input I'll add a placeholder too I will02:42:52
set the placeholder attribute to be02:42:55
enter food02:42:59
name after this input element let's02:43:02
create a02:43:04
button the button will have text of add02:43:09
food with this button I will set the02:43:12
onclick event handler equal to to a call02:43:16
back to handle ad food let's work on the02:43:19
handle ad food function we need to get02:43:21
the value found within this input02:43:23
element if I were to type coconut then02:43:26
press the button I need to get this02:43:28
value but first we'll select this input02:43:30
element to access it I will create a02:43:33
constant of new food new food will be a02:43:37
string it's going to contain this value02:43:40
I will access this element this input02:43:43
element document. get element by ID the02:43:48
ID that I'm getting is food02:43:51
input I would just like the value not02:43:54
the entire02:43:55
element so if I were to type in coconut02:43:58
press the button new food is going to be02:44:00
a string of coconut then after pressing02:44:03
the button I'm going to reset this input02:44:06
element so it clears like this I can do02:44:09
that by copying this line of code where02:44:11
we access the value set it equal to be02:44:13
an empty string so if I were to type in02:44:16
something it should reset after hitting02:44:19
the button which it does let's try a02:44:22
mango and that resets too so we have the02:44:26
string that contains our new02:44:28
food we'll use our Setter to update our02:44:34
array if I were to pass in a new array02:44:37
then add new02:44:39
food this is what happens I will attempt02:44:42
to add a coconut add food our initial02:44:45
values of Apple orange and banana02:44:47
they're all gone we've replaced the02:44:50
initial array with the new one that02:44:52
contains only one string element our new02:44:54
food that we're trying to add we need to02:44:57
copy over the previous elements of this02:45:00
initial state within this new array when02:45:02
setting the state we will use the spread02:45:05
operator and access our array of02:45:08
foods the spread operator when used on02:45:10
an array will spread all of these02:45:12
elements into separate values it'll look02:45:15
something like02:45:20
this we're replacing the initial state02:45:22
of this array with a new one so we need02:45:25
to copy the old elements over so this02:45:28
does work I will attempt to add a02:45:30
coconut and a main02:45:33
go however it would be best practice if02:45:36
we were to use an updator function we02:45:38
don't want to directly work with the02:45:40
current state of a state variable rather02:45:43
the previous state I will will upgrade02:45:45
the statement into an updator function02:45:48
we will take Foods Arrow do this you02:45:52
don't want to use the same name as the02:45:54
current state variable a common naming02:45:56
convention is to take the first letter02:45:58
of your state variable and use that as a02:46:01
parameter foods will become f for the02:46:04
previous state we will use the spread02:46:06
operator on the previous state of foods02:46:10
and that should work we have an apple02:46:12
orange banana we can add a coconut02:46:16
or a02:46:18
Maino now we're going to complete the02:46:20
handle remove food function there's one02:46:23
or two things I need to change make sure02:46:25
we use camel case naming convention I02:46:28
accidentally made the r lowercase02:46:30
there's going to be one parameter an02:46:32
index number because we'll be working02:46:35
with the index numbers of these list02:46:37
item02:46:38
elements within our unordered list we'll02:46:41
be working with the opening list item02:46:42
tag just for readability I'm going to02:46:45
put this on a new02:46:49
line like so within the opening list02:46:52
item tag we will set the onclick event02:46:55
handler equal to a callback a call back02:46:58
to the handle remove food02:47:01
function this function needs a parameter02:47:04
in order for us to pass in a parameter02:47:05
to the handle remove food callback we02:47:08
need to convert this to an arrow02:47:10
function we'll create an arrow with no02:47:12
parameters Arrow do this02:47:16
within the map method we're provided02:47:17
with an index number we'll be passing in02:47:19
that index number to this function so we02:47:22
can work with it within the handle02:47:24
remove food function we will use the02:47:27
setter for our02:47:28
Foods within the setter we'll use the02:47:31
filter method we will take our Foods use02:47:35
the built-in filter method of02:47:37
arrays with the filter method of an02:47:39
array we are02:47:41
provided with an element and an index02:47:44
number for that element however we do02:47:47
have a naming conflict we've already02:47:49
stated that the parameter of this02:47:51
function is going to be index just to02:47:53
differentiate it I'm going to rename02:47:55
index as I so within the filter function02:47:58
we will use an arrow function to do02:48:00
something we're going to filter all02:48:03
elements where the current index02:48:06
represented as I does not equal the02:48:09
index that we02:48:10
receive so if you take a look our02:48:13
element parameter is provided to us but02:48:15
we're not using it you can see that it's02:48:17
kind of grayed out we're going to02:48:19
replace this with an underscore using an02:48:21
underscore for a parameter is a02:48:23
convention to indicate that the02:48:25
parameter being passed to the function02:48:27
is ignored so with parameters if you see02:48:29
an underscore that means ignore it all02:48:32
right and this should02:48:33
work I will add a02:48:36
coconut a02:48:38
mango then I can click on one of these02:48:40
list items to remove it let's remove our02:48:43
banana our Apple02:48:45
and the mango all right everybody so02:48:48
that is how we can update the state of02:48:49
arrays using02:48:54
react hey everybody in today's video I'm02:48:57
going to show you how we can update the02:48:59
state of an array of objects if you're02:49:01
able to comprehend this lesson and02:49:02
you've watched previous topics we'll be02:49:04
ready to make a few projects and react02:49:07
so let's get started like we've done in02:49:09
Prior lessons be sure to import the UST02:49:11
State hook in this topic we're not going02:49:14
to create one state variable but02:49:17
four const cars cars is going to be an02:49:21
array of objects then we need a Setter02:49:24
for our array of cars equals use02:49:29
state I'm going to set the initial state02:49:32
to be an empty02:49:33
array then we will create a state02:49:36
variable for the cars year and a Setter02:49:40
for car02:49:42
year use state02:49:46
if we're going to be adding car objects02:49:48
to make it easier for me I could set the02:49:50
initial state to be a year like 202402:49:54
something that's kind of recent but I02:49:56
think it would be a lot cooler if we use02:49:59
JavaScript to get the current year right02:50:01
now I'm filming this video in December02:50:03
2023 for the initial state I'm going to02:50:06
create a new date object then get the02:50:10
full year method for me this is going to02:50:14
turn02:50:15
2023 but depending on when you're02:50:17
watching this video it might be later02:50:20
we'll create a state variable for our02:50:22
cars make who manufactured the02:50:25
car set car make equals use State I will02:50:32
set the initial state to be an empty02:50:34
string then we need the model I'll just02:50:37
copy this because I'm lazy change make02:50:39
to be02:50:41
model set car model02:50:45
the initial State for the model will be02:50:46
a string all right now we're going to02:50:49
declare all the functions we'll need02:50:51
throughout this02:50:52
application we'll create a function to02:50:54
add a car remove a car change the year02:50:57
change the make change the model five02:51:00
functions total we'll declare a function02:51:04
to handle add02:51:09
car then a function to handle remove car02:51:14
are there is one parameter an02:51:18
index what is the index of the object02:51:21
that we're removing from this02:51:23
array we need a Handler for year make02:51:26
and02:51:27
model function02:51:29
handle year02:51:32
change there is one parameter an event02:51:35
that will be provided to us through the02:51:37
onchange event handler we need a02:51:40
function to handle make change handle02:51:44
make02:51:46
change and handle model02:51:49
change so we should have five functions02:51:52
total add car remove car change the year02:51:56
change the make change the02:51:58
model let's create our HTML elements So02:52:02
within our return statement I will02:52:04
create a div to enclose02:52:07
everything let's create an H2 element02:52:10
for a heading list of car02:52:16
objects afterwards I will create an02:52:18
unordered02:52:19
list we will populate this unordered02:52:22
list02:52:25
later we will create three input02:52:27
elements for the year the make and the02:52:30
model of our car that we're trying to02:52:31
add we will begin with input that has a02:52:36
type of02:52:39
number I will set the value to equal02:52:44
this state of car year and for me that's02:52:49
2023 that's because I'm creating a date02:52:51
object of the current date and time then02:52:54
returning the year depending on what02:52:56
year you're watching this it might be02:52:58
different I will set the on change event02:53:01
handler equal to a call back to handle02:53:05
year02:53:06
change I'll add a break02:53:11
afterwards okay let's copy this input02:53:14
element including the break the type of02:53:16
the second input element will be02:53:18
text the value will be the cars make who02:53:23
made the car the onchange event handler02:53:25
will be a call back to handle make02:53:28
change we should add a placeholder to02:53:30
tell the user what we want them to type02:53:32
in it's not very apparent I'll put this02:53:35
on a new line for readability I will set02:53:37
the placeholder attribute equal02:53:40
to enter car make02:53:45
let's copy this element paste it for the02:53:48
third input element the value will be02:53:51
car model the onchange event handler02:53:54
will be a call back to handle model02:53:57
change the placeholder will be enter car02:54:01
model then we'll create a button to02:54:03
submit our car02:54:05
object02:54:07
button the text on the button will be02:54:10
add02:54:11
car we will set the on click event02:54:15
handler equal to handle02:54:21
Adar all right now we have to fill in02:54:23
these02:54:24
functions we'll begin with handle year02:54:26
change because it's easy we will use the02:54:29
setter for set car02:54:32
Year we will pass in Access our event02:54:36
object that's provided to us access its02:54:39
Target access its02:54:41
value then we have to do this with make02:54:43
and02:54:45
model set car02:54:47
make access the value of the target of02:54:50
the event pass it as an02:54:53
argument set car02:54:56
model again take our event access its02:54:59
Target access its value so now we should02:55:03
be able to update these values let's try02:55:10
it when I click on the button I would02:55:13
like to add this object to my array of02:55:16
objects within our handle Adar function02:55:19
we have a few things to write it's not02:55:21
as complicated as what you think it02:55:22
might be using these State variables of02:55:25
year making model we will create a new02:55:27
car const new car equals a JavaScript02:55:33
object with these properties the year02:55:36
will equal the current state of car02:55:40
year the make will equal the current02:55:43
state of of car make the model will02:55:46
equal the current state of car model02:55:50
then just for readability I'm going to02:55:51
put all these properties on a new line02:55:53
not necessary but I find it easier to02:55:55
read we will use the setter for our02:55:58
array of car02:56:01
objects we will use an updator function02:56:04
we will take02:56:05
cars Arrow create a new array use the02:56:10
spread operator on cars we need to copy02:56:14
the previous elements over to the new02:56:16
array we don't want to lose them then we02:56:18
will add a new element our new car02:56:22
object so we don't want to use the02:56:24
current state of cars but rather the02:56:27
previous state with this updator02:56:29
function a common naming convention for02:56:31
your parameter is to use the first02:56:33
letter of that state variable let's02:56:36
rename cars as02:56:38
C so what we're going to do now is go to02:56:42
our unordered list we need we need to02:56:44
populate it with list items I will embed02:56:46
some JavaScript take our array of cars02:56:50
use the built-in map method to return a02:56:52
new array we're provided with two02:56:55
arguments an element and an index with02:56:58
the map method but I'm going to rename02:57:01
element as car so it's more02:57:03
understandable what would we like to do02:57:06
I'll use an arrow function we will02:57:09
return a list item element and for02:57:12
readability I'm just going to place02:57:13
these on a new02:57:14
line react wants us to add a key to each02:57:18
list item element so let's take care of02:57:20
that I will set the key of each list02:57:23
item element to be our index that's02:57:26
provided to us within each list item02:57:29
element I will display the cars year02:57:33
followed by The Cars make and the cars02:57:38
model all right let's see if this works02:57:42
let's add a 2023 Ford Mustang and that02:57:47
worked how about a02:57:49
202402:57:51
Chevrolet02:57:53
Corvette and a02:57:56
2022 Dodge02:58:01
Challenger one thing I'm going to add to02:58:03
the handle Adar function after02:58:06
submitting a car I would like to reset02:58:08
these02:58:09
values at the end of this function let's02:58:12
use the setters02:58:14
I will set the car year when we're done02:58:16
with it to be the current year we'll02:58:19
create a new date object get the F year02:58:22
update the state to whatever value is02:58:24
returned we'll use the setter for the02:58:27
car make and reset it to be an empty02:58:29
string same thing with the car02:58:36
model all right let's see if this resets02:58:40
2023 Ford Mustang and it02:58:44
does02:58:47
202502:58:49
Chevrolet02:58:52
Camaro and that does reset you can see02:58:55
that my year went back to 2023 even02:58:58
though I adjusted it to 2025 the make02:59:00
and model were both replaced with empty02:59:02
strings now I would like to remove a car02:59:05
when I click on one of these list item02:59:07
elements we'll make one change to the02:59:10
opening list item tag I will set the02:59:14
unclick event handler to a call back to02:59:18
handle remove02:59:21
car we do have to pass in an argument02:59:23
though to this function we have to pass02:59:26
in an index what is the index of the car02:59:29
we're trying to02:59:30
remove if I attempt to pass in an02:59:33
argument we will call this function02:59:35
right away we will convert this call02:59:37
back to an arrow02:59:39
function that has no02:59:42
parameters02:59:44
So within the handle remove car function02:59:47
there's not a lot to write we will use02:59:50
the setter for our02:59:54
cars we'll use an updator function we02:59:57
don't want to use cars but we'll use the02:59:59
first letter to indicate we're working03:00:00
with the previous state03:00:03
arrow take the previous state of our03:00:05
array of cars represented as C use the03:00:08
built-in filter method we will filter03:00:11
any cars that don't meet a certain03:00:12
criteria the filter method provides us03:00:16
with an element and an index but we do03:00:19
have a naming conflict we already have a03:00:21
parameter with the name of index let's03:00:23
rename the index of each element within03:00:26
our array as03:00:28
I then do this with an arrow function03:00:31
we'll write our condition check to see03:00:34
if the index of the current element I is03:00:38
not strictly equal03:00:40
to the index we would like to remove03:00:44
we'll filter out that element when we03:00:46
create a new array so we're not working03:00:48
with the current element even though03:00:50
it's provided to us so what people do as03:00:53
a convention if you have a parameter03:00:54
you're not using people will change the03:00:56
name of that parameter to be an03:00:58
underscore that tells other people to03:01:00
ignore this parameter and that should03:01:02
work let's run and test everything let's03:01:05
add a 2023 forward Mustang but feel free03:01:08
to pick some different03:01:10
cars03:01:11
2024 shev roll03:01:17
Corvette03:01:20
202203:01:21
Dodge03:01:23
Challenger and I should be able to03:01:24
remove a car when I click on it that03:01:26
list item element our Corvette is gone03:01:30
our Mustang and our challenger all right03:01:33
everybody so that is how to create an03:01:35
array of objects and update their state03:01:37
using03:01:41
react hey everybody in today's video I'm03:01:44
going to walk you through creating a03:01:45
to-do list app using react so sit back03:01:48
relax and enjoy the03:01:52
show all right let's do this everybody03:01:54
we'll need to create a new jsx file03:01:56
going to our source folder we will03:01:58
rightclick new file this component will03:02:00
be named too list.03:02:04
jsx this will be a function-based03:02:07
component function to do list no03:02:11
parameters then let's be sure to export03:02:13
it because because if I don't do it now03:02:14
I'm going to forget export default to do03:02:18
list we will be using the use State hook03:02:21
we should import that03:02:24
import react use object D structuring I03:02:28
would like just the use State Hook from03:02:31
its location of03:02:33
react we do need to return something for03:02:36
now we're just going to return a03:02:39
fragment going back to our app component03:02:41
we need to import our to-do list03:02:43
component03:02:44
component import to-do list from its03:02:48
relative file path SL too list.03:02:53
jsx we will return one to-do list03:02:57
component and we are ready to move on03:03:00
within our to-do list component we will03:03:02
have two State variables const tasks03:03:06
tasks will be an array of strings we03:03:08
need a Setter function for tasks set03:03:11
tasks equals the use State hook the03:03:16
initial state of tasks is going to be an03:03:18
empty array but eventually we're goingDescription:
This is a beginners React JS course that should be enough to get you started using the React Library. There are still many more hooks and concepts that are beyond the scope of the beginner level. This video should at least give you a solid foundation. 1. 00:00:00 React tutorial for beginners ⚛️ 2. 00:20:26 card components 🃏 3. 00:32:24 add CSS styles 🎨 4. 00:40:40 props📧 5. 00:52:49 conditional rendering ❓ 6. 01:03:04 render lists 📃 7. 01:29:43 click events 👆 8. 01:42:04 useState() hook 🎣 9. 01:58:36 onChange event handler 🚦 10. 02:13:16 color picker app 🖌 11. 02:23:31 updater functions 🔄 12. 02:30:45 update OBJECTS in state 🚗 13. 02:39:55 update ARRAYS in state 🍎 14. 02:48:55 update ARRAY of OBJECTS in state 🚘 15. 03:01:42 to-do list app ☝ 16. 03:24:17 useEffect() hook 🌟 17. 03:44:08 digital clock app 🕒 18. 04:00:08 useContext() hook 🧗♂️ 19. 04:11:44 useRef() hook 🗳️ 20. 04:23:01 stopwatch app ⏱ Copyright Disclaimer: This video is the intellectual property of Bro Code. All rights reserved. No part of this video may be reproduced, distributed, or transmitted in any form or by any means, including but not limited to recording, uploading, or other electronic or mechanical methods, without my written permission, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law.
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 Full Course for free ⚛️ (2024)" 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 Full Course for free ⚛️ (2024)" 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 Full Course for free ⚛️ (2024)" 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 Full Course for free ⚛️ (2024)" 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 Full Course for free ⚛️ (2024)"?
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 Full Course for free ⚛️ (2024)"?
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.