User: Generate exactly 5 technical multiple-choice quiz questions no more, no less from this transcript about language learning and directions:

[Music]
welcome to the ultimate react course in
this course you will learn everything
you need to know about react from the
basics to more advanced concepts so by
the end of the course you'll be able to
confidently build fast and scalable apps
with react if you are looking for a
comprehensive easy to follow
well-organized and practical course that
takes you from Zero to Hero this is the
right react course for you you won't
need any prior knowledge of react to get
started everything you need to know is
right here so you won't need to jump
back and forth between random tutorials
now unlike other courses we won't be
building a dummy App instead we'll be
building and deploying a beautiful
production grade app for discovering
video games this app has all the
features and UI patterns you would
expect from a modern application we can
toggle within the dark and light modes
we can search for games filter them by
genre as well as platform now as we
change filters the page title gets
updated dynamically we can also sort
games and here we see loading skeletons
while games are being fetched from the
back end and that's just the start in
the next part which I'm currently
working on we'll dive into advanced
topics like routing State Management
fetching data with react query
authentication error handling
performance optimization and much much
more I've put my heart and soul into
creating this course and I'm confident
that it's going to be a game changer for
your react skills I'm <PRESIDIO_ANONYMIZED_PERSON> I'm
a software engineer with over 20 years
of experience and I've taught millions
of people how to code and become
professional software Engineers through
my YouTube channel and online school
codebitmarsh.com if you're new here make
sure to subscribe as I upload new videos
all the time so if you're ready to
master react and build front-end apps
with confidence let's jump in and get
started
[Music]
thank you
[Music]
before we get started let's talk about
what you will need to know to take this
course first things first you don't need
to know react to take this course
however you should have a good
understanding of HTML CSS and JavaScript
if you're comfortable writing code in
these languages you are in a great
position to start learning react now
throughout the course we'll be using
typescript typescript is a superset of
JavaScript that adds static typing to
the language essentially it helps us
catch errors earlier in the development
process which can save us time and
headaches down the road now don't worry
if you have never coded in typescript
before I'll hold your hands and teach
you everything from scratch with that
out of the way we can dive right into
learning react
before we begin coding let's take a few
minutes and discuss what reacting is and
how it helps us create better
applications react is a JavaScript
library for building Dynamic and
interactive user interfaces it was
created at Facebook in 2011 and is
currently the most widely used
JavaScript library for front-end
development so if you're looking for a
job as a front-end developer you should
know how to confidently build
applications with react but why was
react created well as you probably know
when a web page is loaded in a browser
the browser takes the HTML code and
creates a tree like structure called the
document object model or the Dom for
short this allows us to use JavaScript
and change the page content in response
to user actions for example we can use
JavaScript to hide an element when a
button is clicked this is called vanilla
JavaScript meaning plain JavaScript code
without any third part tools now as our
applications grow working with a Dom can
become quite complex and challenging to
manage this is where react comes into
play with react we no longer need to
worry about querying and updating Dom
elements instead with this grab a web
page using small reusable components and
react will take care of efficiently
creating and updating Dom elements so
components help us write reusable
modular and better organized code now
let's look at a real word example
imagine you want to build a web page
like this on this page we have a
navigation bar on the top a side panel
on the left and a grid of video games in
the main area we can build each of these
sections as separate components now in
this grid each game is displayed in a
cart which is an independent component
with a like button that's another
component itself we can build all these
components individually and then combine
them to build this page essentially a
react application is a tree of
components with the app being the root
bringing everything together all right
that's enough theory for now next we're
going to set up our development
environment and get a feel for what it's
like to build applications with react
foreign
foreign
to take this course you need to have
node version 16 or higher now to check
the version of node on your machine open
up your command prompt or terminal
window and run node Dash V so on this
machine I'm running node version 19. you
might be running a newer version that's
totally fine it's not going to impact
the materials in this course but you
need to have node version 16 or higher
if you don't head over to
nodejs.org and download the latest
version on this page now in this course
just like my other courses I'll be using
visual studio code or vs code as my
editor you're welcome to use any editor
that you prefer but if you want to use
vs code I strongly suggest you to use
the printer extension for formatting
your code so here's the extensions panel
over here search for prettier
and install this extension once you do
that on the top under the code menu go
to preferences and settings now this
layout might be different on Windows or
Linux I'm not entirely sure but find the
settings dialog and on this page search
for format on Save
if you take this box every time you save
a file that file gets automatically
reformatted with all that now we are
ready to create our first react
application
[Music]
there are two ways to create a react app
we can use the official tool provided by
the react team it's called create react
app or CRA but we also have another tool
called Veet that's getting increasingly
popular these days because it's much
faster and gives us smaller bundle sizes
so here in the terminal window I'm
currently on my desktop to create a new
app using Veet all you have to do is run
npm create Veet at latest or if you want
to use the exact same version as me
which is what I recommend you because I
want to make sure you have the exact
same experience then you need to specify
the version that is 4.1.0
okay now npm is asking if you want to
install this package let's proceed
next we need to specify our project name
which is Veet project by default but we
can change that to anything like react
app
next we need to select a framework so
using meet we can create any kind of
JavaScript project we can use vanilla
JavaScript which is Javascript without
any third-party tools we can also create
a view project a react project and so on
so using up and down arrows we can move
down this list let's select react
next we need to select a language so
here we have JavaScript and typescript
we're going to use typescript in this
course
good so now we have a new project next
we need to go into this folder install
all the third party dependencies and run
our web server so let's set it into the
react app folder and type npm install or
npmi that is shorter and with this we
can install all the third-party
libraries
all right now we need to open this
project in vs code to do that we type
code period if this doesn't work on your
machine simply drag and drop that folder
into vs code
now here in vs code we can open an
embedded terminal by pressing Ctrl and
backtick if this doesn't work on your
machine just go to the terminal window
and open a new terminal you can also see
the shortcut right here
so this is our embedded terminal it's
much easier to use this than switch back
and forth between vs code and a
different terminal window now to run our
web server we type npm run Dev
now this launched a web server at this
address localhost Port 5173 this might
be different on your machine so don't
worry about that just open this address
in your browser and this is our first
react application next we're going to
create our first react component
so this is our project loaded in vs code
now let me give you a brief overview of
the key files and folders in this
project here we have the node modules
folder this is where all the third-party
libraries like react and other tools are
installed you'll never have to touch
this
next we have the public folder this is
where the public assets of our website
exist like images video files and so on
next we have the source folder this is
the source code of our application in
this folder currently we have a
component called the app component don't
worry about any of the code here we're
going to rewrite everything from scratch
all I want you to note here is that
currently in this application we have a
single component called the app
component
now outside of the source folder we have
index.html which is a very basic HTML
template in this template we have a div
with the idea of root that is the
container for our application
below that we have a script element
referencing Source slash main.tsx this
is the entry point to our application
next we have
package.json in this file you can find
information about this project so we
have the name of the project its version
a bunch of script
the list of dependencies So currently
we're dependent on two libraries react
and react on version 18. we also have a
bunch of development dependencies these
are only used for development they're
not going to be deployed with our
application in the future
next we have a typescript configuration
file here we have a bunch of settings
for telling the typescript compiler how
to compile our code to JavaScript now
for the most part you never have to
touch this file unless you're an
advanced user and finally we also have a
configuration file for Veet again for
the most part you don't have to touch
this file
[Music]
Now to create a react component we right
click on the source folder and add a new
file called
message.tsx so the extension of
typescript files should be either TS or
TSX quite often we use Ts for plain
typescript files and TSX for react
components
now there are two ways to create a react
component we can use a JavaScript class
or a function these days function based
components have become more popular
because they are more concise and easier
to write so that's what we'll use in
this course but if you're maintaining an
older react project that is built with
class components you can look at my
previous react course to learn about
them
but function based components are the
recommended approach for new projects so
here we declare a function called
message
that pay attention to how I have named
this function this convention is called
Pascal casing with Pascal casing we
should capitalize the first letter of
every word in this case p and C it's
really important to follow this
convention because this is the
convention that both react and other
developers expect us to follow so in
react application whenever we want to
create a function component we should
always follow Pascal casing now here we
should describe what the UI is going to
look like where we use this component so
let's say wherever we use this component
we want to render an H1 element with a
message like hello work so here we
return an H1 element with hello world
now this syntax might make you a little
bit confused you might be thinking that
you're writing HTML code in the middle
of JavaScript code but that is not
correct this syntax you see here is
called jsx which is short for JavaScript
XML so this code under the hood is going
to get compiled down to JavaScript
if you head over to
babblejs.io repo that is repl you can
see how this code gets converted to
JavaScript let me show you
so on the left side we can write jsx
code like H1 hello world
and on the right side we can see the
equivalent JavaScript code so this piece
of code gets eventually converted to
react.createelement the type of element
is H1 and the message inside the element
is hello world
so this is a very basic component now to
use this first we need to export it as a
default object from this module
now let's go to the app component and
use this new component so back to our
project
here's the app component
now we're going to delete everything in
this file
now let's create a new component called
app
now in this component let's say we want
to have a div and inside the div we want
to have our message component so first
we need to import our message component
from period slash message so period
means the current folder
now we can use this component just like
regular HTML elements so we add the
opening tag and close it it's really
important to close it we should always
close our react components or we'll get
a compilation error now here we can also
use the self-closing syntax that is more
concise
now just like the message component we
should export
the app
component so it can be used somewhere
else
now here in the terminal you can see our
web server is still running and here we
have HMR which is short for hot module
replacement so read under the hood
monitors our files for changes whenever
we make any changes it will
automatically refresh our page in the
browser
so now you can see our message component
rendered on the screen now this is a
very simple example in a real world
application a component can have
Behavior so here we can have a button
when the button gets clicked perhaps we
can change the message we can do all
sorts of things
so with jsx we can easily describe the
user interface of our application with
HTML and JavaScript now the great thing
about jsx is that it allows us to easily
create Dynamic content for example here
we can declare a constant Cod name I set
it to my name Marsh now we can replace
this word with my name dynamically so
here we add braces and inside the braces
we can write any JavaScript expression
an expression is a piece of code that
produces a value so here we can
reference the name constant we can also
call a function like get name basically
any piece of code that returns a value
so here we can add my name dynamically
we can also write if statement so we can
say if name is true theme return this
markup otherwise return a different
markup like Hello World
now back to the browser you can see my
name is rendered on the screen however
if I change the name to an empty string
we see Hello World so this is the beauty
of jsx using this syntax we can easily
describe the user interface of our
applications
[Music]
So currently we have a component tree
with the app being the root or top level
component and the message being a child
when our application starts react takes
this component tree and builds a
JavaScript data structure called the
virtual Dom this virtual Dom is
different from the actual Dom in the
browser it's a lightweight in-memory
representation of our component tree
where each node represents a component
and its properties when the state or the
data of a component changes react
updates the corresponding node in the
virtual Dom to reflect the new state
then it compares the current version of
virtual Dom with the previous version to
identify the nodes that should be
updated it will then update those nodes
in the actual Dom now technically
updating the Dom is not done by react
itself it's done by companion Library
called react Dom so earlier we talked
about package.json in this file we can
see the dependencies of our application
so currently our application is
dependent on two libraries react and
react on let me show you how these work
together
so in index.html I told you that we have
a div with the idea of root and this is
the container of our application
below that we have a script element
referencing
main.tsx now if you look at this file
you can see that here we're using react
Dom to render this component tree inside
an element with the ID of root
so this is our component tree here is
our app component that is wrapped by
another component called strict mode
this is one of the built-in components
in react it doesn't have a visual
representation its purpose is to
identify potential problems so we're
taking this component tree and rendering
or displaying it inside an element with
the idea of root and to do that we're
using the react on library but we can
also render this component Tree in a
mobile app using a different Library
called react native so react itself is
not tied to a particular platform like
web or mobile it's platform agnostic and
we can use it to build apps for web
mobile and desktop devices
[Music]
so you have learned that react is a
JavaScript library for creating user
interfaces in contrast to react we have
other tools like angular and view which
are Frameworks but what is the
difference between a library and a
framework a library is a tool that
provides specific functionality while a
framework provides a set of tools and
guidelines for building applications so
a library is like a tool while a
framework is like a tool set now react
is just a library or a tool for building
user interfaces so the only thing that
it does and is good at is creating
Dynamic and interactive user interfaces
but we hardly use only react to build
modern applications we often need
additional tools for concerns such as
routing which means allowing the user to
go from one page to another making HTTP
calls managing the application State
internationalization form validation
animations and so now the great thing
about react is that it doesn't have an
opinion about the additional tools we
should use for these concerns so we can
pick the right tools for the job in this
part of the course our focus is entirely
on react and no third-party libraries
once you master react in the next part
we'll explore some additional useful
libraries in the react ecosystem
hey guys Marsh here before we dive back
into the tutorial I just wanted to say
that this tutorial is actually the first
hour of my complete react course the
full course includes eight hours of
content jam-packed with the latest
techniques and best practices it's got
everything you need to become a react
Pro including exercises summary notes
cheat sheets and even the project I
showed you at the beginning of this
tutorial and the best part is it comes
with a 30 day money back guarantee so if
you're loving this tutorial and want to
take your react skills to the next level
I highly recommend checking out the
complete course using the link below
this video thanks for watching and now
let's get back to the tutorial
so you got a taste of building
applications with react in this section
we'll be covering the fundamental
concepts in react applications this is
the most important section in this
course you don't want to miss the
materials I've covered here help you
build a strong foundation in react we'll
talk about building components rendering
markup with jsx managing State passing
input to components where props and
debugging react applications so let's
jump in and get started
[Music]
all right in this lesson we're going to
create a basic list group component
first we're going to install bootstrap
to give our application a modern look
and feel now in case you are not
familiar with bootstrap it's a very
popular CSS library that gives us a
bunch of CSS classes for styling our
applications
so here we open up our terminal window
you can see our web server is running so
we open a new terminal window and run
npm install bootstrap the version that
I'm using in this video is
5.2.3 let's go ahead
good now we need to import it in one of
our CSS files so here in the source
folder we have a couple of CSS files one
is app.css
this file contains all the styles for
our app component we don't need any of
this stuff anymore
delete
we also have
index.css where we have Global styles
for our application again we don't need
any of these Styles here because all of
them were generated by wheat so we can
delete this file entirely
now let's go to main.tsx
you can see that our index.css file was
imported here we're going to replace
this line with import bootstrap slash
dist slash CSS slash bootstrap.css
okay now to make sure that bootstrap is
imported properly we go back to the
browser so previously hello world was in
the middle of the page and we had a
different font now it's up here and it
has a different font beautiful so now
let's create a list group component
so back to our project here in the
source folder we add a new folder called
components this is not necessary but by
convention we put all of our components
in a folder called components now here
we add a new file
called list group dot TSX again pay
attention to how I have named this file
here we're following the Pascal
convention so we're capitalizing the
first letter of each word
now in this file with declare a function
called list group
for now let's just return an H1 element
list group
and Export this from this module
next we need to import this in our app
component so if you're on Mac press
command and P if you are on Windows
press Ctrl NP here we can search for
files like app.tsx okay now we don't
need the message component anymore so
let's remove the slide instead we're
going to import our list group com
component okay and we're going to use
that right here
okay let's make sure everything is
working up to this point so here in the
browser we have our list group component
beautiful now finally we need to display
a list of items here and for that we're
going to borrow some code from bootstrap
so head over to
getboosttrap.com go to the docs
and on the left side
under component section
you should find list group so
this is a list group component in
bootstrap
to create a list like this we need to
use
this markup so we need a UL with this
class and a bunch of list items with
these classes so we copy this we go back
to our list group component and return
this markup now here we get a bunch of
Errors because class is a reserved
keyword in JavaScript or typescript so
here we need to rename all these classes
to class name now let me show you
another shortcut let's rewrite this back
we select the class keyword now if
you're on Mac press command and D if
you're on Windows press Ctrl and d and
with this we select the next occurrence
of the selected keyword so now we have
multiple cursors we can press command
and d one more time and again and again
and again now all of these are selected
so we delete them and type class name
then we press escape a couple of times
to disable multi-cursor editing okay now
finally I save the changes but my code
is not reformatted so let's investigate
why this is happening
on the top Under The View menu
we go to the command palette note the
shortcut on Mac it's shift command and P
and here we search for format document
okay here we have an error saying there
are multiple formatters for typescript
jsx files so let's click on configure
and here we're going to use prettier as
our default code formatter good now this
file is formatted Beautiful Just note
that prelayer automatically wrapped our
jsx markup in parenthesis this is
necessary to break the markup into
multiple lines so if you're not using vs
code with prettier be sure to add the
left bracket in front of the return
keyword so you can spread your jsx into
multiple lines so now back to the
browser here's our list group component
but this is pretty boring this doesn't
have any functionality and it doesn't
allow us to render or display these
items dynamically so we're going to
solve these issues one by one over the
next few lessons
[Music]
now what if we want to add a heading
here well if we add another element here
like an H1
we get a bunch of Errors because in
react a component cannot return more
than one element so earlier I told you
that this H1 expression that we have
here eventually gets compiled to
JavaScript so this line gets translated
to something like
react.createelement with H1 being the
type of the element
the same thing will happen for the
second element so in this function we
are returning multiple elements and this
is not allowed in react now to solve
this problem we have a couple of
different ways one simple way is to wrap
this entire expression inside a div or
another element
so let me show you another shortcut we
select all this code
then we bring up the command palette so
we go to the view menu and bring up the
command palette or better we use the
shortcut
and here we search for wrap with
abbreviation now we press enter
and here we specify the type of element
that we want to use to wrap this entire
code so div
enter done okay so that's one way but
we're adding one extra element in the
Dom purely for making react happy this
is unnecessary a better way is to use a
fragment so on the top
we import fragment
from react make sure to put it in braces
now we replace the div with a fragment
so just like before I've selected the
div element now we can press command and
D to select the other div and now with
multiple cursors we can edit both of
them
in one go okay
now with this change when this component
is rendered on the screen we're not
going to have an additional element like
a div in the Dom okay now there is even
a better way to achieve the same result
we have a shorter syntax we don't have
to import the fragment component from
react so let's delete this line
and we select the fragment tags both of
them and remove them
so if you add empty angle brackets we're
telling react to use a fragment to wrap
all these children
now back to the browser so here's our
heading and our items beautiful
[Music]
now this list is kind of useless because
we have hard-coded these items in our
markup what if you want to render a list
of items dynamically well let's declare
a constant
called items and set it to an array of
strings here we can use the name of
series like New York
San Francisco Tokyo
London
and Paris
now in jsx we don't have a for Loop so
we cannot write code like four item in
items render whatever it doesn't work
that way so we have to use a different
technique in JavaScript as you probably
know arrays have a method called map for
mapping or converting each item to an
item of a different type
so if you type items dot map
here we can pass an arrow function we
can say take each item and convert it to
an item of a different type
so here we want to convert each item to
an Li element so here we type Li and
inside the tags we want to render or
display the item itself earlier I told
you that in jsx we use curly braces to
render data dynamically so here we
render the item itself okay now
we're going to delete all these list
items
and instead we're going to bring down
this piece of code
however we get a compilation error
because this expression is not allowed
in the middle of a jsx markup in jsx we
can only use HTML elements or other
react components so to render data
dynamically we need to wrap this
expression in braces
okay
now save the changes
our code got reformatted so Predator
plugin broke down our code into multiple
lines and added parentheses to wrap them
now back to the browser here's our list
of cities beautiful while reviewing this
video I just realized that I made a
mistake earlier and forgot to apply a
CSS class to our list items that's why
we have lost styling here but don't
worry I'll fix that in a later video
however if we right click anywhere on
this page and go to inspect
this is Chrome developer tools you
should probably be familiar with it here
on the console tab we have a warning
saying eat child in a list should have a
unique key prop what does this mean well
back to our code this is where we are
mapping each item to a list item
here the warning is saying that each
list item should have a key prop or key
property that uniquely identifies that
item react needs this to keep track of
our items so later when we add or remove
items dynamically react knows what part
of the page should be updated so when
rendering a list of items using the map
method we should give each item a unique
key now in this case each item has a
unique string so we can use the item
itself as a unique key but in a real
world application where we retrieve
items from an API quite often each item
has a property like ID
we don't have that in this case so we
don't have to worry about it now back to
the browser let's refresh the warning is
gone and here's our list beautiful
[Music]
sometimes we want to render different
content based on certain conditions for
example here we can add an if statement
and say if items the length equals zero
perhaps we want to show the user a
different message so here we can return
a completely different markup for
example we can add a paragraph and here
we say no item found
now to make sure this works I'm going to
change the constant to a variable so we
can reassign this on the next line
okay now back in the browser so here we
have no item found beautiful but our
heading is gone
so we can come back here and add our
heading as well
list and now we need to wrap this entire
expression inside a fragment so let's
add a fragment
okay now if I save the changes Predator
reformats our code and here once again
we have parenthesis for spreading this
code over multiple lines
with this our heading is back but I
don't like this implementation because
we have a bit of duplication and
generally speaking duplication in code
is not considered a good practice so let
me show you a different way to achieve
the same result
we're going to get rid of the if
statement
instead we're going to render things
conditionally inside our jsx expression
however inside this jsx expression we
cannot write an if statement because as
I told you earlier here we can only use
HTML elements or other react components
The Only Exception is
braces with braces we can render
anything dynamically so here we can use
the ternary operator in JavaScript so we
start with our condition items the
length equals zero then we type a
question mark if this condition is true
we're going to return a paragraph with
this message
otherwise
we're going to return null meaning
nothing will be rendered with this
we have the same result as before and
our implementation is a little bit more
concise
now sometimes this logic can get a
little bit too complicated and it can
pollute our jsx markup in those cases we
can always extract this logic and store
it in a separate variable or constant
for example here we can declare a
constant called message
Now we move this expression
right here
and then we can simply render our
message constant in our jsx markup so
now our j6 markup is a little bit
cleaner now we can also move this logic
inside a function for example we can
declare a function called get message
and here I'm using the arrow function
syntax
now we can move this logic right here
and now we don't need this constant
anymore
so here we have a function and we can
call that function to get the right
message now the benefit of using F
function in this case is that our
functions can have parameters so perhaps
we can get different messages depending
on different conditions so here we can
pass different arguments like one or
whatever and get a different message if
you don't have that scenario it's better
to use a constant in this case
now let me revert this code back to the
previous state
I'm going to move this expression
right here
so I can show you a more concise way to
write the same code
so let's remove this function
okay look this piece of code is fine and
it works but the part that bugs me a
little bit is the second part returning
null here let me show you a better way
to write this code we start with our
condition items that length we call zero
now instead of using the ternary
operator instead of using a question
mark we do a logical and between this
condition and the value that we want to
return if this condition is true that is
the paragraph element
okay
with this implementation we don't have
the null keyword and our code is a
little bit more concise but how does
this work well let's go back to the
browser and open up Chrome developer
tools
here in the console tab this is going to
be our JavaScript playground if you have
a Boolean value like true
and perform a logical and with another
value like one
see what happened the result of this
entire expression is equal to the second
value what if we type true and mosh
the result of the expression is mosh now
what if you have false and mush
the result is false so what does this
mean well that means if our condition is
true the result of this entire
expression will be our paragraph element
but if the condition is false the result
of the entire expression will be false
and nothing will be rendered on the
screen so this is a very common
technique react developers use to render
content dynamically okay with this we
can remove the slide and this is our
final implementation
foreign
[Music]
now let's see how we can handle click
events in a component first I'm going to
remove this line so we bring back our
items good now I just realized that
earlier I made a mistake and forgot to
apply one of the Boost trap classes to
these items so back to our code this is
where we're rendering a list item we
should give this a class of
list Dash group Dash item
okay that's better now we want to be
able to click on each item and see it on
the console in react each element has a
property or a prop called on click
so here is that on click to braces now
inside the braces we can write an arrow
function so a function with no
parameters
and here we can just say console.log
clicked as simple as that now I'm going
to save the changes so the code is
reformatted so now each property or each
prop is on a separate line okay now back
to the browser we had an internal server
error from this web server don't worry
about it just refresh error is gone now
if we click on each item we see this
message beautiful but what if you want
to see the actual item that was clicked
well
look this is where we are mapping each
item to a list item so when creating
this list item we have access to each
item because we are using that item as
the key of each list item right so
instead of logging clicked we can simply
log item
now if we click on each item we see it
on the console beautiful and by the way
when mapping items we can optionally add
a second parameter as an index and with
this we can see the index of the item
that was clicked so let me show you I'm
going to clear the console now if we
click on each item we can also see its
index in the array lovely
now this Arrow function can optionally
have a parameter that represents the
browser event we can call that e or
event whatever we prefer
now let's log this on the console and
see what we get
so clear click look the type of this
object is synthetic base event I know
it's a fancy term this is one of the
built-in classes in react because
different browsers have different
implementations of event objects so to
make this cross browser react team have
created a class called synthetic bass
event that is a wrapper around the
native browser event object now if you
look at the properties of this object
you see properties that you're probably
familiar with for example we have client
X and client Y which represent the
position where we clicked
we also have type which represents the
type of event we have Target which is
the element where I clicked that was a
list item with this class
now our event handling logic here is
very simple it's just a one-liner so
writing a function here is totally fine
but if our logic gets more complex we
don't want to write that logic here in
the middle of a jsx markup instead we
should move that logic into a separate
function so
in this component we declare a function
by convention we start with the word
handle and then we specify the type of
event in this case click
now we set this to
let's grab this piece of code
and paste it here
now we have a warning from the
typescript compiler saying parameter
event implicitly has an any type so the
reason I know this is a typescript issue
is that here we have Ts that is short
for typescript but why are we getting
this warning well the reason we're
getting this error is that the
typescript compiler doesn't know the
type of this parameter is event a number
is it a string is it an object what is
it so if we use the dot operator we
cannot see any properties of this event
object this is where we need to specify
the type of our parameter so we get Auto
completion and type safety so let's
hover our Mouse over this event
parameter look the type of this
parameter is react.mouse event so when
we pass an inline function here the
typescript compiler knows the type of
our parameter that is why we didn't get
a warning earlier but in this case we're
declaring a brand new function the
typescript compiler doesn't know where
we're going to use this so it doesn't
know the type of this parameter so we
should go on the top add import
mouse event from react
and then after the parameter we type a
colon followed by its type this is
called type annotation in typescript so
we type annotation we can specify the
type of variables parameters and so on
now with this annotation
if we use the dot operator we can see
all the properties of this mouse event
object this is one of the beauties of
typescript we get Auto completion we get
type safety and it's easier to refactor
or restructure our code you'll see more
examples as we go through the quest
so let's finish this example
so now we have a function here this
function is called an event handler
because its job is handling an event in
this case The Click event
now over here
we're going to remove this inline
function and simply reference our handle
click function note that I'm not calling
this function we don't want to call it
we just want to pass a reference so
you're telling react that whenever the
user clicks on this event this function
should be caught so calling this
function will be done later at runtime
now let's make sure everything is
working so let's click on one of these
items beautiful
[Music]
all right now the next step when we
click on an item we want to highlight it
to do that we have a CSS class in
bootstrap called active so back to our
code this is where we are rendering a
list item I'm going to give this a
second class called active now
look all of them are highlighted or
activated this is not what we want we
want to highlight one item at a time to
do that we need a variable to keep track
of the index of the selected item so
back to our component
let's declare a variable
called selected index we can initialize
this to negative one that means no item
is selected if we set this to zero that
means the first item should be selected
now down here
we can render this active class
dynamically so we're going to use the
same technique you learned in the
conditional rendering lesson so I'm
going to remove
the quotations here we add braces so we
render content dynamically here we can
check the selected index if it equals
the index of the current item
that means that items should be active
so we're going to give it two classes
list group item and active
otherwise we should only give it the
list group item class
this is a very simple way to add classes
dynamically there are other more
Advanced Techniques let's not worry
about them at this stage let's just see
if this works or not so back to the
browser now the first item is selected
beautiful now when we click on an item
we should change the selected index so
this is very good handling the click
event now in this case we need a simple
error function to update the selected
index so I'm going to get rid of this
handle click function so we deleted from
here
as well as here
we should also delete
the mouse event import on the top okay
so always pay attention to cleaning up
your code so here we write a simple
arrow function and here we set selected
index to the index of the current item
okay now back to the browser let's click
on item
nothing is happening why is that well
this variable we have declared here is
local to this function component so
react is not aware of it it's like a
little secret inside this component to
solve this problem we should tell react
that this component is going to have
data or state that might change over
time and to do that we have to use one
of the built-in functions in react
called use state so when we type this
here and press enter it gets imported on
the top okay now this function is called
a hook
a hook is a function that allows us to
tap into built-in features in react so
this is called the statehook we have
other hooks that you will learn about as
we go through this course using the
state hook we can tell react that this
component can have data or state that
will change over time so instead of
declaring a variable this way we're
going to call this function
that we're going to initialize our
variable we can give it the initial
value of negative one
now this returns an array
in this array we're going to have two
elements the first element is going to
be a variable like our selected index
variable
and the second element is going to be an
updater function using that updater
function we can update this variable and
at that point react will be notified so
it knows that the state of our component
is changed and then it will re-render
our component which causes the Dom to be
updated under the hood so as I told you
earlier in the course with react we
almost never have to touch the Dom
directly we think in terms of components
that have state when the state of a
component changes react will update the
Dom to match the new component State
okay now let's see how we can use this
so instead of working with two
individual elements here it's easier to
destructure this array into two elements
so the first element is going to be
select an index and the second element
is going to be a function which we call
set selected Index this is a convention
we follow in react applications so here
we have a state variable called selected
index and here we have a function called
set selected index now as another
example we can use the state hook to
declare another variable called name so
we call view state
we can initialize the name to an empty
string this returns an array which we
can destructure into two elements name
and set name
that's the idea now in this case we
don't need a name variable so let's
delete this line
and the comment and the slide
so here we have a state variable called
selected index now down here
to update this variable we're going to
call set selected index and give it
the new index
with this when we click on an item it
gets selected beautiful
so this is how we tell react that our
component can have state that will
change over time now one thing you need
to know about component state is that
each component is going to have its own
state so if we go back to our app
component and add another instance of
our list group here
each list group is going to have its own
state so
in our first list group Paris is
selected but in our second list group
nothing is selected because this
component has its own state so there
will be independent of each other okay
now we don't need to list groups here so
I'm going to remove the second one
[Music]
so we're showing a list of cities here
but what if we want to show a list of
names or a list of colors we don't want
to recreate a separate component for
each type of list right so how can we
make this component reusable this is
where we use props or properties props
are the inputs to our components so back
to our code
instead of defining these items here we
should be able to pass them as an input
to this component just like how we can
call a function and give it an argument
now the same principle applies to this
heading instead of hard coding this
label here it would be nicer if you
could pass different labels like cities
names colors and so on so how can we do
that well first we need to decide the
shape of the input to this component so
we should be able to pass an object with
two properties items which is going to
be an array and heading which is going
to be a string to do that we use one of
the typescript features called an
interface using an interface we can
Define the shape or the interface of an
object so you start with the interface
keyword give this a name by conventional
use props but some people prefer to
prefix it with the name of the component
so list group props either way it works
I prefer a shorter name
that he Embraces would define various
properties and their types so we want to
have items which is going to be an array
of strings so string array and heading
which is going to be a string
so once again we're using type
annotation to specify the type of
various properties okay
now we don't need this comment anymore
next we give this function a parameter
called props of type props
now if we go back to our app component
we have two compilation errors saying
type is missing the following properties
from type props items and heading so the
typescript compiler is saying that this
component expects two properties which
are items and heading we have not
specified them this is yet another
benefit of using typescript so the
typescript compiler is reminding us that
we have forgotten to pass these props so
it's helping us to catch a bunch of
potential errors at compile time before
running our application
so back to our list group
I'm going to grab the list of items and
move it to
the app component
now we can pass this just like how we
said the attributes of HTML element so
we set items to we add braces so we can
reference this variable
now similarly we should also set the
heading to
series
now in this case I'm using quotation
marks but we could also wrap this in
braces but this is unnecessary because
we're passing a static value
so let's rewrite it that's better now
the compilation error is gone so back to
our list group component
now there are a couple of issues here we
don't have the items variable anymore so
we have to prefix it with props dot okay
but we have to do the same thing here
this looks a little bit repetitive and
ugly a better solution is to destructure
this parameter right here so we remove
the name and add braces and pick the two
properties items and heading now we have
access to these properties anywhere in
this function so we can remove props Dot
and our code is cleaner
now the final part is to replace the
list with
The Heading dynamically okay
back to the browser our app still
working so using props we can pass data
to our components
foreign
our list group component is in a fairly
good shape when we click an item it gets
selected but in a real world application
quite often something should happen
after an item is selected perhaps we
want to filter a list of objects or
maybe we want to redirect the user to a
different page so something should
happen after an item is selected now
what happens is different from one
application to another there is no
one-size-fits all so we don't want to
implement that piece of logic inside our
list group component because then it's
not going to be a reusable component
anymore so we need a mechanism to notify
the consumer or the parent of this
component that an item is selected in
this case the consumer or the parent of
this component is our app component this
is where we are using the list group so
when an item is selected we should
notify the app component that an item is
selected but how can we implement this
well that's very easy so look at our
props object currently we have two
properties and we are using these to
pass data to our list group component
now we can add a third property which is
going to be a function now down here
when we select an item we're going to
call that function with this our app
component will be notified let me show
you how this works it's really simple
so first let's define the signature of
that function let's imagine that we want
a function that takes a parameter called
item of type string that is the selected
item
and returns void so it doesn't return a
value so here we have a property by
convention we start with the word on and
then we specify the type of event in
this case select item this is just like
the on click prop that you saw earlier
but here we have on select item
so we have a property called unselect
item the type of this property is a
function
that has a parameter of type string and
returns void okay
with that now we have a compilation
error in our app component how can I
tell look it turned red also we can go
to the top under View
open up the problems panel
so the typescript compiler is telling us
that in the app component we have
forgotten to pass this prop so once
again the typescript compiler is helping
us catch a lot of potential problems
early on so let's go back to our app
component
now here we set on select item we can
write an inline function here just like
how we handled the click event earlier
or we can write a separate event handler
if you want to write a separate event
handler
again just like before by convention we
start with the word handle and then we
specify the type of event select item
now we set this to a function with a
signature that we just defined so item
of type string goes to nothing now here
we can just do a console.log
and print the item on the console now we
can pass that down here
handle select item now the last step
back to our list group over here when
destructuring the props we should pick
the on select item property
and then
When selecting an item
we should call this function
so we call this and pass the selected
item which is
this item variable here
now back to the browser when we select
an item the app component is notified
and it's now printing the name of the
selected City on the console
[Music]
now let's talk about the differences and
similarities between props and state as
you have seen props or properties are
the inputs or arguments passed to a
component State on the other hand is the
internal data managed by a component
that can change over time so Props are
like functional arguments and state is
like local variables inside a function
now one thing you need to know about
props is that we should treat them as
immutable what does this mean in English
to mute it something means to change it
so mutable means changeable and
immutable means unchangeable so when we
say something is immutable it means it's
read only so in our list group component
here are our props we should not change
any of them here we should not set the
heading to a new value if we do so
nothing is going to happen nobody is
going to yell at us but this is an
anti-pattern in react you will
understand the philosophy behind this as
we go through the course this is based
on functional programming principles so
we should treat props as immutable or
unchangeable State on the other hand is
mutable and that's the whole purpose of
using State variables we want to tell
react that this component has data that
can change over time right so these were
the differences between State and props
but one thing they both have in common
is that anytime they change react will
re-render our component and update the
Dom accordingly
[Music]
sometimes we want to pass children to a
component just like how we are passing a
list group to this div element here so
in this lesson I'm going to show you how
to create a component that can accept
children
so
back to our components folder let's add
a new file called alert.tsx
now let me show you a shortcut instead
of defining a function here and then
exporting it
we can use a shortcut
so here in the extensions panel if you
search for es7 plus you will find this
extension
it's called es7 plus react Redux and
react native it's a very popular
extension look at how many times it's
been downloaded so once you install this
you can type RAF CE now it's not coming
up I don't know why so let's close this
file and open it one more time
now let's try again good so this is
short for react Arrow function component
export so if you press enter we get this
code snippet lovely now here we have
multi-cursor editing so we can change
the name of the component
if you made a mistake but in this case
no so let's go back to alert and then we
press escape to exit multi-cursor
editing good now we don't need to import
react on the top
so here's our alert component now let's
add this to our app component and test
our application up to this point so we
go to the app component
that we're done with our list group for
now so let's delete all the code here
now inside this div we want to add an
alert so let's add alert
good now back to the browser so here's
our alert component lovely now to
display an alert we're going to borrow
some code from bootstrap
so head over to bootstrap website go to
the docs and here on the left side under
components
you should find alerts so let's find out
the markup we need to render an alert
like this so that is very
straightforward we need a div with two
classes the base class is alert that all
of these have the second class is a
class that determines the color so if
you use alert primary we get this Blue
Alert by default
so back to our alert component let's
give this div a couple of classes alert
and alert
primary
all right this is what we get lovely now
we need to make this Dynamic so we want
to pass the text as a prop to do that
first we need to use an interface to
define the shape of props so Props here
we need a property called text of type
string
then we add a parameter here of type
props
in fact it's better to de-structure this
and grab the text property
and render it right here
okay now back to our app component
here we should set the text to something
like
hello world
before going further Let's test our
implementation
okay it's working lovely
now while this works this way of passing
text to this component is kind of ugly
what if the text is a bit too long what
if you want to pass HTML content passing
HTML content has a prop like this is
kind of ugly wouldn't that be nicer if
you could pass text as a child to this
component let me show you how so we want
to be able to use this component like
this this is better so to do that we go
back to our component
now there is a special prop that all
components support and it's called
children so if you simply rename text to
children now we can pass our text as a
child to this component but we have a
couple of Errors because we need to
rename these two references to text so
I'm going to rename them both in one go
good there is our con and our
application is still working lovely now
what if you want to pass HTML content
here
we get a compilation error because we
told the typescript compiler
that the children prop is a string but
in this case we are not passing a string
we are passing a more complex structure
to solve this problem
we need to change the type of children
from string to react node now here in
order completion box we have two react
nodes the first one is an abbreviation
so if you press enter here we get this
markup this is not what we want we want
the second item this is the react node
class defined in the react module so
let's import it on the top like this and
with that we can pass HTML content to
our alert component
so to recap using the children prop we
can pass children to a component
[Music]
all right the last thing we're going to
cover in this section is react Dev tools
which is a very useful browser extension
for inspecting and analyzing our react
applications it's available for Chrome
Firefox and Microsoft Edge so simply
Google reactive upper tools or reactive
tools and install it in your browser
once you do that then go back to this
page here in the dev tools you will see
a couple of new tabs one is components
the other is profiler now look at the
components tab here we can see the
hierarchy of our components so on the
top we have the app component and below
that we have the alert component so this
is the component tree that react takes
and renders in the actual Dom now down
here you can see the props of this
component so here we have the children
prop which is set to an array of two
objects the first element is a string
the second element is a span object
below that you can see how this
component was rendered so it was
rendered by the app component now
finally down here you can see where this
component is implemented in this case in
app.tsx but that is not visible in my
recording window now in a large
application with a lot of components
finding the right component might be a
little bit tedious so we can always
search for them here also here we have a
couple more useful features for example
we can select a component and inspect
the matching Dom element so if you click
this and then go to the elements tab
we can see the matching Dom element that
represents this component now back to
the components tab
there's also another useful feature here
so we can select the component and click
on this icon to see its source code so
in this case this is our alert component
so it's pretty straightforward it
doesn't really need more explanation as
you're building applications if you want
to better understand your components and
how they work if you want to inspect
their props and state use reactive tools
[Music]
all right now it's your turn I want you
to create a bootstrap button component
so here on bootstrap website if you look
at the buttons page you can see we have
different types of buttons now for this
exercise I want you to only focus on
this set of buttons because here we have
other flavors don't worry about them
don't worry about the sizes or outline
buttons just simple bootstrap buttons
now the markup is really simple each
button has two classes one is BTN which
is a base class and the other is a class
that identifies the color so by default
primary buttons are blue secondary
buttons are gray and so on so I want you
to encapsulate this markup inside a
reusable react component so span a few
minutes on this then be sure to come
back and see my solution as I'll be
showing you a really cool typescript
technique
all right here in the components folder
we add a new file called button.tsx
now we use our shortcut rough C
good next we rename div to button and
give it a couple of classes now I'm
typing a little bit too fast because I'm
assuming you have already done your
exercise so I'm not expecting you to
code along with me okay so here we have
two classes for now let's just stick to
primary buttons and then we make this
Dynamic so this is the approach I want
you to take while building applications
one step at a time don't try to do too
many things together okay so for now I
just want to render a basic button I
don't even want to make the text Dynamic
let's see if our application works up to
this point
so we go to our app component
and in this div we add a button
component okay
now back to the browser here's our
button beautiful so the first step is
done now the next step is to make the
text or label Dynamic so back to our
button component here we need to use an
interface to define the shape of props
now I want to use the children prop here
so we can pass the text just like HTML
buttons so I'm going to set the type of
children to string
we could also use react node but I
prefer to use a string in this case
next we add the props parameter and
de-structure it
and finally we render children right
here
good now we go back to our app component
and give this button a label like my
button
let's see if our application is working
good again don't worry about these
errors everything is good so far next we
need to handle the click event because
in a real run application when this
button is clicked we have to do
something what happens next should not
be implemented in our button component
otherwise it's not going to be reusable
okay so back to the button component
here in the props object we need to add
a new prop called on click
and this is going to be a function with
no parameters that returns void
next we added here on click and finally
we set the on click prop of the HTML
button to the function that is passed
from the outside so on click is going to
be a function that is passed from the
outside so the parent of this component
is going to pass that function we get
that function and simply pass it to this
HTML button okay now in our app
component we have an arrow because we
haven't set the unclick prop
for now I just want to add a simple
inline function
and log clicked on the console
let's see if our application is working
so click click click beautiful now the
final step is implementing the color so
we want to be able to pass the color of
this button from the outside like this
so we can set it to primary or secondary
or whatever
so let's add a new prop called color
of type string I prefer to sort these
props in alphabetical order it makes our
code a little bit easier to read That's
nicer
next we add the color prop here and we
use that to add the second CSS class
dynamically so we wrap the codes in
braces
we terminate our string here and then
append the color right after okay we
have a compilation error because this
quotation mark is unnecessary good now
in our app component we have set the
color to secondary let's see if it's
working good if we change it to primary
it's still working great now what if you
want to give this a default value so we
don't have to specify the color every
single time
to do that we go to our button class and
give this color prop that default value
of primary
with that we get this blue button
beautiful however we have a compilation
error in the app component saying
property color is missing in type so
even though
we gave this prop a default value the
typescript compiler still expects us to
set the color prop when using the button
component to solve this problem we have
to tell the typescript compiler that
this property is optional so we add a
question mark after and now
the area is gone okay now what if we
pass an invalid color here like let's
say react what happens
well there are no errors or Warnings but
this is not how a button supposed to
look like this is where we can use
typescript to catch this kind of bugs
early on before we deploy our
application let me show you how so back
to our button component instead of
setting the type of color to string we
can set it to a string literal like
primary and with this we can only set
this property to the value of primary so
if you set it to something else we get a
compilation error now we don't want to
be limited to primary we want to support
other colors so here we can use the
union operator and add a second string
literal so we can add secondary we can
also add danger success and other
bootstrap colors with this
implementation we can only set this
property to one of these values and
nothing else so if we set it to react
for example the typescript compiler is
yelling at us we can see this file
turned red and also if we go to the view
menu and look at the problems panel we
can see that we have a problem in this
file so now if we change this back to
primary or secondary or one of the
supported values the arrow goes away
[Music]
all right here's the next exercise I
want you to write the necessary code so
when we click this button we see an
alert and here we have a close button
when we click it the alert disappears
this is a great exercise for you to
practice pretty much everything you have
learned in this section now let me give
you a hint on bootstrap website
look at the alerts component on the
right side you will find a link called
dismissing now
down here
you can see that to make an alert
dismissable you need to add a class here
called alert dismissable you should also
add
a button this is the close button with
this class and other stuff
so spend a few minutes on this then come
back see my solution
all right this is so much fun so here in
the app component right above our button
we're going to add an alert
and here let's say my alert now before
going any further I just want to test
our implementation up to this point I
don't want to show or hide anything I
just want to make sure if we can see an
alert beautiful now we don't want to
show this at all times we want to show
this only when this button is clicked to
do that we need a state variable
here in the app component that
determines the visibility of the alert
so we want to render this part only if
that variable is true
so here we need to use the state hook
to declare a state variable we
initialize it to false so our alert is
initially hidden now this returns an
array that we can de-structure into two
elements we can call the first one alert
visible
and the second one set alert visibility
you could call them anything whatever
you prefer now we want to render
the alert only if alert is visible alert
visible is true
sober wrap is Embraces and perform a
logical and between alert visible and
this expression so alert visible
and okay
now when we click the button instead of
logging something on the console we
simply call set alert visibility to true
so set alert visibility to true
let's see if our implementation is
working
all right now we click and here's our
alert beautiful let me explain how this
works
so when we click on this button this
function is called at this point we set
our state variable to true so the state
of this component is changed and react
will re-render this component and all
its children this is why we see the
alert now we need to add the close
button to the alert so here on bootstrap
website I'm going to copy some code
I'm going to grab this class so there
are no typos let's add that
to our alert
component
okay we also need a close button
I'm going to copy that from this website
as well
paste it here
we just need to rename class to class
name
good now once again before we implement
the hiding logic first we want to test
our application and make sure that we
can see the close button so one more
time click okay here's a close button
now the final part when we click this
button we should notify the app
component that the user clicked on this
button at that point the app component
will set the visibility of the alert to
false which will cause the app component
and all its children to re-render
so to notify the parent or the consumer
of this component that the user has
clicked on the close button here we need
to add a new prop
on lows so remember the convention we
start with the word on and then we
specify the event in this case close
this is going to be a function with no
parameters that returns void
now we need to add that here
and finally
when the user clicks on this button
so unclick we simply call on close and
more accurately we are not calling this
function we're not calling it like this
we're just setting on click to unclose
so on close will be a function that is
passed from the outside from the parent
we pass that function to this prop when
the user clicks on the close button
react will call that function for us
okay now we have a completion error in
the app component because we haven't set
the unclose prop
pass
and error function and set alert
visibility
to false
as simple as that okay now
the final test click click lovely
congratulations you made it to the end
of this tutorial I hope you found it
helpful and learned a lot about react
but wait there is more this tutorial was
just a small part of my complete react
course the full course includes eight
hours of content and is jam-packed with
the latest tools and best practices
you'll get access to exercises summary
notes cheat sheets and a project I
showed you at the beginning of this
tutorial and if you're not completely
satisfied no problem the course comes
with a 30-day money-back guarantee so
there is no risk in giving it a try so
if you are serious about master react I
encourage you to check out the full
course using the link below this video
thanks for watching and happy coding
[Music]

Each question must have 4 options, 1 correct answer, focusing on vocabulary, phrases, or concepts. Questions should be technical, high-quality, and efficient, with clear wording and plausible distractors. Format each question as: 
1. Question text
A) Option1
B) Option2
C) Option3
D) Option4
Correct: C
User: System: You are an expert quiz generator.
User: Generate exactly 5 technical multiple-choice quiz questions no more, no less from this transcript about language learning and directions:

[Music]
welcome to the ultimate react course in
this course you will learn everything
you need to know about react from the
basics to more advanced concepts so by
the end of the course you'll be able to
confidently build fast and scalable apps
with react if you are looking for a
comprehensive easy to follow
well-organized and practical course that
takes you from Zero to Hero this is the
right react course for you you won't
need any prior knowledge of react to get
started everything you need to know is
right here so you won't need to jump
back and forth between random tutorials
now unlike other courses we won't be
building a dummy App instead we'll be
building and deploying a beautiful
production grade app for discovering
video games this app has all the
features and UI patterns you would
expect from a modern application we can
toggle within the dark and light modes
we can search for games filter them by
genre as well as platform now as we
change filters the page title gets
updated dynamically we can also sort
games and here we see loading skeletons
while games are being fetched from the
back end and that's just the start in
the next part which I'm currently
working on we'll dive into advanced
topics like routing State Management
fetching data with react query
authentication error handling
performance optimization and much much
more I've put my heart and soul into
creating this course and I'm confident
that it's going to be a game changer for
your react skills I'm <PRESIDIO_ANONYMIZED_PERSON> I'm
a software engineer with over 20 years
of experience and I've taught millions
of people how to code and become
professional software Engineers through
my YouTube channel and online school
codebitmarsh.com if you're new here make
sure to subscribe as I upload new videos
all the time so if you're ready to
master react and build front-end apps
with confidence let's jump in and get
started
[Music]
thank you
[Music]
before we get started let's talk about
what you will need to know to take this
course first things first you don't need
to know react to take this course
however you should have a good
understanding of HTML CSS and JavaScript
if you're comfortable writing code in
these languages you are in a great
position to start learning react now
throughout the course we'll be using
typescript typescript is a superset of
JavaScript that adds static typing to
the language essentially it helps us
catch errors earlier in the development
process which can save us time and
headaches down the road now don't worry
if you have never coded in typescript
before I'll hold your hands and teach
you everything from scratch with that
out of the way we can dive right into
learning react
before we begin coding let's take a few
minutes and discuss what reacting is and
how it helps us create better
applications react is a JavaScript
library for building Dynamic and
interactive user interfaces it was
created at Facebook in 2011 and is
currently the most widely used
JavaScript library for front-end
development so if you're looking for a
job as a front-end developer you should
know how to confidently build
applications with react but why was
react created well as you probably know
when a web page is loaded in a browser
the browser takes the HTML code and
creates a tree like structure called the
document object model or the Dom for
short this allows us to use JavaScript
and change the page content in response
to user actions for example we can use
JavaScript to hide an element when a
button is clicked this is called vanilla
JavaScript meaning plain JavaScript code
without any third part tools now as our
applications grow working with a Dom can
become quite complex and challenging to
manage this is where react comes into
play with react we no longer need to
worry about querying and updating Dom
elements instead with this grab a web
page using small reusable components and
react will take care of efficiently
creating and updating Dom elements so
components help us write reusable
modular and better organized code now
let's look at a real word example
imagine you want to build a web page
like this on this page we have a
navigation bar on the top a side panel
on the left and a grid of video games in
the main area we can build each of these
sections as separate components now in
this grid each game is displayed in a
cart which is an independent component
with a like button that's another
component itself we can build all these
components individually and then combine
them to build this page essentially a
react application is a tree of
components with the app being the root
bringing everything together all right
that's enough theory for now next we're
going to set up our development
environment and get a feel for what it's
like to build applications with react
foreign
foreign
to take this course you need to have
node version 16 or higher now to check
the version of node on your machine open
up your command prompt or terminal
window and run node Dash V so on this
machine I'm running node version 19. you
might be running a newer version that's
totally fine it's not going to impact
the materials in this course but you
need to have node version 16 or higher
if you don't head over to
nodejs.org and download the latest
version on this page now in this course
just like my other courses I'll be using
visual studio code or vs code as my
editor you're welcome to use any editor
that you prefer but if you want to use
vs code I strongly suggest you to use
the printer extension for formatting
your code so here's the extensions panel
over here search for prettier
and install this extension once you do
that on the top under the code menu go
to preferences and settings now this
layout might be different on Windows or
Linux I'm not entirely sure but find the
settings dialog and on this page search
for format on Save
if you take this box every time you save
a file that file gets automatically
reformatted with all that now we are
ready to create our first react
application
[Music]
there are two ways to create a react app
we can use the official tool provided by
the react team it's called create react
app or CRA but we also have another tool
called Veet that's getting increasingly
popular these days because it's much
faster and gives us smaller bundle sizes
so here in the terminal window I'm
currently on my desktop to create a new
app using Veet all you have to do is run
npm create Veet at latest or if you want
to use the exact same version as me
which is what I recommend you because I
want to make sure you have the exact
same experience then you need to specify
the version that is 4.1.0
okay now npm is asking if you want to
install this package let's proceed
next we need to specify our project name
which is Veet project by default but we
can change that to anything like react
app
next we need to select a framework so
using meet we can create any kind of
JavaScript project we can use vanilla
JavaScript which is Javascript without
any third-party tools we can also create
a view project a react project and so on
so using up and down arrows we can move
down this list let's select react
next we need to select a language so
here we have JavaScript and typescript
we're going to use typescript in this
course
good so now we have a new project next
we need to go into this folder install
all the third party dependencies and run
our web server so let's set it into the
react app folder and type npm install or
npmi that is shorter and with this we
can install all the third-party
libraries
all right now we need to open this
project in vs code to do that we type
code period if this doesn't work on your
machine simply drag and drop that folder
into vs code
now here in vs code we can open an
embedded terminal by pressing Ctrl and
backtick if this doesn't work on your
machine just go to the terminal window
and open a new terminal you can also see
the shortcut right here
so this is our embedded terminal it's
much easier to use this than switch back
and forth between vs code and a
different terminal window now to run our
web server we type npm run Dev
now this launched a web server at this
address localhost Port 5173 this might
be different on your machine so don't
worry about that just open this address
in your browser and this is our first
react application next we're going to
create our first react component
so this is our project loaded in vs code
now let me give you a brief overview of
the key files and folders in this
project here we have the node modules
folder this is where all the third-party
libraries like react and other tools are
installed you'll never have to touch
this
next we have the public folder this is
where the public assets of our website
exist like images video files and so on
next we have the source folder this is
the source code of our application in
this folder currently we have a
component called the app component don't
worry about any of the code here we're
going to rewrite everything from scratch
all I want you to note here is that
currently in this application we have a
single component called the app
component
now outside of the source folder we have
index.html which is a very basic HTML
template in this template we have a div
with the idea of root that is the
container for our application
below that we have a script element
referencing Source slash main.tsx this
is the entry point to our application
next we have
package.json in this file you can find
information about this project so we
have the name of the project its version
a bunch of script
the list of dependencies So currently
we're dependent on two libraries react
and react on version 18. we also have a
bunch of development dependencies these
are only used for development they're
not going to be deployed with our
application in the future
next we have a typescript configuration
file here we have a bunch of settings
for telling the typescript compiler how
to compile our code to JavaScript now
for the most part you never have to
touch this file unless you're an
advanced user and finally we also have a
configuration file for Veet again for
the most part you don't have to touch
this file
[Music]
Now to create a react component we right
click on the source folder and add a new
file called
message.tsx so the extension of
typescript files should be either TS or
TSX quite often we use Ts for plain
typescript files and TSX for react
components
now there are two ways to create a react
component we can use a JavaScript class
or a function these days function based
components have become more popular
because they are more concise and easier
to write so that's what we'll use in
this course but if you're maintaining an
older react project that is built with
class components you can look at my
previous react course to learn about
them
but function based components are the
recommended approach for new projects so
here we declare a function called
message
that pay attention to how I have named
this function this convention is called
Pascal casing with Pascal casing we
should capitalize the first letter of
every word in this case p and C it's
really important to follow this
convention because this is the
convention that both react and other
developers expect us to follow so in
react application whenever we want to
create a function component we should
always follow Pascal casing now here we
should describe what the UI is going to
look like where we use this component so
let's say wherever we use this component
we want to render an H1 element with a
message like hello work so here we
return an H1 element with hello world
now this syntax might make you a little
bit confused you might be thinking that
you're writing HTML code in the middle
of JavaScript code but that is not
correct this syntax you see here is
called jsx which is short for JavaScript
XML so this code under the hood is going
to get compiled down to JavaScript
if you head over to
babblejs.io repo that is repl you can
see how this code gets converted to
JavaScript let me show you
so on the left side we can write jsx
code like H1 hello world
and on the right side we can see the
equivalent JavaScript code so this piece
of code gets eventually converted to
react.createelement the type of element
is H1 and the message inside the element
is hello world
so this is a very basic component now to
use this first we need to export it as a
default object from this module
now let's go to the app component and
use this new component so back to our
project
here's the app component
now we're going to delete everything in
this file
now let's create a new component called
app
now in this component let's say we want
to have a div and inside the div we want
to have our message component so first
we need to import our message component
from period slash message so period
means the current folder
now we can use this component just like
regular HTML elements so we add the
opening tag and close it it's really
important to close it we should always
close our react components or we'll get
a compilation error now here we can also
use the self-closing syntax that is more
concise
now just like the message component we
should export
the app
component so it can be used somewhere
else
now here in the terminal you can see our
web server is still running and here we
have HMR which is short for hot module
replacement so read under the hood
monitors our files for changes whenever
we make any changes it will
automatically refresh our page in the
browser
so now you can see our message component
rendered on the screen now this is a
very simple example in a real world
application a component can have
Behavior so here we can have a button
when the button gets clicked perhaps we
can change the message we can do all
sorts of things
so with jsx we can easily describe the
user interface of our application with
HTML and JavaScript now the great thing
about jsx is that it allows us to easily
create Dynamic content for example here
we can declare a constant Cod name I set
it to my name Marsh now we can replace
this word with my name dynamically so
here we add braces and inside the braces
we can write any JavaScript expression
an expression is a piece of code that
produces a value so here we can
reference the name constant we can also
call a function like get name basically
any piece of code that returns a value
so here we can add my name dynamically
we can also write if statement so we can
say if name is true theme return this
markup otherwise return a different
markup like Hello World
now back to the browser you can see my
name is rendered on the screen however
if I change the name to an empty string
we see Hello World so this is the beauty
of jsx using this syntax we can easily
describe the user interface of our
applications
[Music]
So currently we have a component tree
with the app being the root or top level
component and the message being a child
when our application starts react takes
this component tree and builds a
JavaScript data structure called the
virtual Dom this virtual Dom is
different from the actual Dom in the
browser it's a lightweight in-memory
representation of our component tree
where each node represents a component
and its properties when the state or the
data of a component changes react
updates the corresponding node in the
virtual Dom to reflect the new state
then it compares the current version of
virtual Dom with the previous version to
identify the nodes that should be
updated it will then update those nodes
in the actual Dom now technically
updating the Dom is not done by react
itself it's done by companion Library
called react Dom so earlier we talked
about package.json in this file we can
see the dependencies of our application
so currently our application is
dependent on two libraries react and
react on let me show you how these work
together
so in index.html I told you that we have
a div with the idea of root and this is
the container of our application
below that we have a script element
referencing
main.tsx now if you look at this file
you can see that here we're using react
Dom to render this component tree inside
an element with the ID of root
so this is our component tree here is
our app component that is wrapped by
another component called strict mode
this is one of the built-in components
in react it doesn't have a visual
representation its purpose is to
identify potential problems so we're
taking this component tree and rendering
or displaying it inside an element with
the idea of root and to do that we're
using the react on library but we can
also render this component Tree in a
mobile app using a different Library
called react native so react itself is
not tied to a particular platform like
web or mobile it's platform agnostic and
we can use it to build apps for web
mobile and desktop devices
[Music]
so you have learned that react is a
JavaScript library for creating user
interfaces in contrast to react we have
other tools like angular and view which
are Frameworks but what is the
difference between a library and a
framework a library is a tool that
provides specific functionality while a
framework provides a set of tools and
guidelines for building applications so
a library is like a tool while a
framework is like a tool set now react
is just a library or a tool for building
user interfaces so the only thing that
it does and is good at is creating
Dynamic and interactive user interfaces
but we hardly use only react to build
modern applications we often need
additional tools for concerns such as
routing which means allowing the user to
go from one page to another making HTTP
calls managing the application State
internationalization form validation
animations and so now the great thing
about react is that it doesn't have an
opinion about the additional tools we
should use for these concerns so we can
pick the right tools for the job in this
part of the course our focus is entirely
on react and no third-party libraries
once you master react in the next part
we'll explore some additional useful
libraries in the react ecosystem
hey guys Marsh here before we dive back
into the tutorial I just wanted to say
that this tutorial is actually the first
hour of my complete react course the
full course includes eight hours of
content jam-packed with the latest
techniques and best practices it's got
everything you need to become a react
Pro including exercises summary notes
cheat sheets and even the project I
showed you at the beginning of this
tutorial and the best part is it comes
with a 30 day money back guarantee so if
you're loving this tutorial and want to
take your react skills to the next level
I highly recommend checking out the
complete course using the link below
this video thanks for watching and now
let's get back to the tutorial
so you got a taste of building
applications with react in this section
we'll be covering the fundamental
concepts in react applications this is
the most important section in this
course you don't want to miss the
materials I've covered here help you
build a strong foundation in react we'll
talk about building components rendering
markup with jsx managing State passing
input to components where props and
debugging react applications so let's
jump in and get started
[Music]
all right in this lesson we're going to
create a basic list group component
first we're going to install bootstrap
to give our application a modern look
and feel now in case you are not
familiar with bootstrap it's a very
popular CSS library that gives us a
bunch of CSS classes for styling our
applications
so here we open up our terminal window
you can see our web server is running so
we open a new terminal window and run
npm install bootstrap the version that
I'm using in this video is
5.2.3 let's go ahead
good now we need to import it in one of
our CSS files so here in the source
folder we have a couple of CSS files one
is app.css
this file contains all the styles for
our app component we don't need any of
this stuff anymore
delete
we also have
index.css where we have Global styles
for our application again we don't need
any of these Styles here because all of
them were generated by wheat so we can
delete this file entirely
now let's go to main.tsx
you can see that our index.css file was
imported here we're going to replace
this line with import bootstrap slash
dist slash CSS slash bootstrap.css
okay now to make sure that bootstrap is
imported properly we go back to the
browser so previously hello world was in
the middle of the page and we had a
different font now it's up here and it
has a different font beautiful so now
let's create a list group component
so back to our project here in the
source folder we add a new folder called
components this is not necessary but by
convention we put all of our components
in a folder called components now here
we add a new file
called list group dot TSX again pay
attention to how I have named this file
here we're following the Pascal
convention so we're capitalizing the
first letter of each word
now in this file with declare a function
called list group
for now let's just return an H1 element
list group
and Export this from this module
next we need to import this in our app
component so if you're on Mac press
command and P if you are on Windows
press Ctrl NP here we can search for
files like app.tsx okay now we don't
need the message component anymore so
let's remove the slide instead we're
going to import our list group com
component okay and we're going to use
that right here
okay let's make sure everything is
working up to this point so here in the
browser we have our list group component
beautiful now finally we need to display
a list of items here and for that we're
going to borrow some code from bootstrap
so head over to
getboosttrap.com go to the docs
and on the left side
under component section
you should find list group so
this is a list group component in
bootstrap
to create a list like this we need to
use
this markup so we need a UL with this
class and a bunch of list items with
these classes so we copy this we go back
to our list group component and return
this markup now here we get a bunch of
Errors because class is a reserved
keyword in JavaScript or typescript so
here we need to rename all these classes
to class name now let me show you
another shortcut let's rewrite this back
we select the class keyword now if
you're on Mac press command and D if
you're on Windows press Ctrl and d and
with this we select the next occurrence
of the selected keyword so now we have
multiple cursors we can press command
and d one more time and again and again
and again now all of these are selected
so we delete them and type class name
then we press escape a couple of times
to disable multi-cursor editing okay now
finally I save the changes but my code
is not reformatted so let's investigate
why this is happening
on the top Under The View menu
we go to the command palette note the
shortcut on Mac it's shift command and P
and here we search for format document
okay here we have an error saying there
are multiple formatters for typescript
jsx files so let's click on configure
and here we're going to use prettier as
our default code formatter good now this
file is formatted Beautiful Just note
that prelayer automatically wrapped our
jsx markup in parenthesis this is
necessary to break the markup into
multiple lines so if you're not using vs
code with prettier be sure to add the
left bracket in front of the return
keyword so you can spread your jsx into
multiple lines so now back to the
browser here's our list group component
but this is pretty boring this doesn't
have any functionality and it doesn't
allow us to render or display these
items dynamically so we're going to
solve these issues one by one over the
next few lessons
[Music]
now what if we want to add a heading
here well if we add another element here
like an H1
we get a bunch of Errors because in
react a component cannot return more
than one element so earlier I told you
that this H1 expression that we have
here eventually gets compiled to
JavaScript so this line gets translated
to something like
react.createelement with H1 being the
type of the element
the same thing will happen for the
second element so in this function we
are returning multiple elements and this
is not allowed in react now to solve
this problem we have a couple of
different ways one simple way is to wrap
this entire expression inside a div or
another element
so let me show you another shortcut we
select all this code
then we bring up the command palette so
we go to the view menu and bring up the
command palette or better we use the
shortcut
and here we search for wrap with
abbreviation now we press enter
and here we specify the type of element
that we want to use to wrap this entire
code so div
enter done okay so that's one way but
we're adding one extra element in the
Dom purely for making react happy this
is unnecessary a better way is to use a
fragment so on the top
we import fragment
from react make sure to put it in braces
now we replace the div with a fragment
so just like before I've selected the
div element now we can press command and
D to select the other div and now with
multiple cursors we can edit both of
them
in one go okay
now with this change when this component
is rendered on the screen we're not
going to have an additional element like
a div in the Dom okay now there is even
a better way to achieve the same result
we have a shorter syntax we don't have
to import the fragment component from
react so let's delete this line
and we select the fragment tags both of
them and remove them
so if you add empty angle brackets we're
telling react to use a fragment to wrap
all these children
now back to the browser so here's our
heading and our items beautiful
[Music]
now this list is kind of useless because
we have hard-coded these items in our
markup what if you want to render a list
of items dynamically well let's declare
a constant
called items and set it to an array of
strings here we can use the name of
series like New York
San Francisco Tokyo
London
and Paris
now in jsx we don't have a for Loop so
we cannot write code like four item in
items render whatever it doesn't work
that way so we have to use a different
technique in JavaScript as you probably
know arrays have a method called map for
mapping or converting each item to an
item of a different type
so if you type items dot map
here we can pass an arrow function we
can say take each item and convert it to
an item of a different type
so here we want to convert each item to
an Li element so here we type Li and
inside the tags we want to render or
display the item itself earlier I told
you that in jsx we use curly braces to
render data dynamically so here we
render the item itself okay now
we're going to delete all these list
items
and instead we're going to bring down
this piece of code
however we get a compilation error
because this expression is not allowed
in the middle of a jsx markup in jsx we
can only use HTML elements or other
react components so to render data
dynamically we need to wrap this
expression in braces
okay
now save the changes
our code got reformatted so Predator
plugin broke down our code into multiple
lines and added parentheses to wrap them
now back to the browser here's our list
of cities beautiful while reviewing this
video I just realized that I made a
mistake earlier and forgot to apply a
CSS class to our list items that's why
we have lost styling here but don't
worry I'll fix that in a later video
however if we right click anywhere on
this page and go to inspect
this is Chrome developer tools you
should probably be familiar with it here
on the console tab we have a warning
saying eat child in a list should have a
unique key prop what does this mean well
back to our code this is where we are
mapping each item to a list item
here the warning is saying that each
list item should have a key prop or key
property that uniquely identifies that
item react needs this to keep track of
our items so later when we add or remove
items dynamically react knows what part
of the page should be updated so when
rendering a list of items using the map
method we should give each item a unique
key now in this case each item has a
unique string so we can use the item
itself as a unique key but in a real
world application where we retrieve
items from an API quite often each item
has a property like ID
we don't have that in this case so we
don't have to worry about it now back to
the browser let's refresh the warning is
gone and here's our list beautiful
[Music]
sometimes we want to render different
content based on certain conditions for
example here we can add an if statement
and say if items the length equals zero
perhaps we want to show the user a
different message so here we can return
a completely different markup for
example we can add a paragraph and here
we say no item found
now to make sure this works I'm going to
change the constant to a variable so we
can reassign this on the next line
okay now back in the browser so here we
have no item found beautiful but our
heading is gone
so we can come back here and add our
heading as well
list and now we need to wrap this entire
expression inside a fragment so let's
add a fragment
okay now if I save the changes Predator
reformats our code and here once again
we have parenthesis for spreading this
code over multiple lines
with this our heading is back but I
don't like this implementation because
we have a bit of duplication and
generally speaking duplication in code
is not considered a good practice so let
me show you a different way to achieve
the same result
we're going to get rid of the if
statement
instead we're going to render things
conditionally inside our jsx expression
however inside this jsx expression we
cannot write an if statement because as
I told you earlier here we can only use
HTML elements or other react components
The Only Exception is
braces with braces we can render
anything dynamically so here we can use
the ternary operator in JavaScript so we
start with our condition items the
length equals zero then we type a
question mark if this condition is true
we're going to return a paragraph with
this message
otherwise
we're going to return null meaning
nothing will be rendered with this
we have the same result as before and
our implementation is a little bit more
concise
now sometimes this logic can get a
little bit too complicated and it can
pollute our jsx markup in those cases we
can always extract this logic and store
it in a separate variable or constant
for example here we can declare a
constant called message
Now we move this expression
right here
and then we can simply render our
message constant in our jsx markup so
now our j6 markup is a little bit
cleaner now we can also move this logic
inside a function for example we can
declare a function called get message
and here I'm using the arrow function
syntax
now we can move this logic right here
and now we don't need this constant
anymore
so here we have a function and we can
call that function to get the right
message now the benefit of using F
function in this case is that our
functions can have parameters so perhaps
we can get different messages depending
on different conditions so here we can
pass different arguments like one or
whatever and get a different message if
you don't have that scenario it's better
to use a constant in this case
now let me revert this code back to the
previous state
I'm going to move this expression
right here
so I can show you a more concise way to
write the same code
so let's remove this function
okay look this piece of code is fine and
it works but the part that bugs me a
little bit is the second part returning
null here let me show you a better way
to write this code we start with our
condition items that length we call zero
now instead of using the ternary
operator instead of using a question
mark we do a logical and between this
condition and the value that we want to
return if this condition is true that is
the paragraph element
okay
with this implementation we don't have
the null keyword and our code is a
little bit more concise but how does
this work well let's go back to the
browser and open up Chrome developer
tools
here in the console tab this is going to
be our JavaScript playground if you have
a Boolean value like true
and perform a logical and with another
value like one
see what happened the result of this
entire expression is equal to the second
value what if we type true and mosh
the result of the expression is mosh now
what if you have false and mush
the result is false so what does this
mean well that means if our condition is
true the result of this entire
expression will be our paragraph element
but if the condition is false the result
of the entire expression will be false
and nothing will be rendered on the
screen so this is a very common
technique react developers use to render
content dynamically okay with this we
can remove the slide and this is our
final implementation
foreign
[Music]
now let's see how we can handle click
events in a component first I'm going to
remove this line so we bring back our
items good now I just realized that
earlier I made a mistake and forgot to
apply one of the Boost trap classes to
these items so back to our code this is
where we're rendering a list item we
should give this a class of
list Dash group Dash item
okay that's better now we want to be
able to click on each item and see it on
the console in react each element has a
property or a prop called on click
so here is that on click to braces now
inside the braces we can write an arrow
function so a function with no
parameters
and here we can just say console.log
clicked as simple as that now I'm going
to save the changes so the code is
reformatted so now each property or each
prop is on a separate line okay now back
to the browser we had an internal server
error from this web server don't worry
about it just refresh error is gone now
if we click on each item we see this
message beautiful but what if you want
to see the actual item that was clicked
well
look this is where we are mapping each
item to a list item so when creating
this list item we have access to each
item because we are using that item as
the key of each list item right so
instead of logging clicked we can simply
log item
now if we click on each item we see it
on the console beautiful and by the way
when mapping items we can optionally add
a second parameter as an index and with
this we can see the index of the item
that was clicked so let me show you I'm
going to clear the console now if we
click on each item we can also see its
index in the array lovely
now this Arrow function can optionally
have a parameter that represents the
browser event we can call that e or
event whatever we prefer
now let's log this on the console and
see what we get
so clear click look the type of this
object is synthetic base event I know
it's a fancy term this is one of the
built-in classes in react because
different browsers have different
implementations of event objects so to
make this cross browser react team have
created a class called synthetic bass
event that is a wrapper around the
native browser event object now if you
look at the properties of this object
you see properties that you're probably
familiar with for example we have client
X and client Y which represent the
position where we clicked
we also have type which represents the
type of event we have Target which is
the element where I clicked that was a
list item with this class
now our event handling logic here is
very simple it's just a one-liner so
writing a function here is totally fine
but if our logic gets more complex we
don't want to write that logic here in
the middle of a jsx markup instead we
should move that logic into a separate
function so
in this component we declare a function
by convention we start with the word
handle and then we specify the type of
event in this case click
now we set this to
let's grab this piece of code
and paste it here
now we have a warning from the
typescript compiler saying parameter
event implicitly has an any type so the
reason I know this is a typescript issue
is that here we have Ts that is short
for typescript but why are we getting
this warning well the reason we're
getting this error is that the
typescript compiler doesn't know the
type of this parameter is event a number
is it a string is it an object what is
it so if we use the dot operator we
cannot see any properties of this event
object this is where we need to specify
the type of our parameter so we get Auto
completion and type safety so let's
hover our Mouse over this event
parameter look the type of this
parameter is react.mouse event so when
we pass an inline function here the
typescript compiler knows the type of
our parameter that is why we didn't get
a warning earlier but in this case we're
declaring a brand new function the
typescript compiler doesn't know where
we're going to use this so it doesn't
know the type of this parameter so we
should go on the top add import
mouse event from react
and then after the parameter we type a
colon followed by its type this is
called type annotation in typescript so
we type annotation we can specify the
type of variables parameters and so on
now with this annotation
if we use the dot operator we can see
all the properties of this mouse event
object this is one of the beauties of
typescript we get Auto completion we get
type safety and it's easier to refactor
or restructure our code you'll see more
examples as we go through the quest
so let's finish this example
so now we have a function here this
function is called an event handler
because its job is handling an event in
this case The Click event
now over here
we're going to remove this inline
function and simply reference our handle
click function note that I'm not calling
this function we don't want to call it
we just want to pass a reference so
you're telling react that whenever the
user clicks on this event this function
should be caught so calling this
function will be done later at runtime
now let's make sure everything is
working so let's click on one of these
items beautiful
[Music]
all right now the next step when we
click on an item we want to highlight it
to do that we have a CSS class in
bootstrap called active so back to our
code this is where we are rendering a
list item I'm going to give this a
second class called active now
look all of them are highlighted or
activated this is not what we want we
want to highlight one item at a time to
do that we need a variable to keep track
of the index of the selected item so
back to our component
let's declare a variable
called selected index we can initialize
this to negative one that means no item
is selected if we set this to zero that
means the first item should be selected
now down here
we can render this active class
dynamically so we're going to use the
same technique you learned in the
conditional rendering lesson so I'm
going to remove
the quotations here we add braces so we
render content dynamically here we can
check the selected index if it equals
the index of the current item
that means that items should be active
so we're going to give it two classes
list group item and active
otherwise we should only give it the
list group item class
this is a very simple way to add classes
dynamically there are other more
Advanced Techniques let's not worry
about them at this stage let's just see
if this works or not so back to the
browser now the first item is selected
beautiful now when we click on an item
we should change the selected index so
this is very good handling the click
event now in this case we need a simple
error function to update the selected
index so I'm going to get rid of this
handle click function so we deleted from
here
as well as here
we should also delete
the mouse event import on the top okay
so always pay attention to cleaning up
your code so here we write a simple
arrow function and here we set selected
index to the index of the current item
okay now back to the browser let's click
on item
nothing is happening why is that well
this variable we have declared here is
local to this function component so
react is not aware of it it's like a
little secret inside this component to
solve this problem we should tell react
that this component is going to have
data or state that might change over
time and to do that we have to use one
of the built-in functions in react
called use state so when we type this
here and press enter it gets imported on
the top okay now this function is called
a hook
a hook is a function that allows us to
tap into built-in features in react so
this is called the statehook we have
other hooks that you will learn about as
we go through this course using the
state hook we can tell react that this
component can have data or state that
will change over time so instead of
declaring a variable this way we're
going to call this function
that we're going to initialize our
variable we can give it the initial
value of negative one
now this returns an array
in this array we're going to have two
elements the first element is going to
be a variable like our selected index
variable
and the second element is going to be an
updater function using that updater
function we can update this variable and
at that point react will be notified so
it knows that the state of our component
is changed and then it will re-render
our component which causes the Dom to be
updated under the hood so as I told you
earlier in the course with react we
almost never have to touch the Dom
directly we think in terms of components
that have state when the state of a
component changes react will update the
Dom to match the new component State
okay now let's see how we can use this
so instead of working with two
individual elements here it's easier to
destructure this array into two elements
so the first element is going to be
select an index and the second element
is going to be a function which we call
set selected Index this is a convention
we follow in react applications so here
we have a state variable called selected
index and here we have a function called
set selected index now as another
example we can use the state hook to
declare another variable called name so
we call view state
we can initialize the name to an empty
string this returns an array which we
can destructure into two elements name
and set name
that's the idea now in this case we
don't need a name variable so let's
delete this line
and the comment and the slide
so here we have a state variable called
selected index now down here
to update this variable we're going to
call set selected index and give it
the new index
with this when we click on an item it
gets selected beautiful
so this is how we tell react that our
component can have state that will
change over time now one thing you need
to know about component state is that
each component is going to have its own
state so if we go back to our app
component and add another instance of
our list group here
each list group is going to have its own
state so
in our first list group Paris is
selected but in our second list group
nothing is selected because this
component has its own state so there
will be independent of each other okay
now we don't need to list groups here so
I'm going to remove the second one
[Music]
so we're showing a list of cities here
but what if we want to show a list of
names or a list of colors we don't want
to recreate a separate component for
each type of list right so how can we
make this component reusable this is
where we use props or properties props
are the inputs to our components so back
to our code
instead of defining these items here we
should be able to pass them as an input
to this component just like how we can
call a function and give it an argument
now the same principle applies to this
heading instead of hard coding this
label here it would be nicer if you
could pass different labels like cities
names colors and so on so how can we do
that well first we need to decide the
shape of the input to this component so
we should be able to pass an object with
two properties items which is going to
be an array and heading which is going
to be a string to do that we use one of
the typescript features called an
interface using an interface we can
Define the shape or the interface of an
object so you start with the interface
keyword give this a name by conventional
use props but some people prefer to
prefix it with the name of the component
so list group props either way it works
I prefer a shorter name
that he Embraces would define various
properties and their types so we want to
have items which is going to be an array
of strings so string array and heading
which is going to be a string
so once again we're using type
annotation to specify the type of
various properties okay
now we don't need this comment anymore
next we give this function a parameter
called props of type props
now if we go back to our app component
we have two compilation errors saying
type is missing the following properties
from type props items and heading so the
typescript compiler is saying that this
component expects two properties which
are items and heading we have not
specified them this is yet another
benefit of using typescript so the
typescript compiler is reminding us that
we have forgotten to pass these props so
it's helping us to catch a bunch of
potential errors at compile time before
running our application
so back to our list group
I'm going to grab the list of items and
move it to
the app component
now we can pass this just like how we
said the attributes of HTML element so
we set items to we add braces so we can
reference this variable
now similarly we should also set the
heading to
series
now in this case I'm using quotation
marks but we could also wrap this in
braces but this is unnecessary because
we're passing a static value
so let's rewrite it that's better now
the compilation error is gone so back to
our list group component
now there are a couple of issues here we
don't have the items variable anymore so
we have to prefix it with props dot okay
but we have to do the same thing here
this looks a little bit repetitive and
ugly a better solution is to destructure
this parameter right here so we remove
the name and add braces and pick the two
properties items and heading now we have
access to these properties anywhere in
this function so we can remove props Dot
and our code is cleaner
now the final part is to replace the
list with
The Heading dynamically okay
back to the browser our app still
working so using props we can pass data
to our components
foreign
our list group component is in a fairly
good shape when we click an item it gets
selected but in a real world application
quite often something should happen
after an item is selected perhaps we
want to filter a list of objects or
maybe we want to redirect the user to a
different page so something should
happen after an item is selected now
what happens is different from one
application to another there is no
one-size-fits all so we don't want to
implement that piece of logic inside our
list group component because then it's
not going to be a reusable component
anymore so we need a mechanism to notify
the consumer or the parent of this
component that an item is selected in
this case the consumer or the parent of
this component is our app component this
is where we are using the list group so
when an item is selected we should
notify the app component that an item is
selected but how can we implement this
well that's very easy so look at our
props object currently we have two
properties and we are using these to
pass data to our list group component
now we can add a third property which is
going to be a function now down here
when we select an item we're going to
call that function with this our app
component will be notified let me show
you how this works it's really simple
so first let's define the signature of
that function let's imagine that we want
a function that takes a parameter called
item of type string that is the selected
item
and returns void so it doesn't return a
value so here we have a property by
convention we start with the word on and
then we specify the type of event in
this case select item this is just like
the on click prop that you saw earlier
but here we have on select item
so we have a property called unselect
item the type of this property is a
function
that has a parameter of type string and
returns void okay
with that now we have a compilation
error in our app component how can I
tell look it turned red also we can go
to the top under View
open up the problems panel
so the typescript compiler is telling us
that in the app component we have
forgotten to pass this prop so once
again the typescript compiler is helping
us catch a lot of potential problems
early on so let's go back to our app
component
now here we set on select item we can
write an inline function here just like
how we handled the click event earlier
or we can write a separate event handler
if you want to write a separate event
handler
again just like before by convention we
start with the word handle and then we
specify the type of event select item
now we set this to a function with a
signature that we just defined so item
of type string goes to nothing now here
we can just do a console.log
and print the item on the console now we
can pass that down here
handle select item now the last step
back to our list group over here when
destructuring the props we should pick
the on select item property
and then
When selecting an item
we should call this function
so we call this and pass the selected
item which is
this item variable here
now back to the browser when we select
an item the app component is notified
and it's now printing the name of the
selected City on the console
[Music]
now let's talk about the differences and
similarities between props and state as
you have seen props or properties are
the inputs or arguments passed to a
component State on the other hand is the
internal data managed by a component
that can change over time so Props are
like functional arguments and state is
like local variables inside a function
now one thing you need to know about
props is that we should treat them as
immutable what does this mean in English
to mute it something means to change it
so mutable means changeable and
immutable means unchangeable so when we
say something is immutable it means it's
read only so in our list group component
here are our props we should not change
any of them here we should not set the
heading to a new value if we do so
nothing is going to happen nobody is
going to yell at us but this is an
anti-pattern in react you will
understand the philosophy behind this as
we go through the course this is based
on functional programming principles so
we should treat props as immutable or
unchangeable State on the other hand is
mutable and that's the whole purpose of
using State variables we want to tell
react that this component has data that
can change over time right so these were
the differences between State and props
but one thing they both have in common
is that anytime they change react will
re-render our component and update the
Dom accordingly
[Music]
sometimes we want to pass children to a
component just like how we are passing a
list group to this div element here so
in this lesson I'm going to show you how
to create a component that can accept
children
so
back to our components folder let's add
a new file called alert.tsx
now let me show you a shortcut instead
of defining a function here and then
exporting it
we can use a shortcut
so here in the extensions panel if you
search for es7 plus you will find this
extension
it's called es7 plus react Redux and
react native it's a very popular
extension look at how many times it's
been downloaded so once you install this
you can type RAF CE now it's not coming
up I don't know why so let's close this
file and open it one more time
now let's try again good so this is
short for react Arrow function component
export so if you press enter we get this
code snippet lovely now here we have
multi-cursor editing so we can change
the name of the component
if you made a mistake but in this case
no so let's go back to alert and then we
press escape to exit multi-cursor
editing good now we don't need to import
react on the top
so here's our alert component now let's
add this to our app component and test
our application up to this point so we
go to the app component
that we're done with our list group for
now so let's delete all the code here
now inside this div we want to add an
alert so let's add alert
good now back to the browser so here's
our alert component lovely now to
display an alert we're going to borrow
some code from bootstrap
so head over to bootstrap website go to
the docs and here on the left side under
components
you should find alerts so let's find out
the markup we need to render an alert
like this so that is very
straightforward we need a div with two
classes the base class is alert that all
of these have the second class is a
class that determines the color so if
you use alert primary we get this Blue
Alert by default
so back to our alert component let's
give this div a couple of classes alert
and alert
primary
all right this is what we get lovely now
we need to make this Dynamic so we want
to pass the text as a prop to do that
first we need to use an interface to
define the shape of props so Props here
we need a property called text of type
string
then we add a parameter here of type
props
in fact it's better to de-structure this
and grab the text property
and render it right here
okay now back to our app component
here we should set the text to something
like
hello world
before going further Let's test our
implementation
okay it's working lovely
now while this works this way of passing
text to this component is kind of ugly
what if the text is a bit too long what
if you want to pass HTML content passing
HTML content has a prop like this is
kind of ugly wouldn't that be nicer if
you could pass text as a child to this
component let me show you how so we want
to be able to use this component like
this this is better so to do that we go
back to our component
now there is a special prop that all
components support and it's called
children so if you simply rename text to
children now we can pass our text as a
child to this component but we have a
couple of Errors because we need to
rename these two references to text so
I'm going to rename them both in one go
good there is our con and our
application is still working lovely now
what if you want to pass HTML content
here
we get a compilation error because we
told the typescript compiler
that the children prop is a string but
in this case we are not passing a string
we are passing a more complex structure
to solve this problem
we need to change the type of children
from string to react node now here in
order completion box we have two react
nodes the first one is an abbreviation
so if you press enter here we get this
markup this is not what we want we want
the second item this is the react node
class defined in the react module so
let's import it on the top like this and
with that we can pass HTML content to
our alert component
so to recap using the children prop we
can pass children to a component
[Music]
all right the last thing we're going to
cover in this section is react Dev tools
which is a very useful browser extension
for inspecting and analyzing our react
applications it's available for Chrome
Firefox and Microsoft Edge so simply
Google reactive upper tools or reactive
tools and install it in your browser
once you do that then go back to this
page here in the dev tools you will see
a couple of new tabs one is components
the other is profiler now look at the
components tab here we can see the
hierarchy of our components so on the
top we have the app component and below
that we have the alert component so this
is the component tree that react takes
and renders in the actual Dom now down
here you can see the props of this
component so here we have the children
prop which is set to an array of two
objects the first element is a string
the second element is a span object
below that you can see how this
component was rendered so it was
rendered by the app component now
finally down here you can see where this
component is implemented in this case in
app.tsx but that is not visible in my
recording window now in a large
application with a lot of components
finding the right component might be a
little bit tedious so we can always
search for them here also here we have a
couple more useful features for example
we can select a component and inspect
the matching Dom element so if you click
this and then go to the elements tab
we can see the matching Dom element that
represents this component now back to
the components tab
there's also another useful feature here
so we can select the component and click
on this icon to see its source code so
in this case this is our alert component
so it's pretty straightforward it
doesn't really need more explanation as
you're building applications if you want
to better understand your components and
how they work if you want to inspect
their props and state use reactive tools
[Music]
all right now it's your turn I want you
to create a bootstrap button component
so here on bootstrap website if you look
at the buttons page you can see we have
different types of buttons now for this
exercise I want you to only focus on
this set of buttons because here we have
other flavors don't worry about them
don't worry about the sizes or outline
buttons just simple bootstrap buttons
now the markup is really simple each
button has two classes one is BTN which
is a base class and the other is a class
that identifies the color so by default
primary buttons are blue secondary
buttons are gray and so on so I want you
to encapsulate this markup inside a
reusable react component so span a few
minutes on this then be sure to come
back and see my solution as I'll be
showing you a really cool typescript
technique
all right here in the components folder
we add a new file called button.tsx
now we use our shortcut rough C
good next we rename div to button and
give it a couple of classes now I'm
typing a little bit too fast because I'm
assuming you have already done your
exercise so I'm not expecting you to
code along with me okay so here we have
two classes for now let's just stick to
primary buttons and then we make this
Dynamic so this is the approach I want
you to take while building applications
one step at a time don't try to do too
many things together okay so for now I
just want to render a basic button I
don't even want to make the text Dynamic
let's see if our application works up to
this point
so we go to our app component
and in this div we add a button
component okay
now back to the browser here's our
button beautiful so the first step is
done now the next step is to make the
text or label Dynamic so back to our
button component here we need to use an
interface to define the shape of props
now I want to use the children prop here
so we can pass the text just like HTML
buttons so I'm going to set the type of
children to string
we could also use react node but I
prefer to use a string in this case
next we add the props parameter and
de-structure it
and finally we render children right
here
good now we go back to our app component
and give this button a label like my
button
let's see if our application is working
good again don't worry about these
errors everything is good so far next we
need to handle the click event because
in a real run application when this
button is clicked we have to do
something what happens next should not
be implemented in our button component
otherwise it's not going to be reusable
okay so back to the button component
here in the props object we need to add
a new prop called on click
and this is going to be a function with
no parameters that returns void
next we added here on click and finally
we set the on click prop of the HTML
button to the function that is passed
from the outside so on click is going to
be a function that is passed from the
outside so the parent of this component
is going to pass that function we get
that function and simply pass it to this
HTML button okay now in our app
component we have an arrow because we
haven't set the unclick prop
for now I just want to add a simple
inline function
and log clicked on the console
let's see if our application is working
so click click click beautiful now the
final step is implementing the color so
we want to be able to pass the color of
this button from the outside like this
so we can set it to primary or secondary
or whatever
so let's add a new prop called color
of type string I prefer to sort these
props in alphabetical order it makes our
code a little bit easier to read That's
nicer
next we add the color prop here and we
use that to add the second CSS class
dynamically so we wrap the codes in
braces
we terminate our string here and then
append the color right after okay we
have a compilation error because this
quotation mark is unnecessary good now
in our app component we have set the
color to secondary let's see if it's
working good if we change it to primary
it's still working great now what if you
want to give this a default value so we
don't have to specify the color every
single time
to do that we go to our button class and
give this color prop that default value
of primary
with that we get this blue button
beautiful however we have a compilation
error in the app component saying
property color is missing in type so
even though
we gave this prop a default value the
typescript compiler still expects us to
set the color prop when using the button
component to solve this problem we have
to tell the typescript compiler that
this property is optional so we add a
question mark after and now
the area is gone okay now what if we
pass an invalid color here like let's
say react what happens
well there are no errors or Warnings but
this is not how a button supposed to
look like this is where we can use
typescript to catch this kind of bugs
early on before we deploy our
application let me show you how so back
to our button component instead of
setting the type of color to string we
can set it to a string literal like
primary and with this we can only set
this property to the value of primary so
if you set it to something else we get a
compilation error now we don't want to
be limited to primary we want to support
other colors so here we can use the
union operator and add a second string
literal so we can add secondary we can
also add danger success and other
bootstrap colors with this
implementation we can only set this
property to one of these values and
nothing else so if we set it to react
for example the typescript compiler is
yelling at us we can see this file
turned red and also if we go to the view
menu and look at the problems panel we
can see that we have a problem in this
file so now if we change this back to
primary or secondary or one of the
supported values the arrow goes away
[Music]
all right here's the next exercise I
want you to write the necessary code so
when we click this button we see an
alert and here we have a close button
when we click it the alert disappears
this is a great exercise for you to
practice pretty much everything you have
learned in this section now let me give
you a hint on bootstrap website
look at the alerts component on the
right side you will find a link called
dismissing now
down here
you can see that to make an alert
dismissable you need to add a class here
called alert dismissable you should also
add
a button this is the close button with
this class and other stuff
so spend a few minutes on this then come
back see my solution
all right this is so much fun so here in
the app component right above our button
we're going to add an alert
and here let's say my alert now before
going any further I just want to test
our implementation up to this point I
don't want to show or hide anything I
just want to make sure if we can see an
alert beautiful now we don't want to
show this at all times we want to show
this only when this button is clicked to
do that we need a state variable
here in the app component that
determines the visibility of the alert
so we want to render this part only if
that variable is true
so here we need to use the state hook
to declare a state variable we
initialize it to false so our alert is
initially hidden now this returns an
array that we can de-structure into two
elements we can call the first one alert
visible
and the second one set alert visibility
you could call them anything whatever
you prefer now we want to render
the alert only if alert is visible alert
visible is true
sober wrap is Embraces and perform a
logical and between alert visible and
this expression so alert visible
and okay
now when we click the button instead of
logging something on the console we
simply call set alert visibility to true
so set alert visibility to true
let's see if our implementation is
working
all right now we click and here's our
alert beautiful let me explain how this
works
so when we click on this button this
function is called at this point we set
our state variable to true so the state
of this component is changed and react
will re-render this component and all
its children this is why we see the
alert now we need to add the close
button to the alert so here on bootstrap
website I'm going to copy some code
I'm going to grab this class so there
are no typos let's add that
to our alert
component
okay we also need a close button
I'm going to copy that from this website
as well
paste it here
we just need to rename class to class
name
good now once again before we implement
the hiding logic first we want to test
our application and make sure that we
can see the close button so one more
time click okay here's a close button
now the final part when we click this
button we should notify the app
component that the user clicked on this
button at that point the app component
will set the visibility of the alert to
false which will cause the app component
and all its children to re-render
so to notify the parent or the consumer
of this component that the user has
clicked on the close button here we need
to add a new prop
on lows so remember the convention we
start with the word on and then we
specify the event in this case close
this is going to be a function with no
parameters that returns void
now we need to add that here
and finally
when the user clicks on this button
so unclick we simply call on close and
more accurately we are not calling this
function we're not calling it like this
we're just setting on click to unclose
so on close will be a function that is
passed from the outside from the parent
we pass that function to this prop when
the user clicks on the close button
react will call that function for us
okay now we have a completion error in
the app component because we haven't set
the unclose prop
pass
and error function and set alert
visibility
to false
as simple as that okay now
the final test click click lovely
congratulations you made it to the end
of this tutorial I hope you found it
helpful and learned a lot about react
but wait there is more this tutorial was
just a small part of my complete react
course the full course includes eight
hours of content and is jam-packed with
the latest tools and best practices
you'll get access to exercises summary
notes cheat sheets and a project I
showed you at the beginning of this
tutorial and if you're not completely
satisfied no problem the course comes
with a 30-day money-back guarantee so
there is no risk in giving it a try so
if you are serious about master react I
encourage you to check out the full
course using the link below this video
thanks for watching and happy coding
[Music]

Each question must have 4 options, 1 correct answer, focusing on vocabulary, phrases, or concepts. Questions should be technical, high-quality, and efficient, with clear wording and plausible distractors. Format each question as: 
1. Question text
A) Option1
B) Option2
C) Option3
D) Option4
Correct: C
Assistant:
Assistant: