Hang tight while we fetch the video data and transcripts. This only takes a moment.
Connecting to YouTube player…
Fetching transcript data…
We’ll display the transcript, summary, and all view options as soon as everything loads.
Next steps
Loading transcript tools…
React Tutorial Full Course - Beginner to Pro (React 19, 2025) | SuperSimpleDev | YouTubeToText
YouTube Transcript: React Tutorial Full Course - Beginner to Pro (React 19, 2025)
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Video Summary
Summary Requirements
Core Theme
This comprehensive React course covers building complex websites from the ground up, starting with fundamental concepts and progressing to advanced features like backend integration, deployment, TypeScript, and AI. The course emphasizes practical application through two major projects: a chatbot and an e-commerce platform, equipping learners with the skills to create dynamic and interactive web applications.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
Welcome to the React full course. In
this course, we'll learn how to build
complex websites with React. And by the
end of this course, we'll build two
projects, a chatbot and an e-commerce project.
project.
We'll start from the very basics of
React like how to set up React with
JavaScript and we'll learn each feature
in detail step by step. We'll learn the
major features of React as well as
advanced features like how to use React
with a backend, deploy React to the
internet with AWS,
React with TypeScript, and React with AI.
AI.
You can find the sections of this course
below the video here and here.
You can also change the speed of the
And you can find subtitles for different
And after each lesson, I'll give you a
bunch of exercises that you can do on
your own to practice the skills that we
learned. In total, this course has over
125 exercises.
So, with that being said, let's get started.
I'm going to be doing this course on
Windows, but the steps are the same if
you're using a Mac. Before we begin,
we're going to need two pieces of
software. Number one is a web browser,
and number two is a code editor. The
most popular web browser for web
development is Google Chrome and the
most popular code editor for web
development is VS Code. So I recommend
using these. If you need to install
these, you can search for them on Google.
Google.
Click the link and follow the
Now you'll also need to know the basics
of JavaScript.
React is built on JavaScript and we're
going to be writing a lot of JavaScript
when using React. Don't worry, you don't
need to be an expert in JavaScript. You
just need to know some basic features
like the ones listed here. And I'll also
try to review JavaScript features as we
go through this course. If you want to
learn JavaScript in more detail, you can
check out my JavaScript full course in
the video description.
Finally, you'll need to know the basics
of HTML.
When using React, we're going to be
writing a lot of HTML.
Again, don't worry. You don't need to be
an expert in HTML. You just need to know
some basic features like the ones listed
here. And I'll try my best to review
HTML features as we go through this course.
course.
If you want to learn HTML in more
detail, you can check out my HTML and
CSS full course in the video description.
description.
If you have any issues in this course,
you can check the troubleshooting guide
in the description.
Now that we have all the requirements
that we need, we're ready to learn React.
On our computer, we're going to go to
our desktop and we're going to create a
new folder. So here I'm going to
rightclick and create a new folder.
And this folder is going to contain all
the code that we write in this course.
So let's name it react dashc course and
press enter.
Next we're going to open this folder in
our code editor VS Code. So, we'll open
VS Code
and then click File,
Open Folder
and select the folder we just created.
So, I created my folder on the desktop
and it's this folder right here. So,
we'll select this folder and then click
select folder
and we can close this welcome page.
So, now let's create a new file to learn
React. So up here, we're going to create
a new file and we're going to name it react-basics.html
and press enter.
As a review, a file that ends inh
contains HTML code and this creates a website.
website.
Next, we're going to create a website
and we're going to set up React on this
website. Now, to save time, we're
actually going to download some starting code.
code.
So, we're going to open our web browser,
Google Chrome.
And at the top, we're going to type
super simple.dev/react-basics [Music]
[Music]
and press enter.
So, this page has some starting HTML
code we can use to learn React. So now
let's click on this page and we're going
to select all this code by pressing
control A on Windows or command A on Mac
and we're going to copy paste this code
into our file. So we'll right click
copy. We can also press control C on
Windows or command C on Mac
and then open our code editor and then
inside this HTML file we're going to
rightclick and paste. We can also press
control +VV on Windows or commandV on Mac.
And finally let's save this file by
pressing control S on Windows or command
Next, we're going to open this file in
our web browser to see what the website
looks like. To make this easier, we're
going to use a VS Code extension called
Live Server. So, the benefit of live
server is it will automatically refresh
the web page whenever we change some
code. So, it's going to make our coding easier.
easier.
If you don't have live server installed,
you can click the extension section and
then search for live server at the top
Once liveer is installed, we're going to
go back to our code and we're going to
open this file in live server by
rightclicking in the file and click open
So live server will open the HTML file
using our browser and it's going to
create a website and we should see the
message welcome to super simple dev
react course on this website.
So this message is displayed by React
and this means that we successfully set
up React on this website.
Now, let's go back to VS Code.
And this is the minimum amount of code
that we need to set up React. We're
going to go through this code step by
step to make sure that you understand
everything here.
First of all, what is React? React is an
external library that helps us create
websites easier. Now, there are two
parts to this statement. Number one,
React is an external library. And number
two, React helps us create websites
easier. Let's go through these one by
one. So number one, React is an external
library. First, let's review what an
external library is. So here we have a
bunch of HTML code. An HTML code creates
a website. And now, how do we load
JavaScript onto our website? There are
several ways to load JavaScript on a
website. One way is to use an HTML
element called a script element.
For example, under this div element,
let's create a script element using less
than script greater than and less
than/cript greater than. But our code
editor might autocomplete this for us.
Now, inside this script element, we can
write some JavaScript code. For example, console.log
console.log
the string hello.
As a review, this code displays the text
hello in the console. So now let's save
and we're going to open the console in
our browser. So we'll open Google Chrome
and Liveer is going to automatically
refresh the page and run that JavaScript
code. And now we're going to check the
console by right-clicking and then click inspect
inspect
and open the console tab.
And you'll see that inside the console
we displayed the text hello. And that's
exactly what this code does. So we
successfully loaded this code onto our website.
website.
We'll go back to VS Code. So this is one
way to run JavaScript code on a website.
First, we create a script element and
then we put our JavaScript code inside.
Another way to run JavaScript is to save
our JavaScript code in a file. So on the
left, let's create a new file
and press enter.
So when we end a file with js, this file
contains JavaScript code. So now let's
move that code into this file. So we'll
go to our HTML file. We're going to
select this code and then rightclick
cut. We can also press controlX on
And inside our JavaScript file, we're
going to rightclick and paste
and save this file.
Now to run the code inside this file,
we're going to go back to our HTML
and we're going to add an HTML attribute
to this script element. So after this
script, we're going to type space and
then type src equals double quotes. So
the src attribute lets us load
JavaScript from a file.
Inside these double quotes, we're going
to tell the computer which JavaScript
file to load. So we'll type react-basics.js.
So this will look for a file called react-basics.js
react-basics.js
beside the current HTML file. So it's
going to find the file here, and it's
going to run all the code inside this
file. So now let's save
and open our browser and check the result.
result.
Live server will automatically refresh
the page. And inside the console you can
see that we display the message hello.
So we're successfully loading code from
inside a file.
We'll go back to VS Code.
And this is a second way to load
JavaScript. We save our JavaScript in a
file and then we load it from the file.
Next, the script element can actually
load code from anywhere on the internet,
not just on our computer. For example,
we're going to open Google Chrome. And
then we're going to create a new tab.
And at the top we're going to type unpkg.com/sups
dash library.js
So on this website we have some
JavaScript code. So this is just normal
JavaScript code. it displays a message.
This is an external library inside the
console. So using the script element, we
can actually take this code from this
website and run it on our own website.
To do that, we're going to open VS Code
and inside the src attribute, instead of
loading the JavaScript code from a file,
we're going to load the JavaScript code
from a website. So, first we need the
URL of the website. So, we'll go back to
Google Chrome and at the top this is a
URL and we're going to copy
and VS Code we're going to remove this
file and we're going to paste the URL.
And now let's save.
So now let's go back to our website and
we're going to go to the tab for our website.
website.
And we're going to check the console.
And inside the console, you can see we
displayed the message, this is an
external library.
So we successfully loaded JavaScript
code from another website.
Let's go back to VS Code.
So using the script element, we can load
JavaScript code from anywhere on the
internet. So this code is called an
external library. An external library is
just code that is outside of our
computer. It's code that someone else
wrote and we can load that code into our
website using the script element.
Now, React is an external library. So,
React is just a bunch of code that is
outside our computer that someone else
wrote and we can load this code on our
website and use it.
So inside our starting file at the
bottom here, these two script elements
load the React external library. So
loads React.js
and React-dom.js.
So let's open these URLs in our browser
and take a look. So we're going to
select this URL and we're going to copy.
And inside Google Chrome, we're going to
create a new tab. And at the top, we're
going to paste the URL and press enter.
And on this website, you can see that we
have a bunch of JavaScript code. So,
this is the code for React. We're just
taking all of this code and then loading
it onto our website.
Let's go back to VS Code. And the same
thing applies to this second URL. If we
select it and then copy
and in our browser create a new tab and
then at the top paste
and press enter.
You can see that this website also has a
bunch of JavaScript code
and this is also the code for React. So,
as you can see, React is an external
library. It's just a bunch of code that
is outside of our computer that someone
else wrote. And we can load this code on
our website and use it.
Now, before we move on, there's two
things you might be wondering about.
Number one, why are we loading React
from Super Simple Dev instead of some
official React URL? So, this just lets
me control the version of React. If we
loaded React from the official URL, you
might get a different version of React
than the one I'm using in this video,
which might cause issues. So, for the
video, we're going to use a super simple
dev URL to make sure that we have the
same version of React and you're able to
follow along.
The second thing you might be wondering
is why are there two external libraries
for React React and React DOM. So React
is designed to be used in different
places like websites and also mobile
apps. So the creators of React decided
to divide it into two external
libraries. React which contains all the
shared features that are used in both
websites and mobile apps and React DOM
which contain features that are specific
to websites. So if we're using React to
create websites, we need to load the
React external library and the React DOM
external library. If we were using React
to create mobile apps, we would load the
React external library and a different
library called React Native.
In this course, we're going to use React
to create websites. So, we're going to
Okay, so we learned that React is an
external library. It's just a bunch of
code that is outside of our computer and
we're going to load it onto our website.
The next part is React helps us create
websites easier. So now let's learn how
to use React.
and we're going to scroll down and these
two lines of JavaScript at the bottom
sets up React. So let's go through this
step by step. In the first line, we're
using document.query query selector to
get an HTML element from the website and
put it into our JavaScript. As a review,
this is a feature of JavaScript called
the DOM or the document object model.
Basically, JavaScript gives us this
document object which sort of combines
JavaScript and HTML together. It lets us
get HTML elements from the page and put
them into our JavaScript and it also
lets our JavaScript modify HTML elements
on the page. So the DOM or the document
object sort of combines HTML and
JavaScript together and it lets the two
languages interact with each other.
Don't worry, you don't need to know a
lot about the DOM to learn React. I'm
just explaining what this code does so
you understand what's going on here.
So the code document.query selector lets
us get an HTML element from the page and
put it into our JavaScript.
Inside these brackets, we tell the
computer which HTML element we want to
get from the page. So if we start with a
dot, this means we're going to look for
a class. And here we're looking for the
class js-container.
Up here, this div element has the class js-container.
js-container.
So, it's going to take this element and
put it into our JavaScript. And finally,
we're going to save it inside a variable
so we can use it later.
Next, let's go to the second line of
code and react.create
routt basically sets up React
To set up React, we have to give it an
HTML element. So, we're going to give it
the element that we saved up here, which
is this div element. So, basically the
way this works is that this element is
going to act as a container.
Everything that we create with React is
going to be displayed inside this
element or inside this container. The
reason React uses a container is because
it keeps things organized.
Everything inside this element will be
controlled by React and React will not
affect anything outside of this element.
So it keeps things isolated and organized.
organized.
So after we set up React with a
container, we can start using the
One feature of React is render. Render
means to display something. So render
lets us display something inside this
container or inside this element. Now
between the brackets of render, we're
going to tell React what to display
inside the container. So right now we
told it to display the text welcome to
super simple dev react course. And if we
go back to our website and open the tab
for our website
and after we open the console, this time
we're going to go to the elements tab.
So this lets us see the HTML that's
currently on the page. We're going to
open this body element and inside we can
see our container and you can see that
React rendered or displayed the message
welcome to super simple dev react course
inside our container. So we'll go back
to our code
and that's how we set up and use React.
First we give it a container and then we
can display things like a message inside
this container.
Before we continue, let's review the
rest of the code in this file to make
sure that we understand every line of
code. So, the HTML at the top here
This HTML is called the HTML structure.
As a review, this is a standard
structure that we follow when writing HTML.
HTML.
At the top, dock type HTML tells a
computer to use a modern version of HTML.
HTML.
The HTML element represents a website.
So all the code for our website should
go inside the HTML element. Now every
website is split into two sections. the
head section and the body section. The
head section generally contains things
that are not visible on the page. For
example, the title element sets the text
at the top of the tab. So, this is not
visible on the page. So, we put this
inside the head.
The body section generally contains
things that are visible on the page. For
example, the div element will be visible
on the page. So we put it inside the body.
body.
Finally, we usually put our script
elements at the bottom of the body
because we want our HTML to be created
first and then our JavaScript can modify
the HTML.
So that's a review of the HTML
structure. This is a standard structure
So now we understand almost every line
of code in this file. This is just the
HTML structure that we have to follow.
This is a container that we give to
React to keep things isolated and organized.
organized.
This is an example of an external
library and this loads the React
external library or loads the code for React.
React.
And this sets up and uses React.
The last two lines that we haven't
learned yet are these two lines right
here. So here we're loading another
external library. And this external
library is called Babel.
So again if I open this URL in my
browser copy
and in my browser going to create a new
tab and at the top paste and press enter.
enter.
You'll see that this website contains a
bunch of JavaScript code and this is the
code for another external library called Babel.
Babel.
So we'll go back to VS Code and let's
learn what is the Babel external library.
library.
Babel is known as a JavaScript compiler.
So it basically translates other
languages into JavaScript.
So why do we need Babel? When using
React, we actually don't use normal
JavaScript. We use an enhanced version
of JavaScript called JSX.
JSX stands for JavaScript XML. It's the
same as JavaScript, but we can also
write HTML directly in our JavaScript
code. So, it's just JavaScript with
extra features. So, let's do an example
of JSX to learn how to use it. Inside
the script element at the bottom, we're
going to create a new variable using
const and let's call it button
equals. And now let's create a button
HTML element. So here we're going to
type HTML directly less than button
greater than and then less than /button
greater than.
So this is actually HTML code and we're
writing it directly inside our
JavaScript. So this HTML code creates a
button and then inside our button we can
put the text hello.
So this code here is actually using JSX.
So JSX works the same way as JavaScript
except we can also write HTML directly
in our JavaScript code.
So, what does this code do? It's
actually pretty straightforward. This
code creates a new button element inside
our JavaScript and then we save it in a variable.
variable.
We can actually do this with normal
JavaScript as well. We can use the DOM
and we can create a button element in
our JavaScript like this. So you can
think of this JSX code as a shortcut for
this JavaScript code.
So that's JSX. JSX is an enhanced
version of JavaScript. So it's the same
as JavaScript, but we can also write
HTML directly in our JavaScript code. So
when using React, we usually use JSX
instead of normal JavaScript because, as
you can see, JSX is simpler.
Now there is one problem with JSX which
is our web browser doesn't understand
JSX. It only understands normal JavaScript.
JavaScript.
In order to use JSX we need to translate
it into normal JavaScript first and then
our web browser can understand this code.
code.
To do that we use the Babel external
library. Babel translates JSX into
normal JavaScript so our web browser can
understand it. To use Babel, we need to
do two steps. First, we load the Babel
external library, which is what we do
here. And then when we want to translate
something into JavaScript, we have to
give the script element an attribute
type equals text/babel.
So this attribute tells Babel to
translate all the code inside here into
normal JavaScript.
So that's what these two lines of code
do. First, we load the Babel external
library and then we tell Babel to
translate the code from JSX into normal
JavaScript so our web browser can
understand it. So now we understand all
of the code in our starting file. And
again, this is the minimum amount of
code that we need to set up React.
Next, let's learn some more features of
React. So, we'll scroll back down. And
currently, we're using React to display
some text inside this container. Now, in
addition to text, we can also display
HTML elements inside this container. So
to do that, we're going to remove this string
string
and instead we're going to give render
an HTML element.
So up here, we actually created an HTML
element or a button. So we're going to
give this to the render function. So
here we're going to give it the button.
And now it's going to display this
button inside our container or inside
this div here. Let's save and we'll open
the browser
and open the tab for our website. And
you'll see it displayed the button with
the text hello on the website.
And if we check the elements tab, you
can see that React displayed the button
inside our container.
We'll go back to our code.
So that's what this code does. It
displays an element inside this container.
container.
Now let's do another example. Let's
display a different HTML element inside
this container. So below this button,
let's use JSX to create a paragraph
element. So first we'll create a new
variable using const and we'll name the
variable paragraph
equals and we'll create a paragraph
element using the code less than p
greater than less than /p greater than.
So this html code creates a paragraph or
a paragraph of text. Inside our
paragraph, let's just put paragraph of text.
text.
And now let's display this paragraph on
our website. So inside render, instead
of the button, we're going to render the paragraph
paragraph
and save.
If we open our website,
you can see it displayed a paragraph of
text. If we go into the elements tab and
we open this div container,
we can see that React displayed this
paragraph element inside this container.
So let's go back to our code. And that's
basically how we use React. We give
React a container and then we can
display an HTML element inside this container.
container.
Next, we're currently using React to
display one element at a time on our
website, which is not that useful. So
now we're going to learn how to use
React to display multiple elements on
our website. So one thing we can't do is
give render multiple elements. So this
is not supported. We also can't save
multiple elements inside a variable.
This is also not supported. Instead, we
need to use another HTML element called
a div element. So, under our paragraph,
let's create a new variable using const
and let's name it div and make it equal.
And we'll create an HTML div element
using the code less than div greater
than less than /d greater than.
So this is the HTML code to create a div
element. As a review, the div element
represents a container. The purpose of a
div element is to contain other elements
like buttons and paragraphs. So that's
actually why we used a div element up
here. This element is a container. It's
going to contain everything that we
create using React. So let's go back down.
down.
Inside our div element, we can put other
HTML elements like a button. So, let's
actually select this code and we'll copy
and then inside this div, paste.
And let's also put a paragraph element
inside our div. So we'll select this
code for the paragraph element and we'll copy
copy
and our div paste.
So this code works because a div is
considered as one element. So we're just
taking one element and saving it in one
variable which is supported in
JavaScript. The only thing special about
this is that this one element can
contain other elements inside.
Next, we're going to give this div to
the render function here. So, instead of
the paragraph, we're going to give
render our div and save.
And if we check our website,
you can see that React displayed
multiple elements on the website, a
button and a paragraph. If we look at
the elements tab and open this div container,
container,
you can see that React displayed our div
inside this container.
Let's go back to our code. And that's
how we display multiple elements on a
website using React.
First, we group the elements inside a
div element. And then we render the div element.
element.
Before we continue, we're going to do
some code cleanup. When we have multiple
lines of HTML like this, a best practice
is to add brackets around it. So, at the
front, we're going to add an open
bracket and at the end, a closed bracket.
bracket.
And we're going to put the HTML on its
own line. So, here we have JavaScript
and HTML together. We're going to add a
new line here by pressing enter. and
we're going to put the HTML on its own
line. Same thing here. Click here and
press enter to put the HTML on its own line.
line.
Next, we have two elements that are
inside a div. So, we're also going to
give this line an indent by pressing
tab. And then, we're going to give this
line an indent by pressing tab. So that
it's easy to see that these two elements
are inside this div element.
So this is how we should format our code
when we have multiple lines of HTML.
Another way to think about this is
inside here, you're actually just
writing HTML normally.
So don't worry, the more that you use
React, the more you'll get used to this format.
format.
So let's save this file.
Now that we learn the basics of React,
let's talk about how React helps us
create websites easier.
If we look at this code, creating a
website with React feels natural. It's a
lot simpler than using the DOM feature
in JavaScript. We can just create the
HTML elements we want directly and then
give it to React and React will display
it on the website.
Another benefit is JSX lets us find
errors easier.
For example, if I misspell button, it
will actually tell me that these two
don't match because this is an actual
element rather than just text or a
string. So, it makes it easier to find
errors when we're coding. So, I'll add
the O back.
Another benefit is we can insert values
inside our JSX elements. For example,
inside this paragraph, we're going to
type space and we're going to insert a
value here by typing open curly bracket
close curly bracket. And inside here, we
can give it any JavaScript code. For
example, 2 + 2. So this will calculate 2
+ 2 and then insert it into this
element. If we save
and then check our website,
we can see that it calculated 2 + 2
which is four and inserted it into this
paragraph element. So we'll go back to
our code and that's another benefit of
using React. We can insert JavaScript
code directly into our JSX elements. So
this is similar to string interpolation
where we can insert values into a string
except here we're inserting values into
actual HTML elements. So those are three
ways that React helps us create websites
easier. Number one, it's more natural.
We can create the elements that we want
and then just give it to React and it
will put it on the website. Number two,
it helps us find errors easier because
these are actual elements. And number
three, we can insert our JavaScript code
into our elements. So this helps us use
JavaScript and HTML together more easily.
easily.
Now, React has many other features that
helps us create websites easier, but
we're going to learn those features
later on as we go through the course.
The last thing we're going to do is
we're going to scroll up and we're just
going to remove this example external library
library
and save
so that we just have the code that we
And that's the end of this lesson. In
this lesson, we learned that React is an
external library that helps us create
websites easier. We learned how to load
the React external library. We learned
how to set up React and use render. We
reviewed the basics of HTML and JavaScript.
JavaScript.
We learned JSX, an enhanced version of JavaScript.
JavaScript.
We created elements directly with JSX.
And we learned how to insert values into
our JSX elements. Here are some
exercises to help you practice what we
learned in this lesson. You can find the
solutions to these exercises in the
In this lesson, we're going to learn two
of the most important features of React,
which are components and props. To learn
this, I actually prepared a project that
we can do for this lesson. We're going
to go to our browser
and we can delete these extra tabs for now.
now.
And we're going to create a new tab.
And at the top, we're going to go to
chatbot and press enter.
This is a chatbot project. We can send a
message to a robot up here and the robot
will respond to our message. For
example, we can click in here and type
hello chatbot and then press send.
And the robot will respond with hello,
how can I help you? Now, if we scroll to
the bottom of this page, we can also
move the text box to the bottom by
clicking this link.
So, a lot of chatbot applications use
this design where the text box is at the
bottom. However, because we're watching
a video, this text box might get cut off
or it might be covered by the video
progress bar. So, just for this video,
we're going to click this again and
we're going to start with a text box at
the top.
Next, this is a simple chatbot and
currently it can only do three things.
get today's date, flip a coin, and roll
a dice. For example, up here, we can
type, "Can you get me today's date?"
and press send.
And it will respond with today's date.
And let's try typing, "How about flip a
coin?" and press send.
and it will respond with heads or tails.
Finally, let's type okay, thank you and
press send.
And it responds with no problem.
So, this is a chatbot project we're
going to work on for the next few
lessons. Now, this is a simple chatbot
and it can only do these three things.
But in the future, we can also switch
this to a more powerful AI that can
respond to any message we send.
But for now, we'll just use this simple
chatbot to learn React. Now, let's use
React to build this chatbot project.
We'll go back to VS Code
and let's make a copy of React Basics.
So, first we'll select this file and
then rightclick, copy.
copy.
And inside here, we're going to
rightclick and paste.
And let's rename this file. So, we'll
rightclick and rename
and rename it to chatbot.html
And let's close the React Basics files
for now.
So, we're going to start with the same
code as the React Basics file, except
we're just going to change the title up
here. So, we'll remove React Basics and
just change it to chatbot
and save.
And now, let's open this file in our
browser. We'll rightclick,
And it should say chatbot in the tab up
here. So now we can close the React
basics tabs which are these two here.
And we'll go back to VS Code.
And now we're ready to begin the chatbot project.
First we're going to learn one of the
most important features of React called
components. A component is just a piece
of the website.
For example, let's go back to our
browser and open the final chatbot project.
project.
So looking at this project, we can split
it up into different pieces. One piece
can be the text box and the button at
the top and another piece are each of
these chat messages.
So these are called components. A
component is just a piece of the
website. Now, when building websites,
it's better to split up the website into
pieces or components so that we can work
on a small piece of the website at a time.
Now that we know what components are,
let's create our first component in
React. So, we mentioned that one way we
can split up this website is to have one
component at the top for this text box
and the button. So, let's create a
component for this in React. We'll go
back to our code
and we'll scroll down and first let's
remove the example button and paragraph
that we used. So, we'll select this and
remove it.
And to create a component in React,
we're going to use a function. So we'll
type function. And now we're going to
name this component. Since this piece of
the website is for inputting a message
and sending it to the chatbot, let's
name this component capital C chat
capital I input brackets and curly brackets.
brackets.
Now in React the component name must
start with a capital letter. So make
sure that chat input starts with a
capital C. This is also known as Pascal
case where each word in the name starts
Next this function will return some
HTML. So we're going to type return and
we're going to return the HTML for this
piece of the website. So this piece of
the website has a text box and a button.
So let's type brackets and press enter
between these brackets.
And to create a text box, we're going to
use the HTML element less than input
greater than. And we also need to type
less than /input greater than. Now you
may notice that in normal HTML input
doesn't need this closing tag. However,
JSX is more strict than normal HTML. So,
all elements need a closing tag,
including input. Now, there's actually a
shortcut we can use here. If there's
nothing inside an element, we can
actually remove the closing tag.
And at the end of this opening tag, we
can just type space and then slash. So,
this code is a shortcut for this code.
And this is called a self-closing
element. So in JSX we have to either
have a closing tag or use this
self-closing element shortcut.
Next, this piece of the website also has
a button. So let's also create a button
element using less than button greater
than less than /button greater than. And
inside this button we have the text send.
send.
And now we're going to get an error here
because we're trying to return two
values or two elements from this
function. But we can only return one
value from a function. To solve this
problem, we can use a div element like
down here to group these two elements together.
together.
So above this, let's create a div element.
element.
And at the bottom, less than /d greater
than. And let's also add indents before
these two lines. So we'll click here and
press tab. And also click here and press tab.
tab.
So this shows that these two elements
are inside this div element. And now
this code no longer has an error because
we're returning one value from this function.
function.
Now that we created this component,
let's learn how to display it on the
website. If we scroll down, right now
we're using React to display this div on
the website. So all we have to do is to
insert our component inside this div and
it will be displayed on the website. So
one way to do this is to use curly
brackets to insert something like we did
before. So here we'll type curly
brackets. And now we're just going to
run this function
capital C chat input and brackets.
So this will run the function and it
will return this HTML from the function
and then the curly brackets will insert
the HTML into the div and then display
it on the page.
So, as you can see, we can put any
JavaScript code between these curly
brackets. As long as this code results
in a value, we can insert it into this HTML.
HTML.
Let's remove the button and the
paragraph that we used as an example
and save.
And let's check our website. We'll open
the browser and go to our chatbot
project. And now we created the elements
for the top section of the chatbot
project, the text box and the send
button. So don't worry about how it
looks for now. Later in the course,
we're going to style this with CSS and
make it look like the final project.
Let's go back to our code.
And next, React has a special syntax we
can use to insert a component. Instead
of using curly brackets and running the
function, we can type this code less
than and then the name of the component
capital C chat input greater than and
then less than slash chat input greater than.
than.
So this is called the component syntax.
This does the same thing as the code
above. It runs the chat input function
and then inserts the result into the HTML.
HTML.
If we save
and we check our project, you'll notice
that that syntax does the same thing and
it creates another text box and button.
Let's go back to our code.
And again, this code does the same thing
as this code. Now this syntax has a big advantage.
advantage.
This actually looks like an HTML
element. It has an opening tag and a
closing tag. So you can think of this
like we're creating our own HTML element
called chat input.
HTML provides us with some default
elements like div, input and button. And
now using React, we can actually create
our own HTML element like chat input.
Then we can use our own HTML elements to
build the website instead of just the
default HTML elements. And this is
actually one of the main ideas of React.
We can create our own HTML elements. So
when using React, we should use this
component syntax instead of running the
component function directly because this
syntax lets us create our own HTML element.
element.
And again, we can use the self-closing
element shortcut like we did up here. If
there is nothing inside this element, we
can remove this closing tag.
And inside the opening tag at the end,
we can type space and slash.
And now we can remove this example code above.
above.
And let's save and check our project.
And that creates the top section of the
So go back to VS Code.
And we mentioned in the previous lesson
that React helps us create websites
easier. And this is another way that
React helps us create websites easier.
It lets us split our website into
smaller pieces or components. And this
lets us work on a small piece of the
website at a time.
Before we create the rest of the
project, we're going to improve our code
a little bit. First, notice that in this
component, we're using a div to group
these two elements together. However,
this is also going to insert an extra
div element into our website. So, if we
go to our website
and rightclick and click inspect,
and we're going to go to the elements
tab, and we're going to go to our
container here, and we're going to
expand it.
So notice here that we have a bunch of
extra divs on this website. So what if
we don't want to insert these extra
divs? What if we just want to insert the
text box and the button on our website?
Let's go back to our code and learn how
to do that.
React has another way to group elements
together called a fragment. To use a
fragment, we can remove the word div.
and div from the closing tag and just
have a less than greater than and a less
than slashgreater than. So this is
called a fragment and it groups the two
elements together. So we can return it
from the function but it won't insert an
extra div. So, if we save this code and
then go to our website
and take a look at the HTML,
you'll notice now we have one less extra
div on the website.
Let's go back
and we can also use a fragment down
here. If we don't want to insert this
extra div, we can remove it and remove
it at the bottom and just use a
fragment. If we save and check the website,
website,
now we no longer have those extra divs.
We have our container and we just
inserted the text box and the button.
So that's fragments. It allows us to
group elements together without creating
an extra div.
Let's go back to our code.
And since this variable no longer
contains a div, let's rename it. So
right now we're building a chatbot
application or an app. So let's rename
this variable to app instead. And here
as well, we're going to render the app
and save.
So again in React, when returning
multiple elements or saving multiple
elements, we can use a fragment to group
them together. And this makes our HTML a
little bit cleaner because it doesn't
create an extra div element.
Next, another improvement we can make is
to add a placeholder to the text box at
the top. So the gray text inside the
text box is called a placeholder. It
tells us what to type inside the text
box. And when we start typing, it will disappear.
disappear.
To create a placeholder, we give this
input element an attribute. So at the
end, we're going to type the attribute placeholder
placeholder
equals double quotes.
And then inside these double quotes,
we're going to put the text that we
want, which is send a message to chatbot.
chatbot.
If we save this code
and look at our website,
now we have a placeholder in the text
box. And when we start typing in it, it
will disappear. So the placeholder is
working. Now there is one problem here,
which is if we remove this text, you'll
notice that this placeholder is too long
and it's getting cut off. To fix this,
let's make this text box wider. We'll go
back to our code.
And to make this input wider, we're
going to give it another attribute. So
at the end, we'll type another attribute
called size equals double quotes. And
this sets how many characters can fit in
this input. By the way, a character is
just a letter, number, or symbol.
Let's set the size to 30 characters and
save and take a look.
Okay, so that looks pretty good for now.
Again, don't worry about how this looks.
We'll style it later in the course using CSS.
CSS.
So, we just created our first component
or our first piece of the website, which
is the section at the top. Now, let's
get some practice and create more components.
components.
Let's go back to the final chatbot project
project
and let's ask ourselves how can we split
up the rest of this website into pieces.
Another piece of this website could be
one chat message here. So let's create a
component for this piece of the website.
We'll go back to VS Code
and to create a component we're going to
use a function. So down here, let's
create a function
and let's name it capital C chat capital
M message
brackets and curly brackets. So remember
a component name must start with a
capital letter and we use Pascal case.
So each word starts with a capital letter.
letter.
Now inside this function, we're going to
return the HTML for this piece of the
website or this component.
So let's also type brackets and enter.
So we can write the HTML on multiple
lines. And now each chat message has two things, some text and a profile image.
things, some text and a profile image. Since we have multiple things inside
Since we have multiple things inside this component, let's group them
this component, let's group them together using a fragment. So we can
together using a fragment. So we can return one value from this function. So
return one value from this function. So we'll type less than greater than enter
we'll type less than greater than enter and then less than /g greater than to
and then less than /g greater than to create a fragment. And now inside here
create a fragment. And now inside here each message has some text. So let's
each message has some text. So let's create the first chat message in our
create the first chat message in our project. We'll go back to the final
project. We'll go back to the final project.
project. And let's just copy paste the text from
And let's just copy paste the text from the first message here which is hello
the first message here which is hello chatbot. So we'll select this and then
chatbot. So we'll select this and then copy by pressing control C on Windows or
copy by pressing control C on Windows or command C on Mac.
command C on Mac. And then inside our code
And then inside our code in the chat message component we're
in the chat message component we're going to paste by pressing controlV on
going to paste by pressing controlV on Windows or commandV on Mac.
Windows or commandV on Mac. And let's fix the indent by pressing tab
And let's fix the indent by pressing tab at the start.
at the start. Next, each chat message has a profile
Next, each chat message has a profile image. To create an image, we can use an
image. To create an image, we can use an HTML element called img. So, let's
HTML element called img. So, let's create a new line. And we're going to
create a new line. And we're going to type less than img greater than and then
type less than img greater than and then less than / img greater than. So,
less than / img greater than. So, remember that in JSX, every element has
remember that in JSX, every element has to have a closing tag. And again, we can
to have a closing tag. And again, we can use the self-closing element shortcut
use the self-closing element shortcut like we did down here. If there's
like we did down here. If there's nothing inside this element, we can
nothing inside this element, we can remove the closing tag and then just add
remove the closing tag and then just add a space and a slash at the end of the
a space and a slash at the end of the opening tag. And now we have the two
opening tag. And now we have the two things that we need for each chat
things that we need for each chat message, the text and an image.
message, the text and an image. Next, we need to tell the computer which
Next, we need to tell the computer which image to load. Right now, if we look at
image to load. Right now, if we look at our final chatbot project, we have two
our final chatbot project, we have two images that we use, but we currently
images that we use, but we currently don't have these in our project. So,
don't have these in our project. So, let's download them. We're going to
let's download them. We're going to rightclick this first image and then
rightclick this first image and then click save image.
click save image. And we're going to find the folder that
And we're going to find the folder that contains all of our code. So, for me,
contains all of our code. So, for me, it's on the desktop
it's on the desktop and it's in the folder React-Course.
and it's in the folder React-Course. and we're going to save it inside of
and we're going to save it inside of this folder.
this folder. And same things for this robot image.
And same things for this robot image. We're going to rightclick
We're going to rightclick and click save image.
and click save image. Go to the React-Course folder. And we're
Go to the React-Course folder. And we're also going to save the robot image.
also going to save the robot image. And now if we look at our code,
And now if we look at our code, we should have two images inside our
we should have two images inside our project. User.png png and robot.png.
project. User.png png and robot.png. And now let's go back to our code.
And now let's go back to our code. To load an image on the website, we need
To load an image on the website, we need to tell the computer which image to
to tell the computer which image to load. To do that, we're going to give
load. To do that, we're going to give this image element an attribute called
this image element an attribute called src or source equals double quotes. And
src or source equals double quotes. And inside these double quotes, we're going
inside these double quotes, we're going to tell the computer which image to load
to tell the computer which image to load for the first chat message. The image is
for the first chat message. The image is the user image. So let's type this file
the user image. So let's type this file name. userpng.
So this will look for a file called user.png
user.png beside the current HTML file. This is a
beside the current HTML file. This is a current HTML file. So we'll look for
current HTML file. So we'll look for user.png beside it, which is right here.
user.png beside it, which is right here. and then it's going to load this image
and then it's going to load this image on the website.
on the website. Okay, so we created a component for a
Okay, so we created a component for a chat message. Now let's insert this
chat message. Now let's insert this component on the website. We're going to
component on the website. We're going to scroll down
scroll down to the app and let's insert this
to the app and let's insert this component using the component syntax
component using the component syntax like we did up here. So we'll type a new
like we did up here. So we'll type a new line and type less than and then the
line and type less than and then the name of the component which is capital C
name of the component which is capital C chat
chat capital M message.
capital M message. And currently we don't have anything to
And currently we don't have anything to put inside this component. So we use the
put inside this component. So we use the self-closing element shortcut like we
self-closing element shortcut like we did up here. So now let's save
did up here. So now let's save and check our website
and check our website which is this tab. And let's close the
which is this tab. And let's close the console so we can see it. And we created
console so we can see it. And we created a chat message.
a chat message. However, we have a few problems here.
However, we have a few problems here. The first problem is that the profile
The first problem is that the profile image is too big. To make it smaller,
image is too big. To make it smaller, we're going to go back to our code
we're going to go back to our code and inside the img element, we're going
and inside the img element, we're going to give it another attribute called
to give it another attribute called width equals double quotes.
width equals double quotes. And let's try setting the width to 50
And let's try setting the width to 50 and save. And then check our website.
and save. And then check our website. And that looks close enough.
And that looks close enough. Another problem is the chat message is
Another problem is the chat message is appearing on the same line as the chat
appearing on the same line as the chat input, but in the final project, we want
input, but in the final project, we want it to appear below. To fix this, we'll
it to appear below. To fix this, we'll go back to our code
go back to our code and inside the chat message component,
and inside the chat message component, instead of using a fragment to group
instead of using a fragment to group these elements together, we're going to
these elements together, we're going to change it back to a div. So, inside
change it back to a div. So, inside we'll type div and inside here /d.
we'll type div and inside here /d. The reason we're using a div is because
The reason we're using a div is because in HTML, a div is known as a block
in HTML, a div is known as a block element. A block element will always
element. A block element will always take up an entire line by itself. So if
take up an entire line by itself. So if we group this in a div element, instead
we group this in a div element, instead of appearing beside the chat input, the
of appearing beside the chat input, the div is going to take up an entire line
div is going to take up an entire line by itself. So it's going to take up the
by itself. So it's going to take up the entire line under the chat input. So
entire line under the chat input. So let's save this code and then check our
let's save this code and then check our website.
website. So now this div is taking up this entire
So now this div is taking up this entire line. If we rightclick and click inspect
line. If we rightclick and click inspect and then click this arrow icon in the
and then click this arrow icon in the top left and then click on this div,
top left and then click on this div, you can see that this div now takes up
you can see that this div now takes up this entire line. So now we have the
this entire line. So now we have the layout that we want. So in React, we
layout that we want. So in React, we still use divs for layout purposes.
still use divs for layout purposes. If you want to learn divs, layout, and
If you want to learn divs, layout, and HTML in more detail, you can check out
HTML in more detail, you can check out my HTML and CSS full course in the video
my HTML and CSS full course in the video description.
description. So now we created our first chat
So now we created our first chat message.
Next, let's create the second chat message. We'll go back to our code
message. We'll go back to our code and instead of creating a whole new
and instead of creating a whole new component, we can actually reuse our
component, we can actually reuse our chat message component. Components are
chat message component. Components are actually designed to be reusable.
actually designed to be reusable. To reuse this component, we don't want
To reuse this component, we don't want the message to be hello chatbot every
the message to be hello chatbot every time. We want to be able to display
time. We want to be able to display different messages in this component. To
different messages in this component. To do that, we can give our component an
do that, we can give our component an attribute. So down here, we're going to
attribute. So down here, we're going to go to the chat message component and
go to the chat message component and we're going to give it an attribute. So
we're going to give it an attribute. So this works just like HTML attributes.
this works just like HTML attributes. We're going to give our attribute a
We're going to give our attribute a name. Let's call it message
name. Let's call it message equals double quotes. And inside these
equals double quotes. And inside these double quotes, we're going to give the
double quotes, we're going to give the attribute a value.
attribute a value. Let's put the text for the first message
Let's put the text for the first message which is hello chatbot. So let's select
which is hello chatbot. So let's select this code and then copy
this code and then copy and we're going to paste it inside here.
and we're going to paste it inside here. So now we have an attribute called
So now we have an attribute called message with a value hello chatbot. So
message with a value hello chatbot. So again you can see that this syntax looks
again you can see that this syntax looks like HTML. We can even add our own
like HTML. We can even add our own attributes.
attributes. Now that we added this message
Now that we added this message attribute, how do we access it inside
attribute, how do we access it inside this component and use it? To do that,
this component and use it? To do that, we're going to use a feature called
we're going to use a feature called props.
props. Every component function gets one
Every component function gets one parameter up here called props.
parameter up here called props. This props parameter is an object and it
This props parameter is an object and it contains all the attributes that we give
contains all the attributes that we give to this component. So up here, let's
to this component. So up here, let's actually console.log
actually console.log props to see what it looks like. Let's
props to see what it looks like. Let's save and then open our website and check
save and then open our website and check the console.
the console. And you'll see that props is an object
And you'll see that props is an object and it contains the attributes that we
and it contains the attributes that we gave to our component. So here we have
gave to our component. So here we have the message attribute and it has a value
the message attribute and it has a value hello chatbot. So the attribute name is
hello chatbot. So the attribute name is saved as a property and the attributes
saved as a property and the attributes value is saved as a value of this
value is saved as a value of this object.
object. So let's go back to VS code
So let's go back to VS code and using this props object we can
and using this props object we can access our attributes. By the way props
access our attributes. By the way props is short for properties. We call this
is short for properties. We call this props because the attributes are saved
props because the attributes are saved as properties in this object.
as properties in this object. So now to access the message attribute
So now to access the message attribute we can remove this and type props
we can remove this and type props dot and the attribute name which is
dot and the attribute name which is message
and let's save this in a variable so we can use it later. So at the front we'll
can use it later. So at the front we'll create a variable using const name name
create a variable using const name name it message
it message equals props dossage
equals props dossage and we'll add a new line to separate the
and we'll add a new line to separate the code a little bit.
code a little bit. Now instead of displaying hello chatbot
Now instead of displaying hello chatbot every time let's display whatever is in
every time let's display whatever is in the message attribute. So we'll remove
the message attribute. So we'll remove this
this and let's insert this variable into this
and let's insert this variable into this element. To do that we can use curly
element. To do that we can use curly brackets and type the variable name
brackets and type the variable name message.
message. So again we can put any JavaScript code
So again we can put any JavaScript code between these curly brackets and as long
between these curly brackets and as long as it results in a value it will insert
as it results in a value it will insert it into this element. So now let's save
it into this element. So now let's save and we'll check the website
and we'll check the website and it displays a message hello chatbot.
and it displays a message hello chatbot. That's the message attribute that we
That's the message attribute that we gave it.
gave it. Let's go back to our code.
Let's go back to our code. So that's props. Just like a normal HTML
So that's props. Just like a normal HTML element, we can give attributes to our
element, we can give attributes to our component and then access these
component and then access these attributes using this props object.
attributes using this props object. So props are really useful because props
So props are really useful because props make our component reusable.
make our component reusable. For example, let's try creating the
For example, let's try creating the second chat message. To do that, we can
second chat message. To do that, we can just create another chat message
just create another chat message component. So down here, let's type less
component. So down here, let's type less than chat message/grater
than chat message/grater than.
than. And we just need to give it a different
And we just need to give it a different message attribute. So here we'll give it
message attribute. So here we'll give it an attribute message equals double
an attribute message equals double quotes. And we'll copy paste the second
quotes. And we'll copy paste the second message in the chatbot project. We'll go
message in the chatbot project. We'll go to our browser
to our browser and go to the chatbot project and let's
and go to the chatbot project and let's copy and paste this second message.
copy and paste this second message. We'll select it and then copy.
We'll select it and then copy. And inside our code in the message
And inside our code in the message attribute, we're going to paste.
attribute, we're going to paste. So this will save the message hello how
So this will save the message hello how can I help you inside props and then we
can I help you inside props and then we get it out of props and insert it into
get it out of props and insert it into the component. Let's save and check the
the component. Let's save and check the website
website and go to our tab.
and go to our tab. And now we created the second chat
And now we created the second chat message. So let's go back to our code.
message. So let's go back to our code. And you can see that props make our
And you can see that props make our component reusable. We can reuse this
component reusable. We can reuse this component, but just give it a different
component, but just give it a different attribute or prop and it will display a
attribute or prop and it will display a different message.
different message. Let's get some practice and use props to
Let's get some practice and use props to create two more chat messages. Feel free
create two more chat messages. Feel free to pause if you want to try it yourself
to pause if you want to try it yourself first.
first. So down here, let's create our third
So down here, let's create our third message using less than chat
message using less than chat message/grater
message/grater than. and we'll give it a message
than. and we'll give it a message attribute equals double quotes and we'll
attribute equals double quotes and we'll copy paste the third message. We'll go
copy paste the third message. We'll go to the chatbot project
to the chatbot project and select this third message and then
and select this third message and then copy.
copy. And in our code inside the attribute,
And in our code inside the attribute, we're going to paste.
we're going to paste. And finally, let's create the fourth
And finally, let's create the fourth message less than chat message
message less than chat message slashgreater than and then the message
slashgreater than and then the message attribute equals double quotes and we'll
attribute equals double quotes and we'll copy paste the fourth message which is
copy paste the fourth message which is this one. So don't worry if your
this one. So don't worry if your messages are different from mine. We're
messages are different from mine. We're just doing an example. So we'll select
just doing an example. So we'll select this and copy.
this and copy. And inside here, we're going to paste
And inside here, we're going to paste and save.
and save. And now, if we check our website
And now, if we check our website and go to our tab, you'll see that we
and go to our tab, you'll see that we now have four chat messages in our
now have four chat messages in our project. So, that's how we use props to
project. So, that's how we use props to reuse the chat message component.
reuse the chat message component. Next, in the final chatbot project,
Next, in the final chatbot project, notice that these two messages are
notice that these two messages are different. These two messages are from
different. These two messages are from the chatbot. So there are two
the chatbot. So there are two differences here. The profile image is a
differences here. The profile image is a robot and the image is on the left. To
robot and the image is on the left. To create this, we can add another prop to
create this, we can add another prop to chat message. Let's go back to VS Code
chat message. Let's go back to VS Code and for each chat message, we're going
and for each chat message, we're going to add another attribute.
to add another attribute. And let's call this attribute the sender
And let's call this attribute the sender equals double quotes.
equals double quotes. This attribute tells us who sent the
This attribute tells us who sent the message. And we can use this to
message. And we can use this to determine which image to load and where
determine which image to load and where to place the image. So if we send the
to place the image. So if we send the message, let's make the sender the user.
message, let's make the sender the user. And for the second chat message, we're
And for the second chat message, we're going to add another sender attribute
going to add another sender attribute equals double quotes. And the second
equals double quotes. And the second message is from the chatbot. So let's
message is from the chatbot. So let's make the sender attribute the robot.
make the sender attribute the robot. And we'll do the same thing for the
And we'll do the same thing for the third and fourth message. We'll give it
third and fourth message. We'll give it a sender attribute.
a sender attribute. The third message is from the user. So
The third message is from the user. So let's make the sender user.
let's make the sender user. And the fourth message sender equals
And the fourth message sender equals double quotes. This message is from the
double quotes. This message is from the robot. So let's make the sender robot.
robot. So let's make the sender robot. Next, let's access the sender attribute
Next, let's access the sender attribute inside our component. To do that, all
inside our component. To do that, all the attributes are saved inside this
the attributes are saved inside this props object. To access the sender
props object. To access the sender attribute, we can type props dot sender.
attribute, we can type props dot sender. So this gives us the value of the sender
So this gives us the value of the sender attribute which is either user or robot.
attribute which is either user or robot. So let's save this in a variable so we
So let's save this in a variable so we can use it later. Type const and let's
can use it later. Type const and let's call it sender equals props.
call it sender equals props. So now that we have the sender
So now that we have the sender attribute, let's use it to decide which
attribute, let's use it to decide which profile image to load and where to place
profile image to load and where to place this image. To do that, we can just use
this image. To do that, we can just use an if statement.
an if statement. So inside here, we can type if brackets
So inside here, we can type if brackets and curly brackets.
and curly brackets. And inside these brackets, we're going
And inside these brackets, we're going to check if the sender
to check if the sender is equal to the string robot.
is equal to the string robot. By the way, by default, if the attribute
By the way, by default, if the attribute just has double quotes like this, the
just has double quotes like this, the value is a string. So here the value is
value is a string. So here the value is going to be the string user or the
going to be the string user or the string robot.
string robot. So now inside our component, if the
So now inside our component, if the sender is the robot, we're going to
sender is the robot, we're going to return some different HTML.
return some different HTML. So let's type return brackets. So we can
So let's type return brackets. So we can write this HTML on multiple lines. And
write this HTML on multiple lines. And let's just copy paste the HTML from down
let's just copy paste the HTML from down here and modify it. So we'll select this
here and modify it. So we'll select this HTML and then copy
HTML and then copy and then inside this return we're going
and then inside this return we're going to paste.
to paste. And let's also select these lines and
And let's also select these lines and press tab to fix the indenting.
press tab to fix the indenting. So the first thing we need to change if
So the first thing we need to change if the sender is a robot is that we want to
the sender is a robot is that we want to load the robot image instead.
load the robot image instead. So, we already downloaded the robot
So, we already downloaded the robot image here. To load it, we're just going
image here. To load it, we're just going to change the src attribute or the
to change the src attribute or the source attribute of this image. So,
source attribute of this image. So, we're going to change this from user to
we're going to change this from user to robot.png.
robot.png. And we also want this image to be on the
And we also want this image to be on the left. So, let's just move this image
left. So, let's just move this image before the message. So we'll select this
before the message. So we'll select this code and then cut by pressing control X
code and then cut by pressing control X on Windows or command X on Mac.
on Windows or command X on Mac. And then before the message we're going
And then before the message we're going to paste by pressing controlV on Windows
to paste by pressing controlV on Windows or commandV on Mac.
or commandV on Mac. And we can remove this extra new line.
And we can remove this extra new line. So as you can see inside a component we
So as you can see inside a component we can use any JavaScript feature like if
can use any JavaScript feature like if statement and we can return a different
statement and we can return a different HTML and whatever we return will be
HTML and whatever we return will be inserted inside the element here. So now
inserted inside the element here. So now let's save this code
let's save this code and then check our website
and then check our website and then open our tab
and then open our tab and you can see that now we have two
and you can see that now we have two messages from the chatbot. that loads
messages from the chatbot. that loads the robot image and it puts the image on
the robot image and it puts the image on the left.
the left. We'll go back to our code
We'll go back to our code and using this sender prop, we're able
and using this sender prop, we're able to reuse this component to create a chat
to reuse this component to create a chat message from the robot. So again, props
message from the robot. So again, props make our component reusable.
make our component reusable. And that's it. If we scroll down,
And that's it. If we scroll down, using components, we split up the
using components, we split up the website or the app into smaller pieces
website or the app into smaller pieces like the chat input section at the top
like the chat input section at the top and each chat message. And we created
and each chat message. And we created all the HTML that we need for this
all the HTML that we need for this project.
project. The last thing we're going to learn in
The last thing we're going to learn in this lesson are some shortcuts that are
this lesson are some shortcuts that are commonly used in React, and we can use
commonly used in React, and we can use these to clean up our code.
these to clean up our code. First, let's scroll up to the chat
First, let's scroll up to the chat message component.
message component. So, instead of doing con message equals
So, instead of doing con message equals props message, we actually have a
props message, we actually have a shortcut for this in JavaScript. So,
shortcut for this in JavaScript. So, down here we can just type const curly
down here we can just type const curly brackets and inside we can type message
brackets and inside we can type message and make it equal to props.
and make it equal to props. So this takes the message property out
So this takes the message property out of this object and saves it in a
of this object and saves it in a variable called message. So this does
variable called message. So this does the same thing as this line above. This
the same thing as this line above. This code is a shortcut for this code. And
code is a shortcut for this code. And this shortcut is called dstructuring
this shortcut is called dstructuring because we're taking stuff out of this
because we're taking stuff out of this object. We're deconstructing it. We can
object. We're deconstructing it. We can also use this shortcut with the sender
also use this shortcut with the sender property to add another property to take
property to add another property to take out of this object. After the first
out of this object. After the first property, we can type comma and the
property, we can type comma and the second property sender.
second property sender. So this will get the message property
So this will get the message property and the sender property out of this
and the sender property out of this object and it will save it in a message
object and it will save it in a message variable and a sender variable. So this
variable and a sender variable. So this line of code is a shortcut for these two
line of code is a shortcut for these two lines above.
lines above. So now let's actually turn these two
So now let's actually turn these two lines into comments or comment out these
lines into comments or comment out these lines. At the front we're going to type
lines. At the front we're going to type double slash and at the front here we'll
double slash and at the front here we'll type double slash.
type double slash. By the way, if we start with double
By the way, if we start with double slash, it will turn this code into
slash, it will turn this code into comments and it will be ignored by the
comments and it will be ignored by the computer.
computer. So, we'll just keep this here as a
So, we'll just keep this here as a reminder that this is a shortcut for
reminder that this is a shortcut for these two.
these two. Next, JavaScript has an even shorter
Next, JavaScript has an even shorter shortcut for this. Since props is a
shortcut for this. Since props is a parameter up here, we can just
parameter up here, we can just dstructure it directly up here. So here
dstructure it directly up here. So here instead of the props object we can just
instead of the props object we can just type curly brackets directly
type curly brackets directly and then type message
and then type message and sender.
and sender. This takes the message and sender
This takes the message and sender properties directly out of the first
properties directly out of the first parameter and then saves them in a
parameter and then saves them in a variable called message and a variable
variable called message and a variable called sender. So it does the same thing
called sender. So it does the same thing as this code down here, but it's an even
as this code down here, but it's an even shorter shortcut. We're dstructuring the
shorter shortcut. We're dstructuring the parameter directly at the top. So this
parameter directly at the top. So this shortcut is used a lot in React
shortcut is used a lot in React tutorials and documentation. So it's
tutorials and documentation. So it's useful to know how this works.
useful to know how this works. So let's comment out this line here at
So let's comment out this line here at the front. We'll type double slash.
the front. We'll type double slash. So we remember that this code is a
So we remember that this code is a shortcut for this line of code and these
shortcut for this line of code and these two lines of code.
two lines of code. Now, let's save and check our website to
Now, let's save and check our website to make sure that everything is still
make sure that everything is still working. So, that looks good.
working. So, that looks good. We'll go back. And that is a
We'll go back. And that is a dstructuring shortcut. It allows us to
dstructuring shortcut. It allows us to take properties directly out of an
take properties directly out of an object.
object. Next, we're going to learn how to use if
Next, we're going to learn how to use if statements directly inside JSX.
statements directly inside JSX. So currently we have some JSX here and
So currently we have some JSX here and we put an if statement outside of this
we put an if statement outside of this JSX.
JSX. However, this means we're duplicating
However, this means we're duplicating some code like the div and the message.
some code like the div and the message. To make this code more reusable, we can
To make this code more reusable, we can actually move this if statement directly
actually move this if statement directly inside the JSX down here. So what we
inside the JSX down here. So what we want to do is if the sender is a robot,
want to do is if the sender is a robot, we want to put the image before the
we want to put the image before the message. So down here, let's go before
message. So down here, let's go before the message and press enter. And we're
the message and press enter. And we're going to type curly brackets and we're
going to type curly brackets and we're going to insert the if statement
going to insert the if statement directly inside here. So here before the
directly inside here. So here before the message we want to do something like if
message we want to do something like if the sender is equal to the string robot
the sender is equal to the string robot we're going to insert this image.
we're going to insert this image. However we can't actually use the word
However we can't actually use the word if inside of these curly brackets.
if inside of these curly brackets. Instead we need to use another feature
Instead we need to use another feature of JavaScript called a guard operator or
of JavaScript called a guard operator or and.
and. In JavaScript, you can write value one
In JavaScript, you can write value one and value two. If value one is true,
and value two. If value one is true, then the result will be value two. So
then the result will be value two. So this works just like an if statement
this works just like an if statement except we can write it on one line and
except we can write it on one line and it results in a value. So if you want to
it results in a value. So if you want to learn more about this feature, I cover
learn more about this feature, I cover it in the booleans lesson of my
it in the booleans lesson of my JavaScript course and you can check out
JavaScript course and you can check out that in the video description.
that in the video description. For now, the only thing we need to know
For now, the only thing we need to know is we can use and as sort of an if
is we can use and as sort of an if statement in our JSX.
statement in our JSX. So, first let's remove this
So, first let's remove this and then we're going to use and to
and then we're going to use and to insert this if statement directly inside
insert this if statement directly inside the JSX.
the JSX. So, the first value is going to be our
So, the first value is going to be our if condition, which is sender equals the
if condition, which is sender equals the robot. So we'll check if the sender is
robot. So we'll check if the sender is equal to the string robot
equal to the string robot and then we're going to use and.
and then we're going to use and. So if this is true, the result is going
So if this is true, the result is going to be the second value here. So here if
to be the second value here. So here if the sender is a robot, we want to insert
the sender is a robot, we want to insert the robot image. So let's just copy and
the robot image. So let's just copy and paste this code. We're going to select
paste this code. We're going to select this
this and then copy it.
and then copy it. And then down here after and we're going
And then down here after and we're going to paste.
to paste. So again the way this works is if the
So again the way this works is if the value on the left is true then the
value on the left is true then the result will be the value on the right.
result will be the value on the right. So this and is sort of a shortcut for
So this and is sort of a shortcut for this if statement and it lets us insert
this if statement and it lets us insert if statements directly inside our JSX.
if statements directly inside our JSX. So let's actually comment out this if
So let's actually comment out this if statement out here. So we remember that
statement out here. So we remember that this code is a shortcut for this code.
this code is a shortcut for this code. So here before the if statement we'll
So here before the if statement we'll type slash and star and after the if
type slash and star and after the if statement we'll type star and slash and
statement we'll type star and slash and remove the indent. So this is known as a
remove the indent. So this is known as a multi-line comment. All the code between
multi-line comment. All the code between these two stars will be ignored by the
these two stars will be ignored by the computer. So now let's save
computer. So now let's save and check our website.
and check our website. And as you can see, if the sender is a
And as you can see, if the sender is a robot, we're going to add an image on
robot, we're going to add an image on the left before the message. So now, one
the left before the message. So now, one problem here is that we're also showing
problem here is that we're also showing the user's profile image at the back,
the user's profile image at the back, but we only want to show one profile
but we only want to show one profile image. We'll go back to our code
image. We'll go back to our code and here we only want to show the user
and here we only want to show the user profile image if the sender is the user.
profile image if the sender is the user. So let's insert another if statement
So let's insert another if statement down here. Feel free to pause this video
down here. Feel free to pause this video if you want to try it yourself first.
if you want to try it yourself first. So at the front we'll type open curly
So at the front we'll type open curly bracket. At the end a close curly
bracket. At the end a close curly bracket.
bracket. And at the front we're going to type the
And at the front we're going to type the if condition. So we'll check if the
if condition. So we'll check if the sender is equal to the string user and
sender is equal to the string user and then we'll type ant. So if this is true
then we'll type ant. So if this is true then we will show this image. If this is
then we will show this image. If this is not true, we will not show this image.
not true, we will not show this image. So this code is a shortcut for this
So this code is a shortcut for this code.
Let's save and check our website. And it works. The robot image is on the
And it works. The robot image is on the left and the user image is on the right.
left and the user image is on the right. So let's go back.
So let's go back. Using the guard operator or and we can
Using the guard operator or and we can insert an if statement directly inside
insert an if statement directly inside our JSX.
our JSX. Next, we're going to do some code
Next, we're going to do some code cleanup. So, let's scroll up and we're
cleanup. So, let's scroll up and we're going to go to the chat input component
going to go to the chat input component first. So, you notice that in here, this
first. So, you notice that in here, this line is a little bit too long. To make
line is a little bit too long. To make our code easier to read, we can actually
our code easier to read, we can actually put each attribute on its own line. So,
put each attribute on its own line. So, here we'll type enter to put placeholder
here we'll type enter to put placeholder on its own line. And here we'll type
on its own line. And here we'll type enter to put size on its own line. And
enter to put size on its own line. And let's also type enter at the back. So
let's also type enter at the back. So the attributes are on their own lines.
the attributes are on their own lines. And then let's add an indent in front of
And then let's add an indent in front of these attributes by pressing tab and
these attributes by pressing tab and pressing tab. This makes it clear that
pressing tab. This makes it clear that these attributes are part of this
these attributes are part of this element. And we also want to make sure
element. And we also want to make sure that these two are vertically aligned.
that these two are vertically aligned. This makes it easy to see where this
This makes it easy to see where this element starts and where it ends.
element starts and where it ends. Next, let's scroll down to the chat
Next, let's scroll down to the chat message component. And notice that these
message component. And notice that these two lines of code with the and are also
two lines of code with the and are also a bit too long. To improve this, we can
a bit too long. To improve this, we can surround this value with brackets. So
surround this value with brackets. So we'll type open bracket and at the end
we'll type open bracket and at the end close bracket and then we can put this
close bracket and then we can put this code on its own line. So here we'll type
code on its own line. So here we'll type enter and at the end we'll type enter.
enter and at the end we'll type enter. So this will still have the same value,
So this will still have the same value, but the brackets allow us to put the
but the brackets allow us to put the code on multiple lines. We'll do the
code on multiple lines. We'll do the same thing for the second image.
same thing for the second image. We'll surround it in brackets, open
We'll surround it in brackets, open bracket, and close bracket. And we'll
bracket, and close bracket. And we'll put this value on a separate line
put this value on a separate line so that it's no longer too long.
so that it's no longer too long. Next, let's scroll down even more to the
Next, let's scroll down even more to the app variable. And you'll notice that
app variable. And you'll notice that these lines are also a bit too long
these lines are also a bit too long because of the attributes. Again, we can
because of the attributes. Again, we can put each attribute on its own line. So
put each attribute on its own line. So here we'll put message on its own line
here we'll put message on its own line and sender on its own line. And we'll
and sender on its own line. And we'll put the end of the component on its own
put the end of the component on its own line so that this is vertically aligned
line so that this is vertically aligned with this. And let's also add indents
with this. And let's also add indents before the attributes. So we'll press
before the attributes. So we'll press tab and tab. So it's easy to see that
tab and tab. So it's easy to see that these attributes are part of this
these attributes are part of this component. And we'll do the same thing
component. And we'll do the same thing for the other three chat messages. So
for the other three chat messages. So we'll put this on its own line
we'll put this on its own line and add indents.
and add indents. And put this on its own line.
And put this on its own line. Add indents.
Add indents. And put this on its own line.
And put this on its own line. And add indents.
And add indents. and save
and save and check our website and everything
and check our website and everything should still work because we just
should still work because we just changed the formatting of our code. So
changed the formatting of our code. So let's go back and that's how we avoid
let's go back and that's how we avoid our lines being too long. We can put
our lines being too long. We can put each attribute on its own line
each attribute on its own line and we can also surround a value with
and we can also surround a value with brackets and put it on its own line.
brackets and put it on its own line. Finally, down here, instead of using a
Finally, down here, instead of using a variable to save our app, a best
variable to save our app, a best practice is to use a component to create
practice is to use a component to create this app.
this app. So here, let's create a component using
So here, let's create a component using function
function and we'll name it capital A app
and we'll name it capital A app brackets and curly brackets.
brackets and curly brackets. And then this component will return all
And then this component will return all of this HTML.
of this HTML. So we'll return brackets so we can write
So we'll return brackets so we can write it on multiple lines.
it on multiple lines. And we're going to move all this code up
And we're going to move all this code up here. So let's select this code. And
here. So let's select this code. And we'll cut
we'll cut and inside the return
and inside the return we're going to paste.
we're going to paste. And we can select these lines
And we can select these lines and press tab to fix the indenting.
and press tab to fix the indenting. So now we're going to use this component
So now we're going to use this component instead of the variable to create our
instead of the variable to create our app. So down here, let's remove this
app. So down here, let's remove this variable.
variable. And then inside render, we're going to
And then inside render, we're going to create the app. We can type less than
create the app. We can type less than capital A app greater than and then less
capital A app greater than and then less than slash app greater than.
than slash app greater than. So this creates an entire chatbot
So this creates an entire chatbot application. And then we give this to
application. And then we give this to React to display on the website.
React to display on the website. And again since there's nothing inside
And again since there's nothing inside this component, we can use the
this component, we can use the self-closing element shortcut. So we can
self-closing element shortcut. So we can remove this closing tag. And then at the
remove this closing tag. And then at the end here we can type space and slash.
end here we can type space and slash. And now let's save
And now let's save and check our website.
and check our website. And it displays the app on the website.
And it displays the app on the website. Let's go back to our code.
Let's go back to our code. So a best practice is to use a component
So a best practice is to use a component called app to create the website because
called app to create the website because it gives us access to extra features of
it gives us access to extra features of components like props.
components like props. And also notice that we can have
And also notice that we can have components inside a component. So this
components inside a component. So this lets us split up a website into smaller
lets us split up a website into smaller and smaller components or smaller and
and smaller components or smaller and smaller pieces.
smaller pieces. So again, React helps us create websites
So again, React helps us create websites easier because it lets us work on a
easier because it lets us work on a small piece of the website at a time.
In the next lesson, we're going to learn a very important feature of React called
a very important feature of React called state. State lets us make our website
state. State lets us make our website interactive, and it will let us add new
interactive, and it will let us add new chat messages to our website.
chat messages to our website. And that's the end of this lesson. In
And that's the end of this lesson. In this lesson, we learned that a component
this lesson, we learned that a component is just a piece of the website. We also
is just a piece of the website. We also learned that components let us create
learned that components let us create our own HTML elements. We started the
our own HTML elements. We started the chatbot project. We split the chatbot
chatbot project. We split the chatbot into chat input and chat message
into chat input and chat message components. We learned props which let
components. We learned props which let us insert values into components and
us insert values into components and make components reusable.
make components reusable. We learned the destructuring and guard
We learned the destructuring and guard operator shortcuts. We did some code
operator shortcuts. We did some code cleanup and split longer lines into
cleanup and split longer lines into multiple lines. And we created an app
multiple lines. And we created an app component which represents the entire
component which represents the entire application.
application. Thanks for watching so far. If you find
Thanks for watching so far. If you find this course valuable, you can support
this course valuable, you can support the channel by liking this video,
the channel by liking this video, leaving a comment, and subscribing.
leaving a comment, and subscribing. You can also check out the premium
You can also check out the premium version of this course where you'll get
version of this course where you'll get all the lessons ads free broken down
all the lessons ads free broken down into small videos as well as additional
into small videos as well as additional lessons and more projects that are not
lessons and more projects that are not in the public React course. Currently,
in the public React course. Currently, the premium course contains 11 lessons
the premium course contains 11 lessons and I'll be adding more lessons in the
and I'll be adding more lessons in the future. You can also get a certificate
future. You can also get a certificate of completion, create comments or
of completion, create comments or questions on specific topics, get
questions on specific topics, get progress tracking, search and course
progress tracking, search and course notes. You can also check out the
notes. You can also check out the membership where you can get this course
membership where you can get this course ads free separated by each lesson, AI
ads free separated by each lesson, AI videos, backend tutorials, and more.
videos, backend tutorials, and more. Thanks again, and let's continue with
Thanks again, and let's continue with the course. Here are some exercises to
the course. Here are some exercises to help you practice what we learned in
help you practice what we learned in this lesson.
In this lesson, we're going to learn two of the most important features of React
of the most important features of React called state and event handlers. And
called state and event handlers. And we're going to use these features to
we're going to use these features to create the functionality for the chatbot
create the functionality for the chatbot project.
project. Before we learn state, we're going to
Before we learn state, we're going to improve our code a bit. Currently to add
improve our code a bit. Currently to add a new chat message we have to manually
a new chat message we have to manually type a new chat message component.
type a new chat message component. Instead of manually typing this code we
Instead of manually typing this code we can actually use JavaScript to generate
can actually use JavaScript to generate these components.
these components. To do that we're going to do two steps.
To do that we're going to do two steps. The first step is to save the data. Data
The first step is to save the data. Data means information.
means information. Here the data is the information about
Here the data is the information about our chat messages like the message and
our chat messages like the message and the sender. So we need to save this data
the sender. So we need to save this data or this information in our JavaScript.
or this information in our JavaScript. Let's use a variable to save this data.
Let's use a variable to save this data. At the top of this component, we're
At the top of this component, we're going to create a variable using const
going to create a variable using const and we'll name it chat messages
and we'll name it chat messages equals and we'll save it as an array by
equals and we'll save it as an array by typing square brackets.
typing square brackets. As a review, an array is a list of
As a review, an array is a list of values. So here we want to save a list
values. So here we want to save a list of chat messages. So it makes sense to
of chat messages. So it makes sense to save it as an array.
save it as an array. Next, each chat message has multiple
Next, each chat message has multiple pieces of data, like the message and the
pieces of data, like the message and the sender. So, inside this array, we're
sender. So, inside this array, we're going to save each chat message as an
going to save each chat message as an object by typing curly brackets.
object by typing curly brackets. As a review, an object groups related
As a review, an object groups related values together. So, it's going to help
values together. So, it's going to help us group the message and the sender
us group the message and the sender together.
together. And then inside this object, we're going
And then inside this object, we're going to create a property called message
to create a property called message colon and a string. And we're going to
colon and a string. And we're going to use this to save the message. So let's
use this to save the message. So let's copy the first message. We'll select it
copy the first message. We'll select it and copy. And we're going to paste it in
and copy. And we're going to paste it in here.
here. And then we'll add a comma. And we're
And then we'll add a comma. And we're going to add a sender property colon and
going to add a sender property colon and a string. and we're going to save the
a string. and we're going to save the first sender which is the user.
first sender which is the user. So that's how we save the data for the
So that's how we save the data for the first chat message in our JavaScript.
first chat message in our JavaScript. Now let's save the data for the second
Now let's save the data for the second chat message.
chat message. So after the first object, we're going
So after the first object, we're going to type comma and create another object.
to type comma and create another object. I will give this one a message property
I will give this one a message property as well colon a string. and we'll save
as well colon a string. and we'll save the second message.
the second message. We'll select this copy and then inside
We'll select this copy and then inside here we're going to paste.
here we're going to paste. Add a comma and a sender property colon
Add a comma and a sender property colon and a string. And the second chat
and a string. And the second chat message is from the robot. So inside the
message is from the robot. So inside the sender, we'll save robot.
sender, we'll save robot. Let's do the same thing for the third
Let's do the same thing for the third and fourth chat messages. we'll save
and fourth chat messages. we'll save them in our JavaScript. Feel free to
them in our JavaScript. Feel free to pause the video if you want to try it
pause the video if you want to try it yourself.
yourself. So, for the third chat message, we're
So, for the third chat message, we're going to add a comma at the end and
going to add a comma at the end and another object, a message property, a
another object, a message property, a string,
string, and we're going to copy the third
and we're going to copy the third message,
message, and paste it in here.
and a sender property. The third message is from the user.
is from the user. And then we're going to type comma and
And then we're going to type comma and another object the message property
another object the message property colon and a string. And we'll copy paste
colon and a string. And we'll copy paste the fourth message. So we'll select it,
the fourth message. So we'll select it, copy, and then inside here we're going
copy, and then inside here we're going to paste
to paste and a sender property.
and a sender property. And the fourth message is from the
And the fourth message is from the robot.
robot. So that's how we save the data or the
So that's how we save the data or the information for the chat messages.
After we save the data, the second step is to generate the HTML. So we're going
is to generate the HTML. So we're going to use JavaScript to convert this data
to use JavaScript to convert this data into these components. So we don't have
into these components. So we don't have to type these components manually.
to type these components manually. To do that, after the data,
To do that, after the data, we're going to type the name of the
we're going to type the name of the data, which is chat messages.
data, which is chat messages. And this is an array. And arrays have a
And this is an array. And arrays have a feature called dot map and brackets.
feature called dot map and brackets. As a review, do map lets us go through
As a review, do map lets us go through each value of an array and convert it
each value of an array and convert it into a new value.
into a new value. To use dot map, we need to give it a
To use dot map, we need to give it a function. So between these brackets,
function. So between these brackets, we're going to type a function using
we're going to type a function using brackets, arrow, and curly brackets.
brackets, arrow, and curly brackets. As a review, this is an arrow function.
As a review, this is an arrow function. It mostly works the same way as a
It mostly works the same way as a function, but it's shorter. When we give
function, but it's shorter. When we give a function to another function like map,
a function to another function like map, we usually use an arrow function because
we usually use an arrow function because it makes the code a bit cleaner.
it makes the code a bit cleaner. This is what React tutorials and
This is what React tutorials and documentations use.
documentations use. Next, this function gets a parameter. So
Next, this function gets a parameter. So at the top, we'll create a new parameter
at the top, we'll create a new parameter and name it chat message.
and name it chat message. So now dom takes each value in this
So now dom takes each value in this array and converts it into a new value.
array and converts it into a new value. The way it works is it starts with the
The way it works is it starts with the first value and then it saves it in this
first value and then it saves it in this parameter and runs this function and
parameter and runs this function and whatever we return from this function
whatever we return from this function will be the new first value. Then it
will be the new first value. Then it takes the second value. It saves it in
takes the second value. It saves it in this parameter and runs the function.
this parameter and runs the function. And whatever we return from the function
And whatever we return from the function will be the new second value. Then it
will be the new second value. Then it takes the third value, saves it, runs a
takes the third value, saves it, runs a function and whatever we return will be
function and whatever we return will be the new third value and so on. So map
the new third value and so on. So map basically goes through each value in
basically goes through each value in this array, runs a function and converts
this array, runs a function and converts it into a new value.
So here we want to convert each chat message object into a chat message
message object into a chat message component. So inside this inner
component. So inside this inner function, we're going to return a chat
function, we're going to return a chat message component by typing brackets
message component by typing brackets and then here less than chat
and then here less than chat message/grater
message/grater than to return a chat message component.
than to return a chat message component. Next, each chat message component has
Next, each chat message component has two props, message and sender. So we're
two props, message and sender. So we're going to add those props to this
going to add those props to this component.
component. So here
So here we'll create a prop message
we'll create a prop message equals
equals and now what do we save in this prop?
and now what do we save in this prop? Remember that map takes each object in
Remember that map takes each object in this array and saves it in this
this array and saves it in this parameter. So this parameter contains a
parameter. So this parameter contains a chat message object and each chat
chat message object and each chat message object has a message and a
message object has a message and a sender. So we want to save the message
sender. So we want to save the message inside this prop.
inside this prop. To do that we're going to type curly
To do that we're going to type curly brackets and inside we'll type this
brackets and inside we'll type this object chat message and get the message
object chat message and get the message property which is dot message.
property which is dot message. This gets the message out of this object
This gets the message out of this object and saves it in the prop.
and saves it in the prop. So why do we use curly brackets here
So why do we use curly brackets here instead of double quotes? If we use
instead of double quotes? If we use double quotes, it will save a string
double quotes, it will save a string into this prop, which is not what we
into this prop, which is not what we want. But if we use curly brackets, it
want. But if we use curly brackets, it will save the result of this code into
will save the result of this code into this prop.
this prop. So for the first chat message, the
So for the first chat message, the result of chat message dossage is going
result of chat message dossage is going to be the string hello chatbot. So it's
to be the string hello chatbot. So it's going to take this and save it into the
going to take this and save it into the message prop here. For the second chat
message prop here. For the second chat message, the result of this code is
message, the result of this code is hello, how can I help you? And it will
hello, how can I help you? And it will save this into the message prop and so
save this into the message prop and so on. So using curly brackets we can put
on. So using curly brackets we can put any JavaScript code inside and it will
any JavaScript code inside and it will save the result of this code into the
save the result of this code into the prop not just a string.
prop not just a string. So next each chat message component has
So next each chat message component has a sender prop. So here we're also going
a sender prop. So here we're also going to add a sender
to add a sender equals and again we want to save the
equals and again we want to save the sender property of this chat message
sender property of this chat message object. So we'll type curly brackets and
object. So we'll type curly brackets and the object
the object chat message dot sender.
chat message dot sender. So this will get the sender property out
So this will get the sender property out of each chat message object and save it
of each chat message object and save it in here. And that's it. Now map will
in here. And that's it. Now map will take each value of this array and
take each value of this array and convert it into a chat message
convert it into a chat message component.
component. And here's what the result looks like.
Next, we're going to save the result of this code in a variable. So, up here,
this code in a variable. So, up here, let's type const and we'll name the
let's type const and we'll name the variable chat message components equals
variable chat message components equals this code.
this code. And now we have an array of components
And now we have an array of components or a list of components.
or a list of components. Finally, we're going to insert this
Finally, we're going to insert this array into the JSX.
array into the JSX. So, down here, we can actually remove
So, down here, we can actually remove all of these chat message components
all of these chat message components because we're generating them now.
because we're generating them now. And we're going to type curly brackets,
And we're going to type curly brackets, and we're going to insert this array.
and we're going to insert this array. In here, we'll type chat message
In here, we'll type chat message components.
components. If we insert an array of components,
If we insert an array of components, React will just display all of these
React will just display all of these components on the page. If we save
components on the page. If we save and then go to our project,
and then go to our project, it displays all the chat message
it displays all the chat message components that we generated with our
components that we generated with our JavaScript.
JavaScript. So now we're generating this HTML with
So now we're generating this HTML with JavaScript and we no longer have to type
JavaScript and we no longer have to type out each component manually.
out each component manually. Now, there's one more thing that's
Now, there's one more thing that's useful to know. Let's go back to our
useful to know. Let's go back to our code.
code. And there's actually a shortcut that we
And there's actually a shortcut that we can use here. Instead of saving this
can use here. Instead of saving this result in a variable, we can actually
result in a variable, we can actually just insert this result directly in the
just insert this result directly in the JSX.
JSX. So, we'll select this code
So, we'll select this code and then cut.
and then cut. And between the curly brackets, we're
And between the curly brackets, we're going to remove the variable and just
going to remove the variable and just paste that code.
paste that code. And we'll remove the semicolon at the
And we'll remove the semicolon at the end.
end. And we'll select this code and press tab
And we'll select this code and press tab a few times to fix the indenting.
a few times to fix the indenting. And finally, we can remove this variable
And finally, we can remove this variable up here.
Now we're just inserting the result of this code directly in the JSX.
this code directly in the JSX. This shortcut is used a lot in React
This shortcut is used a lot in React tutorials and documentation. So it's
tutorials and documentation. So it's useful to know how it works.
useful to know how it works. Now let's save
Now let's save and then check our website.
and then check our website. And everything still works. So that's
And everything still works. So that's how we generate the HTML.
Before we move on, there's actually an issue that we need to fix here. If we
issue that we need to fix here. If we look at our console and we scroll up,
look at our console and we scroll up, we'll see an error saying each child in
we'll see an error saying each child in a list should have a unique key prop. In
a list should have a unique key prop. In React, if we insert an array of
React, if we insert an array of components, we need to give each
components, we need to give each component a prop called key. The key
component a prop called key. The key helps React track changes in the array.
helps React track changes in the array. So, we should give each component a key.
So, we should give each component a key. Let's go back to VS Code
Let's go back to VS Code and for each chat message, we're going
and for each chat message, we're going to add a prop called key equals.
to add a prop called key equals. And this key has to be unique. So, what
And this key has to be unique. So, what should we use as the key?
should we use as the key? Usually when we have some data like this
Usually when we have some data like this in the real world, each piece of data
in the real world, each piece of data should have a unique ID that lets us
should have a unique ID that lets us identify it. So let's add a unique ID to
identify it. So let's add a unique ID to each message to match what we would see
each message to match what we would see in the real world. So for the first
in the real world. So for the first message after the sender, we'll add a
message after the sender, we'll add a property called ID colon. And let's just
property called ID colon. And let's just make it a string ID1 to keep it simple.
make it a string ID1 to keep it simple. For the second message, we'll add an ID
For the second message, we'll add an ID with the string ID 2. For the third
with the string ID 2. For the third message, we'll make the ID ID3. And for
message, we'll make the ID ID3. And for the fourth message, we'll add an ID
the fourth message, we'll add an ID string ID 4. So, we'll use these IDs for
string ID 4. So, we'll use these IDs for practice. They just have to be unique.
practice. They just have to be unique. And now we'll use this unique ID as the
And now we'll use this unique ID as the key. So down here we'll set the key to
key. So down here we'll set the key to be equal to curly brackets and we'll get
be equal to curly brackets and we'll get the chat message do ID.
the chat message do ID. So chat message
So chat message id.
id. Again we use curly brackets here because
Again we use curly brackets here because we want to save the result of this code
we want to save the result of this code as the key. And now each component in
as the key. And now each component in this array will have a unique key. Let's
this array will have a unique key. Let's save and check our website.
save and check our website. And now the error is gone from the
And now the error is gone from the console.
console. Let's go back to our code.
Let's go back to our code. And now we have a lot of code in our app
And now we have a lot of code in our app component.
component. To make our code easier to work with,
To make our code easier to work with, we're going to separate this code into
we're going to separate this code into smaller pieces.
smaller pieces. Notice that this code and this code are
Notice that this code and this code are related to chat messages.
related to chat messages. So it makes sense to separate these two
So it makes sense to separate these two pieces of code into a chat messages
pieces of code into a chat messages component.
component. So we'll scroll up
So we'll scroll up above app. Let's create a new component
above app. Let's create a new component using function and we'll name it capital
using function and we'll name it capital C chat capital M messages
C chat capital M messages brackets and curly brackets.
brackets and curly brackets. And now we're going to move all the code
And now we're going to move all the code related to chat messages into this new
related to chat messages into this new component. So we'll select this code
and cut. And inside here, we're going to paste
And inside here, we're going to paste and create some new lines. And we're
and create some new lines. And we're going to select this code
going to select this code and cut.
and cut. And inside here, we're going to paste.
And inside here, we're going to paste. And at the end of this component, we
And at the end of this component, we need to return the HTML.
need to return the HTML. So at the end we're going to return open
So at the end we're going to return open bracket and we'll remove the closed
bracket and we'll remove the closed bracket for now and we're going to use a
bracket for now and we're going to use a fragment to group all of these
fragment to group all of these components together. So we'll type less
components together. So we'll type less than greater than and at the end of this
than greater than and at the end of this less than/greater than and we'll add the
less than/greater than and we'll add the close bracket at the end. And finally,
close bracket at the end. And finally, we can fix the indenting by pressing
we can fix the indenting by pressing tab. And we'll remove the indent here
tab. And we'll remove the indent here and here as well, so that these are
and here as well, so that these are vertically aligned.
vertically aligned. Finally, now that we have this chat
Finally, now that we have this chat messages component, we're going to
messages component, we're going to insert this into our app. So, we'll
insert this into our app. So, we'll scroll down into app and remove these
scroll down into app and remove these lines.
lines. And to insert the chat messages
And to insert the chat messages component, we'll use the component
component, we'll use the component syntax again. Less than capital C chat
syntax again. Less than capital C chat capital M messages
capital M messages slash greater than.
slash greater than. So now we just separated all that code
So now we just separated all that code into its own component and it makes our
into its own component and it makes our code much cleaner. Let's save
code much cleaner. Let's save and check our website.
and check our website. And everything still works. We just
And everything still works. We just reorganized our code into a chat
reorganized our code into a chat messages component.
messages component. Okay, so far we saved the data and we
Okay, so far we saved the data and we generated the HTML. The last step to
generated the HTML. The last step to building a website is to make it
building a website is to make it interactive.
interactive. For example, when we click this send
For example, when we click this send button, we want to add a chat message to
button, we want to add a chat message to the website. To make this website
the website. To make this website interactive, we're going to use event
interactive, we're going to use event handlers.
handlers. An event handler lets us run a function
An event handler lets us run a function when we interact with a website.
when we interact with a website. Let's do an example. We'll go back to
Let's do an example. We'll go back to our code
our code and we're going to scroll up to the chat
and we're going to scroll up to the chat messages component
messages component and then inside this fragment we're
and then inside this fragment we're going to create a new line and let's
going to create a new line and let's create a new button using less than
create a new button using less than button greater than and less than/button
button greater than and less than/button greater than and inside this button
greater than and inside this button let's put the text send message.
let's put the text send message. So, we'll create a new button for
So, we'll create a new button for practice.
practice. Next, we're going to give this button a
Next, we're going to give this button a special prop. So, here we'll add a new
special prop. So, here we'll add a new prop called on capital C click equals
prop called on capital C click equals curly brackets.
curly brackets. So, on click lets us run a function when
So, on click lets us run a function when we click this button. So, above this,
we click this button. So, above this, let's create a function to run. So we'll
let's create a function to run. So we'll type function and let's name it send
type function and let's name it send message brackets and curly brackets
message brackets and curly brackets and inside this function let's just
and inside this function let's just console.log
console.log the string send message.
the string send message. Now that we have this function we're
Now that we have this function we're going to save this function inside on
going to save this function inside on click. So between these curly brackets,
click. So between these curly brackets, we're going to give the name of the
we're going to give the name of the function send message.
function send message. So notice that again we used curly
So notice that again we used curly brackets. Curly brackets lets us save
brackets. Curly brackets lets us save any type of value in a prop including a
any type of value in a prop including a function.
function. Now that we gave on click this function,
Now that we gave on click this function, when we click this button, it's going to
when we click this button, it's going to run this function and console.log this
run this function and console.log this message. Let's save
message. Let's save and we'll go to our website
and we'll go to our website and try clicking this new send message
and try clicking this new send message button
button and this will run the function and
and this will run the function and display the message send message in the
display the message send message in the console.
console. Let's go back to our code
Let's go back to our code and we'll learn more details about event
and we'll learn more details about event handlers.
handlers. So on click is known as the event and
So on click is known as the event and send message is known as the event
send message is known as the event handler. It does something when this
handler. It does something when this event happens or it handles the event.
event happens or it handles the event. Now there's two other things to note.
Now there's two other things to note. The event prop always starts with on and
The event prop always starts with on and then the name of the event like click
then the name of the event like click and the event prop must use camelc case.
and the event prop must use camelc case. As a review, camelc case means the first
As a review, camelc case means the first word is lowercase and all other words
word is lowercase and all other words start with a capital. So that's why on
start with a capital. So that's why on is lowercase and click starts with a
is lowercase and click starts with a capital C.
capital C. Another thing we should know is that
Another thing we should know is that here we should not run the event handler
here we should not run the event handler function. So we should not use brackets.
function. So we should not use brackets. So this will run the function and then
So this will run the function and then the result of the function will be
the result of the function will be undefined. and then it's going to save
undefined. and then it's going to save undefined into on click which doesn't
undefined into on click which doesn't work. Instead, we should just give the
work. Instead, we should just give the function directly to on click without
function directly to on click without running it.
running it. So that's event handlers and event
So that's event handlers and event handler lets us run a function when we
handler lets us run a function when we interact with a website and they make
interact with a website and they make the website interactive.
Next, when we click this button, instead of just console.log, log. Let's add a
of just console.log, log. Let's add a new chat message. To do that, we can add
new chat message. To do that, we can add a new object to the chat messages array
a new object to the chat messages array up here. So, inside this function, let's
up here. So, inside this function, let's remove console.log
remove console.log and then type the name of the array chat
and then type the name of the array chat messages and then use the code.push
messages and then use the code.push and brackets.
and brackets. As a review, dot push adds a value to
As a review, dot push adds a value to the end of an array. So inside here,
the end of an array. So inside here, we're going to add another object using
we're going to add another object using curly brackets.
curly brackets. And each object will have a message
And each object will have a message property. So we'll type message colon
property. So we'll type message colon and then a string. And for our new
and then a string. And for our new message, let's just make the message
message, let's just make the message test.
test. And we'll add a comma. And we'll add a
And we'll add a comma. And we'll add a sender property sender colon a string
sender property sender colon a string and this message will be from the user
and this message will be from the user comma and we'll give it an ID colon and
comma and we'll give it an ID colon and let's just use the string ID5.
let's just use the string ID5. Now there's one problem with using ID5
Now there's one problem with using ID5 in this situation.
in this situation. Every message that we create when we
Every message that we create when we click this button is going to have the
click this button is going to have the ID ID5. But the ID should be unique. To
ID ID5. But the ID should be unique. To create a unique ID, we can use some
create a unique ID, we can use some JavaScript code. So instead of ID5,
JavaScript code. So instead of ID5, we're going to use the code crypto dot
we're going to use the code crypto dot random capital U, capital U, capital I,
random capital U, capital U, capital I, capital D, and brackets.
capital D, and brackets. So this is some JavaScript code that
So this is some JavaScript code that will generate a unique ID string every
will generate a unique ID string every time we run this code. So now every
time we run this code. So now every message that we create using this button
message that we create using this button will have a unique ID
will have a unique ID at the end. Let's create some new lines
at the end. Let's create some new lines and let's console.log
and let's console.log the chat messages array to see if it has
the chat messages array to see if it has a new message. Let's save
a new message. Let's save and we'll go to our website
and we'll go to our website and we'll click send message.
and we'll click send message. And now inside chat messages, we have
And now inside chat messages, we have five messages. So we added this last one
five messages. So we added this last one here. It has the message test. And
here. It has the message test. And notice it has a unique ID. So we
notice it has a unique ID. So we successfully added a chat message when
successfully added a chat message when clicking this button.
clicking this button. Next, notice that even though we updated
Next, notice that even though we updated the data, it did not update the website.
the data, it did not update the website. So, it did not display a new chat
So, it did not display a new chat message component on the website. To fix
message component on the website. To fix this, we're going to learn one of the
this, we're going to learn one of the most important features of React called
most important features of React called state. State is data that is connected
state. State is data that is connected to the HTML. When we update this data,
to the HTML. When we update this data, it will update the HTML.
it will update the HTML. Let's go back to our code.
Let's go back to our code. And if we scroll up,
And if we scroll up, currently chat messages is just a normal
currently chat messages is just a normal variable. When we update chat messages,
variable. When we update chat messages, it will not update the HTML.
it will not update the HTML. However, if we convert chat messages
However, if we convert chat messages into state, when we update chat
into state, when we update chat messages, it will update the HTML. So
messages, it will update the HTML. So now let's learn how to convert chat
now let's learn how to convert chat messages into state.
messages into state. At the top of this component, we're
At the top of this component, we're going to use this code capital R react
going to use this code capital R react dot use capital S state and brackets.
dot use capital S state and brackets. And between the brackets, we're going to
And between the brackets, we're going to give it the chat messages data. So,
give it the chat messages data. So, we're going to select this data
we're going to select this data and cut.
and cut. and between these brackets we're going
and between these brackets we're going to paste.
So this will convert this data into state. So now if we update this data, it
state. So now if we update this data, it will also update the HTML.
will also update the HTML. So at the bottom here, we can remove the
So at the bottom here, we can remove the chat messages variable because we
chat messages variable because we converted it into state.
converted it into state. Next, react doouse state returns an
Next, react doouse state returns an array. So at the front, let's save the
array. So at the front, let's save the result in a variable const array equals
result in a variable const array equals react. State.
react. State. This array has two values. To get the
This array has two values. To get the first value, we can click here to
first value, we can click here to collapse the code for now. And to get
collapse the code for now. And to get the first value, we're going to type the
the first value, we're going to type the name of the array. Array and then square
name of the array. Array and then square brackets zero.
brackets zero. So remember, an array is a list of
So remember, an array is a list of values and square bracket zero gets us
values and square bracket zero gets us the first value in the list or in the
the first value in the list or in the array.
array. So the first value we get from use state
So the first value we get from use state is the current data.
is the current data. So here chat messages can change over
So here chat messages can change over time. It's going to start off as this
time. It's going to start off as this value which is the initial value and
value which is the initial value and then we might add new chat messages in
then we might add new chat messages in the future.
the future. So the first value in this array gives
So the first value in this array gives us the current value of chat messages or
us the current value of chat messages or the current data.
the current data. Let's save this in a variable so we can
Let's save this in a variable so we can use it later. We'll do const and let's
use it later. We'll do const and let's name it chat messages equals array zero.
name it chat messages equals array zero. So now we have the most current chat
So now we have the most current chat messages and we can use it down here to
messages and we can use it down here to generate the HTML.
generate the HTML. Next use state gives us a second value
Next use state gives us a second value in this array. To get the second value
in this array. To get the second value we're going to type array square bracket
we're going to type array square bracket 1.
1. And the second value of this array is a
And the second value of this array is a function that updates this data.
function that updates this data. So let's save this function in a
So let's save this function in a variable using const. And the naming
variable using const. And the naming convention for this function is a use
convention for this function is a use set. And then the name of the data which
set. And then the name of the data which is capital C chat capital M messages
is capital C chat capital M messages equals this value. And we should also
equals this value. And we should also use camel case here. So the first word
use camel case here. So the first word starts with a lowercase and every other
starts with a lowercase and every other word starts with a capital.
word starts with a capital. So this function lets us update the
So this function lets us update the data. In React, we should not update the
data. In React, we should not update the data directly like we did down here
data directly like we did down here using push. We should always use this
using push. We should always use this function to update the data. And that's
function to update the data. And that's because this function tells React that
because this function tells React that the data changed and to update the HTML.
the data changed and to update the HTML. If we update the data directly, React
If we update the data directly, React will not update the HTML.
will not update the HTML. If we use this function to update the
If we use this function to update the data, React will update the HTML. So we
data, React will update the HTML. So we should always use this function to
should always use this function to update the data. This is also known as
update the data. This is also known as the updater function.
So now let's give it a try. Instead of updating this data directly, we're going
updating this data directly, we're going to use this updater function by typing
to use this updater function by typing set chat messages and brackets.
set chat messages and brackets. And between the brackets, we're going to
And between the brackets, we're going to put the new value of chat messages.
put the new value of chat messages. So the way that this updator function
So the way that this updator function works is it's going to replace the
works is it's going to replace the entire chat messages array with a new
entire chat messages array with a new array. So let's give it a try. First, we
array. So let's give it a try. First, we need to make a copy of this array.
need to make a copy of this array. In React, we should not modify the data
In React, we should not modify the data directly. We should always create a copy
directly. We should always create a copy of the data and then modify the copy.
of the data and then modify the copy. This helps React be more efficient.
This helps React be more efficient. To create a copy, we're going to click
To create a copy, we're going to click between these brackets and create a new
between these brackets and create a new array using square brackets.
array using square brackets. And to copy chat messages, we can use
And to copy chat messages, we can use this code dot dot dot and the array that
this code dot dot dot and the array that we want to copy, which is chat messages.
we want to copy, which is chat messages. As a review, this is a JavaScript
As a review, this is a JavaScript feature called the spread operator. It
feature called the spread operator. It basically takes the values in an array
basically takes the values in an array and then copies them into a new array.
and then copies them into a new array. You can think of it like we're taking
You can think of it like we're taking the values in this array and then
the values in this array and then spreading them out into this new array.
spreading them out into this new array. That's why it's called the spread
That's why it's called the spread operator.
operator. The spread operator is used a lot in
The spread operator is used a lot in React tutorials and documentation. So,
React tutorials and documentation. So, it's useful to know how it works.
it's useful to know how it works. So, we created a copy of chat messages.
So, we created a copy of chat messages. And now we want to add a new chat
And now we want to add a new chat message at the end of this copy because
message at the end of this copy because we're trying to send a new message. To
we're trying to send a new message. To do that, we can just add a comma at the
do that, we can just add a comma at the end and then add a new chat message
end and then add a new chat message directly using curly brackets.
directly using curly brackets. So each chat message has a message
So each chat message has a message property colon and we'll give it the
property colon and we'll give it the string test for now. And each chat
string test for now. And each chat message has a sender property colon. And
message has a sender property colon. And let's make the sender the user.
let's make the sender the user. And we'll give each chat message an ID.
And we'll give each chat message an ID. And to create a unique ID we can use
And to create a unique ID we can use crypto
crypto random capital U capital U capital I
random capital U capital U capital I capital D and brackets.
capital D and brackets. So using the spread operator we made a
So using the spread operator we made a copy of the chat messages array and then
copy of the chat messages array and then we added a value at the end of this new
we added a value at the end of this new array.
array. And now this updater function will
And now this updater function will replace chat messages with this new
replace chat messages with this new array. And because we use this updater
array. And because we use this updater function, React will regenerate the
function, React will regenerate the HTML. So it will basically rerun all
HTML. So it will basically rerun all this code and it will update the
this code and it will update the website. So now let's save
website. So now let's save and let's check our website
and let's check our website and we'll press send message.
and we'll press send message. it will create a new chat message in our
it will create a new chat message in our data and it will also update the HTML.
data and it will also update the HTML. So it will create a new chat message
So it will create a new chat message component and display it on the website.
component and display it on the website. Now let's go back
Now let's go back and that is how state works. Let's do a
and that is how state works. Let's do a short review. State is basically data
short review. State is basically data that is connected to the HTML. When we
that is connected to the HTML. When we update this data or we update the state,
update this data or we update the state, it will update the HTML.
it will update the HTML. To convert some data into state, we use
To convert some data into state, we use react doouse state. So here it will
react doouse state. So here it will convert this data into state and use
convert this data into state and use state gives us two values.
state gives us two values. The first value is the current data and
The first value is the current data and then the second value is a function to
then the second value is a function to update this data. If we use the updater
update this data. If we use the updater function, it will also update the HTML.
function, it will also update the HTML. So don't worry if state is a little bit
So don't worry if state is a little bit confusing at first. The more you work
confusing at first. The more you work with state, the more you'll get used to
with state, the more you'll get used to it. And we'll do more examples of state
it. And we'll do more examples of state in this course and in the exercises so
in this course and in the exercises so you can get more practice.
you can get more practice. Next, we're going to learn a shortcut
Next, we're going to learn a shortcut called array destructuring.
called array destructuring. Here we get the first value out of this
Here we get the first value out of this array and save it in a variable called
array and save it in a variable called chat messages.
chat messages. Now JavaScript actually has a shortcut
Now JavaScript actually has a shortcut for this. Above this we can type const
for this. Above this we can type const and then square bracket equals this
and then square bracket equals this array
array and inside the square brackets we can
and inside the square brackets we can type chat messages.
type chat messages. So this is similar to object
So this is similar to object dstructuring. This gets the first value
dstructuring. This gets the first value out of this array and saves it in a
out of this array and saves it in a variable called chat messages. So this
variable called chat messages. So this code is a shortcut for this code. We can
code is a shortcut for this code. We can also get the second value out of this
also get the second value out of this array. At the end here we can type comma
array. At the end here we can type comma and then another variable name. Let's
and then another variable name. Let's use set chat messages.
use set chat messages. So this gets the second value out of
So this gets the second value out of this array and saves it in a variable
this array and saves it in a variable called set chat messages. So this code
called set chat messages. So this code is a shortcut for these two lines of
is a shortcut for these two lines of code. And this shortcut is called array
code. And this shortcut is called array dstructuring because we're taking stuff
dstructuring because we're taking stuff out of this array. We're deconstructing
out of this array. We're deconstructing it. Now in array dstructuring the order
it. Now in array dstructuring the order matters. So this will always get the
matters. So this will always get the first value out of the array and this
first value out of the array and this will always get the second value out of
will always get the second value out of the array.
the array. So now let's comment out these two
So now let's comment out these two lines. So we remember that this is just
lines. So we remember that this is just a shortcut. So we'll type double slash
a shortcut. So we'll type double slash at the front and here double slash at
at the front and here double slash at the front.
the front. Now another shortcut we can use is
Now another shortcut we can use is instead of saving the result of use
instead of saving the result of use state in this variable and then
state in this variable and then dstructuring it we can just dstructure
dstructuring it we can just dstructure this up here.
this up here. So instead of array we can just directly
So instead of array we can just directly dstructure using square brackets and
dstructure using square brackets and then the first value of u state is going
then the first value of u state is going to be chat messages
to be chat messages and the second value from state is going
and the second value from state is going to be the updater function which is set
to be the updater function which is set chat messages.
chat messages. So this code is a shortcut for this
So this code is a shortcut for this code. We just don't save it in a
code. We just don't save it in a variable in the middle.
variable in the middle. So at the front of this code, let's also
So at the front of this code, let's also comment it out using double slash.
comment it out using double slash. So that is array dstructuring. It gives
So that is array dstructuring. It gives us an easier way to take values out of
us an easier way to take values out of an array.
an array. Now this shortcut is used a lot in React
Now this shortcut is used a lot in React tutorials and documentation. So it's
tutorials and documentation. So it's useful to know how it works.
Next, instead of adding the same message test every time, we should add whatever
test every time, we should add whatever message is in the text box. So, we'll
message is in the text box. So, we'll learn how to get the text in a text box.
learn how to get the text in a text box. In normal JavaScript, we might use the
In normal JavaScript, we might use the DOM to get the input element and then
DOM to get the input element and then use a property called dot value to get
use a property called dot value to get the text inside the text box.
the text inside the text box. However, in React, a best practice is do
However, in React, a best practice is do not use the DOM manually. That's because
not use the DOM manually. That's because React is managing the website. So, if we
React is managing the website. So, if we use the DOM manually, it might interfere
use the DOM manually, it might interfere with React.
with React. Instead, we should use React features to
Instead, we should use React features to get the text from a text box. One way to
get the text from a text box. One way to do this is we're going to scroll up to
do this is we're going to scroll up to the text box which is inside the chat
the text box which is inside the chat input component and it's the input
input component and it's the input element here. So to get the text in this
element here. So to get the text in this text box we can use a prop called on
text box we can use a prop called on capital C change equals curly brackets.
capital C change equals curly brackets. Earlier we learned about the event on
Earlier we learned about the event on click which runs a function when we
click which runs a function when we click an element. On change is another
click an element. On change is another event we can use in React. You can tell
event we can use in React. You can tell it's an event because it starts with on.
it's an event because it starts with on. So onchange runs a function when we
So onchange runs a function when we change the text inside an input.
change the text inside an input. So above this let's create a function to
So above this let's create a function to run. We'll type function
run. We'll type function and let's name it save input text
and let's name it save input text brackets and curly brackets because
brackets and curly brackets because we're going to save the text inside this
we're going to save the text inside this input.
input. And now let's save this function inside
And now let's save this function inside on change. So between the curly brackets
on change. So between the curly brackets we'll give it the function save input
we'll give it the function save input text. So again we use curly brackets
text. So again we use curly brackets here because we want to save a function
here because we want to save a function inside this prop rather than just a
inside this prop rather than just a string. So now every time we change the
string. So now every time we change the text in this input it will run this
text in this input it will run this function.
function. Next when onchange runs this function
Next when onchange runs this function it's going to give this function one
it's going to give this function one parameter up here called event.
parameter up here called event. event is an object and it contains
event is an object and it contains details about the event or about the
details about the event or about the change. So one detail is event dot
change. So one detail is event dot target
target and this gives us the element that we're
and this gives us the element that we're typing in or that we changed. So in this
typing in or that we changed. So in this case it's going to give us this input
case it's going to give us this input element. So React gives us access to
element. So React gives us access to this input element automatically using
this input element automatically using event.target. target.
event.target. target. And now to get the text inside this
And now to get the text inside this input, we're going to use the property
input, we're going to use the property value.
value. So now let's console.log this to see
So now let's console.log this to see what it looks like. console.log
and let's save our code and we'll go back to our website
and we'll go back to our website and we'll give it a try. So we'll click
and we'll give it a try. So we'll click this text box and we're going to type
this text box and we're going to type hello.
hello. And you'll see that every time we type
And you'll see that every time we type or change the text, it will console.log
or change the text, it will console.log the text in the text box. So that is how
the text in the text box. So that is how we get the text inside the text box
we get the text inside the text box using an onchange event.
Let's go back to our code. And now we need to save this text so we
And now we need to save this text so we can use it later when creating a chat
can use it later when creating a chat message. To save this text, we're going
message. To save this text, we're going to use state. In React, we should use
to use state. In React, we should use state to save data that changes over
state to save data that changes over time, like the text in the text box. So,
time, like the text in the text box. So, at the top of this component,
at the top of this component, let's use the code react dot use state
let's use the code react dot use state and brackets.
and brackets. And between the brackets, we're going to
And between the brackets, we're going to put the initial value. In this case, the
put the initial value. In this case, the initial value in the text box.
initial value in the text box. The text box originally starts as empty.
The text box originally starts as empty. So let's set the value to the empty
So let's set the value to the empty string.
string. Next, use state returns an array with
Next, use state returns an array with two values. So at the front, let's use
two values. So at the front, let's use array dstructuring using const and we'll
array dstructuring using const and we'll type square brackets equals this result.
type square brackets equals this result. And now to get the first value out of
And now to get the first value out of this array inside the square brackets
this array inside the square brackets we're going to type input text.
we're going to type input text. So this is the current data or the
So this is the current data or the current text in the text box. So that's
current text in the text box. So that's why we name it input text.
why we name it input text. To get the second value out of this
To get the second value out of this array after this we can type comma and
array after this we can type comma and give a name for the second value. So the
give a name for the second value. So the naming convention is to use the word set
naming convention is to use the word set and then the name of the data which is
and then the name of the data which is capital I input capital T text.
capital I input capital T text. So this second value is an updator
So this second value is an updator function. It lets us update the data.
function. It lets us update the data. Now that we set up the state, every time
Now that we set up the state, every time we change the text, we're going to save
we change the text, we're going to save it up here inside input text. To do
it up here inside input text. To do that, instead of console.log,
that, instead of console.log, we're going to use the updater function
we're going to use the updater function set input text.
set input text. And now, every time we change the text,
And now, every time we change the text, it's going to run this function. And
it's going to run this function. And it's going to save the text inside input
it's going to save the text inside input text.
Next, when we click the send button, we want to use this text to create a new
want to use this text to create a new chat message. First, we need to make the
chat message. First, we need to make the send button interactive.
send button interactive. To do that, inside this button element,
To do that, inside this button element, we're going to add the prop on click
we're going to add the prop on click equals curly brackets.
equals curly brackets. Again, on click lets us run a function
Again, on click lets us run a function when we click this button.
when we click this button. And now above this, let's create a
And now above this, let's create a function to run. We'll use function
function to run. We'll use function and let's name it send message brackets
and let's name it send message brackets and curly brackets and we're going to
and curly brackets and we're going to give this function to on click. So down
give this function to on click. So down here we'll give the function name send
here we'll give the function name send message.
message. Now when we click this button it will
Now when we click this button it will run this function and let's just
run this function and let's just console.log input text to see what the
console.log input text to see what the value is. So in here we'll console.log
value is. So in here we'll console.log brackets the input text and save.
brackets the input text and save. And we'll go back to our website
And we'll go back to our website and in the text box we're going to type
and in the text box we're going to type hello and then press send.
hello and then press send. And you'll see that it console.logs the
And you'll see that it console.logs the text inside the text box.
Next, we're going to create a new chat message using this text. Let's go back
message using this text. Let's go back to our code.
to our code. And if we scroll down in our code
to the chat messages component, we already have code here that adds a new
already have code here that adds a new message to chat messages. So, let's just
message to chat messages. So, let's just select this code and we'll copy.
select this code and we'll copy. And at the top
And at the top inside send message, we're going to
inside send message, we're going to paste. And we can remove this
paste. And we can remove this console.log.
console.log. And we'll scroll back down.
And we created this function and this button for practice. But now we don't
button for practice. But now we don't need it anymore. So we can actually
need it anymore. So we can actually remove this code
remove this code and remove this practice button.
and we're going to use this code to add a new chat message.
a new chat message. However, we have a problem here. We
However, we have a problem here. We don't actually have access to set chat
don't actually have access to set chat messages inside this component because
messages inside this component because this is inside a different component. To
this is inside a different component. To solve this problem, we're going to learn
solve this problem, we're going to learn a technique called lifting the state up.
a technique called lifting the state up. First we need to visualize the
First we need to visualize the components in our app. So we have an app
components in our app. So we have an app component which represents the entire
component which represents the entire application and inside we have a chat
application and inside we have a chat input component and a chat messages
input component and a chat messages component. Inside the chat messages
component. Inside the chat messages component we have some chat message
component we have some chat message components.
components. This is called the component tree
This is called the component tree because it looks like the branch of a
because it looks like the branch of a tree and this helps us visualize the
tree and this helps us visualize the structure of the components in our app.
structure of the components in our app. Currently, chat messages and set chat
Currently, chat messages and set chat messages are located inside the chat
messages are located inside the chat messages component, but we want to use
messages component, but we want to use it in the chat input component as well.
it in the chat input component as well. To solve this problem, we're going to
To solve this problem, we're going to move this state up into the app
move this state up into the app component and then app can share chat
component and then app can share chat messages and set chat messages between
messages and set chat messages between these two components.
these two components. This technique is called lifting the
This technique is called lifting the state up. By moving the state up to an
state up. By moving the state up to an outer component, it lets us share state
outer component, it lets us share state between multiple components.
So, let's give this a try. First, we're going to move the chat messages state up
going to move the chat messages state up into app. So, in our code, we're going
into app. So, in our code, we're going to scroll down
to scroll down to the chat messages state, which is
to the chat messages state, which is right here, and we're going to move it
right here, and we're going to move it into the app component. So, we'll select
into the app component. So, we'll select all this code,
all this code, and then cut
and then cut and remove these lines.
and remove these lines. And then inside the app component,
And then inside the app component, we'll create some new lines and paste.
we'll create some new lines and paste. So now we lifted the state up into the
So now we lifted the state up into the app component.
app component. Next, we're going to share the state
Next, we're going to share the state between the two components using props.
So first, the chat input component needs set chat messages and chat messages.
set chat messages and chat messages. So down here, let's create two props for
So down here, let's create two props for this component.
this component. We'll create a prop called chat messages
We'll create a prop called chat messages equals curly brackets. And we're going
equals curly brackets. And we're going to save the value of chat messages from
to save the value of chat messages from the state. So we'll save chat messages.
the state. So we'll save chat messages. And we'll give it another prop called
And we'll give it another prop called set chat messages equals curly brackets.
set chat messages equals curly brackets. And we'll give it the set chat messages
And we'll give it the set chat messages function from the state.
function from the state. So set chat messages.
So set chat messages. By the way, notice that chat messages is
By the way, notice that chat messages is an array. So using curly brackets, we
an array. So using curly brackets, we can save an array into this prop. So we
can save an array into this prop. So we can save any type of value inside a
can save any type of value inside a prop.
prop. And then inside chat input, we can
And then inside chat input, we can access these two props by scrolling up.
access these two props by scrolling up. And in the chat input component at the
And in the chat input component at the top, we'll type curly brackets and we'll
top, we'll type curly brackets and we'll get the chat messages prop,
get the chat messages prop, and we'll also get the set chat messages
and we'll also get the set chat messages prop.
prop. And now this code has access to set chat
And now this code has access to set chat messages and chat messages.
messages and chat messages. Next, let's scroll back down
Next, let's scroll back down to the chat messages component.
to the chat messages component. So here we just need the chat messages
So here we just need the chat messages array to generate the HTML. So let's
array to generate the HTML. So let's provide chat messages using a prop at
provide chat messages using a prop at the bottom
the bottom at the chat messages component. We're
at the chat messages component. We're going to add a prop. chat messages
going to add a prop. chat messages equals curly brackets and we'll give it
equals curly brackets and we'll give it the chat messages array. So here chat
the chat messages array. So here chat messages.
messages. Now I want to talk about the naming
Now I want to talk about the naming convention used here. You'll notice that
convention used here. You'll notice that the component, the prop and the data all
the component, the prop and the data all use the same name. Instead of using
use the same name. Instead of using names like this,
this is the naming convention used in the React documentation.
the React documentation. The documentation tries to use the same
The documentation tries to use the same name for many things like the component,
name for many things like the component, the props, and the data. This keeps
the props, and the data. This keeps things simple and consistent. We don't
things simple and consistent. We don't have to come up with different names
have to come up with different names every time. And when we look at other
every time. And when we look at other people's React code, the names will be
people's React code, the names will be the same.
the same. So, don't worry. It might be a bit
So, don't worry. It might be a bit confusing at first because many things
confusing at first because many things use the same name. The more you work
use the same name. The more you work with React, the more you'll get used to
with React, the more you'll get used to this naming convention, and we'll get
this naming convention, and we'll get lots of practice in this course.
Now to access this prop, we're going to scroll up
scroll up and up here we'll type curly bracket
and up here we'll type curly bracket and we'll get the chat messages prop.
and we'll get the chat messages prop. And now this code has access to
And now this code has access to everything that it needs. Let's save our
everything that it needs. Let's save our code and then check our website.
code and then check our website. And you'll notice that everything still
And you'll notice that everything still works. We just lifted the state up into
works. We just lifted the state up into the app component and shared it between
the app component and shared it between chat input and chat messages.
Let's go back to our code and we're going to scroll up to the chat
and we're going to scroll up to the chat input component.
input component. So now that chat input has access to set
So now that chat input has access to set chat messages, let's use it to create a
chat messages, let's use it to create a new chat message. So when we click send,
new chat message. So when we click send, we're going to run set chat messages and
we're going to run set chat messages and we're going to give it a copy of the
we're going to give it a copy of the chat messages array with a new message
chat messages array with a new message at the end. In this new message, instead
at the end. In this new message, instead of test every time, we're going to use
of test every time, we're going to use the text inside the text box, which is
the text inside the text box, which is saved in input text. So, we'll remove
saved in input text. So, we'll remove this and replace it with input text.
this and replace it with input text. The sender will be the user because we
The sender will be the user because we sent this message. And we'll give the
sent this message. And we'll give the message a unique ID. And that's it. This
message a unique ID. And that's it. This will update the chat messages array with
will update the chat messages array with this new message. And because we use the
this new message. And because we use the updater function, React will also update
updater function, React will also update the HTML.
the HTML. So, let's save.
So, let's save. And we'll go to our project.
And we'll go to our project. Inside this text box, let's type hello
Inside this text box, let's type hello and press send.
and press send. It will take the text in the text box,
It will take the text in the text box, create a new chat message, and it will
create a new chat message, and it will update the HTML.
Next, there is one improvement that we can make at this point. If we scroll up
can make at this point. If we scroll up after we press send, we should also
after we press send, we should also remove the text in the text box. So, we
remove the text in the text box. So, we don't have to manually remove it if we
don't have to manually remove it if we want to send another message.
want to send another message. To do that, we're going to learn a
To do that, we're going to learn a feature called controlled inputs.
feature called controlled inputs. Let's go back to our code.
Let's go back to our code. And after adding a new message, we're
And after adding a new message, we're going to remove the text in the text
going to remove the text in the text box. So after this, let's use the
box. So after this, let's use the updater function. Set input text
updater function. Set input text brackets
brackets will change the input text to the empty
will change the input text to the empty string.
string. So this will update the input text up
So this will update the input text up here to be empty.
here to be empty. However, it will not update the HTML
However, it will not update the HTML yet.
yet. To update the HTML, we need to use this
To update the HTML, we need to use this input text inside this HTML.
input text inside this HTML. To do that, we're going to give the
To do that, we're going to give the input element a prop called value equals
input element a prop called value equals curly brackets.
curly brackets. So value lets us change the value of
So value lets us change the value of this input or the text inside this
this input or the text inside this input.
input. So we're going to set the value to
So we're going to set the value to whatever input text is.
whatever input text is. So now if we set the input text to be
So now if we set the input text to be empty, this will set the value to be
empty, this will set the value to be empty as well and it will make the text
empty as well and it will make the text box empty.
box empty. Let's save.
Let's save. We'll go back to our website.
We'll go back to our website. Inside the text box, we're going to type
Inside the text box, we're going to type hello and press send.
hello and press send. And you'll notice that it makes the text
And you'll notice that it makes the text box empty after we send. So let's go
box empty after we send. So let's go back to our code.
back to our code. And this is called a controlled input.
And this is called a controlled input. Using the value prop, we can control the
Using the value prop, we can control the text inside this text box using our
text inside this text box using our code.
The last feature we're going to work on in this lesson is if we scroll up after
in this lesson is if we scroll up after we send a message, we're going to get a
we send a message, we're going to get a response from the chatbot.
To get a response, we're going to use another external library. So, we'll
another external library. So, we'll scroll up to the script elements up
scroll up to the script elements up here. And to add another external
here. And to add another external library, we're going to add another
library, we're going to add another script element.
script element. And we're going to give this element the
And we're going to give this element the source attribute equals double quotes.
source attribute equals double quotes. And we're going to give it the URL of
And we're going to give it the URL of the external library. Now, this is
the external library. Now, this is another external library that I wrote.
another external library that I wrote. So, let's just copy one of these URLs up
So, let's just copy one of these URLs up here with super simple dev. And we'll
here with super simple dev. And we'll copy.
copy. And inside here, we're going to paste.
And inside here, we're going to paste. And then at the end, instead of
And then at the end, instead of react.js,
react.js, we're going to load chatbot.js
we're going to load chatbot.js and save.
and save. So now, let's take a look at the code in
So now, let's take a look at the code in this URL.
this URL. On Windows, you can press control and
On Windows, you can press control and click this link. And on Mac, you can
click this link. And on Mac, you can press command and click this link.
press command and click this link. If it doesn't open, you can also type
If it doesn't open, you can also type the URL in the browser.
the URL in the browser. So again, an external library is just
So again, an external library is just normal JavaScript code that someone else
normal JavaScript code that someone else wrote. In this case, it's some code that
wrote. In this case, it's some code that I wrote. And this JavaScript code
I wrote. And this JavaScript code creates a simple chatbot.
creates a simple chatbot. This is an object and it has a method
This is an object and it has a method called get response.
called get response. We just have to give it our message and
We just have to give it our message and it will return a response.
it will return a response. So now let's use this external library.
So now let's use this external library. We'll go back to VS Code
We'll go back to VS Code and we'll scroll down to chat input. And
and we'll scroll down to chat input. And now after we send a message below this,
now after we send a message below this, let's use the chatbot external library
let's use the chatbot external library to get a response. So the external
to get a response. So the external library creates a variable called
library creates a variable called capital C chatbot.
capital C chatbot. This is an object and it has a method
This is an object and it has a method called dot get response and brackets.
called dot get response and brackets. Between the brackets, we're just going
Between the brackets, we're just going to put the message that we sent, which
to put the message that we sent, which is input text. So in here, we'll type
is input text. So in here, we'll type input text
input text and get response will return a response.
and get response will return a response. So let's save it in a variable using
So let's save it in a variable using const and we'll name it response.
const and we'll name it response. equals this result. And next, let's just
equals this result. And next, let's just console.log the response to see what it
console.log the response to see what it looks like. console.log
looks like. console.log the response
the response and save.
and save. And now let's go to our website
And now let's go to our website and we're going to close the external
and we're going to close the external library for now. And then we're going to
library for now. And then we're going to click this text box and we'll type the
click this text box and we'll type the message hello and press send.
message hello and press send. And now inside our console it will
And now inside our console it will display the response from the chatbot.
display the response from the chatbot. And the chatbot responded with hello how
And the chatbot responded with hello how can I help you? So using the chatbot
can I help you? So using the chatbot external library we're able to get a
external library we're able to get a response from the chatbot.
The last step is we're going to display this chatbot response on the website.
this chatbot response on the website. Let's go back to VS Code.
Let's go back to VS Code. And to display the response on the
And to display the response on the website, we can just add another chat
website, we can just add another chat message using set chat messages.
message using set chat messages. Because this is an updater function from
Because this is an updater function from the state, React will automatically
the state, React will automatically update the website as well. So down here
update the website as well. So down here we'll remove console.log
and let's just copy paste this code up here to create a new message. So we'll
here to create a new message. So we'll copy and then down here we'll paste
copy and then down here we'll paste and here the message should be the
and here the message should be the response from the chatbot. So we'll
response from the chatbot. So we'll replace this with response
replace this with response and the sender is going to be the robot
and the sender is going to be the robot this time. and we'll give it a unique
this time. and we'll give it a unique ID.
ID. So now let's save this code and try it
So now let's save this code and try it out. We'll open the website and then in
out. We'll open the website and then in the text box we'll type hello and press
the text box we'll type hello and press send.
send. And if we look at the website, it sort
And if we look at the website, it sort of worked. It displayed the response
of worked. It displayed the response from the chatbot on the website.
from the chatbot on the website. However, it also removed our hello
However, it also removed our hello message. So why did this happen? Let's
message. So why did this happen? Let's go back to VS Code.
go back to VS Code. And if we look at this code
And if we look at this code here, we updated chat messages by making
here, we updated chat messages by making a copy and adding a new message at the
a copy and adding a new message at the end. However, in React, state does not
end. However, in React, state does not update immediately. The state is updated
update immediately. The state is updated after all of the code is finished.
So here all of the code is not finished yet. So chat messages is not updated to
yet. So chat messages is not updated to this new array immediately.
this new array immediately. So when we get to this point in the
So when we get to this point in the code, this chat messages is still the
code, this chat messages is still the old array without the new message that
old array without the new message that we added up here. And then we take the
we added up here. And then we take the old array and we add the chatbots
old array and we add the chatbots response. And we essentially lost our
response. And we essentially lost our message.
message. So one way to fix this issue is to save
So one way to fix this issue is to save this updated chat messages in a
this updated chat messages in a variable. So above this we're going to
variable. So above this we're going to create a new variable using const and
create a new variable using const and let's name it new chat messages
let's name it new chat messages equals
equals and we're going to save this value. So,
and we're going to save this value. So, we'll select this code
we'll select this code and then cut.
and then cut. And up here, we're going to paste.
And we'll set the chat messages to this variable, new chat messages.
variable, new chat messages. So, this does the same thing as before,
So, this does the same thing as before, except we saved the new chat messages in
except we saved the new chat messages in this variable.
this variable. And then down here, instead of making a
And then down here, instead of making a copy of chat messages, we're going to
copy of chat messages, we're going to make a copy of new chat messages, which
make a copy of new chat messages, which contains our new message that we just
contains our new message that we just added. So now it will have our message,
added. So now it will have our message, and we're going to add the chatbots
and we're going to add the chatbots response. So now let's save this code
response. So now let's save this code and go to our website.
and go to our website. In the text box, we're going to type
In the text box, we're going to type hello and press send.
hello and press send. And it displays our message, hello, and
And it displays our message, hello, and the chatbot's response, hello, how can I
the chatbot's response, hello, how can I help you?
help you? Let's try another example. In the text
Let's try another example. In the text box, we can type, "Can you flip a coin?"
box, we can type, "Can you flip a coin?" and press send.
and press send. It will add and display our message and
It will add and display our message and it will add and display the chatbot's
it will add and display the chatbot's response which is sure you got heads or
response which is sure you got heads or tails and everything is working
tails and everything is working correctly.
correctly. So as you can see state is another way
So as you can see state is another way that React helps us create websites
that React helps us create websites easier. All we have to do is update the
easier. All we have to do is update the state and React will automatically
state and React will automatically update the website. We don't have to
update the website. We don't have to update the website manually ourselves.
And that's it. Using state, we created the functionality that we need for this
the functionality that we need for this project. In the next lesson, we'll style
project. In the next lesson, we'll style this with CSS to make it look like the
this with CSS to make it look like the final chatbot project.
final chatbot project. And that's the end of this lesson. In
And that's the end of this lesson. In this lesson, we saved the data for our
this lesson, we saved the data for our website using arrays and objects. We
website using arrays and objects. We generated the HTML using map and the key
generated the HTML using map and the key prop. We made the website interactive
prop. We made the website interactive using on click and onchange. We learned
using on click and onchange. We learned state which is data that changes over
state which is data that changes over time and is connected to the HTML. We
time and is connected to the HTML. We used the updater function to update the
used the updater function to update the state and update the HTML at the same
state and update the HTML at the same time. We learned the array destructuring
time. We learned the array destructuring shortcut. We learned a technique called
shortcut. We learned a technique called lifting the state up which lets us share
lifting the state up which lets us share state between components. We made the
state between components. We made the chat input component interactive and
chat input component interactive and created new chat messages. And we got
created new chat messages. And we got responses from the chatbot.
responses from the chatbot. Here
Here are some exercises to help you practice
are some exercises to help you practice what we learned in this lesson.
In this lesson, we're going to learn how to use CSS with React and we'll finish
to use CSS with React and we'll finish the chatbot project. Let's go back to
the chatbot project. Let's go back to our code
our code and we'll start by reviewing CSS.
and we'll start by reviewing CSS. CSS is another language and it lets us
CSS is another language and it lets us change the appearance of the website. To
change the appearance of the website. To use CSS with React, we just use CSS
use CSS with React, we just use CSS normally. So, one way to use CSS is to
normally. So, one way to use CSS is to create a style element.
create a style element. So, we'll scroll to the top of our code
So, we'll scroll to the top of our code to the head element and then inside
to the head element and then inside here, we'll create a style element.
here, we'll create a style element. So, the style element doesn't appear on
So, the style element doesn't appear on the website. That's why we put it in the
the website. That's why we put it in the head section.
head section. And the special thing about the style
And the special thing about the style element is we can write CSS code inside.
element is we can write CSS code inside. In here we'll type the CSS code button
In here we'll type the CSS code button and curly brackets. And inside we'll
and curly brackets. And inside we'll type background dash color
type background dash color green and semicolon.
green and semicolon. So this is some CSS code. As a review,
So this is some CSS code. As a review, this code at the front is called the CSS
this code at the front is called the CSS selector. This tells a computer which
selector. This tells a computer which elements we want to change the
elements we want to change the appearance. And inside we have CSS
appearance. And inside we have CSS styles. This tells a computer how to
styles. This tells a computer how to change the appearance of these elements.
change the appearance of these elements. The left side is called the CSS
The left side is called the CSS property. This is what we're changing.
property. This is what we're changing. And the right side is called the CSS
And the right side is called the CSS value. This is what we're changing the
value. This is what we're changing the property to. So this code changes all
property to. So this code changes all buttons on the website and changes their
buttons on the website and changes their background color to green. If we save
background color to green. If we save and then check our website,
and then check our website, you can see that it changed the
you can see that it changed the background color of the button to green.
background color of the button to green. Let's go back to our code.
Let's go back to our code. And one problem here is button will
And one problem here is button will style all buttons on the website. But
style all buttons on the website. But usually we want to just style a specific
usually we want to just style a specific button. For example, let's scroll down
button. For example, let's scroll down to the chat input component and we're
to the chat input component and we're going to scroll down to this send button
going to scroll down to this send button here. So let's say we just want to style
here. So let's say we just want to style this send button. As a review to style a
this send button. As a review to style a specific element, we can add an HTML
specific element, we can add an HTML attribute called class. In React to set
attribute called class. In React to set the class attribute, we're going to give
the class attribute, we're going to give this element a prop called class capital
this element a prop called class capital N name equals double quotes.
N name equals double quotes. And we'll give it the class send dash
And we'll give it the class send dash button.
button. In React, we use class name to set the
In React, we use class name to set the class. That's because React is actually
class. That's because React is actually just JavaScript code and JavaScript
just JavaScript code and JavaScript already has a feature called class. So
already has a feature called class. So class is a reserved word and we can't
class is a reserved word and we can't use it. That's why React uses class name
use it. That's why React uses class name to set the class.
to set the class. Now that this button has the class
Now that this button has the class send-button,
send-button, we can style this specific element.
we can style this specific element. We'll go to our CSS
and in here we're going to remove button and we're going to type dot and then the
and we're going to type dot and then the class send dash button.
class send dash button. As a review, if we start the CSS
As a review, if we start the CSS selector with a dot, it will only style
selector with a dot, it will only style elements with this class. So this will
elements with this class. So this will only style elements with the class
only style elements with the class send-ash button. If we save
send-ash button. If we save and check our website,
and check our website, it styles our send button because we
it styles our send button because we gave it the send-button class.
gave it the send-button class. If we open the console and go to the
If we open the console and go to the elements tab and then we look at our
elements tab and then we look at our HTML here and we find the send button,
HTML here and we find the send button, you'll notice that it has the class
you'll notice that it has the class attribute. So class name in React is
attribute. So class name in React is converted to class in HTML.
converted to class in HTML. Now that we reviewed CSS, we're going to
Now that we reviewed CSS, we're going to style this button to look like the final
style this button to look like the final design. So, first we're going to put the
design. So, first we're going to put the final design and our website side by
final design and our website side by side so it's easier to compare. So, I'll
side so it's easier to compare. So, I'll take the final design here and I'll put
take the final design here and I'll put it on the bottom left and I'll take our
it on the bottom left and I'll take our website and put it in the top left. And
website and put it in the top left. And I'm going to resize our code editor
I'm going to resize our code editor so we can see everything side by side.
so we can see everything side by side. And I'll hide the sidebar.
And I'll hide the sidebar. Next, to style our send button to look
Next, to style our send button to look like the final project, we just have to
like the final project, we just have to style it one by one with CSS. So, we
style it one by one with CSS. So, we already made the background color green.
already made the background color green. Next, let's make the text color white.
Next, let's make the text color white. To do that, we'll type the CSS property
To do that, we'll type the CSS property color colon and set it to white and
color colon and set it to white and save.
save. And that will make the text color white.
And that will make the text color white. Next, let's make our button bigger. To
Next, let's make our button bigger. To do that, we'll add space on the inside
do that, we'll add space on the inside of the button. As a review, space on the
of the button. As a review, space on the inside of an element is called padding.
inside of an element is called padding. So in our CSS we're going to add padding
So in our CSS we're going to add padding colon and we'll give the padding two
colon and we'll give the padding two values 12 px and 20 px.
values 12 px and 20 px. So the px here stands for pixels. A
So the px here stands for pixels. A pixel is a unit of measurement in
pixel is a unit of measurement in computers. For example, my computer
computers. For example, my computer screen is about 3,800 pixels wide. So 12
screen is about 3,800 pixels wide. So 12 pixels and 20 pixels looks like this.
pixels and 20 pixels looks like this. The first value is the vertical space
The first value is the vertical space inside this button. And the second value
inside this button. And the second value is the horizontal space inside this
is the horizontal space inside this button. So we're going to add space all
button. So we're going to add space all around the inside of this button. So
around the inside of this button. So let's save.
let's save. And it adds space on the inside.
And it adds space on the inside. And I think that looks close enough.
And I think that looks close enough. Next, let's add some space on the
Next, let's add some space on the outside of this button on the left. As a
outside of this button on the left. As a review, space on the outside of an
review, space on the outside of an element is called margin.
element is called margin. So, in our CSS, we'll add margin dash
So, in our CSS, we'll add margin dash and we'll add it on the left colon. And
and we'll add it on the left colon. And let's add 10 pixels of margin. And save.
let's add 10 pixels of margin. And save. And that looks close enough.
And that looks close enough. Next, our button has a border around the
Next, our button has a border around the button, but in the final design, there
button, but in the final design, there is no border. To remove the borders,
is no border. To remove the borders, we'll type the property border colon and
we'll type the property border colon and set it to none and save.
set it to none and save. And that will remove the borders.
And that will remove the borders. Next, the corners of the button in the
Next, the corners of the button in the final design are round. To make our
final design are round. To make our corners round, we're going to use the
corners round, we're going to use the CSS property border dash radius colon
CSS property border dash radius colon and then how round we want the corners
and then how round we want the corners to be. Let's try 10 pixels and save.
to be. Let's try 10 pixels and save. And I think that looks close enough.
And I think that looks close enough. Next, the text in the button is a little
Next, the text in the button is a little bigger in the final design. To change
bigger in the final design. To change the size of the text, we'll use the CSS
the size of the text, we'll use the CSS property font dash size colon and let's
property font dash size colon and let's try 15 pixels and save.
try 15 pixels and save. And that looks pretty good. Next, if we
And that looks pretty good. Next, if we put our mouse over our button, we no
put our mouse over our button, we no longer have the hand pointer icon that
longer have the hand pointer icon that we see here. to use this hand pointer
we see here. to use this hand pointer icon. We're going to set the property
icon. We're going to set the property cursor colon pointer
cursor colon pointer and save.
and save. And now if we put our mouse over the
And now if we put our mouse over the button, we have the hand pointer icon
button, we have the hand pointer icon again.
again. Finally, the background color of our
Finally, the background color of our button is a little different from the
button is a little different from the final design. So to get this exact green
final design. So to get this exact green color, we can go to the final project.
color, we can go to the final project. And then we're going to rightclick this
And then we're going to rightclick this button and then click inspect.
button and then click inspect. And we can click these three dots here
And we can click these three dots here and click this icon to open the console
and click this icon to open the console in a different window.
in a different window. And we're going to go to the elements
And we're going to go to the elements tab and we'll find the send button in
tab and we'll find the send button in the HTML. And we're going to look at
the HTML. And we're going to look at these styles. So you can see that this
these styles. So you can see that this button here has a background color of
button here has a background color of this RGB value. So we're going to select
this RGB value. So we're going to select this RGB value and we're going to copy
this RGB value and we're going to copy it.
it. And in our code, instead of the color
And in our code, instead of the color green, we're going to paste this RGB
green, we're going to paste this RGB color.
color. As a review, RGB stands for red, green,
As a review, RGB stands for red, green, blue, and it's a way to measure color in
blue, and it's a way to measure color in computers. Computers can create any
computers. Computers can create any color using a combination of red, green,
color using a combination of red, green, and blue. The first value here is how
and blue. The first value here is how much red we want in the color. The
much red we want in the color. The second value is how much green we want
second value is how much green we want in the color. And the third value is how
in the color. And the third value is how much blue we want. And each value goes
much blue we want. And each value goes from 0 to 255.
from 0 to 255. So this color combines a little bit of
So this color combines a little bit of red, a lot of green, and a bit of blue
red, a lot of green, and a bit of blue to get this exact green color. So let's
to get this exact green color. So let's save our code.
save our code. And now our button matches the final
And now our button matches the final project.
project. And that's how we style the send button.
And that's how we style the send button. We just style it one by one using CSS
We just style it one by one using CSS until it looks like the final design. So
until it looks like the final design. So this is just a review of CSS. If you
this is just a review of CSS. If you want to learn CSS in more detail, you
want to learn CSS in more detail, you can check out my HTML and CSS full
can check out my HTML and CSS full course in the video description.
course in the video description. Next, we're going to style this text box
Next, we're going to style this text box to look like the final design. Again,
to look like the final design. Again, we're just going to style it one by one
we're just going to style it one by one with CSS.
with CSS. First, we need to add a class to this
First, we need to add a class to this element so we can select it in our CSS.
element so we can select it in our CSS. We'll go to our code and we're going to
We'll go to our code and we're going to scroll down to this text box which is
scroll down to this text box which is inside the chat input component and it's
inside the chat input component and it's this input element here. So to add a
this input element here. So to add a class we're going to use class name. So
class we're going to use class name. So inside the input element we'll add a
inside the input element we'll add a class name equals double quotes and
class name equals double quotes and let's give it the class chat dash input.
let's give it the class chat dash input. Now, let's scroll back up to the CSS.
Now, let's scroll back up to the CSS. And below these styles,
And below these styles, we're going to type dot to select a
we're going to type dot to select a class. And we're going to select the
class. And we're going to select the class we just added, which is chat dash
class we just added, which is chat dash input and curly brackets. And now we're
input and curly brackets. And now we're ready to style the text box.
ready to style the text box. The first thing we'll change is there's
The first thing we'll change is there's a lot of space on the inside of this
a lot of space on the inside of this text box in the final design. So again,
text box in the final design. So again, space on the inside of an element is
space on the inside of an element is called padding.
called padding. In our CSS, we'll add padding colon. And
In our CSS, we'll add padding colon. And let's do 12 pixels for the vertical
let's do 12 pixels for the vertical space and 15 pixels for the horizontal
space and 15 pixels for the horizontal space. Now let's save.
space. Now let's save. And that adds space on the inside of our
And that adds space on the inside of our text box. And I think that looks close
text box. And I think that looks close enough. Next, we'll make the corners
enough. Next, we'll make the corners round. To do that, we'll use border dash
round. To do that, we'll use border dash radius colon. And let's try 10 pixels
radius colon. And let's try 10 pixels and save.
and save. And that looks pretty good. Next, our
And that looks pretty good. Next, our border is too thick compared to the
border is too thick compared to the final design. To change the thickness of
final design. To change the thickness of the border, we'll use border dash width
the border, we'll use border dash width colon. And let's change it to 1 pixel
colon. And let's change it to 1 pixel and save.
and save. So that looks pretty good. Finally, the
So that looks pretty good. Finally, the text is bigger in the final design. To
text is bigger in the final design. To change the size of the text, we can use
change the size of the text, we can use font dash size colon. And let's use 15
font dash size colon. And let's use 15 pixels again. So 15px
pixels again. So 15px and save.
and save. And I think that looks good enough for
And I think that looks good enough for now. So we styled the text box one by
now. So we styled the text box one by one to look like the final design.
one to look like the final design. Next in the final design, the text box
Next in the final design, the text box is wider. And this text box is also
is wider. And this text box is also flexible. That means if we resize the
flexible. That means if we resize the browser, the text box will also resize.
browser, the text box will also resize. To make our text box flexible, we're
To make our text box flexible, we're going to review a feature of CSS called
going to review a feature of CSS called flexbox.
flexbox. Flexbox lets us create a flexible
Flexbox lets us create a flexible layout. Layout means how the elements
layout. Layout means how the elements are positioned on the website.
are positioned on the website. Here we have a horizontal layout where
Here we have a horizontal layout where the elements are beside each other. And
the elements are beside each other. And also this element is flexible. So
also this element is flexible. So flexbox helps us create this flexible
flexbox helps us create this flexible layout. To use flexbox we need to do
layout. To use flexbox we need to do three steps. The first step is to create
three steps. The first step is to create a container around the elements that we
a container around the elements that we want to position. So let's go back to
want to position. So let's go back to our code and we're going to scroll down
our code and we're going to scroll down to the chat input component and we'll
to the chat input component and we'll scroll down to the HTML.
scroll down to the HTML. So here we want to position the text box
So here we want to position the text box and the button. So we need to create a
and the button. So we need to create a container around these two elements.
container around these two elements. Right now we have a fragment around
Right now we have a fragment around these two elements. However, we cannot
these two elements. However, we cannot style a fragment with CSS since
style a fragment with CSS since fragments don't actually appear on the
fragments don't actually appear on the website.
website. Instead, we're going to switch this
Instead, we're going to switch this container to a div element because we
container to a div element because we can style a div element. So, inside
can style a div element. So, inside here, we'll type div and at the end,
here, we'll type div and at the end, we'll do slash div to convert this
we'll do slash div to convert this container to a div element.
container to a div element. And now we have a container around the
And now we have a container around the elements.
elements. The second step is to add the property
The second step is to add the property display flex to the container.
display flex to the container. First, let's add a class name to this
First, let's add a class name to this container so we can select it in our
container so we can select it in our CSS. In here, we'll type class name
CSS. In here, we'll type class name equals double quotes and we'll give it
equals double quotes and we'll give it the class chat-input
the class chat-input dash container.
dash container. And then we'll scroll up to our CSS.
And at the end we'll type dot to select a class and we'll select the class
a class and we'll select the class chat-input
chat-input dash container and curly brackets.
dash container and curly brackets. And finally we'll add the property
And finally we'll add the property display colon flex and that will turn
display colon flex and that will turn this container into a flexbox.
this container into a flexbox. The third step is to use flexbox
The third step is to use flexbox features. Flexbox has many features we
features. Flexbox has many features we can use to control the layout or to
can use to control the layout or to control how these elements are
control how these elements are positioned. One feature is called flex
positioned. One feature is called flex grow. Flex grow makes an element grow
grow. Flex grow makes an element grow and take up the remaining space. So here
and take up the remaining space. So here we want this text box to grow and take
we want this text box to grow and take up this remaining space.
up this remaining space. So we'll go to the styles for the chat
So we'll go to the styles for the chat input or the text box
input or the text box and we'll add the property flex dash
and we'll add the property flex dash grow
grow 1 and save.
1 and save. And now the text box will grow and take
And now the text box will grow and take up the remaining space.
up the remaining space. If we resize the browser, the text box
If we resize the browser, the text box will also resize to take up the
will also resize to take up the remaining space.
remaining space. So now we created the layout for the
So now we created the layout for the chat input that we see in the final
chat input that we see in the final design.
Next we'll create the layout for the overall app. Notice in the final project
overall app. Notice in the final project if we resize the browser and make it
if we resize the browser and make it wider the app is limited to a certain
wider the app is limited to a certain width. So it's not going to get wider.
width. So it's not going to get wider. To create this in our project, we'll set
To create this in our project, we'll set a maximum width for our app.
a maximum width for our app. So, let's go to our code and we're going
So, let's go to our code and we're going to scroll down to the app component,
to scroll down to the app component, which is down here, and we'll go down to
which is down here, and we'll go down to the HTML.
the HTML. And currently, the app is contained in a
And currently, the app is contained in a fragment. And remember, we cannot style
fragment. And remember, we cannot style a fragment since fragments don't
a fragment since fragments don't actually appear on the website.
actually appear on the website. So again, we're going to switch this to
So again, we're going to switch this to a div element so we can style it. So in
a div element so we can style it. So in here, we'll type div and at the bottom
here, we'll type div and at the bottom we'll type /ash div. And now we can
we'll type /ash div. And now we can style this.
style this. First we'll add a class to this div
First we'll add a class to this div using class name equals double quotes.
using class name equals double quotes. And let's give it the class app dash
And let's give it the class app dash container.
container. and we'll scroll up to our CSS.
and we'll scroll up to our CSS. And at the bottom here,
And at the bottom here, we'll type dot to select a class. And
we'll type dot to select a class. And we'll select the class app dash
we'll select the class app dash container and curly brackets.
container and curly brackets. And to set a maximum width of our app,
And to set a maximum width of our app, we can just use the property max dash
we can just use the property max dash width colon. and let's try 600 pixels
width colon. and let's try 600 pixels and save.
and save. So now if we resize our browser the app
So now if we resize our browser the app will be limited to 600 pixels just like
will be limited to 600 pixels just like the final design. Next in the final
the final design. Next in the final design notice that the app is centered
design notice that the app is centered on the website. Now there are several
on the website. Now there are several ways to center an element in CSS.
ways to center an element in CSS. One way is to use margin. So we'll go
One way is to use margin. So we'll go back to our code
back to our code and in the app container, we're going to
and in the app container, we're going to add the property margin dash left colon
add the property margin dash left colon and we'll set it to auto. And we'll also
and we'll set it to auto. And we'll also set the margin dash right colon
set the margin dash right colon auto.
auto. So this will automatically add a space
So this will automatically add a space on the left and right of this element
on the left and right of this element until it is centered. So if we save our
until it is centered. So if we save our code and check our website, you'll
code and check our website, you'll notice that the entire app is now
notice that the entire app is now centered on the website. And now we
centered on the website. And now we created the layout for the overall app.
created the layout for the overall app. Next, we're going to create the layout
Next, we're going to create the layout for the chat messages. If you don't have
for the chat messages. If you don't have any chat messages in your final project,
any chat messages in your final project, you can add some by typing in here and
you can add some by typing in here and then pressing send. So notice that the
then pressing send. So notice that the chat messages from the user are on the
chat messages from the user are on the right while the chat messages from the
right while the chat messages from the robot are on the left. So we're going to
robot are on the left. So we're going to create this layout. First, we need to
create this layout. First, we need to give class names to these chat messages
give class names to these chat messages so we can style them.
so we can style them. So, let's resize our browser for now.
So, let's resize our browser for now. And we'll go to our code. And we're
And we'll go to our code. And we're going to scroll down
going to scroll down to the chat message component. And we'll
to the chat message component. And we'll scroll down to the HTML.
scroll down to the HTML. And we'll give each chat message a class
And we'll give each chat message a class name equals. And we're going to do
name equals. And we're going to do something different this time. We'll
something different this time. We'll type curly brackets. So here we want to
type curly brackets. So here we want to give a different class name depending on
give a different class name depending on if the sender is a user or the sender is
if the sender is a user or the sender is a robot. This will let us position the
a robot. This will let us position the chat messages differently on the right
chat messages differently on the right or on the left. To give this a different
or on the left. To give this a different class name depending on the sender.
class name depending on the sender. We're going to use a feature of
We're going to use a feature of JavaScript called the turnary operator.
JavaScript called the turnary operator. As a review, the turnary operator looks
As a review, the turnary operator looks like this. And it works like an if else
like this. And it works like an if else statement.
statement. If value one is true, then the result is
If value one is true, then the result is value two. Else the result is value
value two. Else the result is value three.
three. The turnary operator lets us insert an
The turnary operator lets us insert an if else statement directly in the JSX.
if else statement directly in the JSX. So using a turnary operator, we can give
So using a turnary operator, we can give a different class name depending on the
a different class name depending on the sender.
sender. Inside here, we're going to type the if
Inside here, we're going to type the if condition. So, we'll check if the sender
condition. So, we'll check if the sender is equal to the string user. And then
is equal to the string user. And then we'll type question mark. If the sender
we'll type question mark. If the sender is the user, we'll set the class name to
is the user, we'll set the class name to the string chat-
the string chat- message dash user.
message dash user. And then we'll type a colon. So, this
And then we'll type a colon. So, this means else. So if the sender is not the
means else. So if the sender is not the user, we're going to give the class name
user, we're going to give the class name the string chat-
the string chat- message dash robot.
message dash robot. So again the way this code works is if
So again the way this code works is if the sender is equal to user, we'll set
the sender is equal to user, we'll set the class name to chat message user.
the class name to chat message user. Else we'll set the class name to chat
Else we'll set the class name to chat message robot. As you can see, the
message robot. As you can see, the turnary operator lets us insert an if
turnary operator lets us insert an if else statement directly in the JSX. And
else statement directly in the JSX. And notice that we used curly brackets here
notice that we used curly brackets here because we want to save the result of
because we want to save the result of this code into class name instead of
this code into class name instead of just a string.
just a string. Before we continue, we can add some new
Before we continue, we can add some new lines to this code to make it easier to
lines to this code to make it easier to read. So, at the beginning, we can add a
read. So, at the beginning, we can add a new line. And then we'll add a new line
new line. And then we'll add a new line before the question mark and press tab.
before the question mark and press tab. And we'll add a new line before the
And we'll add a new line before the colon. And we'll add a new line at the
colon. And we'll add a new line at the back.
back. And remove some spaces so that this is
And remove some spaces so that this is vertically aligned.
vertically aligned. So, this makes the code a bit easier to
So, this makes the code a bit easier to read. We have the if condition and then
read. We have the if condition and then the first value and then else the second
the first value and then else the second value. Now let's save
value. Now let's save and we'll go to our website and let's
and we'll go to our website and let's check the HTML. So in our console, we
check the HTML. So in our console, we can click these three dots here and then
can click these three dots here and then click this icon to open the console in
click this icon to open the console in another window. And we'll go to the
another window. And we'll go to the elements tab and we'll click this
elements tab and we'll click this pointer on the top left and we'll select
pointer on the top left and we'll select one of these chat messages and click it.
one of these chat messages and click it. And if we scroll down here, you can see
And if we scroll down here, you can see that each chat message now has a class.
that each chat message now has a class. And messages from the user have the
And messages from the user have the class chat message user. And messages
class chat message user. And messages from the robot have the class chat
from the robot have the class chat message robot.
message robot. So now that we added a class to each of
So now that we added a class to each of these chat messages, let's style these
these chat messages, let's style these chat messages.
chat messages. We'll go to our code and we'll scroll up
We'll go to our code and we'll scroll up to our CSS.
to our CSS. And at the end, let's type a dot. And
And at the end, let's type a dot. And first let's select the class chat dash
first let's select the class chat dash message dash user and curly brackets.
And now for chat message user we want to position these elements the text and the
position these elements the text and the profile image on the right. To create
profile image on the right. To create this flexible layout we can use flexbox.
this flexible layout we can use flexbox. Again
Again remember there are three steps to use
remember there are three steps to use flexbox. First, we already have a
flexbox. First, we already have a container around the elements. It has a
container around the elements. It has a class chat message user or chat message
class chat message user or chat message robot.
robot. Next, we need to add display flex to
Next, we need to add display flex to this container. So, for chat message
this container. So, for chat message user, we'll add
user, we'll add display colon flex.
display colon flex. And now we can use flexbox features.
And now we can use flexbox features. Another feature of flexbox is we're
Another feature of flexbox is we're going to type justify dashcontent
going to type justify dashcontent colon.
colon. Justify content controls how the
Justify content controls how the elements are displayed horizontally.
elements are displayed horizontally. If we want these elements to be
If we want these elements to be displayed on the right, we're going to
displayed on the right, we're going to give this a value end.
give this a value end. So it will display these elements at the
So it will display these elements at the end of this row or on the right.
end of this row or on the right. So now let's save our code.
So now let's save our code. And now the chat messages from the user
And now the chat messages from the user are on the right. And we created the
are on the right. And we created the layout for the chat messages.
layout for the chat messages. Next, we're going to style the text in
Next, we're going to style the text in the chat messages.
the chat messages. First, we need to add a class name to
First, we need to add a class name to this text so we can style it.
this text so we can style it. Let's go to our code and we're going to
Let's go to our code and we're going to scroll down to the chat message
scroll down to the chat message component
component and we're going to scroll to the text
and we're going to scroll to the text which is here. So currently this text is
which is here. So currently this text is not inside an element. So first we're
not inside an element. So first we're going to put this text inside an element
going to put this text inside an element so that we can style just the text.
so that we can style just the text. Above this, we'll put this in a div by
Above this, we'll put this in a div by typing less than div greater than and
typing less than div greater than and below it less than slashd greater than.
below it less than slashd greater than. And we'll add an indent at the front to
And we'll add an indent at the front to show that this text is inside this div.
show that this text is inside this div. And now let's add a class to this div so
And now let's add a class to this div so we can style just the text. So, we'll
we can style just the text. So, we'll give this a class name equals double
give this a class name equals double quotes. And let's give it the class chat
quotes. And let's give it the class chat dash message dash text.
dash message dash text. So now let's style this with CSS. We'll
So now let's style this with CSS. We'll scroll up to our CSS
scroll up to our CSS and at the end we'll type a dot and
and at the end we'll type a dot and we'll style the class chat dash message
we'll style the class chat dash message dash text and curly brackets.
dash text and curly brackets. So the first thing we'll style is we're
So the first thing we'll style is we're going to change the background color to
going to change the background color to this gray color. To get this exact
this gray color. To get this exact color, we're going to rightclick on this
color, we're going to rightclick on this text and then click inspect.
text and then click inspect. and we'll find this text in the elements
and we'll find this text in the elements tab and we're going to go into the
tab and we're going to go into the styles and we'll get the background
styles and we'll get the background color. So, we'll copy this RGB color
color. So, we'll copy this RGB color and we'll go into our code and we'll set
and we'll go into our code and we'll set the background dash color colon and
the background dash color colon and we'll paste the RGB color and save.
we'll paste the RGB color and save. And now we'll have the exact color in
And now we'll have the exact color in our final design.
our final design. However, after we saved, it kind of
However, after we saved, it kind of messed up our layout. So, the chat
messed up our layout. So, the chat message user looks okay, but the text
message user looks okay, but the text for chat message robot is now appearing
for chat message robot is now appearing below the profile image and it's taking
below the profile image and it's taking up the entire line.
up the entire line. So, what happened? Remember that we just
So, what happened? Remember that we just surrounded this text in a div element.
surrounded this text in a div element. Normally a div element takes up an
Normally a div element takes up an entire line by itself because a div is a
entire line by itself because a div is a block element.
block element. However, remember that we also made chat
However, remember that we also made chat message user a flexbox. When a block
message user a flexbox. When a block element is inside a flexbox, it no
element is inside a flexbox, it no longer takes up the entire line. It only
longer takes up the entire line. It only takes up as much space as it needs to.
takes up as much space as it needs to. So that's why this div only takes up as
So that's why this div only takes up as much space as it needs because it's
much space as it needs because it's inside a flexbox.
inside a flexbox. One way to fix this layout problem is we
One way to fix this layout problem is we can make chat message robot a flexbox as
can make chat message robot a flexbox as well. We'll go back to our code and
well. We'll go back to our code and below chat message user let's type dot
below chat message user let's type dot and we'll style the chat- message dash
and we'll style the chat- message dash robot and curly brackets
robot and curly brackets and we'll also give it display colon
and we'll also give it display colon flex
flex so it will match the layout for the chat
so it will match the layout for the chat message user.
message user. Let's save.
Let's save. And now because this div is inside a
And now because this div is inside a flexbox, it only takes up as much space
flexbox, it only takes up as much space as it needs. So now the background color
as it needs. So now the background color and the layout looks good. Next, the
and the layout looks good. Next, the style of text or the font is different
style of text or the font is different in the final design.
in the final design. To change the font, we'll go to our code
To change the font, we'll go to our code and we'll add the property font dash
and we'll add the property font dash family colon And in the final project, I
family colon And in the final project, I use the font Ariel.
use the font Ariel. Let's save.
Let's save. And now our font matches the final
And now our font matches the final design.
design. Now, usually we don't set the font for
Now, usually we don't set the font for just one element. We set the font for
just one element. We set the font for the entire website because we want the
the entire website because we want the entire website to use the same font or
entire website to use the same font or the same style of text. to set the font
the same style of text. to set the font for the entire website. We can style the
for the entire website. We can style the body element. So, we'll scroll to the
body element. So, we'll scroll to the top of our CSS.
top of our CSS. And here we'll style the body element
And here we'll style the body element curly brackets and we'll set the font
curly brackets and we'll set the font dash family colon to area.
dash family colon to area. So this sets the font for all elements
So this sets the font for all elements inside the body, which is basically the
inside the body, which is basically the entire website. So now we can scroll
entire website. So now we can scroll back down
back down and we can remove this style
and we can remove this style because we're going to set the font for
because we're going to set the font for the entire website instead.
the entire website instead. Let's save.
Let's save. And now we set the font for the entire
And now we set the font for the entire website to Ariel.
website to Ariel. Next, let's add space on the inside of
Next, let's add space on the inside of this text, which is padding.
this text, which is padding. So, here we'll add padding
So, here we'll add padding colon. And let's try 15 pixels of
colon. And let's try 15 pixels of vertical space and 20 pixels of
vertical space and 20 pixels of horizontal space. And save.
horizontal space. And save. And that looks pretty good.
And that looks pretty good. Next, we'll make the corners round.
Next, we'll make the corners round. To do that, we'll use border dash radius
To do that, we'll use border dash radius colon and 10 pixels and save.
colon and 10 pixels and save. And that looks pretty good. Next, let's
And that looks pretty good. Next, let's add space on the outside of the text on
add space on the outside of the text on the right. So, we'll add margin dash
the right. So, we'll add margin dash right colon and let's try 10 pixels and
right colon and let's try 10 pixels and save.
save. And that looks close enough.
And that looks close enough. And here, if we scroll down to a chat
And here, if we scroll down to a chat message from the robot, we'll add some
message from the robot, we'll add some space on the left of the text. So, in
space on the left of the text. So, in our code, we'll add margin dash left.
our code, we'll add margin dash left. And let's try 10 pixels and save.
And let's try 10 pixels and save. And that looks pretty good. Finally,
And that looks pretty good. Finally, let's add some space on the bottom of
let's add some space on the bottom of the text so we can separate them. Here
the text so we can separate them. Here we'll add margin dash bottom colon. And
we'll add margin dash bottom colon. And let's try 20 pixels and save.
let's try 20 pixels and save. And I think that looks close enough.
And I think that looks close enough. However, we now have a problem here,
However, we now have a problem here, which is the profile image seems to be
which is the profile image seems to be stretching.
stretching. This happens because this container is a
This happens because this container is a flexbox. And by default, elements inside
flexbox. And by default, elements inside a flexbox will stretch vertically.
a flexbox will stretch vertically. So, if this text gets longer because we
So, if this text gets longer because we added some margin, this image will
added some margin, this image will stretch.
stretch. To fix this, flexbox has another feature
To fix this, flexbox has another feature called align items.
called align items. So in our CSS in chat message user,
So in our CSS in chat message user, we'll add the property align dash items
we'll add the property align dash items colon
colon and align items controls how the
and align items controls how the elements are displayed vertically. By
elements are displayed vertically. By default, align items is stretch. That's
default, align items is stretch. That's why the elements stretch vertically.
why the elements stretch vertically. Instead, we're going to change align
Instead, we're going to change align items to start.
items to start. This will display the elements at the
This will display the elements at the start or at the top vertically, and it
start or at the top vertically, and it will no longer stretch. Same thing for
will no longer stretch. Same thing for the chat message robot. We're going to
the chat message robot. We're going to give it align dash items colon start and
give it align dash items colon start and save.
save. And now the elements in the flexbox will
And now the elements in the flexbox will appear at the start or at the top
appear at the start or at the top vertically.
vertically. The last thing we'll style for the text
The last thing we'll style for the text is if we go to our final project and
is if we go to our final project and inside the text box we type test and
inside the text box we type test and press send.
press send. You'll notice that the response from the
You'll notice that the response from the chatbot has a maximum width. So in our
chatbot has a maximum width. So in our project, we're also going to add a
project, we're also going to add a maximum width to our text. So in our
maximum width to our text. So in our code, we'll go to the chat message text
code, we'll go to the chat message text and let's add a max dash width colon.
and let's add a max dash width colon. And let's try 300 pixels and save.
And let's try 300 pixels and save. And now if we go to our text box and
And now if we go to our text box and type test and press send and scroll
type test and press send and scroll down, the text has a maximum width and
down, the text has a maximum width and it matches the final design.
it matches the final design. Now we finish styling the text in the
Now we finish styling the text in the chat messages.
chat messages. Next, we'll style the profile images. So
Next, we'll style the profile images. So in our code, let's scroll down to the
in our code, let's scroll down to the profile image which is inside the chat
profile image which is inside the chat message component
message component and it's these two image elements here.
and it's these two image elements here. Currently, we're using an attribute to
Currently, we're using an attribute to set the width of this image. However, a
set the width of this image. However, a best practice is to use CSS for styling
best practice is to use CSS for styling instead of attributes. So let's remove
instead of attributes. So let's remove this attribute and we'll remove it down
this attribute and we'll remove it down here as well and we'll add a class to
here as well and we'll add a class to these profile images so that we can
these profile images so that we can style them with CSS. So here we'll add
style them with CSS. So here we'll add class name equals double quotes and
class name equals double quotes and we'll give it the class chat-
we'll give it the class chat- message dash profile.
message dash profile. And we'll also add this class to the
And we'll also add this class to the profile image for the user.
profile image for the user. We'll give it the class name equals
We'll give it the class name equals double quotes
double quotes chat dash message dash profile.
chat dash message dash profile. So now we can style this with our CSS.
So now we can style this with our CSS. We'll scroll up to our CSS
We'll scroll up to our CSS and at the end we'll type a dot and
and at the end we'll type a dot and we'll style the class chat dash message
we'll style the class chat dash message dash profile and curly brackets.
dash profile and curly brackets. So previously we set the width to 50
So previously we set the width to 50 pixels. So let's do that again using
pixels. So let's do that again using CSS. This time we'll set the width colon
CSS. This time we'll set the width colon to 50 pixels.
to 50 pixels. and save.
Now, if we look at the final design, it looks like the profile images here
it looks like the profile images here are a little bit smaller than our
are a little bit smaller than our profile images. So, let's make this
profile images. So, let's make this width smaller. Let's try 45 pixels
width smaller. Let's try 45 pixels instead.
instead. And save.
And save. And I think that looks close enough. And
And I think that looks close enough. And now our profile images are the same size
now our profile images are the same size as the final design.
as the final design. The last thing we're going to change in
The last thing we're going to change in this design is we're going to move the
this design is we're going to move the text box to the bottom so that it
text box to the bottom so that it matches the design of other popular
matches the design of other popular chatbots.
chatbots. In the final project, we're going to
In the final project, we're going to make this a little taller. Now, we can
make this a little taller. Now, we can move this text box to the bottom of the
move this text box to the bottom of the page by clicking this link.
page by clicking this link. And now let's create this design in our
And now let's create this design in our project.
project. First I'll open our project and then
First I'll open our project and then move it back to the same window so that
move it back to the same window so that we can see this side by side a little
we can see this side by side a little easier. And to put the text box at the
easier. And to put the text box at the bottom of the page, the first step is to
bottom of the page, the first step is to move the text box below the chat
move the text box below the chat messages. We'll go to our code and we're
messages. We'll go to our code and we're going to scroll down to the app
going to scroll down to the app component
component which is here and we'll scroll to the
which is here and we'll scroll to the HTML and we're just going to move this
HTML and we're just going to move this chat input below the chat messages. So
chat input below the chat messages. So we'll select this component and we'll
we'll select this component and we'll cut
cut and below chat messages we'll paste
and below chat messages we'll paste and save.
and save. And now the chat input will be below the
And now the chat input will be below the chat messages. And that looks pretty
chat messages. And that looks pretty good. Next, we also want to put this
good. Next, we also want to put this chat input at the bottom of the browser
chat input at the bottom of the browser here. So there are several ways to do
here. So there are several ways to do this in CSS. One way is to use flexbox
this in CSS. One way is to use flexbox again. Now before we use flexbox, we're
again. Now before we use flexbox, we're going to make the app container stretch
going to make the app container stretch to the bottom of the browser. So right
to the bottom of the browser. So right now if we click inside here and we
now if we click inside here and we rightclick and inspect
rightclick and inspect and we go to the elements tab and we
and we go to the elements tab and we scroll up and look at the app container.
scroll up and look at the app container. Notice that the app container stops at
Notice that the app container stops at the chat input section. And that's
the chat input section. And that's because this is all the content that we
because this is all the content that we have. So the app container only has the
have. So the app container only has the height that it needs. However, we want
height that it needs. However, we want to stretch the app container to the
to stretch the app container to the bottom of the browser so that we can put
bottom of the browser so that we can put the chat input at the bottom. To do
the chat input at the bottom. To do that, we're going to set the height of
that, we're going to set the height of the app container. So, we'll go back to
the app container. So, we'll go back to our code
our code and we'll scroll up to our CSS
and we're going to find the styles for the app container which is right here.
the app container which is right here. And at the end, we're going to set the
And at the end, we're going to set the height colon.
height colon. And now we want the height of the app
And now we want the height of the app container to stretch to be the same as
container to stretch to be the same as the height of the browser here. To do
the height of the browser here. To do that, we're going to give this a special
that, we're going to give this a special value 100 VH.
value 100 VH. So VH stands for viewport height. This
So VH stands for viewport height. This gives us the height of the browser or
gives us the height of the browser or the part of the page that is visible.
the part of the page that is visible. 100 VH means 100% of the height of the
100 VH means 100% of the height of the browser. So this means the app container
browser. So this means the app container will be 100% of this height.
So now let's save and we'll go to our website and we'll
and we'll go to our website and we'll open the console again by right-clicking
open the console again by right-clicking and inspect
and inspect and go to the elements tab and we'll
and go to the elements tab and we'll scroll up to the app container again.
scroll up to the app container again. And now you'll notice the app container
And now you'll notice the app container stretches to the bottom of the browser.
stretches to the bottom of the browser. However, the app container is actually a
However, the app container is actually a little too tall. So it actually
little too tall. So it actually stretches below the bottom of the page.
stretches below the bottom of the page. And now we can scroll a bit here. The
And now we can scroll a bit here. The reason it's a little bit too tall is
reason it's a little bit too tall is because by default the body element here
because by default the body element here has a default margin of 8 pixels on all
has a default margin of 8 pixels on all sides. So the app container is the same
sides. So the app container is the same height as the browser, but then we add
height as the browser, but then we add another 8 pixels on the top and bottom.
another 8 pixels on the top and bottom. To fix this issue, we can just remove
To fix this issue, we can just remove the default margin from the body. So,
the default margin from the body. So, we'll go back to our code
we'll go back to our code and scroll up to the styles for the
and scroll up to the styles for the body. And at the end, let's remove the
body. And at the end, let's remove the margin at the top and bottom by typing
margin at the top and bottom by typing margin- top colon. And we'll set it to
margin- top colon. And we'll set it to zero pixels. And we'll also set the
zero pixels. And we'll also set the margin dashbottom
margin dashbottom colon to zero pixels and save.
colon to zero pixels and save. So now after we remove the default
So now after we remove the default margin from the top and the bottom,
margin from the top and the bottom, the app container is now exactly the
the app container is now exactly the same height as the browser.
same height as the browser. Now that the app container stretches to
Now that the app container stretches to the bottom of the browser, we can use a
the bottom of the browser, we can use a flexbox to make the chat messages grow
flexbox to make the chat messages grow and push the chat input to the bottom.
and push the chat input to the bottom. Again, there are three steps to use a
Again, there are three steps to use a flexbox.
flexbox. So here we want to position the chat
So here we want to position the chat messages and the chat input. So we need
messages and the chat input. So we need a container around these elements and we
a container around these elements and we already have a container for this which
already have a container for this which is the app container.
is the app container. The second step is to add display flex
The second step is to add display flex to the container. So we'll go back to
to the container. So we'll go back to our code and we're going to scroll to
our code and we're going to scroll to the app container styles which is right
the app container styles which is right here and below this we'll add display
here and below this we'll add display colon flex. Let's save our code.
And unfortunately, it totally messed up our design. So what happened? By
our design. So what happened? By default, flexbox positions our elements
default, flexbox positions our elements horizontally. So it takes all the
horizontally. So it takes all the elements inside the container and then
elements inside the container and then squeezes them into a row like we see
squeezes them into a row like we see here.
here. However, this time we want to position
However, this time we want to position the elements vertically, not
the elements vertically, not horizontally.
horizontally. To position the elements vertically,
To position the elements vertically, we're going to use a flexbox feature
we're going to use a flexbox feature called flex direction.
called flex direction. So in here, we'll type flex dash
So in here, we'll type flex dash direction. colon
direction. colon flex direction determines which
flex direction determines which direction the elements are positioned.
direction the elements are positioned. So flex direction is row by default.
So flex direction is row by default. That means it positions the elements
That means it positions the elements horizontally like we see here.
horizontally like we see here. Now we're going to change flex direction
Now we're going to change flex direction to column.
to column. So this positions the elements
So this positions the elements vertically in a column. If we save our
vertically in a column. If we save our code
code and check the website, the elements in
and check the website, the elements in the flexbox are now positioned
the flexbox are now positioned vertically from top to bottom.
vertically from top to bottom. Next, we're going to use flex grow.
Next, we're going to use flex grow. Again, as a review, flex grow makes an
Again, as a review, flex grow makes an element grow and take up the remaining
element grow and take up the remaining space.
space. Here, we want to make the chat messages
Here, we want to make the chat messages section grow and take up all the
section grow and take up all the remaining vertical space. And this will
remaining vertical space. And this will push the chat input down to the bottom.
push the chat input down to the bottom. To use Flex Grow, we're going to add a
To use Flex Grow, we're going to add a class to the chat messages section.
class to the chat messages section. We'll go to our code and we'll scroll
We'll go to our code and we'll scroll down
down to the chat messages component which is
to the chat messages component which is right here. And currently this component
right here. And currently this component uses a fragment. And remember, we cannot
uses a fragment. And remember, we cannot style a fragment since fragments don't
style a fragment since fragments don't appear on the website. So again, we're
appear on the website. So again, we're going to switch this to a div element.
going to switch this to a div element. and at the end slash div so that we can
and at the end slash div so that we can style it.
style it. And now we'll give this div a class
And now we'll give this div a class using class name equals double quotes
using class name equals double quotes and we'll give it the class chat dash
and we'll give it the class chat dash messages dash container.
messages dash container. And now let's style this class. We'll
And now let's style this class. We'll scroll up in our CSS
scroll up in our CSS and at the end here we'll type dot and
and at the end here we'll type dot and we'll style the class chat dash messages
we'll style the class chat dash messages dash container
dash container and curly brackets
and curly brackets and we'll use the flexbox feature flex
and we'll use the flexbox feature flex dash grow
dash grow 1.
1. So now let's save.
So now let's save. And this makes the chat message
And this makes the chat message container grow and take up the remaining
container grow and take up the remaining vertical space. And this will push the
vertical space. And this will push the chat input to the bottom of the browser.
chat input to the bottom of the browser. So that's how we use a flexbox to
So that's how we use a flexbox to position the chat input at the bottom.
position the chat input at the bottom. Finally, if we look at the final design,
Finally, if we look at the final design, we have some space at the top of the app
we have some space at the top of the app and at the bottom of the app. So let's
and at the bottom of the app. So let's add that space at the top and bottom to
add that space at the top and bottom to our website.
our website. We'll go to our CSS
We'll go to our CSS and currently the app container has a
and currently the app container has a special height of 100 VH. So let's avoid
special height of 100 VH. So let's avoid changing this. Instead, let's add space
changing this. Instead, let's add space above the Chad messages container. So,
above the Chad messages container. So, we'll scroll down to the chat messages
we'll scroll down to the chat messages container and we'll add some space at
container and we'll add some space at the top using margin dash top colon 20
the top using margin dash top colon 20 pixels.
pixels. And we'll also add some space below the
And we'll also add some space below the chat input container. So, we'll scroll
chat input container. So, we'll scroll up to the chat input container which is
up to the chat input container which is right here. And we'll add space at the
right here. And we'll add space at the bottom using margin dash bottom colon.
bottom using margin dash bottom colon. And let's try 60 pixels and save.
And let's try 60 pixels and save. And now that looks pretty good. And now
And now that looks pretty good. And now if we look at our website and compare it
if we look at our website and compare it to the final design,
to the final design, you can see that it looks the same as
you can see that it looks the same as the final design. So, we finished
the final design. So, we finished styling our project to look like the
styling our project to look like the final design using CSS.
final design using CSS. Next, we're going to make the chat
Next, we're going to make the chat messages scrollable. In the final
messages scrollable. In the final project, if we have more chat messages
project, if we have more chat messages than we can see in the browser, we can
than we can see in the browser, we can actually scroll to see all of the chat
actually scroll to see all of the chat messages. Now, you may need to add more
messages. Now, you may need to add more chat messages down here in order to see
chat messages down here in order to see this feature. So, we're going to create
this feature. So, we're going to create this feature in our project. If we go to
this feature in our project. If we go to our project and we add some more
our project and we add some more messages like test and press send,
messages like test and press send, notice if we have too many messages, it
notice if we have too many messages, it starts to push the chat input down.
starts to push the chat input down. To make our chat messages scrollable,
To make our chat messages scrollable, we're going to go to the CSS and we're
we're going to go to the CSS and we're going to find the chat messages
going to find the chat messages container, which is right here.
container, which is right here. And at the end we'll add a property
And at the end we'll add a property overflow colon scroll.
overflow colon scroll. So now if the chat messages overflow or
So now if the chat messages overflow or there's too many to be displayed, it
there's too many to be displayed, it will start to scroll instead of pushing
will start to scroll instead of pushing things down. Let's save our code
things down. Let's save our code and then add another message test and
and then add another message test and press send.
press send. And you may need to add a few more
And you may need to add a few more messages to see this feature. Now, if we
messages to see this feature. Now, if we have too many messages, we're able to
have too many messages, we're able to scroll up and down to see all the
scroll up and down to see all the messages.
messages. Now, before we continue on Windows, we
Now, before we continue on Windows, we have a small problem, which is we start
have a small problem, which is we start to see these thick scroll bars on the
to see these thick scroll bars on the sides, which doesn't look very good. To
sides, which doesn't look very good. To hide these scroll bars, we can go back
hide these scroll bars, we can go back to our CSS and at the end we can use the
to our CSS and at the end we can use the property scroll bar dash width colon
property scroll bar dash width colon nut.
nut. So now let's save.
So now let's save. And if we add a message test and press
And if we add a message test and press send and you might need to add more
send and you might need to add more messages for your project. Now, if we
messages for your project. Now, if we have more messages than we can see, we
have more messages than we can see, we can scroll and we hide the scroll bars.
can scroll and we hide the scroll bars. So, that's how we make the chat messages
So, that's how we make the chat messages scrollable.
The last feature we're going to add to our project is auto scrolling. For
our project is auto scrolling. For example, if we go down here and add the
example, if we go down here and add the message test and press send,
message test and press send, notice we have to manually scroll down
notice we have to manually scroll down to the bottom ourselves. But if we go to
to the bottom ourselves. But if we go to the final project and at the bottom add
the final project and at the bottom add a message test and press send,
a message test and press send, notice that it automatically scrolls to
notice that it automatically scrolls to the bottom of the chat messages. So,
the bottom of the chat messages. So, we're going to add this autoscrolling
we're going to add this autoscrolling feature.
feature. Let's go back to our website.
Let's go back to our website. And to create autoscrolling, we're going
And to create autoscrolling, we're going to learn one of the most important
to learn one of the most important features of React called hooks.
features of React called hooks. Hooks let us insert React features into
Hooks let us insert React features into our component. And we've actually used
our component. And we've actually used hooks before. React.US
hooks before. React.US state is a hook. It inserts a React
state is a hook. It inserts a React feature called state into our component
feature called state into our component and state automatically updates the HTML
and state automatically updates the HTML when the data changes. Now, React has
when the data changes. Now, React has other hooks that we can use and every
other hooks that we can use and every hook starts with a word use.
hook starts with a word use. Another hook is called use effect. Use
Another hook is called use effect. Use effect lets us run some code after the
effect lets us run some code after the component is created or updated.
component is created or updated. So in our project after we add a chat
So in our project after we add a chat message we want to run some code to
message we want to run some code to scroll to the bottom. So this is a
scroll to the bottom. So this is a perfect situation for use effect.
perfect situation for use effect. Inside our code we're going to scroll
Inside our code we're going to scroll down to the chat messages component
which is here. And at the top of the component, we're
And at the top of the component, we're going to type the code capital R react
going to type the code capital R react dot use capital E effect
dot use capital E effect and brackets.
and brackets. By the way, in React, we should put our
By the way, in React, we should put our hooks at the top of the component and
hooks at the top of the component and they should not be inside anything. So,
they should not be inside anything. So, don't put a hook inside an if statement
don't put a hook inside an if statement or inside a function.
or inside a function. Next, we'll give use effect a function.
Next, we'll give use effect a function. So, inside these brackets, we'll type a
So, inside these brackets, we'll type a function using brackets, arrow, and
function using brackets, arrow, and curly brackets.
curly brackets. As a reminder, when we give a function
As a reminder, when we give a function to another function, we usually use an
to another function, we usually use an arrow function because it's a bit
arrow function because it's a bit cleaner. So, React will run this
cleaner. So, React will run this function after the component is created
function after the component is created and every time the component is updated
and every time the component is updated inside here. Let's try console.log
inside here. Let's try console.log the string updated
the string updated and save.
and save. And now if we go to our project and we
And now if we go to our project and we look at the console. So we'll rightclick
look at the console. So we'll rightclick inspect
inspect and we go to the console.
and we go to the console. You'll see that after the component is
You'll see that after the component is created, it runs a function and displays
created, it runs a function and displays updated. And then we're going to go to
updated. And then we're going to go to our website and we're going to add a new
our website and we're going to add a new message like hello and press send.
message like hello and press send. So now after the component is updated,
So now after the component is updated, React runs the function again. So, as
React runs the function again. So, as you can see, use effect lets us run some
you can see, use effect lets us run some code after the component is created or
code after the component is created or updated.
updated. So, now let's go back into our code
So, now let's go back into our code and we'll give use effect a second
and we'll give use effect a second parameter. So, at the end we'll type a
parameter. So, at the end we'll type a comma and we'll give a second parameter
comma and we'll give a second parameter which is an array.
which is an array. So, this array controls when use effect
So, this array controls when use effect runs. If we give it an empty array, use
runs. If we give it an empty array, use effect will only run once after the
effect will only run once after the component is created.
component is created. Now, inside this array, we can also put
Now, inside this array, we can also put some data such as our chat messages. So,
some data such as our chat messages. So, we'll type chat messages.
we'll type chat messages. And now, React will also run this
And now, React will also run this function every time our data changes or
function every time our data changes or every time our chat messages changes.
every time our chat messages changes. If we save
If we save and we look at the console,
and we look at the console, use effect runs after the component is
use effect runs after the component is created. And now if we add a message
created. And now if we add a message like hello and press send,
like hello and press send, use effect also runs after chat messages
use effect also runs after chat messages changes.
changes. So now let's go back to our code.
So now let's go back to our code. And this is called a dependency array.
And this is called a dependency array. It lets us control when use effect runs.
It lets us control when use effect runs. A best practice is to give use effect a
A best practice is to give use effect a dependency array to avoid running this
dependency array to avoid running this function too often.
function too often. So now we learned hooks and the use
So now we learned hooks and the use effect hook. And now we can run some
effect hook. And now we can run some code after the chat messages changes.
The last step is after the chat messages changes, we want to automatically scroll
changes, we want to automatically scroll to the bottom. To scroll to the bottom,
to the bottom. To scroll to the bottom, first we need to get the HTML element
first we need to get the HTML element that we want to scroll into our
that we want to scroll into our JavaScript.
JavaScript. Let's go back to our code. And inside
Let's go back to our code. And inside this function, instead of console.log,
this function, instead of console.log, log we need to get this div chat
log we need to get this div chat messages container into our JavaScript.
messages container into our JavaScript. Now in normal JavaScript we might use
Now in normal JavaScript we might use the DOM to get this element but remember
the DOM to get this element but remember in React we should not use the DOM
in React we should not use the DOM manually. Instead we should use React
manually. Instead we should use React features to get this element
features to get this element to get this element using React. We're
to get this element using React. We're going to use another hook called use
going to use another hook called use ref. So at the top of this component,
ref. So at the top of this component, we're going to type the code capital R
we're going to type the code capital R react dot use capital R ref and
react dot use capital R ref and brackets.
brackets. Use ref lets us automatically save an
Use ref lets us automatically save an HTML element from the component.
HTML element from the component. So this code creates a ref. A ref is a
So this code creates a ref. A ref is a container with special React features.
container with special React features. One special feature is we can give this
One special feature is we can give this ref or this container to React and React
ref or this container to React and React can automatically save an HTML element
can automatically save an HTML element inside this ref or inside this
inside this ref or inside this container.
container. So between these brackets, we're first
So between these brackets, we're first going to put the value null.
going to put the value null. So this is the initial value that is
So this is the initial value that is saved inside this ref or inside this
saved inside this ref or inside this container. So the ref is going to start
container. So the ref is going to start out as empty. So that's why we use null.
out as empty. So that's why we use null. Now let's save an HTML element inside
Now let's save an HTML element inside this ref. To do that, first we're going
this ref. To do that, first we're going to save this ref in a variable. So at
to save this ref in a variable. So at the front we'll create a variable using
the front we'll create a variable using const and we'll name it chat messages
const and we'll name it chat messages ref equals this result.
ref equals this result. And then we're going to go to the HTML
And then we're going to go to the HTML element we want to save, which is this
element we want to save, which is this div, the chat messages container.
div, the chat messages container. And we're going to give this element a
And we're going to give this element a special prop called ref equals curly
special prop called ref equals curly brackets. And between the curly
brackets. And between the curly brackets, we're going to give it the ref
brackets, we're going to give it the ref that we created above, which is chat
that we created above, which is chat messages ref.
messages ref. So now React will take this HTML element
So now React will take this HTML element and save it inside this ref or inside
and save it inside this ref or inside this container.
this container. To access the HTML element saved inside
To access the HTML element saved inside a ref, we're going to go to use effect
a ref, we're going to go to use effect and we're going to type the name of the
and we're going to type the name of the ref, which is chat messages ref and then
ref, which is chat messages ref and then current.
current. Now the reason we put this code in use
Now the reason we put this code in use effect is because remember use effect
effect is because remember use effect runs after the component is created. So
runs after the component is created. So we need to wait for the component to be
we need to wait for the component to be created first and then we can access
created first and then we can access this HTML element.
this HTML element. So now let's console.log this value to
So now let's console.log this value to see what's inside this ref. So at the
see what's inside this ref. So at the front we'll console.log log open bracket
front we'll console.log log open bracket and close bracket and save.
and close bracket and save. And we'll open the console for our
And we'll open the console for our website.
website. And you'll see that React saved the chat
And you'll see that React saved the chat messages container inside our ref.
messages container inside our ref. Now that we have the HTML element, we
Now that we have the HTML element, we need to scroll. Let's learn how to
need to scroll. Let's learn how to scroll it to the bottom. Let's go back
scroll it to the bottom. Let's go back to our code
to our code and first we're going to save this HTML
and first we're going to save this HTML element in a variable. So we'll remove
element in a variable. So we'll remove this and at the front we'll create a
this and at the front we'll create a variable const and let's name it
variable const and let's name it container
container lm equals this result.
lm equals this result. So ending the variable name with lm
So ending the variable name with lm tells us that this variable contains an
tells us that this variable contains an HTML element.
HTML element. and I'll resize my code editor so we can
and I'll resize my code editor so we can see more of the code.
see more of the code. Next, we'll create a new line. And it's
Next, we'll create a new line. And it's a good idea to check if this element
a good idea to check if this element actually exists before we scroll it. So,
actually exists before we scroll it. So, we'll check if brackets container lm.
we'll check if brackets container lm. Finally, we'll type curly brackets.
Finally, we'll type curly brackets. And to scroll this element to the
And to scroll this element to the bottom, we can use this code container
bottom, we can use this code container lm dot scroll top and we'll make it
lm dot scroll top and we'll make it equal container lm dot scroll height.
equal container lm dot scroll height. So scroll top means how far from the top
So scroll top means how far from the top should we scroll and scroll height gives
should we scroll and scroll height gives us the total height of the element. So,
us the total height of the element. So, if we set the scroll top to the total
if we set the scroll top to the total height, it's going to scroll all the way
height, it's going to scroll all the way down to the bottom, which is exactly
down to the bottom, which is exactly what we need. So, now let's save this
what we need. So, now let's save this code
code and we'll go to our website and we'll
and we'll go to our website and we'll add a message test and press send.
add a message test and press send. It runs the use effect function because
It runs the use effect function because chat messages changed and it
chat messages changed and it automatically scrolls to the bottom.
automatically scrolls to the bottom. Now, depending on the height of your
Now, depending on the height of your browser, you might need to add a few
browser, you might need to add a few more messages to see this effect. So, we
more messages to see this effect. So, we can also scroll up and then add another
can also scroll up and then add another message like thank you
message like thank you and press send.
and press send. It runs use effect again and it
It runs use effect again and it automatically scrolls to the bottom. And
automatically scrolls to the bottom. And that's all the major features that we
that's all the major features that we need for this project. I'll leave some
need for this project. I'll leave some extra features like removing these
extra features like removing these default messages and creating the
default messages and creating the loading spinner as exercises.
loading spinner as exercises. And that's it. We created all the
And that's it. We created all the styling and features that we need and we
styling and features that we need and we finished the chatbot project. In the
finished the chatbot project. In the next lesson, we'll learn how to do a
next lesson, we'll learn how to do a proper React setup so we can organize
proper React setup so we can organize our code into different files and
our code into different files and folders instead of putting everything
folders instead of putting everything into one HTML file. And this will help
into one HTML file. And this will help us work on bigger React projects.
us work on bigger React projects. And that's the end of this lesson. In
And that's the end of this lesson. In this lesson, we learned how to use CSS
this lesson, we learned how to use CSS with React. We styled the chatbot
with React. We styled the chatbot project. We reviewed flexbox which lets
project. We reviewed flexbox which lets us create a flexible layout. We learned
us create a flexible layout. We learned the turnary operator which lets us
the turnary operator which lets us insert an if else statement directly in
insert an if else statement directly in the JSX. We learned hooks which lets us
the JSX. We learned hooks which lets us insert React features into our
insert React features into our components. We learned the use effect
components. We learned the use effect hook which lets us run some code after
hook which lets us run some code after the component is created or updated. We
the component is created or updated. We learned the use ref hook which lets us
learned the use ref hook which lets us automatically save an HTML element from
automatically save an HTML element from the component
the component and we created the auto scroll feature
and we created the auto scroll feature for the chat messages.
Here are some exercises to help you practice what we learned in this lesson.
In this lesson, we're going to learn how to do a proper React setup. Right now,
to do a proper React setup. Right now, all of our HTML, CSS, and JavaScript
all of our HTML, CSS, and JavaScript code is combined into one HTML file,
code is combined into one HTML file, chatbot.html.
chatbot.html. Now, it's not good to combine all of our
Now, it's not good to combine all of our code in three different languages into
code in three different languages into one file because if we work on bigger
one file because if we work on bigger projects, this file might contain
projects, this file might contain thousands of lines of code, and it will
thousands of lines of code, and it will be almost impossible to manage all of
be almost impossible to manage all of that code if we put it all in one file.
that code if we put it all in one file. Instead, we're going to do a proper
Instead, we're going to do a proper React setup that will let us split up
React setup that will let us split up this code into different files and
this code into different files and folders.
folders. To create this React setup, we'll need
To create this React setup, we'll need to use the command line. So, first let's
to use the command line. So, first let's review the command line. We're going to
review the command line. We're going to go to VS Code and I'm going to make this
go to VS Code and I'm going to make this full screen.
full screen. And to open the command line, we're
And to open the command line, we're going to click the menu at the top and
going to click the menu at the top and we're going to click the terminal menu
we're going to click the terminal menu and we're going to open a new terminal.
So here we can give an instruction or a command to the computer. For example,
command to the computer. For example, we're going to type the command mkdir.
mkdir means make directory. A directory is another name for a folder. So make
is another name for a folder. So make directory creates a new folder.
directory creates a new folder. Then we'll type a space and we'll give
Then we'll type a space and we'll give this folder a name like test.
this folder a name like test. If we press enter,
If we press enter, it creates a new folder named test. So
it creates a new folder named test. So if we open our files on the left, you'll
if we open our files on the left, you'll see that it created a new folder named
see that it created a new folder named test.
test. If that does not work for you, you can
If that does not work for you, you can check the troubleshooting steps in the
check the troubleshooting steps in the description.
description. So on this line here we can give
So on this line here we can give instructions or commands to our computer
instructions or commands to our computer and that's why this is called the
and that's why this is called the command line
command line and a terminal basically lets us use the
and a terminal basically lets us use the command line and it also lets us view
command line and it also lets us view the output of the command line up here.
the output of the command line up here. So we created a new folder using this
So we created a new folder using this command. Now you might be wondering why
command. Now you might be wondering why did the folder get created here inside
did the folder get created here inside our project folder. As a review, the
our project folder. As a review, the command line runs inside a specific
command line runs inside a specific folder.
folder. To see which folder the command line is
To see which folder the command line is currently running in, we can go to the
currently running in, we can go to the bottom and type this command pwd or
bottom and type this command pwd or print working directory and press enter.
print working directory and press enter. And this command tells us the command
And this command tells us the command line is currently running in the
line is currently running in the react-course folder which is our project
react-course folder which is our project folder right here. That means any
folder right here. That means any commands that we give to the computer
commands that we give to the computer will be done inside this folder. If we
will be done inside this folder. If we make a directory, it will create the new
make a directory, it will create the new directory inside this folder like we see
directory inside this folder like we see here. If we give it another command like
here. If we give it another command like ls or list and press enter,
ls or list and press enter, it will list everything inside this
it will list everything inside this folder. So it will list everything here.
folder. So it will list everything here. As you can see, the command line runs
As you can see, the command line runs inside a specific folder.
inside a specific folder. Now this folder that the command line is
Now this folder that the command line is running in is called the working
running in is called the working directory or the working folder.
directory or the working folder. The last thing we need to review about
The last thing we need to review about the command line is how to change the
the command line is how to change the working directory. To do that, we're
working directory. To do that, we're going to go to the bottom and we're
going to go to the bottom and we're going to type the command cd or change
going to type the command cd or change directory and then press space and then
directory and then press space and then the name of the folder we want to change
the name of the folder we want to change to like test.
to like test. the command line will look for this
the command line will look for this folder in the working directory which is
folder in the working directory which is here and then it's going to go into this
here and then it's going to go into this folder. So now if we press enter and
folder. So now if we press enter and then type print working directory and
then type print working directory and press enter
press enter it will tell us the command line is now
it will tell us the command line is now running inside the test folder.
running inside the test folder. So the command line basically went
So the command line basically went inside this test folder and it's running
inside this test folder and it's running inside here. By the way, this is known
inside here. By the way, this is known as a file path. The slash here means
as a file path. The slash here means that the test folder is inside the
that the test folder is inside the react-course folder.
react-course folder. So now if we give a command like ls and
So now if we give a command like ls and press enter,
press enter, it will list everything inside the test
it will list everything inside the test folder because the command line is
folder because the command line is running inside this test folder and it
running inside this test folder and it tells us there's nothing inside the test
tells us there's nothing inside the test folder.
folder. Finally, to get out of the test folder,
Finally, to get out of the test folder, we can type cd or change directory and
we can type cd or change directory and then space and use the special value dot
then space and use the special value dot dot. Dot dot represents the outer
dot. Dot dot represents the outer folder.
folder. If we press enter,
If we press enter, the command line will go out of the test
the command line will go out of the test folder and back into the react-course
folder and back into the react-course folder.
folder. If we type the command pwd or print
If we type the command pwd or print working directory and press enter,
working directory and press enter, it will tell us the command line is
it will tell us the command line is running in the react-ourse folder again.
running in the react-ourse folder again. So using cd or change directory, we can
So using cd or change directory, we can change which folder the command line is
change which folder the command line is running in and we can basically move
running in and we can basically move around our computer. So this is just a
around our computer. So this is just a review of the command line.
review of the command line. The second thing we need for the React
The second thing we need for the React setup is NodeJS.
setup is NodeJS. So, we're going to review NodeJS.
So, we're going to review NodeJS. First, make sure you have the correct
First, make sure you have the correct version of NodeJS installed. To do that,
version of NodeJS installed. To do that, you can click this link in the
you can click this link in the description.
description. Scroll down to lesson 5 and follow the
Scroll down to lesson 5 and follow the instructions here to install the correct
instructions here to install the correct version of NodeJS.
After Node.js is installed, let's go back to VS Code. And if you just
back to VS Code. And if you just installed Node.js, we need to restart VS
installed Node.js, we need to restart VS Code to make sure that Node.js is
Code to make sure that Node.js is loaded.
loaded. So, we're going to click X in the top
So, we're going to click X in the top right of the terminal
right of the terminal and then close VS Code.
and then close VS Code. And then we're going to open VS Code
And then we're going to open VS Code again.
And we're going to open our project folder, React-Course.
folder, React-Course. and we're going to open a new terminal.
and we're going to open a new terminal. So, in the top menu, we're going to go
So, in the top menu, we're going to go to the terminal section and then open a
to the terminal section and then open a new terminal.
Now, when we install NodeJS, it's going to add a new command to our command line
to add a new command to our command line called node.
called node. So, the node command lets us run
So, the node command lets us run JavaScript code outside of a browser.
JavaScript code outside of a browser. For example, here we have a file called
For example, here we have a file called react-basics.js
react-basics.js and inside we have some simple
and inside we have some simple JavaScript code. If you don't have this
JavaScript code. If you don't have this file, feel free to pause the video and
file, feel free to pause the video and create this file. Now we can give this
create this file. Now we can give this file to node and it will run the
file to node and it will run the JavaScript code in this file. So here
JavaScript code in this file. So here we'll use the node command and type
we'll use the node command and type space and give it the file to run which
space and give it the file to run which is react-basics.js
and press enter. So this will run the JavaScript inside
So this will run the JavaScript inside this file and a console.logs hello. So
this file and a console.logs hello. So as you can see the node command lets us
as you can see the node command lets us run JavaScript code outside of our
run JavaScript code outside of our browser.
browser. Now when we install Node.js, it also
Now when we install Node.js, it also adds another command to our command line
adds another command to our command line called npm.
called npm. npm stands for node package manager. A
npm stands for node package manager. A package is basically an external
package is basically an external library. So npm lets us install external
library. So npm lets us install external libraries or packages into our project.
libraries or packages into our project. To do that, we can use the command npm
To do that, we can use the command npm space install
space install and then space and then the name of an
and then space and then the name of an external library or package.
external library or package. As an example, we'll install the package
As an example, we'll install the package super simple dev.
super simple dev. This is a package that I created that we
This is a package that I created that we can use as an example and press enter.
On Windows, if you get an error like this, you'll need to run this command
this, you'll need to run this command first
first and then run npm install super simple
and then run npm install super simple dev again.
dev again. If that still does not work for you, you
If that still does not work for you, you can check the troubleshooting steps in
can check the troubleshooting steps in the description.
Once npm install finishes, npm will download this external library or this
download this external library or this package into a folder called node
package into a folder called node modules. If we open this folder, we see
modules. If we open this folder, we see the super simple dev package and inside
the super simple dev package and inside this contains the code that we've been
this contains the code that we've been using in the chatbot project like
using in the chatbot project like react.js
react.js and chatbot.js.
and chatbot.js. npm contains millions of packages that
npm contains millions of packages that we can download and use in our project
we can download and use in our project and you can search for packages on the
and you can search for packages on the npm website.
So this is just a review of NodeJS and npm.
npm. Now that we reviewed NodeJS and npm,
Now that we reviewed NodeJS and npm, we're ready to do a proper React setup.
we're ready to do a proper React setup. We just learned that npm has millions of
We just learned that npm has millions of packages available to use. Some of these
packages available to use. Some of these packages also add a command to our
packages also add a command to our command line. For example, there's a
command line. For example, there's a package called create-vit.
package called create-vit. If we install this package, it also adds
If we install this package, it also adds a command to our command line called
a command to our command line called create-vit.
create-vit. The create-vit command helps us set up a
The create-vit command helps us set up a new React project.
new React project. To use the create-v command, we need to
To use the create-v command, we need to do two steps. Number one, we need to
do two steps. Number one, we need to install the create-vt package. And
install the create-vt package. And number two, we're going to run the
number two, we're going to run the create-v command in the command line.
create-v command in the command line. Now, npm actually has a shortcut for
Now, npm actually has a shortcut for this called npx.
this called npx. npx does these two steps in one step.
npx does these two steps in one step. The x means execute.
The x means execute. So let's go to our command line and
So let's go to our command line and let's type the command npx create-vt.
let's type the command npx create-vt. And then we'll also type the at symbol.
And then we'll also type the at symbol. At means we're going to use a specific
At means we're going to use a specific version of the create-vit command. For
version of the create-vit command. For this video, we're going to use a
this video, we're going to use a specific version so that you have the
specific version so that you have the same code that I do and you can follow
same code that I do and you can follow along.
along. To get the version of create-vt we're
To get the version of create-vt we're going to use, we're going to click this
going to use, we're going to click this link in the description.
link in the description. Go to lesson 5 and here you'll find the
Go to lesson 5 and here you'll find the version of create-vt we're going to use.
version of create-vt we're going to use. You can also find the full command here.
You can also find the full command here. By the way, the version that you see in
By the way, the version that you see in this video might be different than the
this video might be different than the version you see on your page. You should
version you see on your page. You should always use the version that you see on
always use the version that you see on your page. I did this because it's hard
your page. I did this because it's hard to update the video. So, this lets me
to update the video. So, this lets me easily update the version in the future.
easily update the version in the future. So, select the version on your page.
So, select the version on your page. Copy.
Copy. And in our command line, we're going to
And in our command line, we're going to paste it after the at.
paste it after the at. So again, this command will install the
So again, this command will install the create-vt package and then it will run
create-vt package and then it will run the create-vit command. The create-v
the create-vit command. The create-v command will help us set up a new react
command will help us set up a new react project.
project. By the way, in some tutorials, they
By the way, in some tutorials, they might use the command npm create vit.
might use the command npm create vit. This is just a shortcut for
This is just a shortcut for npxcreate-vit.
Now let's press enter. If it says it needs to install this
If it says it needs to install this package, we can press y for yes and
package, we can press y for yes and press enter.
Now the create-v command will ask us some questions. First it will ask us for
some questions. First it will ask us for a project name. So let's name it chatbot
a project name. So let's name it chatbot dash project and press enter.
dash project and press enter. And then it will ask us what technology
And then it will ask us what technology we want to use in our project. So we're
we want to use in our project. So we're going to press the down arrow and select
going to press the down arrow and select react and press enter.
react and press enter. And it will ask us what other tools we
And it will ask us what other tools we want in our project. We're going to
want in our project. We're going to press down and just select JavaScript
press down and just select JavaScript and press enter.
and press enter. and create vit will create an empty
and create vit will create an empty React project at this location or this
React project at this location or this folder right here.
folder right here. Next, we're going to go into this folder
Next, we're going to go into this folder with our command line. To do that, we
with our command line. To do that, we can use the command cd or change
can use the command cd or change directory and give it the folder name
directory and give it the folder name chatbot dash project and press enter.
chatbot dash project and press enter. If we type pwd and press enter,
If we type pwd and press enter, it will tell us the command line is now
it will tell us the command line is now running inside of the chatbot project
running inside of the chatbot project folder. So, it's running inside of here.
folder. So, it's running inside of here. The next thing we're going to do is
The next thing we're going to do is we're going to run the command npm
we're going to run the command npm install.
install. Inside our chatbot project folder, we
Inside our chatbot project folder, we have a special file called package.json.
So, package.json JSON contains a list of all the packages that are needed for
all the packages that are needed for this project. So, npm install is going
this project. So, npm install is going to install all of these packages at the
to install all of these packages at the same time.
same time. So, we'll go back to the command line
So, we'll go back to the command line and scroll down and we'll run the
and scroll down and we'll run the command npm install and press enter.
command npm install and press enter. Now, this might take a while because
Now, this might take a while because it's going to install a lot of packages.
it's going to install a lot of packages. So, we just got to wait until it
So, we just got to wait until it finishes.
After npm install finishes, all of the packages here are going to be downloaded
packages here are going to be downloaded into the node modules folder. So, if we
into the node modules folder. So, if we open this, you'll see that we have a lot
open this, you'll see that we have a lot of packages here. Now, you'll notice
of packages here. Now, you'll notice that there's more packages here than we
that there's more packages here than we have in the package.json file, and
have in the package.json file, and that's because some packages require
that's because some packages require other packages. So, npm helps us install
other packages. So, npm helps us install everything that we need.
The last step is to run the command npm rundev.
rundev. So, this will start up our new React
So, this will start up our new React website. Let's press enter.
website. Let's press enter. And now we can view this website by
And now we can view this website by opening this URL in our browser. So,
opening this URL in our browser. So, we're going to select this URL and copy
we're going to select this URL and copy and then open our browser.
and then open our browser. And I'm going to make it full screen so
And I'm going to make it full screen so we can see more of it. We'll create a
we can see more of it. We'll create a new tab and paste and press enter.
new tab and paste and press enter. And now we have a new React website that
And now we have a new React website that we can work with. So that's how we do a
we can work with. So that's how we do a proper React setup using the command
proper React setup using the command line npm and vit.
line npm and vit. Now that we created a proper React
Now that we created a proper React setup, let's go back to VS Code
setup, let's go back to VS Code and we'll learn what each of these files
and we'll learn what each of these files and folders do. As a review, the node
and folders do. As a review, the node modules folder is where npm installs all
modules folder is where npm installs all of the packages.
of the packages. Next, we're going to look at the src or
Next, we're going to look at the src or the source folder.
the source folder. This folder contains the code for our
This folder contains the code for our website. So, all our JavaScript and CSS
website. So, all our JavaScript and CSS code goes in here. And remember, when
code goes in here. And remember, when using React, we write JSX code rather
using React, we write JSX code rather than normal JavaScript code. So, the
than normal JavaScript code. So, the files here end with JSX instead of JS.
files here end with JSX instead of JS. Next, this assets folder contains images
Next, this assets folder contains images that we want to display on our website.
that we want to display on our website. So, here we have an image of the React
So, here we have an image of the React logo in SVG format.
logo in SVG format. The last folder here is the public
The last folder here is the public folder. The public folder contains files
folder. The public folder contains files that should be available to the public.
that should be available to the public. Public means we can access these using a
Public means we can access these using a URL. That means that when this website
URL. That means that when this website is on the internet, I can give you a URL
is on the internet, I can give you a URL to this image and you'll be able to
to this image and you'll be able to access it.
access it. So here they just put this vit image in
So here they just put this vit image in the public folder as an example. So now
the public folder as an example. So now we understand the folders that we have
we understand the folders that we have in this setup.
in this setup. Next let's learn about all the files in
Next let's learn about all the files in this react setup. The first file.get Git
this react setup. The first file.get Git ignore is used by a tool called git. Git
ignore is used by a tool called git. Git helps us track changes in our code. For
helps us track changes in our code. For this chatbot project, we're not going to
this chatbot project, we're not going to use git. So this file doesn't do
use git. So this file doesn't do anything. So we don't need to change
anything. So we don't need to change this file.
this file. The next file here is eslint.config.js.
So this is used by a tool called eslint. eslint highlights problems in our
eslint highlights problems in our JavaScript code. Let's do an example. If
JavaScript code. Let's do an example. If we open the source folder and we open
we open the source folder and we open the file app.jsx
and let's say that here I accidentally misspell setc count by removing the last
misspell setc count by removing the last t.
t. My VS code doesn't really tell me that
My VS code doesn't really tell me that there is a problem here. But ESLint will
there is a problem here. But ESLint will tell me very clearly that there is a
tell me very clearly that there is a problem. To use ESLint, we need to
problem. To use ESLint, we need to install the ESLint extension. So we can
install the ESLint extension. So we can go to the extension section
go to the extension section and we'll install the extension ESLint
and we'll install the extension ESLint and we'll install it.
After it's installed, if we go back to app.jsx
app.jsx now, it's going to tell me with a red
now, it's going to tell me with a red underline that this variable name does
underline that this variable name does not match the variable name down here.
not match the variable name down here. So, if we scroll up and we fix the
So, if we scroll up and we fix the spelling by adding back the t, that red
spelling by adding back the t, that red underline or that error will go away.
underline or that error will go away. As you can see, eslint is a really
As you can see, eslint is a really useful tool that highlights problems in
useful tool that highlights problems in our JavaScript code. So, if we go back
our JavaScript code. So, if we go back to the eslint.config.js,
this file configures eslint, it tells it what to check for. So, this
what to check for. So, this configuration file is actually good
configuration file is actually good enough for now. So, we don't need to
enough for now. So, we don't need to change this file.
change this file. The next file in our setup is index.htm.
The next file in our setup is index.htm. html.
html. This contains all the HTML code for our
This contains all the HTML code for our React website. So, this is the same
React website. So, this is the same thing as chatbot.html.
thing as chatbot.html. The main difference is instead of
The main difference is instead of putting all of our code inside the HTML
putting all of our code inside the HTML file, index.html
file, index.html loads our JavaScript from a different
loads our JavaScript from a different file.
file. So this is the one file that we may need
So this is the one file that we may need to change inside this setup. If we want
to change inside this setup. If we want to change the HTML for our website,
to change the HTML for our website, for example, we can change the title at
for example, we can change the title at the top of the tabs by removing this
the top of the tabs by removing this and let's change it to chatbot
and let's change it to chatbot project.
project. If we save,
If we save, vit will automatically refresh our page
vit will automatically refresh our page just like live server does. And if we
just like live server does. And if we open our website, you'll see that the
open our website, you'll see that the title at the top changed.
title at the top changed. Let's go back.
Let's go back. So the index.html
So the index.html contains the HTML code for this website.
contains the HTML code for this website. The next file in this setup is
The next file in this setup is package-lock.json.
As a review, package.json has a list of packages that we need to install to run
packages that we need to install to run this project. What package lock.json
this project. What package lock.json does is it saves the version numbers of
does is it saves the version numbers of all the packages that we installed. So
all the packages that we installed. So the next time we run npm install, this
the next time we run npm install, this file makes sure that we get the same
file makes sure that we get the same versions for all of these packages.
versions for all of these packages. Now npm automatically updates package
Now npm automatically updates package lock.json. So we don't need to change
lock.json. So we don't need to change this file. The next file in the setup is
this file. The next file in the setup is package.json. JSON and this basically
package.json. JSON and this basically contains the list of packages that we
contains the list of packages that we need in our project as well as some
need in our project as well as some other information about our project.
other information about our project. When we npm install a package, it will
When we npm install a package, it will automatically update this list of
automatically update this list of packages. So we don't need to change
packages. So we don't need to change this file.
this file. Next, we have the file readme.md.
Next, we have the file readme.md. So this is just text. It provides more
So this is just text. It provides more information about this project. And this
information about this project. And this is not code. This is just forformational
is not code. This is just forformational purposes. So we don't need to change
purposes. So we don't need to change this file.
this file. Finally, vit.config.js
Finally, vit.config.js configures vit. Vit is the tool that we
configures vit. Vit is the tool that we used to set up this project. Vit also
used to set up this project. Vit also helps us build the website. That means
helps us build the website. That means it takes all the JavaScript and CSS and
it takes all the JavaScript and CSS and then loads them into the HTML file. Vit
then loads them into the HTML file. Vit also creates a server. A server puts our
also creates a server. A server puts our website at a URL. For example, here it
website at a URL. For example, here it put our website at the URL localhost
put our website at the URL localhost 5173.
5173. So this lets us view the website in a
So this lets us view the website in a web browser like a real website. When we
web browser like a real website. When we were building the chatbot project in the
were building the chatbot project in the previous lessons, we used an extension
previous lessons, we used an extension called live server. Live server
called live server. Live server automatically refreshes the website when
automatically refreshes the website when we change some code. The VIT server also
we change some code. The VIT server also refreshes the website when we change
refreshes the website when we change some code. So the VIT server is actually
some code. So the VIT server is actually a replacement for the live server that
a replacement for the live server that we used earlier. So those are three main
we used earlier. So those are three main features of Vit and you can see that
features of Vit and you can see that it's really helpful for setting up and
it's really helpful for setting up and developing a React website. We'll go
developing a React website. We'll go back to VS Code.
back to VS Code. So the vit config.js file basically
So the vit config.js file basically configures vit. So this config file is
configures vit. So this config file is good enough. So we don't need to change
good enough. So we don't need to change this file. And that's it. Now we
this file. And that's it. Now we understand all the files and folders in
understand all the files and folders in this react setup. As you can see most of
this react setup. As you can see most of these files are just configuration files
these files are just configuration files and we don't need to change them. The
and we don't need to change them. The only files we need to focus on and
only files we need to focus on and change are the HTML file and the files
change are the HTML file and the files in the source folder which is our CSS
in the source folder which is our CSS and JavaScript files.
and JavaScript files. Now that we understand all the files and
Now that we understand all the files and folders in this React setup, let's move
folders in this React setup, let's move our previous chatbot project into this
our previous chatbot project into this setup. First, we can close the chatbot
setup. First, we can close the chatbot project folder for now. And let's
project folder for now. And let's actually remove the node modules folder
actually remove the node modules folder that we created earlier for practice. So
that we created earlier for practice. So we'll delete this folder
and let's also delete the test folder that we created for practice
that we created for practice and also the package lock.json and
and also the package lock.json and package.json.
Next, let's go into the chatbot project folder and we'll open the source folder
folder and we'll open the source folder and we'll start with this file app.jsx.
and we'll start with this file app.jsx. So notice that in this file we have a
So notice that in this file we have a react component called app and this
react component called app and this component represents the entire
component represents the entire application.
application. Now previously in chatbot.html
Now previously in chatbot.html we also created an app component.
we also created an app component. So all we have to do is to replace this
So all we have to do is to replace this app component with our previous app
app component with our previous app component. So let's go to our code and
component. So let's go to our code and we're going to open chatbot.html
and we're going to scroll down till we see the app component which is down
see the app component which is down here. So we're going to select the app
here. So we're going to select the app component
component and make sure you don't select the code
and make sure you don't select the code down here. We just want to copy the
down here. We just want to copy the component over. So, we're going to copy
component over. So, we're going to copy this
this and then go back to app.jsx
and then go back to app.jsx and we're going to remove this app
and we're going to remove this app component. So, we'll select it
component. So, we'll select it and remove it and we're going to paste
and remove it and we're going to paste the app component from our previous
the app component from our previous project.
project. And now we're going to scroll up and
And now we're going to scroll up and eslint is going to tell us we have some
eslint is going to tell us we have some errors here. So we'll go through these
errors here. So we'll go through these errors one by one.
errors one by one. First for this error eslint is going to
First for this error eslint is going to tell us that react is not defined.
tell us that react is not defined. Before we loaded the react external
Before we loaded the react external library using a script tag and this
library using a script tag and this provided a variable called react.
provided a variable called react. However, now that we're using NodeJS,
However, now that we're using NodeJS, we usually don't use script tags to load
we usually don't use script tags to load the external libraries. Instead, we
the external libraries. Instead, we download these packages into Node
download these packages into Node modules and then load it from node
modules and then load it from node modules. With node modules, we can use a
modules. With node modules, we can use a JavaScript feature called modules to
JavaScript feature called modules to only load the parts of the external
only load the parts of the external library that we need. So when using npm,
library that we need. So when using npm, a best practice is to load external
a best practice is to load external libraries from node modules. Instead of
libraries from node modules. Instead of using a script tag
using a script tag to load an external library from node
to load an external library from node modules, we use the word import. And
modules, we use the word import. And then we tell the computer which external
then we tell the computer which external library or which package we want to load
library or which package we want to load from by typing from and then the name of
from by typing from and then the name of the package like the string react. If we
the package like the string react. If we just type a name directly like this and
just type a name directly like this and we don't start with dot slash or slash,
we don't start with dot slash or slash, this tells the computer to look inside
this tells the computer to look inside node modules for the React package. So,
node modules for the React package. So, it's going to look in here and it's
it's going to look in here and it's going to find the React package in here
going to find the React package in here and load it from here.
and load it from here. Also, when importing from node modules,
Also, when importing from node modules, we don't have to import the entire React
we don't have to import the entire React library. we can just import what we
library. we can just import what we need. For example, here we just import
need. For example, here we just import the use state feature from React.
the use state feature from React. So now that we imported use state, we
So now that we imported use state, we can just use this directly here instead
can just use this directly here instead of doing react dot use state. So we can
of doing react dot use state. So we can remove react dot and use state directly.
remove react dot and use state directly. Next, these two lines import images that
Next, these two lines import images that were used in the example website. So,
were used in the example website. So, we're no longer using these images. So,
we're no longer using these images. So, ESLint displays an error. To fix this,
ESLint displays an error. To fix this, we can just remove these imports.
we can just remove these imports. Next, let's scroll down
Next, let's scroll down and it's going to tell us that the
and it's going to tell us that the components chat messages and chat input
components chat messages and chat input are missing and they don't exist in this
are missing and they don't exist in this file. So, let's actually just copy them
file. So, let's actually just copy them over from chatbot.html.
So, we'll go back to the previous project
project and in chatbot.html, HTML. We're going
and in chatbot.html, HTML. We're going to scroll up
to scroll up and above the app component, we're going
and above the app component, we're going to copy over all of our other
to copy over all of our other components. So, we're going to select
components. So, we're going to select all this code
all this code and we're going to copy
and we're going to copy and let's go back to app.jsx
and let's go back to app.jsx and we'll scroll up above the app. We're
and we'll scroll up above the app. We're going to paste all of the other
going to paste all of the other components that we created.
components that we created. And now if we scroll down and look at
And now if we scroll down and look at our app component, you can see that
our app component, you can see that there's no more errors because we moved
there's no more errors because we moved these components into this file. So now
these components into this file. So now we've moved the app component into this
we've moved the app component into this new React setup.
new React setup. After copying over all of our other
After copying over all of our other components, we now have some more ESLint
components, we now have some more ESLint errors. So, let's scroll up to the top
errors. So, let's scroll up to the top and we'll fix these errors one by one.
and we'll fix these errors one by one. First, you might see an error here for
First, you might see an error here for the props.
the props. ESLint tells us that these props are
ESLint tells us that these props are missing props validations.
missing props validations. Props validation was an older feature of
Props validation was an older feature of React. Newer versions of React don't use
React. Newer versions of React don't use this feature. So, we can actually turn
this feature. So, we can actually turn off this check in eslint.
off this check in eslint. To turn off a check in eslint, we're
To turn off a check in eslint, we're going to go to the eslint config.js
going to go to the eslint config.js file, and we're going to scroll down to
file, and we're going to scroll down to the rules section here. A rule tells
the rules section here. A rule tells ESLint what to check for. At the bottom
ESLint what to check for. At the bottom of this object, we're going to add the
of this object, we're going to add the string react slprop-types
colon and we'll set it to the string off and save.
and save. So, this will turn off this particular
So, this will turn off this particular rule or this particular check. And now,
rule or this particular check. And now, if we go back to app.jsx, jsx. We no
if we go back to app.jsx, jsx. We no longer have those eslint errors because
longer have those eslint errors because we turned off the check.
we turned off the check. Next, remember that we're no longer
Next, remember that we're no longer using react.
using react. We can just use state directly. So, we
We can just use state directly. So, we can remove react dot.
can remove react dot. Next, let's scroll down and eslint will
Next, let's scroll down and eslint will tell us that chatbot does not exist in
tell us that chatbot does not exist in this file. So, previously we loaded the
this file. So, previously we loaded the chatbot using a script tag. But
chatbot using a script tag. But remember, now that we're using npm, a
remember, now that we're using npm, a best practice is to load the chatbot
best practice is to load the chatbot from node modules.
from node modules. First, we need to download the chatbot
First, we need to download the chatbot into node modules. To do that, we're
into node modules. To do that, we're going to install the package super
going to install the package super simple dev. Let's go back to the command
simple dev. Let's go back to the command line.
line. And currently, it's running the vit
And currently, it's running the vit server. So, we're going to stop the
server. So, we're going to stop the server by pressing control C on Windows
server by pressing control C on Windows or control C on Mac. Note that on Mac,
or control C on Mac. Note that on Mac, it's control C, not command C. So, this
it's control C, not command C. So, this will stop the V server and bring us back
will stop the V server and bring us back to the command line. Usually, to exit
to the command line. Usually, to exit something from the command line, we can
something from the command line, we can press control C in both Windows and Mac.
press control C in both Windows and Mac. Next, we're going to npm
Next, we're going to npm install
install the package super simple dev. So, this
the package super simple dev. So, this package contains the chatbot code that
package contains the chatbot code that we were using earlier. Let's press
we were using earlier. Let's press enter.
enter. It's going to install the super simple
It's going to install the super simple dev package inside node modules. And now
dev package inside node modules. And now to load it from node modules, we're
to load it from node modules, we're going to scroll up in our code and at
going to scroll up in our code and at the top we're going to import
the top we're going to import and type curly brackets. So we're going
and type curly brackets. So we're going to import the chatbot object and we're
to import the chatbot object and we're going to import it from a string and
going to import it from a string and we'll import it from the package super
we'll import it from the package super simple dev. So this will load the super
simple dev. So this will load the super simple dev package from inside node
simple dev package from inside node modules and get the chatbot out of it.
modules and get the chatbot out of it. And now that we have this chatbot
And now that we have this chatbot object, if we scroll down, we have
object, if we scroll down, we have access to it. So it's no longer giving
access to it. So it's no longer giving us an error.
us an error. Finally, we're going to scroll down
Finally, we're going to scroll down to the chat messages component.
to the chat messages component. And here it's telling us that React does
And here it's telling us that React does not exist. So just like with use state,
not exist. So just like with use state, we can import use ref and use effect
we can import use ref and use effect directly as well.
directly as well. So let's remove the react dot from here
So let's remove the react dot from here and remove react dot from here.
and remove react dot from here. And we're going to scroll up
And we're going to scroll up and at the top we're already importing
and at the top we're already importing from the React package. To import
from the React package. To import multiple things we can just add a comma
multiple things we can just add a comma at the end. and import use ref and add
at the end. and import use ref and add another comma and import use effect.
another comma and import use effect. This gets these two features out of
This gets these two features out of React and now we can use them directly
React and now we can use them directly in our code.
in our code. And now we've fixed all the ESLint
And now we've fixed all the ESLint errors in our app component. If you did
errors in our app component. If you did the exercises in the previous lesson,
the exercises in the previous lesson, you may have some more ESLint errors.
you may have some more ESLint errors. So, make sure you fix any other errors
So, make sure you fix any other errors that you have. And finally, let's save
that you have. And finally, let's save this file.
Next, we're going to look at the file main.jsx.
main.jsx. So, this code sets up React. It calls
So, this code sets up React. It calls create root, gives it a container, and
create root, gives it a container, and then renders the app component onto the
then renders the app component onto the website. If we open our chatbot.html
website. If we open our chatbot.html HTML and we scroll to the very bottom.
You notice that we do the same thing. We call create root, give it a container,
call create root, give it a container, and then render the app onto the
and then render the app onto the website. So main.jsx
website. So main.jsx does the same thing as this code. It
does the same thing as this code. It sets up React and displays the app onto
sets up React and displays the app onto the website.
the website. Now, instead of copying this code over
Now, instead of copying this code over to main.j jsx. We're just going to use
to main.j jsx. We're just going to use the code in this file because it
the code in this file because it basically does the same thing. It just
basically does the same thing. It just uses an ID for the container instead of
uses an ID for the container instead of a class. The one other difference in
a class. The one other difference in this code is it wraps the app in a
this code is it wraps the app in a component called strict mode. Strict
component called strict mode. Strict mode is a special component provided by
mode is a special component provided by React. Strict mode basically gives us
React. Strict mode basically gives us some additional checks and warnings when
some additional checks and warnings when developing our app.
developing our app. And that's it. We moved all of our
And that's it. We moved all of our JavaScript code into this new setup.
JavaScript code into this new setup. Now, let's open this app in our browser
Now, let's open this app in our browser to see what it looks like. We'll go down
to see what it looks like. We'll go down to the command line and let's make sure
to the command line and let's make sure we're running inside the chatbot project
we're running inside the chatbot project folder by typing pwd and press enter.
folder by typing pwd and press enter. So, that looks good. And we're going to
So, that looks good. And we're going to start the VIT server by typing npm
start the VIT server by typing npm rundev
rundev and press enter.
and press enter. And we'll open this URL in our browser.
And we'll open this URL in our browser. I already have it open.
I already have it open. So I'll open my browser and refresh this
So I'll open my browser and refresh this page. And now the website displays our
page. And now the website displays our previous chatbot app. in the text box.
previous chatbot app. in the text box. If we type a message like hello and
If we type a message like hello and press send,
press send, it will display a response from the
it will display a response from the chatbot.
chatbot. However, obviously it doesn't look
However, obviously it doesn't look right, and that's because we haven't
right, and that's because we haven't moved our CSS code and images over into
moved our CSS code and images over into the new setup. So, we're going to do
the new setup. So, we're going to do that next.
that next. Let's move our CSS code into this new
Let's move our CSS code into this new React setup.
React setup. We'll go back to VS Code
We'll go back to VS Code and we're going to open chatbot.html
and we're going to go to the top of this file right here.
file right here. So at the top we have all of our CSS
So at the top we have all of our CSS code. We're going to move this CSS code
code. We're going to move this CSS code into app.css.
into app.css. So, we'll select all of this CSS
all the way to the bottom and we're going to copy it
going to copy it and then open app.css
and then open app.css and we're going to remove this default
and we're going to remove this default CSS. So, we'll remove this and then
CSS. So, we'll remove this and then paste our CSS code and save.
paste our CSS code and save. And now how does this CSS code get
And now how does this CSS code get loaded on the website? If we open
loaded on the website? If we open app.jsx,
app.jsx, notice at the top we import/app.css.
So dot slash means the current folder. It means the folder that contains this
It means the folder that contains this file, which is the source folder. So
file, which is the source folder. So it's going to start from source and look
it's going to start from source and look for a file called app.css.
for a file called app.css. and it finds it here and it will load
and it finds it here and it will load all the CSS code in this file onto the
all the CSS code in this file onto the website. So you might be wondering how
website. So you might be wondering how can we import a CSS file like this?
can we import a CSS file like this? Doesn't import only work for JavaScript
Doesn't import only work for JavaScript files. So this is actually a feature of
files. So this is actually a feature of Vit. Vit lets us import any type of file
Vit. Vit lets us import any type of file like a CSS file or even an image file.
like a CSS file or even an image file. Depending on the type of file, it will
Depending on the type of file, it will behave differently. If we import a CSS
behave differently. If we import a CSS file, vit will load all the CSS code in
file, vit will load all the CSS code in this file and apply it to the website.
this file and apply it to the website. So that's how this works. We use Vit to
So that's how this works. We use Vit to load the CSS code inside app.css CSS.
load the CSS code inside app.css CSS. And this allows us to separate our CSS
And this allows us to separate our CSS code into its own file to make our code
code into its own file to make our code more organized.
more organized. Next, you'll also notice that in here we
Next, you'll also notice that in here we have an index.css
have an index.css file.
file. This CSS file is loaded by main.jsx
This CSS file is loaded by main.jsx here using this import. So why do we
here using this import. So why do we have two CSS files? A best practice is
have two CSS files? A best practice is to split up our CSS into different
to split up our CSS into different files. All the CSS for the app component
files. All the CSS for the app component go inside the app.css file. All the CSS
go inside the app.css file. All the CSS for the overall website should go inside
for the overall website should go inside index.css.
index.css. If we open app.css
If we open app.css and we scroll to the top,
and we scroll to the top, the body styles here are not related to
the body styles here are not related to the app component. This styles the
the app component. This styles the overall website. So a best practice is
overall website. So a best practice is to split up this code and move this into
to split up this code and move this into index.css.
index.css. So we'll select this code and then cut
So we'll select this code and then cut and save
and save and then inside index.css CSS.
and then inside index.css CSS. We're going to remove this default code
We're going to remove this default code and paste those body styles and save.
and paste those body styles and save. If we go back to app.css,
If we go back to app.css, the rest of this code is related to the
the rest of this code is related to the app component. So, it makes sense to
app component. So, it makes sense to leave it in app.css.
leave it in app.css. And now we moved all of our CSS into our
And now we moved all of our CSS into our new React setup. So, let's open our
new React setup. So, let's open our project again in the browser to see what
project again in the browser to see what it looks like.
it looks like. And now it's looking pretty good. It's
And now it's looking pretty good. It's looking like our previous chatbot
looking like our previous chatbot project. And we have the layout and
project. And we have the layout and styling that we need. The last thing
styling that we need. The last thing we're missing here are the images. So,
we're missing here are the images. So, we're going to move those. Next,
we're going to move those. Next, let's move the robot image and the user
let's move the robot image and the user image into the new React setup. We'll go
image into the new React setup. We'll go back to VS Code
back to VS Code and we're going to scroll down and we're
and we're going to scroll down and we're going to select the robot.png image and
going to select the robot.png image and we'll copy it by pressing control C on
we'll copy it by pressing control C on Windows or command C on Mac.
Windows or command C on Mac. And let's scroll up and we're going to
And let's scroll up and we're going to put it inside the source/assets
put it inside the source/assets folder. So, this is typically where we
folder. So, this is typically where we put our images. So, let's click on this
put our images. So, let's click on this assets folder and we're going to paste
assets folder and we're going to paste the image by pressing controlV on
the image by pressing controlV on Windows or commandV on Mac.
Windows or commandV on Mac. And now we have the robot image in our
And now we have the robot image in our new setup. Let's do the same for the
new setup. Let's do the same for the user image. So, we'll go down and select
user image. So, we'll go down and select user.png
user.png and we'll copy
and we'll copy and then select the assets folder and
and then select the assets folder and we'll paste.
we'll paste. And now we need to load these images
And now we need to load these images into our app. Let's open app.jsx.
into our app. Let's open app.jsx. And to load this image, we can actually
And to load this image, we can actually just import it. So at the top, let's
just import it. So at the top, let's type import
type import and we'll give this image a name like
and we'll give this image a name like robot profile image. And we'll import it
robot profile image. And we'll import it from a string. and we're going to locate
from a string. and we're going to locate this image file. So inside here, we'll
this image file. So inside here, we'll start by typing dot slash, which means
start by typing dot slash, which means the current folder or the folder that
the current folder or the folder that contains app.jsx,
contains app.jsx, which is the source folder. So we're
which is the source folder. So we're going to start from the source folder
going to start from the source folder and then we're going to go into the
and then we're going to go into the assets folder. So, we'll type assets.
assets folder. So, we'll type assets. And to go into this folder, we're going
And to go into this folder, we're going to type a slash. And then we're going to
to type a slash. And then we're going to look for the file robot.png.
look for the file robot.png. So, we'll type robot.png.
So, this is a file path. It tells the computer how to locate this file.
computer how to locate this file. So also notice that in this import we
So also notice that in this import we just gave it a name instead of using
just gave it a name instead of using curly brackets.
curly brackets. This is called a default export and
This is called a default export and we'll review this later in the lesson.
we'll review this later in the lesson. But for now just remember that when we
But for now just remember that when we import an image we just give it a name
import an image we just give it a name without curly brackets.
without curly brackets. Let's also load the user image. So,
Let's also load the user image. So, we're going to import and give it a
we're going to import and give it a name, user profile image, and we'll
name, user profile image, and we'll import it from a string. And we're going
import it from a string. And we're going to locate the user.png file. So, we'll
to locate the user.png file. So, we'll start from the current folder using dot
start from the current folder using dot slash. We'll look for the assets folder
slash. We'll look for the assets folder and then slash to go into this folder.
and then slash to go into this folder. And we'll look for the file user.png.
So remember this is a feature of vit. Vit lets us import any type of file
Vit lets us import any type of file including an image file. When we import
including an image file. When we import an image like this, vit gives us a file
an image like this, vit gives us a file path to that image. So this contains a
path to that image. So this contains a file path like this. And we can use this
file path like this. And we can use this directly in an images source attribute.
directly in an images source attribute. So, let's scroll down to the chat
So, let's scroll down to the chat message component. And in here, we have
message component. And in here, we have our two image elements. So, in the
our two image elements. So, in the source attribute, instead of robot.png,
source attribute, instead of robot.png, we're going to give it those images that
we're going to give it those images that we imported by typing curly brackets.
we imported by typing curly brackets. And here for the robot, we'll insert the
And here for the robot, we'll insert the variable robot profile image. And we'll
variable robot profile image. And we'll do the same thing for the user. We'll
do the same thing for the user. We'll remove the source attribute
remove the source attribute and type curly brackets. And we'll
and type curly brackets. And we'll insert the user profile image. So that's
insert the user profile image. So that's how we import images using Vit and use
how we import images using Vit and use them. Now let's save
them. Now let's save and we'll check our website.
and we'll check our website. And now all of the images are loaded.
And now all of the images are loaded. So, let's try adding a message to make
So, let's try adding a message to make sure this is working. We'll type the
sure this is working. We'll type the message hello and press send.
message hello and press send. And that's it. We finished moving our
And that's it. We finished moving our chatbot project into this new React
chatbot project into this new React setup.
setup. We'll go back to VS Code.
We'll go back to VS Code. And the big advantage of this setup is
And the big advantage of this setup is we can separate our code into different
we can separate our code into different files instead of combining everything
files instead of combining everything into one file like we had before. Right
into one file like we had before. Right now we already separated our code a bit.
now we already separated our code a bit. We separated the app component into
We separated the app component into app.jsx
app.jsx and we separated the code that sets up
and we separated the code that sets up React into main.jsx.
React into main.jsx. Now we're going to separate our code
Now we're going to separate our code even more. So, inside app.jsx,
even more. So, inside app.jsx, if we scroll to the top,
if we scroll to the top, notice that there's many other
notice that there's many other components in this file, like the chat
components in this file, like the chat input component. A best practice is to
input component. A best practice is to separate each component into its own
separate each component into its own file. This makes our code easier to work
file. This makes our code easier to work with because each file only focuses on
with because each file only focuses on one component.
one component. So, let's separate the chat input
So, let's separate the chat input component into its own file.
component into its own file. First, we're going to go to the source
First, we're going to go to the source folder and we're going to create a new
folder and we're going to create a new folder in here to group our components
folder in here to group our components together. So, we'll click this folder
together. So, we'll click this folder and we're going to click this icon to
and we're going to click this icon to create a new folder and we'll name it
create a new folder and we'll name it components
components and press enter.
and press enter. And inside this components folder, we're
And inside this components folder, we're going to create a new file for our chat
going to create a new file for our chat input component. So in here, we'll click
input component. So in here, we'll click it and then click this icon to create a
it and then click this icon to create a new file. And we'll give it the same
new file. And we'll give it the same name as the component. So we'll name it
name as the component. So we'll name it capital C chat capital I input.jsx
and press enter. And now we're going to move the chat
And now we're going to move the chat input component into this file. So we'll
input component into this file. So we'll open app.jsx
open app.jsx and we'll select the code for chat input
and we'll select the code for chat input which is down here.
which is down here. And we're going to cut
and then open chatinput.jsx. And in here we'll paste.
And in here we'll paste. and we'll scroll up and we're going to
and we'll scroll up and we're going to fix these eslint errors. We'll start
fix these eslint errors. We'll start with this one. Use state currently
with this one. Use state currently doesn't exist in this file. So, we need
doesn't exist in this file. So, we need to import it again.
to import it again. Let's go back to app.jsx.
Let's go back to app.jsx. And at the top, let's copy this import.
And at the top, let's copy this import. So, we'll select it and copy.
So, we'll select it and copy. And we'll go to the chat input file. And
And we'll go to the chat input file. And at the top of this,
at the top of this, we're going to paste the import.
we're going to paste the import. Now that we imported the use state,
Now that we imported the use state, we're able to use it and there's no
we're able to use it and there's no longer an error. Now, eslint also tells
longer an error. Now, eslint also tells us that we're not using use ref or use
us that we're not using use ref or use effect in this file. So, we can remove
effect in this file. So, we can remove these.
these. Next, we're going to scroll down in this
Next, we're going to scroll down in this file and we'll see that the chatbot
file and we'll see that the chatbot object doesn't exist anymore in this
object doesn't exist anymore in this file. So again, we'll go back to app.jsx
file. So again, we'll go back to app.jsx and let's move this import. So we'll
and let's move this import. So we'll select it and chatbot is not used
select it and chatbot is not used anymore in this file. So this time we're
anymore in this file. So this time we're going to cut
going to cut and inside chat input at the top we're
and inside chat input at the top we're going to paste that input.
going to paste that input. And now we have access to the chatbot.
And now we have access to the chatbot. The last error here is that the chat
The last error here is that the chat input component is not being used. To
input component is not being used. To fix this, we need to review a feature of
fix this, we need to review a feature of JavaScript called modules.
JavaScript called modules. By default, any variables or functions
By default, any variables or functions that we create in a file only exist in
that we create in a file only exist in that file. So chat input only exists in
that file. So chat input only exists in this file. It cannot be used outside
this file. It cannot be used outside this file. This helps us avoid naming
this file. This helps us avoid naming conflicts because if we use the same
conflicts because if we use the same variable name in different files, it
variable name in different files, it won't cause an error. Now, if we want to
won't cause an error. Now, if we want to use this variable outside of this file,
use this variable outside of this file, we need to export it first. To do that
we need to export it first. To do that in front of this function, we can just
in front of this function, we can just type export.
type export. And now this error is gone because
And now this error is gone because ESLint assumes that we're going to use
ESLint assumes that we're going to use this component outside of this file. So
this component outside of this file. So now let's save.
now let's save. And to use chat input in another file,
And to use chat input in another file, we need to import it. So we'll open
we need to import it. So we'll open app.jsx.
And at the top, we're going to import and type curly brackets. And in here,
and type curly brackets. And in here, we'll import the chat input component.
we'll import the chat input component. And we'll import it from a string. And
And we'll import it from a string. And we're going to locate the chat input
we're going to locate the chat input file.
file. At the front, we'll type dot slash to
At the front, we'll type dot slash to start in the current folder, which is
start in the current folder, which is the source folder. And then we're going
the source folder. And then we're going to go to the components folder.
to go to the components folder. And we'll type a slash to go into this
And we'll type a slash to go into this folder. And we'll locate the file chat
folder. And we'll locate the file chat input.jsx.
By the way, when importing a JavaScript file or a JSX file, if we're using Vit,
file or a JSX file, if we're using Vit, we don't have to add.js or JSX at the
we don't have to add.js or JSX at the end. Vit will actually add this
end. Vit will actually add this automatically. So, as a shortcut, we can
automatically. So, as a shortcut, we can remove this.
remove this. Also, a common practice is to import
Also, a common practice is to import from packages at the top and then
from packages at the top and then JavaScript files and then other types of
JavaScript files and then other types of files. So now we learn how to create
files. So now we learn how to create these imports ourselves using the
these imports ourselves using the JavaScript modules feature and the word
JavaScript modules feature and the word export. And we can use chat input in
export. And we can use chat input in this file.
this file. Next, let's move the rest of these
Next, let's move the rest of these components into separate files. First,
components into separate files. First, we'll move the chat message component.
we'll move the chat message component. In the components folder, we'll click it
In the components folder, we'll click it and we'll click this icon to create a
and we'll click this icon to create a new file.
new file. And let's name it the same as the
And let's name it the same as the component. Capital C chat, capital M
component. Capital C chat, capital M message.jsx,
and press enter. And now we're going to move the code
And now we're going to move the code over. So we'll open app.jsx JSX and
over. So we'll open app.jsx JSX and we'll select this component
And then inside chat message.jsx, we're going to paste the component.
we're going to paste the component. And again, we'll scroll up and fix the
And again, we'll scroll up and fix the ESLint errors. So, first it's telling us
ESLint errors. So, first it's telling us we're not using this component in this
we're not using this component in this file. To fix this at the front, we're
file. To fix this at the front, we're going to export this component so it can
going to export this component so it can be used in other files.
be used in other files. If we scroll down, ESLint tells us that
If we scroll down, ESLint tells us that these images are missing. So, we need to
these images are missing. So, we need to move those imports into this file. We'll
move those imports into this file. We'll go back to app.jsx JSX
go back to app.jsx JSX and at the top we're going to select
and at the top we're going to select these two image imports and we're going
these two image imports and we're going to cut
and inside chat message.jsx we're going to scroll to the top
we're going to scroll to the top and paste.
and paste. Now one thing we need to be careful
Now one thing we need to be careful about is that we may need to update
about is that we may need to update these file paths. So now this file is
these file paths. So now this file is inside the components folder. That means
inside the components folder. That means dot slash is going to start at the
dot slash is going to start at the components folder. It's not going to be
components folder. It's not going to be able to find the assets folder anymore.
able to find the assets folder anymore. To fix this at the front, we're going to
To fix this at the front, we're going to use dot dot slash.
use dot dot slash. So just like in the command line, dot
So just like in the command line, dot dot represents the outer folder. This
dot represents the outer folder. This means it's going to go out of this
means it's going to go out of this components folder and into the source
components folder and into the source folder. And then it's going to look for
folder. And then it's going to look for the assets folder. It's going to find it
the assets folder. It's going to find it and it will go into the assets folder
and it will go into the assets folder and find robot.png.
and find robot.png. And we need to make the same change for
And we need to make the same change for the user image. At the front, we'll use
the user image. At the front, we'll use dot dot to go out of the components
dot dot to go out of the components folder into source. And then we can
folder into source. And then we can locate the assets folder.
locate the assets folder. And now these imports will work
And now these imports will work correctly. And we finished moving the
correctly. And we finished moving the chat message component into its own
chat message component into its own file.
file. Let's save.
Let's save. And we'll go back to app.jsx.
And we'll move the chat messages component into its own file. Inside the
component into its own file. Inside the components folder, we'll click it. We'll
components folder, we'll click it. We'll click this icon to create a new file.
click this icon to create a new file. And let's name it the same as the
And let's name it the same as the component capital C chat capital M
component capital C chat capital M messages.jsx
and press enter. We'll go back to app.jsx JSX and we'll
We'll go back to app.jsx JSX and we'll select the code for this component which
select the code for this component which is till here and we're going to cut.
And inside chat messages we're going to paste.
paste. Let's scroll to the top.
Let's scroll to the top. And this component needs use ref and use
And this component needs use ref and use effect. So let's move those imports into
effect. So let's move those imports into this file. We'll go to app.jsx.
We'll select this import at the top and copy.
and copy. And in chat messages
And in chat messages at the top,
at the top, we're going to paste that input.
we're going to paste that input. And in this component, we do not use use
And in this component, we do not use use state. So we can remove it.
state. So we can remove it. Let's scroll down. And in this
Let's scroll down. And in this component, we also use the chat message
component, we also use the chat message component. So let's import that. We'll
component. So let's import that. We'll scroll up and at the top, we'll import
scroll up and at the top, we'll import curly brackets the chat message
curly brackets the chat message component from a string
component from a string and we'll locate this file using dot
and we'll locate this file using dot slash. So it starts in the current
slash. So it starts in the current folder which is the components folder
folder which is the components folder and we'll look for the file chat message
and we'll look for the file chat message and remember we don't have to add JSX at
and remember we don't have to add JSX at the end. Vit can automatically add it.
the end. Vit can automatically add it. Finally eslint tells us this component
Finally eslint tells us this component is not used in this file. So we need to
is not used in this file. So we need to export it. However we're going to do
export it. However we're going to do something different this time.
something different this time. Instead of typing export at the front of
Instead of typing export at the front of this function, we're going to scroll
this function, we're going to scroll down to the bottom and at the end, we're
down to the bottom and at the end, we're going to type export default
going to type export default and then what we want to export, which
and then what we want to export, which is the chat messages component.
is the chat messages component. As a review, this is called a default
As a review, this is called a default export. It's useful if we want to export
export. It's useful if we want to export one thing from a file. So now let's
one thing from a file. So now let's save.
save. And to import this, we're going to go to
And to import this, we're going to go to app.jsx.
app.jsx. And at the top, we're going to import.
And at the top, we're going to import. And for a default export, we can just
And for a default export, we can just type a name without curly brackets. So
type a name without curly brackets. So we can type chat messages.
we can type chat messages. We'll import it from a string
We'll import it from a string and we'll type dot slash to start in the
and we'll type dot slash to start in the current folder. So for this file, we're
current folder. So for this file, we're in the source folder and then we're
in the source folder and then we're going to go into the components folder
going to go into the components folder components slash and locate chat
components slash and locate chat messages.
So this imports whatever the default export is from this file and names it
export is from this file and names it chat messages. This feature is called a
chat messages. This feature is called a default export. When we import and we
default export. When we import and we use curly brackets like up here, this is
use curly brackets like up here, this is called a named export.
called a named export. So some people like using default
So some people like using default exports because it encourages each file
exports because it encourages each file to focus on one thing. However, it's up
to focus on one thing. However, it's up to you which style of export you want to
to you which style of export you want to use. You'll also find that some packages
use. You'll also find that some packages use named exports while other packages
use named exports while other packages use default exports.
use default exports. So, this is just a review of JavaScript
So, this is just a review of JavaScript modules. If you want to learn about
modules. If you want to learn about modules in more detail, you can check
modules in more detail, you can check out my JavaScript full course in the
out my JavaScript full course in the video description.
video description. Next, let's fix these last few errors.
Next, let's fix these last few errors. So we're not using use ref or use effect
So we're not using use ref or use effect in this file anymore. So we can remove
in this file anymore. So we can remove these.
And finally, this app component is already in a file called app.jsx.
already in a file called app.jsx. So we can just leave it in this file.
So we can just leave it in this file. And usually we put the app component
And usually we put the app component outside of the components folder because
outside of the components folder because app represents the entire application.
app represents the entire application. It's sort of the most outer component of
It's sort of the most outer component of our application. So it makes sense to
our application. So it makes sense to put it in the outer folder.
put it in the outer folder. So now let's save this file.
So now let's save this file. And let's make sure that all these other
And let's make sure that all these other files are saved. And now we'll open our
files are saved. And now we'll open our website in the browser and try it out.
website in the browser and try it out. And it looks pretty good. Let's refresh
And it looks pretty good. Let's refresh just to be safe. And we'll give it a
just to be safe. And we'll give it a try. We'll click this text box and type
try. We'll click this text box and type the message hello and press send.
the message hello and press send. So, it's working correctly just like
So, it's working correctly just like before. So, we'll go back and now we
before. So, we'll go back and now we separated each component into its own
separated each component into its own file. And this makes our code easier to
file. And this makes our code easier to work with because each file only focuses
work with because each file only focuses on one component and each file contains
on one component and each file contains less code.
less code. The last thing we're going to do in this
The last thing we're going to do in this lesson is to separate the CSS into
lesson is to separate the CSS into different files. So, let's open app.css.
different files. So, let's open app.css. And you'll notice that in here it
And you'll notice that in here it contains CSS for multiple components.
contains CSS for multiple components. So, we're also going to separate the CSS
So, we're also going to separate the CSS so that each component has its own CSS
so that each component has its own CSS file.
file. For example, this CSS code is related to
For example, this CSS code is related to the chat input component. So, we'll go
the chat input component. So, we'll go to the components folder and click it.
to the components folder and click it. And we'll click up here to create a new
And we'll click up here to create a new file. And we're going to name it the
file. And we're going to name it the same as the component, capital C, chat,
same as the component, capital C, chat, capital I input
capital I input CSS, and press enter.
CSS, and press enter. and we'll move all the CSS related to
and we'll move all the CSS related to the chat input component in here. So in
the chat input component in here. So in app.css,
app.css, we'll select this code for the send
we'll select this code for the send button, the chat input, and the chat
button, the chat input, and the chat input container.
input container. And we'll cut
And we'll cut and chat input.css,
and chat input.css, we're going to paste that code
we're going to paste that code and save.
and save. And now to load this CSS code, we're
And now to load this CSS code, we're going to open chatinput.jsx.
And at the top, we're going to import a string
string and the CSS file we want to load, which
and the CSS file we want to load, which is this one. So we'll type dot slash to
is this one. So we'll type dot slash to start in the current folder, which is
start in the current folder, which is components, and we'll load chat
components, and we'll load chat input.css.
and save. As a review, this is a feature of Vit.
As a review, this is a feature of Vit. If we import a CSS file, it will load
If we import a CSS file, it will load all the CSS in the file and apply it to
all the CSS in the file and apply it to the website.
the website. Next, let's go back to app.css.
And these styles are for the app component. So, it actually makes sense
component. So, it actually makes sense to leave them inside the app.css file.
to leave them inside the app.css file. Below this, these styles are for the
Below this, these styles are for the chat message component. So, let's create
chat message component. So, let's create a CSS file for the chat message
a CSS file for the chat message component. We'll go into the components
component. We'll go into the components folder and click here to create a new
folder and click here to create a new file. And we'll name this chat
file. And we'll name this chat message.css
and press enter. And we'll go back to app.css CSS and
And we'll go back to app.css CSS and we're going to select the styles for the
we're going to select the styles for the chat message user, the chat message
chat message user, the chat message robot, the text, as well as the chat
robot, the text, as well as the chat message profile
message profile and cut.
And then inside chat message.css, we're going to paste the CSS code and
we're going to paste the CSS code and save.
save. And we're going to load this by going
And we're going to load this by going into chat message.jsx JSX and at the top
into chat message.jsx JSX and at the top we're going to import a string and we'll
we're going to import a string and we'll import this file using dot slash
import this file using dot slash chat message
chat message CSS and save.
CSS and save. We'll go back to app.css.
We'll go back to app.css. Finally, these styles are for the chat
Finally, these styles are for the chat messages component.
messages component. First, we'll create a CSS file for this
First, we'll create a CSS file for this component. So, we'll click this folder
component. So, we'll click this folder and click here to create a new file and
and click here to create a new file and we'll name it chat messages.css
we'll name it chat messages.css and press enter.
and press enter. And in app.css,
And in app.css, we're going to select this code and cut.
we're going to select this code and cut. And in chat messages.css, CSS. We're
And in chat messages.css, CSS. We're going to paste
and save. And we'll load this by opening chat
And we'll load this by opening chat messages.jsx.
messages.jsx. And at the top, we will import a string.
And at the top, we will import a string. And we'll locate the file dot slash chat
And we'll locate the file dot slash chat messages.css
and save. And finally, we'll go back to app.css
And finally, we'll go back to app.css and make sure that we save all of our
and make sure that we save all of our files.
files. Now, let's open our website in the
Now, let's open our website in the browser.
browser. And everything should look and work
And everything should look and work correctly.
correctly. Let's go back to our code.
Let's go back to our code. And that's it. We split up our
And that's it. We split up our JavaScript and our CSS code into
JavaScript and our CSS code into separate files. And now each component
separate files. And now each component has its own JavaScript file and its own
has its own JavaScript file and its own CSS file. This makes our code a lot
CSS file. This makes our code a lot easier to work with because each file is
easier to work with because each file is focused on only one component and each
focused on only one component and each file contains less code.
file contains less code. In the next lesson, we'll use this new
In the next lesson, we'll use this new React setup to work on a bigger React
React setup to work on a bigger React project, which is an ecommerce website
project, which is an ecommerce website that has multiple pages and more
that has multiple pages and more advanced features. And that's the end of
advanced features. And that's the end of this lesson. In this lesson, we created
this lesson. In this lesson, we created a proper React setup using the command
a proper React setup using the command line, npm, and vit. We reviewed the
line, npm, and vit. We reviewed the command line, which lets us give
command line, which lets us give commands to our computer. We reviewed
commands to our computer. We reviewed npm which helps us download and use
npm which helps us download and use external libraries or packages. We
external libraries or packages. We learned the create vit package which
learned the create vit package which helps us create a proper React setup. We
helps us create a proper React setup. We moved our chatbot project into the new
moved our chatbot project into the new React setup. We learned how to use
React setup. We learned how to use eslint which highlights problems in our
eslint which highlights problems in our JavaScript code. We reviewed JavaScript
JavaScript code. We reviewed JavaScript modules which lets us separate our code
modules which lets us separate our code into different files. And we separated
into different files. And we separated each component in the chatbot project
each component in the chatbot project into its own JavaScript and CSS files.
into its own JavaScript and CSS files. Thanks for watching so far. If you find
Thanks for watching so far. If you find this course valuable, you can support
this course valuable, you can support the channel by liking this video,
the channel by liking this video, leaving a comment, and subscribing.
leaving a comment, and subscribing. You can also check out the premium
You can also check out the premium version of this course where you'll get
version of this course where you'll get all the lessons ads free broken down
all the lessons ads free broken down into small videos as well as additional
into small videos as well as additional lessons and more projects that are not
lessons and more projects that are not in the public react course. Currently,
in the public react course. Currently, the premium course contains 11 lessons
the premium course contains 11 lessons and I'll be adding more lessons in the
and I'll be adding more lessons in the future. You can also get a certificate
future. You can also get a certificate of completion, create comments or
of completion, create comments or questions on specific topics, get
questions on specific topics, get progress tracking, search and course
progress tracking, search and course notes. You can also check out the
notes. You can also check out the membership where you can get this course
membership where you can get this course ads free separated by each lesson, AI
ads free separated by each lesson, AI videos, backend tutorials, and more.
videos, backend tutorials, and more. Thanks again, and let's continue with
Thanks again, and let's continue with the course. Here are some exercises to
the course. Here are some exercises to help you practice what we learned in
help you practice what we learned in this lesson.
In this lesson, we're going to start a bigger project using React and we'll
bigger project using React and we'll learn an important feature called
learn an important feature called routing.
routing. By the way, if something in this lesson
By the way, if something in this lesson does not work for you, you can check the
does not work for you, you can check the troubleshooting guide in the
troubleshooting guide in the description.
description. First, let's take a look at the project
First, let's take a look at the project we're going to build. In our browser,
we're going to build. In our browser, we're going to create a new tab.
we're going to create a new tab. And at the top, we're going to go to
And at the top, we're going to go to supersimple.dev/proscommerce.
This is an e-commerce project or an online shopping project. We can add
online shopping project. We can add products to our cart.
products to our cart. And then we can click here to view our
And then we can click here to view our cart.
And this page will display all the products in our cart. It will calculate
products in our cart. It will calculate the total for our order. and it will
the total for our order. and it will also calculate a delivery date. And then
also calculate a delivery date. And then we can create an order.
we can create an order. And this page will list all of the
And this page will list all of the orders that we created. We can also
orders that we created. We can also click this button to track the order. So
click this button to track the order. So depending on the delivery date, it will
depending on the delivery date, it will show you the progress of the delivery.
show you the progress of the delivery. And we'll click here to go back to the
And we'll click here to go back to the orders page.
orders page. So notice that this project has multiple
So notice that this project has multiple pages. So, it's much bigger than the
pages. So, it's much bigger than the chatbot project. And we're working with
chatbot project. And we're working with more data than before. So, we have
more data than before. So, we have products, we have a cart, and we have
products, we have a cart, and we have orders.
orders. By the way, if you ever need to reset
By the way, if you ever need to reset the cart or the orders, you can click
the cart or the orders, you can click this reset button here in the bottom
this reset button here in the bottom right, and it will reset everything back
right, and it will reset everything back to the default data. So, let's click the
to the default data. So, let's click the top left to go back to the main page.
top left to go back to the main page. And now that we introduced the project,
And now that we introduced the project, we're going to build this with React.
we're going to build this with React. We'll go back to VS Code
We'll go back to VS Code and we'll collapse the chatbot project
and we'll collapse the chatbot project folder.
folder. And before we create a new React
And before we create a new React project, let's group these older files
project, let's group these older files into a folder. We'll click this HTML
into a folder. We'll click this HTML file and we'll create a folder. And
file and we'll create a folder. And let's name it React-basics.
and we're going to move all these files into this folder. Now, a shortcut here
into this folder. Now, a shortcut here is to click this file and then press
is to click this file and then press shift on your keyboard and click the
shift on your keyboard and click the bottom file and it will select all the
bottom file and it will select all the files between those two and we can drag
files between those two and we can drag this into the folder
and we'll collapse it. So, that just helps us stay a little more organized.
helps us stay a little more organized. Next, we're going to set up a new React
Next, we're going to set up a new React project using VIT. To do that, we're
project using VIT. To do that, we're going to go to our terminal.
going to go to our terminal. If you have the VIT server running, you
If you have the VIT server running, you can close it by pressing Ctrl + C on
can close it by pressing Ctrl + C on Windows or control C on Mac.
Windows or control C on Mac. So, if you're continuing from the
So, if you're continuing from the previous lesson, the terminal should be
previous lesson, the terminal should be running inside the chatbot project
running inside the chatbot project folder. To confirm that, we can run
folder. To confirm that, we can run print working directory or pwd.
print working directory or pwd. And it will tell us that we're inside
And it will tell us that we're inside the chatbot project folder. Now, to set
the chatbot project folder. Now, to set up a new React project, we want to be
up a new React project, we want to be inside the React-Course folder. So, to
inside the React-Course folder. So, to get out of the chatbot project folder,
get out of the chatbot project folder, we can run the command cd dot dot.
we can run the command cd dot dot. And if we press pwd,
And if we press pwd, we should be inside the react-course
we should be inside the react-course folder. Another way to do this is to
folder. Another way to do this is to just start a new terminal.
Now we'll use vit again to set up a new react project.
react project. In the command line, we'll run the
In the command line, we'll run the command npx
command npx create-ash
create-ash vit and we'll type at and give it a
vit and we'll type at and give it a version. So, you can find the version in
version. So, you can find the version in the description by clicking this link
the description by clicking this link and going to lesson six and you'll find
and going to lesson six and you'll find the version of vit that we're going to
the version of vit that we're going to use as well as the full command.
use as well as the full command. By the way, the version that you see in
By the way, the version that you see in this video might be different than the
this video might be different than the version you see on your page. You should
version you see on your page. You should always use the version that you see on
always use the version that you see on your page. I did this because it's hard
your page. I did this because it's hard to update the video. So, this lets me
to update the video. So, this lets me easily update the version in the future.
easily update the version in the future. So, select the version on your page.
So, select the version on your page. Copy.
Copy. So, I'm going to paste the version here
So, I'm going to paste the version here and press enter.
For the project name, let's name it ecommerce-
ecommerce- project. Press enter.
project. Press enter. And from this list, we'll press the down
And from this list, we'll press the down arrow and select React.
arrow and select React. And from this list, we'll press down and
And from this list, we'll press down and select JavaScript.
select JavaScript. And it will set up a new React project
And it will set up a new React project inside our React-Course folder, which we
inside our React-Course folder, which we see right here. And now we need to go
see right here. And now we need to go into this folder using the command cd
into this folder using the command cd ecommerce-
ecommerce- project.
project. And we're going to run npm install to
And we're going to run npm install to install all of the packages inside
install all of the packages inside package.json.
package.json. So we'll run npm install.
Once we have everything installed, we can run this project using the command
can run this project using the command npm rundev.
And now we can open this project using this URL in the browser. So we'll select
this URL in the browser. So we'll select this URL and copy.
this URL and copy. And in the browser,
And in the browser, we're going to create a new tab.
we're going to create a new tab. And then here we'll paste.
And now we have a new React project. Before we start updating the code, we're
Before we start updating the code, we're actually going to review a tool called
actually going to review a tool called Git. Git helps us track changes in our
Git. Git helps us track changes in our code, and it's useful in bigger projects
code, and it's useful in bigger projects because we're going to be making lots of
because we're going to be making lots of changes, and it's easy to forget what we
changes, and it's easy to forget what we changed. So, Git will help us track our
changed. So, Git will help us track our changes.
changes. We're going to go to our code
We're going to go to our code and we're going to open the Git section
and we're going to open the Git section here.
here. If you already have Git installed, it
If you already have Git installed, it should say initialize repository. If you
should say initialize repository. If you do not have Git installed, you can click
do not have Git installed, you can click this link in the description, go to
this link in the description, go to lesson six, and follow these
lesson six, and follow these instructions to install Git.
instructions to install Git. Once you have git installed, we'll click
Once you have git installed, we'll click initialize repository.
initialize repository. Now, a repository is just a folder where
Now, a repository is just a folder where git is tracking changes. At first, git
git is tracking changes. At first, git will tell us that all of these files or
will tell us that all of these files or everything inside our react-ourse folder
everything inside our react-ourse folder is new. And that's because a repository
is new. And that's because a repository starts out as empty. So, git considers
starts out as empty. So, git considers all of these files as new files.
all of these files as new files. We'll go back to the git section
We'll go back to the git section and we'll scroll up and we're going to
and we'll scroll up and we're going to save all of these files into git. At the
save all of these files into git. At the top, we'll type a message to describe
top, we'll type a message to describe our changes. So, let's type the message
our changes. So, let's type the message add the starting files and press commit.
add the starting files and press commit. Commit means we're going to save these
Commit means we're going to save these changes into git.
changes into git. Now, you might run into an error when
Now, you might run into an error when using git and it tells you you have to
using git and it tells you you have to configure your username and email. To do
configure your username and email. To do that, you can run these two commands in
that, you can run these two commands in the command line and choose your
the command line and choose your username and choose the email you want
username and choose the email you want to use and try to commit again. And now
to use and try to commit again. And now it should work.
it should work. If it asks to confirm, you can press
If it asks to confirm, you can press yes.
And now git will start tracking any new changes that we make. For example, if we
changes that we make. For example, if we go into our code and open the e-commerce
go into our code and open the e-commerce project and change some of these files,
project and change some of these files, we type test and save.
we type test and save. And in the source app.jsx, we type test
And in the source app.jsx, we type test and save.
and save. And then we can go to the git section.
And then we can go to the git section. And now git will tell us everything that
And now git will tell us everything that we changed in these two files. So as you
we changed in these two files. So as you can see git helps us track changes in
can see git helps us track changes in our code.
our code. Also git lets us undo our changes. So to
Also git lets us undo our changes. So to undo this change we can click this arrow
undo this change we can click this arrow button here.
button here. And to undo all of our changes at the
And to undo all of our changes at the top we can click this arrow button here.
So, that's a review of how Git works. It can track our changes and it lets us
can track our changes and it lets us easily undo our changes. Let's go back
easily undo our changes. Let's go back to our files
to our files and remember that in our React setup, we
and remember that in our React setup, we have a file called.git
have a file called.git ignore. So, now we can learn what this
ignore. So, now we can learn what this file does.
file does. Git ignore tells git which files and
Git ignore tells git which files and folders to ignore or not to track
folders to ignore or not to track changes. For example, in this file we
changes. For example, in this file we can see the folder node modules. So this
can see the folder node modules. So this tells git that if there are any changes
tells git that if there are any changes inside node modules it will not be
inside node modules it will not be tracked. The reason we ignore node
tracked. The reason we ignore node modules is because this folder is very
modules is because this folder is very large and none of the changes inside
large and none of the changes inside this folder are changes that we make.
this folder are changes that we make. Instead, we generate this folder using a
Instead, we generate this folder using a package.json and npm install. So,
package.json and npm install. So, because this folder is generated, it
because this folder is generated, it doesn't make a lot of sense to save this
doesn't make a lot of sense to save this in git. So, that's a review of Git. Git
in git. So, that's a review of Git. Git helps us track changes in our code and
helps us track changes in our code and doggit ignore tells Git which files and
doggit ignore tells Git which files and folders to ignore or to not track
folders to ignore or to not track changes.
changes. Now we're ready to start the project.
Now we're ready to start the project. First, we're actually going to download
First, we're actually going to download the HTML and CSS for this project. We'll
the HTML and CSS for this project. We'll click this link in the description and
click this link in the description and then click here.
then click here. And this will open GitHub.
And this will open GitHub. And this contains all the HTML and CSS
And this contains all the HTML and CSS for the e-commerce project. The reason
for the e-commerce project. The reason we're going to use some starting code is
we're going to use some starting code is because this course is focused on React.
because this course is focused on React. By using this code, we can focus on
By using this code, we can focus on learning React features rather than
learning React features rather than spending our time writing HTML and CSS.
spending our time writing HTML and CSS. If you want to practice HTML and CSS,
If you want to practice HTML and CSS, you can try to recreate the design on
you can try to recreate the design on your own after this course.
your own after this course. Another reason we're using some starting
Another reason we're using some starting code is in the real world, we often work
code is in the real world, we often work on an existing project rather than a new
on an existing project rather than a new project. So this will give us some
project. So this will give us some practice working on an existing project.
practice working on an existing project. So to download the starting code, we're
So to download the starting code, we're going to click this code button here and
going to click this code button here and we'll click download zip
and we'll open our downloads folder. For me, it's here. And we're going to
For me, it's here. And we're going to unzip this file. On Windows, we're going
unzip this file. On Windows, we're going to rightclick and click extract all
to rightclick and click extract all and extract.
and extract. And on Mac, you can just doubleclick the
And on Mac, you can just doubleclick the zip file.
And then we're going to open this folder.
folder. And we're going to move all of these
And we're going to move all of these files and folders into VS Code. First,
files and folders into VS Code. First, let's go into VS Code.
let's go into VS Code. And we're going to organize all of those
And we're going to organize all of those files into a new folder. So, we'll click
files into a new folder. So, we'll click the e-commerce project and create a new
the e-commerce project and create a new folder.
folder. And we'll name this starting dashcode.
And we'll open our downloads folder again.
again. And we're going to move all of these
And we're going to move all of these files into this new folder. So we'll
files into this new folder. So we'll select it. And we're just going to drag
select it. And we're just going to drag it into starting code.
And let's save these changes into Git. So then Git will start tracking any new
So then Git will start tracking any new changes that we make.
changes that we make. We'll open the git section and here we
We'll open the git section and here we added all of the starting code and at
added all of the starting code and at the top let's type the message add the
the top let's type the message add the starting
starting HTML and CSS code and commit.
Let's go back to our files and we're going to go to the starting
and we're going to go to the starting code and look for index.html
code and look for index.html and we're going to rightclick this file
and we're going to rightclick this file and we're going to open with live
and we're going to open with live server.
server. And you'll see we have all the HTML and
And you'll see we have all the HTML and CSS for this project. So now we're going
CSS for this project. So now we're going to create this using React. We'll start
to create this using React. We'll start by creating this main page. We usually
by creating this main page. We usually call this the homepage.
call this the homepage. By the way, a page or a web page is a
By the way, a page or a web page is a single page like the homepage or the
single page like the homepage or the cart page. A website is a group of web
cart page. A website is a group of web pages.
pages. To create this homepage, we're going to
To create this homepage, we're going to move all of the HTML and CSS into React.
move all of the HTML and CSS into React. We'll go back to VS Code
We'll go back to VS Code and we'll open the starting code
and we'll open the starting code index.html.
And this file contains the HTML for the homepage. And we're going to move this
homepage. And we're going to move this HTML into the index.html
HTML into the index.html here for the e-commerce project. So,
here for the e-commerce project. So, let's actually drag this index.html HTML
let's actually drag this index.html HTML and we'll open it at the bottom
and we'll open it at the bottom so we can see these files side by side
so we can see these files side by side and we'll move the HTML in the starting
and we'll move the HTML in the starting code into our project one by one.
code into our project one by one. We already have the doc type HTML inside
We already have the doc type HTML inside here. So we don't need to move it. And
here. So we don't need to move it. And we also have the HTML and head elements.
we also have the HTML and head elements. The first thing that we do need to move
The first thing that we do need to move is this title. So we'll select this
is this title. So we'll select this title and then cut.
title and then cut. And inside the projects HTML file, let's
And inside the projects HTML file, let's replace the title here.
replace the title here. And now we'll keep going one by one.
And now we'll keep going one by one. Next, this meta viewport element makes
Next, this meta viewport element makes the website look good on smaller
the website look good on smaller screens. Now, we already have this
screens. Now, we already have this inside our React setup, so we do not
inside our React setup, so we do not need to move it over. Let's actually
need to move it over. Let's actually select this code and delete it so that
select this code and delete it so that we can keep track of our progress.
we can keep track of our progress. Next, this code loads a font or a style
Next, this code loads a font or a style of text called rooto.
of text called rooto. We're going to use this font in the
We're going to use this font in the e-commerce project. So, we're going to
e-commerce project. So, we're going to move it over. Let's select this code
move it over. Let's select this code and cut.
and cut. And inside our e-commerce project, we're
And inside our e-commerce project, we're going to paste.
going to paste. And if you need to, you can fix this
And if you need to, you can fix this spacing by selecting these lines and
spacing by selecting these lines and press shift tab a few times.
press shift tab a few times. Next, these lines of code load the CSS
Next, these lines of code load the CSS for our project. Now, remember, when
for our project. Now, remember, when using VIT, we actually import our CSS
using VIT, we actually import our CSS files.
files. So, we're not going to move these over
So, we're not going to move these over for now, but we'll keep these for later.
for now, but we'll keep these for later. Finally, if we scroll down, the HTML
Finally, if we scroll down, the HTML inside the body creates the contents of
inside the body creates the contents of the page. Now, the contents of the page
the page. Now, the contents of the page should be created by React.
should be created by React. So, let's move this into a React
So, let's move this into a React component.
component. First, we'll create a component for the
First, we'll create a component for the homepage. So, we'll scroll up to the
homepage. So, we'll scroll up to the source folder and we'll click this
source folder and we'll click this folder and we'll create a new file.
folder and we'll create a new file. Usually, we create a component for each
Usually, we create a component for each page of the website. So, let's name this
page of the website. So, let's name this file capital H home capital Page.jsx.
Now, this website has multiple pages. So, let's create a folder to group all
So, let's create a folder to group all the pages together. We'll create a
the pages together. We'll create a folder and we'll name it pages.
folder and we'll name it pages. And we're going to move the homepage
And we're going to move the homepage into the pages folder.
And now let's create a component for the homepage using function. and we'll name
homepage using function. and we'll name it capital H home capital P page
it capital H home capital P page brackets and curly brackets and we're
brackets and curly brackets and we're going to return brackets
going to return brackets we're going to return the HTML for the
we're going to return the HTML for the homepage which is right here. So we're
homepage which is right here. So we're going to copy all of this HTML into our
going to copy all of this HTML into our new component. So, one trick we can do
new component. So, one trick we can do is on the left, we're going to click
is on the left, we're going to click this arrow to collapse this element. And
this arrow to collapse this element. And we're going to click this arrow to
we're going to click this arrow to collapse this element as well. And now
collapse this element as well. And now we can select all of this HTML code
we can select all of this HTML code and cut.
and cut. And inside homepage.jsx,
And inside homepage.jsx, we're going to paste that code.
we're going to paste that code. And now we're going to scroll up and fix
And now we're going to scroll up and fix all of these errors.
all of these errors. First, if we collapse this code
First, if we collapse this code and collapse this element,
and collapse this element, you can see we're returning two elements
you can see we're returning two elements from this component.
from this component. But remember, we can only return one
But remember, we can only return one element from a component. To fix this,
element from a component. To fix this, we can wrap this in a fragment. So, at
we can wrap this in a fragment. So, at the top, we'll create a fragment using
the top, we'll create a fragment using less than, greater than, and delete this
less than, greater than, and delete this closing tag. And at the bottom, we'll
closing tag. And at the bottom, we'll create the closing tag less than
create the closing tag less than slashgreater than. And let's also fix
slashgreater than. And let's also fix the indenting here. We can select all of
the indenting here. We can select all of this code and press tab a few times
this code and press tab a few times until there's an indent before the
until there's an indent before the fragment. And for the first line, we're
fragment. And for the first line, we're going to remove an indent. And that will
going to remove an indent. And that will fix the indenting.
fix the indenting. Next, we'll fix these errors. We'll
Next, we'll fix these errors. We'll expand these elements.
expand these elements. And remember in React, we have to use
And remember in React, we have to use class name instead of class. So to fix
class name instead of class. So to fix these errors, we need to change all of
these errors, we need to change all of these to use class name. To do that, we
these to use class name. To do that, we can press CtrlF on Windows or command F
can press CtrlF on Windows or command F on Mac to find some code. And we're
on Mac to find some code. And we're going to search for the code class
going to search for the code class equals. And then we're going to click
equals. And then we're going to click this arrow on the left. And this will
this arrow on the left. And this will open the replace menu. So this lets us
open the replace menu. So this lets us replace class equals with something
replace class equals with something else. We'll replace it with class
else. We'll replace it with class capital N name equals and then press
capital N name equals and then press this button to replace all.
this button to replace all. And now you'll see that we fixed all of
And now you'll see that we fixed all of the ESLint errors. Finally, we're going
the ESLint errors. Finally, we're going to scroll to the top and we need to
to scroll to the top and we need to export this component so we can use it
export this component so we can use it in other files. At the front, we'll type
in other files. At the front, we'll type export and save.
export and save. So, we moved all the HTML from the
So, we moved all the HTML from the homepage into our component and we fixed
homepage into our component and we fixed all these errors. Now, let's use this
all these errors. Now, let's use this component in our app. We're going to go
component in our app. We're going to go to app.jsx JSX
to app.jsx JSX and we'll remove this default HTML.
and we'll remove this default HTML. So we'll select it
So we'll select it and delete it
and delete it and we'll insert our homepage component.
and we'll insert our homepage component. First we need to import it.
First we need to import it. at the top. We'll import curly brackets
at the top. We'll import curly brackets the home page
the home page from a string and we'll locate this
from a string and we'll locate this file. So, we're going to type dot slash
file. So, we're going to type dot slash to start in the current folder which is
to start in the current folder which is the source folder and we'll go into
the source folder and we'll go into pages
pages slashhome
slashhome page.
page. And now we'll insert the homepage into
And now we'll insert the homepage into our app. So here we'll type less than
our app. So here we'll type less than homepage
homepage slashgreater than. And next we'll fix
slashgreater than. And next we'll fix these eslint errors. The react logo and
these eslint errors. The react logo and vit logo are not used anymore. So we can
vit logo are not used anymore. So we can remove them.
remove them. Count and set count are also not used
Count and set count are also not used anymore. So we can remove them.
anymore. So we can remove them. and use state is not used anymore. We
and use state is not used anymore. We can remove this as well
can remove this as well and save.
and save. And now let's make sure that we saved
And now let's make sure that we saved all of our other files. So we'll open
all of our other files. So we'll open index.html
index.html and we'll save it.
and we'll save it. And let's open the starting code
And let's open the starting code index.html
index.html and we'll save this file.
and we'll save this file. And now let's take a look at our
And now let's take a look at our website. We'll open the browser.
And we can close GitHub for now. And we'll open the e-commerce project.
we'll open the e-commerce project. And you'll see that we have the HTML and
And you'll see that we have the HTML and the text for the e-commerce project
the text for the e-commerce project homepage.
homepage. Now, obviously, this doesn't look very
Now, obviously, this doesn't look very good. So, let's move over the CSS. Next,
good. So, let's move over the CSS. Next, to move the CSS into our React project,
to move the CSS into our React project, we're going to go back to our code
we're going to go back to our code and we're going to open the starting
and we're going to open the starting code index.html.
code index.html. And here we're going to scroll up and we
And here we're going to scroll up and we load three CSS files. So, we're going to
load three CSS files. So, we're going to move these three files into our React
move these three files into our React project. We'll start with general.css.
project. We'll start with general.css. If we open styles/shared
If we open styles/shared which is here and shared and open
which is here and shared and open general.css
and this file contains CSS for the overall website. CSS for the overall
overall website. CSS for the overall website goes into the index.css file in
website goes into the index.css file in React.
React. So we'll click general.css CSS and we'll
So we'll click general.css CSS and we'll press control A on Windows or command A
press control A on Windows or command A on Mac to select all of this code and
on Mac to select all of this code and we'll copy
we'll copy and index.css in the e-commerce project
and index.css in the e-commerce project we're going to remove all of this
we're going to remove all of this default code
default code and paste
and paste and save.
and save. And now if we go back to the starting
And now if we go back to the starting code, we've moved over general.css and
code, we've moved over general.css and we can delete this file.
we can delete this file. And now we'll go back to the starting
And now we'll go back to the starting code index.html.
And we can remove this line. And we'll move header.css and index.css
And we'll move header.css and index.css into our React project. So both of these
into our React project. So both of these style the homepage. So, we'll just move
style the homepage. So, we'll just move these files beside our homepage
these files beside our homepage component.
component. First, we'll go into styles, shared, and
First, we'll go into styles, shared, and header.css,
header.css, and we're going to drag this file
and we're going to drag this file into our pages folder.
So, we keep our CSS beside the component that it styles.
that it styles. And we'll scroll down and find
And we'll scroll down and find styles/pages.
styles/pages. And we'll move index.css CSS beside the
And we'll move index.css CSS beside the homepage as well.
So header.css styles the header at the top of the page and index.css
top of the page and index.css styles the main part of the homepage.
styles the main part of the homepage. Now a best practice is to use the same
Now a best practice is to use the same name as the component here. So we'll
name as the component here. So we'll rightclick index.css CSS and we'll
rightclick index.css CSS and we'll rename it
rename it capital H home capital P page.
Next, to load these styles, we need to import them. We'll open homepage.jsx
import them. We'll open homepage.jsx and at the top,
and at the top, we're going to import
we're going to import a string and we'll import the file dot /
a string and we'll import the file dot / header.css. CSS
header.css. CSS and we'll also import a string
and we'll also import a string slashhome
slashhome page.css
and save. And now if we go back to the starting
And now if we go back to the starting code index.html,
code index.html, we moved all of the HTML and CSS into
we moved all of the HTML and CSS into our project. So now we can delete this
our project. So now we can delete this file.
Finally, we'll open app.css. And these styles were for the default
And these styles were for the default React website. So we don't need these
React website. So we don't need these anymore. So we can select all of the CSS
anymore. So we can select all of the CSS and just remove it and save.
and just remove it and save. So make sure that we saved all of our
So make sure that we saved all of our files. And now we're going to view the
files. And now we're going to view the website.
website. And now it's looking really good. We
And now it's looking really good. We have the structure and the styling that
have the structure and the styling that we need. The only thing that's missing
we need. The only thing that's missing are the images. So let's move the images
are the images. So let's move the images next.
next. To move the images, we'll go back to VS
To move the images, we'll go back to VS Code and we'll go to the starting code
Code and we'll go to the starting code and find the images folder. So this
and find the images folder. So this contains all the images that we need.
contains all the images that we need. So, we're going to move this into the
So, we're going to move this into the React project.
React project. Now, usually we put images in the assets
Now, usually we put images in the assets folder and then we import the images.
folder and then we import the images. However, to save time, we're going to
However, to save time, we're going to move this folder into the public folder.
move this folder into the public folder. So, we're going to move it up here and
So, we're going to move it up here and into the public folder.
The reason we move it into the public folder is because if we look at
folder is because if we look at homepage.js, jsx and we look at an
homepage.js, jsx and we look at an image. Notice the source attribute
image. Notice the source attribute starts with images slash. When using
starts with images slash. When using vit, if we start with a folder name like
vit, if we start with a folder name like this, vit will look for this inside the
this, vit will look for this inside the public folder. So, it finds it here. So,
public folder. So, it finds it here. So, by moving our images into the public
by moving our images into the public folder, we don't have to change any of
folder, we don't have to change any of this code and it just saves time in the
this code and it just saves time in the video. We can move these images into the
video. We can move these images into the source/assets folder and import them
source/assets folder and import them later as an exercise.
later as an exercise. So now let's open our website
So now let's open our website and all of the images are loaded. So
and all of the images are loaded. So that's how we move an HTML website into
that's how we move an HTML website into a React website. We just move over the
a React website. We just move over the HTML, CSS, and images one by one.
HTML, CSS, and images one by one. Let's go back to VS Code and we'll save
Let's go back to VS Code and we'll save our changes into Git. We'll open the Git
our changes into Git. We'll open the Git section. And here we moved all the HTML,
section. And here we moved all the HTML, CSS, and images for the homepage. We're
CSS, and images for the homepage. We're going to type a message at the top. Move
going to type a message at the top. Move the home page into React and press
the home page into React and press commit.
Next, we're going to move the checkout page to the React setup. We'll go to our
page to the React setup. We'll go to our browser
browser and we're going to open the final
and we're going to open the final project at superimple.dev
project at superimple.dev and we're going to click the cart icon
and we're going to click the cart icon in the top right.
in the top right. This will open the checkout page where
This will open the checkout page where we can see our cart and we can place an
we can see our cart and we can place an order. So notice that this is a separate
order. So notice that this is a separate page from the homepage and this page is
page from the homepage and this page is also on a different URL/checkout.
So how do we create multiple pages in React? To do that, we're going to learn
React? To do that, we're going to learn a feature called routing. Routing lets
a feature called routing. Routing lets us create multiple pages in React.
us create multiple pages in React. Let's go back to our code
Let's go back to our code and we'll open our files here.
and we'll open our files here. and we're going to scroll down first to
and we're going to scroll down first to the starting code folder.
the starting code folder. So, normally to create multiple pages,
So, normally to create multiple pages, we need to create multiple HTML files
we need to create multiple HTML files like here. Each page has its own HTML
like here. Each page has its own HTML file like the checkout page and the
file like the checkout page and the orders page. However, inside these
orders page. However, inside these files, notice that there's a lot of
files, notice that there's a lot of repeated code. So, each file has the doc
repeated code. So, each file has the doc type. it has some meta and link elements
type. it has some meta and link elements and in the orders.html
and in the orders.html it has the same meta and link elements.
it has the same meta and link elements. So this is not great because if we want
So this is not great because if we want to change something on one page we have
to change something on one page we have to change all of the pages. On the other
to change all of the pages. On the other hand, routing lets us create multiple
hand, routing lets us create multiple pages using one HTML file, and this lets
pages using one HTML file, and this lets us reuse our HTML code. To use routing,
us reuse our HTML code. To use routing, we're going to install an MPM package
we're going to install an MPM package called React Router. So, let's reopen
called React Router. So, let's reopen our terminal. You can click here and
our terminal. You can click here and drag up or press control J on Windows or
drag up or press control J on Windows or command J on Mac to open this terminal.
Now we currently have the Vit server running. So we'll press control C on
running. So we'll press control C on Windows and Mac to stop the V server.
Windows and Mac to stop the V server. And to install React Router, we're going
And to install React Router, we're going to run the command npm install
to run the command npm install react-rowout.
react-rowout. And we'll also type at. So for this
And we'll also type at. So for this video, we'll use a specific version of
video, we'll use a specific version of React Router just to make sure that it
React Router just to make sure that it works with the video. So click this link
works with the video. So click this link in the description, go to lesson six,
in the description, go to lesson six, and here you'll find the version of
and here you'll find the version of React Router that we'll use, and you'll
React Router that we'll use, and you'll also find the full command. So again,
also find the full command. So again, you should always use the version that
you should always use the version that you see on your page.
you see on your page. So select the version on your page and
So select the version on your page and copy it. And then in our command line,
copy it. And then in our command line, we're going to paste that version
we're going to paste that version and press enter to install.
and press enter to install. So now, how do we use React Router? Like
So now, how do we use React Router? Like most packages, React Router has a
most packages, React Router has a documentation page that tells you how to
documentation page that tells you how to use it. You can find the documentation
use it. You can find the documentation in the description, but for the video,
in the description, but for the video, I'm going to show you the parts of the
I'm going to show you the parts of the documentation that we need. According to
documentation that we need. According to the documentation, to use React Router,
the documentation, to use React Router, we need to load it when we render the
we need to load it when we render the app component.
app component. So, in our project, we're going to
So, in our project, we're going to scroll up and open main.jsx,
and I'll close these other files so we can see more of the code.
can see more of the code. So, in this file, we set up React. We
So, in this file, we set up React. We render our app component on the page.
render our app component on the page. According to the documentation, we need
According to the documentation, we need to wrap this in a component called
to wrap this in a component called browser router.
browser router. So at the top first we're going to
So at the top first we're going to import curly brackets
import curly brackets the browser
the browser router
router from a string
from a string and we'll import it from the package
and we'll import it from the package react router.
react router. As a review, if we just start with a
As a review, if we just start with a name like this without dot slash, this
name like this without dot slash, this means it's going to load it from node
means it's going to load it from node modules from the React router package.
modules from the React router package. And now around the app, we're going to
And now around the app, we're going to create less than browser
create less than browser router greater than.
router greater than. And we're going to put the app inside
And we're going to put the app inside here. So we'll cut this
here. So we'll cut this and paste it in here.
and paste it in here. Let's save.
Let's save. Next, we need to do a bit more setup.
Next, we need to do a bit more setup. According to the documentation, inside
According to the documentation, inside our app component, we need to add a
our app component, we need to add a component called routes.
component called routes. So, let's open app.jsx.
So, let's open app.jsx. And at the top,
And at the top, we're going to import curly brackets
we're going to import curly brackets the component routes
the component routes from a string. And we'll import this
from a string. And we'll import this from the package react-outer.
And inside this component, we're going to insert the routes component using
to insert the routes component using less than routes greater than.
less than routes greater than. So the routes component tells React all
So the routes component tells React all the pages that are in our website. So to
the pages that are in our website. So to add a page to our website, we're going
add a page to our website, we're going to use another component called route. A
to use another component called route. A route is basically a page.
route is basically a page. So first we need to import that at the
So first we need to import that at the top. We're already importing from React
top. We're already importing from React Router. So we're going to add a comma
Router. So we're going to add a comma and import the route component.
and import the route component. So inside routes, we're going to add
So inside routes, we're going to add less than route greater than. So again,
less than route greater than. So again, a route basically adds a page to our
a route basically adds a page to our website.
website. And we're going to give this route two
And we're going to give this route two props. The first prop is called path
props. The first prop is called path equals double quotes. This tells React
equals double quotes. This tells React the URL path of this page.
the URL path of this page. The URL path is the last part of the URL
The URL path is the last part of the URL like /checkout or slash orders. So first
like /checkout or slash orders. So first let's add the homepage. For the
let's add the homepage. For the homepage, the URL path is empty.
homepage, the URL path is empty. To set the URL path as empty, we're
To set the URL path as empty, we're going to set it to slash.
going to set it to slash. And then we're going to give route a
And then we're going to give route a second prop called element equals curly
second prop called element equals curly brackets. So this tells React which
brackets. So this tells React which element or component to display when we
element or component to display when we go to this URL path for the homepage. We
go to this URL path for the homepage. We want to display this homepage component.
want to display this homepage component. So let's select it and cut.
So let's select it and cut. And inside here we're going to paste.
And inside here we're going to paste. So this tells React that when we go to
So this tells React that when we go to the URL path slash or empty, it's going
the URL path slash or empty, it's going to display our homepage. So let's try it
to display our homepage. So let's try it out. We'll save this file
out. We'll save this file and then inside the terminal, we're
and then inside the terminal, we're going to start the VIT server using npm
going to start the VIT server using npm rundev.
And we'll visit this URL. I already have it open. So I'll open my
I already have it open. So I'll open my browser.
browser. And now if the URL path ends with slash
And now if the URL path ends with slash or empty, it's going to display the
or empty, it's going to display the homepage.
homepage. Next, let's use React Router to add a
Next, let's use React Router to add a checkout page. We'll go back to our code
checkout page. We'll go back to our code and to add another page to our website,
and to add another page to our website, we're going to use the route component
we're going to use the route component again. So, we'll create less than route
again. So, we'll create less than route greater than and we'll give it two
greater than and we'll give it two props. the path equals double quotes.
props. the path equals double quotes. And for the checkout page, we'll set the
And for the checkout page, we'll set the URL path to checkout.
URL path to checkout. This means this page will be displayed
This means this page will be displayed when we go to /checkout.
when we go to /checkout. And we'll give it another prop element
And we'll give it another prop element equals curly brackets.
equals curly brackets. And right now, we didn't create a
And right now, we didn't create a component for the checkout page yet. So
component for the checkout page yet. So let's just create a div here just to
let's just create a div here just to make sure that this is working. So we'll
make sure that this is working. So we'll create a div element and inside let's
create a div element and inside let's type test checkout page and save.
type test checkout page and save. So now if we go to our project
So now if we go to our project and in the URL path we're going to go to
and in the URL path we're going to go to slash checkout
slash checkout and press enter.
and press enter. It displays the div with the text that
It displays the div with the text that we created.
we created. So, as you can see, routing is actually
So, as you can see, routing is actually pretty simple. We just tell React which
pretty simple. We just tell React which pages we want in our website and then
pages we want in our website and then what to display for each page.
Now, let's learn some more details about routing. If we look at our code, we now
routing. If we look at our code, we now have multiple pages in our website. And
have multiple pages in our website. And all of these pages use one HTML file
all of these pages use one HTML file which is index.html.
which is index.html. So this HTML is shared between all of
So this HTML is shared between all of our pages and this reduces repetition.
our pages and this reduces repetition. By the way, this is called a single page
By the way, this is called a single page application or an SPA. This means we
application or an SPA. This means we only have one HTML file and instead we
only have one HTML file and instead we use React to create multiple pages.
use React to create multiple pages. Next, we'll use some shortcuts with
Next, we'll use some shortcuts with React Router. The first shortcut is
React Router. The first shortcut is instead of path equals slash, React
instead of path equals slash, React Router has a prop for this called index.
Router has a prop for this called index. So, this does the same thing as path
So, this does the same thing as path equals slash. The second shortcut is
equals slash. The second shortcut is currently we don't have anything inside
currently we don't have anything inside these route components. So, we can use
these route components. So, we can use the self-closing element shortcut. We'll
the self-closing element shortcut. We'll remove the closing tag.
remove the closing tag. And at the end here, we'll add a space
And at the end here, we'll add a space and a slash. And same thing here, we'll
and a slash. And same thing here, we'll remove the closing tag.
remove the closing tag. And add a space and slash and save.
And add a space and slash and save. And now we'll save these changes into
And now we'll save these changes into Git. We'll open the git section.
Git. We'll open the git section. And here it tells us we installed React
And here it tells us we installed React Router.
Router. And in app.jsx jsx. We added some routes
And in app.jsx jsx. We added some routes or some pages to our website. In
or some pages to our website. In main.jsx,
main.jsx, we loaded the React router. So, let's
we loaded the React router. So, let's create a message to describe these
create a message to describe these changes. Create multiple
changes. Create multiple pages using React-Router
pages using React-Router and commit.
Now, let's move the checkout page into our app. We'll go back to our files
our app. We'll go back to our files and first we'll open app.jsx.
And instead of displaying a div when we go to / checkout, let's remove it.
go to / checkout, let's remove it. And let's create a component for the
And let's create a component for the checkout page. Just like the homepage in
checkout page. Just like the homepage in the pages folder, we'll click this and
the pages folder, we'll click this and we'll create a new file and we'll name
we'll create a new file and we'll name this capital C checkout capital P
this capital C checkout capital P page.jsx.
And inside here, we'll create a new component using function
component using function checkout
checkout page brackets and curly brackets. and
page brackets and curly brackets. and we'll return brackets
we'll return brackets and we'll move the HTML for the checkout
and we'll move the HTML for the checkout page in here. So, we'll go to the
page in here. So, we'll go to the starting code folder
starting code folder and we'll open checkout.html.
and we'll open checkout.html. So, this is the HTML file for the
So, this is the HTML file for the checkout page.
checkout page. We're going to scroll down to the body
We're going to scroll down to the body element first and we're going to move
element first and we're going to move over this HTML.
over this HTML. So we'll click here to collapse this
So we'll click here to collapse this code and click here to collapse this
code and click here to collapse this code as well and we'll select all this
code as well and we'll select all this HTML and we'll cut
HTML and we'll cut and then inside checkout page inside the
and then inside checkout page inside the return we're going to paste
return we're going to paste and let's scroll up and we'll fix these
and let's scroll up and we'll fix these errors.
errors. So first if we collapse these two
So first if we collapse these two elements remember we're returning two
elements remember we're returning two elements from this component which
elements from this component which causes an error. To fix this we'll wrap
causes an error. To fix this we'll wrap this in a fragment
and we'll fix the indenting. Now you can fix it manually like we did before but
fix it manually like we did before but you can also use this shortcut. We can
you can also use this shortcut. We can press controlshiftp on Windows or
press controlshiftp on Windows or commandshiftp on Mac and this will open
commandshiftp on Mac and this will open up a list of commands that we can use in
up a list of commands that we can use in VS Code. So we're going to search for
VS Code. So we're going to search for the command format document
the command format document and we can click it or press enter
and we can click it or press enter and it will automatically format the
and it will automatically format the code in this document and fix the
code in this document and fix the indenting.
indenting. Next, if we expand these elements,
Next, if we expand these elements, remember in React, we have to use class
remember in React, we have to use class name instead of class. To replace these,
name instead of class. To replace these, we'll press control F or command F to
we'll press control F or command F to find code. And we'll find the code class
find code. And we'll find the code class equals and click this arrow. And we're
equals and click this arrow. And we're going to replace it with class name
going to replace it with class name equals and click replace all.
equals and click replace all. And finally the last eslint error here
And finally the last eslint error here is this component is not used in this
is this component is not used in this file. So we need to export it
file. So we need to export it and save.
and save. And now let's use this component in our
And now let's use this component in our route. We'll open app.jsx JSX
route. We'll open app.jsx JSX and at the top we'll import the page
and at the top we'll import the page using import curly brackets the checkout
using import curly brackets the checkout page
page from a string and we'll import dot slash
from a string and we'll import dot slash pages slashcheckout page
pages slashcheckout page and we'll use it inside this route using
and we'll use it inside this route using less than checkout page slashgreater
less than checkout page slashgreater and save.
and save. And now let's check our website.
And now let's check our website. And if we go to the path /checkout, you
And if we go to the path /checkout, you can see we have the HTML for the
can see we have the HTML for the checkout page.
checkout page. Now, let's add the rest of the code for
Now, let's add the rest of the code for the checkout page. We'll go back to VS
the checkout page. We'll go back to VS Code
Code and we're going to go to the starting
and we're going to go to the starting code and open checkout.html.
and we're going to move this over one by one. So, first, what do we do for this
one. So, first, what do we do for this title? Right now, all of our pages are
title? Right now, all of our pages are sharing one HTML file here. So, all of
sharing one HTML file here. So, all of the pages have the same title,
the pages have the same title, e-commerce project. However, we want
e-commerce project. However, we want each page to have a different title. So,
each page to have a different title. So, how do we do that? Well, in React, it's
how do we do that? Well, in React, it's actually pretty simple. We just have to
actually pretty simple. We just have to take this title and move it into our
take this title and move it into our page component. So, we'll select this
page component. So, we'll select this and cut.
and cut. And then we'll scroll up and open
And then we'll scroll up and open checkout page.jsx.
checkout page.jsx. And if we want this page to have a
And if we want this page to have a different title, all we have to do is to
different title, all we have to do is to paste the title at the top
paste the title at the top and save.
and save. So, if we look at our website
So, if we look at our website now, the checkout page has the title
now, the checkout page has the title checkout in the tabs. So, we'll go back
checkout in the tabs. So, we'll go back to our code.
to our code. And we're also going to set the title in
And we're also going to set the title in the homepage. So we'll open the
the homepage. So we'll open the homepage.
homepage. And in the homepage,
And in the homepage, let's create a title.
let's create a title. And we're going to set the title to
And we're going to set the title to ecommerce
ecommerce project and save.
project and save. And now we can scroll down
And now we can scroll down to the index.html HTML
to the index.html HTML and we can remove this title because
and we can remove this title because we're going to set it using React
we're going to set it using React and save.
and save. And now let's move the rest of the HTML
And now let's move the rest of the HTML in the checkout page.
in the checkout page. If we scroll down here, these meta and
If we scroll down here, these meta and link elements have already been moved to
link elements have already been moved to index.html.
index.html. So this is being shared across all of
So this is being shared across all of our pages. So, we actually don't need to
our pages. So, we actually don't need to move this over anymore because it's
move this over anymore because it's shared. So, we can remove all of this
shared. So, we can remove all of this code.
code. And finally, we're going to move over
And finally, we're going to move over the CSS for this page
the CSS for this page for general.css.
for general.css. Remember that we already copied these
Remember that we already copied these styles into index.css,
styles into index.css, so we don't need to move this anymore.
And now we'll just move checkout header.css CSS and checkout.css into our
header.css CSS and checkout.css into our React project.
React project. So, we'll go to styles/pages/checkout
and we'll move checkout header.css into the React project into here
and scroll down. And we'll also move checkout.css CSS into our React project
checkout.css CSS into our React project beside the component.
And now that we moved everything over, we can delete the checkout.html file.
we can delete the checkout.html file. So, we can delete this file.
Finally, let's scroll up and we're going to rename the CSS file
and we're going to rename the CSS file to match the component name. So, we'll
to match the component name. So, we'll rightclick and rename.
rightclick and rename. checkout page.css.
And now we'll load these two CSS files using import. So in checkout page.jsx
using import. So in checkout page.jsx at the top, we'll import a string and
at the top, we'll import a string and we'll import the CSS file slash
we'll import the CSS file slash checkout-
checkout- header.css.
And we'll also import dot slashcheckout
dot slashcheckout page.css
page.css and save.
and save. We'll go to our website.
We'll go to our website. And now everything looks really good. So
And now everything looks really good. So we finished moving all the HTML and CSS
we finished moving all the HTML and CSS for the checkout page into our React
for the checkout page into our React project.
project. Let's go back to our code and we'll save
Let's go back to our code and we'll save these changes into git. We'll open the
these changes into git. We'll open the git section
git section and in app.jsx
and in app.jsx we use the checkout page component for
we use the checkout page component for /checkout
/checkout and then we moved over the CSS files and
and then we moved over the CSS files and in here we moved over the HTML code as
in here we moved over the HTML code as well as the title. Let's type a message
well as the title. Let's type a message to describe these changes.
to describe these changes. move checkout page into React and
move checkout page into React and commit.
Before we continue moving pages, there's an issue that we need to fix. If we open
an issue that we need to fix. If we open the website and click the top left icon,
the website and click the top left icon, normally this should take us to the
normally this should take us to the homepage, but now it's blank. So why is
homepage, but now it's blank. So why is this not working? Notice in the URL the
this not working? Notice in the URL the path is /index.html.
Before this website was split up into multiple HTML files and index.html
multiple HTML files and index.html created the homepage.
created the homepage. But now we're using routing. So we set
But now we're using routing. So we set the URL paths ourselves. In our project
the URL paths ourselves. In our project we set the path slash to be the
we set the path slash to be the homepage. and we set the path /checkout
homepage. and we set the path /checkout to be the checkout page. So, we need to
to be the checkout page. So, we need to go into our code and update all of the
go into our code and update all of the links to go to the correct URL path.
links to go to the correct URL path. We'll go back to VS Code.
We'll go back to VS Code. And to update all of our links, we're
And to update all of our links, we're going to go to the search section of VS
going to go to the search section of VS Code. We can press control shift F on
Code. We can press control shift F on Windows or commandshift F on Mac.
Windows or commandshift F on Mac. And here we can search inside all of our
And here we can search inside all of our files. First, let's search for the code
files. First, let's search for the code index.html.
index.html. This will give us a list of a elements
This will give us a list of a elements or link elements.
or link elements. And href means where these links should
And href means where these links should go. So now instead of index.html,
go. So now instead of index.html, these links should go to slash. To
these links should go to slash. To replace index.html HTML in all these
replace index.html HTML in all these places. We can click this arrow on the
places. We can click this arrow on the left to open the replace menu. And we'll
left to open the replace menu. And we'll replace this with slash. And then click
replace this with slash. And then click here to replace all. And confirm.
here to replace all. And confirm. And let's replace the links for the
And let's replace the links for the other pages as well. So up here, we'll
other pages as well. So up here, we'll also search for checkout.html.
also search for checkout.html. And in this search result, we have a
And in this search result, we have a link element with the href
link element with the href checkout.html.
checkout.html. And in our router, we set the URL path
And in our router, we set the URL path for the checkout page to /checkout.
for the checkout page to /checkout. So we'll replace all of these with
So we'll replace all of these with slashcheckout
slashcheckout and replace all.
And we'll do the same thing for the orders page, which is orders.html.
orders page, which is orders.html. And here we'll change it to slash orders
And here we'll change it to slash orders and replace.
And finally, we also have a tracking page. So here we're going to search for
page. So here we're going to search for tracking.html
tracking.html and replace it with slash tracking and
and replace it with slash tracking and replace all.
And now all of our links should work correctly because they match our router.
correctly because they match our router. If we open the website
If we open the website and at the top we change the URL path to
and at the top we change the URL path to /checkout
it opens the checkout page. If we click the top left icon
the top left icon this should now go to the URL path slash
this should now go to the URL path slash or empty and it will open the homepage.
or empty and it will open the homepage. So let's save this into Git. We'll open
So let's save this into Git. We'll open the git section
the git section and we just updated all the links in
and we just updated all the links in these files to match the router.
these files to match the router. Let's type the message update links to
Let's type the message update links to match the router and commit.
Next, let's move the orders page into our React project. Feel free to pause
our React project. Feel free to pause the video if you want to try it yourself
the video if you want to try it yourself first. So, we'll go back to our files
first. So, we'll go back to our files and first let's create a component for
and first let's create a component for the orders page. Inside the pages
the orders page. Inside the pages folder, we'll create a new file and
folder, we'll create a new file and we'll name it orders page.jsx
we'll name it orders page.jsx and press enter.
and press enter. And inside here we'll create a component
And inside here we'll create a component function
function orders page brackets and curly brackets.
orders page brackets and curly brackets. And we'll return brackets
And we'll return brackets and we'll move over the HTML. So we'll
and we'll move over the HTML. So we'll go back to the starting code folder and
go back to the starting code folder and open orders.html.
We'll start with the body. So we'll scroll down and we can collapse these
scroll down and we can collapse these two elements and we'll select the HTML
two elements and we'll select the HTML and cut
and cut and inside the orders page inside the
and inside the orders page inside the return we'll paste.
return we'll paste. We'll scroll up
and collapse these elements and we're going to wrap these in a
and we're going to wrap these in a fragment less than greater than and
fragment less than greater than and remove this. and at the end less than
remove this. and at the end less than slashgreater than.
slashgreater than. And to fix the indenting, we can use the
And to fix the indenting, we can use the shortcut control shiftp or commandshiftp
shortcut control shiftp or commandshiftp and search for the command format
and search for the command format document and press enter.
document and press enter. Again, we need to rename class to class
Again, we need to rename class to class name. So, we'll press control F or
name. So, we'll press control F or command F to find code. We'll search for
command F to find code. We'll search for class equals. Click here and replace it
class equals. Click here and replace it with class name and replace all.
with class name and replace all. And finally, at the top, we'll export
And finally, at the top, we'll export this component.
this component. Let's save this file.
Let's save this file. Let's go back to orders.html.
Scroll up and we'll move over this code. So, for the title, we're going to move
So, for the title, we're going to move it into the component. We'll select it,
it into the component. We'll select it, cut, and at the top in orders page,
cut, and at the top in orders page, we're going to paste it at the top.
we're going to paste it at the top. Let's go back to orders.html.
And these meta and link elements are already inside index.html.
already inside index.html. So, we can remove this.
So, we can remove this. And finally, we'll move the CSS files
And finally, we'll move the CSS files over. So, general.css CSS was already
over. So, general.css CSS was already moved into index.css.
moved into index.css. We already moved over header.css up
We already moved over header.css up here. So, we just need to move the
here. So, we just need to move the orders.css.
orders.css. So, inside starting code, we'll go into
So, inside starting code, we'll go into styles/pages
styles/pages and we'll move this orders.css file.
So, we'll move it up here beside the orders page component.
beside the orders page component. And now we moved over everything inside
And now we moved over everything inside orders.html.
orders.html. So we can scroll down and delete this
So we can scroll down and delete this file.
Next, we should rename orders.css to match the component name. So we'll
to match the component name. So we'll rightclick and rename
rightclick and rename orders page.css.
And finally, we'll load the CSS files. So, in orders page.jsx
So, in orders page.jsx at the top, we're going to import a
at the top, we're going to import a string. And remember, this requires the
string. And remember, this requires the header and the orders page CSS.
header and the orders page CSS. So, first we'll import dot slash
So, first we'll import dot slash header.css.
And we'll also import dot slash orders page.css. CSS and save.
dot slash orders page.css. CSS and save. And now we moved over all the HTML and
And now we moved over all the HTML and CSS for the orders page.
CSS for the orders page. So now let's create a route for this
So now let's create a route for this page. We'll go to app.jsx.
And first at the top we're going to import curly brackets the orders page
import curly brackets the orders page from a string. and we'll locate dot
from a string. and we'll locate dot slashpages slash orders page and then
slashpages slash orders page and then down here we're going to add another
down here we're going to add another route. So at the end we'll add less than
route. So at the end we'll add less than route greater than and we can remove
route greater than and we can remove this
this and use the self-closing element
and use the self-closing element shortcut
shortcut and we'll give it two props. We'll set
and we'll give it two props. We'll set the path equals double quotes and we'll
the path equals double quotes and we'll put the orders page on the path slash
put the orders page on the path slash orders
orders and we'll give it an element to display
and we'll give it an element to display equals curly brackets. And for the
equals curly brackets. And for the orders page, we'll display the element
orders page, we'll display the element less than orders page slashgrater than
less than orders page slashgrater than and save.
and save. And now let's view the website. We'll
And now let's view the website. We'll open the website
open the website and on the homepage we're going to click
and on the homepage we're going to click this orders link to go to slash orders
this orders link to go to slash orders and it displays the orders page. So that
and it displays the orders page. So that looks pretty good. And now we finished
looks pretty good. And now we finished moving the orders page into React.
moving the orders page into React. So let's go back to VS Code.
So let's go back to VS Code. And in the starting code, there's one
And in the starting code, there's one more page to move over, which is the
more page to move over, which is the tracking page. But I'll leave this as an
tracking page. But I'll leave this as an exercise.
exercise. So now let's save these changes into
So now let's save these changes into Git. Open the Git section.
Git. Open the Git section. In app.jsx, we added a new route for the
In app.jsx, we added a new route for the orders page and we moved over the CSS
orders page and we moved over the CSS and the HTML.
and the HTML. So we'll type the message move orders
So we'll type the message move orders page to React
page to React and commit.
Next, we're going to separate our page into smaller components.
into smaller components. For example, if we look at our website,
For example, if we look at our website, notice that on the orders page, there's
notice that on the orders page, there's this header at the top. And if we click
this header at the top. And if we click the top left and go to the homepage, we
the top left and go to the homepage, we have the same header at the top of the
have the same header at the top of the page. So, it's a good idea to separate
page. So, it's a good idea to separate the header into a component so we can
the header into a component so we can reuse it between these pages. We'll go
reuse it between these pages. We'll go back to VS Code
back to VS Code and we'll open our files and we're going
and we'll open our files and we're going to open homepage.jsx.
And at the top here, we have the HTML for the header. If we collapse it, this
for the header. If we collapse it, this is all the HTML for the header.
is all the HTML for the header. Let's separate this into a shared
Let's separate this into a shared component.
component. Now, because this component is shared
Now, because this component is shared between multiple pages, we usually put
between multiple pages, we usually put shared components in a folder called
shared components in a folder called components. So, inside our source
components. So, inside our source folder, we're going to click it and
folder, we're going to click it and create a new folder
create a new folder and we'll call it components.
So the components folder is for shared components and the pages folder is for
components and the pages folder is for components that are specific to a page.
components that are specific to a page. Inside the components folder, we'll
Inside the components folder, we'll create a new file.
create a new file. And let's name it header.jsx.
And in here we'll create a component for the header using function
the header using function header brackets and curly brackets. And
header brackets and curly brackets. And we'll return brackets.
we'll return brackets. And we'll move over the HTML.
And we'll move over the HTML. So we'll open homepage.jsx JSX
So we'll open homepage.jsx JSX and we're going to select the HTML for
and we're going to select the HTML for the header and cut
inside header.jsx. Inside here, we're going to paste.
Inside here, we're going to paste. And we'll fix the indenting by pressing
And we'll fix the indenting by pressing control shiftp or command shiftp and
control shiftp or command shiftp and search for format document and press
search for format document and press enter.
enter. And we'll scroll to the top. And lastly,
And we'll scroll to the top. And lastly, we're going to export this component to
we're going to export this component to remove this error.
remove this error. Next, we should also move over the CSS
Next, we should also move over the CSS for the header. Now, luckily the CSS for
for the header. Now, luckily the CSS for the header has already been separated
the header has already been separated into header.css.
into header.css. So, we can just move this over to beside
So, we can just move this over to beside the component.
So, we want to keep the CSS close to the component so it's easy to find. So at
component so it's easy to find. So at the top of this we can import the CSS
the top of this we can import the CSS using import a string and we'll import
using import a string and we'll import dot slash header.css
dot slash header.css and save.
and save. So now that we created this header
So now that we created this header component, we can reuse it in the
component, we can reuse it in the homepage and the orders page. We'll open
homepage and the orders page. We'll open homepage.jsx.
homepage.jsx. And at the top first, we don't need to
And at the top first, we don't need to import the header anymore. It's already
import the header anymore. It's already done by this component. So we can remove
done by this component. So we can remove it. And let's import the component using
it. And let's import the component using import curly brackets. The header
import curly brackets. The header from a string.
from a string. And now we need to locate this file. So
And now we need to locate this file. So currently we're inside the pages folder.
currently we're inside the pages folder. So we need to get out of this folder
So we need to get out of this folder using dot dot slash and then go into the
using dot dot slash and then go into the components folder. components slash
components folder. components slash header.
header. And now we'll use this component in the
And now we'll use this component in the HTML. So down here
HTML. So down here we'll insert less than header
we'll insert less than header slashgreater than and save.
slashgreater than and save. So now this HTML is a bit easier to work
So now this HTML is a bit easier to work with because we split it up into smaller
with because we split it up into smaller pieces. Let's do the same thing with the
pieces. Let's do the same thing with the orders page. We'll open the orders page.
orders page. We'll open the orders page. jsx
jsx and at the top we don't need to import
and at the top we don't need to import header.css CSS and instead we'll import
header.css CSS and instead we'll import curly brackets the header component from
curly brackets the header component from a string and we'll locate dot dot slash
a string and we'll locate dot dot slash components
components slash header
slash header and down here instead of this HTML we
and down here instead of this HTML we can remove this and just use the
can remove this and just use the component less than header slashgrater
component less than header slashgrater than this helps us reuse and save a lot
than this helps us reuse and save a lot of code. Let's save
of code. Let's save and then view the website.
and then view the website. The header looks good in the homepage.
The header looks good in the homepage. And if we click here to go to the orders
And if we click here to go to the orders page, the header also looks good in the
page, the header also looks good in the orders page. So, we're able to reuse the
orders page. So, we're able to reuse the header component.
header component. Next, there's a small issue with the
Next, there's a small issue with the header. when we click a link like this
header. when we click a link like this link in the top left, it actually
link in the top left, it actually reloads the page when we go to another
reloads the page when we go to another page. So by default, link elements or a
page. So by default, link elements or a elements reload the page. Now this made
elements reload the page. Now this made sense before when our website had
sense before when our website had multiple HTML files. To go from one file
multiple HTML files. To go from one file to another file, we have to reload the
to another file, we have to reload the page. However, now that we're using
page. However, now that we're using routing and a single page application,
routing and a single page application, we don't have to reload every time, we
we don't have to reload every time, we can just use JavaScript to switch
can just use JavaScript to switch between pages.
between pages. To do this, React Router provides a
To do this, React Router provides a component called link. So, we'll go back
component called link. So, we'll go back to our code
to our code and we'll open the header component
and we'll open the header component and at the top
and at the top we're going to import
we're going to import curly brackets
curly brackets the link component from
the link component from the package react-rowout.
So, the link component lets us go to another page without reloading.
another page without reloading. To use it, we just have to replace our
To use it, we just have to replace our link elements or a elements with this
link elements or a elements with this link component. So here, let's replace
link component. So here, let's replace this with link and at the end slash
this with link and at the end slash link.
link. And also instead of the href attribute,
And also instead of the href attribute, the link component uses a prop called
the link component uses a prop called to. So this will link to this page.
to. So this will link to this page. Let's scroll down
Let's scroll down and in the header we have two other
and in the header we have two other links, the orders link and the cart
links, the orders link and the cart link. So we'll switch both of these as
link. So we'll switch both of these as well. So here we'll switch it to link
well. So here we'll switch it to link and slashlink
and slashlink and we'll switch the href to two.
and we'll switch the href to two. And finally, switch this to link
And finally, switch this to link and slashlink
and slashlink and switch href to two and save.
and switch href to two and save. And now let's open our website to try it
And now let's open our website to try it out.
out. If we click this link to go to the
If we click this link to go to the orders page, you'll notice it's a little
orders page, you'll notice it's a little bit faster because now it's using
bit faster because now it's using JavaScript to essentially display a
JavaScript to essentially display a different page without reloading.
different page without reloading. So when using React Router, we should
So when using React Router, we should use the link component instead of the A
use the link component instead of the A element because the link component lets
element because the link component lets us go to another page without reloading.
us go to another page without reloading. Now let's save these changes into git.
Now let's save these changes into git. We'll go to the git section
We'll go to the git section and here we split up the header into a
and here we split up the header into a separate component. And then inside the
separate component. And then inside the header, we switch to using the link
header, we switch to using the link component to switch between pages.
component to switch between pages. Let's type the message
Let's type the message split header into a component
split header into a component and use link and commit.
In the next lesson, we'll add a backend to this project and make it interactive.
to this project and make it interactive. So, we'll be able to display a list of
So, we'll be able to display a list of products and add products to a cart and
products and add products to a cart and create an order. And that's the end of
create an order. And that's the end of this lesson. In this lesson, we started
this lesson. In this lesson, we started the ecommerce project using React and
the ecommerce project using React and Vit. We reviewed Git, which helps us
Vit. We reviewed Git, which helps us track changes in our code. We learned
track changes in our code. We learned routing, which lets us create multiple
routing, which lets us create multiple pages in React. We created the homepage,
pages in React. We created the homepage, the checkout page, and the orders page
the checkout page, and the orders page in React. We updated all the links to
in React. We updated all the links to work with routing, and we separated the
work with routing, and we separated the header into a component.
header into a component. Here are some exercises to help you
Here are some exercises to help you practice what we learned in this lesson.
In this lesson, we're going to start making our e-commerce project
making our e-commerce project interactive and then we'll learn how to
interactive and then we'll learn how to use a backend with this project.
use a backend with this project. By the way, if something in this lesson
By the way, if something in this lesson does not work for you, you can check the
does not work for you, you can check the troubleshooting guide in the
troubleshooting guide in the description.
description. First, if we look at our website,
First, if we look at our website, currently we only have three products on
currently we only have three products on this website, but in the final project,
this website, but in the final project, we have a lot more products. So, we're
we have a lot more products. So, we're going to add all of these products to
going to add all of these products to our website. So, let's go to the code
our website. So, let's go to the code for the homepage.
for the homepage. We'll open our code and go to the files
We'll open our code and go to the files and we're going to find the pages folder
and we're going to find the pages folder and open homepage.jsx.
So this component represents the homepage. And we're going to scroll down
homepage. And we're going to scroll down and find the element with a class
and find the element with a class product-container.
product-container. And we're going to click here to
And we're going to click here to collapse this element. And we're going
collapse this element. And we're going to collapse this other product
to collapse this other product container. and this other product
container. and this other product container as well.
container as well. Each product container represents one
Each product container represents one product on the page. To add more
product on the page. To add more products, we could make a copy of this
products, we could make a copy of this code and add each product manually.
code and add each product manually. However, that would be very repetitive.
However, that would be very repetitive. Instead, we can generate this HTML using
Instead, we can generate this HTML using React. We already learned this technique
React. We already learned this technique in the chatbot project where we
in the chatbot project where we generated a list of chat messages on the
generated a list of chat messages on the page. So, we're going to review how to
page. So, we're going to review how to generate the HTML.
generate the HTML. First, we need to save the data for
First, we need to save the data for these products in our JavaScript. To
these products in our JavaScript. To save time, I already did this. So, if we
save time, I already did this. So, if we go to our files and we go to the
go to our files and we go to the starting code folder
starting code folder and we open this data folder inside
and we open this data folder inside products.js, JS I already saved the data
products.js, JS I already saved the data for the products in this array. So we
for the products in this array. So we can just use this as our data.
can just use this as our data. Each object in the array represents one
Each object in the array represents one product. So it has a name, an image, and
product. So it has a name, an image, and a price and some other details. The next
a price and some other details. The next step is to use this data to generate the
step is to use this data to generate the HTML. We'll go back to the homepage
HTML. We'll go back to the homepage and first we're going to import that
and first we're going to import that products array. So at the top we're
products array. So at the top we're going to import curly brackets the
going to import curly brackets the products array from a string and we're
products array from a string and we're going to locate that file. So first we
going to locate that file. So first we need to get out of the pages and source
need to get out of the pages and source folder using dot dot dot slash and then
folder using dot dot dot slash and then we'll find the starting code folder and
we'll find the starting code folder and the data folder. starting dashcode slash
the data folder. starting dashcode slash data slash and the products file.
data slash and the products file. Next, we're going to loop through this
Next, we're going to loop through this products array. So, at the bottom here
products array. So, at the bottom here above these product containers, we're
above these product containers, we're going to insert using curly brackets the
going to insert using curly brackets the products array dot map and brackets. And
products array dot map and brackets. And we're going to give map a function
we're going to give map a function brackets arrow and curly brackets.
brackets arrow and curly brackets. As a review, do map takes each value in
As a review, do map takes each value in an array and transforms it. In this
an array and transforms it. In this parameter, we get each value in this
parameter, we get each value in this array, which is a product.
array, which is a product. So again, a product is just this object
So again, a product is just this object and it has some details about the
and it has some details about the product inside.
product inside. So, we'll go back
So, we'll go back and we're going to transform this
and we're going to transform this product object into this HTML.
product object into this HTML. To do that, we're just going to copy
To do that, we're just going to copy this HTML
this HTML and inside map, we're going to return
and inside map, we're going to return brackets
brackets and paste that HTML.
and paste that HTML. And to fix the formatting, we're going
And to fix the formatting, we're going to press control or commandshiftp
to press control or commandshiftp and then search for format document
and then search for format document and press enter.
and press enter. And let's scroll up.
And let's scroll up. And remember, whenever we loop through
And remember, whenever we loop through an array like this, we need to give each
an array like this, we need to give each element a key prop equals curly
element a key prop equals curly brackets. So the key helps React keep
brackets. So the key helps React keep track of changes in this array. Now the
track of changes in this array. Now the key has to be unique. So looking at the
key has to be unique. So looking at the data, each product has a unique ID
data, each product has a unique ID property.
property. So we'll go back and we're going to use
So we'll go back and we're going to use the product. ID as the key. So this
the product. ID as the key. So this basically takes each product object and
basically takes each product object and transforms it into this HTML.
transforms it into this HTML. So now let's save
So now let's save and we'll check the website.
and we'll check the website. And as you can see, we took each product
And as you can see, we took each product and transformed it into some HTML.
and transformed it into some HTML. Now, obviously, we don't want the
Now, obviously, we don't want the product to be socks every time. So,
product to be socks every time. So, let's insert the details of each
let's insert the details of each product. We'll go back to our code, and
product. We'll go back to our code, and instead of displaying the socks every
instead of displaying the socks every time, we're going to remove this. and
time, we're going to remove this. and insert.
insert. And each product object has a name
And each product object has a name property. So we'll insert the
property. So we'll insert the product.name.
product.name. And let's also replace the product
And let's also replace the product image. So instead of showing the socks
image. So instead of showing the socks image every time, we'll remove this and
image every time, we'll remove this and we'll insert the product.
we'll insert the product. Property.
Property. Next, we'll insert the ratings. The way
Next, we'll insert the ratings. The way this works is that each rating has an
this works is that each rating has an image. And we just have to multiply the
image. And we just have to multiply the rating by 10 to get the image name. So
rating by 10 to get the image name. So for this one, we're going to put open
for this one, we're going to put open curly bracket and close curly bracket
curly bracket and close curly bracket around this value. And we're going to
around this value. And we're going to change this to a template string using
change this to a template string using back ticks and back ticks. And then
back ticks and back ticks. And then instead of 45 every time, we're going to
instead of 45 every time, we're going to insert. And remember for template
insert. And remember for template strings to insert we use dollar curly
strings to insert we use dollar curly brackets. So in here we're going to
brackets. So in here we're going to insert the product dot rating dot stars
insert the product dot rating dot stars and then multiply it by 10. And this
and then multiply it by 10. And this should give us the ratings image that we
should give us the ratings image that we need. Next we're going to replace the
need. Next we're going to replace the rating count. So curly brackets and
rating count. So curly brackets and we'll insert the product.
we'll insert the product. count.
count. Next, we'll insert the price. So,
Next, we'll insert the price. So, instead of this price every time, we'll
instead of this price every time, we'll insert the product dot price sets. And
insert the product dot price sets. And we usually save money in cents because
we usually save money in cents because many programming languages have trouble
many programming languages have trouble calculating decimal numbers. Now, when
calculating decimal numbers. Now, when we display it on the website, we want to
we display it on the website, we want to display it as dollars. So to convert
display it as dollars. So to convert this back to dollars, we're going to
this back to dollars, we're going to divide by 100 since $1 is equal to 100.
divide by 100 since $1 is equal to 100. And that's it. We inserted the details
And that's it. We inserted the details of each product into this HTML.
of each product into this HTML. This is the same technique that we used
This is the same technique that we used in the chatbot project, except our data
in the chatbot project, except our data is just a little more complicated. Now,
is just a little more complicated. Now, let's save
let's save and check the website.
and check the website. And now we have a list of different
And now we have a list of different products on the page and we generated
products on the page and we generated the HTML for these products. Now there
the HTML for these products. Now there is a small problem here which is for
is a small problem here which is for these socks it's showing the price 10.9
these socks it's showing the price 10.9 but usually for price we want to show
but usually for price we want to show 10.90.
10.90. To fix this, we'll go back to our code
To fix this, we'll go back to our code and we're going to scroll down to where
and we're going to scroll down to where we insert the price. And to force this
we insert the price. And to force this to show two decimals, we're going to
to show two decimals, we're going to wrap this in a open bracket and a closed
wrap this in a open bracket and a closed bracket. And then outside of this
bracket. And then outside of this bracket, we'll use the method dot two
bracket, we'll use the method dot two capital Fixed
capital Fixed and brackets.
and brackets. So this converts the number into a
So this converts the number into a string and inside these brackets we can
string and inside these brackets we can tell it how many decimals to show. So
tell it how many decimals to show. So we'll put two
we'll put two and save.
and save. Now if we check the website
Now if we check the website all the prices show two decimals. So
all the prices show two decimals. So that's a review of how to generate the
that's a review of how to generate the HTML using some data. Let's go back to
HTML using some data. Let's go back to our code.
our code. And now that we're generating all this
And now that we're generating all this HTML, we can scroll to the bottom and
HTML, we can scroll to the bottom and remove this default HTML that we had
remove this default HTML that we had before and save.
before and save. And now let's save these changes into
And now let's save these changes into git. We'll go to the git section and at
git. We'll go to the git section and at the top we'll use a message generate the
the top we'll use a message generate the HTML for the home page and commit.
Now, we're going to take this project to the next level and go beyond what we did
the next level and go beyond what we did in the chatbot project. We're going to
in the chatbot project. We're going to add a backend to this project. So, first
add a backend to this project. So, first we'll learn what a backend is and why we
we'll learn what a backend is and why we use a backend. So, right now, if we look
use a backend. So, right now, if we look at our files,
at our files, notice that all the products are saved
notice that all the products are saved in a file on our computer called
in a file on our computer called products.js. JS.
products.js. JS. The problem with this is an e-commerce
The problem with this is an e-commerce website or an online shopping website
website or an online shopping website might have thousands of products and it
might have thousands of products and it does not make sense to save everything
does not make sense to save everything on our computer or on the customer's
on our computer or on the customer's computer. We might not have enough space
computer. We might not have enough space on our computer. So, what the company or
on our computer. So, what the company or the store does is they set up another
the store does is they set up another computer in their office or in what we
computer in their office or in what we call a data center. And this computer
call a data center. And this computer saves all the thousands of products that
saves all the thousands of products that they offer. And then when we visit the
they offer. And then when we visit the website, this computer sends us only the
website, this computer sends us only the products that we need to display. So
products that we need to display. So this computer is called the backend.
this computer is called the backend. It's just another computer that's owned
It's just another computer that's owned by the company and it manages all the
by the company and it manages all the data.
data. Here's another example of why we use a
Here's another example of why we use a backend. Later in this course, we're
backend. Later in this course, we're going to add products to a cart. So,
going to add products to a cart. So, where do we save this cart? It does not
where do we save this cart? It does not make sense to save the cart on the
make sense to save the cart on the customer's computer because if the
customer's computer because if the customer uses a different computer to
customer uses a different computer to visit the website, they would no longer
visit the website, they would no longer have access to their cart. Instead, we
have access to their cart. Instead, we save the cart in the back end as well.
save the cart in the back end as well. When they access the website, the
When they access the website, the backend sends the cart to the website.
backend sends the cart to the website. So, the back end also lets us share data
So, the back end also lets us share data between computers.
between computers. So again, the backend is another
So again, the backend is another computer that manages the data. And this
computer that manages the data. And this is how a React website works in the real
is how a React website works in the real world. We usually contact a backend to
world. We usually contact a backend to get the data. So we're going to practice
get the data. So we're going to practice that in this course. We're going to
that in this course. We're going to learn how to add a backend and then
learn how to add a backend and then we're going to learn how to use the
we're going to learn how to use the backend in React. So you can see how we
backend in React. So you can see how we use React in the real world.
use React in the real world. Now that we learned what a backend is
Now that we learned what a backend is and why we use a backend, let's add a
and why we use a backend, let's add a backend to our project. We're going to
backend to our project. We're going to click this link in the description. Go
click this link in the description. Go to lesson 7 and click this link to open
to lesson 7 and click this link to open the backend code.
the backend code. And this is a backend that we can use
And this is a backend that we can use with our project. I called it the
with our project. I called it the e-commerce backend AI because this was
e-commerce backend AI because this was built with AI. And I show you how to do
built with AI. And I show you how to do that in another video. But for this
that in another video. But for this video, I recommend downloading this
video, I recommend downloading this version to make sure it works with a
version to make sure it works with a video. You can try to recreate the back
video. You can try to recreate the back end as an exercise. So, we're going to
end as an exercise. So, we're going to click this code button here and we'll
click this code button here and we'll click download zip.
click download zip. Once that finishes downloading, we're
Once that finishes downloading, we're going to open the downloads folder. So,
going to open the downloads folder. So, for me, it's right here. And then we're
for me, it's right here. And then we're going to unzip this. On Windows, we're
going to unzip this. On Windows, we're going to rightclick the file and then
going to rightclick the file and then click extract all.
And on Mac, you can just doubleclick the zip file.
zip file. Then we're going to move this back end
Then we're going to move this back end into our project. So we'll open our
into our project. So we'll open our code.
code. And then we're just going to drag this
And then we're just going to drag this folder into our project. But first, I'm
folder into our project. But first, I'm going to collapse these folders for now.
going to collapse these folders for now. And we're going to drag this folder to
And we're going to drag this folder to the outside
the outside and click copy folder
and click copy folder so that the backend code is right beside
so that the backend code is right beside our website. By the way, we call the
our website. By the way, we call the website or what the user interacts with
website or what the user interacts with the front end.
the front end. We're also going to rename this folder.
We're also going to rename this folder. So, right click and rename.
So, right click and rename. and we'll just rename it the e-commerce
and we'll just rename it the e-commerce backend to make it easier to understand.
backend to make it easier to understand. Next, we're going to start this backend.
Next, we're going to start this backend. So, we're going to go to our terminal or
So, we're going to go to our terminal or our command line and we'll click here to
our command line and we'll click here to create a new tab. And then in here,
create a new tab. And then in here, first we're going to change directory
first we're going to change directory into the e-commerce backend folder. So,
into the e-commerce backend folder. So, we'll cd ecommerce
we'll cd ecommerce dashbackend.
dashbackend. So now the command line is running
So now the command line is running inside this folder and the process for
inside this folder and the process for starting the back end is very similar to
starting the back end is very similar to the website or the front end. So first
the website or the front end. So first we're going to npm install to install
we're going to npm install to install all the npm packages that we need
and then we'll run npm rundev to start the back end.
the back end. So, this tells us the back end is
So, this tells us the back end is running on port 3000, which is localhost
running on port 3000, which is localhost col 3000. To test it, we're going to go
col 3000. To test it, we're going to go to our browser,
to our browser, and at the top, we're going to create a
and at the top, we're going to create a new tab, and we're going to go to
new tab, and we're going to go to localhost
localhost col 3000
col 3000 /s.
And the back end should send back some data.
data. And this is actually the data for the
And this is actually the data for the products.
products. I can also click this checkbox here to
I can also click this checkbox here to show it in an easier to read format. And
show it in an easier to read format. And you can see this is the same products
you can see this is the same products array that we were using before except
array that we were using before except this is coming from the back end. So the
this is coming from the back end. So the way a backend works is when we access
way a backend works is when we access the backend using a URL, it will send
the backend using a URL, it will send back some data. So this is working.
back some data. So this is working. So now let's go back to our code and
So now let's go back to our code and we'll save these changes into git. Open
we'll save these changes into git. Open the git section and we'll use the
the git section and we'll use the message add ecommerce
message add ecommerce backend and commit.
Next we're going to learn data fetching. Data fetching means to get data from the
Data fetching means to get data from the back end using our code. So, first we're
back end using our code. So, first we're going to go to our files and let's go
going to go to our files and let's go back to the e-commerce project. And
back to the e-commerce project. And we're going to open our homepage,
we're going to open our homepage, which is right here.
which is right here. And we'll scroll to the top. And one way
And we'll scroll to the top. And one way to fetch data or to get data from the
to fetch data or to get data from the back end is to use the function fetch
back end is to use the function fetch and brackets.
and brackets. So fetch is a built-in function. It's
So fetch is a built-in function. It's provided by JavaScript.
provided by JavaScript. between the brackets, we're going to
between the brackets, we're going to create a string
create a string and we're going to put the URL that we
and we're going to put the URL that we want to get data from. So, if we go back
want to get data from. So, if we go back to our browser,
to our browser, remember that this URL gave us the
remember that this URL gave us the products data. So, we can just select
products data. So, we can just select this URL and copy.
this URL and copy. And in our code, we're going to paste it
And in our code, we're going to paste it into fetch.
into fetch. And make sure you have http col double
And make sure you have http col double slash in front. It doesn't show in the
slash in front. It doesn't show in the browser, but we need this in order for
browser, but we need this in order for our code to work. So if we fetch data
our code to work. So if we fetch data from this URL, this should give us the
from this URL, this should give us the products data that we saw earlier.
products data that we saw earlier. However, we cannot save this data in a
However, we cannot save this data in a variable like this. And that's because
variable like this. And that's because when we contact a backend, it takes time
when we contact a backend, it takes time for this code to reach the back end and
for this code to reach the back end and to get a response. So this code does not
to get a response. So this code does not finish right away. It finishes at some
finish right away. It finishes at some point in the future. As a review, we
point in the future. As a review, we call this asynchronous code.
call this asynchronous code. Asynchronous code means code that does
Asynchronous code means code that does not finish right away. So how do we
not finish right away. So how do we handle this situation?
handle this situation? fetch returns a promise and a promise
fetch returns a promise and a promise lets us wait for asynchronous code to
lets us wait for asynchronous code to finish.
finish. So a promise has a method called dot
So a promise has a method called dot then and brackets and we give dot then a
then and brackets and we give dot then a function brackets arrow and curly
function brackets arrow and curly brackets.
brackets. The way this works is that this code
The way this works is that this code contacts the backend to get some data
contacts the backend to get some data but it takes some time for the backend
but it takes some time for the backend to respond. So the code is going to keep
to respond. So the code is going to keep going line by line. Then at some point
going line by line. Then at some point in the future, this is going to finish.
in the future, this is going to finish. We're going to get the response from the
We're going to get the response from the back end. When it finishes in the
back end. When it finishes in the future, it will run the function inside.
future, it will run the function inside. So that's a review of how a promise
So that's a review of how a promise works. So next when fetch gets a
works. So next when fetch gets a response from the back end it will save
response from the back end it will save it as a parameter in this inner function
it as a parameter in this inner function called response.
called response. By the way when we contact the back end
By the way when we contact the back end using fetch this is called a request.
using fetch this is called a request. When the back end responds with some
When the back end responds with some data this is called a response. So this
data this is called a response. So this parameter contains the response from the
parameter contains the response from the back end. And inside here, let's just
back end. And inside here, let's just console.log
console.log the response to see what it looks like.
the response to see what it looks like. We'll save
We'll save and then check our website
and then check our website and we'll open the tab for our website
and we'll open the tab for our website and we're going to open the console.
and we're going to open the console. Rightclick, inspect,
Rightclick, inspect, and the console.
and the console. And you can see that we got the response
And you can see that we got the response from the back end. So inside here we
from the back end. So inside here we have some information like the URL that
have some information like the URL that we accessed and a status code. 200 means
we accessed and a status code. 200 means it was successful.
it was successful. However, notice that we don't have the
However, notice that we don't have the products data in this response. To get
products data in this response. To get the products data, we're going to go
the products data, we're going to go back to our code
back to our code and this response object has a method
and this response object has a method called response.json
called response.json JSON and brackets.
JSON and brackets. So,JSON gives us the data that is
So,JSON gives us the data that is attached to the response. In this case,
attached to the response. In this case, it gives us the products data. Now, the
it gives us the products data. Now, the tricky part about this is response.json
tricky part about this is response.json is also asynchronous. So, again, we
is also asynchronous. So, again, we can't save this in a variable. Instead,
can't save this in a variable. Instead, this is also a promise. So we have to
this is also a promise. So we have to use dot then again and give this another
use dot then again and give this another function brackets arrow and curly
function brackets arrow and curly brackets
brackets and then inside this inner function we
and then inside this inner function we have access to the data that we get from
have access to the data that we get from the back end. So in this case this is
the back end. So in this case this is the products data.
the products data. So if we console.log log the data and
So if we console.log log the data and save
save and then check the console.
and then check the console. You'll see that the backend gave us an
You'll see that the backend gave us an array of products to display on the
array of products to display on the page. So, this is the same thing as the
page. So, this is the same thing as the products array that we saved in our
products array that we saved in our file, but this data is coming from the
file, but this data is coming from the back end.
back end. Let's go back.
Let's go back. And that's how we fetch data or get data
And that's how we fetch data or get data from the back end. We use the built-in
from the back end. We use the built-in function fetch and give it the URL of
function fetch and give it the URL of the back end and then we use dot then to
the back end and then we use dot then to wait for a response.
wait for a response. Now one shortcut we can use is instead
Now one shortcut we can use is instead of doing dot then inside another dot
of doing dot then inside another dot then we can also return the
then we can also return the response.json JSON and then move this
response.json JSON and then move this dot then to the outside.
dot then to the outside. So this code does the same thing as
So this code does the same thing as before. This waits for this to finish
before. This waits for this to finish and then runs this function. So this is
and then runs this function. So this is just a shortcut that we can use with
just a shortcut that we can use with promises.
promises. Another thing to note is the back end
Another thing to note is the back end can also run on the same computer as the
can also run on the same computer as the website or the front end. So right now
website or the front end. So right now this back end is actually running on our
this back end is actually running on our own computer. Locost means our own
own computer. Locost means our own computer. So when we contact the back
computer. So when we contact the back end, we're actually just contacting our
end, we're actually just contacting our own computer. We do this during
own computer. We do this during development because it's easier. But
development because it's easier. But once this website is on the internet,
once this website is on the internet, the back end will be another computer.
the back end will be another computer. So now let's save this code
So now let's save this code and we'll save this into git. In the get
and we'll save this into git. In the get section, we'll use the message fetch
section, we'll use the message fetch data from the back end and commit.
Next, notice that using fetch is still a little hard to read. We use a and then
little hard to read. We use a and then we use response.json and then another.
we use response.json and then another. To make this code cleaner, we're going
To make this code cleaner, we're going to use an npm package called Axios.
to use an npm package called Axios. Axios is a cleaner way to make requests
Axios is a cleaner way to make requests to the back end. First, we're going to
to the back end. First, we're going to go to our command line and we'll open
go to our command line and we'll open the tab for the front end. And here
the tab for the front end. And here we'll press Ctrl C to stop the V server.
we'll press Ctrl C to stop the V server. And we're going to npm install Axios and
And we're going to npm install Axios and type at and we're going to give it a
type at and we're going to give it a version. So, we can click this link in
version. So, we can click this link in the description and then go to lesson 7.
the description and then go to lesson 7. And this is a version of Axios we're
And this is a version of Axios we're going to use. So, again, you should
going to use. So, again, you should always use the version that you see on
always use the version that you see on your page.
your page. So, select the version on your page and
So, select the version on your page and copy it
copy it and then paste it in our code and press
and then paste it in our code and press enter to install Axios.
enter to install Axios. Once that's installed, we're going to
Once that's installed, we're going to run mpm rundev to restart the vit
run mpm rundev to restart the vit server.
server. And then to use axios in our code, we're
And then to use axios in our code, we're going to go to the homepage. And at the
going to go to the homepage. And at the top, we're going to import axios without
top, we're going to import axios without curly brackets from a string axios.
curly brackets from a string axios. And now instead of using fetch, we're
And now instead of using fetch, we're going to use axios.get.
going to use axios.get. So this does the same thing as before
So this does the same thing as before except the data from the back end will
except the data from the back end will be saved directly inside the response.
be saved directly inside the response. So instead of doing all these steps,
So instead of doing all these steps, we can just get the data using response.
So let's console.log this to see if it works. So console.log and save.
works. So console.log and save. And then if we open the console,
And then if we open the console, you'll notice it gets the same products
you'll notice it gets the same products data as before.
data as before. But if we look at our code, it's a lot
But if we look at our code, it's a lot cleaner because we can just get the data
cleaner because we can just get the data directly from the response. So as you
directly from the response. So as you can see, Axios is a cleaner way to make
can see, Axios is a cleaner way to make requests to the back end. So now let's
requests to the back end. So now let's save this into git. In the get section,
save this into git. In the get section, we'll use a message use Axios to fetch
we'll use a message use Axios to fetch the data and commit.
Now, let's use this data from the back end to generate the HTML instead of
end to generate the HTML instead of using the products file that we had
using the products file that we had before. But first, we have a problem.
before. But first, we have a problem. This code is directly inside the
This code is directly inside the homepage component. That means whenever
homepage component. That means whenever the homepage changes or rerenders, it
the homepage changes or rerenders, it will run this code again and send
will run this code again and send another request to the back end.
another request to the back end. However, we just need to load the
However, we just need to load the products once on this page. We don't
products once on this page. We don't need to load the products over and over
need to load the products over and over again. To make this code run once, we
again. To make this code run once, we can put it inside a use effect. At the
can put it inside a use effect. At the top, we're going to import curly
top, we're going to import curly brackets use effect
brackets use effect from React.
from React. And above this code, we're going to do
And above this code, we're going to do use effect brackets and give this a
use effect brackets and give this a function brackets arrow and curly
function brackets arrow and curly brackets.
Use effect lets us control when some code runs. We're going to move this code
code runs. We're going to move this code inside the use effect. So we'll cut and
inside the use effect. So we'll cut and in here we'll paste.
in here we'll paste. And I'll select these lines and press
And I'll select these lines and press tab to reformat.
tab to reformat. By default, use effect runs this code
By default, use effect runs this code every time the component is created or
every time the component is created or updated. But we can control this. At the
updated. But we can control this. At the end of this function, we're going to add
end of this function, we're going to add a comma and an empty array. As a review,
a comma and an empty array. As a review, this is called a dependency array. The
this is called a dependency array. The dependency array lets us control when
dependency array lets us control when use effect runs. If we use an empty
use effect runs. If we use an empty array, that means this code will only
array, that means this code will only run once after the component is created.
run once after the component is created. And that's exactly what we need here. We
And that's exactly what we need here. We just need to load the products once on
just need to load the products once on this page. By the way, you might notice
this page. By the way, you might notice in the console that use effect runs
in the console that use effect runs twice instead of once. So, this is
twice instead of once. So, this is totally normal and it's caused by using
totally normal and it's caused by using strict mode in our app. Strict mode runs
strict mode in our app. Strict mode runs use effect twice to help us catch bugs
use effect twice to help us catch bugs and it only does this during
and it only does this during development.
development. So now that we have the data, how do we
So now that we have the data, how do we use it in this loop down here to
use it in this loop down here to generate the HTML?
generate the HTML? To do that, we need to save the products
To do that, we need to save the products data inside the state. So at the top,
data inside the state. So at the top, we're also going to import use state
we're also going to import use state from React.
from React. And at the top of our component, we're
And at the top of our component, we're going to do const square bracket equals
going to do const square bracket equals use state and brackets.
use state and brackets. As a review, use state gives us an array
As a review, use state gives us an array with two values. The first value is the
with two values. The first value is the name of the data. In this case, we'll
name of the data. In this case, we'll name it the products. And then we'll
name it the products. And then we'll type a comma. And the second value of
type a comma. And the second value of use state is the updater function. The
use state is the updater function. The updater function lets us update this
updater function lets us update this value and then it will regenerate the
value and then it will regenerate the HTML. We usually name the updater
HTML. We usually name the updater function set and then the name of the
function set and then the name of the data capital P products.
data capital P products. And finally between these brackets we're
And finally between these brackets we're going to put the starting value of the
going to put the starting value of the products. Let's just use an empty array.
products. Let's just use an empty array. And now after we get the products from
And now after we get the products from the back end, we're going to save it
the back end, we're going to save it into the state.
into the state. So instead of console.log, we'll use the
So instead of console.log, we'll use the updater function set products. This will
updater function set products. This will save the products data into here. And
save the products data into here. And then it's going to use this to generate
then it's going to use this to generate the HTML. So now we're using data from
the HTML. So now we're using data from the back end to generate the HTML. And
the back end to generate the HTML. And we don't need to import this file here
we don't need to import this file here anymore.
anymore. So the only thing to note is that the
So the only thing to note is that the name of the data has to match the name
name of the data has to match the name that we use down here. So that this code
that we use down here. So that this code is actually using the state.
is actually using the state. Now let's save
Now let's save and we'll check the website.
and we'll check the website. And everything still works except now
And everything still works except now we're using data from the back end to
we're using data from the back end to generate this HTML.
generate this HTML. We'll go back to our code
We'll go back to our code and we'll save this into git. In the git
and we'll save this into git. In the git section, we'll create the message use
section, we'll create the message use data from the back end to generate the
data from the back end to generate the HTML and commit.
Next, if we look at the website in the homepage, we also need to get the
in the homepage, we also need to get the cart from the back end because we need
cart from the back end because we need to display this quantity number up here.
to display this quantity number up here. To do that, we'll go back to our code
To do that, we'll go back to our code and we're going to make another request
and we're going to make another request to the back end to get the cart. So,
to the back end to get the cart. So, below this request, we're going to use
below this request, we're going to use axios again. Axios.get get brackets a
axios again. Axios.get get brackets a string and we'll give it the URL http
string and we'll give it the URL http colhost
col 3000 slash API/cart-
slash API/cart- items.
items. The way this works is the back end is
The way this works is the back end is running on http localhost col 3000 and
running on http localhost col 3000 and after this we add a URL path. Each URL
after this we add a URL path. Each URL path gives us different data. For
path gives us different data. For example, the URL path/ API/proucts
example, the URL path/ API/proucts gives us the products data. The URL
gives us the products data. The URL path/ API/cart items gives us the cart
path/ API/cart items gives us the cart data. So the URL path can actually be
data. So the URL path can actually be anything we want. Whoever creates the
anything we want. Whoever creates the backend decides what the URL paths will
backend decides what the URL paths will be. In the description, you can find a
be. In the description, you can find a documentation page for my backend.
documentation page for my backend. And this lists all the URL paths that we
And this lists all the URL paths that we can use. A common naming convention is
can use. A common naming convention is to start the URL path with slash API.
to start the URL path with slash API. API means application programming
API means application programming interface. Starting with / API makes it
interface. Starting with / API makes it clear that these URL paths are
clear that these URL paths are specifically for interacting with the
specifically for interacting with the backend.
backend. So we already learned how to use /
So we already learned how to use / API/roucts.
API/roucts. Now we're going to learn how to use /
Now we're going to learn how to use / API/cart items.
API/cart items. And remember whenever we make a request
And remember whenever we make a request to the back end it's going to take some
to the back end it's going to take some time to get a response. So we need to
time to get a response. So we need to wait for this code to finish using then
wait for this code to finish using then we'll give this a function
we'll give this a function and the response is going to be saved in
and the response is going to be saved in here.
here. So when we make a request to /appi/cart
So when we make a request to /appi/cart items, we're going to get the cart in
items, we're going to get the cart in the response. So in here, let's
the response. So in here, let's console.log
console.log the response data to see what the cart
the response data to see what the cart looks like. We'll save
looks like. We'll save and we'll check the console.
and we'll check the console. And you might need to refresh. And the
And you might need to refresh. And the back end responded with an array. And
back end responded with an array. And this array represents the cart that we
this array represents the cart that we have on the website. So each item in the
have on the website. So each item in the cart contains the product ID that we
cart contains the product ID that we want to buy and the quantity of that
want to buy and the quantity of that product. So next we're going to use this
product. So next we're going to use this to calculate the quantity and display it
to calculate the quantity and display it on the page. So we'll go back to our
on the page. So we'll go back to our code and first we need to save this cart
code and first we need to save this cart into state so we can use it to create
into state so we can use it to create the HTML.
the HTML. At the top, we'll create another state
At the top, we'll create another state const brackets equals use state
const brackets equals use state brackets.
brackets. And this state will save the cart,
And this state will save the cart, comma, and the updater function set
comma, and the updater function set capital C cart.
capital C cart. And let's set the starting value of the
And let's set the starting value of the cart to an empty array. And we'll scroll
cart to an empty array. And we'll scroll down. And now once we get the cart from
down. And now once we get the cart from the back end, we're going to save it in
the back end, we're going to save it in the state. So instead of console.log,
the state. So instead of console.log, we're going to use the updater function
we're going to use the updater function set cart. And now the cart from the back
set cart. And now the cart from the back end will be saved inside this variable.
end will be saved inside this variable. And remember that the quantity for the
And remember that the quantity for the cart is inside the header. So we need to
cart is inside the header. So we need to pass the cart into the header using a
pass the cart into the header using a prop. So here we'll add a prop. cart
prop. So here we'll add a prop. cart equals curly brackets and we'll give it
equals curly brackets and we'll give it the cart.
the cart. Let's save this file
Let's save this file and we'll go into our code and go to
and we'll go into our code and go to components header.jsx
components header.jsx and then inside the header we're going
and then inside the header we're going to get the cart from the props. To do
to get the cart from the props. To do that at the top, we'll type curly
that at the top, we'll type curly brackets and the cart. As a reminder,
brackets and the cart. As a reminder, this is a shortcut for this code.
this is a shortcut for this code. And now we're going to calculate the
And now we're going to calculate the total quantity in this cart. So at the
total quantity in this cart. So at the top, let's create a variable. Let total
top, let's create a variable. Let total quantity equals zero to start. And then
quantity equals zero to start. And then we'll loop through the cart using cart
we'll loop through the cart using cart for each brackets. And we'll give it a
for each brackets. And we'll give it a function.
And the inner function will get one parameter which is each item in the
parameter which is each item in the cart. So, we'll call this the cart item.
cart. So, we'll call this the cart item. And then each cart item has a quantity.
And then each cart item has a quantity. So, we're going to add that to this
So, we're going to add that to this total quantity up here. We'll do total
total quantity up here. We'll do total quantity plus equal the cart item.
And now we can scroll down till we see the cart quantity down here.
till we see the cart quantity down here. And instead of three every time, we're
And instead of three every time, we're going to insert the total quantity
going to insert the total quantity and save.
and save. And now if we look at our project
And now if we look at our project now, it will display the total quantity
now, it will display the total quantity using data from the back end. So now
using data from the back end. So now let's go back to our code.
let's go back to our code. And if we scroll up, you might see an
And if we scroll up, you might see an error here for props validation. Again,
error here for props validation. Again, this is an older feature of React. So,
this is an older feature of React. So, we can disable this check by going into
we can disable this check by going into our files and opening eslint.config.js.
our files and opening eslint.config.js. And then we'll scroll down inside this
And then we'll scroll down inside this rules object. We're going to add a
rules object. We're going to add a string react/prop-
string react/prop- types colon the string off. So, make
types colon the string off. So, make sure it's inside this rules object. We
sure it's inside this rules object. We can save.
can save. And now if we go back to the header, the
And now if we go back to the header, the props validation error should be gone.
props validation error should be gone. So now let's save this code into git.
So now let's save this code into git. We'll open the git section and we'll
We'll open the git section and we'll create a message get cart from the back
create a message get cart from the back end and display quantity and commit.
Next, if we go back to the homepage, so in our files, go to pages and homepage
in our files, go to pages and homepage and scroll up. Notice that for each
and scroll up. Notice that for each request, we're sending it to localhost
request, we're sending it to localhost 3000. So, we can actually set up a
3000. So, we can actually set up a shortcut in Vit. So, we don't have to
shortcut in Vit. So, we don't have to type localhost 3000 every time. So, we
type localhost 3000 every time. So, we can actually remove these
and save. And then we're going to go to our files
And then we're going to go to our files and we're going to open vit.config.js.
And inside here we're going to add the property server colon and an object. And
property server colon and an object. And inside we'll add the property proxy
inside we'll add the property proxy colon another object.
colon another object. And in here we'll add a string slash API
And in here we'll add a string slash API colon. And we're going to give this an
colon. And we're going to give this an object. And inside we'll add a target
object. And inside we'll add a target property colon and the string http colon
property colon and the string http colon double slash localhost colon 3000.
double slash localhost colon 3000. So this is called a server proxy
So this is called a server proxy configuration. This just means that if
configuration. This just means that if the URL path starts with / API like we
the URL path starts with / API like we had it before, the request will
had it before, the request will automatically go to localhost 3000. So
automatically go to localhost 3000. So we don't have to type it every time.
we don't have to type it every time. Another thing we can set up is when we
Another thing we can set up is when we load images, we also want to load them
load images, we also want to load them from the back end. Remember the back end
from the back end. Remember the back end should manage the data including the
should manage the data including the product images. So in here we'll also
product images. So in here we'll also add a comma and add a string slash
add a comma and add a string slash images colon and an object
images colon and an object and we'll give it the same target. So
and we'll give it the same target. So we'll select this and copy and in here
we'll select this and copy and in here we'll paste
we'll paste and save.
and save. And we need to do one more thing. We're
And we need to do one more thing. We're going to go inside index.html HTML and
going to go inside index.html HTML and in the head we're going to add less than
in the head we're going to add less than base slashgreater than and we're going
base slashgreater than and we're going to give this an attribute href equals
to give this an attribute href equals double quotes and a slash.
double quotes and a slash. So this adds slash in front of any
So this adds slash in front of any relative urls. All the image URLs start
relative urls. All the image URLs start with images and this will convert them
with images and this will convert them into slash images so that our redirect
into slash images so that our redirect will work. Let's save
will work. Let's save and we'll go back to the vit config.
and we'll go back to the vit config. So now when we get images, we're going
So now when we get images, we're going to get them from the back end. And now
to get them from the back end. And now because we changed the vit
because we changed the vit configuration, it's a good idea to stop
configuration, it's a good idea to stop the server with control c and then
the server with control c and then restart the server using mpm rundev.
And now let's check the website to make sure everything is working. So I'll just
sure everything is working. So I'll just refresh this to make sure. And
refresh this to make sure. And everything still looks good. So now
everything still looks good. So now we'll go back to our code and we'll save
we'll go back to our code and we'll save these changes into git. Inside git,
these changes into git. Inside git, we're going to type the message add
we're going to type the message add server proxy config for slash API and
server proxy config for slash API and slash images
slash images and commit.
Next, we're going to move on to the checkout page. So, let's open the
checkout page. So, let's open the website and we'll click the cart icon in
website and we'll click the cart icon in the top right
the top right and we're going to work on this page.
and we're going to work on this page. So, on this page, we also need the cart
So, on this page, we also need the cart to generate this HTML.
to generate this HTML. So, we'll go back to our code
So, we'll go back to our code and we'll open our files and we're going
and we'll open our files and we're going to open checkout page.jsx.
to open checkout page.jsx. And now inside here we could do another
And now inside here we could do another axios.get/appi/cart
axios.get/appi/cart again. But remember we already loaded
again. But remember we already loaded the cart on the homepage. It does not
the cart on the homepage. It does not make sense to reload the cart whenever
make sense to reload the cart whenever we switch pages. We just need to load
we switch pages. We just need to load the cart once for the entire website. To
the cart once for the entire website. To do that, we're going to go to the
do that, we're going to go to the homepage
homepage and we're going to share this cart
and we're going to share this cart between the two pages using the
between the two pages using the technique lifting the state up. As a
technique lifting the state up. As a review, this means we move the cart
review, this means we move the cart state up to an outer component. In this
state up to an outer component. In this case, the outer component is the app
case, the outer component is the app component here, which contains a
component here, which contains a homepage. So, we're going to lift the
homepage. So, we're going to lift the cart up into the app component. And from
cart up into the app component. And from here, we can share the cart between the
here, we can share the cart between the homepage and the checkout page. So,
homepage and the checkout page. So, first, let's go into the homepage again.
first, let's go into the homepage again. We're going to select this cart and cut
We're going to select this cart and cut and go back to the app. And we're going
and go back to the app. And we're going to lift it up in here by pasting it. And
to lift it up in here by pasting it. And we also need the code that loads the
we also need the code that loads the cart. So in the homepage,
cart. So in the homepage, we're going to select this code and cut
we're going to select this code and cut and save
and save inside app.jsx.
inside app.jsx. Below this, we're going to paste.
Below this, we're going to paste. And remember, we need to put this inside
And remember, we need to put this inside a use effect so that it only runs once.
a use effect so that it only runs once. So use effect brackets, give it a
So use effect brackets, give it a function,
function, and a empty array at the end. And we're
and a empty array at the end. And we're going to select it and cut. And inside
going to select it and cut. And inside here, paste.
And I'll select these lines and press tab to reformat them. And next, we'll
tab to reformat them. And next, we'll need to import this code. So at the top,
need to import this code. So at the top, we're going to import curly brackets,
we're going to import curly brackets, use state, and use effect
use state, and use effect from React.
from React. And we'll also import axios. So at the
And we'll also import axios. So at the top again, we're going to import axios
top again, we're going to import axios from the string axios.
from the string axios. So now that we have the cart, we're
So now that we have the cart, we're going to share it between these two
going to share it between these two pages using a prop. So for the homepage,
pages using a prop. So for the homepage, we'll add a prop. Cart equals curly
we'll add a prop. Cart equals curly brackets and we'll give it the cart. And
brackets and we'll give it the cart. And for the checkout page as well, cart
for the checkout page as well, cart equals curly brackets. and we'll save
equals curly brackets. and we'll save the cart.
the cart. Let's save this file.
Let's save this file. And we'll go into the homepage.
And we'll go into the homepage. And at the top, we need to access the
And at the top, we need to access the cart from the props using curly
cart from the props using curly brackets, the cart, and save.
brackets, the cart, and save. So, the code should work the same as
So, the code should work the same as before, except we're just getting the
before, except we're just getting the cart from the props. Now, let's open our
cart from the props. Now, let's open our website to make sure it works. We're
website to make sure it works. We're going to go to the homepage and refresh.
going to go to the homepage and refresh. And that looks good. We'll go back to
And that looks good. We'll go back to our code. So now that we lifted the
our code. So now that we lifted the state up, we can just load the card once
state up, we can just load the card once for the entire website instead of
for the entire website instead of reloading it on every page. We'll open
reloading it on every page. We'll open the get section and we'll give it the
the get section and we'll give it the message lift cart up and share it
message lift cart up and share it between pages and commit.
Next, we're going to use the cart to generate the HTML for the checkout page.
generate the HTML for the checkout page. So, first make sure that we pass the
So, first make sure that we pass the cart to the checkout page using this
cart to the checkout page using this prop. And now we're going to open the
prop. And now we're going to open the checkout page, which is here. And we're
checkout page, which is here. And we're going to access the cart from the props
going to access the cart from the props using curly brackets and the cart.
using curly brackets and the cart. And I will use this cart to generate the
And I will use this cart to generate the HTML down here. Now inside this code,
HTML down here. Now inside this code, we're going to press Ctrl+F to find some
we're going to press Ctrl+F to find some code. And we're going to search for
code. And we're going to search for cart- item-container.
cart- item-container. And here we're going to collapse this
And here we're going to collapse this element. And we'll collapse this element
element. And we'll collapse this element as well.
as well. So each of these represents a cart item
So each of these represents a cart item on the page. So let's generate this
on the page. So let's generate this using the cart. Above this we're going
using the cart. Above this we're going to insert cart map brackets and we'll
to insert cart map brackets and we'll give it a function brackets arrow and
give it a function brackets arrow and curly brackets. And this inner function
curly brackets. And this inner function gets one parameter which is the cart
gets one parameter which is the cart item. And for each item we're going to
item. And for each item we're going to return brackets some HTML.
return brackets some HTML. So for each cart item, we want to
So for each cart item, we want to generate this HTML. So let's just select
generate this HTML. So let's just select it and copy. And inside here, we're
it and copy. And inside here, we're going to paste.
going to paste. And to fix the formatting, we're going
And to fix the formatting, we're going to press control or commandshiftp
to press control or commandshiftp and run format document.
and run format document. Now let's scroll up.
Now let's scroll up. And remember, when we loop through an
And remember, when we loop through an array, each element needs a key
array, each element needs a key property.
property. Each cart item has a product ID which is
Each cart item has a product ID which is unique. So we're going to save the key
unique. So we're going to save the key as cart item.
as cart item. ID.
ID. And now instead of showing the same
And now instead of showing the same product every time, we're going to
product every time, we're going to insert the details from each cart item.
insert the details from each cart item. However, there is a problem here.
However, there is a problem here. Remember that the cart looks like this.
Remember that the cart looks like this. It doesn't have any product data on it.
It doesn't have any product data on it. To fix this, we're going to go to the
To fix this, we're going to go to the app component where we load the cart.
app component where we load the cart. And at the end of this URL, we can add
And at the end of this URL, we can add question mark expand equals product.
question mark expand equals product. So this is called a query parameter. A
So this is called a query parameter. A query parameter lets us add additional
query parameter lets us add additional information to our request. When the
information to our request. When the backend receives this query parameter,
backend receives this query parameter, it's going to add product details to the
it's going to add product details to the cart. So, it's going to expand the cart
cart. So, it's going to expand the cart with product details. So, now let's save
with product details. So, now let's save this file
this file and we're going to open the website and
and we're going to open the website and we're going to go to the checkout page
we're going to go to the checkout page and we're going to open the console. So,
and we're going to open the console. So, we'll rightclick inspect
we'll rightclick inspect and inside the console we're going to
and inside the console we're going to open the network tab.
open the network tab. So, I'm going to remove any search that
So, I'm going to remove any search that I have. And in here, we can see all the
I have. And in here, we can see all the requests that we make to the back end
requests that we make to the back end and the responses. So, by the way,
and the responses. So, by the way, requests only show up here if the
requests only show up here if the console was open before the request. So,
console was open before the request. So, we may need to refresh
we may need to refresh to get the request to show up in the
to get the request to show up in the network tab. And now we can see our
network tab. And now we can see our request to cart- items. If you don't see
request to cart- items. If you don't see it, you may need to search for it up
it, you may need to search for it up here by typing cart. And we have it
here by typing cart. And we have it here. So we can open this by clicking it
here. So we can open this by clicking it and then go into the response tab. And
and then go into the response tab. And here you can see the response from the
here you can see the response from the back end. So now you can see that each
back end. So now you can see that each cart item has a property called product.
cart item has a property called product. And this contains all the product
And this contains all the product details that we need for this page.
details that we need for this page. So now let's go back to our code.
So now let's go back to our code. And we're going to go to the checkout
And we're going to go to the checkout page.
page. And now instead of the socks every time,
And now instead of the socks every time, we're going to remove this
we're going to remove this and insert the cart item.
And we'll also replace the image. So we'll remove this and insert the cart
we'll remove this and insert the cart item.
item. image and down here we're going to
image and down here we're going to insert the price. Now, if we go to the
insert the price. Now, if we go to the homepage,
homepage, remember that in the homepage, we wrote
remember that in the homepage, we wrote some code here to display the price. So,
some code here to display the price. So, let's actually move this code into a
let's actually move this code into a function so we can reuse it. Inside our
function so we can reuse it. Inside our files, we're going to click the source
files, we're going to click the source folder and we'll create a new folder and
folder and we'll create a new folder and let's call it utils for utilities.
let's call it utils for utilities. And inside the utmost folder, we'll
And inside the utmost folder, we'll create a new file and we'll name it
create a new file and we'll name it money.js.
So this file contains utilities or code that helps us work with money. So in
that helps us work with money. So in here, let's create a function and we'll
here, let's create a function and we'll name it format money brackets and curly
name it format money brackets and curly brackets.
brackets. And we're going to copy the code from
And we're going to copy the code from the homepage. So, inside the homepage,
the homepage. So, inside the homepage, we're going to take all of this code and
we're going to take all of this code and copy it.
copy it. And inside money.js, inside here, we'll
And inside money.js, inside here, we'll paste it.
paste it. And now we're going to turn this into a
And now we're going to turn this into a string. At the front, we'll type backick
string. At the front, we'll type backick and at the end a back tick to create a
and at the end a back tick to create a template string. And remember in
template string. And remember in template strings to insert something, we
template strings to insert something, we need dollar curly brackets. And now,
need dollar curly brackets. And now, instead of getting the product.pricent
instead of getting the product.pricent price cents. We're going to pass it into
price cents. We're going to pass it into this function. So, let's name the
this function. So, let's name the parameter amount cents. And we're going
parameter amount cents. And we're going to remove this and replace it with
to remove this and replace it with amount cents. So, this function lets us
amount cents. So, this function lets us convert any amount cents into this
convert any amount cents into this format. At the end, let's return this
format. At the end, let's return this value from the function. and we'll
value from the function. and we'll export it so we can use it in other
export it so we can use it in other files and save.
files and save. So now we can go back to the homepage
So now we can go back to the homepage and at the top we're going to import
and at the top we're going to import curly brackets the format money function
curly brackets the format money function that we just created from a string and
that we just created from a string and we're going to locate the utils folder.
we're going to locate the utils folder. So, we'll go out of this folder with dot
So, we'll go out of this folder with dot dot slash utils slashmoney.
dot slash utils slashmoney. And now we'll scroll back down
And now we'll scroll back down and instead of this code, we're going to
and instead of this code, we're going to remove it and insert format money
remove it and insert format money brackets and we'll give it product.pric
brackets and we'll give it product.pric sets and save.
sets and save. And now let's reuse this function in the
And now let's reuse this function in the checkout page. So, we'll open the
checkout page. So, we'll open the checkout page, and at the top, we're
checkout page, and at the top, we're going to import curly brackets, the
going to import curly brackets, the format money function from a string, and
format money function from a string, and we're going to locate this file. And for
we're going to locate this file. And for me, I'll go out of this folder using dot
me, I'll go out of this folder using dot dot slash utils/money.
dot slash utils/money. Now, if you did the exercises from the
Now, if you did the exercises from the previous lesson, this file might be
previous lesson, this file might be inside a folder called checkout. In that
inside a folder called checkout. In that case, make sure you have two dot dot
case, make sure you have two dot dot slash in front. And now we're going to
slash in front. And now we're going to scroll back down
scroll back down and we're going to replace this money
and we're going to replace this money with curly brackets.
with curly brackets. Format money brackets. And we're going
Format money brackets. And we're going to give it the cart item.
to give it the cart item. price sets and we'll replace the
price sets and we'll replace the quantity. So, insert
quantity. So, insert cart item dot quantity and save.
cart item dot quantity and save. And now if we go back to the website,
And now if we go back to the website, now we are generating these cart items
now we are generating these cart items using data from the back end. And this
using data from the back end. And this was the default HTML we had before. So
was the default HTML we had before. So now we can go back to our code and we
now we can go back to our code and we can scroll down
can scroll down and we can remove the default HTML
and we can remove the default HTML and save.
and save. So now let's save these changes into
So now let's save these changes into git. We'll open the get section
git. We'll open the get section and at the top we'll type the message
and at the top we'll type the message generate
generate HTML for the cart items and commit.
Next, we're going to generate the HTML for the delivery options. So, we'll go
for the delivery options. So, we'll go back to the checkout page and we'll
back to the checkout page and we'll scroll to the top of this component. And
scroll to the top of this component. And here we'll load the delivery options
here we'll load the delivery options from the back end. So first let's import
from the back end. So first let's import Axios. At the top we'll import Axios
Axios. At the top we'll import Axios from the Axios npm package. And we'll
from the Axios npm package. And we'll also need import curly brackets. Use
also need import curly brackets. Use state and use effect to save the
state and use effect to save the delivery options. So import it from
delivery options. So import it from React.
React. And now inside the component
And now inside the component we'll create some state to save the
we'll create some state to save the delivery options const
delivery options const bracket equals use state and brackets
bracket equals use state and brackets and we'll name this delivery options
and we'll name this delivery options colon and the updater function set
colon and the updater function set delivery options
delivery options and we'll set the starting value to an
and we'll set the starting value to an empty array. Next, we'll get the
empty array. Next, we'll get the delivery options from the back end. So
delivery options from the back end. So here we'll do use effect brackets and
here we'll do use effect brackets and we'll give it a function brackets arrow
we'll give it a function brackets arrow and curly brackets. And at the end we'll
and curly brackets. And at the end we'll give it a comma and an empty dependency
give it a comma and an empty dependency array so that this code only runs once
array so that this code only runs once on this page. And inside here we're
on this page. And inside here we're going to call axials.get
going to call axials.get get brackets and the URL to get the
get brackets and the URL to get the delivery options is slash API slashd
delivery options is slash API slashd delivery-options
and then we're going to wait for the response to come back using then
response to come back using then brackets and give it a function brackets
brackets and give it a function brackets arrow and curly brackets and inside the
arrow and curly brackets and inside the function the response from the back end
function the response from the back end will be saved as the response parameter.
will be saved as the response parameter. So once we get this response, we're
So once we get this response, we're going to save it in the delivery options
going to save it in the delivery options up here using set delivery options
up here using set delivery options brackets
brackets response.
response. Now let's save this code and we're going
Now let's save this code and we're going to check the network tab to see if it
to check the network tab to see if it works. So, we'll open the console and
works. So, we'll open the console and we'll open the network tab. And we might
we'll open the network tab. And we might need to refresh to make sure we get the
need to refresh to make sure we get the request and we'll remove this and search
request and we'll remove this and search for delivery options. And we'll click
for delivery options. And we'll click one of these and then look at the
one of these and then look at the response tab. So, the backend responded
response tab. So, the backend responded with three delivery options. Each
with three delivery options. Each delivery option has the number of days
delivery option has the number of days it takes to deliver and the price in
it takes to deliver and the price in cents. However, if we open our website,
cents. However, if we open our website, notice that each delivery option also
notice that each delivery option also has a estimated delivery time. So, we
has a estimated delivery time. So, we could use this delivery days to
could use this delivery days to calculate this date on the front end.
calculate this date on the front end. But remember, it's generally the
But remember, it's generally the backend's job to manage the data and do
backend's job to manage the data and do these calculations.
these calculations. So, if we go back to our code,
So, if we go back to our code, this URL path also supports a query
this URL path also supports a query parameter called expand. So at the end
parameter called expand. So at the end we'll add question mark expand equals
we'll add question mark expand equals and I called it estimated
and I called it estimated delivery time.
delivery time. So when the back end sees this expand
So when the back end sees this expand parameter it will calculate the
parameter it will calculate the estimated delivery time for us and then
estimated delivery time for us and then give it back in our response. If we save
give it back in our response. If we save and check the console
and check the console and refresh
and refresh and open the response and now you'll see
and open the response and now you'll see that each delivery option now has an
that each delivery option now has an estimated delivery time in milliseconds.
estimated delivery time in milliseconds. So now we'll go back to our code and we
So now we'll go back to our code and we have what we need to display the date.
have what we need to display the date. As you can see it's generally the
As you can see it's generally the backend's job to manage the data and to
backend's job to manage the data and to do the calculations. And now the front
do the calculations. And now the front end's job is to present that data in an
end's job is to present that data in an easy to read way on the website.
easy to read way on the website. So now let's use these delivery options
So now let's use these delivery options to generate the HTML. We're going to
to generate the HTML. We're going to click in this file and press Ctrl+F to
click in this file and press Ctrl+F to search for code. And we'll search for
search for code. And we'll search for delivery dash options.
delivery dash options. And inside here we should see an element
And inside here we should see an element with a class name delivery option. So
with a class name delivery option. So we're going to collapse this element and
we're going to collapse this element and also collapse the other delivery options
also collapse the other delivery options and each of these represents one
and each of these represents one delivery option on the page. So let's
delivery option on the page. So let's generate this HTML using React. Above
generate this HTML using React. Above this we'll insert and we'll run the code
this we'll insert and we'll run the code delivery options dot map brackets and
delivery options dot map brackets and give it a function brackets arrow and
give it a function brackets arrow and curly brackets and the parameter will be
curly brackets and the parameter will be each delivery option
each delivery option and here we're going to return brackets
and here we're going to return brackets some HTML for each delivery option. So
some HTML for each delivery option. So we want to return this HTML. So we can
we want to return this HTML. So we can select it and copy. And inside here
select it and copy. And inside here we'll paste.
we'll paste. And we can fix the formatting using
And we can fix the formatting using control or commandshiftp
control or commandshiftp and press format document.
and press format document. And let's scroll up. And as always, we
And let's scroll up. And as always, we need a key prop whenever we're looping
need a key prop whenever we're looping through an array. So we'll add key
through an array. So we'll add key equals curly brackets. And each delivery
equals curly brackets. And each delivery option has a unique ID. So we'll just
option has a unique ID. So we'll just set it to the delivery option
set it to the delivery option ID.
ID. Next, we're going to replace these
Next, we're going to replace these values here. So first we'll do the
values here. So first we'll do the delivery date. Currently, we only have
delivery date. Currently, we only have the delivery time in milliseconds. So
the delivery time in milliseconds. So how do we display it as a date like
how do we display it as a date like this? To do that, we can use another npm
this? To do that, we can use another npm package called Dayjs.
package called Dayjs. So, we're going to go to the terminal
So, we're going to go to the terminal and go to the tab that's running our
and go to the tab that's running our front end. And we can press Ctrl C to
front end. And we can press Ctrl C to stop the server. And we're going to npm
stop the server. And we're going to npm install dayjs. And we'll type at to give
install dayjs. And we'll type at to give it a version. And we're going to click
it a version. And we're going to click this link in the description to get the
this link in the description to get the version of day.js we're going to use.
version of day.js we're going to use. And we'll copy that version and paste it
And we'll copy that version and paste it in here and press enter to install
in here and press enter to install day.js.
day.js. And after that we're going to npm rundev
And after that we're going to npm rundev to restart the server.
to restart the server. So the dayjs package helps us work with
So the dayjs package helps us work with dates and it helps us display a date in
dates and it helps us display a date in a particular format. To use it, we're
a particular format. To use it, we're going to scroll to the top and at the
going to scroll to the top and at the top we're going to import dayjs
top we're going to import dayjs from the package day js.
from the package day js. And now we'll scroll back down or we can
And now we'll scroll back down or we can control F and search for delivery
control F and search for delivery options.
And we'll scroll down here. And now above this date, we're going to insert.
above this date, we're going to insert. And we're going to run day JS and
And we're going to run day JS and brackets. And we're going to give Day.js
brackets. And we're going to give Day.js DJs a time in milliseconds which we
DJs a time in milliseconds which we actually have inside delivery option dot
actually have inside delivery option dot estimated
estimated delivery time ms or milliseconds.
delivery time ms or milliseconds. And now that we wrapped this in dayjs we
And now that we wrapped this in dayjs we can format it into this format. So after
can format it into this format. So after this bracket here, we're going to use
this bracket here, we're going to use the method dot format and brackets and
the method dot format and brackets and give it a string. To show the time in
give it a string. To show the time in this format, we're going to type D four
this format, we're going to type D four times,
times, which is the day of the week. And then
which is the day of the week. And then we'll type a comma to show this comma
we'll type a comma to show this comma and a space. And we'll type capital M
and a space. And we'll type capital M four times
four times to show the month and a space. and we'll
to show the month and a space. and we'll type capital D which will show this
type capital D which will show this date. And now we can remove this code.
date. And now we can remove this code. Next, we're going to replace this price.
Next, we're going to replace this price. If the price is free, we'll show free
If the price is free, we'll show free shipping. Otherwise, we're going to show
shipping. Otherwise, we're going to show the price dash shipping. So, we're going
the price dash shipping. So, we're going to scroll up to the inside of this loop
to scroll up to the inside of this loop here,
here, and we're going to create a variable for
and we're going to create a variable for the price. So, we'll do let price string
the price. So, we'll do let price string equals a string. And to make it easier,
equals a string. And to make it easier, we're going to set this to a default of
we're going to set this to a default of free shipping.
free shipping. And then we're going to overwrite this
And then we're going to overwrite this if we have a price. So, below this,
if we have a price. So, below this, we're going to check if brackets the
we're going to check if brackets the delivery option.
delivery option. Sense is greater than zero.
Sense is greater than zero. curly brackets. So if it is not free,
curly brackets. So if it is not free, we're going to overwrite this price
we're going to overwrite this price string equals a template string
string equals a template string and inside we're going to insert and
and inside we're going to insert and remember we have the format money
remember we have the format money function to display the price. So as I
function to display the price. So as I here we'll call format money and
here we'll call format money and brackets and we're going to give it the
brackets and we're going to give it the delivery option price sets.
delivery option price sets. And at the end we're going to add a dash
And at the end we're going to add a dash and shipping.
and shipping. And now we can scroll back down
And now we can scroll back down and instead of free shipping every time
and instead of free shipping every time we're going to insert the price string.
we're going to insert the price string. Next, we're going to scroll up a bit and
Next, we're going to scroll up a bit and there's a few things that we need to
there's a few things that we need to replace for this input type radio
replace for this input type radio element. So, this represents the
element. So, this represents the selector and there's a few special
selector and there's a few special attributes that we need to replace. The
attributes that we need to replace. The first one is the name attribute. So, the
first one is the name attribute. So, the name groups the selectors together. So,
name groups the selectors together. So, each set of selectors should have a
each set of selectors should have a unique name. This makes sure that for
unique name. This makes sure that for each product we can only select one of
each product we can only select one of them. So here instead of doing delivery
them. So here instead of doing delivery option one every time we're going to
option one every time we're going to replace this with a product ID because
replace this with a product ID because each set of selectors should belong to
each set of selectors should belong to one product.
one product. So in this code we're going to replace
So in this code we're going to replace it using curly brackets
it using curly brackets and change this to a template string
and change this to a template string using a back tick and a back tick and
using a back tick and a back tick and instead of one every time we're going to
instead of one every time we're going to insert and we'll insert the product ID.
insert and we'll insert the product ID. Now in this code we actually have access
Now in this code we actually have access to the cart item from above. So inside
to the cart item from above. So inside here we can just insert the cart item.
here we can just insert the cart item. ID.
ID. Next we also need to update this checked
Next we also need to update this checked property. So this determines if the
property. So this determines if the selector is checked. So we don't want
selector is checked. So we don't want the selector to be checked every time.
the selector to be checked every time. Each cart item has a delivery option ID
Each cart item has a delivery option ID and this is the one that should be
and this is the one that should be checked. So, inside here, we're going to
checked. So, inside here, we're going to add a new line. And we're going to make
add a new line. And we're going to make check equal and insert some code. And
check equal and insert some code. And we're going to compare if this delivery
we're going to compare if this delivery option do ID is equal to the cart items.
option do ID is equal to the cart items. Option ID.
Option ID. So only the delivery option that matches
So only the delivery option that matches the delivery option ID in the cart will
the delivery option ID in the cart will be checked. So that's all the things
be checked. So that's all the things that we have to replace in the delivery
that we have to replace in the delivery options. So now let's scroll down and we
options. So now let's scroll down and we can remove this default code
can remove this default code and save
and save and let's check the website.
and let's check the website. And now we're generating these delivery
And now we're generating these delivery options and the correct ones are checked
options and the correct ones are checked and we have the estimated delivery dates
and we have the estimated delivery dates for each displayed in an easyto read
for each displayed in an easyto read format.
format. The last thing we need to generate is
The last thing we need to generate is this delivery date up here. So, we'll go
this delivery date up here. So, we'll go back to the code
back to the code and we're going to scroll up
and we're going to scroll up um to the cart item and we're going to
um to the cart item and we're going to find the cart item container and this
find the cart item container and this delivery date here. So, this date is
delivery date here. So, this date is determined by whichever delivery option
determined by whichever delivery option is selected. So, first we need to find
is selected. So, first we need to find the delivery option that is selected.
the delivery option that is selected. So inside this loop, we'll create a
So inside this loop, we'll create a variable const for the selected
variable const for the selected delivery option and equals.
delivery option and equals. And to find this, we're going to get the
And to find this, we're going to get the delivery options and then use the method
delivery options and then use the method dot find and brackets.
dot find and brackets. And find gets a function. So brackets,
And find gets a function. So brackets, arrow, and curly brackets.
arrow, and curly brackets. And in this inner function, it receives
And in this inner function, it receives each delivery option. So we'll call it
each delivery option. So we'll call it delivery option.
delivery option. And I'll just add a new line here and
And I'll just add a new line here and select this code and press tab to format
select this code and press tab to format it a little bit.
it a little bit. So the way that find works is it's going
So the way that find works is it's going to loop through each delivery option.
to loop through each delivery option. And the first function here that returns
And the first function here that returns true is going to be the result. So
true is going to be the result. So that's how we find something. And then
that's how we find something. And then it's going to save it in this variable.
it's going to save it in this variable. So inside here we want to return the
So inside here we want to return the delivery option id that is equal to the
delivery option id that is equal to the cart items
cart items dot delivery option id. So the delivery
dot delivery option id. So the delivery option that matches what is inside the
option that matches what is inside the cart item will return true and that's
cart item will return true and that's going to be saved in here. And now we
going to be saved in here. And now we can replace this date. So we'll type
can replace this date. So we'll type curly brackets and we'll use day js
curly brackets and we'll use day js brackets and the selected
brackets and the selected delivery option dot estimated delivery
delivery option dot estimated delivery time ms
time ms and outside this bracket we'll use a
and outside this bracket we'll use a method dot format brackets and give it a
method dot format brackets and give it a string and to get this date format we'll
string and to get this date format we'll give it d four times a comma and capital
give it d four times a comma and capital M four times space and capital D.
M four times space and capital D. And now we can remove this date here.
And now we can remove this date here. And before we run this code, there is
And before we run this code, there is one small problem here because remember
one small problem here because remember the delivery options start out as empty.
the delivery options start out as empty. So if they are empty, we might not find
So if they are empty, we might not find the selected delivery option. To fix
the selected delivery option. To fix this in front of this code, we're going
this in front of this code, we're going to check if delivery options.length
to check if delivery options.length is greater than zero and type and and
is greater than zero and type and and as a review. This works like an if
as a review. This works like an if statement. It will check if delivery
statement. It will check if delivery options.length is greater than zero and
options.length is greater than zero and then only if it's true, it will run the
then only if it's true, it will run the rest of the code. So now we can save
rest of the code. So now we can save and check the website.
and check the website. And now we're generating everything here
And now we're generating everything here using data from the back end. So let's
using data from the back end. So let's go back to our code
go back to our code and we'll save this into git. Inside the
and we'll save this into git. Inside the git section, we'll type the message
git section, we'll type the message generate the HTML for the delivery
generate the HTML for the delivery options
options and commit.
Next, if we go back to the website, we're going to generate the HTML for the
we're going to generate the HTML for the payment summary here. Now, we could
payment summary here. Now, we could calculate all these numbers inside
calculate all these numbers inside React. However, we're going to use the
React. However, we're going to use the back end to calculate these numbers.
back end to calculate these numbers. Remember, the backend's job is to manage
Remember, the backend's job is to manage the data and to do the calculations. The
the data and to do the calculations. The front end's job is to present the data
front end's job is to present the data in an easy to read way. So let's go back
in an easy to read way. So let's go back to our code and we'll go back to the
to our code and we'll go back to the checkout page and we'll scroll to the
checkout page and we'll scroll to the top and we're going to create a state
top and we're going to create a state for the payment summary. So here we'll
for the payment summary. So here we'll type const square brackets equals use
type const square brackets equals use state and brackets
state and brackets and we'll name this payment summary,
and we'll name this payment summary, and the updater function set payment
and the updater function set payment summary.
summary. And as a starting value, we're going to
And as a starting value, we're going to use null because the payment summary is
use null because the payment summary is going to be an object. And it's a little
going to be an object. And it's a little easier to check if the object is not
easier to check if the object is not loaded if we set it to null at the
loaded if we set it to null at the start.
start. Next, we're going to use Axios to get
Next, we're going to use Axios to get the payment summary from the back end.
the payment summary from the back end. So down here, we'll use Axios.get get
So down here, we'll use Axios.get get brackets and we'll give it the URL path
brackets and we'll give it the URL path slash API slash payment-
slash API slash payment- summary
summary and we'll use dot then to wait for a
and we'll use dot then to wait for a response and give it a function
response and give it a function and inside here we can get the response.
and inside here we can get the response. Once we get the response, we're going to
Once we get the response, we're going to use set payment summary brackets
use set payment summary brackets response data to save the data inside
response data to save the data inside here. So now let's save and check the
here. So now let's save and check the response from the back end. So we'll go
response from the back end. So we'll go to our website and open the console and
to our website and open the console and open the network tab and we'll refresh
open the network tab and we'll refresh just in case. We can click this to
just in case. We can click this to remove the search and type payment
remove the search and type payment and we get the payment summary. So we
and we get the payment summary. So we can click this and you can see that in
can click this and you can see that in the response the back end calculated all
the response the back end calculated all the numbers that we need. So now we just
the numbers that we need. So now we just need to present this on the page.
need to present this on the page. Let's go back and we'll press CtrlF in
Let's go back and we'll press CtrlF in this file and we'll search for payment
this file and we'll search for payment dash summary and press enter to find the
dash summary and press enter to find the next result. And this section represents
next result. And this section represents the payment summary on the page. And now
the payment summary on the page. And now we'll replace these numbers with the
we'll replace these numbers with the numbers we got from the back end. So
numbers we got from the back end. So first we'll replace the total quantity
first we'll replace the total quantity here using curly brackets and we'll
here using curly brackets and we'll replace it with payment summary dot
replace it with payment summary dot total items.
total items. And here we'll replace the product cost.
And here we'll replace the product cost. I'll type a new line to make it a little
I'll type a new line to make it a little easier to read. And we'll insert.
easier to read. And we'll insert. And remember for money we need to format
And remember for money we need to format it using the function format money
it using the function format money brackets. and we'll get the payment
brackets. and we'll get the payment summary dot product cost set.
summary dot product cost set. We'll scroll down and we'll replace this
We'll scroll down and we'll replace this next number. So we'll remove it and new
next number. So we'll remove it and new line and curly brackets and we'll run
line and curly brackets and we'll run format money again brackets and this one
format money again brackets and this one is a shipping cost which is payment
is a shipping cost which is payment summary dot shipping cost sense.
summary dot shipping cost sense. Let's keep going. And this is the total
Let's keep going. And this is the total before tax. So we'll replace this and
before tax. So we'll replace this and insert format money brackets
insert format money brackets payment summary dot total cost before
payment summary dot total cost before tax cents.
tax cents. And we'll scroll down here and replace
And we'll scroll down here and replace this. insert format money brackets the
this. insert format money brackets the payment summary dot tax sets
payment summary dot tax sets and then down here we're going to
and then down here we're going to replace this one and insert format money
replace this one and insert format money brackets the payment summary dot total
brackets the payment summary dot total cost sense
cost sense and finally we only want to display this
and finally we only want to display this if the payment summary is loaded
if the payment summary is loaded otherwise we don't have this
otherwise we don't have this information. So above this code,
information. So above this code, we're going to type curly brackets and
we're going to type curly brackets and we'll check if payment summary and and
we'll check if payment summary and and brackets.
brackets. So this checks if the payment summary
So this checks if the payment summary object exists. If it's null at the
object exists. If it's null at the start, it's not going to run the rest of
start, it's not going to run the rest of the code. And now we're going to put all
the code. And now we're going to put all of this code inside here. So we'll
of this code inside here. So we'll select all this code
select all this code up to the place order button and we'll
up to the place order button and we'll cut
cut and inside here we're going to paste.
and inside here we're going to paste. Now a problem here is that we're
Now a problem here is that we're returning multiple elements inside this
returning multiple elements inside this brackets. So to fix that we need to wrap
brackets. So to fix that we need to wrap this in a fragment using less than
this in a fragment using less than greater than and remove this for now.
greater than and remove this for now. And at the end
And at the end after the button we'll do less than
after the button we'll do less than slashgreater than. So we're returning
slashgreater than. So we're returning one element inside this brackets. And
one element inside this brackets. And now we'll format our code using control
now we'll format our code using control or commandshiftp
or commandshiftp and run format document
and run format document and save.
and save. And that's it. Now we're generating the
And that's it. Now we're generating the payment summary using data from the back
payment summary using data from the back end. We'll go to our website. And that
end. We'll go to our website. And that looks good. So now let's go back to our
looks good. So now let's go back to our code and we'll save this into git. In
code and we'll save this into git. In the git section, we're going to type the
the git section, we're going to type the message generate HTML for the payment
message generate HTML for the payment summary and commit.
Next, we're going to work on the orders page. So, we'll go back to our files
page. So, we'll go back to our files and we're going to open the orders page.
and we're going to open the orders page. So, first of all, the orders page has a
So, first of all, the orders page has a header component. And remember, the
header component. And remember, the header now needs the cart in order to
header now needs the cart in order to display the quantity. So, we need to
display the quantity. So, we need to share the cart with the orders page
share the cart with the orders page first. We'll go to our files and open
first. We'll go to our files and open app.jsx.
app.jsx. And we'll scroll down. And here we'll
And we'll scroll down. And here we'll share the cart with the orders page
share the cart with the orders page using a prop cart equals curly brackets.
using a prop cart equals curly brackets. And we'll save the cart and save.
And we'll save the cart and save. And now we'll open the orders page
And now we'll open the orders page again. And at the top we're going to
again. And at the top we're going to access the prop using curly brackets and
access the prop using curly brackets and cart. And we're going to pass this cart
cart. And we're going to pass this cart into the header using cart equals curly
into the header using cart equals curly brackets and the cart.
brackets and the cart. Let's save.
Let's save. and we'll open the website and we're
and we'll open the website and we're going to go to the orders page. So,
going to go to the orders page. So, first we'll click here to go to the
first we'll click here to go to the homepage and then we'll click here to
homepage and then we'll click here to open the orders page and it should be
open the orders page and it should be working. So, now we're going to generate
working. So, now we're going to generate this HTML using data from the back end.
this HTML using data from the back end. So, we'll go back to the orders page and
So, we'll go back to the orders page and at the top we're going to import what we
at the top we're going to import what we need. So first we'll import axios from
need. So first we'll import axios from Axios and we'll also import curly
Axios and we'll also import curly brackets use state and use effect from
brackets use state and use effect from react.
react. And now down here first we'll create
And now down here first we'll create some state to save the orders using
some state to save the orders using const square brackets equals use state
const square brackets equals use state and brackets.
and brackets. And we'll call this data the orders,
And we'll call this data the orders, comma, and the updater function set
comma, and the updater function set orders.
orders. And at the start, we'll set the orders
And at the start, we'll set the orders to an empty array. And below this, we're
to an empty array. And below this, we're going to make a request to the back end
going to make a request to the back end using use effect brackets and a function
using use effect brackets and a function brackets arrow and curly brackets. And
brackets arrow and curly brackets. And down here, we'll give it a empty array
down here, we'll give it a empty array so that it only runs once. And inside
so that it only runs once. And inside we're going to use axios.get
we're going to use axios.get again. So brackets and the URL path for
again. So brackets and the URL path for the orders is slappi/ord
the orders is slappi/ord orders
orders and then we'll do dot then to wait for
and then we'll do dot then to wait for the response from the back end. We'll
the response from the back end. We'll give this a function brackets arrow and
give this a function brackets arrow and curly brackets. Inside this parameter is
curly brackets. Inside this parameter is the response from the back end. And once
the response from the back end. And once we get the response, we're going to save
we get the response, we're going to save it inside orders using set orders
it inside orders using set orders brackets
brackets response
response data. Let's save.
data. Let's save. And now we can check the network tab to
And now we can check the network tab to see if we got the orders. We'll open the
see if we got the orders. We'll open the console.
console. Inside the network tab, we can refresh
Inside the network tab, we can refresh and remove this and search for orders.
and remove this and search for orders. And down here, we'll click this request
And down here, we'll click this request and go to the response tab. And the back
and go to the response tab. And the back end gave us the orders that we need to
end gave us the orders that we need to display. Now, a problem here is that we
display. Now, a problem here is that we only have the product ID in the order,
only have the product ID in the order, but we also need to display some product
but we also need to display some product details on the website. And again, the
details on the website. And again, the backend supports an expand parameter for
backend supports an expand parameter for this URL path. So at the end here, we'll
this URL path. So at the end here, we'll add question mark expand equals
add question mark expand equals products. This time, make sure you have
products. This time, make sure you have an s at the end. So now let's save
an s at the end. So now let's save and check the network tab again. And
and check the network tab again. And we'll refresh.
we'll refresh. And now inside the orders request,
And now inside the orders request, you'll see that each order has the
you'll see that each order has the product ID, but it also has the other
product ID, but it also has the other data for the product. And this is what
data for the product. And this is what we need to display on the website.
we need to display on the website. So now we'll go into our code and we're
So now we'll go into our code and we're going to generate the HTML. So first
going to generate the HTML. So first we'll press control or command F and
we'll press control or command F and we're going to search for order dash
we're going to search for order dash container
container which is down here. And we can collapse
which is down here. And we can collapse this code and collapse the other order
this code and collapse the other order container. Each of these represents an
container. Each of these represents an order on the website. So, we're going to
order on the website. So, we're going to generate this HTML.
generate this HTML. At the top, we'll insert and we'll run
At the top, we'll insert and we'll run orders.m map brackets. And we'll give it
orders.m map brackets. And we'll give it a function.
a function. And this parameter is going to be each
And this parameter is going to be each order.
order. And for each order, we're going to
And for each order, we're going to return some HTML.
return some HTML. So, we want each order to be converted
So, we want each order to be converted into this HTML. We're going to select it
into this HTML. We're going to select it and copy it inside here. We'll paste.
and copy it inside here. We'll paste. Press control or command shiftp and run
Press control or command shiftp and run format document.
format document. And we'll scroll back up.
And we'll scroll back up. As always, we need a key prop when we're
As always, we need a key prop when we're looping through an array. We'll set the
looping through an array. We'll set the key equals. And each order has an order
key equals. And each order has an order ID property.
ID property. As usual, we're going to replace the
As usual, we're going to replace the values in here. Feel free to pause if
values in here. Feel free to pause if you want to try it yourself first. So
you want to try it yourself first. So for the delivery date, we're going to
for the delivery date, we're going to insert and we're going to use dayjs
insert and we're going to use dayjs brackets and each order has an order dot
brackets and each order has an order dot order time ms
order time ms and outside this bracket we use dot
and outside this bracket we use dot format brackets and a string. And to
format brackets and a string. And to display the date, we're going to use
display the date, we're going to use four capital M's for the month and a
four capital M's for the month and a capital D for the date. So now we also
capital D for the date. So now we also need to import day.js. So we'll scroll
need to import day.js. So we'll scroll to the top and at the top we'll import
to the top and at the top we'll import dayjs from a string dayjs.
dayjs from a string dayjs. And let's also import format money
And let's also import format money because we're going to use it later. So,
because we're going to use it later. So, import curly brackets format money from
import curly brackets format money from a string dot dot slashyouutills/
a string dot dot slashyouutills/ money.
money. Now, we're going to scroll back down
Now, we're going to scroll back down and we're going to replace the total
and we're going to replace the total order cost. So here we're going to
order cost. So here we're going to remove this and curly brackets we're
remove this and curly brackets we're going to insert format money brackets
going to insert format money brackets and give it the order dot total cost
and give it the order dot total cost sense.
sense. We'll scroll down and here we're going
We'll scroll down and here we're going to replace this with the order ID. So
to replace this with the order ID. So curly brackets order ID.
curly brackets order ID. Next, inside this element order details
Next, inside this element order details grid. This displays the list of products
grid. This displays the list of products in the order and we're going to generate
in the order and we're going to generate this using React as well. So above this
this using React as well. So above this we're going to use curly brackets and
we're going to use curly brackets and we're going to get the order products
we're going to get the order products array and we're going to loop through it
array and we're going to loop through it using map brackets and give it a
using map brackets and give it a function
function and save each product
and save each product and for each product we're going to
and for each product we're going to return brackets some HTML.
return brackets some HTML. So if we collapse this code and collapse
So if we collapse this code and collapse this element and this element and we
this element and this element and we also collapse these.
So three of these elements represents one product. It's a little different
one product. It's a little different because we don't have an element that
because we don't have an element that contains all of these because we're
contains all of these because we're using a grid here, but it works in a
using a grid here, but it works in a similar way. We're going to copy this
similar way. We're going to copy this code and inside return we're going to
code and inside return we're going to paste
paste and the one difference here is that if
and the one difference here is that if we scroll up
we scroll up we're returning multiple elements from
we're returning multiple elements from this function. So we need to wrap these
this function. So we need to wrap these in a fragment. So at the top we'll type
in a fragment. So at the top we'll type less than greater than. But then we have
less than greater than. But then we have another problem here which is remember
another problem here which is remember when we loop through an array each
when we loop through an array each element that we return should have a key
element that we return should have a key property and we can't add props to
property and we can't add props to fragments like this. To solve this we
fragments like this. To solve this we need to use the full fragment syntax. So
need to use the full fragment syntax. So we're going to scroll to the top and for
we're going to scroll to the top and for React we're going to import using comma
React we're going to import using comma the fragment component.
the fragment component. So we'll scroll back down and in here
So we'll scroll back down and in here we're going to use a full fragment
we're going to use a full fragment syntax
syntax and remove this. So this does the same
and remove this. So this does the same thing except now we can add a key prop
thing except now we can add a key prop to it equals curly brackets and let's
to it equals curly brackets and let's set the prop to the product ID.
set the prop to the product ID. and we'll scroll to the bottom.
and we'll scroll to the bottom. And before these brackets, remember to
And before these brackets, remember to add the closing fragment tag.
add the closing fragment tag. And finally, we'll press control or
And finally, we'll press control or commandshiftp
commandshiftp and format document.
and format document. And now we can replace this default code
And now we can replace this default code that we have down here.
Finally, we're going to replace each product's details. So here we're going
product's details. So here we're going to replace the name and insert the
to replace the name and insert the product name. And here let's also
product name. And here let's also replace the image
replace the image curly brackets. Replace it with product.
curly brackets. Replace it with product. And actually I made a mistake. I forgot
And actually I made a mistake. I forgot that all the product details are saved
that all the product details are saved in a property called product. So let's
in a property called product. So let's actually rename this to order product.
actually rename this to order product. And then here we're going to do the
And then here we're going to do the order product dotproduct ID and the
order product dotproduct ID and the order product.product.im
order product.product.im image and the order
image and the order product.product.name.
And then down here to replace the delivery date. This is directly on the
delivery date. This is directly on the order product. So we can remove this and
order product. So we can remove this and insert and we'll use dayjs and bracket
insert and we'll use dayjs and bracket and give it the order product dot
and give it the order product dot estimated delivery time ms and outside
estimated delivery time ms and outside these brackets we'll do dot format
these brackets we'll do dot format brackets and a string and we'll use the
brackets and a string and we'll use the format capital M four times for the
format capital M four times for the month and capital D for the date. And
month and capital D for the date. And then down here for the quantity, we're
then down here for the quantity, we're going to insert and the quantity is
going to insert and the quantity is directly on the order product dot
directly on the order product dot quantity
quantity and save.
and save. And now if we scroll down, we can also
And now if we scroll down, we can also remove the rest of this default HTML
remove the rest of this default HTML and save this file. And now let's check
and save this file. And now let's check our website.
our website. And everything should be working except
And everything should be working except we're generating the HTML for these
we're generating the HTML for these orders using data from the back end. So
orders using data from the back end. So now let's go back and we'll save this
now let's go back and we'll save this into git. We'll open the git section
into git. We'll open the git section and we'll give it the message generate
and we'll give it the message generate the HTML for the orders page and commit.
Next, if we look at our code right now, you'll notice we have a lot of code in
you'll notice we have a lot of code in one file. To make our code cleaner, we
one file. To make our code cleaner, we should separate our code into smaller
should separate our code into smaller components. So, let's go to our files
components. So, let's go to our files and we're going to start with the
and we're going to start with the homepage.
homepage. So, inside the homepage, we're showing a
So, inside the homepage, we're showing a grid of products. To make the code
grid of products. To make the code cleaner, we can separate this into its
cleaner, we can separate this into its own component. So, we'll go to the pages
own component. So, we'll go to the pages folder and we'll click it and we're
folder and we'll click it and we're going to create a new file and let's
going to create a new file and let's call it the products grid.jsx.
And now we have multiple components that are related to the homepage. So, usually
are related to the homepage. So, usually we organize this into a folder. So,
we organize this into a folder. So, inside here, we're going to create a new
inside here, we're going to create a new folder and we're going to call it home
folder and we're going to call it home and press enter.
and press enter. And we group all the components related
And we group all the components related to the homepage inside here. So, we'll
to the homepage inside here. So, we'll move the homepage.jsx.
move the homepage.jsx. And let's update the imports
And let's update the imports and also homepage.css
and also homepage.css and also the products grid.
And whenever we move files, we need to make sure the imports are still correct.
make sure the imports are still correct. So in homepage, I'm going to scroll up
So in homepage, I'm going to scroll up and we should make sure that we have two
and we should make sure that we have two dot dot slashes in front because now
dot dot slashes in front because now we're inside an additional folder. So
we're inside an additional folder. So that looks good to me. And we're also
that looks good to me. And we're also going to go to app.jsx
going to go to app.jsx and scroll up and make sure that the
and scroll up and make sure that the homepage is now inside the home folder.
homepage is now inside the home folder. So now let's save and check our website
So now let's save and check our website and go to the homepage to make sure it
and go to the homepage to make sure it still works. So now let's go back to our
still works. So now let's go back to our code and we're going to separate the
code and we're going to separate the products grid into its own file. So in
products grid into its own file. So in here we'll create the component using
here we'll create the component using export function
export function products grid brackets and curly
products grid brackets and curly brackets and we'll return some HTML
brackets and we'll return some HTML and we're just going to copy the HTML to
and we're just going to copy the HTML to here. So, inside the homepage, we're
here. So, inside the homepage, we're going to scroll down to the products
going to scroll down to the products grid and we can collapse this element
grid and we can collapse this element and select all this code and copy
and select all this code and copy inside the products grid. Inside here,
inside the products grid. Inside here, we can paste
we can paste and press control or commandshiftp and
and press control or commandshiftp and format document.
format document. Now, we'll scroll up and we're going to
Now, we'll scroll up and we're going to fix these errors. So first we need
fix these errors. So first we need access to the products. So we can pass
access to the products. So we can pass those in as a prop curly brackets
those in as a prop curly brackets products.
products. And down here we also need the format
And down here we also need the format money function. So at the top we're
money function. So at the top we're going to import curly brackets format
going to import curly brackets format money
money from a string and we'll find that utils
from a string and we'll find that utils file. So we need to get out of two
file. So we need to get out of two folders this time using dot dot slash
folders this time using dot dot slash dot dot slash utils/money
dot dot slash utils/money and save.
and save. And now inside the homepage at the top
And now inside the homepage at the top we're going to import our products grid.
we're going to import our products grid. So import curly brackets
So import curly brackets the products grid
the products grid from a string and it's right beside the
from a string and it's right beside the homepage. So we can just do dot slash
homepage. So we can just do dot slash products grid.
products grid. And then down here we can remove this
And then down here we can remove this HTML
HTML and just use our component less than
and just use our component less than products grid slashgreater than and we
products grid slashgreater than and we need to give it the products. So we'll
need to give it the products. So we'll create a prop products equals curly
create a prop products equals curly brackets and we'll give it the products.
brackets and we'll give it the products. So, as you can see, this makes the code
So, as you can see, this makes the code much cleaner when we separate it into
much cleaner when we separate it into smaller components. The last step is at
smaller components. The last step is at the top, we can remove this format money
the top, we can remove this format money function since we're not using it
function since we're not using it anymore. Let's save
anymore. Let's save and let's open the website and make sure
and let's open the website and make sure everything still works. So, that looks
everything still works. So, that looks good.
good. Next, we're going to do the checkout
Next, we're going to do the checkout page. So, we'll go back to our code
page. So, we'll go back to our code and we're going to open the checkout
and we're going to open the checkout page and we're going to scroll to the
page and we're going to scroll to the top.
And I'll leave separating the checkout header as an exercise. But we're going
header as an exercise. But we're going to scroll down here and we can move the
to scroll down here and we can move the order summary section into its own
order summary section into its own component. So, inside the pages folder,
component. So, inside the pages folder, I'm going to click it and create a new
I'm going to click it and create a new folder called checkout.
folder called checkout. Now, you might have already done this if
Now, you might have already done this if you did the exercises from the previous
you did the exercises from the previous lesson, but we're going to use this
lesson, but we're going to use this folder checkout. And I'm going to move
folder checkout. And I'm going to move the checkout page inside here.
the checkout page inside here. And update the imports and also move the
And update the imports and also move the CSS files.
And I'll make sure that the imports look good. So, in here at the top, make sure
good. So, in here at the top, make sure there's two dot dot slashes in front.
there's two dot dot slashes in front. And inside app.jsx,
And inside app.jsx, make sure that there is a checkout
make sure that there is a checkout folder in front of this component. So
folder in front of this component. So I'll go back to the checkout page and
I'll go back to the checkout page and I'll create a new file. Let's call it
I'll create a new file. Let's call it the order summary.jsx.
And we're going to create export function order summary brackets and
function order summary brackets and curly brackets. and we're going to
curly brackets. and we're going to return brackets the HTML for the order
return brackets the HTML for the order summary. Inside the checkout page, we're
summary. Inside the checkout page, we're going to scroll down
going to scroll down and find the order summary. We can
and find the order summary. We can collapse it and select this code and
collapse it and select this code and copy.
copy. Inside the order summary, we'll paste
Inside the order summary, we'll paste and press control or command shift P and
and press control or command shift P and format document.
format document. and we'll scroll to the top and we're
and we'll scroll to the top and we're going to need the delivery options and
going to need the delivery options and the cart inside here. So, we're going to
the cart inside here. So, we're going to get this from the props using curly
get this from the props using curly brackets, the cart, comma, and the
brackets, the cart, comma, and the delivery options.
delivery options. And we also need dayjs and the format
And we also need dayjs and the format money function. So at the top we'll also
money function. So at the top we'll also import dayjs
import dayjs from day js and import curly brackets
from day js and import curly brackets format money
format money from a string
from a string and we'll find the utils file which is
and we'll find the utils file which is dot dot slash dot dot slash utils
dot dot slash dot dot slash utils slashmoney
slashmoney and all the errors should now be gone.
and all the errors should now be gone. We'll save.
We'll save. And inside checkout page, we can remove
And inside checkout page, we can remove this code.
this code. And we can use our new component less
And we can use our new component less than order summary /grater than. And we
than order summary /grater than. And we need to give it the cart equals curly
need to give it the cart equals curly brackets and save the cart. And we need
brackets and save the cart. And we need to give it the delivery options equals
to give it the delivery options equals curly brackets. And give it the delivery
curly brackets. And give it the delivery options. And we need to import this at
options. And we need to import this at the top. So we'll scroll up and here we
the top. So we'll scroll up and here we can import curly brackets the order
can import curly brackets the order summary
summary from a string dot slash order summary.
from a string dot slash order summary. And we don't need dayjs anymore.
And we don't need dayjs anymore. So let's save
So let's save and check the website. And everything
and check the website. And everything still works.
still works. We'll go back
We'll go back and scroll down.
and scroll down. And next, we can also move the payment
And next, we can also move the payment summary into its own component. Feel
summary into its own component. Feel free to pause the video if you want to
free to pause the video if you want to try it yourself first. So, inside the
try it yourself first. So, inside the checkout folder, we'll click here and
checkout folder, we'll click here and create a new file, payment summary.jsx,
create a new file, payment summary.jsx, and we'll create the component export
and we'll create the component export function payment summary brackets and
function payment summary brackets and curly brackets. and we'll return the
curly brackets. and we'll return the HTML.
HTML. Inside the checkout page, we're going to
Inside the checkout page, we're going to collapse this element and select the
collapse this element and select the HTML and copy
HTML and copy inside the payment summary. We're going
inside the payment summary. We're going to paste
to paste control or command shiftp format
control or command shiftp format document
document and we're going to scroll back up and
and we're going to scroll back up and we're going to get the payment summary
we're going to get the payment summary from the props. So curly brackets
from the props. So curly brackets payment summary and we need the format
payment summary and we need the format money function. So up here import curly
money function. So up here import curly brackets format money from a string dot
brackets format money from a string dot dot slash dot do/youutils/money
and save. In the checkout page, we can remove this
In the checkout page, we can remove this code and replace it with less than
code and replace it with less than payment summary slashgreater than. And
payment summary slashgreater than. And we need to give this the payment summary
we need to give this the payment summary equals curly brackets and save the
equals curly brackets and save the payment summary.
payment summary. And as you can see, our code is much
And as you can see, our code is much cleaner now because we separated it into
cleaner now because we separated it into smaller components. So now we need to
smaller components. So now we need to import this. So, we're going to scroll
import this. So, we're going to scroll to the top and here we'll import curly
to the top and here we'll import curly brackets the payment summary
brackets the payment summary from a string dot slashpayment
from a string dot slashpayment summary.
summary. And we don't need format money anymore
And we don't need format money anymore and save.
and save. Let's go back to the website and
Let's go back to the website and everything is still working.
everything is still working. We'll go back to our code
We'll go back to our code and we're going to go inside the order
and we're going to go inside the order summary component.
summary component. So in here the code is still a little
So in here the code is still a little bit too complicated. So what we can do
bit too complicated. So what we can do is we can find this element with the
is we can find this element with the class delivery options and we can
class delivery options and we can separate this into its own component as
separate this into its own component as well. Feel free to pause the video if
well. Feel free to pause the video if you want to try this yourself first. So,
you want to try this yourself first. So, I'm going to go to the checkout folder
I'm going to go to the checkout folder and create a new file and name it
and create a new file and name it delivery options.jsx.
And we'll create a component export function delivery options brackets and
function delivery options brackets and curly brackets and return some HTML. And
curly brackets and return some HTML. And back to the order summary. And here we
back to the order summary. And here we can collapse this element and select it
can collapse this element and select it and copy.
and copy. Inside delivery options inside here we
Inside delivery options inside here we can paste. Control or command shiftp and
can paste. Control or command shiftp and format document.
format document. And we'll scroll to the top. Here we
And we'll scroll to the top. Here we need to get the delivery options using
need to get the delivery options using the props. So curly brackets delivery
the props. So curly brackets delivery options.
options. And we're going to import format money.
And we're going to import format money. So up here we're going to import curly
So up here we're going to import curly brackets format money from a string dot
brackets format money from a string dot dot slash dot dot slash utils/money
dot slash dot dot slash utils/money and we also need dayjs. So up here we'll
and we also need dayjs. So up here we'll import dayjs from a string dayjs
import dayjs from a string dayjs and I think we also need another thing
and I think we also need another thing here which is the cart item. So we're
here which is the cart item. So we're going to get this from the props as
going to get this from the props as well.
well. So up here we're also going to get the
So up here we're also going to get the cart item and save.
cart item and save. And now in the order summary we can
And now in the order summary we can replace all this code with our component
replace all this code with our component less than delivery options /grater than.
less than delivery options /grater than. And we're going to give it the cart item
And we're going to give it the cart item equals curly brackets. save the cart
equals curly brackets. save the cart item and give it the delivery options
item and give it the delivery options equals curly brackets save the delivery
equals curly brackets save the delivery options
options and we also need to import this. So at
and we also need to import this. So at the top
the top we can import curly brackets the
we can import curly brackets the delivery options
delivery options from a string
from a string dot slash delivery options
dot slash delivery options and save
and save and let's check our website and make
and let's check our website and make sure it still works. So that looks good
sure it still works. So that looks good to me. So if we go back to our code, you
to me. So if we go back to our code, you can see that our code is cleaner now
can see that our code is cleaner now after we separate this into another
after we separate this into another component. And remember, it's up to us
component. And remember, it's up to us how we want to separate our components.
how we want to separate our components. We can actually keep separating this
We can actually keep separating this into smaller components if we want. For
into smaller components if we want. For example, we can also have a cart item
example, we can also have a cart item details component or a delivery date
details component or a delivery date component, but I'll leave these as
component, but I'll leave these as exercises. I'm also going to leave the
exercises. I'm also going to leave the orders page as an exercise, but we can
orders page as an exercise, but we can just get started on it. So, here inside
just get started on it. So, here inside the pages folder, we're going to create
the pages folder, we're going to create a new folder for the orders page. So,
a new folder for the orders page. So, orders
orders and we're going to move this component
and we're going to move this component inside here
inside here and update the imports.
and update the imports. And we're going to move this inside here
And we're going to move this inside here as well. And just make sure the imports
as well. And just make sure the imports look okay. So in here, we'll scroll up.
look okay. So in here, we'll scroll up. Make sure that these two have two dot
Make sure that these two have two dot dot slashes in front. That looks good.
dot slashes in front. That looks good. And in app.jsx,
And in app.jsx, make sure that the orders page is now
make sure that the orders page is now inside an orders folder. So we'll save
inside an orders folder. So we'll save this and open the website.
this and open the website. And we're going to click here to go to
And we're going to click here to go to home and click here to go to orders. And
home and click here to go to orders. And the orders page should still be working.
the orders page should still be working. So I'll leave separating this as an
So I'll leave separating this as an exercise. We'll go back to our code and
exercise. We'll go back to our code and we'll save this into git. Inside the git
we'll save this into git. Inside the git section, we'll create the message
section, we'll create the message separate into smaller components and
separate into smaller components and commit.
Next, we're going to go back to our files and we're going to go to our
files and we're going to go to our homepage.
homepage. and we're going to review async await.
and we're going to review async await. Async await is a feature of JavaScript
Async await is a feature of JavaScript and it lets us write asynchronous code
and it lets us write asynchronous code like normal code. Right now we're using
like normal code. Right now we're using promises which means we need to use to
promises which means we need to use to wait for this code to finish and then
wait for this code to finish and then run this function with async await. We
run this function with async await. We can actually write this like normal
can actually write this like normal code. To do that in front of axios we
code. To do that in front of axios we can type await and space. So this is
can type await and space. So this is going to wait for this code to finish
going to wait for this code to finish and then it's going to move on to the
and then it's going to move on to the next line. And now because we're waiting
next line. And now because we're waiting for this code to finish, we can actually
for this code to finish, we can actually save this result in a variable. So at
save this result in a variable. So at the front we can save it in const
the front we can save it in const response equals await this code.
response equals await this code. And now we don't need to use dot then
And now we don't need to use dot then anymore
anymore and we can remove it.
and we can remove it. However, in order to use a weight, we
However, in order to use a weight, we need to be inside an async function. So
need to be inside an async function. So in front of this function, we need to
in front of this function, we need to add async and space. As you can see,
add async and space. As you can see, async8 lets us write asynchronous code
async8 lets us write asynchronous code like normal code or code that runs line
like normal code or code that runs line by line. And async await makes the code
by line. And async await makes the code easier to understand. So in react it's
easier to understand. So in react it's recommended to use async await instead
recommended to use async await instead of promises when we can. However, in
of promises when we can. However, in React there is a small problem with
React there is a small problem with using async await and use effect. As a
using async await and use effect. As a review, when we put async in front of a
review, when we put async in front of a function, this function will now return
function, this function will now return a promise. That's because this function
a promise. That's because this function has some asynchronous code inside or
has some asynchronous code inside or code that takes some time to finish. So
code that takes some time to finish. So that means that this entire function is
that means that this entire function is going to take some time to finish.
going to take some time to finish. That's why it has to return a promise.
That's why it has to return a promise. Now the problem is the inner function in
Now the problem is the inner function in use effect should not return a promise.
use effect should not return a promise. It should only return nothing or a
It should only return nothing or a cleanup function like this. A cleanup
cleanup function like this. A cleanup function is useful if we want to do some
function is useful if we want to do some cleanup when this component is removed.
cleanup when this component is removed. So because this inner function is now
So because this inner function is now returning a promise, it's sort of
returning a promise, it's sort of breaking the rules of use effect. To
breaking the rules of use effect. To solve this, we usually create a new
solve this, we usually create a new function inside use effect like const
function inside use effect like const get home data equals and create a new
get home data equals and create a new function brackets arrow and curly
function brackets arrow and curly brackets. And we're going to make this
brackets. And we're going to make this function async. And we'll leave this as
function async. And we'll leave this as an ordinary function.
an ordinary function. And now we're going to move our code
And now we're going to move our code inside here. So we'll cut it and paste
inside here. So we'll cut it and paste it. And now because we're inside an
it. And now because we're inside an async function, we can now use a weight
async function, we can now use a weight and it will also not mess up use effect.
and it will also not mess up use effect. At the end, we just need to run this
At the end, we just need to run this function using get home data and
function using get home data and brackets.
brackets. So this gets the same data as before but
So this gets the same data as before but it uses async await. So remember when
it uses async await. So remember when using async await inside use effect we
using async await inside use effect we need to create a new function and then
need to create a new function and then run the function otherwise it will break
run the function otherwise it will break the rules of use effect. So let's save
the rules of use effect. So let's save and check the homepage
and check the homepage and go to the homepage and everything
and go to the homepage and everything still works. So let's go back
still works. So let's go back and we'll use async await in the app
and we'll use async await in the app component
component where we get the cart. So here feel free
where we get the cart. So here feel free to pause if you want to try yourself
to pause if you want to try yourself first. We'll create a new function using
first. We'll create a new function using const. Let's call it fetch app data
const. Let's call it fetch app data equals a function brackets arrow and
equals a function brackets arrow and curly brackets.
curly brackets. And we'll move this code into the
And we'll move this code into the function. So we'll cut and paste and
function. So we'll cut and paste and we'll select this and press tab.
we'll select this and press tab. In front of the function we'll use
In front of the function we'll use async. And now we can use await inside.
async. And now we can use await inside. So in front of axios we'll type await to
So in front of axios we'll type await to wait for this to finish. And then we're
wait for this to finish. And then we're going to save the result in a variable
going to save the result in a variable const response equals this result.
const response equals this result. And now we can remove
And now we can remove and these brackets
and the code is much cleaner. Finally, we're going to run this function fetch
we're going to run this function fetch app data and brackets and save.
app data and brackets and save. And let's do the same thing in the
And let's do the same thing in the checkout page. So we'll go to the
checkout page. So we'll go to the checkout page here.
checkout page here. Feel free to pause if you want to try it
Feel free to pause if you want to try it yourself. const fetch checkout data
yourself. const fetch checkout data equals brackets arrow and curly brackets
equals brackets arrow and curly brackets and we'll move this code inside cut
and we'll move this code inside cut and in here paste and select these lines
and in here paste and select these lines and press tab and we're going to turn
and press tab and we're going to turn this into an async function so we can
this into an async function so we can use await inside. So in front of this
use await inside. So in front of this request, we're going to await.
request, we're going to await. And we're going to save it in a variable
And we're going to save it in a variable let response
let response equals. So we're going to use let
equals. So we're going to use let because we have two requests here and we
because we have two requests here and we might want to reuse this variable. And
might want to reuse this variable. And I'll add a new line to make it a little
I'll add a new line to make it a little easier to read. And now we can remove.
And then down here, we'll also use await to wait for this to finish. And we're
to wait for this to finish. And we're going to save the result inside response
going to save the result inside response equals.
equals. And now we can remove then.
And the last step is to run this function. So fetch checkout data and
function. So fetch checkout data and brackets and save.
brackets and save. We'll open the website. Make sure the
We'll open the website. Make sure the homepage is working and then go to the
homepage is working and then go to the checkout page and make sure this is
checkout page and make sure this is still working. So that looks good to me.
still working. So that looks good to me. We'll go back to our code
We'll go back to our code and that's async await. It lets us write
and that's async await. It lets us write asynchronous code like normal code. I'll
asynchronous code like normal code. I'll leave converting the orders page to
leave converting the orders page to async aait as an exercise. So now we can
async aait as an exercise. So now we can save this into git.
save this into git. We'll give it the message convert home
We'll give it the message convert home and checkout
and checkout to async await and commit.
In the next lesson, we're going to learn data mutation, which means instead of
data mutation, which means instead of just getting data from the back end,
just getting data from the back end, we'll update data in the back end, and
we'll update data in the back end, and we'll be able to add products to our
we'll be able to add products to our cart and create orders. And that's the
cart and create orders. And that's the end of this lesson. In this lesson, we
end of this lesson. In this lesson, we reviewed backend, which manages the data
reviewed backend, which manages the data for a website. We set up a backend for
for a website. We set up a backend for our project. We learned how to fetch
our project. We learned how to fetch data or get data from the back end. We
data or get data from the back end. We learned Axios, which is an easier way to
learned Axios, which is an easier way to make requests to the back end. We
make requests to the back end. We learned how to generate the HTML using
learned how to generate the HTML using the data from the back end. We separated
the data from the back end. We separated our pages into smaller components and we
our pages into smaller components and we learned async a weight which lets us
learned async a weight which lets us write asynchronous code like normal
write asynchronous code like normal code. Here are some exercises to help
code. Here are some exercises to help you practice what we learned in this
you practice what we learned in this lesson.
In this lesson, we're going to learn data mutation and we're going to make
data mutation and we're going to make the website interactive. Data mutation
the website interactive. Data mutation means we update data in the back end. If
means we update data in the back end. If we open the website
we open the website and I'll close some of these other tabs.
and I'll close some of these other tabs. If we go to the homepage,
If we go to the homepage, notice that right now we can only view
notice that right now we can only view the data. If we try to update this data,
the data. If we try to update this data, like we try to add to cart, it doesn't
like we try to add to cart, it doesn't do anything. So, we're going to make
do anything. So, we're going to make this add to cart button work. We'll go
this add to cart button work. We'll go to our code
to our code and we're going to find the add to cart
and we're going to find the add to cart button. So, I'll open my files and I'm
button. So, I'll open my files and I'm going to go to the homepage and we're
going to go to the homepage and we're going to open the products grid.
going to open the products grid. And we're going to scroll down in this
And we're going to scroll down in this file to this add to cart button. The
file to this add to cart button. The first step is to make this button
first step is to make this button interactive. So at the end we're going
interactive. So at the end we're going to add an on click attribute equals
to add an on click attribute equals curly brackets and give this a function
curly brackets and give this a function brackets arrow and curly brackets.
brackets arrow and curly brackets. As a review on click is called an event
As a review on click is called an event handler. When we click this button it
handler. When we click this button it will run this function.
will run this function. Now, inside here, we're going to add the
Now, inside here, we're going to add the product to the cart. So, we could try to
product to the cart. So, we could try to update the cart here in React, but then
update the cart here in React, but then we have to figure out where to save the
we have to figure out where to save the cart. Instead, in the real world, we use
cart. Instead, in the real world, we use the backend to update the cart and to
the backend to update the cart and to save the cart. The advantage of using
save the cart. The advantage of using the backend is it will simplify our
the backend is it will simplify our React code and we can share the data in
React code and we can share the data in the back end. So if we access this
the back end. So if we access this website from another computer, we can
website from another computer, we can access the updated cart using the back
access the updated cart using the back end.
end. So here to use a backend to add a
So here to use a backend to add a product to the cart. We're just going to
product to the cart. We're just going to make another request to the back end.
make another request to the back end. We're going to go to the top
We're going to go to the top and at the top we're going to import
and at the top we're going to import axios so that we can make another
axios so that we can make another request.
request. and we'll scroll back down.
and we'll scroll back down. And when we click this button, we're
And when we click this button, we're going to make a request to the back end
going to make a request to the back end using axios. And this time we're going
using axios. And this time we're going to use post and brackets.
to use post and brackets. So previously we used axios.get
So previously we used axios.get to get data from the backend. Post is a
to get data from the backend. Post is a different type of request.
different type of request. Is used to create data in the back end.
Is used to create data in the back end. In this case, we are adding a product to
In this case, we are adding a product to the back end. So, we're creating a new
the back end. So, we're creating a new cart item. That's why we use post.
cart item. That's why we use post. Inside here, we're going to give it a
Inside here, we're going to give it a URL path slash API/cart-
items. So, notice this is the same URL path that we used to get the cart. But
path that we used to get the cart. But when we use post, the backend will
when we use post, the backend will behave differently. This will create a
behave differently. This will create a cart item instead of getting the cart
cart item instead of getting the cart items.
items. Next, we need to tell the backend which
Next, we need to tell the backend which product to add to the cart. To do that,
product to add to the cart. To do that, we can give axios.post another value
we can give axios.post another value which is an object.
which is an object. When we use post, we can also send
When we use post, we can also send information to the back end using an
information to the back end using an object. And this is called the request
object. And this is called the request body. Now the back end needs to know two
body. Now the back end needs to know two things in order to add a product to the
things in order to add a product to the cart. First, it needs to know the
cart. First, it needs to know the product ID that we want to add. In this
product ID that we want to add. In this case, this button is for if we scroll
case, this button is for if we scroll up, the button is for this product right
up, the button is for this product right here. So, at the bottom,
here. So, at the bottom, we're going to tell the back end we want
we're going to tell the back end we want to add this product
to add this product ID to the cart. And we also need another
ID to the cart. And we also need another information which is the quantity that
information which is the quantity that we want to add. For now, let's just use
we want to add. For now, let's just use the quantity one. So this code will send
the quantity one. So this code will send a request to the back end telling it to
a request to the back end telling it to add this product to the cart with a
add this product to the cart with a quantity of one.
quantity of one. So now let's save this file
So now let's save this file and then we'll go to the website
and then we'll go to the website and we're going to go to this t-shirt
and we're going to go to this t-shirt product and we're going to click add to
product and we're going to click add to cart.
cart. And then we're going to refresh the
And then we're going to refresh the page.
page. And now if we look at the cart here, we
And now if we look at the cart here, we have one more product. The quantity is
have one more product. The quantity is four. If we open the cart and we scroll
four. If we open the cart and we scroll to the bottom, notice that it added the
to the bottom, notice that it added the t-shirt to the cart. So that's how we do
t-shirt to the cart. So that's how we do data mutation or update data in the back
data mutation or update data in the back end. We just send a request to the back
end. We just send a request to the back end and the backend takes care of
end and the backend takes care of updating and saving the data. So, in the
updating and saving the data. So, in the real world, we use the back end to
real world, we use the back end to manage and update the data.
manage and update the data. Next, notice that when we added this
Next, notice that when we added this product to the cart, we had to refresh
product to the cart, we had to refresh the page to see the new cart. It would
the page to see the new cart. It would be better if we could just reload the
be better if we could just reload the cart and update the page without needing
cart and update the page without needing to refresh.
to refresh. We'll go to our code
We'll go to our code and at the bottom, we're going to go to
and at the bottom, we're going to go to app.jsx.
So here this code reloads the cart from the back end and it updates the state.
the back end and it updates the state. After it updates the state, React will
After it updates the state, React will update the page. So when we add a
update the page. So when we add a product to the cart, we just need to
product to the cart, we just need to rerun this code and it will update the
rerun this code and it will update the page and then we don't have to refresh
page and then we don't have to refresh the page every time.
the page every time. We're going to select this entire
We're going to select this entire function and we'll cut.
function and we'll cut. And outside the use effect, we're going
And outside the use effect, we're going to paste it.
to paste it. And now that it's outside the use
And now that it's outside the use effect, we can share this function with
effect, we can share this function with our components.
our components. Now, let's actually rename this function
Now, let's actually rename this function to something more accurate like load
to something more accurate like load cart. And in here, load cart.
cart. And in here, load cart. And now we can share this with our
And now we can share this with our components using a prop. So we're going
components using a prop. So we're going to scroll down here and in the homepage
to scroll down here and in the homepage we're going to give it the prop load
we're going to give it the prop load cart equals curly brackets and we'll
cart equals curly brackets and we'll give it the function load cart and save.
give it the function load cart and save. And now if we go to the homepage
And now if we go to the homepage at the top, we'll get load cart out of
at the top, we'll get load cart out of the props and then give it to the
the props and then give it to the products grid component. So remember
products grid component. So remember this component contains the add to cart
this component contains the add to cart button. So in here we'll give it another
button. So in here we'll give it another prop load cart equals curly brackets and
prop load cart equals curly brackets and give it the load cart function and save.
give it the load cart function and save. And now inside the products grid
And now inside the products grid at the top, we're going to get load cart
at the top, we're going to get load cart out of the props. And then if we scroll
out of the props. And then if we scroll back down,
back down, after we update the cart, we're going to
after we update the cart, we're going to call the function load cart.
call the function load cart. So this means we will update the cart in
So this means we will update the cart in the back end and then we'll get the new
the back end and then we'll get the new cart and update the page without needing
cart and update the page without needing to refresh.
to refresh. One other thing we have to do here is
One other thing we have to do here is remember axios.post
remember axios.post contacts the back end. So this is
contacts the back end. So this is asynchronous code. It does not finish
asynchronous code. It does not finish right away. That means we need to wait
right away. That means we need to wait for this code to finish before going on
for this code to finish before going on to the next line. To wait for this to
to the next line. To wait for this to finish at the front of this code we can
finish at the front of this code we can type await and space. And remember in
type await and space. And remember in order to use await we need to be inside
order to use await we need to be inside an async function. So we'll add async.
an async function. So we'll add async. And also this code is not inside a use
And also this code is not inside a use effect. So we can just use async
effect. So we can just use async directly here like this.
directly here like this. After that load cart is also
After that load cart is also asynchronous. So it's a good idea to
asynchronous. So it's a good idea to await this code as well to be
await this code as well to be consistent. So now let's save
consistent. So now let's save and we'll check the website.
and we'll check the website. And first we'll go back to the homepage.
And first we'll go back to the homepage. And this time let's click add to cart on
And this time let's click add to cart on this toaster. So we'll click add to
this toaster. So we'll click add to cart.
cart. And now notice that the quantity here
And now notice that the quantity here updated to five without needing to
updated to five without needing to refresh. If we go to the cart and scroll
refresh. If we go to the cart and scroll down,
down, it also updated the cart on the page
it also updated the cart on the page without needing to refresh.
without needing to refresh. We'll go back to the homepage
We'll go back to the homepage and we're going to make these quantity
and we're going to make these quantity selectors work. So, this lets us add
selectors work. So, this lets us add more than one product to the cart at a
more than one product to the cart at a time. We're going to go to our code,
time. We're going to go to our code, and first we need to get the quantity in
and first we need to get the quantity in the quantity selector. To do that, we're
the quantity selector. To do that, we're going to use a controlled input. We
going to use a controlled input. We learned controlled inputs when creating
learned controlled inputs when creating the text box in the chatbot project. So,
the text box in the chatbot project. So, as a review, we'll scroll up
as a review, we'll scroll up and we're going to create a state to
and we're going to create a state to save the quantity. At the top, we're
save the quantity. At the top, we're going to import curly brackets use state
going to import curly brackets use state from React.
from React. And in this component,
And in this component, we're going to create a state const
we're going to create a state const bracket equals use state and brackets.
bracket equals use state and brackets. And we're going to name the state the
And we're going to name the state the quantity,
quantity, comma, and the updater function set
comma, and the updater function set quantity.
quantity. And we'll set the starting value of the
And we'll set the starting value of the quantity to one.
quantity to one. Then we're going to scroll down and
Then we're going to scroll down and we're going to find this select element.
we're going to find this select element. So this element represents the selector
So this element represents the selector on the page and we're going to give this
on the page and we're going to give this two props. The first prop is the value
two props. The first prop is the value equals curly brackets and the value is
equals curly brackets and the value is the quantity.
the quantity. The second prop is on change equals
The second prop is on change equals curly brackets. And we're going to give
curly brackets. And we're going to give this a function. So brackets, arrow and
this a function. So brackets, arrow and curly brackets.
curly brackets. And whenever we use an event handler
And whenever we use an event handler like on click or on change, this
like on click or on change, this function gets a parameter called event.
function gets a parameter called event. So event contains details about the
So event contains details about the event. In this case, the event will
event. In this case, the event will contain the quantity that we selected,
contain the quantity that we selected, which is one of these values. To get the
which is one of these values. To get the quantity that we selected, we can use
quantity that we selected, we can use event.target.
value and let's save the quantity was selected
and let's save the quantity was selected in a variable at the front. We'll create
in a variable at the front. We'll create const quantity selected equals this
const quantity selected equals this value.
value. Now one thing to be careful of is this
Now one thing to be careful of is this value is going to be one of these values
value is going to be one of these values here and these are going to be a string.
here and these are going to be a string. So we need to convert it into a number.
So we need to convert it into a number. To do that around this value, we're
To do that around this value, we're going to use the code capital n number
going to use the code capital n number open bracket and close bracket.
open bracket and close bracket. So this will convert the string here
So this will convert the string here into a number. So now that we have the
into a number. So now that we have the quantity that we selected, let's save it
quantity that we selected, let's save it into the state using set quantity
into the state using set quantity brackets
brackets quantity selected.
quantity selected. So this is called a controlled input.
So this is called a controlled input. When we have a value and an onchange
When we have a value and an onchange property when we change the selector,
property when we change the selector, it's going to set the quantity in the
it's going to set the quantity in the state and then the new state is going to
state and then the new state is going to be set as the value and then it updates
be set as the value and then it updates the page. So we're basically putting
the page. So we're basically putting react in the middle of this process so
react in the middle of this process so that we have access to the quantity that
that we have access to the quantity that we selected. And that's a review of how
we selected. And that's a review of how controlled inputs work. And let's also
controlled inputs work. And let's also console.log log the quantity selected to
console.log log the quantity selected to see if it works. So, we'll save
see if it works. So, we'll save and we'll go to the website
and we'll go to the website and we're going to open the console with
and we're going to open the console with rightclick inspect and the console. And
rightclick inspect and the console. And now on the website, we're going to click
now on the website, we're going to click the quantity selector here and we'll
the quantity selector here and we'll select three.
select three. And now inside the console, it displays
And now inside the console, it displays the quantity that we selected.
the quantity that we selected. However, there is a problem here. Notice
However, there is a problem here. Notice on this website when we change one
on this website when we change one quantity selector, it changes all of
quantity selector, it changes all of them. So if I change this one here to
them. So if I change this one here to five, it changes all the quantities. So
five, it changes all the quantities. So let's fix this. We'll go back to the
let's fix this. We'll go back to the code.
code. And if we scroll to the top,
And if we scroll to the top, this is happening because the state here
this is happening because the state here is outside of this loop. So that means
is outside of this loop. So that means the state is shared across all the
the state is shared across all the products. That's why when we change one
products. That's why when we change one selector, it changes all of them. To
selector, it changes all of them. To solve this problem, we need to move this
solve this problem, we need to move this state inside this loop so that each
state inside this loop so that each product has its own quantity. So, we're
product has its own quantity. So, we're going to select this code and cut.
going to select this code and cut. And inside this loop, we're going to
And inside this loop, we're going to paste.
However, this code actually breaks the rules of React hooks. We can only put
rules of React hooks. We can only put hooks at the top level of a component.
hooks at the top level of a component. We should not put hooks inside a loop
We should not put hooks inside a loop like this. To fix this problem, we can
like this. To fix this problem, we can separate each product into its own
separate each product into its own component.
component. So, inside the home folder, we're going
So, inside the home folder, we're going to create a new file and we'll name it
to create a new file and we'll name it product.jsx.
And we'll create a component for each product, which is export function
product, which is export function product brackets and curly brackets. And
product brackets and curly brackets. And we're going to return the HTML for each
we're going to return the HTML for each product. Inside the products grid, we're
product. Inside the products grid, we're going to collapse this code. And this is
going to collapse this code. And this is the code for each product. So, we'll
the code for each product. So, we'll select it and copy.
select it and copy. And inside the product component, we're
And inside the product component, we're going to paste
going to paste and then control or command shiftp
and then control or command shiftp format document.
format document. We'll scroll up
We'll scroll up and we'll go back to the products grid.
and we'll go back to the products grid. And we also need to copy over the state.
And we also need to copy over the state. So we're going to select this copy and
So we're going to select this copy and inside product at the top we're going to
inside product at the top we're going to paste.
paste. And we'll fix these errors. So first we
And we'll fix these errors. So first we need to import use state at the top. So
need to import use state at the top. So import curly brackets use state from
import curly brackets use state from react
react and the product we'll get it from the
and the product we'll get it from the props using curly brackets product.
props using curly brackets product. Scroll down
Scroll down we'll need the format money function as
we'll need the format money function as well as axios and load cart. So first
well as axios and load cart. So first we'll import curly brackets format money
we'll import curly brackets format money from a string and we'll find dot dot
from a string and we'll find dot dot slash do/youutils/money.
At the top we're going to import axios from axios
from axios and we'll get the load cart function
and we'll get the load cart function from the props. So, comma load cart and
from the props. So, comma load cart and save.
save. So, now each product has a separate
So, now each product has a separate state. It has its own quantity. And this
state. It has its own quantity. And this is no longer breaking the rules of hooks
is no longer breaking the rules of hooks because this state is at the top level
because this state is at the top level of this component.
of this component. We'll go back to the products grid.
We'll go back to the products grid. And here we can remove this HTML and
And here we can remove this HTML and just use our component less than product
just use our component less than product /greater than and we need to give it the
/greater than and we need to give it the product
product equals product and also the load cart
equals product and also the load cart function equals load cart
function equals load cart and we can remove this state and
and we can remove this state and remember when we loop through an array
remember when we loop through an array we need to give it a key prop. So at the
we need to give it a key prop. So at the front here we'll set a key equals curly
front here we'll set a key equals curly brackets and we'll set it to the product
brackets and we'll set it to the product id.
id. And finally we need to import this
And finally we need to import this component. So we'll scroll up and at the
component. So we'll scroll up and at the top we'll import curly brackets the
top we'll import curly brackets the product component from a string and it's
product component from a string and it's right beside this file. So, we'll do dot
right beside this file. So, we'll do dot slash product and we can remove these
slash product and we can remove these because they're no longer being used and
because they're no longer being used and save.
save. And since we have the key in this loop
And since we have the key in this loop here, we can also go into the product
here, we can also go into the product and remove the key in here and save.
and remove the key in here and save. Now, let's open the website.
Now, let's open the website. And if we change one of these selectors,
And if we change one of these selectors, notice that each product can now have
notice that each product can now have its own quantity.
its own quantity. Now that we have this quantity, when we
Now that we have this quantity, when we add a product to the cart, let's use
add a product to the cart, let's use this quantity. We'll go to our code
this quantity. We'll go to our code and we're going to go inside each
and we're going to go inside each product and we're going to scroll down
product and we're going to scroll down to the add to cart button here. And
to the add to cart button here. And instead of adding a quantity of one
instead of adding a quantity of one every time, we're going to add the
every time, we're going to add the quantity that is saved in the state
quantity that is saved in the state above. So now let's save
above. So now let's save and we'll try out this code. We'll open
and we'll try out this code. We'll open the website and let's go to this plate
the website and let's go to this plate product and we're going to select a
product and we're going to select a quantity of three this time and we'll
quantity of three this time and we'll click add to cart.
click add to cart. And notice that the cart updated and it
And notice that the cart updated and it now has a quantity of eight, which is
now has a quantity of eight, which is three more than before. If we open the
three more than before. If we open the cart
cart and we scroll to the bottom, we now have
and we scroll to the bottom, we now have three of these plates in the cart. So
three of these plates in the cart. So now the quantity selector is working.
now the quantity selector is working. Let's go back to the homepage.
Let's go back to the homepage. And this time, let's try adding a
And this time, let's try adding a product that already exists in the cart.
product that already exists in the cart. So, for the plate product, we're going
So, for the plate product, we're going to select the quantity of three again,
to select the quantity of three again, and we're going to click add to cart.
and we're going to click add to cart. Notice the cart quantity increased by
Notice the cart quantity increased by three. And if we open the cart and
three. And if we open the cart and scroll down, instead of adding a new
scroll down, instead of adding a new plate product, it just increased the
plate product, it just increased the quantity by three for a total of six. So
quantity by three for a total of six. So if the product already exists in the
if the product already exists in the cart, the backend handles this situation
cart, the backend handles this situation for us and just increases the quantity.
for us and just increases the quantity. Remember the purpose of the backend is
Remember the purpose of the backend is to manage the data. By letting the
to manage the data. By letting the backend manage and update the data, we
backend manage and update the data, we can simplify our React code.
can simplify our React code. Let's go back to our code
Let's go back to our code and we're going to do some cleanup in
and we're going to do some cleanup in this component.
this component. First, instead of doing quantity colon
First, instead of doing quantity colon quantity, we can use the shorthand
quantity, we can use the shorthand property syntax and just use the
property syntax and just use the quantity. It does the same thing as
quantity. It does the same thing as before.
before. Next, instead of putting our event
Next, instead of putting our event handlers directly in the HTML like this,
handlers directly in the HTML like this, we usually save this in a separate
we usually save this in a separate function. So, let's select all this code
function. So, let's select all this code and copy.
and copy. And we're going to scroll up.
And we're going to scroll up. And at the top we're going to create a
And at the top we're going to create a function const add to cart equals and
function const add to cart equals and we'll paste that code.
we'll paste that code. So we usually save the function
So we usually save the function separately like this. And then we can
separately like this. And then we can scroll down.
scroll down. We can remove this code and just use the
We can remove this code and just use the function name add to cart. And this
function name add to cart. And this makes the code easier to read. Next,
makes the code easier to read. Next, we'll scroll up to the quantity
we'll scroll up to the quantity selector. We can remove the console.log
selector. We can remove the console.log and we'll move this into a separate
and we'll move this into a separate function as well. We'll select this code
function as well. We'll select this code and copy
and copy and we'll scroll up
and we'll scroll up and here we're going to create another
and here we're going to create another function const select quantity and make
function const select quantity and make it equal and we'll paste that code and
it equal and we'll paste that code and we'll use this function below. So down
we'll use this function below. So down here,
here, instead of putting this function
instead of putting this function directly in the HTML, we use the
directly in the HTML, we use the function name select quantity and save.
function name select quantity and save. And that's it. We created the add to
And that's it. We created the add to cart feature. In the final project,
cart feature. In the final project, there's a small message that pops up
there's a small message that pops up when we click add to cart, but I'll
when we click add to cart, but I'll leave this as an exercise. Now, let's
leave this as an exercise. Now, let's save this into Git. We'll open the git
save this into Git. We'll open the git section and let's use the message create
section and let's use the message create add to cart feature and commit.
Before we continue, I want to go back to the code that we wrote. So, we're going
the code that we wrote. So, we're going to scroll up in this component and I
to scroll up in this component and I want to explain axios.post
want to explain axios.post a little more. As a review, when we send
a little more. As a review, when we send a request to the backend, we can set a
a request to the backend, we can set a URL path. Based on the URL path, the
URL path. Based on the URL path, the backend can do different things. For
backend can do different things. For example, if we use / API/roucts,
example, if we use / API/roucts, the backend gives us the products. If we
the backend gives us the products. If we use / API/cart items, the backend gives
use / API/cart items, the backend gives us the cart.
us the cart. In addition to the URL path, every
In addition to the URL path, every request also has a type. In the previous
request also has a type. In the previous lesson when we did axios.get/api/cart
items, this actually sends the type get and the URL path/ API/cart items to the
and the URL path/ API/cart items to the back end. So it sends two pieces of
back end. So it sends two pieces of information to the back end. The type
information to the back end. The type and the URL path.
and the URL path. When we did axios.post/appi/cart
When we did axios.post/appi/cart post/api/cart
post/api/cart items. This sends the type post and the
items. This sends the type post and the URL path /api/cart
URL path /api/cart items to the back end.
items to the back end. Now when the backend receives our
Now when the backend receives our request, it looks at both the type and
request, it looks at both the type and the URL path to decide what to do.
the URL path to decide what to do. For example, if the backend receives get
For example, if the backend receives get and/api/cart
and/api/cart items, it will get the cart items and
items, it will get the cart items and return it. If the backend receives post
return it. If the backend receives post and/appi/cart
and/appi/cart items, it will create a new cart item.
items, it will create a new cart item. So both the type and the URL path
So both the type and the URL path together determine what the backend
together determine what the backend does.
does. In the description, I have a
In the description, I have a documentation page for my backend,
documentation page for my backend, and it lists all the different requests
and it lists all the different requests that my backend supports. Notice that
that my backend supports. Notice that each request has a type and a URL path.
each request has a type and a URL path. By the way, the type is also called a
By the way, the type is also called a HTTP method.
HTTP method. When working with a backend, there are
When working with a backend, there are four common types of requests that we
four common types of requests that we use. Get, post, put, and delete. Get
use. Get, post, put, and delete. Get means we want to get some data. Post
means we want to get some data. Post means we want to create some data. Put
means we want to create some data. Put means we want to update some data and
means we want to update some data and delete means we want to delete some
delete means we want to delete some data.
data. So, Axios has a method for each type.
So, Axios has a method for each type. Axios.get Get sets the type of request
Axios.get Get sets the type of request to get. Axios.post
to get. Axios.post sets the type to post. Axios.put sets
sets the type to post. Axios.put sets the type to put. And axios.delete
the type to put. And axios.delete sets the type to delete. And then
sets the type to delete. And then between the brackets, we put the URL
between the brackets, we put the URL path.
path. So in our code, this sends a request to
So in our code, this sends a request to the back end with the type post and the
the back end with the type post and the URL path/ API/cart items. So the most
URL path/ API/cart items. So the most important thing to remember here is that
important thing to remember here is that each request has a type and a URL path
each request has a type and a URL path and both of these determine what the
and both of these determine what the backend will do.
backend will do. In the rest of this lesson, we'll get
In the rest of this lesson, we'll get more practice sending different types of
more practice sending different types of requests to the backend.
requests to the backend. Next, let's go back to the website.
Next, let's go back to the website. And inside the checkout page for each
And inside the checkout page for each product, we have these delivery options.
product, we have these delivery options. So, we're going to add the ability to
So, we're going to add the ability to update the delivery option. Because
update the delivery option. Because we're updating something in the cart,
we're updating something in the cart, we're going to practice using a put
we're going to practice using a put request.
request. First, let's find the code for these
First, let's find the code for these delivery options. We'll go back to our
delivery options. We'll go back to our code
code and open our files.
and open our files. and we're going to find the pages and
and we're going to find the pages and checkout folder and we're going to open
checkout folder and we're going to open delivery options.jsx
and we'll scroll down and here each of these represents one
and here each of these represents one delivery option on the page. So we're
delivery option on the page. So we're going to put an on click property on
going to put an on click property on this element. Now, usually we put the on
this element. Now, usually we put the on click on the input, but in this case,
click on the input, but in this case, this will make only the radial selector
this will make only the radial selector clickable. Instead, we want the entire
clickable. Instead, we want the entire delivery option, including the text, to
delivery option, including the text, to be clickable. So, that's why we're going
be clickable. So, that's why we're going to put the on click on the outside
to put the on click on the outside component.
component. So, we're going to add the on click
So, we're going to add the on click attribute equals curly brackets. And
attribute equals curly brackets. And let's create a function for this. Above
let's create a function for this. Above this, we'll create a function with const
this, we'll create a function with const and let's name it update delivery option
and let's name it update delivery option equals. And let's make it an async
equals. And let's make it an async function brackets arrow and curly
function brackets arrow and curly brackets because we know we're going to
brackets because we know we're going to make a request to the back end to update
make a request to the back end to update the delivery option.
the delivery option. Also, we create the function here inside
Also, we create the function here inside of this loop because we need access to
of this loop because we need access to each delivery option.
each delivery option. So next to update the delivery option
So next to update the delivery option for a product, we're going to make a
for a product, we're going to make a request to the back end. We're going to
request to the back end. We're going to scroll to the top and at the top we'll
scroll to the top and at the top we'll import axials from Axios
import axials from Axios and we'll scroll back down
and we'll scroll back down and inside here according to my
and inside here according to my documentation my backend supports the
documentation my backend supports the request put/ API/cart items. This lets
request put/ API/cart items. This lets us update the cart. For example, we can
us update the cart. For example, we can update the delivery option for a
update the delivery option for a product.
product. So, we're going to do axios.put
So, we're going to do axios.put brackets.
brackets. This sends a request with the type put
This sends a request with the type put to the back end. And we'll set the URL
to the back end. And we'll set the URL path to / API/cart-ite
path to / API/cart-ite items. And we'll add another slash. And
items. And we'll add another slash. And we're going to insert the product ID
we're going to insert the product ID that we want to update here at the end
that we want to update here at the end of the URL path. So in my documentation,
of the URL path. So in my documentation, colon product ID is known as a URL
colon product ID is known as a URL parameter. This means my backend wants
parameter. This means my backend wants the product ID we want to update inside
the product ID we want to update inside the URL. This is just a naming
the URL. This is just a naming convention that is popular with
convention that is popular with backends. When we update something, we
backends. When we update something, we usually put the ID of what we want to
usually put the ID of what we want to update inside the URL. So here first
update inside the URL. So here first we're going to change this to a template
we're going to change this to a template string using back ticks
string using back ticks and then at the end we'll insert dollar
and then at the end we'll insert dollar curly brackets and we're going to insert
curly brackets and we're going to insert the product ID that we want to update.
the product ID that we want to update. So the product ID is saved inside the
So the product ID is saved inside the cart item. So inside here we're going to
cart item. So inside here we're going to insert the cart item
insert the cart item product ID.
product ID. Next, we need to tell the backend which
Next, we need to tell the backend which delivery option we want to update to. To
delivery option we want to update to. To do that, we're going to give the backend
do that, we're going to give the backend some data. At the end of this, we'll add
some data. At the end of this, we'll add a comma and an object.
a comma and an object. And in my documentation, this section
And in my documentation, this section tells us what data we can send to the
tells us what data we can send to the back end. Here, we can send the delivery
back end. Here, we can send the delivery option ID that we want to update to.
option ID that we want to update to. So, we're going to give the back end the
So, we're going to give the back end the delivery option ID that we want to
delivery option ID that we want to update to. So, if we scroll up here, we
update to. So, if we scroll up here, we want to update to this delivery option.
want to update to this delivery option. So, we'll tell the backend to update to
So, we'll tell the backend to update to the delivery option ID.
the delivery option ID. And after we update the delivery option,
And after we update the delivery option, we're going to reload the cart and
we're going to reload the cart and update the page.
update the page. So in front of this, let's wait for this
So in front of this, let's wait for this to finish using await.
to finish using await. And remember, we created a function for
And remember, we created a function for reloading the cart called load cart. So
reloading the cart called load cart. So inside app.jsx,
inside app.jsx, we're going to share load cart with the
we're going to share load cart with the checkout page. So down here we'll add a
checkout page. So down here we'll add a prop load cart equals curly brackets
prop load cart equals curly brackets load cart and save.
load cart and save. And then inside the checkout page
And then inside the checkout page at the top we're going to get load cart.
at the top we're going to get load cart. And now we need to share this with the
And now we need to share this with the delivery options. Now the delivery
delivery options. Now the delivery options are actually inside the order
options are actually inside the order summary. So we're going to share it with
summary. So we're going to share it with the order summary first.
the order summary first. We'll scroll down to the order summary
We'll scroll down to the order summary and here we're going to give it the load
and here we're going to give it the load cart equals curly brackets load cart and
cart equals curly brackets load cart and save
save inside the order summary
inside the order summary at the top we're going to get from the
at the top we're going to get from the props load cart and then we're going to
props load cart and then we're going to share it with the delivery options. So,
share it with the delivery options. So, we'll scroll down to these delivery
we'll scroll down to these delivery options and we'll give it the prop load
options and we'll give it the prop load cart equals curly brackets load cart and
cart equals curly brackets load cart and save.
save. And finally, in the delivery options, we
And finally, in the delivery options, we can get load cart from the props. So,
can get load cart from the props. So, comma load cart and scroll down.
comma load cart and scroll down. After we update the delivery option,
After we update the delivery option, we're going to await load cart and
we're going to await load cart and brackets so that we reload the cart and
brackets so that we reload the cart and update the page and we don't have to
update the page and we don't have to refresh to see the updates. Finally,
refresh to see the updates. Finally, we're going to take this function and
we're going to take this function and put it in this on click. So, update
put it in this on click. So, update delivery option
delivery option and save.
and save. Now let's go to the website
Now let's go to the website and we'll try changing a delivery
and we'll try changing a delivery option.
option. And now you can see that it updates when
And now you can see that it updates when we change the delivery option.
we change the delivery option. Now one last thing here is if we open
Now one last thing here is if we open the console,
the console, we're going to get this warning message
we're going to get this warning message saying we provided a check property
saying we provided a check property without an onchange handler. So let's
without an onchange handler. So let's fix this warning. We're going to go back
fix this warning. We're going to go back to the code
to the code and the warning means that for an input
and the warning means that for an input element, if we have a checked prop, we
element, if we have a checked prop, we should also have an onchange prop. On
should also have an onchange prop. On change lets us change the value of this
change lets us change the value of this input.
input. However, in our situation, we already
However, in our situation, we already use this on click up here to change the
use this on click up here to change the value of the input. So, we don't really
value of the input. So, we don't really need an onchange property. So in here to
need an onchange property. So in here to get rid of that warning, we can just add
get rid of that warning, we can just add an on change property equals curly
an on change property equals curly brackets and give it an empty function.
brackets and give it an empty function. And this will just make the warning go
And this will just make the warning go away. We'll save
away. We'll save and go back to our website.
and go back to our website. And let's refresh.
And let's refresh. And now if we change the delivery option
And now if we change the delivery option and check the console, we no longer get
and check the console, we no longer get that warning.
that warning. Next, we have another problem on this
Next, we have another problem on this page, which is when we update the
page, which is when we update the delivery option. The payment summary
delivery option. The payment summary here is not updating to show the new
here is not updating to show the new delivery price.
delivery price. To fix this, after we update a delivery
To fix this, after we update a delivery option, we also want to reload the
option, we also want to reload the payment summary. So, let's find the code
payment summary. So, let's find the code for reloading the payment summary. We'll
for reloading the payment summary. We'll go to our code
go to our code and we're going to open the checkout
and we're going to open the checkout page
page and we're going to scroll up
and we're going to scroll up and inside this use effect we have this
and inside this use effect we have this code here that reloads the payment
code here that reloads the payment summary.
summary. So we want to rerun this code after
So we want to rerun this code after updating the delivery option. Now we
updating the delivery option. Now we could separate this into a function and
could separate this into a function and then share it like we did with load
then share it like we did with load cart. However, we have an easier option
cart. However, we have an easier option here. Remember that in use effect at the
here. Remember that in use effect at the end we have this dependency array. So
end we have this dependency array. So this array determines when use effect
this array determines when use effect runs. Right now it's empty which means
runs. Right now it's empty which means use effect will only run once. However,
use effect will only run once. However, we can put values inside this array. And
we can put values inside this array. And whenever a value changes, it will rerun
whenever a value changes, it will rerun the use effect. In our situation, we can
the use effect. In our situation, we can put the value cart inside this
put the value cart inside this dependency array.
dependency array. And now whenever the cart changes, it
And now whenever the cart changes, it will rerun the use effect and update the
will rerun the use effect and update the payment summary. And that makes sense.
payment summary. And that makes sense. Every time the cart changes, we do want
Every time the cart changes, we do want to update the payment summary in case
to update the payment summary in case the cost of the order changes.
the cost of the order changes. So in React there are often multiple
So in React there are often multiple solutions to do something and we should
solutions to do something and we should try to pick the cleanest solution.
try to pick the cleanest solution. Also note that this will cause the
Also note that this will cause the delivery options to be reloaded which is
delivery options to be reloaded which is not really necessary. So we could
not really necessary. So we could separate reloading the payment summary
separate reloading the payment summary into another use effect but I'll leave
into another use effect but I'll leave this as an exercise.
this as an exercise. So now let's save
So now let's save and we'll go to our website.
and we'll go to our website. And now when we update the delivery
And now when we update the delivery option, notice that the payment summary
option, notice that the payment summary also updates to show the new delivery
also updates to show the new delivery price. And now this feature is working.
price. And now this feature is working. So now let's save this into git. We'll
So now let's save this into git. We'll go back to our code and open the git
go back to our code and open the git section.
section. And here we'll use a message create
And here we'll use a message create update delivery option feature and
update delivery option feature and commit.
Next, we're going to go to our website and we're going to work on deleting an
and we're going to work on deleting an item from the cart. So, we're going to
item from the cart. So, we're going to practice making a delete request to the
practice making a delete request to the back end. First, we're going to find the
back end. First, we're going to find the code for this delete link. We'll go to
code for this delete link. We'll go to our code
our code and in our files we're going to find the
and in our files we're going to find the order summary component
order summary component and we're going to scroll down in this
and we're going to scroll down in this component and find the delete link. If
component and find the delete link. If you did the exercises, this might be
you did the exercises, this might be inside a cart item details component.
inside a cart item details component. Now, for this delete link, we're going
Now, for this delete link, we're going to add an on click attribute equals
to add an on click attribute equals curly brackets. And we'll give this a
curly brackets. And we'll give this a function to run. Let's call it delete
function to run. Let's call it delete cart item. And let's create this
cart item. And let's create this function above. So, I'm going to scroll
function above. So, I'm going to scroll up
up and I'm going to create the function
and I'm going to create the function inside this loop because I need access
inside this loop because I need access to this cart item to delete. So in here
to this cart item to delete. So in here we'll create the function const delete
we'll create the function const delete cart item equals a function.
cart item equals a function. And let's make this an async function
And let's make this an async function because we know we're going to make a
because we know we're going to make a request to the back end. And first let's
request to the back end. And first let's import axios. So we'll scroll up and at
import axios. So we'll scroll up and at the top we'll import axios from a string
the top we'll import axios from a string axios.
axios. And then inside this function,
And then inside this function, my backend can receive a request called
my backend can receive a request called delete/appi/cart
delete/appi/cart items. And this will delete a product
items. And this will delete a product from the cart. So we'll do axials
from the cart. So we'll do axials dodelete
dodelete and brackets.
and brackets. This sends a request with the type
This sends a request with the type delete to the back end. For the URL
delete to the back end. For the URL path, we're going to use a template
path, we're going to use a template string and we'll do / API/cart-
string and we'll do / API/cart- items slash and we're going to insert
items slash and we're going to insert the product ID in the URL. Again, this
the product ID in the URL. Again, this is just a naming convention that my
is just a naming convention that my backend uses. So, we're going to insert
backend uses. So, we're going to insert the ID of what we want to delete. In
the ID of what we want to delete. In this case, we need to give the backend
this case, we need to give the backend the product ID we want to delete. So the
the product ID we want to delete. So the product ID is saved inside the cart
product ID is saved inside the cart item. So we're going to give the backend
item. So we're going to give the backend the cart item dot product ID. And that's
the cart item dot product ID. And that's it. When my backend receives a request
it. When my backend receives a request with the type delete and this URL path,
with the type delete and this URL path, it's going to delete this product from
it's going to delete this product from the cart. So after deleting the product,
the cart. So after deleting the product, let's reload the cart. First, at the
let's reload the cart. First, at the front of this, we'll type await to wait
front of this, we'll type await to wait for this code to finish. And then we're
for this code to finish. And then we're going to await load the cart and
going to await load the cart and brackets.
brackets. So, I have load cart already in the
So, I have load cart already in the order summary. If you did the exercises
order summary. If you did the exercises from the previous lesson, you may need
from the previous lesson, you may need to pass this function into your
to pass this function into your component using a prop.
component using a prop. So, now let's scroll down. And that's
So, now let's scroll down. And that's all we need to delete a product from the
all we need to delete a product from the cart and then reload and update the
cart and then reload and update the page. Let's save.
page. Let's save. We'll go to the website
We'll go to the website and we're going to delete this first
and we're going to delete this first product.
product. And notice it updates the cart and it
And notice it updates the cart and it also updates the payment summary. If we
also updates the payment summary. If we delete another product, you'll notice it
delete another product, you'll notice it updates the cart and updates the payment
updates the cart and updates the payment summary. So that's how we make the
summary. So that's how we make the delete link work. I'll leave updating
delete link work. I'll leave updating the quantity in the cart as an exercise.
the quantity in the cart as an exercise. So now let's save this into git. We'll
So now let's save this into git. We'll open the git section and then here we'll
open the git section and then here we'll use the message create delete cart item
use the message create delete cart item feature and commit.
Let's go back to the website. And in the checkout page, we're going to
And in the checkout page, we're going to add the ability to create an order. So,
add the ability to create an order. So, first let's find the code for this place
first let's find the code for this place order button. We'll go back to our code
order button. We'll go back to our code and in our files,
and in our files, we're going to open the payment summary
we're going to open the payment summary component and we're going to scroll down
component and we're going to scroll down to the bottom to this place order
to the bottom to this place order button. And to this button, we're going
button. And to this button, we're going to add a prop on click equals curly
to add a prop on click equals curly brackets. And we'll give it a function.
brackets. And we'll give it a function. Let's call it create order.
Let's call it create order. And now let's scroll up and create this
And now let's scroll up and create this function. So up here
function. So up here we're going to create const and we'll
we're going to create const and we'll name it create order equals an async
name it create order equals an async function brackets arrow and curly
function brackets arrow and curly brackets.
brackets. Again we're going to make a request to
Again we're going to make a request to the back end to create the order. So at
the back end to create the order. So at the top we're going to import axios from
the top we're going to import axios from a string axios
a string axios and in here for my back end we can send
and in here for my back end we can send a request with the type post and the URL
a request with the type post and the URL path /api/orders
path /api/orders to create an order. So we'll use the
to create an order. So we'll use the code axios.post post
code axios.post post to make a request with the type post and
to make a request with the type post and then give it the URL path slash API/
then give it the URL path slash API/ orders.
orders. And that's all we need. Remember the
And that's all we need. Remember the cart is already saved in the back end.
cart is already saved in the back end. So the back end can take that cart and
So the back end can take that cart and create an order for us.
create an order for us. So let's wait for this code to finish
So let's wait for this code to finish using a wait.
using a wait. And after we create an order, the back
And after we create an order, the back end will remove everything from our
end will remove everything from our cart. So we also need to reload our cart
cart. So we also need to reload our cart here. First we need to get the load cart
here. First we need to get the load cart function and that can be found in the
function and that can be found in the checkout page.
checkout page. So here we get load cart from the props
So here we get load cart from the props and we're going to share this with the
and we're going to share this with the payment summary. So, we'll scroll down
payment summary. So, we'll scroll down and in the payment summary, we'll share
and in the payment summary, we'll share load cart using a prop load cart equals
load cart using a prop load cart equals curly brackets load cart and save.
curly brackets load cart and save. And then inside the payment summary
And then inside the payment summary at the top in the props, we'll get comma
at the top in the props, we'll get comma load cart.
load cart. And now after we create an order, we're
And now after we create an order, we're going to await load cart and brackets to
going to await load cart and brackets to reload the cart and update the page.
reload the cart and update the page. Finally, after we create an order, let's
Finally, after we create an order, let's also redirect to the orders page so we
also redirect to the orders page so we can see our new order. To do that, React
can see our new order. To do that, React Router provides a hook that lets us
Router provides a hook that lets us navigate to another page or go to
navigate to another page or go to another page. At the top, we're going to
another page. At the top, we're going to import curly brackets use navigate
import curly brackets use navigate from React-Router.
from React-Router. And at the top of our component, we're
And at the top of our component, we're going to use const
going to use const equals use navigate and brackets.
equals use navigate and brackets. So use navigate gives us a function and
So use navigate gives us a function and this function lets us navigate to or go
this function lets us navigate to or go to another page in our app. So after we
to another page in our app. So after we create an order and we reload the cart,
create an order and we reload the cart, let's navigate to the orders page using
let's navigate to the orders page using navigate brackets and a string. And
navigate brackets and a string. And we're going to navigate to slash orders.
we're going to navigate to slash orders. Now, navigate is not asynchronous, so it
Now, navigate is not asynchronous, so it finishes immediately and we don't need
finishes immediately and we don't need to await this code. Let's save.
to await this code. Let's save. And we'll go to the website and test out
And we'll go to the website and test out the place order button.
the place order button. So, we could update the delivery option
So, we could update the delivery option to get a shipping cost. And then click
to get a shipping cost. And then click place order.
place order. And now you can see that it created a
And now you can see that it created a new order.
new order. You'll also see that it updated the
You'll also see that it updated the cart. So, the quantity is now zero. And
cart. So, the quantity is now zero. And it navigated us to the orders page.
it navigated us to the orders page. Once we are on the orders page, there's
Once we are on the orders page, there's some code at the top of the orders page
some code at the top of the orders page that loads the orders from the back end
that loads the orders from the back end and updates the page. And that's how
and updates the page. And that's how we're able to see our newest order here.
we're able to see our newest order here. So, that's how we create an order. I'll
So, that's how we create an order. I'll leave making these add to cart buttons
leave making these add to cart buttons work as an exercise.
work as an exercise. So now we finished all the major
So now we finished all the major features of our project. We can add
features of our project. We can add products to our cart. We can update the
products to our cart. We can update the cart and we can create an order. And
cart and we can create an order. And you'll see that in the real world, we
you'll see that in the real world, we use a backend to manage and update all
use a backend to manage and update all the data.
the data. And in our React code, we just make
And in our React code, we just make requests to the back end and then update
requests to the back end and then update the page. The advantage of letting the
the page. The advantage of letting the backend manage the data is that it will
backend manage the data is that it will simplify our code a lot. So now let's
simplify our code a lot. So now let's save this into git. Go to the git
save this into git. Go to the git section and at the top we'll type make
section and at the top we'll type make create order button work and commit.
And now we finished all the major features of our project. In the next
features of our project. In the next lesson, we'll learn how to create
lesson, we'll learn how to create automated tests in React to make sure
automated tests in React to make sure our code still works whenever we make
our code still works whenever we make changes. And that's the end of this
changes. And that's the end of this lesson. In this lesson, we learned data
lesson. In this lesson, we learned data mutation, which means to update data in
mutation, which means to update data in the back end. We learned different types
the back end. We learned different types of requests like get, post, put, and
of requests like get, post, put, and delete. We sent a post request to add
delete. We sent a post request to add products to the cart and to create an
products to the cart and to create an order. We sent a put request to update
order. We sent a put request to update the cart. We sent a delete request to
the cart. We sent a delete request to delete a product from the cart. We used
delete a product from the cart. We used the dependency array of use effect to
the dependency array of use effect to update the payment summary whenever the
update the payment summary whenever the cart changes. We learned the use
cart changes. We learned the use navigate hook which lets us navigate to
navigate hook which lets us navigate to another page using our code.
another page using our code. Thanks for watching so far. If you find
Thanks for watching so far. If you find this course valuable, you can support
this course valuable, you can support the channel by liking this video,
the channel by liking this video, leaving a comment, and subscribing.
leaving a comment, and subscribing. You can also check out the premium
You can also check out the premium version of this course where you'll get
version of this course where you'll get all the lessons ads free broken down
all the lessons ads free broken down into small videos, as well as additional
into small videos, as well as additional lessons and more projects that are not
lessons and more projects that are not in the public React course. Currently,
in the public React course. Currently, the premium course contains 11 lessons,
the premium course contains 11 lessons, and I'll be adding more lessons in the
and I'll be adding more lessons in the future. You can also get a certificate
future. You can also get a certificate of completion, create comments or
of completion, create comments or questions on specific topics, get
questions on specific topics, get progress tracking, search and course
progress tracking, search and course notes. You can also check out the
notes. You can also check out the membership where you can get this course
membership where you can get this course ads free separated by each lesson, AI
ads free separated by each lesson, AI videos, backend tutorials, and more.
videos, backend tutorials, and more. Thanks again, and let's continue with
Thanks again, and let's continue with the course. Here are some exercises to
the course. Here are some exercises to help you practice what we learned in
help you practice what we learned in this lesson.
In this lesson, we're going to add automated tests to our app. Automated
automated tests to our app. Automated tests means using code to test our app.
tests means using code to test our app. This is more efficient than manually
This is more efficient than manually opening the app and clicking around to
opening the app and clicking around to test it.
test it. To create automated tests in React,
To create automated tests in React, we're going to use an npm package. The
we're going to use an npm package. The two most popular packages for automated
two most popular packages for automated testing are justest and vest.
testing are justest and vest. We're going to use VEST because it
We're going to use VEST because it integrates well with Vit, but just and
integrates well with Vit, but just and Vest are very similar. If you learn one,
Vest are very similar. If you learn one, you can easily learn the other. First,
you can easily learn the other. First, we're going to install Vest to our
we're going to install Vest to our project. So, we're going to go to our
project. So, we're going to go to our command line and open the tab that's
command line and open the tab that's running the front end. And we'll stop
running the front end. And we'll stop the VIT server using C.
the VIT server using C. And we're going to npm install
And we're going to npm install dash save-dev
test. So, save dev means that vest is only for
So, save dev means that vest is only for development. This package is not needed
development. This package is not needed to run our app or to run our website.
to run our app or to run our website. And we're also going to add at to give
And we're also going to add at to give vest a specific version. So you can
vest a specific version. So you can click this link in the description, go
click this link in the description, go to lesson 9, and here you'll find the
to lesson 9, and here you'll find the version of Vest that we'll install. So
version of Vest that we'll install. So we'll copy that version and then paste
we'll copy that version and then paste it in here
it in here and press enter to install VEST.
Now that we installed Vest, we're ready to create our first automated test. So
to create our first automated test. So there are different types of automated
there are different types of automated tests that we can create. The first type
tests that we can create. The first type is called unit tests. A unit test means
is called unit tests. A unit test means we test one unit or one piece of the
we test one unit or one piece of the code. For example, if we look at our
code. For example, if we look at our files
files and we open our utils folder and open
and we open our utils folder and open money.js, JS.
money.js, JS. If we test a function like format money,
If we test a function like format money, this would be considered a unit test
this would be considered a unit test because it's just one piece of the code.
because it's just one piece of the code. However, if we test something like the
However, if we test something like the product component here, testing
product component here, testing components like this are not unit tests
components like this are not unit tests because they use many different pieces
because they use many different pieces of code together.
of code together. So, we'll start by creating unit tests
So, we'll start by creating unit tests for format money.
for format money. So, we're going to go to this money.js
So, we're going to go to this money.js file, and beside this file, we're going
file, and beside this file, we're going to create a new file for the tests. And
to create a new file for the tests. And we'll name it the same money, but this
we'll name it the same money, but this time we'll end with test.js.
So, the naming convention is to put it beside the original file and end it with
beside the original file and end it with test.js.
test.js. Now inside this test file at the top
Now inside this test file at the top we'll import curly brackets
we'll import curly brackets it
it from a string v test.
from a string v test. So it lets us create a test and we'll
So it lets us create a test and we'll also import
also import the format
the format money function from a string and import
money function from a string and import it from this file dot / money.
And now to create our first test, we're going to use it and brackets and we'll
going to use it and brackets and we'll give this a string.
give this a string. So this creates a test and the string
So this creates a test and the string here is the name of the test. So this
here is the name of the test. So this describes what we are testing. So let's
describes what we are testing. So let's give it a name like formats1
give it a name like formats1 1999
1999 cents as $119.99.
If we run format money with 19.99, it should give us $119.99
should give us $119.99 as the result. So this name is
as the result. So this name is describing what we want to test and a
describing what we want to test and a naming convention is to make this read
naming convention is to make this read like English. For example, it formats 1
like English. For example, it formats 1 1999 as 19.99.
1999 as 19.99. And then we're going to give this a
And then we're going to give this a function brackets arrow and curly
function brackets arrow and curly brackets.
brackets. And in here we're going to test if
And in here we're going to test if format money works correctly.
format money works correctly. To do that, we're also going to import
To do that, we're also going to import expect from vest. So expect lets us
expect from vest. So expect lets us check if the result is correct. So in
check if the result is correct. So in here we're going to run expect and
here we're going to run expect and brackets.
brackets. And in here we put the code that we want
And in here we put the code that we want to test. For example, let's put the code
to test. For example, let's put the code format money brackets and 1 n99.
format money brackets and 1 n99. And then expect has different methods
And then expect has different methods that we can use to check this result.
that we can use to check this result. One method is called dot to b and
One method is called dot to b and brackets.
brackets. So in this second bracket we can put the
So in this second bracket we can put the expected result of this code. So we said
expected result of this code. So we said that the expected result should be this
that the expected result should be this string here. So we'll give it
string here. So we'll give it dollar19.99.
So this code tests if this value is equal to this value. If they are equal,
equal to this value. If they are equal, this check has passed. If they are not
this check has passed. If they are not equal, this check has failed.
equal, this check has failed. And then expect is going to send this
And then expect is going to send this result to vest. and V test will display
result to vest. and V test will display a summary of what passed and what
a summary of what passed and what failed.
failed. So now let's run this test. We're going
So now let's run this test. We're going to save this file
to save this file and then in our command line, we're
and then in our command line, we're going to create a new tab for running
going to create a new tab for running the tests.
the tests. And first we have to be inside the
And first we have to be inside the e-commerce project folder. So we'll cd
e-commerce project folder. So we'll cd ecommerce
ecommerce dash project
dash project and we're going to run npx
and we're going to run npx vest.
So v test is going to search our code for all the files that end with test.js
for all the files that end with test.js and runs the tests inside and then it
and runs the tests inside and then it displays the result in the command line.
displays the result in the command line. So this tells us that our format money
So this tells us that our format money test here has passed.
Now let's create another test for format money. We'll go back to this test file
money. We'll go back to this test file and to create another test, we're just
and to create another test, we're just going to use it again
going to use it again and a string. And remember that we had
and a string. And remember that we had some problems with money not showing two
some problems with money not showing two decimals.
decimals. So let's test if it displays two
So let's test if it displays two decimals
decimals and give it a function.
and give it a function. And now inside here we can run expect
And now inside here we can run expect and brackets
and brackets format money brackets. And let's give it
format money brackets. And let's give it a value that might not show two decimals
a value that might not show two decimals like 1 090.
like 1 090. And then we'll check if this is correct
And then we'll check if this is correct using
using 2 tob and brackets and a string. And the
2 tob and brackets and a string. And the expected result of this code should be
expected result of this code should be dollar 10.90.
dollar 10.90. So we're going to check if this result
So we're going to check if this result is equal to this result. If we save,
is equal to this result. If we save, vest is actually watching our files for
vest is actually watching our files for changes. So when we save it will
changes. So when we save it will automatically rerun our tests. And now
automatically rerun our tests. And now you can see we have two tests that
you can see we have two tests that passed.
passed. Next inside each test we can have
Next inside each test we can have multiple checks. So in here let's add
multiple checks. So in here let's add another check using expect brackets.
another check using expect brackets. And let's try format money brackets with
And let's try format money brackets with a different value like 100. So we expect
a different value like 100. So we expect this to be dollar1.00.
this to be dollar1.00. So we'll do 2v brackets dollar 1.0
and save. Now v test will rerun all of our tests.
Now v test will rerun all of our tests. And now you can see that both tests
And now you can see that both tests still passed. So when we have multiple
still passed. So when we have multiple checks like this, all of the checks have
checks like this, all of the checks have to pass in order for this test to pass.
to pass in order for this test to pass. If one of these checks fails, the entire
If one of these checks fails, the entire test will fail and it will show up here.
test will fail and it will show up here. So as a quick example, if I change this
So as a quick example, if I change this and save,
and save, one of these checks failed. So we can
one of these checks failed. So we can see that this test has failed. So I'm
see that this test has failed. So I'm going to add it back and save.
Next, if we look at our file here, notice that these tests are related to
notice that these tests are related to the format money function. A best
the format money function. A best practice is to group these tests
practice is to group these tests together. To do that, at the top, we're
together. To do that, at the top, we're also going to import describe
also going to import describe from vest. So, describe groups test
from vest. So, describe groups test together. we call a group of tests a
together. we call a group of tests a test suite.
test suite. So above these tests, we're going to use
So above these tests, we're going to use the code describe and brackets and we'll
the code describe and brackets and we'll give this a string
give this a string and this is the name of the test suite
and this is the name of the test suite or the group of tests. So these tests
or the group of tests. So these tests are for the format money function and
are for the format money function and we'll give it a function brackets arrow
we'll give it a function brackets arrow and curly brackets
and curly brackets and we're going to move our test inside.
and we're going to move our test inside. So we'll select it and cut and paste
So we'll select it and cut and paste and save
and save and everything still passes
and everything still passes and we can see the test suite name over
and we can see the test suite name over here. So test suites basically help us
here. So test suites basically help us keep our tests more organized. If we
keep our tests more organized. If we want to test a different function inside
want to test a different function inside this file, we would create another test
this file, we would create another test suite and group our tests in there. So a
suite and group our tests in there. So a best practice is to always put our tests
best practice is to always put our tests inside a test suite, even if we only
inside a test suite, even if we only have one test suite. So now let's save
have one test suite. So now let's save this into git. We're going to go to the
this into git. We're going to go to the get section
get section and let's use the message create unit
and let's use the message create unit test for format
test for format money and commit.
Next, we'll create another type of test called an integration test. Integration
called an integration test. Integration test means we test multiple units or
test means we test multiple units or pieces of code working together.
pieces of code working together. For example, if we look at our files and
For example, if we look at our files and we open the product component,
we open the product component, testing a component would be considered
testing a component would be considered an integration test. Notice this uses
an integration test. Notice this uses multiple pieces of code like the format
multiple pieces of code like the format money function and the load cart
money function and the load cart function.
function. So now let's create tests for this file.
So now let's create tests for this file. Beside product.js,
Beside product.js, we're going to create a new file
we're going to create a new file and we'll name it product.est.jsx.
So we end with JSX this time because this will let us use component syntax in
this will let us use component syntax in this file like this.
this file like this. So, first let's actually copy the
So, first let's actually copy the imports from our money test file because
imports from our money test file because we're going to be using these again. So,
we're going to be using these again. So, we'll copy
we'll copy and in here
and in here we'll paste,
we'll paste, but this time we're going to import the
but this time we're going to import the product component from the dot /rouct
product component from the dot /rouct file.
And first we're going to create a test suite. So we use describe brackets and a
suite. So we use describe brackets and a string. And we're going to be testing
string. And we're going to be testing the product component.
the product component. And give this a function.
And give this a function. And inside we'll create our first
And inside we'll create our first integration test using it brackets and a
integration test using it brackets and a string.
string. And for components, the first thing we
And for components, the first thing we can check is if the component is
can check is if the component is displayed correctly. So for the product
displayed correctly. So for the product component, we can check if the name is
component, we can check if the name is correct, the image is correct and so on.
correct, the image is correct and so on. So we'll name this test it
So we'll name this test it displays the product details correctly.
displays the product details correctly. And we'll give it a function.
And now inside here, how do we check if this component displayed the details
this component displayed the details correctly? So when testing a function,
correctly? So when testing a function, we run the function and check the
we run the function and check the result. When testing a component, we
result. When testing a component, we render the component and check the
render the component and check the result. So render means to display the
result. So render means to display the component on the page. To render the
component on the page. To render the component in our test, we need to add
component in our test, we need to add some more npm packages. So, we're going
some more npm packages. So, we're going to go to our command line and right now
to go to our command line and right now vest is watching all of our files for
vest is watching all of our files for changes. So, we're going to stop vest
changes. So, we're going to stop vest using C or you can press Q to quit.
using C or you can press Q to quit. And now we're going to click this link
And now we're going to click this link in the description, go to lesson 9, and
in the description, go to lesson 9, and we're going to install all of these npm
we're going to install all of these npm packages that we need. So, we're going
packages that we need. So, we're going to select this and copy. And then in our
to select this and copy. And then in our command line, we're going to paste this
command line, we're going to paste this command
command and press enter to install all these
and press enter to install all these packages.
After installing, we also need to create some config files to test our
some config files to test our components. So, we'll go to our files
components. So, we'll go to our files and we'll scroll down and find
and we'll scroll down and find vit.config.js
vit.config.js and click it. And we're going to create
and click it. And we're going to create a new file and name this
a new file and name this vtest.config.js.
And we'll click this link in the description and go to lesson 9. We're
description and go to lesson 9. We're going to copy this setup code. So we're
going to copy this setup code. So we're going to select this and copy.
going to select this and copy. And then in here we'll paste that code
And then in here we'll paste that code and save.
and save. And we're also going to create another
And we're also going to create another file beside this.
file beside this. So here create a new file called setup
So here create a new file called setup capital T tests.js.
And we'll click the link in the description again and go to lesson 9.
description again and go to lesson 9. And we're going to copy this code
And we're going to copy this code and paste it in here
and paste it in here and save.
and save. So that's just some setup that we need
So that's just some setup that we need to do. If we look at this config file,
to do. If we look at this config file, you don't have to worry too much about
you don't have to worry too much about how this works. This is just some
how this works. This is just some standard setup. These two are required
standard setup. These two are required for component tests or integration tests
for component tests or integration tests to work. And this basically runs the
to work. And this basically runs the code inside this file before all of our
code inside this file before all of our tests. So in this file we import just
tests. So in this file we import just DOM and this basically adds a bunch of
DOM and this basically adds a bunch of methods to expect that help us test
methods to expect that help us test components.
Now that we have the setup, we're going to go back to our test
to go back to our test and at the top we're going to import
and at the top we're going to import curly brackets render
curly brackets render from the package at testing-
from the package at testing- library/react.
So this renders or displays a component in a fake web page specifically for
in a fake web page specifically for testing.
testing. Inside our test, we're going to use the
Inside our test, we're going to use the render function and brackets
render function and brackets and we'll tell it to render the product
and we'll tell it to render the product component using less than product
component using less than product slashgreater than.
slashgreater than. So next the product component has some
So next the product component has some props. So we need to provide these props
props. So we need to provide these props in our test. So in here we're going to
in our test. So in here we're going to add the prop product equals curly
add the prop product equals curly brackets
brackets and we're going to provide a sample
and we're going to provide a sample product to test with. To do that in our
product to test with. To do that in our files we're going to go to the starting
files we're going to go to the starting code folder and open the data folder and
code folder and open the data folder and open products.js.
open products.js. And here we have a bunch of sample
And here we have a bunch of sample products that we can use. So, let's just
products that we can use. So, let's just select the first product and copy it.
select the first product and copy it. And then in our test,
And then in our test, we're going to save the sample product
we're going to save the sample product in a variable const product equals and
in a variable const product equals and paste.
paste. And we're going to take this product and
And we're going to take this product and save it as the product prop.
save it as the product prop. Next, we also need to provide a load
Next, we also need to provide a load cart function to this component. So in
cart function to this component. So in our app, load cart actually contacts the
our app, load cart actually contacts the backend. However, in our tests, we
backend. However, in our tests, we should not contact a real backend
should not contact a real backend because the backend might not be
because the backend might not be available during tests. In our tests
available during tests. In our tests might accidentally update real data. So
might accidentally update real data. So instead, a best practice is to mock this
instead, a best practice is to mock this function in our tests. Mock means to
function in our tests. Mock means to create a fake version of this function.
create a fake version of this function. To create a mock at the top, we're going
To create a mock at the top, we're going to import vi from vest.
to import vi from vest. And we'll scroll back down and we'll
And we'll scroll back down and we'll create const load cart equals vi.fn. fn
create const load cart equals vi.fn. fn and brackets.
and brackets. So, vi.fn
So, vi.fn basically creates a fake function that
basically creates a fake function that doesn't do anything. So, this fake
doesn't do anything. So, this fake function is called a mock and we're
function is called a mock and we're going to give this mock to the
going to give this mock to the component. So, here we'll create a prop
component. So, here we'll create a prop load cart equals curly bracket and our
load cart equals curly bracket and our mock load cart. And this will prevent
mock load cart. And this will prevent our component from accidentally
our component from accidentally contacting the back end in our tests.
contacting the back end in our tests. And that's it. This will render the
And that's it. This will render the product component on a fake web page. So
product component on a fake web page. So now, how do we check if this component
now, how do we check if this component was displayed correctly? We can't see
was displayed correctly? We can't see the fake web page, but we can check it
the fake web page, but we can check it using our code. To do that, we're going
using our code. To do that, we're going to scroll up
to scroll up and we'll also import the screen from
and we'll also import the screen from testing library/react.
testing library/react. So screen lets us check the screen or
So screen lets us check the screen or the fake web page to see if everything
the fake web page to see if everything was rendered correctly
was rendered correctly in our test. After we render the
in our test. After we render the component, we're going to use screen and
component, we're going to use screen and the method
the method get by text and brackets.
get by text and brackets. So this searches the screen or the fake
So this searches the screen or the fake web page for an element with a specific
web page for an element with a specific text. So we'll give it a string
text. So we'll give it a string and first let's check if the product
and first let's check if the product name is displayed correctly. So, we'll
name is displayed correctly. So, we'll scroll up and we're going to copy this
scroll up and we're going to copy this product name.
product name. And then in here, we're going to paste.
And then in here, we're going to paste. And this will search the screen or the
And this will search the screen or the fake web page for an element with this
fake web page for an element with this text inside.
text inside. So, now we're going to check if this
So, now we're going to check if this element exists. That will tell us if we
element exists. That will tell us if we displayed the correct product on the
displayed the correct product on the page. To do that before this code, we'll
page. To do that before this code, we'll use expect and open bracket
use expect and open bracket and at the end a close bracket and we'll
and at the end a close bracket and we'll use the method dot to be in the document
use the method dot to be in the document and brackets.
and brackets. So this method is added by testing
So this method is added by testing library/jestdom
library/jestdom and this checks if this element exists
and this checks if this element exists on the screen or on the fake web page.
on the screen or on the fake web page. So now let's save
So now let's save and we'll run this test using vest in
and we'll run this test using vest in the command line. We'll run npx v test.
And all of our tests passed. Next, let's add some more checks to this
Next, let's add some more checks to this test. So, let's also check if the price
test. So, let's also check if the price was displayed correctly. So, here we'll
was displayed correctly. So, here we'll add another expect brackets and we'll
add another expect brackets and we'll use screen.get get by text
use screen.get get by text and a string and we're going to search
and a string and we're going to search for the price on the screen. So for the
for the price on the screen. So for the sample product, the price should be
sample product, the price should be dollar10.90.
dollar10.90. So, we'll scroll down and search for
So, we'll scroll down and search for dollar 10.90 on the screen. And we
dollar 10.90 on the screen. And we expect this dot to be in the document
expect this dot to be in the document and brackets
and brackets and save
and save and feed will rerun the test and tell us
and feed will rerun the test and tell us that this passed.
that this passed. Next, let's check if the product image
Next, let's check if the product image is correct.
is correct. So down here we'll use another expect
So down here we'll use another expect brackets
brackets screen dot but this time we can't use
screen dot but this time we can't use get by text because we're trying to find
get by text because we're trying to find an image. Instead we're going to add a
an image. Instead we're going to add a test ID to the image element. So in our
test ID to the image element. So in our files we'll open the product component
files we'll open the product component and we're going to scroll down until we
and we're going to scroll down until we find the product image here.
find the product image here. And for this element, we're going to add
And for this element, we're going to add an attribute data-
an attribute data- test id equals a string product dash
test id equals a string product dash image. So this ID lets us find the image
image. So this ID lets us find the image element in our tests. We could also use
element in our tests. We could also use the class name to find this element, but
the class name to find this element, but if we change our class name, it will
if we change our class name, it will break the test. To avoid this, we
break the test. To avoid this, we usually use an ID specifically for
usually use an ID specifically for testing like this. So now let's save.
testing like this. So now let's save. And in our test, we'll use screen dot
And in our test, we'll use screen dot get by test ID and brackets and a string
get by test ID and brackets and a string and the test ID product dash image. So
and the test ID product dash image. So this will give us the image element in
this will give us the image element in the product component.
the product component. Now let's check if this image element
Now let's check if this image element source attribute is equal to the
source attribute is equal to the products image up here. So we'll select
products image up here. So we'll select this image and copy
this image and copy and then down here
and then down here dot to have attribute
dot to have attribute brackets and we'll check the source
brackets and we'll check the source attribute if it's equal to the string
attribute if it's equal to the string and paste
and paste the image from our sample product
the image from our sample product and Save
and Save V test will rerun our tests and
V test will rerun our tests and everything passed. So we know we're
everything passed. So we know we're displaying the correct image.
displaying the correct image. Next, let's check the ratings image and
Next, let's check the ratings image and the rating count. Feel free to pause if
the rating count. Feel free to pause if you want to try it yourself first. So
you want to try it yourself first. So first we'll do expect
first we'll do expect open bracket the screen dot and we'll
open bracket the screen dot and we'll check the ratings image first.
check the ratings image first. So, we'll go to the product component
So, we'll go to the product component and we're going to scroll down until we
and we're going to scroll down until we find the image product rating stars and
find the image product rating stars and we'll give this a data dash test id
we'll give this a data dash test id equals
equals product rating stars image and save.
product rating stars image and save. And let's just select this test ID and
And let's just select this test ID and copy.
copy. And in our test,
And in our test, we'll get by test ID brackets a string
we'll get by test ID brackets a string and paste.
and paste. And we expect this dot to have attribute
And we expect this dot to have attribute brackets the source attribute equals a
brackets the source attribute equals a string.
string. And we'll go back to the product
And we'll go back to the product component.
component. And let's just copy the source attribute
And let's just copy the source attribute here. So we'll select it and copy.
here. So we'll select it and copy. And inside our test we're going to
And inside our test we're going to paste.
paste. Now for our sample product we have a
Now for our sample product we have a rating of
rating of 4.5.
4.5. So that means we take 4.5 and multiply
So that means we take 4.5 and multiply it by 10. We're going to get the value
it by 10. We're going to get the value 45.
45. And this is the rating image that should
And this is the rating image that should be displayed on the page. So we'll save.
be displayed on the page. So we'll save. And v test tells us everything passed.
And v test tells us everything passed. Finally, let's check the rating count.
Finally, let's check the rating count. So we'll expect brackets screen dot. And
So we'll expect brackets screen dot. And this time we're looking for text. So we
this time we're looking for text. So we can just use get by text brackets. And
can just use get by text brackets. And for this sample product, the count is
for this sample product, the count is 87.
87. So we'll look for the string 87.
So we'll look for the string 87. And we expect this to be in the document
And we expect this to be in the document and save.
and save. Vest will rerun and everything passed.
Vest will rerun and everything passed. So now we tested if the product
So now we tested if the product component displayed all the details
component displayed all the details correctly. So let's save this into git.
correctly. So let's save this into git. We'll open the git section
We'll open the git section and we'll use the message create
and we'll use the message create integration test for product component
integration test for product component and commit.
Next we're going to test user interactions.
interactions. In the product component, we have an add
In the product component, we have an add to cart button. We can also test
to cart button. We can also test clicking this add to cart button to see
clicking this add to cart button to see if it behaves correctly.
if it behaves correctly. So in our test file, let's create a new
So in our test file, let's create a new test using it brackets and a string. And
test using it brackets and a string. And let's name it adds a product to the cart
let's name it adds a product to the cart and give it a function.
So first let's render the product component again. So we'll scroll up
component again. So we'll scroll up and let's just copy all of this code. So
and let's just copy all of this code. So we'll select it
we'll select it to here and copy.
to here and copy. And then in our second test,
And then in our second test, we're going to paste.
we're going to paste. So this sets up the sample product and
So this sets up the sample product and the mock and then renders the product
the mock and then renders the product component again. So now that we rendered
component again. So now that we rendered this, how do we click the add to cart
this, how do we click the add to cart button in our test?
button in our test? Earlier we installed a package called
Earlier we installed a package called testing library/ user event. This
testing library/ user event. This package lets us simulate events like
package lets us simulate events like clicking a button. So at the top of our
clicking a button. So at the top of our test, we're going to scroll up and we'll
test, we're going to scroll up and we'll import user event from the package at
import user event from the package at testing- library/
testing- library/ user-event.
So this lets us simulate events like a click.
click. So now we'll scroll back down to our
So now we'll scroll back down to our test
test and first we need to set up user event
and first we need to set up user event using const user equals user event dot
using const user equals user event dot setup and brackets.
setup and brackets. So now we can simulate events using
So now we can simulate events using user.click.
So this simulates a click event and inside the brackets we're going to tell
inside the brackets we're going to tell it which element to click. So we want it
it which element to click. So we want it to click the add to cart button. So
to click the add to cart button. So first we need to get the add to cart
first we need to get the add to cart button inside our test. We'll go to our
button inside our test. We'll go to our files
files and in the product component,
and in the product component, let's scroll down to the add to cart
let's scroll down to the add to cart button and we're going to give this a
button and we're going to give this a data dash test ID equals a string add to
data dash test ID equals a string add to cart button.
cart button. And let's select this test ID and copy
And let's select this test ID and copy and save.
and save. And then in the product test, we're
And then in the product test, we're going to get the button using screen dot
going to get the button using screen dot get by test ID brackets
get by test ID brackets and a string and we'll paste the test
and a string and we'll paste the test ID.
ID. So this will get the add to cart button
So this will get the add to cart button from the screen.
from the screen. So let's save it in a variable const add
So let's save it in a variable const add to cart button
to cart button equals
equals and we're going to give this to
and we're going to give this to user.click
user.click add to cart button.
add to cart button. Next when we click this button it takes
Next when we click this button it takes some time for the page to process the
some time for the page to process the click. So user.click takes some time to
click. So user.click takes some time to finish. That means this is asynchronous
finish. That means this is asynchronous code and it returns a promise. To wait
code and it returns a promise. To wait for this to finish at the front, we're
for this to finish at the front, we're going to use await.
going to use await. And remember to use await we need to be
And remember to use await we need to be inside an async function. So above in
inside an async function. So above in this function, we're going to make it
this function, we're going to make it async.
async. And we'll scroll back down.
And we'll scroll back down. And now once we click the add to cart
And now once we click the add to cart button, this is going to make a request
button, this is going to make a request to the back end using axios.post.
to the back end using axios.post. But remember in our tests we should not
But remember in our tests we should not contact a real backend because we might
contact a real backend because we might accidentally update real data.
accidentally update real data. So earlier we mocked load cart and
So earlier we mocked load cart and replaced it with a fake function.
replaced it with a fake function. Now we're also going to mock axios. So
Now we're also going to mock axios. So we can actually mock an entire npm
we can actually mock an entire npm package. To do that at the top,
package. To do that at the top, we're going to use the code vi
we're going to use the code vi mock brackets
mock brackets and the string axios.
and the string axios. So this mocks the entire axios package.
So this mocks the entire axios package. This means that when we are testing,
This means that when we are testing, when we import from axios, we will get a
when we import from axios, we will get a fake version of axios instead.
fake version of axios instead. So when we click add to cart, it will
So when we click add to cart, it will use the fake version of Axios and it
use the fake version of Axios and it will do nothing. It will not contact the
will do nothing. It will not contact the back end. So now what should we test? We
back end. So now what should we test? We can still test that our code ran
can still test that our code ran axios.post
axios.post and we can test if we gave axios.post
and we can test if we gave axios.post the correct values.
the correct values. To do that at the top, we're also going
To do that at the top, we're also going to import Axios from the package Axios.
to import Axios from the package Axios. And because of vi.mmock,
And because of vi.mmock, this is a fake version of Axios.
this is a fake version of Axios. So now we can scroll back down
So now we can scroll back down and after we click add to cart, we can
and after we click add to cart, we can expect brackets axios.post. post.
expect brackets axios.post. post. If we give a mock to expect, we can
If we give a mock to expect, we can check if our code ran axios.post
check if our code ran axios.post and if we gave it the correct values
and if we gave it the correct values using the method dot to have been called
using the method dot to have been called with and brackets.
with and brackets. So we expect our code to call axios.post
So we expect our code to call axios.post with /api/cart items. So in here we'll
with /api/cart items. So in here we'll check if the first value we gave it was
check if the first value we gave it was slappi/cart-
items and we also expect our code to give
and we also expect our code to give axios.post an object with a product ID
axios.post an object with a product ID and a quantity.
and a quantity. So in here we can also check if we give
So in here we can also check if we give it an object with a product ID colon and
it an object with a product ID colon and we're going to get the product ID of our
we're going to get the product ID of our sample product. So here we'll select
sample product. So here we'll select this ID and copy
this ID and copy and scroll back down
and scroll back down and create a string and paste the ID
and create a string and paste the ID and we expect the quantity colon to be
and we expect the quantity colon to be one because we did not change the
one because we did not change the quantity selector.
quantity selector. So this basically checks that when we
So this basically checks that when we click add to cart does our code run
click add to cart does our code run axios.post post and give it these
axios.post post and give it these values. So even though mocks don't do
values. So even though mocks don't do anything, we can still check if we
anything, we can still check if we called them and we gave them the correct
called them and we gave them the correct values.
values. Next, we can also check if our code ran
Next, we can also check if our code ran load cart. So remember that load cart is
load cart. So remember that load cart is also a mock. So we can see if our code
also a mock. So we can see if our code ran load cart. So down here we can also
ran load cart. So down here we can also expect
expect load cart and we don't give load cart
load cart and we don't give load cart any values. So we can just use dot2
any values. So we can just use dot2 have been called and brackets.
have been called and brackets. So this just checks if our code called
So this just checks if our code called load cart and does not check what values
load cart and does not check what values we gave it. So now let's save
we gave it. So now let's save and v test will run our code and
and v test will run our code and everything still passed. So that's how
everything still passed. So that's how we test user interactions. We create
we test user interactions. We create some mocks and then we check if our code
some mocks and then we check if our code ran the mock and gave it the correct
ran the mock and gave it the correct values. So now let's save this into git.
values. So now let's save this into git. In the get section, we'll use a message
In the get section, we'll use a message test clicking add to cart button
test clicking add to cart button and commit.
Before we move on, we're going to do some code cleanup. Notice that in each
some code cleanup. Notice that in each of our tests, we have some setup code at
of our tests, we have some setup code at the top where we create some sample data
the top where we create some sample data and mock load cart. So we can actually
and mock load cart. So we can actually share this setup code between our tests.
share this setup code between our tests. To do that, we can move these two
To do that, we can move these two variables outside of this it function.
variables outside of this it function. So we'll select this code
So we'll select this code and cut.
and cut. And outside of this function, we'll
And outside of this function, we'll paste.
Now that these two variables are outside of this function because of scope these
of this function because of scope these can be accessed anywhere inside this
can be accessed anywhere inside this outer describe function. So that means
outer describe function. So that means it can be accessed in both tests. So in
it can be accessed in both tests. So in the second test
the second test we can just remove this setup code
we can just remove this setup code because now it's shared between the two
because now it's shared between the two tests up here.
tests up here. Another recommendation is to recreate
Another recommendation is to recreate shared variables before each test
shared variables before each test because if one test modifies a variable,
because if one test modifies a variable, that change is going to carry over into
that change is going to carry over into the next test which can cause bugs.
the next test which can cause bugs. So before each test, we're going to
So before each test, we're going to recreate these variables.
recreate these variables. To do that, we can use before capital E
To do that, we can use before capital E each brackets. And we'll give this a
each brackets. And we'll give this a function brackets arrow and curly
function brackets arrow and curly brackets.
brackets. So before each runs some code before
So before each runs some code before each test
each test and also we need to import before each.
and also we need to import before each. So at the top
So at the top we'll import before each from vest.
So we want to recreate these shared variables before each test. So we're
variables before each test. So we're going to do that in here. Inside we'll
going to do that in here. Inside we'll use product equals
use product equals and let's just select this value and
and let's just select this value and cut.
cut. And in here we'll paste.
And in here we'll paste. And because we're modifying this
And because we're modifying this variable, we need to change from const
variable, we need to change from const to let.
to let. And we'll also recreate load cart in
And we'll also recreate load cart in before each. So here we'll do load cart
before each. So here we'll do load cart equals vi.fn
equals vi.fn and brackets
and brackets and above we can remove this
and above we can remove this and change this to a let.
and change this to a let. So now before each test we're going to
So now before each test we're going to recreate the setup code and we'll have a
recreate the setup code and we'll have a fresh set of variables and this will
fresh set of variables and this will make our tests more consistent. So now
make our tests more consistent. So now let's save.
let's save. V test will rerun our test and
V test will rerun our test and everything still passes.
everything still passes. So before each is known as a test hook.
So before each is known as a test hook. There are other test hooks that we can
There are other test hooks that we can use to help us do some setup or some
use to help us do some setup or some cleanup in our tests.
cleanup in our tests. So now let's save this into git. In the
So now let's save this into git. In the get section, we'll use the message use
get section, we'll use the message use before each to remove duplication
before each to remove duplication and commit.
So, we just learned how to create mocks that don't do anything. Now, we're going
that don't do anything. Now, we're going to learn how to mock the implementation.
to learn how to mock the implementation. Mock the implementation means we make
Mock the implementation means we make the mock do whatever we want. To do
the mock do whatever we want. To do this, we're going to test another
this, we're going to test another component. So in our file,
component. So in our file, we're going to go to the homepage
we're going to go to the homepage component.
component. And here we're going to create a new
And here we're going to create a new file
file and name it homepage.est.jsx.
And let's just copy all the imports from the product component test because we'll
the product component test because we'll use most of them. So we'll select this
use most of them. So we'll select this and copy.
and copy. And in homepage.test
And in homepage.test we're going to paste.
we're going to paste. And this time we'll import homepage
And this time we'll import homepage from dot /home page.
from dot /home page. And as always, we'll start by creating a
And as always, we'll start by creating a test suite with describe.
test suite with describe. And we'll name this homepage
And we'll name this homepage component
component and a function.
and a function. And we'll create a test using it
And we'll create a test using it brackets. And let's call it displays the
brackets. And let's call it displays the products correctly.
products correctly. Brackets, arrow, and curly brackets.
Brackets, arrow, and curly brackets. And now let's render the homepage using
And now let's render the homepage using render bracket less than homepage
render bracket less than homepage slashgreater than.
slashgreater than. And the homepage requires two props cart
And the homepage requires two props cart and load cart. So for the cart equals
and load cart. So for the cart equals curly brackets. We're not going to test
curly brackets. We're not going to test the cart right now. So we'll just set it
the cart right now. So we'll just set it as an empty array.
as an empty array. And for load cart equals curly brackets
And for load cart equals curly brackets again we'll mock load cart. So above
again we'll mock load cart. So above this test
this test we'll create let node cart and we'll use
we'll create let node cart and we'll use before each brackets
before each brackets and a function brackets arrow and curly
and a function brackets arrow and curly brackets
brackets and we'll set load cart equals a mock
and we'll set load cart equals a mock function vi.fn Fn and brackets
function vi.fn Fn and brackets and we're going to give this mock to the
and we're going to give this mock to the homepage component.
Next, the homepage component is special. If we open the homepage,
If we open the homepage, notice at the start, we load products
notice at the start, we load products from the back end using
from the back end using axios.get/appi/roucts.
Again, in our test, we should not contact a real backend. So, we're going
contact a real backend. So, we're going to mock Axios.
to mock Axios. So, here
So, here at the top, we'll mock Axios using
at the top, we'll mock Axios using vi.mmock
vi.mmock brackets and the package axios.
brackets and the package axios. Now, this just makes axios.get do
Now, this just makes axios.get do nothing. However, in the homepage, we
nothing. However, in the homepage, we actually need axios.get get to return
actually need axios.get get to return something because we're going to return
something because we're going to return a response and the homepage is going to
a response and the homepage is going to use this response to display the
use this response to display the products. So here axios.get cannot just
products. So here axios.get cannot just do nothing. We need to mock the
do nothing. We need to mock the implementation which means we're going
implementation which means we're going to make axio.get do whatever we want.
to make axio.get do whatever we want. So in our test inside before each
So in our test inside before each we're going to do axials.get
we're going to do axials.get dot mock implementation
dot mock implementation and brackets
and brackets and we're going to give this a function
and we're going to give this a function brackets arrow and curly brackets.
brackets arrow and curly brackets. So this means that in our code whenever
So this means that in our code whenever we use axios.get get it's going to run
we use axios.get get it's going to run this fake function instead. So basically
this fake function instead. So basically we can make axios.get do whatever we
we can make axios.get do whatever we want. That's what mock implementation
want. That's what mock implementation means.
means. So remember we can give axios.get some
So remember we can give axios.get some values. Those values are going to be
values. Those values are going to be saved as parameters in here. So the
saved as parameters in here. So the first value we give to axios.get is the
first value we give to axios.get is the URL path. So in here our fake function
URL path. So in here our fake function will also get the URL path.
will also get the URL path. Next inside our fake function let's
Next inside our fake function let's check if the URL path is equal to the
check if the URL path is equal to the string /
string / products.
So for the URL path /api/proucts, usually the backend returns all the
usually the backend returns all the products in an array. But in our test,
products in an array. But in our test, we don't really need all the products.
we don't really need all the products. So let's just return two products to
So let's just return two products to test with. So in here, we'll just return
test with. So in here, we'll just return two products. Now, whatever we return
two products. Now, whatever we return from this fake function should match
from this fake function should match what axios.get normally returns. So
what axios.get normally returns. So axios.get
axios.get normally returns a response with a
normally returns a response with a property data. So in our test
property data. So in our test this mock implementation should also
this mock implementation should also return an object with a property data.
return an object with a property data. And normally
And normally response data is an array of products.
response data is an array of products. So in our test, our data property should
So in our test, our data property should also be an array.
also be an array. So basically in this fake function, we
So basically in this fake function, we should match what axios.get normally
should match what axios.get normally returns. And this makes sure that the
returns. And this makes sure that the rest of the code still works with our
rest of the code still works with our mock.
mock. So now in our test,
So now in our test, let's just return two products to test
let's just return two products to test with. to find two sample products. We
with. to find two sample products. We can go back to the starting code folder
can go back to the starting code folder and the data and the products.js.
and the data and the products.js. And here, let's just collapse the first
And here, let's just collapse the first two products and we'll select them and
two products and we'll select them and copy.
copy. And inside the homepage test,
And inside the homepage test, we're going to paste.
we're going to paste. So now in our test, axio.get get will
So now in our test, axio.get get will return these two products.
return these two products. Now there's one more thing we need to do
Now there's one more thing we need to do which is remember that axios.get
which is remember that axios.get normally returns a promise that we have
normally returns a promise that we have to await. So in our test we should also
to await. So in our test we should also return a promise. To make this return a
return a promise. To make this return a promise we can wrap this value in
promise we can wrap this value in promise.resolve like this. Or an easier
promise.resolve like this. Or an easier way to do this is to make this function
way to do this is to make this function async.
async. So remember that async makes a function
So remember that async makes a function return a promise.
return a promise. Now axios.get will return exactly what
Now axios.get will return exactly what we want. And that's how we mock the
we want. And that's how we mock the implementation which means we make the
implementation which means we make the mock do whatever we want.
mock do whatever we want. Now let's run our tests to make sure
Now let's run our tests to make sure that this works. We'll save
that this works. We'll save and v test will rerun and we actually
and v test will rerun and we actually got an error. So if we look at this
got an error. So if we look at this error and we scroll up
error and we scroll up to the details of the error, you'll see
to the details of the error, you'll see that we got this error here and it came
that we got this error here and it came from React Router. And this happens
from React Router. And this happens because if we look at our homepage
because if we look at our homepage component,
component, remember that the homepage also contains
remember that the homepage also contains a header component. And if we open the
a header component. And if we open the components folder and the header
components folder and the header component,
component, inside the header component, we have
inside the header component, we have these link components.
these link components. In order for a link components to work,
In order for a link components to work, they need to be inside a router. In
they need to be inside a router. In main.jsx, JSX the entire app is inside a
main.jsx, JSX the entire app is inside a router. So that's why link components
router. So that's why link components work normally but in our test our
work normally but in our test our homepage component is not inside any
homepage component is not inside any router. So the link component doesn't
router. So the link component doesn't work and it creates an error. To fix
work and it creates an error. To fix this we just need to put a router around
this we just need to put a router around the homepage in our test. So, we'll go
the homepage in our test. So, we'll go back to our test
back to our test and first we'll scroll to the top and
and first we'll scroll to the top and we're going to import a router. So,
we're going to import a router. So, we'll import curly brackets and we're
we'll import curly brackets and we're going to import the memory router
going to import the memory router from the package react-outer.
So, the memory router is specifically for testing.
for testing. So we'll scroll down
So we'll scroll down and when we render the homepage, we're
and when we render the homepage, we're going to put it inside a memory router.
going to put it inside a memory router. So less than memory router
So less than memory router and we'll select the homepage and cut.
and we'll select the homepage and cut. And in here we'll paste
And in here we'll paste and we'll fix the indenting.
And now if we save the link components are inside a router.
the link components are inside a router. And now our tests should pass.
And now our tests should pass. Now let's check if the homepage
Now let's check if the homepage displayed the products correctly. So
displayed the products correctly. So after we render this homepage because we
after we render this homepage because we mocked Axios to return these two sample
mocked Axios to return these two sample products, there should be two products
products, there should be two products on the page. Let's add a test ID to
on the page. Let's add a test ID to these elements so we can get them in our
these elements so we can get them in our test. In the product component,
test. In the product component, we're going to scroll up to the top of
we're going to scroll up to the top of the HTML and we're going to find the
the HTML and we're going to find the product container
product container and we're going to add the attribute
and we're going to add the attribute data- test id equals a string the
data- test id equals a string the product dash container
product dash container and save.
and save. And in our test,
And in our test, we're going to look for the test ID
we're going to look for the test ID using screen.get
using screen.get all by test ID and brackets and the test
all by test ID and brackets and the test ID product dash container.
ID product dash container. So we use all here because we're going
So we use all here because we're going to have multiple products on the page.
to have multiple products on the page. So we're going to get multiple product
So we're going to get multiple product container elements.
container elements. However, there's actually a problem
However, there's actually a problem here.
here. When the homepage is first created, the
When the homepage is first created, the products are empty. So, there will not
products are empty. So, there will not be any products on the page. And we need
be any products on the page. And we need to wait for the homepage to run use
to wait for the homepage to run use effect and load the products and then
effect and load the products and then update the state. So to wait for
update the state. So to wait for homepage to finish loading in our test,
homepage to finish loading in our test, we're going to use a different method
we're going to use a different method called
called find all by test ID.
find all by test ID. So find does the same thing as get, but
So find does the same thing as get, but it will wait until it finds this
it will wait until it finds this element.
element. So this is useful when our component
So this is useful when our component needs to load something and we need to
needs to load something and we need to wait for it to load. Now, because this
wait for it to load. Now, because this code is waiting until it finds these
code is waiting until it finds these elements, this code is asynchronous and
elements, this code is asynchronous and it returns a promise. So, we're going to
it returns a promise. So, we're going to wait for this code to finish using a
wait for this code to finish using a wait. And again, to use a wait, we need
wait. And again, to use a wait, we need to be inside an async function.
to be inside an async function. So now this will wait until it finds
So now this will wait until it finds these product containers. And then let's
these product containers. And then let's save these in a variable using const
save these in a variable using const product containers equals this result.
product containers equals this result. And now we can check this result to see
And now we can check this result to see if it was displayed correctly. So down
if it was displayed correctly. So down here
here let's check if we have two product
let's check if we have two product containers on the page. So we can expect
containers on the page. So we can expect brackets the product containers.length
dot 2b 2.
2. So this gives us an array of elements
So this gives us an array of elements and we're just checking if the length is
and we're just checking if the length is equal to two. If we save,
equal to two. If we save, v test will rerun. And now this test
v test will rerun. And now this test passed. So we know we're displaying the
passed. So we know we're displaying the correct number of elements on the
correct number of elements on the homepage.
homepage. Next, we'll check inside each product
Next, we'll check inside each product container to see if they have the
container to see if they have the correct product name. Now, before we
correct product name. Now, before we used screen get by text to search for
used screen get by text to search for some text on the page. However, this
some text on the page. However, this searches the entire page. Here we want
searches the entire page. Here we want to check specifically the first product
to check specifically the first product container to see if it has the correct
container to see if it has the correct name. To do that we can use a feature
name. To do that we can use a feature called within. So we'll scroll up
called within. So we'll scroll up and here we're also going to import
and here we're also going to import within
within from testing library/react.
from testing library/react. And we'll scroll back down.
And we'll scroll back down. And within lets us find things within or
And within lets us find things within or inside a specific element. So to find
inside a specific element. So to find things inside the first product
things inside the first product container, we're going to use within
container, we're going to use within brackets the product containers square
brackets the product containers square bracket zero.
bracket zero. This gives us the first product
This gives us the first product container and we're going to search
container and we're going to search inside this container. And then here
inside this container. And then here we're going to do dot get by text and
we're going to do dot get by text and brackets.
brackets. And for the first container, we're going
And for the first container, we're going to search for the first product name. If
to search for the first product name. If we scroll up,
we scroll up, this is the first product name. So we'll
this is the first product name. So we'll select it and copy.
select it and copy. And down here,
And down here, we're going to paste.
we're going to paste. So again, this searches inside the first
So again, this searches inside the first product container for this text. And
product container for this text. And I'll add a new line to make it a little
I'll add a new line to make it a little easier to read. And now we expect this
easier to read. And now we expect this to exist. So here we'll type expect open
to exist. So here we'll type expect open bracket
bracket and just going to reformat this code a
and just going to reformat this code a little bit and at the end close bracket
little bit and at the end close bracket and use
and use 2B in the document and brackets.
2B in the document and brackets. Now let's save
Now let's save and v test will tell us that this
and v test will tell us that this passed. So, we know we're displaying the
passed. So, we know we're displaying the correct product in the first product
correct product in the first product container. Now, let's check the second
container. Now, let's check the second product container. We'll select this
product container. We'll select this code and copy.
code and copy. And down here, paste.
And down here, paste. And we'll change the zero to a one. This
And we'll change the zero to a one. This gets us the second product container.
gets us the second product container. And we're going to get the second
And we're going to get the second product name. So up here, we're going to
product name. So up here, we're going to select this name and copy
select this name and copy and scroll back down.
and scroll back down. And here we're going to paste
And here we're going to paste and save
and the test passed. So now we know that the second product container is
the second product container is displaying the correct product. Now we
displaying the correct product. Now we could check all the other details of the
could check all the other details of the product as an exercise. However, we
product as an exercise. However, we don't have to do it because remember
don't have to do it because remember that all the product details have
that all the product details have already been tested in the product
already been tested in the product component test.
component test. So instead for the homepage component,
So instead for the homepage component, we focus on testing things that are
we focus on testing things that are specific to the homepage such as
specific to the homepage such as rendering multiple products and loading
rendering multiple products and loading products using Axios.
products using Axios. So that's how we test a more complicated
So that's how we test a more complicated component like the homepage. We need to
component like the homepage. We need to mock the implementation of axios.get
mock the implementation of axios.get and we may need to wrap the component
and we may need to wrap the component inside a router. I'll leave adding more
inside a router. I'll leave adding more tests for the homepage as an exercise.
tests for the homepage as an exercise. So now let's save to git. We'll open the
So now let's save to git. We'll open the git section and we'll use the message
git section and we'll use the message create integration test for home page
create integration test for home page and commit.
So now whenever we make changes to our code we can run these automated tests to
code we can run these automated tests to make sure that format money the product
make sure that format money the product component and the homepage are still
component and the homepage are still correct. Now, usually we create tests
correct. Now, usually we create tests for all of our components, but I'll
for all of our components, but I'll leave that as exercises.
leave that as exercises. In the next lesson, we'll learn
In the next lesson, we'll learn deploying, which means how to put our
deploying, which means how to put our React app on the internet.
React app on the internet. And that's the end of this lesson. In
And that's the end of this lesson. In this lesson, we learned how to create
this lesson, we learned how to create automated tests with VEST. We learned
automated tests with VEST. We learned how to create unit tests, which test one
how to create unit tests, which test one piece of the code. We learned it,
piece of the code. We learned it, expect, and describe, which lets us
expect, and describe, which lets us create a test, check the results, and
create a test, check the results, and group the tests together into a test
group the tests together into a test suite. We learned how to create
suite. We learned how to create integration tests, which test multiple
integration tests, which test multiple pieces of code working together. We
pieces of code working together. We learned how to test a component using
learned how to test a component using render and screen. We learned how to
render and screen. We learned how to create a mock, which is a fake version
create a mock, which is a fake version of a function or a package. And we learn
of a function or a package. And we learn how to mock the implementation, which
how to mock the implementation, which means we make a mock do whatever we
means we make a mock do whatever we want.
want. Here are some exercises to help you
Here are some exercises to help you practice what we learned in this lesson.
In this lesson, we're going to learn deploying, which means how to put a
deploying, which means how to put a React app on the internet. So, there are
React app on the internet. So, there are many services we can use to deploy. In
many services we can use to deploy. In this lesson, we're going to use AWS or
this lesson, we're going to use AWS or Amazon Web Services. AWS is the biggest
Amazon Web Services. AWS is the biggest service for putting websites on the
service for putting websites on the internet. Most big tech companies use
internet. Most big tech companies use AWS, so it's the most useful to learn
AWS, so it's the most useful to learn for your career.
for your career. So AWS stands for Amazon Web Services.
So AWS stands for Amazon Web Services. It's a collection of services that help
It's a collection of services that help us put stuff on the internet. And AWS
us put stuff on the internet. And AWS has a free tier where we can use many of
has a free tier where we can use many of their services for free using some
their services for free using some credits.
credits. So, let's click this link in the
So, let's click this link in the description. Go to lesson 10.
description. Go to lesson 10. And here we have a link to AWS.
And here we have a link to AWS. Now, before we begin, AWS might change
Now, before we begin, AWS might change their website design in the future. If
their website design in the future. If you have any issues, please check this
you have any issues, please check this AWS troubleshooting guide here.
AWS troubleshooting guide here. Now, let's get started with AWS.
Now, let's get started with AWS. We'll click this link to open AWS.
We'll click this link to open AWS. And the free tier is free for new
And the free tier is free for new accounts. So, we're going to create a
accounts. So, we're going to create a new AWS account. If you don't see this,
new AWS account. If you don't see this, you can also click sign in
you can also click sign in and then scroll down and click create a
and then scroll down and click create a new AWS account.
Before we continue, because AWS is the biggest web service, it has to follow a
biggest web service, it has to follow a lot of security and compliance
lot of security and compliance regulations. So, even though it has a
regulations. So, even though it has a free tier, it will ask you for a credit
free tier, it will ask you for a credit card, billing address, and phone number
card, billing address, and phone number when signing up. If you're unable to
when signing up. If you're unable to provide this information, please check
provide this information, please check the AWS troubleshooting guide in the
the AWS troubleshooting guide in the description.
description. However, I still recommend at least
However, I still recommend at least watching this tutorial to see how AWS
watching this tutorial to see how AWS works since it's the most useful for
works since it's the most useful for your career. So, here we'll enter our
your career. So, here we'll enter our email address for logging in. So, for
email address for logging in. So, for me, I'll use this email
and then we'll go through the rest of the sign up process.
After signing up, it might take a few minutes for the account to be activated.
minutes for the account to be activated. So, we just need to give it a bit of
So, we just need to give it a bit of time.
time. Now that we created a new AWS account,
Now that we created a new AWS account, one thing to note is when signing into
one thing to note is when signing into AWS,
AWS, if you see an account ID and I am here,
if you see an account ID and I am here, we're going to click this sign in with
we're going to click this sign in with root email button.
root email button. And then here we can sign in with the
And then here we can sign in with the email and password we created earlier.
email and password we created earlier. After signing in, you can see the
After signing in, you can see the details of the free tier here or by
details of the free tier here or by clicking here.
After we sign in, we're going to land on this AWS dashboard. So, as I said, AWS
this AWS dashboard. So, as I said, AWS is a collection of services that help us
is a collection of services that help us put stuff on the internet. So, here we
put stuff on the internet. So, here we can see all the services that are part
can see all the services that are part of AWS. And there's a lot of services.
of AWS. And there's a lot of services. At the top in the search bar, we can
At the top in the search bar, we can search for a service. So, we're going to
search for a service. So, we're going to start with the most basic service called
start with the most basic service called EC2.
EC2. And click here to open it.
EC2 stands for Elastic Compute Cloud. It basically lets us rent a computer from
basically lets us rent a computer from AWS.
AWS. Earlier in the course, I mentioned that
Earlier in the course, I mentioned that many websites use a backend to manage
many websites use a backend to manage the data and the backend is another
the data and the backend is another computer on the internet. Now, we could
computer on the internet. Now, we could buy a physical computer ourselves and
buy a physical computer ourselves and use that as the back end, but then we
use that as the back end, but then we have to keep this computer running 24
have to keep this computer running 24 hours a day and put it in our office
hours a day and put it in our office somewhere. So this is a lot of work and
somewhere. So this is a lot of work and what most companies do is they just rent
what most companies do is they just rent a computer from AWS and AWS will manage
a computer from AWS and AWS will manage the computer and keep it running 24
the computer and keep it running 24 hours a day and this saves a lot of
hours a day and this saves a lot of work. So EC2 basically lets us rent a
work. So EC2 basically lets us rent a computer from AWS. This is called
computer from AWS. This is called infrastructure as a service or IAS. This
infrastructure as a service or IAS. This means that AWS manages the
means that AWS manages the infrastructure or the computers for us.
infrastructure or the computers for us. So to rent a computer in here, we can
So to rent a computer in here, we can click the instances section and then
click the instances section and then click launch instance. By the way, one
click launch instance. By the way, one instance is one EC2 computer.
instance is one EC2 computer. However, we're not going to use this
However, we're not going to use this because there's still some problems with
because there's still some problems with this process. EC2 just gives us a
this process. EC2 just gives us a computer. We still need to install
computer. We still need to install NodeJS on this computer. We still need
NodeJS on this computer. We still need to connect this computer to the
to connect this computer to the internet. And we need to upload our code
internet. And we need to upload our code to this computer. So even though AWS
to this computer. So even though AWS manages the computer, there's still a
manages the computer, there's still a lot of manual work we have to do. To
lot of manual work we have to do. To solve this problem, AWS provides another
solve this problem, AWS provides another service.
service. At the top, we're going to search for
At the top, we're going to search for elastic
elastic beantock
beantock and click here to open this service.
and click here to open this service. You can think of elastic beantock as a
You can think of elastic beantock as a layer on top of EC2. It uses EC2 to rent
layer on top of EC2. It uses EC2 to rent a computer, but it also installs all the
a computer, but it also installs all the software we need on this computer and it
software we need on this computer and it connects the computer to the internet.
connects the computer to the internet. So, Elastic Beantock also does all the
So, Elastic Beantock also does all the software setup for us. All we have to do
software setup for us. All we have to do is just upload our code to elastic
is just upload our code to elastic beantock and it will just work. This is
beantock and it will just work. This is called a platform as a service or a
called a platform as a service or a path. This manages the infrastructure
path. This manages the infrastructure and the software for us. If you want to
and the software for us. If you want to learn more about these concepts, you can
learn more about these concepts, you can check out my backend overview video in
check out my backend overview video in the description.
the description. Now that we have an overview of AWS and
Now that we have an overview of AWS and some of the services we can use, let's
some of the services we can use, let's learn how to use Elastic Beantock. Now,
learn how to use Elastic Beantock. Now, Amazon might change the design of these
Amazon might change the design of these pages in the future. If you run into any
pages in the future. If you run into any issues, make sure to check the AWS
issues, make sure to check the AWS troubleshooting guide in the
troubleshooting guide in the description.
description. We're going to start by creating an
We're going to start by creating an application. Or we can click here, click
application. Or we can click here, click environments,
environments, and create environment.
and create environment. And on this page, we're going to select
And on this page, we're going to select a web server environment. And we're
a web server environment. And we're going to give a name to our application.
going to give a name to our application. So let's just use e-commerce-
So let's just use e-commerce- project-
project- react.
react. And we can use the default values for
And we can use the default values for this section. And we'll scroll down. And
this section. And we'll scroll down. And for the platform section, we're going to
for the platform section, we're going to choose the technology we want to use
choose the technology we want to use here. For us, we're going to use NodeJS.
And down here, we'll just use the sample application. We can upload our own code
application. We can upload our own code later.
later. And we'll scroll down. And here we'll
And we'll scroll down. And here we'll choose single instance. If you see free
choose single instance. If you see free tier allegible, pick that one.
tier allegible, pick that one. Otherwise, just pick the single
Otherwise, just pick the single instance.
instance. And then here we'll click next.
And here we need to create a role. A role gives elastic beantock permission
role gives elastic beantock permission to use other services in AWS.
to use other services in AWS. So in here, if you already have a role
So in here, if you already have a role for elastic beantock, you can use that.
for elastic beantock, you can use that. Otherwise, we'll click create ro.
And we should be able to use the default values that they set here. And we'll
values that they set here. And we'll click next.
click next. And then click next.
And then click next. And at the bottom, we'll click create
And at the bottom, we'll click create roll.
roll. And then we'll go back to Elastic
And then we'll go back to Elastic Beantock. And we'll click this button to
Beantock. And we'll click this button to refresh.
refresh. And we'll select the RO that we just
And we'll select the RO that we just created.
created. For this one, we also need to create a
For this one, we also need to create a role. So, we'll click here.
role. So, we'll click here. And then we can also use the default
And then we can also use the default values that it gives. Click next
values that it gives. Click next and next.
and next. And at the bottom, create RO.
And we'll go back and refresh and select the RO that we just created.
and select the RO that we just created. And we can keep this as blank. And we'll
And we can keep this as blank. And we'll click next.
For the networking and database settings, we can just use the default
settings, we can just use the default values here. So, we'll scroll down and
values here. So, we'll scroll down and click next.
click next. And for the instance settings, we're
And for the instance settings, we're going to scroll down and find the
going to scroll down and find the section called capacity.
section called capacity. And down here, we're going to scroll
And down here, we're going to scroll down
and we're going to find a section like this called instance types. And it has a
this called instance types. And it has a drop down here. So, this lets us choose
drop down here. So, this lets us choose the size of the computer that we want to
the size of the computer that we want to rent from EC2.
rent from EC2. So, in the description, we're going to
So, in the description, we're going to click this link and go to lesson 10 and
click this link and go to lesson 10 and then follow the instructions here to
then follow the instructions here to select the correct instance types.
select the correct instance types. So, now we'll scroll down and click next
So, now we'll scroll down and click next and we can leave monitoring and logging
and we can leave monitoring and logging settings as the default. So, we'll
settings as the default. So, we'll scroll down
And finally, we'll scroll to the bottom and click create.
So now, Elastic Beantock is going to rent a computer for us using EC2. It
rent a computer for us using EC2. It will also install all the software that
will also install all the software that we need on this computer like NodeJS and
we need on this computer like NodeJS and npm. And it will do all the
npm. And it will do all the configuration to connect this computer
configuration to connect this computer to the internet.
to the internet. So, this will take a few minutes to
So, this will take a few minutes to complete. So, we need to wait for this
complete. So, we need to wait for this to finish.
to finish. And you might need to refresh the page
And you might need to refresh the page to check the progress.
Once that's done, it should look something like this. And we can click
something like this. And we can click this URL here or click here to open this
this URL here or click here to open this website.
And now we should see a sample NodeJS application on this page. If something
application on this page. If something goes wrong and this doesn't work, please
goes wrong and this doesn't work, please check the AWS troubleshooting guide in
check the AWS troubleshooting guide in the description.
the description. Now that we set up Elastic Beantock,
Now that we set up Elastic Beantock, we're ready to put our code on the
we're ready to put our code on the internet. We'll go back to Elastic
internet. We'll go back to Elastic Beantock.
Beantock. And our code has two parts, the back end
And our code has two parts, the back end and the front end. We put the back end
and the front end. We put the back end on the internet first and then we put
on the internet first and then we put the front end. To put the back end on
the front end. To put the back end on the internet, we just need to upload our
the internet, we just need to upload our backend code to elastic beantock. So
backend code to elastic beantock. So we'll click upload and deploy.
And here we're going to upload our backend code. However, we need to upload
backend code. However, we need to upload the code as a zip file. So we'll go back
the code as a zip file. So we'll go back to VS Code.
to VS Code. And I'll collapse this for now. And I
And I'll collapse this for now. And I actually set up the e-commerce backend
actually set up the e-commerce backend so that it works with elastic beantock.
so that it works with elastic beantock. So this backend has a command that will
So this backend has a command that will save all the code in a zip file. So
save all the code in a zip file. So we're going to go to the command line
we're going to go to the command line and we're going to create a new tab.
and we're going to create a new tab. And in here we're going to cd into
And in here we're going to cd into e-commerce backend.
and we'll run the command npm run zip. So this will save all the backend code
So this will save all the backend code into a zip file which is right here. If
into a zip file which is right here. If I open this zip file,
I open this zip file, you'll see that it just contains all of
you'll see that it just contains all of the backend code.
the backend code. So now we just need to upload this zip
So now we just need to upload this zip file to Elastic Beantock. We'll go back
file to Elastic Beantock. We'll go back to the browser
to the browser and we'll click this to choose a file.
and we'll click this to choose a file. And for me, my code is on the desktop
And for me, my code is on the desktop inside the React course folder inside
inside the React course folder inside e-commerce backend.
e-commerce backend. And if I scroll down, I'll see this
And if I scroll down, I'll see this e-commerce backend one, which is a zip
e-commerce backend one, which is a zip file. So, I'll click this and open.
file. So, I'll click this and open. Wait for it to upload and then click
Wait for it to upload and then click deploy.
So now elastic beantock will take the backend code and put it on the internet.
backend code and put it on the internet. So we'll wait for a few minutes for this
So we'll wait for a few minutes for this to complete.
to complete. Once that's done, we're going to click
Once that's done, we're going to click this URL again.
this URL again. And now instead of the sample
And now instead of the sample application, it should say index not
application, it should say index not found, which is normal. This is how I
found, which is normal. This is how I designed my back end.
designed my back end. Now in the URL, we're going to click up
Now in the URL, we're going to click up here and go to the end. We're going to
here and go to the end. We're going to enter the URL path slash API slash
enter the URL path slash API slash products and press enter.
products and press enter. So this will give us the products data
So this will give us the products data that we were using in our project on our
that we were using in our project on our computer. So this is the same data that
computer. So this is the same data that we saw before except now our backend is
we saw before except now our backend is on the internet.
Now that our back end is on the internet, let's put our front end on the
internet, let's put our front end on the internet as well. For the front end, we
internet as well. For the front end, we also need to prepare our code. So, we'll
also need to prepare our code. So, we'll go back to VS Code.
go back to VS Code. And I'll collapse this folder for now.
And I'll collapse this folder for now. And if we look at the front-end code,
And if we look at the front-end code, notice that in here we use JSX code.
notice that in here we use JSX code. However, remember that the browser does
However, remember that the browser does not understand JSX. It only understands
not understand JSX. It only understands normal JavaScript. So, we need to
normal JavaScript. So, we need to convert this code into normal JavaScript
convert this code into normal JavaScript first. To do that, VIT has a command for
first. To do that, VIT has a command for this. Inside the command line, we'll
this. Inside the command line, we'll create a new tab.
create a new tab. And this time we'll cd into
And this time we'll cd into ecommerce
ecommerce dash project.
dash project. And vit has a command called npm run
And vit has a command called npm run build.
build. This is a shortcut for vit build.
This is a shortcut for vit build. So we'll press enter.
And this basically converts all of our JSX code into normal JavaScript and
JSX code into normal JavaScript and saves the code in a folder called dist.
saves the code in a folder called dist. So inside here we have an index.html
So inside here we have an index.html file and this is the HTML for our React
file and this is the HTML for our React website. And inside the assets folder we
website. And inside the assets folder we have this JavaScript file. So this is
have this JavaScript file. So this is all of our React code but converted into
all of our React code but converted into normal JavaScript. You'll also notice
normal JavaScript. You'll also notice that Vit combined all of our code into
that Vit combined all of our code into one file and it also minified or
one file and it also minified or compressed the code. So, it shortened
compressed the code. So, it shortened the variable names and removed the extra
the variable names and removed the extra spaces. This is because when we open a
spaces. This is because when we open a website, our browser needs to download
website, our browser needs to download all the front-end code and run it. By
all the front-end code and run it. By combining and compressing the code, it
combining and compressing the code, it makes our website load faster. And Vit
makes our website load faster. And Vit did the same thing with the CSS.
did the same thing with the CSS. You can see that it combined all of our
You can see that it combined all of our CSS files together and compressed it. So
CSS files together and compressed it. So now our front end is optimized and it's
now our front end is optimized and it's ready to be put on the internet.
ready to be put on the internet. So now when we open a website, we need
So now when we open a website, we need to download this React code from
to download this React code from somewhere. So where do we put this
somewhere. So where do we put this front-end code? So we could put this in
front-end code? So we could put this in another service like GitHub pages and
another service like GitHub pages and then when we visit the website our
then when we visit the website our browser will download this front-end
browser will download this front-end code from there.
code from there. However, notice in our current setup
However, notice in our current setup that we already have this backend
that we already have this backend computer that's running in elastic
computer that's running in elastic beantock.
beantock. So we can just reuse this backend
So we can just reuse this backend computer. we can put our React code into
computer. we can put our React code into the backend computer and our browser
the backend computer and our browser will download the React code from the
will download the React code from the backend computer. So, this is a common
backend computer. So, this is a common setup and it simplifies our setup
setup and it simplifies our setup because now we only need to set up one
because now we only need to set up one computer. So, to do this step, all we
computer. So, to do this step, all we need to do is to take this disc folder
need to do is to take this disc folder and then drag it into the e-commerce
and then drag it into the e-commerce back end like this.
back end like this. And I added some code in the e-commerce
And I added some code in the e-commerce back end so that it works with this disc
back end so that it works with this disc folder. So now in the command line,
folder. So now in the command line, we'll go back to the tab that's running
we'll go back to the tab that's running in the back end and we're going to
in the back end and we're going to create the zip file again. So we'll do
create the zip file again. So we'll do npm runzip.
So this will create another zip file but with our front-end code inside.
with our front-end code inside. And now we just need to upload this to
And now we just need to upload this to Elastic Beantock. We'll go back to the
Elastic Beantock. We'll go back to the browser
browser and open Elastic Beantock and we'll
and open Elastic Beantock and we'll click upload and deploy.
click upload and deploy. And we'll choose a file.
And we'll choose a file. And this time we'll choose the second
And this time we'll choose the second file here
And we'll wait a few minutes for this to complete.
complete. Once that's finished, we're going to
Once that's finished, we're going to click this URL again.
click this URL again. And now we should have our React app on
And now we should have our React app on the internet. So, let's try adding some
the internet. So, let's try adding some stuff to the cart to make sure it works.
stuff to the cart to make sure it works. I'll add a toaster and two plates.
I'll add a toaster and two plates. And now, if I look at the cart, it
And now, if I look at the cart, it updated. If I open it, we have our new
updated. If I open it, we have our new products in the cart and we can update
products in the cart and we can update them like usual.
them like usual. And if we click create order,
And if we click create order, it works. So everything is working the
it works. So everything is working the same as on our computer, but this React
same as on our computer, but this React app is now on the internet. If we go
app is now on the internet. If we go back to the homepage,
back to the homepage, I'm going to give you a overview of how
I'm going to give you a overview of how this works. So visually, this is what's
this works. So visually, this is what's happening. First we put our back end on
happening. First we put our back end on the internet. So the back end is running
the internet. So the back end is running on a separate computer and then we put
on a separate computer and then we put our front end code in the backend
our front end code in the backend computer and I set up some code in the
computer and I set up some code in the back end so that when we visit the
back end so that when we visit the website using the URL path slash the
website using the URL path slash the backend sends back the react code to our
backend sends back the react code to our computer. So now we have the react code
computer. So now we have the react code running on our computer and it
running on our computer and it communicates with the backend running on
communicates with the backend running on another computer. So, this is how a
another computer. So, this is how a realworld React app works. When we're
realworld React app works. When we're developing, the front end and the back
developing, the front end and the back end run on the same computer because
end run on the same computer because it's easier for development.
it's easier for development. But when we put the React app on the
But when we put the React app on the internet, the front-end code runs on our
internet, the front-end code runs on our computer and the backend code runs on
computer and the backend code runs on another computer.
Next, we can add a shortcut to Vit to make this process a little easier. We'll
make this process a little easier. We'll go back to VS Code
go back to VS Code and we'll go to the e-commerce project
and we'll go to the e-commerce project folder which is here. So remember that
folder which is here. So remember that we created a disc folder and then
we created a disc folder and then manually dragged it into e-commerce
manually dragged it into e-commerce backend. We can configure VIT to put the
backend. We can configure VIT to put the disc folder in e-commerce backend
disc folder in e-commerce backend directly.
directly. We're going to scroll down
We're going to scroll down to vit.config.js.
And in this configuration at the bottom we're going to add a property called
we're going to add a property called build colon curly brackets. And in here
build colon curly brackets. And in here we'll use a property out capital D dur
we'll use a property out capital D dur colon and a string.
colon and a string. So this tells vit where to put the dist
So this tells vit where to put the dist folder.
folder. So we want to put it inside the
So we want to put it inside the e-commerce backend folder. So we'll give
e-commerce backend folder. So we'll give it dot dot slash to go out of e-commerce
it dot dot slash to go out of e-commerce project and then into e-commerce
project and then into e-commerce dashbackend
dashbackend slashdist
slashdist and save.
and save. So now if we go into the back end and we
So now if we go into the back end and we rightclick and delete this disc folder
and then run npm run build. So in the command line we'll open the tab that's
command line we'll open the tab that's running in the e-commerce project and
running in the e-commerce project and then run npm run build and press enter.
It will create the disc folder directly in here. So directly in the e-commerce
in here. So directly in the e-commerce back end. So this just saves a step in
back end. So this just saves a step in our process. We can also automate this
our process. We can also automate this process further but I'll leave that as
process further but I'll leave that as an exercise.
an exercise. So now we'll save this change into git.
So now we'll save this change into git. We'll go to the git section
We'll go to the git section and we'll use the message save build
and we'll use the message save build result in ecommerce dashbackend
result in ecommerce dashbackend and commit.
Before we continue, I want to discuss how to deploy a react app without a
how to deploy a react app without a backend.
backend. So notice that so far to put a React app
So notice that so far to put a React app on the internet, we needed a backend.
on the internet, we needed a backend. But what if we don't know how to write
But what if we don't know how to write backend code yet? What if we just know
backend code yet? What if we just know React? So if a React app does not have a
React? So if a React app does not have a backend, we can actually just put the
backend, we can actually just put the code on the internet directly.
code on the internet directly. For example, in our code here, we're
For example, in our code here, we're going to go back to our chatbot project
going to go back to our chatbot project from earlier. And notice that this
from earlier. And notice that this project does not use a backend. It only
project does not use a backend. It only has React code. So to deploy this
has React code. So to deploy this project, we're going to use npm run
project, we're going to use npm run build again. So in our command line,
build again. So in our command line, we'll create a new tab
we'll create a new tab and we'll cd into the chatbot-
and we'll cd into the chatbot- project folder.
project folder. And if we need to, we can npm install
And this will convert all the React code into normal JavaScript and save it in a
into normal JavaScript and save it in a disc folder again. So notice that inside
disc folder again. So notice that inside the disc folder, we actually just have
the disc folder, we actually just have normal HTML, CSS, and JavaScript code.
normal HTML, CSS, and JavaScript code. So this is actually just an HTML website
So this is actually just an HTML website and we can actually upload this code to
and we can actually upload this code to any service that puts an HTML website on
any service that puts an HTML website on the internet. For example, here I use a
the internet. For example, here I use a service called GitHub pages and I can
service called GitHub pages and I can just upload this code to GitHub pages
just upload this code to GitHub pages and it will put it on the internet. No
and it will put it on the internet. No backend knowledge required.
backend knowledge required. To learn more, you can actually follow
To learn more, you can actually follow the same steps as my video, how to put a
the same steps as my video, how to put a HTML website on the internet. However,
HTML website on the internet. However, make sure you do the exercises in this
make sure you do the exercises in this lesson first since there's still some
lesson first since there's still some small configuration changes that we need
small configuration changes that we need to make for this to work. So, basically,
to make for this to work. So, basically, if we just have a front end, we can just
if we just have a front end, we can just upload this code directly to the
upload this code directly to the internet using something like GitHub
internet using something like GitHub pages. But if our project has a backend
pages. But if our project has a backend as well, then we need to use a more
as well, then we need to use a more complicated service like AWS to put the
complicated service like AWS to put the back end and the front end on the
back end and the front end on the internet.
internet. In the rest of this lesson, we're going
In the rest of this lesson, we're going to improve our AWS setup to make it more
to improve our AWS setup to make it more real world and professional.
real world and professional. So, we'll go back to the browser
So, we'll go back to the browser and we'll open AWS again. And I'm
and we'll open AWS again. And I'm actually going to close some of these
actually going to close some of these other tabs because we don't need them.
other tabs because we don't need them. And inside Elastic Beantock in this
And inside Elastic Beantock in this project, we're going to go to the
project, we're going to go to the configuration section.
configuration section. And we're going to scroll down and find
And we're going to scroll down and find the configuration for instance traffic.
the configuration for instance traffic. If you don't see this, you can check the
If you don't see this, you can check the AWS troubleshooting guide in the
AWS troubleshooting guide in the description.
description. So here we'll click edit.
So here we'll click edit. and we're going to scroll until we find
and we're going to scroll until we find the capacity section. And here we'll
the capacity section. And here we'll look for something like environment type
look for something like environment type and a drop down that says single
and a drop down that says single instance. So we're going to change this
instance. So we're going to change this to load balanced.
to load balanced. So what this does is it adds another
So what this does is it adds another computer in front of our backend
computer in front of our backend computer. This is called a load
computer. This is called a load balancer. So what a load balancer does
balancer. So what a load balancer does is if we have a really busy website, one
is if we have a really busy website, one computer might not be enough to handle
computer might not be enough to handle all the requests. So we can actually run
all the requests. So we can actually run the back end on multiple computers and
the back end on multiple computers and this load balancer will distribute the
this load balancer will distribute the requests across these computers. This
requests across these computers. This allows our website to handle much more
allows our website to handle much more users.
users. So here we can decide how many back-end
So here we can decide how many back-end computers to run. Since we're just
computers to run. Since we're just testing, we'll set this to a minimum of
testing, we'll set this to a minimum of one and a maximum of one.
one and a maximum of one. And then we'll scroll down
And now Elastic Beantock will set up a load balancer computer in front of our
load balancer computer in front of our back end. And this will take a few
back end. And this will take a few minutes to complete.
minutes to complete. After it finishes, we're going to go
After it finishes, we're going to go back to the configuration again
and we'll scroll down to the instance traffic settings and just make sure that
traffic settings and just make sure that min is one and max is one. If it's not
min is one and max is one. If it's not one, we can click edit
one, we can click edit and then scroll back down and then
and then scroll back down and then change it to one. And we'll scroll down
change it to one. And we'll scroll down and click apply again.
So when that finishes, I'll just check it again.
So now our website setup looks like this. We have three computers, the front
this. We have three computers, the front end, the back end, and the load
end, the back end, and the load balancer. This is closer to a real world
balancer. This is closer to a real world setup. Again, you can watch my video on
setup. Again, you can watch my video on backend overview to learn more about
backend overview to learn more about these concepts.
these concepts. Next, currently all the data for our
Next, currently all the data for our React app like the products, the cart,
React app like the products, the cart, and the orders are saved in a database
and the orders are saved in a database and the database is saved in a file.
and the database is saved in a file. However, when we put our React app on
However, when we put our React app on the internet, we usually put the
the internet, we usually put the database on a separate computer and this
database on a separate computer and this lets us share the data between backend
lets us share the data between backend computers.
computers. So, inside AWS, we're going to go to the
So, inside AWS, we're going to go to the configuration again
configuration again and we'll scroll down to the database
and we'll scroll down to the database configuration and we'll click edit.
configuration and we'll click edit. And inside the database section, we're
And inside the database section, we're going to scroll down
going to scroll down and find database and we'll click enable
and find database and we'll click enable database.
database. Elastic Beantock will automatically
Elastic Beantock will automatically create a new computer that's running a
create a new computer that's running a database and it will connect this
database and it will connect this database to our back end.
database to our back end. So, we'll scroll down and look at these
So, we'll scroll down and look at these options. And here we can select the
options. And here we can select the database that we want to use. So the
database that we want to use. So the e-commerce back end works with the
e-commerce back end works with the database MySQL. So we're going to use
database MySQL. So we're going to use that.
that. And then here we're going to look at the
And then here we're going to look at the instance class setting. So this is the
instance class setting. So this is the size of the computer running the
size of the computer running the database.
database. In the description, we'll click this
In the description, we'll click this link, go to lesson 10, and then here
link, go to lesson 10, and then here we'll follow the instructions to select
we'll follow the instructions to select the correct instance class for the
the correct instance class for the database.
And now we'll scroll down to the bottom and click apply.
So AWS will set up a separate computer to run the database. And I already added
to run the database. And I already added some code in my e-commerce back end to
some code in my e-commerce back end to connect to this database. So it should
connect to this database. So it should just work. If you have issues, please
just work. If you have issues, please check the AWS troubleshooting guide.
After that finishes, we can open the website again
website again and it still works. If we add something
and it still works. If we add something to the cart, notice that the database
to the cart, notice that the database still works. And if we open the orders
still works. And if we open the orders page,
page, remember that earlier I created a new
remember that earlier I created a new order.
order. And now the orders are back to the
And now the orders are back to the default values.
default values. So this means that we're using the new
So this means that we're using the new MySQL database that we set up. And now
MySQL database that we set up. And now our AWS setup looks like this. We have a
our AWS setup looks like this. We have a load balancer, a backend, and it
load balancer, a backend, and it connects to a database on another
connects to a database on another computer. And this is getting even
computer. And this is getting even closer to a real world setup.
Next, if we go back to AWS, notice that to open our website, we use
notice that to open our website, we use this default URL, which is really long.
this default URL, which is really long. So, now we're going to set up a domain
So, now we're going to set up a domain name to make our website easier to
name to make our website easier to access. A domain name is like myite.com
access. A domain name is like myite.com or youtube.com. It's a short name that
or youtube.com. It's a short name that makes it easy to access our website.
makes it easy to access our website. So instead of putting this long URL in
So instead of putting this long URL in the browser, we can just type myite.com
the browser, we can just type myite.com and it will open this website. So I'll
and it will open this website. So I'll show you how to set up a domain name
show you how to set up a domain name with AWS.
with AWS. First, we need to purchase a domain
First, we need to purchase a domain name. Most domain names cost around $10
name. Most domain names cost around $10 or $20 per year, so this section is
or $20 per year, so this section is optional. If you already have a domain
optional. If you already have a domain name that you purchased before and you
name that you purchased before and you want to use, feel free to skip to the
want to use, feel free to skip to the next section. Otherwise, I'm going to
next section. Otherwise, I'm going to show you how to purchase your own domain
show you how to purchase your own domain name. There are many services we can use
name. There are many services we can use to purchase domain names. I use a
to purchase domain names. I use a service called namecheep for all my
service called namecheep for all my websites like superimple.dev.
websites like superimple.dev. In the description, we'll click this
In the description, we'll click this link, go to lesson 10, and click here to
link, go to lesson 10, and click here to go to namecheep. So, this is an
go to namecheep. So, this is an affiliate link. If you decide to
affiliate link. If you decide to purchase a domain name using this link,
purchase a domain name using this link, part of your purchase will help support
part of your purchase will help support this channel. Thank you so much.
Once we're on NameCheep, we're going to search for a domain name that we want.
search for a domain name that we want. If you see a search box here, you can
If you see a search box here, you can search for it. Otherwise, we can go to
search for it. Otherwise, we can go to domains and domain name search.
domains and domain name search. and we'll scroll down here
and we'll scroll down here and search for a domain name. So, domain
and search for a domain name. So, domain names are unique. Once they are taken,
names are unique. Once they are taken, like youtube.com, we can't purchase it
like youtube.com, we can't purchase it anymore. If you don't know what domain
anymore. If you don't know what domain name you want, my recommendation is to
name you want, my recommendation is to try to register your first and last
try to register your first and last name. This might be useful for a
name. This might be useful for a personal website. So, for me, it's Simon
personal website. So, for me, it's Simon Bao. and we need to give it an ending
Bao. and we need to give it an ending like
like do stands for commercial. It's the most
do stands for commercial. It's the most popular ending for domain names. Now,
popular ending for domain names. Now, you could pick another ending that you
you could pick another ending that you want, but be careful because some domain
want, but be careful because some domain endings don't work with normal browsers.
endings don't work with normal browsers. If you're not sure which ending you
If you're not sure which ending you want, I recommend using com or.net just
want, I recommend using com or.net just to be safe because they are the most
to be safe because they are the most popular.
popular. So now I'm going to click search to see
So now I'm going to click search to see if this domain has already been taken.
if this domain has already been taken. So it looks like this one has already
So it looks like this one has already been taken. So I'll just add something
been taken. So I'll just add something to it like Simon Balenge or Engineer.
to it like Simon Balenge or Engineer. And this one is available. So you might
And this one is available. So you might need to modify your domain name to find
need to modify your domain name to find one that works for you.
one that works for you. So, we'll add this to the cart
If you want to autorenew this domain name, you can click here and then we'll
name, you can click here and then we'll click confirm order.
click confirm order. And if you don't have a name account,
And if you don't have a name account, you need to create an account first.
And after filling out all the information, we'll purchase the domain.
And that's it. Now we have a domain name and we own a little piece of the
and we own a little piece of the internet.
internet. Once we have a domain name, we're going
Once we have a domain name, we're going to set up the domain name in AWS.
to set up the domain name in AWS. So, we'll go back to AWS
So, we'll go back to AWS and at the top we're going to search for
and at the top we're going to search for the service route 53
the service route 53 and we're going to write click this and
and we're going to write click this and open in a new tab.
So, route 53 lets us manage our domain names in AWS. We can click get started
names in AWS. We can click get started and click create hosted zones
and click create hosted zones and then click get started.
and then click get started. If you don't see that, we can also click
If you don't see that, we can also click this menu here,
this menu here, click hosted zones
click hosted zones and then click create hosted zone.
and then click create hosted zone. A hosted zone lets us connect a domain
A hosted zone lets us connect a domain name to our app. So currently a hosted
name to our app. So currently a hosted zone costs about 1.6 6 cents per day. So
zone costs about 1.6 6 cents per day. So you can use it for free for a few hours.
you can use it for free for a few hours. So here we're going to enter the domain
So here we're going to enter the domain name that we have. So for me it's simon
name that we have. So for me it's simon balenge.com
and scroll down and we'll leave it as a public and then click create hosted
public and then click create hosted zone.
zone. And now inside here, we're going to
And now inside here, we're going to scroll down and click create record.
scroll down and click create record. So this sets where the domain name will
So this sets where the domain name will go. We're going to leave the subdomain
go. We're going to leave the subdomain as blank and we'll create an A record
as blank and we'll create an A record and we're going to check alias.
and we're going to check alias. And here we can select which AWS service
And here we can select which AWS service we want to connect to.
we want to connect to. So for us, we're using elastic beantock
So for us, we're using elastic beantock and we're going to choose the region. If
and we're going to choose the region. If we go back to the tab that's running
we go back to the tab that's running elastic beantock, we can see the region
elastic beantock, we can see the region up here. So for me, I'm using the region
up here. So for me, I'm using the region Ohio.
Ohio. So go back to route 53 and I'll search
So go back to route 53 and I'll search for the region Ohio and select it. And
for the region Ohio and select it. And we should see our app here. So I'll
we should see our app here. So I'll select that.
select that. and then scroll down and click create
and then scroll down and click create records.
And finally, we need to tell NameCheep or the company that you use for your
or the company that you use for your domain name to redirect to AWS.
domain name to redirect to AWS. So inside NameCheep or your domain
So inside NameCheep or your domain company, we're going to go to the
company, we're going to go to the settings
and we're going to find the domain. So in namecheep it's in domain list
in namecheep it's in domain list and here you may need to verify your
and here you may need to verify your email. So we'll click this and check
email. So we'll click this and check your email for the verification. So this
your email for the verification. So this might take a while. So we just have to
might take a while. So we just have to wait until the verification is complete.
wait until the verification is complete. And we may need to log out and log back
And we may need to log out and log back in to our NameCheep account for the
in to our NameCheep account for the verification to update.
Once verification is complete, we should be able to go back to the domain list,
be able to go back to the domain list, find our domain, and open the settings
find our domain, and open the settings for the domain.
And in the settings, we're going to look for a section that's called name
for a section that's called name servers. If you're having trouble
servers. If you're having trouble finding this in namecheep or your domain
finding this in namecheep or your domain company, please check the AWS
company, please check the AWS troubleshooting guide in the
troubleshooting guide in the description.
description. And then in here, we're going to click
And then in here, we're going to click this dropown
this dropown and we're going to set custom DNS
and we're going to set custom DNS because we're going to use AWS for this.
because we're going to use AWS for this. So now we need to enter some name
So now we need to enter some name servers. To find these, we're going to
servers. To find these, we're going to go back to AWS route 53.
go back to AWS route 53. And I need to zoom out a little bit to
And I need to zoom out a little bit to see this. Inside the hosted zone, we
see this. Inside the hosted zone, we have some records here. and we're going
have some records here. and we're going to look for the record NS or name
to look for the record NS or name server.
server. So in the NS record, we should see these
So in the NS record, we should see these four URLs here. So we just need to copy
four URLs here. So we just need to copy these over to namecheep or your domain
these over to namecheep or your domain company. So we'll select this and copy.
company. So we'll select this and copy. And then inside NameCheep
And then inside NameCheep and here we'll paste.
and here we'll paste. And we'll go back and select the second
And we'll go back and select the second name server.
name server. copy
copy and paste.
and paste. If we need to, we can add two more name
If we need to, we can add two more name servers.
servers. And here we'll select this and copy.
And here we'll select this and copy. And here we'll paste.
And here we'll paste. And we'll select the last one. Copy.
And we'll select the last one. Copy. And here paste. And then save.
So what this does is when we open our domain name in the browser, NameCheep is
domain name in the browser, NameCheep is going to redirect to AWS and then AWS
going to redirect to AWS and then AWS will redirect to Elastic Beantock or to
will redirect to Elastic Beantock or to our app.
our app. So this setting will take a while to
So this setting will take a while to update. Sometimes it finishes in just 10
update. Sometimes it finishes in just 10 minutes, but it could take up to 24 to
minutes, but it could take up to 24 to 48 hours. So we just have to be patient.
48 hours. So we just have to be patient. So once we waited for a while, we can
So once we waited for a while, we can try opening a new tab.
try opening a new tab. And in here we'll type http
And in here we'll type http colon double slash and our domain name.
colon double slash and our domain name. So for me it's simon baenge.com
So for me it's simon baenge.com and press enter.
and press enter. And this will redirect to our app. So
And this will redirect to our app. So now we're able to access our React app
now we're able to access our React app using a short domain name that's easy to
using a short domain name that's easy to remember.
Next, I'm going to explain why we enter HTTP in front and why we see this not
HTTP in front and why we see this not secure warning here. So this means that
secure warning here. So this means that our website is not using encryption.
our website is not using encryption. This means that any data we send to this
This means that any data we send to this website can be intercepted by a hacker.
website can be intercepted by a hacker. To enable encryption on this website and
To enable encryption on this website and make it secure, we need to set up an SSL
make it secure, we need to set up an SSL certificate, which is a special file
certificate, which is a special file that enables encryption.
that enables encryption. To get an SSL certificate, we can use
To get an SSL certificate, we can use AWS.
AWS. So, we'll go back to AWS Route 53 and
So, we'll go back to AWS Route 53 and then at the top we'll search for another
then at the top we'll search for another service called certificate
service called certificate manager
manager and click here
and we can request a certificate. If you don't see it, you can also go in here
don't see it, you can also go in here and click request certificate.
and click request certificate. We'll use the default value and click
We'll use the default value and click next.
next. And here we're going to enter our domain
And here we're going to enter our domain name. Make sure to enter your domain
name. Make sure to enter your domain name.
name. And we'll scroll down and make sure DNS
And we'll scroll down and make sure DNS validation is selected.
validation is selected. And scroll down and click request.
And scroll down and click request. And then we'll wait for this to finish
And then we'll wait for this to finish loading.
And now AWS needs to confirm that we own the domain name. That's why it says
the domain name. That's why it says pending validation.
pending validation. To do that, we can just click this
To do that, we can just click this create records in Route 53 button. If
create records in Route 53 button. If you don't see this, please check the AWS
you don't see this, please check the AWS troubleshooting guide.
And it should show up here. And we'll click create records.
click create records. And we'll wait for this to finish. We
And we'll wait for this to finish. We may need to refresh a few times until it
may need to refresh a few times until it says it was successful.
says it was successful. And now that we have an SSL certificate,
And now that we have an SSL certificate, we can use this in elastic beantock. So
we can use this in elastic beantock. So we'll go back to elastic beantock
we'll go back to elastic beantock and then in the configurations here,
we're going to scroll down to the instance traffic settings and click
instance traffic settings and click edit.
edit. And we're going to scroll down
until we find this listeners section. And here we'll click add listener.
And here we'll click add listener. For the port we're going to use 443.
For the port we're going to use 443. And for the protocol we're going to use
And for the protocol we're going to use HTTPS.
HTTPS. HTTPS means we're going to have a secure
HTTPS means we're going to have a secure connection to our website. And this
connection to our website. And this usually uses port 443.
usually uses port 443. And here we're going to choose the SSL
And here we're going to choose the SSL certificate that we just created.
certificate that we just created. And we should be able to leave the SSL
And we should be able to leave the SSL policy blank and click save.
policy blank and click save. If that didn't work, please check the
If that didn't work, please check the AWS troubleshooting guide. So this
AWS troubleshooting guide. So this basically adds an SSL certificate to the
basically adds an SSL certificate to the load balancer. And now any data sent to
load balancer. And now any data sent to our website will be encrypted.
our website will be encrypted. So, we're going to scroll down and click
So, we're going to scroll down and click apply.
And again, this will take a few minutes to complete. So, we just have to wait
to complete. So, we just have to wait for it.
Once that's complete, I'll close some of these other tabs
these other tabs and I'll create a new tab.
and I'll create a new tab. And in the URL, we're going to type
And in the URL, we're going to type https
https colon double slash. So this tells the
colon double slash. So this tells the browser to use the secure connection to
browser to use the secure connection to our website
our website and then we'll type our domain name. For
and then we'll type our domain name. For me, it's simonbowenge.com
and press enter. So now the not secure warning is gone
So now the not secure warning is gone and we're using a secure connection to
and we're using a secure connection to our website that uses encryption.
our website that uses encryption. Also now if we just type our domain name
Also now if we just type our domain name in the URL without HTTPS in front and
in the URL without HTTPS in front and press enter
press enter it will default to using the secure
it will default to using the secure version. So that's how we set up an SSL
version. So that's how we set up an SSL certificate and HTTPS in AWS.
certificate and HTTPS in AWS. And now we have a professional and
And now we have a professional and realworld setup for our React app.
realworld setup for our React app. In this section, I'll show you how to
In this section, I'll show you how to delete everything we created in AWS.
delete everything we created in AWS. However, I recommend to do the exercises
However, I recommend to do the exercises of this lesson first to get more
of this lesson first to get more practice with AWS and then do this
practice with AWS and then do this deletion.
deletion. Also, I try to keep everything we
Also, I try to keep everything we created in the free tier. The only
created in the free tier. The only exception is the hosted zone in Route
exception is the hosted zone in Route 53. You can use it for free for a few
53. You can use it for free for a few hours. So you could keep running these
hours. So you could keep running these services and practice AWS if you want to
services and practice AWS if you want to check your AWS bill. We can go to the
check your AWS bill. We can go to the profile and click billing and cost
profile and click billing and cost management.
management. And now after you finish the exercises,
And now after you finish the exercises, I'll show you how to delete everything
I'll show you how to delete everything just in case. So in elastic beantock, we
just in case. So in elastic beantock, we can click this actions dropown and click
can click this actions dropown and click terminate environment.
terminate environment. And in here we need to type the name of
And in here we need to type the name of the environment which is here
Once that's finished, we can go up here and go to route 53.
And in this menu, we can go to hosted zones.
zones. and we'll open the hosted zone.
and we'll open the hosted zone. And inside here, we're going to select
And inside here, we're going to select the A record and the CNAME record and
the A record and the CNAME record and delete these records.
And then at the top, we can delete the hosted zone.
hosted zone. And in here, we'll type delete and click
And in here, we'll type delete and click delete.
delete. Once that's finished, at the top, we'll
Once that's finished, at the top, we'll go to certificate manager.
And in this menu, we're going to click list certificates.
list certificates. And we'll select the certificate and
And we'll select the certificate and click delete.
click delete. Type delete and click delete.
You can also delete your entire account if you want by clicking your profile and
if you want by clicking your profile and clicking account
and then close account. Although you lose access to the free tier if you do
lose access to the free tier if you do this. I usually keep my account open for
this. I usually keep my account open for a while to practice with the free tier.
a while to practice with the free tier. So now we put our React app on the
So now we put our React app on the internet and we created a professional
internet and we created a professional real world setup and that's the end of
real world setup and that's the end of this lesson. In this lesson we learned
this lesson. In this lesson we learned AWS or Amazon Web Services which is a
AWS or Amazon Web Services which is a collection of services that help us put
collection of services that help us put stuff on the internet. We learned EC2
stuff on the internet. We learned EC2 which lets us rent a computer from AWS
which lets us rent a computer from AWS and is known as infrastructure as a
and is known as infrastructure as a service or IAS. We learned Elastic
service or IAS. We learned Elastic Beantock which manages EC2 and sets up
Beantock which manages EC2 and sets up all the software that we need. This is
all the software that we need. This is also known as a platform as a service or
also known as a platform as a service or path. We put our backend on the
path. We put our backend on the internet. We learned how to build and
internet. We learned how to build and optimize the front end and put it on the
optimize the front end and put it on the internet. We learned how to deploy React
internet. We learned how to deploy React without a back end. We added a load
without a back end. We added a load balancer and database to create a more
balancer and database to create a more realworld setup. And we learned how to
realworld setup. And we learned how to set up a domain name, SSL certificate,
set up a domain name, SSL certificate, and HTTPS for our website.
and HTTPS for our website. Here are some exercises to help you
Here are some exercises to help you practice what we learned in this lesson.
In this lesson, we're going to learn some of the updates in the new version
some of the updates in the new version of React, and we'll learn how to use
of React, and we'll learn how to use TypeScript with React.
TypeScript with React. On the React website, there's a page
On the React website, there's a page that lists the updates in the new
that lists the updates in the new version of React. You can find a link to
version of React. You can find a link to this page in the description.
this page in the description. So there's a lot of changes here and
So there's a lot of changes here and many of these changes are related to
many of these changes are related to using React in a framework which is
using React in a framework which is basically a layer on top of React.
basically a layer on top of React. For now I'm just going to go over the
For now I'm just going to go over the changes that are related to this course.
changes that are related to this course. The first change is called support for
The first change is called support for document metadata. So this means that we
document metadata. So this means that we can put elements that normally go inside
can put elements that normally go inside the head section like the title, link
the head section like the title, link and meta elements directly inside our
and meta elements directly inside our component like this. So this lets us
component like this. So this lets us change the head section when we render
change the head section when we render this component. For example, in our
this component. For example, in our project, we used a title element to
project, we used a title element to change the text in the tab when we
change the text in the tab when we switch pages. The way this works is when
switch pages. The way this works is when this component renders, React will put
this component renders, React will put this title inside the head section and
this title inside the head section and this will change the text in the tab.
this will change the text in the tab. Before React 19, we had to use an npm
Before React 19, we had to use an npm package like React helmet to do this.
package like React helmet to do this. After React 19, we can just put these
After React 19, we can just put these elements directly in our components. So,
elements directly in our components. So, it's easier.
it's easier. Another change is called ref as a prop.
Another change is called ref as a prop. Earlier in this course, we learned about
Earlier in this course, we learned about refs and we can use a ref to get access
refs and we can use a ref to get access to an HTML element directly.
to an HTML element directly. We can also give a ref to a component.
We can also give a ref to a component. For example, if we want to get an HTML
For example, if we want to get an HTML element inside this component.
element inside this component. Before React 19, ref was a special prop.
Before React 19, ref was a special prop. We can't access it inside this
We can't access it inside this component. We had to use a feature
component. We had to use a feature called forward ref.
called forward ref. After React 19, ref is now a normal
After React 19, ref is now a normal prop. We can access it like any other
prop. We can access it like any other prop and we don't need to know about
prop and we don't need to know about forward ref anymore, so it's easier.
forward ref anymore, so it's easier. The next change is the introduction of
The next change is the introduction of the React compiler. The React compiler
the React compiler. The React compiler optimizes our React code. For example,
optimizes our React code. For example, let's say we had a component like this.
let's say we had a component like this. We have a counter and two other
We have a counter and two other components inside. When we click the
components inside. When we click the counter, this element will update, but
counter, this element will update, but it will also recreate these other two
it will also recreate these other two components. Even though clicking the
components. Even though clicking the counter does not affect the other two
counter does not affect the other two components.
components. That's because by default, when a
That's because by default, when a component updates, it will also update
component updates, it will also update or recreate all the components inside.
or recreate all the components inside. And this may cause performance issues.
And this may cause performance issues. To avoid this issue before React
To avoid this issue before React compiler, we had to use three features.
compiler, we had to use three features. Use memo, use callback, and memo. And
Use memo, use callback, and memo. And this prevents a component from being
this prevents a component from being recreated unless one of the props
recreated unless one of the props changed.
changed. So don't worry if you don't understand
So don't worry if you don't understand this code because after the React
this code because after the React compiler, the compiler will just add
compiler, the compiler will just add these optimizations automatically.
these optimizations automatically. And now we can just write our code as
And now we can just write our code as normal and we don't need to worry about
normal and we don't need to worry about use memo, use callback or memo anymore
use memo, use callback or memo anymore in most cases.
in most cases. So again, the React compiler optimizes
So again, the React compiler optimizes our React code. All we have to do is to
our React code. All we have to do is to set up the React compiler and we will
set up the React compiler and we will get these optimizations. We don't have
get these optimizations. We don't have to change any of our code.
Now, let's learn how to set up the React compiler in our project. In the
compiler in our project. In the description, we'll click this link, go
description, we'll click this link, go to lesson 11, and here we have the
to lesson 11, and here we have the instructions for setting up the React
instructions for setting up the React compiler. I put the setup instructions
compiler. I put the setup instructions here because this process might change
here because this process might change in the future, and it's not easy to
in the future, and it's not easy to update the video. So, follow the
update the video. So, follow the instructions that you see on your page.
instructions that you see on your page. For me, the first step is to install the
For me, the first step is to install the React compiler npm package. So, I'm
React compiler npm package. So, I'm going to select this command and copy
going to select this command and copy it. And then in my project,
it. And then in my project, I'm going to go to the command line and
I'm going to go to the command line and create a new tab. And I'll close these
create a new tab. And I'll close these other tabs so that I can start fresh.
other tabs so that I can start fresh. And first, I need to make sure I'm
And first, I need to make sure I'm running inside e-commerce-pro.
running inside e-commerce-pro. So, cd ecommerce-
So, cd ecommerce- project
project and then I'll paste the command
and then I'll paste the command and press enter to install the react
and press enter to install the react compiler npm package.
compiler npm package. And then I'll go back and the next
And then I'll go back and the next instruction is to copy this react
instruction is to copy this react config. So, I'll select this config and
config. So, I'll select this config and copy it.
copy it. And then I need to update vit.config.js.
And then I need to update vit.config.js. js and put that react config in here. So
js and put that react config in here. So I'll go to the project
I'll go to the project and open vit. doconfig.js.
and open vit. doconfig.js. And at the top I see this react config.
And at the top I see this react config. So I'm just going to replace it and
So I'm just going to replace it and paste
paste and save.
and save. And that's the setup. Again, the
And that's the setup. Again, the instructions might be different when you
instructions might be different when you watch this video. So follow the
watch this video. So follow the instructions on your page.
instructions on your page. Next, let's check if the React compiler
Next, let's check if the React compiler is working. So, we'll go back to the
is working. So, we'll go back to the instructions
instructions and down here we have some instructions
and down here we have some instructions for checking if React compiler is
for checking if React compiler is working. Again, follow the instructions
working. Again, follow the instructions on your page because they might have
on your page because they might have changed. So, first I'll start the back
changed. So, first I'll start the back end and the front end using mpm rundev.
end and the front end using mpm rundev. I'll go back to VS Code
I'll go back to VS Code and in the command line I'll create a
and in the command line I'll create a new tab
new tab and I'm going to go into the backend
and I'm going to go into the backend folder using cd ecommerce-backend
And I'll go to the front end tab and I'll also run mpm rundev.
So now both of them are running. I'll go back to the instructions
back to the instructions and the next step is to install the
and the next step is to install the React DevTools Chrome extension. So
React DevTools Chrome extension. So we'll click here.
we'll click here. So this is an extension made
So this is an extension made specifically for React. It has a bunch
specifically for React. It has a bunch of features that help us with React
of features that help us with React development.
development. So here we're going to add this
So here we're going to add this extension to our browser.
And once that's finished, I'll go back to the instructions.
to the instructions. And the next step is in your project,
And the next step is in your project, open the console and open the components
open the console and open the components tab. So, in VS Code, we're going to open
tab. So, in VS Code, we're going to open this project in the browser
and I'm going to rightclick and inspect.
and inspect. And in the console, we're going to click
And in the console, we're going to click here. And we should have a new
here. And we should have a new components tab.
components tab. So, we'll click this.
So, we'll click this. If it gets stuck, you can refresh.
And this shows us all the React components that are on our page. If we
components that are on our page. If we scroll down and if we look at our
scroll down and if we look at our components, they should have a badge
components, they should have a badge beside them called memo. This means that
beside them called memo. This means that the React compiler is working and it's
the React compiler is working and it's optimizing our React components.
optimizing our React components. Now, let's go back and look at some more
Now, let's go back and look at some more changes in the new version of React.
changes in the new version of React. The next change is removed prop types
The next change is removed prop types and default props. So prop types were an
and default props. So prop types were an older feature of React. It basically
older feature of React. It basically lets us check the type of a prop.
lets us check the type of a prop. For example, here we can check if the
For example, here we can check if the prop text is a string. If we run this
prop text is a string. If we run this app and text is not a string, it would
app and text is not a string, it would show a warning in the console.
show a warning in the console. So now we use a different tool called
So now we use a different tool called TypeScript which is better at this type
TypeScript which is better at this type of type checking. So React removed the
of type checking. So React removed the prop types feature in favor of
prop types feature in favor of TypeScript.
TypeScript. React also removed default props. If a
React also removed default props. If a prop is undefined, this feature lets us
prop is undefined, this feature lets us set a default value. So now we can do
set a default value. So now we can do this with normal JavaScript. So we don't
this with normal JavaScript. So we don't need this React feature anymore.
need this React feature anymore. Now that we learned that propt types was
Now that we learned that propt types was replaced by TypeScript, let's learn how
replaced by TypeScript, let's learn how to set up TypeScript with React, we'll
to set up TypeScript with React, we'll go back to VS Code.
go back to VS Code. And to set up TypeScript with React, we
And to set up TypeScript with React, we can use the create vit command. So in
can use the create vit command. So in the command line, we'll create a new tab
the command line, we'll create a new tab and make sure this is running in the
and make sure this is running in the React course folder. And we're going to
React course folder. And we're going to run the command npx
run the command npx create-ash vit. And we'll type at to
create-ash vit. And we'll type at to give it a specific version. And we'll
give it a specific version. And we'll click this link in the description. Go
click this link in the description. Go to lesson 11.
to lesson 11. And we'll use this version of vit. So
And we'll use this version of vit. So copy the version that you see on your
copy the version that you see on your page.
page. And here we'll paste
And here we'll paste and press enter.
and press enter. If it asks to install the package, press
If it asks to install the package, press Y and press enter.
Y and press enter. And as a review, create VIT creates a
And as a review, create VIT creates a new project. So let's name this project
new project. So let's name this project ecommerce-
ecommerce- project-ts
project-ts or TypeScript and press enter.
or TypeScript and press enter. For the framework,
For the framework, we're going to press down and choose
we're going to press down and choose React.
React. And for the variant, we're going to
And for the variant, we're going to choose TypeScript.
So this will create a new React project that uses TypeScript.
that uses TypeScript. If we look at the code inside source,
If we look at the code inside source, notice that it uses tsx files instead of
notice that it uses tsx files instead of JSX.
JSX. TSX means this code uses TypeScript
TSX means this code uses TypeScript while JSX means it uses JavaScript.
while JSX means it uses JavaScript. So now to run this project, we're going
So now to run this project, we're going to follow the instructions that we see.
to follow the instructions that we see. So for me, I'll cd into e-commerce
So for me, I'll cd into e-commerce dash project-ts
and run npm install to install all the packages that we
to install all the packages that we need.
need. And then I'm going to open the tab
And then I'm going to open the tab that's running the front end. And I'll
that's running the front end. And I'll press Ctrl C to stop the front end so we
press Ctrl C to stop the front end so we don't have any issues. And then in the
don't have any issues. And then in the TypeScript tab, we're going to run mpm
TypeScript tab, we're going to run mpm rundev to start this project.
rundev to start this project. And now we'll open this in the browser.
And now we'll open this in the browser. So I already have it open. So I'm going
So I already have it open. So I'm going to go in here and open this tab and
to go in here and open this tab and refresh.
refresh. Now we have a new React project. But
Now we have a new React project. But this project uses TypeScript instead of
this project uses TypeScript instead of JavaScript.
JavaScript. And now I'll give you an intro to
And now I'll give you an intro to TypeScript.
TypeScript. Let's go back to our code.
Let's go back to our code. And inside the TypeScript project, we're
And inside the TypeScript project, we're going to open app.tsx.
So first of all, what is Typescript? Typescript is just JavaScript with extra
Typescript is just JavaScript with extra features.
features. So notice that this TypeScript code is
So notice that this TypeScript code is the same as JavaScript code. The syntax
the same as JavaScript code. The syntax is the same and the features are the
is the same and the features are the same. For example, in here
same. For example, in here in Typescript, we can create a variable
in Typescript, we can create a variable the same way as JavaScript using const
the same way as JavaScript using const message equals the string hello.
message equals the string hello. And then we can console.log log message.
And then we can console.log log message. So as you can see, TypeScript is just
So as you can see, TypeScript is just JavaScript.
JavaScript. However, TypeScript gives us some extra
However, TypeScript gives us some extra features on top of JavaScript. The main
features on top of JavaScript. The main feature is we can add types to our
feature is we can add types to our variables.
variables. So what are types? Remember that
So what are types? Remember that JavaScript has different types of values
JavaScript has different types of values like numbers, strings, and objects.
like numbers, strings, and objects. In Typescript, we can set what type of
In Typescript, we can set what type of value is inside a variable.
value is inside a variable. For example, in this variable, we have a
For example, in this variable, we have a string. So, after the variable name, we
string. So, after the variable name, we can type colon space and string.
can type colon space and string. So, this tells TypeScript that this
So, this tells TypeScript that this variable contains a string.
variable contains a string. So now below this if I type message and
So now below this if I type message and then dot TypeScript knows that this is a
then dot TypeScript knows that this is a string. So now it's able to suggest all
string. So now it's able to suggest all the features of a string like two
the features of a string like two lowercase
lowercase and brackets.
and brackets. So using TypeScript our computer can
So using TypeScript our computer can give us better autocomplete suggestions.
give us better autocomplete suggestions. Next, if I type message
Next, if I type message to fixed and brackets,
to fixed and brackets, two fixed only works with numbers.
two fixed only works with numbers. Because TypeScript knows that this is a
Because TypeScript knows that this is a string, it's going to give us an error
string, it's going to give us an error saying that too does not work on
saying that too does not work on strings.
strings. So, this feature is called type
So, this feature is called type checking. TypeScript checks if this code
checking. TypeScript checks if this code works with this type of value and this
works with this type of value and this helps us avoid errors. In JavaScript,
helps us avoid errors. In JavaScript, there is no type checking. So if I want
there is no type checking. So if I want to put this code on my website,
to put this code on my website, JavaScript will just let me do it and it
JavaScript will just let me do it and it will crash my website. But in
will crash my website. But in Typescript, if I want to put this code
Typescript, if I want to put this code on my website, I would save this code
on my website, I would save this code and then in my command line, press
and then in my command line, press control C to stop the server and run npm
control C to stop the server and run npm run build.
Notice that TypeScript actually blocks us from building this code and putting
us from building this code and putting it on our website because there's an
it on our website because there's an error with the types.
error with the types. So, as you can see, TypeScript gives us
So, as you can see, TypeScript gives us type checking, which helps us avoid a
type checking, which helps us avoid a lot of these coding errors and helps us
lot of these coding errors and helps us keep our code safer.
keep our code safer. Another feature of TypeScript is type
Another feature of TypeScript is type inference. Type inference means
inference. Type inference means TypeScript can figure out the type
TypeScript can figure out the type automatically.
automatically. For example, in this code, this variable
For example, in this code, this variable obviously contains a string. So we
obviously contains a string. So we actually don't need to set the type
actually don't need to set the type manually here. If we delete this type,
manually here. If we delete this type, TypeScript will infer or figure out that
TypeScript will infer or figure out that this is a string. So I can remove it and
this is a string. So I can remove it and save
save and the error check still works because
and the error check still works because TypeScript knows that this is a string.
TypeScript knows that this is a string. Another example of type inference is up
Another example of type inference is up here in use state. So this count
here in use state. So this count variable contains the number zero.
variable contains the number zero. TypeScript will infer or figure out that
TypeScript will infer or figure out that count is a number.
count is a number. So if we do count to two lowercase and
So if we do count to two lowercase and brackets, it's going to give us an error
brackets, it's going to give us an error because two lowercase only works with
because two lowercase only works with strings and TypeScript figured out that
strings and TypeScript figured out that this is a number. So, as you can see,
this is a number. So, as you can see, TypeScript is just JavaScript, but it
TypeScript is just JavaScript, but it adds extra features like type checking
adds extra features like type checking and type inference to our code, and this
and type inference to our code, and this helps us find and avoid errors. So, now
helps us find and avoid errors. So, now let's save this code. And we'll save
let's save this code. And we'll save these changes into git. In the git
these changes into git. In the git section
section at the top, we're going to use the
at the top, we're going to use the message create new React TypeScript
message create new React TypeScript project
project and press commit.
So, we just learned how to create a new React project that uses TypeScript.
React project that uses TypeScript. Now, let's learn how to convert an
Now, let's learn how to convert an existing project, like our e-commerce
existing project, like our e-commerce project, to Typescript. To do that,
project, to Typescript. To do that, we're just going to move all of our
we're just going to move all of our changes over to the new TypeScript
changes over to the new TypeScript project.
project. Before we begin, if you have any issues
Before we begin, if you have any issues during this process, please check the
during this process, please check the troubleshooting guide in the description
troubleshooting guide in the description since things might change depending on
since things might change depending on the version of VIT.
the version of VIT. To make this easier in the e-commerce
To make this easier in the e-commerce project, we're going to delete the node
project, we're going to delete the node modules folder for now.
And then we'll make a copy of this folder. So we'll rightclick,
folder. So we'll rightclick, copy,
copy, and we'll collapse these folders and
and we'll collapse these folders and click the outside and rightclick and
click the outside and rightclick and paste.
paste. So, this just helps us keep track of
So, this just helps us keep track of progress when we're moving the changes
progress when we're moving the changes over. So, we're going to start from top
over. So, we're going to start from top to bottom. First, we'll look at the
to bottom. First, we'll look at the public folder. So, in here, the change
public folder. So, in here, the change we made is we added this images folder.
we made is we added this images folder. So, we're going to take the public
So, we're going to take the public folder and we're going to drag it to the
folder and we're going to drag it to the TypeScript project
TypeScript project and click move
and click move and click replace.
and click replace. Next, let's go into the source folder
Next, let's go into the source folder and we're going to move our changes over
and we're going to move our changes over one by one. So, first in the assets
one by one. So, first in the assets folder,
folder, we didn't make any changes to this
we didn't make any changes to this folder, so we're not going to move it
folder, so we're not going to move it over and we can just delete this folder.
As a reminder, we're not trying to move all of our code over. We want to start
all of our code over. We want to start from a default TypeScript project and
from a default TypeScript project and then only move our changes over to the
then only move our changes over to the new project.
new project. So let's continue and look at the
So let's continue and look at the components folder. So this folder is
components folder. So this folder is completely new. So we're going to move
completely new. So we're going to move this entire folder over to the
this entire folder over to the TypeScript project inside the source
TypeScript project inside the source folder
folder and click move.
and click move. And if it asks to update the imports,
And if it asks to update the imports, we're going to click no because we're
we're going to click no because we're going to move everything over.
going to move everything over. Next, we're going to go back up and the
Next, we're going to go back up and the pages folder is new. So, we're going to
pages folder is new. So, we're going to drag this folder into the TypeScript
drag this folder into the TypeScript project inside source
project inside source and click move
and click move and update the imports. Click no.
and update the imports. Click no. Next, we'll scroll up and the utils
Next, we'll scroll up and the utils folder is new. So, we're going to select
folder is new. So, we're going to select this folder and drag it into the
this folder and drag it into the TypeScript folder inside source. So,
TypeScript folder inside source. So, move and click no.
move and click no. And next, we'll keep going one by one.
And next, we'll keep going one by one. For app.css,
For app.css, we made it empty. So, we're going to
we made it empty. So, we're going to move this over. So, drag it into source.
move this over. So, drag it into source. Click move and click replace
Click move and click replace and scroll back up for app.jsx.
and scroll back up for app.jsx. We made a bunch of changes in here. So,
We made a bunch of changes in here. So, we're going to move this over. So, drag
we're going to move this over. So, drag it into source
it into source and click move.
and click move. However, notice in the TypeScript
However, notice in the TypeScript project, the file is called app.tsx.
project, the file is called app.tsx. So, we're going to replace this code
So, we're going to replace this code with our file. So, first we're going to
with our file. So, first we're going to select this and delete app.tsx.
And then we'll rightclick app.jsx and rename
and rename and rename it to tsx.
Now, we'll scroll back up and continue moving our changes.
moving our changes. So, index.css,
So, index.css, we completely changed this file. So,
we completely changed this file. So, we're going to move it into the
we're going to move it into the TypeScript project into source.
TypeScript project into source. Click move and click replace
Click move and click replace and scroll back up. And finally, in
and scroll back up. And finally, in main.jsx,
main.jsx, we just added the router. So, let's move
we just added the router. So, let's move this file as well. We'll select it and
this file as well. We'll select it and drag it into source
drag it into source and move.
and move. And again in Typescript the file is
And again in Typescript the file is called main.tsx.
called main.tsx. We'll select it and delete.
And we're going to rename our file. Right click, rename
Right click, rename main.tsx,
main.tsx, and press enter.
and press enter. Update the imports. Select no.
Update the imports. Select no. We'll scroll back up and we moved all of
We'll scroll back up and we moved all of the code from the source folder so we
the code from the source folder so we can delete it.
Next, we don't need to move the starting code folder because this was just for
code folder because this was just for practice when we were setting up this
practice when we were setting up this project. So, we can just delete this
project. So, we can just delete this folder.
Now, let's move all the files over to the TypeScript project. So in git
the TypeScript project. So in git ignore, we didn't make any changes to
ignore, we didn't make any changes to this file, so we don't need to move it
this file, so we don't need to move it over and we can delete it.
over and we can delete it. In eslint.config.js,
In eslint.config.js, we added one change to this file at the
we added one change to this file at the bottom, which is we added this rule to
bottom, which is we added this rule to disable prop types. So we'll select this
disable prop types. So we'll select this code and copy.
code and copy. And in the TypeScript project, we're
And in the TypeScript project, we're going to open eslint.config.
going to open eslint.config. And at the bottom in this rules object,
And at the bottom in this rules object, we're going to paste and move that
we're going to paste and move that change over and save.
change over and save. So again, we don't want to move all of
So again, we don't want to move all of our code over. We just want to move the
our code over. We just want to move the changes over because a lot of this code
changes over because a lot of this code is specific to TypeScript.
is specific to TypeScript. So, we'll scroll back up here and we can
So, we'll scroll back up here and we can delete this file because we moved it
delete this file because we moved it over.
over. Next, let's keep going in here. For
Next, let's keep going in here. For index.html,
index.html, we changed a few parts of this code. So,
we changed a few parts of this code. So, we're going to move these changes over
we're going to move these changes over to help us compare this code with the
to help us compare this code with the TypeScript version. I'm going to scroll
TypeScript version. I'm going to scroll down
down and take this index.html HTML and then
and take this index.html HTML and then move it at the bottom here so that I can
move it at the bottom here so that I can compare these side by side.
compare these side by side. So first the first three lines here we
So first the first three lines here we did not make any changes so we can skip
did not make any changes so we can skip them.
them. And then here the next three lines we
And then here the next three lines we also did not make any changes so we can
also did not make any changes so we can skip them. And here we added a base
skip them. And here we added a base element. So we're going to select this
element. So we're going to select this and copy. And in the TypeScript version,
and copy. And in the TypeScript version, we're going to paste that change.
we're going to paste that change. And here we also deleted the title. So
And here we also deleted the title. So in the TypeScript version, we're also
in the TypeScript version, we're also going to delete the title.
going to delete the title. And here we added a font called Roboto.
And here we added a font called Roboto. So we're going to move this change by
So we're going to move this change by selecting it and copy.
selecting it and copy. And in here we'll paste the font. And if
And in here we'll paste the font. And if we need to fix the formatting, we can
we need to fix the formatting, we can select this and press shift tab to
select this and press shift tab to remove some indents
and I'll scroll down. And for the rest of the code, we did not
And for the rest of the code, we did not make any changes. So now we moved all
make any changes. So now we moved all the changes over. I'm going to save this
the changes over. I'm going to save this file and close this for now.
file and close this for now. And then in the copy, we can delete
And then in the copy, we can delete index.html.
And next, we don't need to move packaged lock.json over because this will be
lock.json over because this will be autogenerated when we npm install. So,
autogenerated when we npm install. So, we can just delete this file
and we'll move over package.json. In this file, we didn't change anything
In this file, we didn't change anything at the top, but we did add some
at the top, but we did add some dependencies and dev dependencies. So,
dependencies and dev dependencies. So, we're going to move these over. We'll
we're going to move these over. We'll select the dependencies and copy.
select the dependencies and copy. And then in the TypeScript project, open
And then in the TypeScript project, open package.json.
And in these dependencies, we'll type comma and paste.
we'll type comma and paste. And then we'll remove any duplicates.
And then we'll remove any duplicates. So, we'll remove React and React DOM and
So, we'll remove React and React DOM and save.
save. And we'll scroll back up
And we'll scroll back up and open package.json.
and open package.json. And we'll do the same thing with the dev
And we'll do the same thing with the dev dependencies. So, we'll select all these
dependencies. So, we'll select all these dependencies
dependencies and copy.
and copy. And in the TypeScript project
And in the TypeScript project package.json JSON in the dev
package.json JSON in the dev dependencies at the bottom we'll type
dependencies at the bottom we'll type comma and paste
comma and paste and we'll remove all these duplicates.
and we'll remove all these duplicates. So I'll remove eslint
So I'll remove eslint and I'll remove these duplicates
and I'll remove these duplicates and these duplicates
and these duplicates and these duplicates
and remove this until there are no more duplicates
until there are no more duplicates remaining.
remaining. And now we'll save.
And now we'll save. And then we're going to run npm install
And then we're going to run npm install to make sure we successfully install all
to make sure we successfully install all these packages. In the command line,
these packages. In the command line, we'll go to the tab for the TypeScript
we'll go to the tab for the TypeScript project and we'll run npm install.
And now we can scroll up and delete package.json.
And we'll keep going for readme.md. We didn't change this file. So we can
didn't change this file. So we can delete it.
And this file setup test.js is new. So we'll move this over to the TypeScript
we'll move this over to the TypeScript project.
project. And we'll scroll up and we're going to
And we'll scroll up and we're going to move over vit.config.js.
move over vit.config.js. So in here we added a bunch of
So in here we added a bunch of configurations.
configurations. So in the TypeScript project
So in the TypeScript project we're going to drag vit.config.ts ts at
we're going to drag vit.config.ts ts at the bottom
the bottom and we're going to move our changes
and we're going to move our changes over. So, inside the config,
over. So, inside the config, we added some stuff for the React
we added some stuff for the React config. So, we're going to select this
config. So, we're going to select this React config and copy
React config and copy and then select this code, remove it,
and then select this code, remove it, and paste.
and paste. And we'll keep going. So, all of these
And we'll keep going. So, all of these configs are new. So, we can just select
configs are new. So, we can just select this code
this code and then copy.
and then copy. And inside the TypeScript version, we're
And inside the TypeScript version, we're going to paste
going to paste and save.
and save. So, now we moved all of our changes over
So, now we moved all of our changes over to the new project. And we can delete
to the new project. And we can delete this file.
And I'll close this for now. And finally, vtest.config.js.
And finally, vtest.config.js. JS is new. So, we can drag it into the
JS is new. So, we can drag it into the project.
project. And now we moved all of our changes over
And now we moved all of our changes over into the TypeScript project. And I can
into the TypeScript project. And I can delete this copy.
Next, we're going to go into the TypeScript project and we're going to
TypeScript project and we're going to fix the errors. First, we'll open
fix the errors. First, we'll open main.tsx.
main.tsx. And in here, instead of importing from
And in here, instead of importing from app.jsx,
app.jsx, the file is now app.tsx.
the file is now app.tsx. So we're going to update that.
So we're going to update that. Also, we have an error here. So this
Also, we have an error here. So this code tries to get an element from the
code tries to get an element from the page using the ID root. However, this
page using the ID root. However, this element might not exist. So TypeScript
element might not exist. So TypeScript gives us an error telling us this value
gives us an error telling us this value might be null. However, if we check our
might be null. However, if we check our index.html
index.html and scroll down, we have an element here
and scroll down, we have an element here with the ID of root. So, we know that
with the ID of root. So, we know that this element definitely exists.
this element definitely exists. In main.tsx,
In main.tsx, to tell Typescript that this value
to tell Typescript that this value definitely exists. At the end, we're
definitely exists. At the end, we're going to add exclamation and save.
going to add exclamation and save. So this tells Typescript that this value
So this tells Typescript that this value definitely exists and it will not be
definitely exists and it will not be null. And now the error is gone.
null. And now the error is gone. Next we'll open app.tsx.
And up here we get some errors when we are trying to import these files. The
are trying to import these files. The reason we get these errors is because
reason we get these errors is because these files are still.jsx
these files are still.jsx files or JavaScript files. So, we could
files or JavaScript files. So, we could rename all of our files totsx,
rename all of our files totsx, but then Typescript will start doing
but then Typescript will start doing type checking in these files and we may
type checking in these files and we may get a bunch of errors.
get a bunch of errors. Instead,
Instead, in our files, we can scroll down to
in our files, we can scroll down to tsconfig.app.json.
And inside here, we're going to add a setting double
we're going to add a setting double quotes allow capital J S
quotes allow capital J S colon true and comma
colon true and comma and save.
and save. So this setting lets us mix TypeScript
So this setting lets us mix TypeScript and JavaScript files in our project. So
and JavaScript files in our project. So now in app.tsx, tsx.
now in app.tsx, tsx. Our TypeScript code can also import from
Our TypeScript code can also import from JavaScript files and it won't cause an
JavaScript files and it won't cause an error. So the allowJS setting lets us
error. So the allowJS setting lets us gradually convert a JavaScript project
gradually convert a JavaScript project to TypeScript, one file at a time.
to TypeScript, one file at a time. Now that we fixed the errors, let's run
Now that we fixed the errors, let's run this project again to see if our
this project again to see if our e-commerce project works with
e-commerce project works with TypeScript. in the command line. Make
TypeScript. in the command line. Make sure you're in e-commerce project ts and
sure you're in e-commerce project ts and we're going to npm rundev
we're going to npm rundev and press enter.
and press enter. And now if we open this URL in the
And now if we open this URL in the browser
browser and refresh
and refresh and now you can see that our e-commerce
and now you can see that our e-commerce project is working with TypeScript. If
project is working with TypeScript. If we try some of the features like add to
we try some of the features like add to cart, you'll see that everything still
cart, you'll see that everything still works. If this does not work for you,
works. If this does not work for you, you can check the troubleshooting guide
you can check the troubleshooting guide in the description.
in the description. Now, let's go back to our code
Now, let's go back to our code and let's rename our folders so that we
and let's rename our folders so that we use TypeScript by default. We're going
use TypeScript by default. We're going to scroll up and we're going to rename
to scroll up and we're going to rename e-commerce project. Right click, rename
e-commerce project. Right click, rename to e-commerce project dashjs
to e-commerce project dashjs for JavaScript.
for JavaScript. And then we're going to rename
And then we're going to rename e-commerce project-ts
e-commerce project-ts to e-commerce project.
So now by default our project will be using TypeScript.
using TypeScript. And just to make sure, we're going to go
And just to make sure, we're going to go to the command line and stop the V
to the command line and stop the V server. And we're going to delete all
server. And we're going to delete all our tabs. So here we'll also control C
our tabs. So here we'll also control C to stop the back end and delete all the
to stop the back end and delete all the tabs. And then we'll reopen the command
tabs. And then we'll reopen the command line using the terminal menu and new
line using the terminal menu and new terminal.
terminal. And we're going to restart the back end
And we're going to restart the back end using cd ecommerce-backend
and create a new tab and we'll run the front end cd
and we'll run the front end cd ecommerce- project
ecommerce- project and npm rundev.
And in the browser, we'll refresh and our TypeScript project still works.
and our TypeScript project still works. We'll go to VS Code. And finally, we're
We'll go to VS Code. And finally, we're going to organize these folders a little
going to organize these folders a little bit. So, right now, we're no longer
bit. So, right now, we're no longer using the e-commerce project JavaScript
using the e-commerce project JavaScript version or the React basics folder. So,
version or the React basics folder. So, let's click outside and we'll click here
let's click outside and we'll click here to create a new folder. and let's call
to create a new folder. and let's call it old dash projects.
it old dash projects. And then we'll drag the JavaScript
And then we'll drag the JavaScript version into here.
So now our folders are a little bit more organized.
organized. So now let's save this into Git. We'll
So now let's save this into Git. We'll open the git section and at the top
open the git section and at the top we'll use the message convert e-commerce
we'll use the message convert e-commerce project to type script and commit.
Next we're going to learn an intro to TypeScript with React. First, we'll go
TypeScript with React. First, we'll go into our files
into our files and in the project, we're going to go to
and in the project, we're going to go to source the utils folder and we're going
source the utils folder and we're going to look at money.js.
to look at money.js. Currently, this is a JavaScript file.
Currently, this is a JavaScript file. That means there is no type checking in
That means there is no type checking in this code. So, we're going to convert
this code. So, we're going to convert this to TypeScript by right-clicking
this to TypeScript by right-clicking and rename.
and rename. And we'll rename it to money.t. ts or
And we'll rename it to money.t. ts or typescript.
typescript. So this converts the file into
So this converts the file into typescript and now it will enable type
typescript and now it will enable type checking and now we will get an error
checking and now we will get an error here.
here. So this error says amount sent
So this error says amount sent implicitly has an any type. So what this
implicitly has an any type. So what this means is that earlier we learned the
means is that earlier we learned the feature type inference which means
feature type inference which means typescript can figure out the type
typescript can figure out the type automatically.
automatically. However, in this situation, TypeScript
However, in this situation, TypeScript does not have enough information to
does not have enough information to figure out the type of amount sets. So,
figure out the type of amount sets. So, we have to set the type manually.
we have to set the type manually. To set the type of a parameter after
To set the type of a parameter after this parameter, we're going to type
this parameter, we're going to type colon space and then the type of this
colon space and then the type of this value. So, in this case, amount sent
value. So, in this case, amount sent should be a number. So, we're going to
should be a number. So, we're going to type number and save.
type number and save. And now that TypeScript knows what type
And now that TypeScript knows what type of value this is, the error will go
of value this is, the error will go away. And now we successfully converted
away. And now we successfully converted this file to TypeScript.
this file to TypeScript. Let's do another example. We're going to
Let's do another example. We're going to go to the components folder and we're
go to the components folder and we're going to convert header.jsx into
going to convert header.jsx into TypeScript. So we're going to rename
TypeScript. So we're going to rename this file
this file to header.tsx.
So tsx is just a TypeScript file, but the X means we can write HTML inside
the X means we can write HTML inside this file. So it's just like JSX except
this file. So it's just like JSX except it uses TypeScript.
it uses TypeScript. So now this converts the file to
So now this converts the file to TypeScript and it enables type checking
TypeScript and it enables type checking and we get some errors here.
and we get some errors here. If we look at this error,
If we look at this error, we get a similar error. Cart implicitly
we get a similar error. Cart implicitly has an any type. So again, this means
has an any type. So again, this means that TypeScript does not have enough
that TypeScript does not have enough information to figure out the type of
information to figure out the type of cart automatically. So we have to set
cart automatically. So we have to set the type manually.
the type manually. We might try to add the type after cart
We might try to add the type after cart like this. However, this is not how we
like this. However, this is not how we add a type to this code because remember
add a type to this code because remember this code is actually a shortcut for
this code is actually a shortcut for this code. This is called the
this code. This is called the dstructuring shortcut.
dstructuring shortcut. So this whole thing is the parameter.
So this whole thing is the parameter. So we need to add the type here
So we need to add the type here after the parameter.
after the parameter. So this code is a shortcut for props
So this code is a shortcut for props which is an object. To tell Typescript
which is an object. To tell Typescript that this is an object here we're going
that this is an object here we're going to type curly brackets
to type curly brackets and then inside here we can also tell
and then inside here we can also tell TypeScript what properties are in this
TypeScript what properties are in this object. So in this object we have a cart
object. So in this object we have a cart property. So in the type we're also
property. So in the type we're also going to add a cart property. And
going to add a cart property. And remember that the cart is an array like
remember that the cart is an array like this.
this. So we're also going to tell Typescript
So we're also going to tell Typescript that this cart is an array using colon
that this cart is an array using colon and square bracket semicolon.
and square bracket semicolon. So again, this code tells Typescript
So again, this code tells Typescript that this value is an object with a
that this value is an object with a property called cart and the cart is an
property called cart and the cart is an array.
array. Next, we can also tell Typescript what
Next, we can also tell Typescript what is inside this array. In front of the
is inside this array. In front of the array, we can type curly brackets to
array, we can type curly brackets to tell Typescript that this is an array of
tell Typescript that this is an array of objects.
objects. And inside this object, we can also tell
And inside this object, we can also tell TypeScript what properties each object
TypeScript what properties each object has. So inside our cart array, each
has. So inside our cart array, each object has a product ID and this product
object has a product ID and this product ID is a string. So we can tell that to
ID is a string. So we can tell that to TypeScript using colon string semicolon
TypeScript using colon string semicolon and each object also has a quantity and
and each object also has a quantity and this is a number. So we can tell that to
this is a number. So we can tell that to Typescript using colon number semicolon
Typescript using colon number semicolon and each object has a delivery option ID
and each object has a delivery option ID which is a string. So colon string
which is a string. So colon string semicolon.
semicolon. So using this code we can tell
So using this code we can tell Typescript exactly what type of value
Typescript exactly what type of value this is. It's an object with a property
this is. It's an object with a property called cart. And the cart is an array.
called cart. And the cart is an array. And each value in the array has these
And each value in the array has these three properties.
three properties. So now TypeScript can actually look at
So now TypeScript can actually look at the rest of our code and check if each
the rest of our code and check if each value in the array has a quantity
value in the array has a quantity and if we accidentally misspell quantity
and if we accidentally misspell quantity here like this. TypeScript can use this
here like this. TypeScript can use this type here to check if we made a mistake.
type here to check if we made a mistake. So this helps us avoid a lot of mistakes
So this helps us avoid a lot of mistakes when we're coding. So, let's add that
when we're coding. So, let's add that back and save.
Next, we're going to organize this code a little bit. So, putting a complex type
a little bit. So, putting a complex type directly in the code like this is a
directly in the code like this is a little hard to read. So, we can actually
little hard to read. So, we can actually take this type and then save it
take this type and then save it separately.
separately. above this component we can use type
above this component we can use type space and then give this a name.
space and then give this a name. So here this value is the props for the
So here this value is the props for the header component. So we'll name this
header component. So we'll name this header props and we'll type equal and
header props and we'll type equal and we're going to move this type up here.
we're going to move this type up here. So we'll select this type and cut.
So we'll select this type and cut. And then in here we're going to paste.
So this is called a type alias and it works just like a variable but for
works just like a variable but for types. So we can save a type in here and
types. So we can save a type in here and then we can use this type later in our
then we can use this type later in our code. For example, down here, we can
code. For example, down here, we can just use this type header props
just use this type header props and it will substitute this type into
and it will substitute this type into our code just like a variable.
our code just like a variable. And now our code is much cleaner. So
And now our code is much cleaner. So that's an intro to how to use TypeScript
that's an intro to how to use TypeScript with React. We basically add types to
with React. We basically add types to React features like props.
React features like props. So now let's save
So now let's save and we'll save these changes into git.
and we'll save these changes into git. In the git section
In the git section at the top we'll use the message convert
at the top we'll use the message convert money utils and header to type script
money utils and header to type script and commit.
Finally, we're going to learn how to use AI or artificial intelligence with
AI or artificial intelligence with React. After we learn React, we can use
React. After we learn React, we can use AI to help us write React code faster.
AI to help us write React code faster. The easiest way to get started with AI
The easiest way to get started with AI is to use GitHub Copilot, which is built
is to use GitHub Copilot, which is built into VS Code. Before we begin, AI tools
into VS Code. Before we begin, AI tools are changing very quickly. If something
are changing very quickly. If something in this section is not working, you can
in this section is not working, you can check the troubleshooting guide in the
check the troubleshooting guide in the description.
description. To set up GitHub Copilot, we're going to
To set up GitHub Copilot, we're going to install the GitHub Copilot extension.
install the GitHub Copilot extension. So, in the extension section, we need to
So, in the extension section, we need to make sure we have the GitHub Copilot
make sure we have the GitHub Copilot extension installed. If it's not
extension installed. If it's not installed, we can search up here for
installed, we can search up here for GitHub Copilot
GitHub Copilot and install this extension.
Once we have that installed, we're going to click this C-pilot icon
we're going to click this C-pilot icon up here and we'll need to log in to our
up here and we'll need to log in to our GitHub account. So, we'll click sign in
GitHub account. So, we'll click sign in and then we need to log in to GitHub. If
and then we need to log in to GitHub. If you don't have a GitHub account, you can
you don't have a GitHub account, you can create one by clicking here or going to
create one by clicking here or going to github.com.
github.com. So, I'm going to log into my GitHub
So, I'm going to log into my GitHub account
account and then I'll click continue
and I'll click here to go back to VS Code.
Code. Once we finish the setup, we can start
Once we finish the setup, we can start using some features of AI. The first
using some features of AI. The first feature is autocomplete.
feature is autocomplete. So, let's say that we're in the header
So, let's say that we're in the header and we'll close this window for now.
and we'll close this window for now. And let's scroll down to the HTML
And let's scroll down to the HTML and we're going to go to the right
and we're going to go to the right section.
section. Let's say that inside the header, we
Let's say that inside the header, we want to add a link to a login page. So
want to add a link to a login page. So here we can just start typing in this
here we can just start typing in this code
code and the AI will give us some
and the AI will give us some autocomplete suggestions. To accept
autocomplete suggestions. To accept these suggestions, we can press tab.
these suggestions, we can press tab. So this creates a new link and some
So this creates a new link and some text. And I'll press enter.
text. And I'll press enter. And it gives another suggestion. So I
And it gives another suggestion. So I press tab.
press tab. And this creates the closing tag for the
And this creates the closing tag for the link.
link. So you notice that the autocomplete is
So you notice that the autocomplete is very smart because the AI can read and
very smart because the AI can read and understand the rest of our code and it
understand the rest of our code and it can suggest code that follows the same
can suggest code that follows the same patterns as the rest of our code. For
patterns as the rest of our code. For example, here it creates a link element
example, here it creates a link element and it gave it a class name that is
and it gave it a class name that is similar to the other class names.
similar to the other class names. However, when using AI, we may need to
However, when using AI, we may need to go in and modify things to make sure we
go in and modify things to make sure we get exactly what we want. So, here the
get exactly what we want. So, here the AI created a link to the homepage, but
AI created a link to the homepage, but what we actually want is a link to a
what we actually want is a link to a login page. So, I can click here and
login page. So, I can click here and modify the URL path to slash login.
modify the URL path to slash login. And I can also change the text to login.
And I can also change the text to login. And I'll change this to login. And I
And I'll change this to login. And I don't really have an icon for the login
don't really have an icon for the login page. So we can delete it.
page. So we can delete it. And I'll change this to login.
And I'll change this to login. So using AI, I'm able to write this code
So using AI, I'm able to write this code a lot faster.
a lot faster. Another feature of AI is we can give the
Another feature of AI is we can give the AI instructions.
AI instructions. For example, let's remove this code for
For example, let's remove this code for now.
now. And we can click this copilot icon.
And we can click this copilot icon. and it will open this chat window. And
and it will open this chat window. And inside here we can just tell the AI what
inside here we can just tell the AI what we want to do. For example, in here we
we want to do. For example, in here we can say in the header
can say in the header add a link to the login page and make
add a link to the login page and make sure in this dropdown you have agent or
sure in this dropdown you have agent or edit selected
edit selected and we'll press enter.
and we'll press enter. and the AI will make edits to our code.
and the AI will make edits to our code. So here you can see that it added a
So here you can see that it added a login link like before. So we can press
login link like before. So we can press keep to keep these changes or undo if we
keep to keep these changes or undo if we don't like these changes. So this looks
don't like these changes. So this looks good to me. So I'm going to press keep.
good to me. So I'm going to press keep. And again I'll go in here and modify it
And again I'll go in here and modify it a bit. So here it added the login link
a bit. So here it added the login link after the orders link but I want to put
after the orders link but I want to put this before the orders. So I can just
this before the orders. So I can just select this code and cut
select this code and cut and at the top
and at the top paste that code.
So, as you can see, by using AI, we can write React code faster. But you'll
write React code faster. But you'll notice that we still need to understand
notice that we still need to understand the code to check if it's what we want
the code to check if it's what we want and to modify the code if we need to.
and to modify the code if we need to. So, it's important to learn how to code
So, it's important to learn how to code first and then we can use AI to help us
first and then we can use AI to help us code faster. So now I'll go into the git
code faster. So now I'll go into the git section and I'm actually going to undo
section and I'm actually going to undo these changes because this was just an
these changes because this was just an example.
And that's the end of this lesson. In this lesson, we learned some of the
this lesson, we learned some of the updates in the new version of React. We
updates in the new version of React. We learned how to set up the React compiler
learned how to set up the React compiler to automatically optimize our React
to automatically optimize our React code. We set up a new Typescript React
code. We set up a new Typescript React project using create vit. We did an
project using create vit. We did an intro to TypeScript and learned basic
intro to TypeScript and learned basic features like type checking and type
features like type checking and type inference. We converted our e-commerce
inference. We converted our e-commerce project to TypeScript.
project to TypeScript. We learned how to use TypeScript with
We learned how to use TypeScript with React. And we learned how to use AI with
React. And we learned how to use AI with React to help us write code faster. Here
React to help us write code faster. Here are some exercises to help you practice
are some exercises to help you practice what we learned in this lesson.
Good job on finishing this React tutorial. If you want to continue
tutorial. If you want to continue learning with me, you can check out the
learning with me, you can check out the premium version of this course where I
premium version of this course where I will be adding extra lessons and
will be adding extra lessons and projects in the future. Currently, the
projects in the future. Currently, the premium version has 11 lessons, but I'll
premium version has 11 lessons, but I'll be adding more lessons in the future.
be adding more lessons in the future. You can also check out the membership
You can also check out the membership for extra content on AI and backend.
for extra content on AI and backend. As the next step after learning React, I
As the next step after learning React, I recommend moving to the back end and
recommend moving to the back end and learning the command line and NodeJS.
learning the command line and NodeJS. I'll be putting my work in progress on
I'll be putting my work in progress on these technologies inside the membership
these technologies inside the membership first, so be on the lookout for that.
first, so be on the lookout for that. Thanks so much for watching and taking
Thanks so much for watching and taking this course with me and I'll see you in
this course with me and I'll see you in the next one.
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
