React Tutorial Full Course - Beginner to Pro (React 19, 2025)

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.

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.

You can find the sections of this course below the video here and here.

You can also change the speed of the video here.

And you can find subtitles for different languages here.

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

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,

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

using these. If you need to install these, you can search for them on Google.

Click the link and follow the instructions to download and install.

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

here. And I'll try my best to review HTML features as we go through this course.

If you want to learn HTML in more detail, you can check out my HTML and CSS full course in the video 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

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

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.

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

website. Now, to save time, we're actually going to download some starting 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

super simple.dev/react-basics [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

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 S on Mac.

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

looks like. To make this easier, we're going to use a VS Code extension called Live Server. So, the benefit of live

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

code. So, it's going to make our coding easier.

If you don't have live server installed, you can click the extension section and then search for live server at the top

and then click install.

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

with live server.

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

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

easier. Let's go through these one by one. So number one, React is an external

one. So number one, React is an external library. First, let's review what an

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

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

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

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

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

code. And now we're going to check the console by right-clicking and then click 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.

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 we'll name it React-basics.js

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

cut. We can also press controlX on Windows or command X on Mac.

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.

react-basics.js.

So this will look for a file called 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

file. So now let's save and open our browser and check the result.

Live server will automatically refresh the page. And inside the console you can

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

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

unpkg.com/sups simpledev/external dash library.js and press enter.

So on this website we have some JavaScript code. So this is just normal

JavaScript code. So this is just normal JavaScript code. it displays a message.

JavaScript code. it displays a message.

This is an external library inside the console. So using the script element, we

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.

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

internet. So this code is called an external library. An external library is

external library. An external library is just code that is outside of our computer. It's code that someone else

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.

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

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

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

apps. So the creators of React decided to divide it into two external libraries. React which contains all the

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

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

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 load React and React DOM.

Okay, so we learned that React is an external library. It's just a bunch of

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

websites easier. So now let's learn how to use React.

We'll go back to VS Code 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

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

a class. And here we're looking for the class js-container.

Up here, this div element has the class 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

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.

So after we set up React with a container, we can start using the features of React.

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

code. So, the HTML at the top here as well as the bottom here.

This HTML is called the HTML structure.

As a review, this is a standard structure that we follow when writing HTML.

At the top, dock type HTML tells a computer to use a modern version of 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.

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

structure. This is a standard structure that we follow when writing HTML.

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.

This is an example of an external library and this loads the React external library or loads the code for 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

here. So here we're loading another external library. And this external

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.

You'll see that this website contains a bunch of JavaScript code and this is the code for another external library called Babel.

So we'll go back to VS Code and let's learn what is the Babel external 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

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

code. So, it's just JavaScript with extra features. So, let's do an example

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

equals. And now let's create a button HTML element. So here we're going to

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

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.

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

JSX. It only understands normal JavaScript.

In order to use JSX we need to translate it into normal JavaScript first and then our web browser can understand this code.

To do that we use the Babel external library. Babel translates JSX into

library. Babel translates JSX into normal JavaScript so our web browser can understand it. To use Babel, we need to

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

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

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

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

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 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.

Now let's do another example. Let's

display a different HTML element inside this container. So below this button,

this container. So below this button, let's use JSX to create a paragraph element. So first we'll create a new

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.

And now let's display this paragraph on our website. So inside render, instead

our website. So inside render, instead of the button, we're going to render the 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

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.

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

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

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

here. This element is a container. It's

going to contain everything that we create using React. So let's go back 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

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

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, 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

div element. And then we render the div 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.

And we're going to put the HTML on its own line. So, here we have JavaScript

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

line. Same thing here. Click here and press enter to put the HTML on its own 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

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.

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

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

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

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

paragraph element. So we'll go back to our code and that's another benefit of using React. We can insert JavaScript

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.

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.

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 and save

so that we just have the code that we need for React.

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

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.

We learned JSX, an enhanced version of 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 video description.

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.

And we're going to create a new tab.

And at the top, we're going to go to super simple.dev/projects/

super simple.dev/projects/ 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

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,

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

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.

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

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.

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 press enter.

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

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,

browser. We'll rightclick, open with a live server.

And it should say chatbot in the tab up here. So now we can close the React

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

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.

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,

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

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.

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

capital C. This is also known as Pascal case where each word in the name starts with a capital letter.

Next this function will return some HTML. So we're going to type return and

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

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

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

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

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.

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

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.

So above this, let's create a div element.

And at the bottom, less than /d greater than. And let's also add indents before

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

press tab. And also click here and press 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.

Now that we created this component, let's learn how to display it on the website. If we scroll down, right now

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

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

before. So here we'll type curly brackets. And now we're just going to

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

brackets. As long as this code results in a value, we can insert it into this 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

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

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.

So this is called the component syntax.

This does the same thing as the code above. It runs the chat input function

above. It runs the chat input function and then inserts the result into the 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.

This actually looks like an HTML element. It has an opening tag and a

element. It has an opening tag and a closing tag. So you can think of this

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.

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.

And let's save and check our project.

And that creates the top section of the chatbot project.

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

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

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

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

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

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

fragment. If we save and check the 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

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

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

box. And when we start typing, it will disappear.

To create a placeholder, we give this input element an attribute. So at the end, we're going to type the attribute 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.

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

box. And when we start typing in it, it will disappear. So the placeholder is

will disappear. So the placeholder is working. Now there is one problem here,

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

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.

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.

Let's go back to the final chatbot 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.

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

lines. And now each chat message has two things, some text and a profile image.

Since we have multiple things inside this component, let's group them together using a fragment. So we can return one value from this function. So

we'll type less than greater than enter and then less than /g greater than to create a fragment. And now inside here

each message has some text. So let's

create the first chat message in our project. We'll go back to the final

project. We'll go back to the final project.

And let's just copy paste the text from 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 command C on Mac.

And then inside our code in the chat message component we're going to paste by pressing controlV on Windows or commandV on Mac.

And let's fix the indent by pressing tab at the start.

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

create a new line. And we're going to type less than img greater than and then less than / img greater than. So,

remember that in JSX, every element has to have a closing tag. And again, we can use the self-closing element shortcut like we did down here. If there's

nothing inside this element, we can remove the closing tag and then just add 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 message, the text and an image.

Next, we need to tell the computer which image to load. Right now, if we look at our final chatbot project, we have two images that we use, but we currently

don't have these in our project. So,

let's download them. We're going to rightclick this first image and then click save image.

And we're going to find the folder that contains all of our code. So, for me, it's on the desktop and it's in the folder React-Course.

and we're going to save it inside of this folder.

And same things for this robot image.

We're going to rightclick and click save image.

Go to the React-Course folder. And we're

also going to save the robot image.

And now if we look at our code, 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.

To load an image on the website, we need 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 src or source equals double quotes. And

inside these double quotes, we're going to tell the computer which image to load for the first chat message. The image is

the user image. So let's type this file name. userpng.

name. userpng.

So this will look for a file called user.png beside the current HTML file. This is a current HTML file. So we'll look for

user.png beside it, which is right here.

and then it's going to load this image on the website.

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 scroll down to the app and let's insert this

component using the component syntax like we did up here. So we'll type a new line and type less than and then the name of the component which is capital C

chat capital M message.

And currently we don't have anything to put inside this component. So we use the self-closing element shortcut like we did up here. So now let's save

and check our website which is this tab. And let's close the console so we can see it. And we created a chat message.

However, we have a few problems here.

The first problem is that the profile image is too big. To make it smaller, we're going to go back to our code and inside the img element, we're going

to give it another attribute called width equals double quotes.

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.

Another problem is the chat message is appearing on the same line as the chat input, but in the final project, we want it to appear below. To fix this, we'll

go back to our code and inside the chat message component, instead of using a fragment to group these elements together, we're going to

change it back to a div. So, inside

we'll type div and inside here /d.

The reason we're using a div is because 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

we group this in a div element, instead of appearing beside the chat input, the 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

let's save this code and then check our website.

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 top left and then click on this div,

you can see that this div now takes up this entire line. So now we have the layout that we want. So in React, we

still use divs for layout purposes.

If you want to learn divs, layout, and HTML in more detail, you can check out my HTML and CSS full course in the video description.

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 component, we can actually reuse our chat message component. Components are

actually designed to be reusable.

To reuse this component, we don't want 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

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 we're going to give it an attribute. So

this works just like HTML attributes.

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 double quotes, we're going to give the attribute a value.

Let's put the text for the first message which is hello chatbot. So let's select this code and then copy

and we're going to paste it inside here.

So now we have an attribute called message with a value hello chatbot. So

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.

Now that we added this message attribute, how do we access it inside this component and use it? To do that, we're going to use a feature called props.

Every component function gets one parameter up here called props.

This props parameter is an object and it contains all the attributes that we give to this component. So up here, let's

actually console.log

actually console.log props to see what it looks like. Let's

save and then open our website and check the console.

And you'll see that props is an object and it contains the attributes that we gave to our component. So here we have 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 value is saved as a value of this object.

So let's go back to VS code and using this props object we can access our attributes. By the way props

is short for properties. We call this props because the attributes are saved as properties in this object.

So now to access the message attribute we can remove this and type props 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 create a variable using const name name it message

equals props dossage and we'll add a new line to separate the code a little bit.

Now instead of displaying hello chatbot every time let's display whatever is in the message attribute. So we'll remove 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 message.

So again we can put any JavaScript code between these curly brackets and as long as it results in a value it will insert

it into this element. So now let's save and we'll check the website and it displays a message hello chatbot.

That's the message attribute that we gave it.

Let's go back to our code.

So that's props. Just like a normal HTML element, we can give attributes to our component and then access these attributes using this props object.

So props are really useful because props make our component reusable.

For example, let's try creating the second chat message. To do that, we can 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.

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 quotes. And we'll copy paste the second

quotes. And we'll copy paste the second message in the chatbot project. We'll go

to our browser and go to the chatbot project and let's copy and paste this second message.

We'll select it and then copy.

And inside our code in the message attribute, we're going to paste.

So this will save the message hello how can I help you inside props and then we 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 and go to our tab.

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 component reusable. We can reuse this

component reusable. We can reuse this component, but just give it a different attribute or prop and it will display a different message.

Let's get some practice and use props to create two more chat messages. Feel free

to pause if you want to try it yourself first.

So down here, let's create our third message using less than chat 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 copy paste the third message. We'll go

to the chatbot project and select this third message and then copy.

And in our code inside the attribute, we're going to paste.

And finally, let's create the fourth message less than chat message slashgreater than and then the message

attribute equals double quotes and we'll 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

just doing an example. So we'll select this and copy.

And inside here, we're going to paste and save.

And now, if we check our website and go to our tab, you'll see that we 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.

Next, in the final chatbot project, 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

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 to add another attribute.

And let's call this attribute the sender equals double quotes.

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 to place the image. So if we send the

message, let's make the sender the user.

And for the second chat message, we're going to add another sender attribute equals double quotes. And the second message is from the chatbot. So let's

make the sender attribute the robot.

And we'll do the same thing for the third and fourth message. We'll give it a sender attribute.

The third message is from the user. So

let's make the sender user.

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 inside our component. To do that, all 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.

So this gives us the value of the sender attribute which is either user or robot.

So let's save this in a variable so we can use it later. Type const and let's call it sender equals props.

So now that we have the sender attribute, let's use it to decide which 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.

So inside here, we can type if brackets and curly brackets.

And inside these brackets, we're going to check if the sender is equal to the string robot.

By the way, by default, if the attribute just has double quotes like this, the value is a string. So here the value is going to be the string user or the string robot.

So now inside our component, if the sender is the robot, we're going to return some different HTML.

So let's type return brackets. So we can write this HTML on multiple lines. And

let's just copy paste the HTML from down here and modify it. So we'll select this HTML and then copy

and then inside this return we're going to paste.

And let's also select these lines and press tab to fix the indenting.

So the first thing we need to change if the sender is a robot is that we want to load the robot image instead.

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 source attribute of this image. So,

we're going to change this from user to robot.png.

robot.png.

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 code and then cut by pressing control X

on Windows or command X on Mac.

And then before the message we're going to paste by pressing controlV on Windows or commandV on Mac.

And we can remove this extra new line.

So as you can see inside a component we can use any JavaScript feature like if statement and we can return a different

HTML and whatever we return will be inserted inside the element here. So now

let's save this code and then check our website and then open our tab and you can see that now we have two

messages from the chatbot. that loads

the robot image and it puts the image on the left.

We'll go back to our code and using this sender prop, we're able to reuse this component to create a chat

message from the robot. So again, props make our component reusable.

And that's it. If we scroll down, using components, we split up the website or the app into smaller pieces like the chat input section at the top

and each chat message. And we created all the HTML that we need for this project.

The last thing we're going to learn in this lesson are some shortcuts that are commonly used in React, and we can use these to clean up our code.

First, let's scroll up to the chat message component.

So, instead of doing con message equals props message, we actually have a shortcut for this in JavaScript. So,

down here we can just type const curly brackets and inside we can type message

and make it equal to props.

So this takes the message property out of this object and saves it in a variable called message. So this does

the same thing as this line above. This

code is a shortcut for this code. And

this shortcut is called dstructuring 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 property to add another property to take out of this object. After the first

property, we can type comma and the second property sender.

So this will get the message property and the sender property out of this object and it will save it in a message variable and a sender variable. So this

line of code is a shortcut for these two lines above.

So now let's actually turn these two 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 type double slash.

By the way, if we start with double slash, it will turn this code into comments and it will be ignored by the computer.

So, we'll just keep this here as a reminder that this is a shortcut for these two.

Next, JavaScript has an even shorter shortcut for this. Since props is a parameter up here, we can just

dstructure it directly up here. So here

instead of the props object we can just type curly brackets directly and then type message

and sender.

This takes the message and sender properties directly out of the first parameter and then saves them in a 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 shorter shortcut. We're dstructuring the

shorter shortcut. We're dstructuring the parameter directly at the top. So this

shortcut is used a lot in React tutorials and documentation. So it's

useful to know how this works.

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 shortcut for this line of code and these two lines of code.

Now, let's save and check our website to make sure that everything is still working. So, that looks good.

working. So, that looks good.

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 object.

Next, we're going to learn how to use if statements directly inside JSX.

So currently we have some JSX here and we put an if statement outside of this JSX.

However, this means we're duplicating some code like the div and the message.

To make this code more reusable, we can actually move this if statement directly inside the JSX down here. So what we

want to do is if the sender is a robot, 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

going to type curly brackets and we're going to insert the if statement directly inside here. So here before the

message we want to do something like if the sender is equal to the string robot

we're going to insert this image.

However we can't actually use the word if inside of these curly brackets.

Instead we need to use another feature of JavaScript called a guard operator or and.

In JavaScript, you can write value one and value two. If value one is true, then the result will be value two. So

this works just like an if statement except we can write it on one line and it results in a value. So if you want to learn more about this feature, I cover it in the booleans lesson of my

JavaScript course and you can check out that in the video description.

For now, the only thing we need to know is we can use and as sort of an if statement in our JSX.

So, first let's remove this and then we're going to use and to insert this if statement directly inside the JSX.

So, the first value is going to be our 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 and then we're going to use and.

So if this is true, the result is going to be the second value here. So here if the sender is a robot, we want to insert

the robot image. So let's just copy and paste this code. We're going to select this and then copy it.

And then down here after and we're going to paste.

So again the way this works is if the value on the left is true then the result will be the value on the right.

So this and is sort of a shortcut for this if statement and it lets us insert if statements directly inside our JSX.

So let's actually comment out this if statement out here. So we remember that this code is a shortcut for this code.

So here before the if statement we'll type slash and star and after the if statement we'll type star and slash and

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 computer. So now let's save

computer. So now let's save and check our website.

And as you can see, if the sender is a robot, we're going to add an image on the left before the message. So now, one problem here is that we're also showing

the user's profile image at the back, 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 profile image if the sender is the user.

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.

So at the front we'll type open curly bracket. At the end a close curly

bracket. At the end a close curly bracket.

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

then we'll type ant. So if this is true then we will show this image. If this is not true, we will not show this image.

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 left and the user image is on the right.

So let's go back.

Using the guard operator or and we can insert an if statement directly inside our JSX.

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 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

our code easier to read, we can actually put each attribute on its own line. So,

here we'll type enter to put placeholder on its own line. And here we'll type enter to put size on its own line. And

let's also type enter at the back. So

the attributes are on their own lines.

And then let's add an indent in front of 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 element. And we also want to make sure

element. And we also want to make sure that these two are vertically aligned.

This makes it easy to see where this element starts and where it ends.

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 a bit too long. To improve this, we can

surround this value with brackets. So

we'll type open bracket and at the end close bracket and then we can put this code on its own line. So here we'll type

enter and at the end we'll type enter.

So this will still have the same value, but the brackets allow us to put the code on multiple lines. We'll do the same thing for the second image.

We'll surround it in brackets, open bracket, and close bracket. And we'll

put this value on a separate line so that it's no longer too long.

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 because of the attributes. Again, we can put each attribute on its own line. So

here we'll put message on its own line and sender on its own line. And we'll

put the end of the component on its own 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 tab and tab. So it's easy to see that 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

we'll put this on its own line and add indents.

And put this on its own line.

Add indents.

And put this on its own line.

And add indents.

and save and check our website and everything should still work because we just changed the formatting of our code. So

let's go back and that's how we avoid our lines being too long. We can put each attribute on its own line and we can also surround a value with

brackets and put it on its own line.

Finally, down here, instead of using a variable to save our app, a best practice is to use a component to create this app.

So here, let's create a component using function and we'll name it capital A app

brackets and curly brackets.

And then this component will return all of this HTML.

So we'll return brackets so we can write it on multiple lines.

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 and inside the return we're going to paste.

And we can select these lines and press tab to fix the indenting.

So now we're going to use this component instead of the variable to create our app. So down here, let's remove this

app. So down here, let's remove this variable.

And then inside render, we're going to create the app. We can type less than capital A app greater than and then less

than slash app greater than.

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.

And again since there's nothing inside this component, we can use the self-closing element shortcut. So we can remove this closing tag. And then at the

end here we can type space and slash.

And now let's save and check our website.

And it displays the app on the website.

Let's go back to our code.

So a best practice is to use a component called app to create the website because it gives us access to extra features of components like props.

And also notice that we can have components inside a component. So this

lets us split up a website into smaller and smaller components or smaller and smaller pieces.

So again, React helps us create websites 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 state. State lets us make our website

state. State lets us make our website interactive, and it will let us add new chat messages to our website.

And that's the end of this lesson. In

this lesson, we learned that a component is just a piece of the website. We also

learned that components let us create 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 components. We learned props which let

components. We learned props which let us insert values into components and make components reusable.

We learned the destructuring and guard operator shortcuts. We did some code

operator shortcuts. We did some code 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 application.

Thanks for watching so far. If you find this course valuable, you can support the channel by liking this video, leaving a comment, and subscribing.

You can also check out the premium version of this course where you'll get all the lessons ads free broken down into small videos as well as additional lessons and more projects that are not

in the public React course. Currently,

the premium course contains 11 lessons 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 questions on specific topics, get 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 ads free separated by each lesson, AI videos, backend tutorials, and more.

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 this lesson.

In this lesson, we're going to learn two of the most important features of React called state and event handlers. And

we're going to use these features to create the functionality for the chatbot project.

Before we learn state, we're going to improve our code a bit. Currently to add a new chat message we have to manually type a new chat message component.

Instead of manually typing this code we can actually use JavaScript to generate these components.

To do that we're going to do two steps.

The first step is to save the data. Data

means information.

Here the data is the information about 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.

Let's use a variable to save this data.

At the top of this component, we're going to create a variable using const and we'll name it chat messages

equals and we'll save it as an array by typing square brackets.

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 save it as an array.

Next, each chat message has multiple 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 object by typing curly brackets.

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 together.

And then inside this object, we're going to create a property called message colon and a string. And we're going to

use this to save the message. So let's

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.

And then we'll add a comma. And we're

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.

So that's how we save the data for the first chat message in our JavaScript.

Now let's save the data for the second chat message.

So after the first object, we're going to type comma and create another object.

I will give this one a message property as well colon a string. and we'll save the second message.

We'll select this copy and then inside here we're going to paste.

Add a comma and a sender property colon and a string. And the second chat message is from the robot. So inside the

sender, we'll save robot.

Let's do the same thing for the third and fourth chat messages. we'll save

them in our JavaScript. Feel free to pause the video if you want to try it yourself.

So, for the third chat message, we're going to add a comma at the end and another object, a message property, a string,

and we're going to copy the third message, and paste it in here.

and a sender property. The third message is from the user.

And then we're going to type comma and another object the message property colon and a string. And we'll copy paste

the fourth message. So we'll select it, copy, and then inside here we're going to paste

and a sender property.

And the fourth message is from the robot.

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 to use JavaScript to convert this data

into these components. So we don't have to type these components manually.

To do that, after the data, we're going to type the name of the data, which is chat messages.

And this is an array. And arrays have a feature called dot map and brackets.

As a review, do map lets us go through each value of an array and convert it into a new value.

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 brackets, arrow, and curly brackets.

As a review, this is an arrow function.

It mostly works the same way as a function, but it's shorter. When we give a function to another function like map,

we usually use an arrow function because it makes the code a bit cleaner.

This is what React tutorials and documentations use.

Next, this function gets a parameter. So

at the top, we'll create a new parameter and name it chat message.

So now dom takes each value in this array and converts it into a new value.

The way it works is it starts with the first value and then it saves it in this parameter and runs this function and whatever we return from this function

will be the new first value. Then it

takes the second value. It saves it in this parameter and runs the function.

And whatever we return from the function will be the new second value. Then it

takes the third value, saves it, runs a function and whatever we return will be the new third value and so on. So map

basically goes through each value in 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 component. So inside this inner

component. So inside this inner function, we're going to return a chat message component by typing brackets

and then here less than chat message/grater than to return a chat message component.

Next, each chat message component has two props, message and sender. So we're

going to add those props to this component.

So here we'll create a prop message equals and now what do we save in this prop?

Remember that map takes each object in 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 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.

To do that we're going to type curly brackets and inside we'll type this

object chat message and get the message property which is dot message.

This gets the message out of this object and saves it in the prop.

So why do we use curly brackets here instead of double quotes? If we use double quotes, it will save a string 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 this prop.

So for the first chat message, the result of chat message dossage is going to be the string hello chatbot. So it's

going to take this and save it into the message prop here. For the second chat message, the result of this code is hello, how can I help you? And it will

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 save the result of this code into the

prop not just a string.

So next each chat message component has a sender prop. So here we're also going to add a sender

equals and again we want to save the sender property of this chat message object. So we'll type curly brackets and

object. So we'll type curly brackets and the object chat message dot sender.

So this will get the sender property out 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 convert it into a chat message 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, let's type const and we'll name the

variable chat message components equals this code.

And now we have an array of components or a list of components.

Finally, we're going to insert this array into the JSX.

So, down here, we can actually remove all of these chat message components because we're generating them now.

And we're going to type curly brackets, and we're going to insert this array.

In here, we'll type chat message components.

If we insert an array of components, React will just display all of these components on the page. If we save

and then go to our project, it displays all the chat message components that we generated with our JavaScript.

So now we're generating this HTML with JavaScript and we no longer have to type out each component manually.

Now, there's one more thing that's useful to know. Let's go back to our code.

And there's actually a shortcut that we can use here. Instead of saving this result in a variable, we can actually just insert this result directly in the

JSX.

So, we'll select this code and then cut.

And between the curly brackets, we're going to remove the variable and just paste that code.

And we'll remove the semicolon at the end.

And we'll select this code and press tab a few times to fix the indenting.

And finally, we can remove this variable up here.

Now we're just inserting the result of this code directly in the JSX.

This shortcut is used a lot in React tutorials and documentation. So it's

useful to know how it works.

Now let's save and then check our website.

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

look at our console and we scroll up, we'll see an error saying each child in a list should have a unique key prop. In

React, if we insert an array of components, we need to give each component a prop called key. The key

helps React track changes in the array.

So, we should give each component a key.

Let's go back to VS Code and for each chat message, we're going to add a prop called key equals.

And this key has to be unique. So, what

should we use as the key?

Usually when we have some data like this in the real world, each piece of data 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 in the real world. So for the first message after the sender, we'll add a

property called ID colon. And let's just make it a string ID1 to keep it simple.

For the second message, we'll add an ID with the string ID 2. For the third message, we'll make the ID ID3. And for

the fourth message, we'll add an ID 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 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 the chat message do ID.

So chat message id.

Again we use curly brackets here because we want to save the result of this code as the key. And now each component in

this array will have a unique key. Let's

save and check our website.

And now the error is gone from the console.

Let's go back to our code.

And now we have a lot of code in our app component.

To make our code easier to work with, we're going to separate this code into smaller pieces.

Notice that this code and this code are related to chat messages.

So it makes sense to separate these two pieces of code into a chat messages component.

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 C chat capital M messages

brackets and curly brackets.

And now we're going to move all the code related to chat messages into this new component. So we'll select this code

component. So we'll select this code and cut.

And inside here, we're going to paste and create some new lines. And we're

going to select this code and cut.

And inside here, we're going to paste.

And at the end of this component, we need to return the HTML.

So at the end we're going to return open bracket and we'll remove the closed bracket for now and we're going to use a 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 less than/greater than and we'll add the

close bracket at the end. And finally,

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 vertically aligned.

Finally, now that we have this chat messages component, we're going to insert this into our app. So, we'll

scroll down into app and remove these lines.

And to insert the chat messages component, we'll use the component syntax again. Less than capital C chat

syntax again. Less than capital C chat capital M messages slash greater than.

So now we just separated all that code into its own component and it makes our code much cleaner. Let's save

and check our website.

And everything still works. We just

reorganized our code into a chat messages component.

Okay, so far we saved the data and we generated the HTML. The last step to building a website is to make it interactive.

For example, when we click this send 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 handlers.

An event handler lets us run a function when we interact with a website.

Let's do an example. We'll go back to our code and we're going to scroll up to the chat messages component

and then inside this fragment we're going to create a new line and let's create a new button using less than

button greater than and less than/button greater than and inside this button let's put the text send message.

So, we'll create a new button for practice.

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 curly brackets.

So, on click lets us run a function when we click this button. So, above this, let's create a function to run. So we'll

type function and let's name it send message brackets and curly brackets and inside this function let's just

console.log

console.log the string send message.

Now that we have this function we're 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 function send message.

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 function.

Now that we gave on click this function, when we click this button, it's going to run this function and console.log this

message. Let's save

and we'll go to our website and try clicking this new send message button and this will run the function and display the message send message in the

console.

Let's go back to our code and we'll learn more details about event handlers.

So on click is known as the event and 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.

Now there's two other things to note.

The event prop always starts with on and then the name of the event like click and the event prop must use camelc case.

As a review, camelc case means the first word is lowercase and all other words start with a capital. So that's why on is lowercase and click starts with a

capital C.

Another thing we should know is that 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 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 work. Instead, we should just give the

work. Instead, we should just give the function directly to on click without running it.

So that's event handlers and event handler lets us run a function when we 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 new chat message. To do that, we can add

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 messages and then use the code.push

and brackets.

As a review, dot push adds a value to the end of an array. So inside here, we're going to add another object using curly brackets.

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 message, let's just make the message test.

And we'll add a comma. And we'll add a sender property sender colon a string and this message will be from the user

comma and we'll give it an ID colon and let's just use the string ID5.

Now there's one problem with using ID5 in this situation.

Every message that we create when we 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 JavaScript code. So instead of ID5,

JavaScript code. So instead of ID5, we're going to use the code crypto dot

random capital U, capital U, capital I, capital D, and brackets.

So this is some JavaScript code that will generate a unique ID string every time we run this code. So now every message that we create using this button

will have a unique ID at the end. Let's create some new lines and let's console.log

the chat messages array to see if it has a new message. Let's save

and we'll go to our website and we'll click send message.

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

successfully added a chat message when clicking this button.

Next, notice that even though we updated the data, it did not update the website.

So, it did not display a new chat message component on the website. To fix

this, we're going to learn one of the 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, it will update the HTML.

Let's go back to our code.

And if we scroll up, 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.

However, if we convert chat messages into state, when we update chat messages, it will update the HTML. So

now let's learn how to convert chat messages into state.

At the top of this component, we're going to use this code capital R react

dot use capital S state and brackets.

And between the brackets, we're going to give it the chat messages data. So,

we're going to select this data and cut.

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.

So at the bottom here, we can remove the chat messages variable because we converted it into state.

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 react. State.

react. State.

This array has two values. To get the first value, we can click here to collapse the code for now. And to get the first value, we're going to type the

name of the array. Array and then square brackets zero.

So remember, an array is a list of values and square bracket zero gets us the first value in the list or in the array.

So the first value we get from use state is the current data.

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 then we might add new chat messages in the future.

So the first value in this array gives us the current value of chat messages or the current data.

Let's save this in a variable so we can use it later. We'll do const and let's name it chat messages equals array zero.

So now we have the most current chat messages and we can use it down here to generate the HTML.

Next use state gives us a second value in this array. To get the second value we're going to type array square bracket 1.

And the second value of this array is a function that updates this data.

So let's save this function in a variable using const. And the naming 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 equals this value. And we should also

use camel case here. So the first word starts with a lowercase and every other word starts with a capital.

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 using push. We should always use this

using push. We should always use this function to update the data. And that's

because this function tells React that the data changed and to update the HTML.

If we update the data directly, React will not update the HTML.

If we use this function to update the data, React will update the HTML. So we

should always use this function to 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 to use this updater function by typing

set chat messages and brackets.

And between the brackets, we're going to put the new value of chat messages.

So the way that this updator function works is it's going to replace the 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.

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.

This helps React be more efficient.

To create a copy, we're going to click between these brackets and create a new array using square brackets.

And to copy chat messages, we can use this code dot dot dot and the array that

we want to copy, which is chat messages.

As a review, this is a JavaScript feature called the spread operator. It

basically takes the values in an array and then copies them into a new array.

You can think of it like we're taking the values in this array and then spreading them out into this new array.

That's why it's called the spread operator.

The spread operator is used a lot in React tutorials and documentation. So,

it's useful to know how it works.

So, we created a copy of chat messages.

And now we want to add a new chat message at the end of this copy because we're trying to send a new message. To

do that, we can just add a comma at the end and then add a new chat message directly using curly brackets.

So each chat message has a message property colon and we'll give it the string test for now. And each chat

message has a sender property colon. And

let's make the sender the user.

And we'll give each chat message an ID.

And to create a unique ID we can use crypto random capital U capital U capital I

capital D and brackets.

So using the spread operator we made a copy of the chat messages array and then we added a value at the end of this new array.

And now this updater function will 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 HTML. So it will basically rerun all

HTML. So it will basically rerun all 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 we'll press send message.

it will create a new chat message in our data and it will also update the HTML.

So it will create a new chat message component and display it on the website.

Now let's go back 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

update this data or we update the state, it will update the HTML.

To convert some data into state, we use react doouse state. So here it will convert this data into state and use

state gives us two values.

The first value is the current data and then the second value is a function to update this data. If we use the updater

function, it will also update the HTML.

So don't worry if state is a little bit confusing at first. The more you work 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 you can get more practice.

Next, we're going to learn a shortcut called array destructuring.

Here we get the first value out of this array and save it in a variable called chat messages.

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 array and inside the square brackets we can

type chat messages.

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 variable called chat messages. So this

code is a shortcut for this code. We can

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

use set chat messages.

So this gets the second value out of this array and saves it in a variable called set chat messages. So this code

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 out of this array. We're deconstructing

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 will always get the second value out of the array.

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 the front.

Now another shortcut we can use is instead of saving the result of use state in this variable and then dstructuring it we can just dstructure

this up here.

So instead of array we can just directly dstructure using square brackets and then the first value of u state is going to be chat messages

and the second value from state is going to be the updater function which is set chat messages.

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.

So at the front of this code, let's also comment it out using double slash.

So that is array dstructuring. It gives

us an easier way to take values out of an array.

Now this shortcut is used a lot in React 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 message is in the text box. So, we'll

learn how to get the text in a text box.

In normal JavaScript, we might use the DOM to get the input element and then use a property called dot value to get

the text inside the text box.

However, in React, a best practice is do not use the DOM manually. That's because

React is managing the website. So, if we use the DOM manually, it might interfere with React.

Instead, we should use React features to get the text from a text box. One way to do this is we're going to scroll up to

the text box which is inside the chat 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

capital C change equals curly brackets.

Earlier we learned about the event on click which runs a function when we click an element. On change is another

event we can use in React. You can tell it's an event because it starts with on.

So onchange runs a function when we change the text inside an input.

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 brackets and curly brackets because

we're going to save the text inside this input.

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 text. So again we use curly brackets

text. So again we use curly brackets here because we want to save a function 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 function.

Next when onchange runs this function it's going to give this function one parameter up here called event.

event is an object and it contains details about the event or about the change. So one detail is event dot

change. So one detail is event dot target and this gives us the element that we're typing in or that we changed. So in this

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 event.target. target.

event.target. target.

And now to get the text inside this input, we're going to use the property value.

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 give it a try. So we'll click this text box and we're going to type

hello.

And you'll see that every time we type or change the text, it will console.log

the text in the text box. So that is how 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 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 state to save data that changes over

time, like the text in the text box. So,

at the top of this component, let's use the code react dot use state and brackets.

And between the brackets, we're going to put the initial value. In this case, the initial value in the text box.

The text box originally starts as empty.

So let's set the value to the empty string.

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 type square brackets equals this result.

And now to get the first value out of this array inside the square brackets we're going to type input text.

So this is the current data or the current text in the text box. So that's

why we name it input text.

To get the second value out of this array after this we can type comma and give a name for the second value. So the

naming convention is to use the word set and then the name of the data which is capital I input capital T text.

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 we change the text, we're going to save it up here inside input text. To do

that, instead of console.log,

we're going to use the updater function set input text.

And now, every time we change the text, it's going to run this function. And

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 chat message. First, we need to make the

chat message. First, we need to make the send button interactive.

To do that, inside this button element, we're going to add the prop on click equals curly brackets.

Again, on click lets us run a function when we click this button.

And now above this, let's create a function to run. We'll use function and let's name it send message brackets

and curly brackets and we're going to give this function to on click. So down

here we'll give the function name send message.

Now when we click this button it will 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.

And we'll go back to our website and in the text box we're going to type hello and then press send.

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 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

message to chat messages. So, let's just select this code and we'll copy.

And at the top 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 need it anymore. So we can actually remove this code

and remove this practice button.

Now, let's scroll back up and we're going to use this code to add a new chat message.

However, we have a problem here. We

don't actually have access to set chat messages inside this component because this is inside a different component. To

solve this problem, we're going to learn a technique called lifting the state up.

First we need to visualize the components in our app. So we have an app component which represents the entire application and inside we have a chat

input component and a chat messages component. Inside the chat messages

component. Inside the chat messages component we have some chat message components.

This is called the component tree because it looks like the branch of a tree and this helps us visualize the structure of the components in our app.

Currently, chat messages and set chat messages are located inside the chat messages component, but we want to use

it in the chat input component as well.

To solve this problem, we're going to move this state up into the app component and then app can share chat messages and set chat messages between

these two components.

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 between multiple components.

So, let's give this a try. First, we're

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 the chat messages state, which is right here, and we're going to move it

into the app component. So, we'll select all this code, and then cut and remove these lines.

And then inside the app component, we'll create some new lines and paste.

So now we lifted the state up into the app component.

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.

So down here, let's create two props for this component.

We'll create a prop called chat messages equals curly brackets. And we're going 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 set chat messages equals curly brackets.

And we'll give it the set chat messages function from the state.

So set chat messages.

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 any type of value inside a prop.

And then inside chat input, we can access these two props by scrolling up.

And in the chat input component at the top, we'll type curly brackets and we'll get the chat messages prop,

and we'll also get the set chat messages prop.

And now this code has access to set chat messages and chat messages.

Next, let's scroll back down to the chat messages component.

So here we just need the chat messages array to generate the HTML. So let's

provide chat messages using a prop at the bottom at the chat messages component. We're

going to add a prop. chat messages

equals curly brackets and we'll give it the chat messages array. So here chat messages.

Now I want to talk about the naming convention used here. You'll notice that the component, the prop and the data all

use the same name. Instead of using names like this, this is the naming convention used in the React documentation.

The documentation tries to use the same name for many things like the component, the props, and the data. This keeps

things simple and consistent. We don't

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 the same.

So, don't worry. It might be a bit confusing at first because many things use the same name. The more you work with React, the more you'll get used to

this naming convention, and we'll get lots of practice in this course.

Now to access this prop, we're going to scroll up and up here we'll type curly bracket

and we'll get the chat messages prop.

And now this code has access to everything that it needs. Let's save our code and then check our website.

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 chat input and chat messages.

Let's go back to our code and we're going to scroll up to the chat input component.

So now that chat input has access to set chat messages, let's use it to create a new chat message. So when we click send,

we're going to run set chat messages and we're going to give it a copy of the chat messages array with a new message at the end. In this new message, instead

of test every time, we're going to use the text inside the text box, which is saved in input text. So, we'll remove

this and replace it with input text.

The sender will be the user because we sent this message. And we'll give the message a unique ID. And that's it. This

will update the chat messages array with this new message. And because we use the updater function, React will also update the HTML.

So, let's save.

And we'll go to our project.

Inside this text box, let's type hello and press send.

It will take the text in the text box, 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 after we press send, we should also remove the text in the text box. So, we

don't have to manually remove it if we want to send another message.

To do that, we're going to learn a feature called controlled inputs.

Let's go back to our code.

And after adding a new message, we're 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 will change the input text to the empty string.

So this will update the input text up here to be empty.

However, it will not update the HTML yet.

To update the HTML, we need to use this input text inside this HTML.

To do that, we're going to give the input element a prop called value equals curly brackets.

So value lets us change the value of this input or the text inside this input.

So we're going to set the value to whatever input text is.

So now if we set the input text to be empty, this will set the value to be empty as well and it will make the text box empty.

Let's save.

We'll go back to our website.

Inside the text box, we're going to type hello and press send.

And you'll notice that it makes the text box empty after we send. So let's go back to our code.

And this is called a controlled input.

Using the value prop, we can control the 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 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

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 script element.

And we're going to give this element the source attribute equals double quotes.

And we're going to give it the URL of the external library. Now, this is another external library that I wrote.

So, let's just copy one of these URLs up here with super simple dev. And we'll

copy.

And inside here, we're going to paste.

And then at the end, instead of react.js, we're going to load chatbot.js and save.

So now, let's take a look at the code in this URL.

On Windows, you can press control and click this link. And on Mac, you can press command and click this link.

If it doesn't open, you can also type the URL in the browser.

So again, an external library is just 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.

This is an object and it has a method called get response.

We just have to give it our message and it will return a response.

So now let's use this external library.

We'll go back to VS Code and we'll scroll down to chat input. And

now after we send a message below this, let's use the chatbot external library to get a response. So the external

library creates a variable called capital C chatbot.

This is an object and it has a method called dot get response and brackets.

Between the brackets, we're just going to put the message that we sent, which is input text. So in here, we'll type input text

and get response will return a response.

So let's save it in a variable using const and we'll name it response.

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 and save.

And now let's go to our website and we're going to close the external library for now. And then we're going to click this text box and we'll type the

message hello and press send.

And now inside our console it will display the response from the chatbot.

And the chatbot responded with hello how can I help you? So using the chatbot 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.

Let's go back to VS Code.

And to display the response on the website, we can just add another chat message using set chat messages.

Because this is an updater function from the state, React will automatically 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

copy and then down here we'll paste and here the message should be the response from the chatbot. So we'll

replace this with response 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.

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 send.

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.

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.

And if we look at this code here, we updated chat messages by making 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.

So when we get to this point in the code, this chat messages is still the old array without the new message that we added up here. And then we take the

old array and we add the chatbots response. And we essentially lost our

response. And we essentially lost our message.

So one way to fix this issue is to save 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 let's name it new chat messages

equals and we're going to save this value. So,

we'll select this code and then cut.

And up here, we're going to paste.

And we'll set the chat messages to this variable, new chat messages.

So, this does the same thing as before, except we saved the new chat messages in this variable.

And then down here, instead of making a copy of chat messages, we're going to make a copy of new chat messages, which

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 response. So now let's save this code

response. So now let's save this code and go to our website.

In the text box, we're going to type hello and press send.

And it displays our message, hello, and the chatbot's response, hello, how can I help you?

Let's try another example. In the text box, we can type, "Can you flip a coin?"

and press send.

It will add and display our message and it will add and display the chatbot's response which is sure you got heads or tails and everything is working

correctly.

So as you can see state is another way 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 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 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 final chatbot project.

And that's the end of this lesson. In

this lesson, we saved the data for our website using arrays and objects. We

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

state which is data that changes over time and is connected to the HTML. We

used the updater function to update the 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 state between components. We made the

chat input component interactive and created new chat messages. And we got responses from the chatbot.

Here 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 the chatbot project. Let's go back to our code

and we'll start by reviewing CSS.

CSS is another language and it lets us change the appearance of the website. To

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.

So, we'll scroll to the top of our code to the head element and then inside here, we'll create a style element.

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.

And the special thing about the style element is we can write CSS code inside.

In here we'll type the CSS code button and curly brackets. And inside we'll type background dash color

green and semicolon.

So this is some CSS code. As a review, 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 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.

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 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 background color to green. If we save

and then check our website, you can see that it changed the background color of the button to green.

Let's go back to our code.

And one problem here is button will style all buttons on the website. But

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 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 specific element, we can add an HTML

attribute called class. In React to set the class attribute, we're going to give this element a prop called class capital

N name equals double quotes.

And we'll give it the class send dash button.

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 already has a feature called class. So

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.

Now that this button has the class send-button, 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

class send dash button.

As a review, if we start the CSS selector with a dot, it will only style elements with this class. So this will

only style elements with the class send-ash button. If we save

send-ash button. If we save and check our website, it styles our send button because we gave it the send-button class.

If we open the console and go to the elements tab and then we look at our HTML here and we find the send button,

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.

Now that we reviewed CSS, we're going to 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 side so it's easier to compare. So, I'll

take the final design here and I'll put it on the bottom left and I'll take our website and put it in the top left. And

I'm going to resize our code editor so we can see everything side by side.

And I'll hide the sidebar.

Next, to style our send button to look like the final project, we just have to style it one by one with CSS. So, we

already made the background color green.

Next, let's make the text color white.

To do that, we'll type the CSS property color colon and set it to white and save.

And that will make the text color white.

Next, let's make our button bigger. To

do that, we'll add space on the inside of the button. As a review, space on the inside of an element is called padding.

So in our CSS we're going to add padding colon and we'll give the padding two

values 12 px and 20 px.

So the px here stands for pixels. A

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

pixels and 20 pixels looks like this.

The first value is the vertical space inside this button. And the second value 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

let's save.

And it adds space on the inside.

And I think that looks close enough.

Next, let's add some space on the outside of this button on the left. As a

review, space on the outside of an element is called margin.

So, in our CSS, we'll add margin dash and we'll add it on the left colon. And

let's add 10 pixels of margin. And save.

And that looks close enough.

Next, our button has a border around the button, but in the final design, there is no border. To remove the borders,

we'll type the property border colon and set it to none and save.

And that will remove the borders.

Next, the corners of the button in the final design are round. To make our corners round, we're going to use the

CSS property border dash radius colon 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.

Next, the text in the button is a little bigger in the final design. To change

the size of the text, we'll use the CSS property font dash size colon and let's

try 15 pixels and save.

And that looks pretty good. Next, if we put our mouse over our button, we no longer have the hand pointer icon that

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 and save.

And now if we put our mouse over the button, we have the hand pointer icon again.

Finally, the background color of our 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.

And then we're going to rightclick this button and then click inspect.

And we can click these three dots here and click this icon to open the console in a different window.

And we're going to go to the elements 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 this RGB value. So we're going to select this RGB value and we're going to copy

it.

And in our code, instead of the color green, we're going to paste this RGB color.

As a review, RGB stands for red, green, 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, and blue. The first value here is how

and blue. The first value here is how much red we want in the color. The

second value is how much green we want in the color. And the third value is how much blue we want. And each value goes from 0 to 255.

So this color combines a little bit of red, a lot of green, and a bit of blue to get this exact green color. So let's

save our code.

And now our button matches the final project.

And that's how we style the send button.

We just style it one by one using CSS until it looks like the final design. So

this is just a review of CSS. If you

want to learn CSS in more detail, you can check out my HTML and CSS full course in the video description.

Next, we're going to style this text box to look like the final design. Again,

we're just going to style it one by one with CSS.

First, we need to add a class to this element so we can select it in our CSS.

We'll go to our code and we're going to scroll down to this text box which is inside the chat input component and it's

this input element here. So to add a class we're going to use class name. So

inside the input element we'll add a class name equals double quotes and

let's give it the class chat dash input.

Now, let's scroll back up to the CSS.

And below these styles, 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 input and curly brackets. And now we're

ready to style the text box.

The first thing we'll change is there's a lot of space on the inside of this text box in the final design. So again,

space on the inside of an element is called padding.

In our CSS, we'll add padding colon. And

let's do 12 pixels for the vertical 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 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 that looks pretty good. Next, our

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

colon. And let's change it to 1 pixel

colon. And let's change it to 1 pixel and save.

So that looks pretty good. Finally, the

text is bigger in the final design. To

change the size of the text, we can use font dash size colon. And let's use 15 pixels again. So 15px

pixels again. So 15px and save.

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.

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.

To make our text box flexible, we're going to review a feature of CSS called flexbox.

Flexbox lets us create a flexible layout. Layout means how the elements

layout. Layout means how the elements are positioned on the website.

Here we have a horizontal layout where the elements are beside each other. And

also this element is flexible. So

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 want to position. So let's go back to our code and we're going to scroll down

to the chat input component and we'll scroll down to the HTML.

So here we want to position the text box and the button. So we need to create a container around these two elements.

Right now we have a fragment around these two elements. However, we cannot style a fragment with CSS since fragments don't actually appear on the

website.

Instead, we're going to switch this container to a div element because we can style a div element. So, inside

here, we'll type div and at the end, we'll do slash div to convert this container to a div element.

And now we have a container around the elements.

The second step is to add the property display flex to the container.

First, let's add a class name to this 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 the class chat-input

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 chat-input

dash container and curly brackets.

And finally we'll add the property display colon flex and that will turn this container into a 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 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

we want this text box to grow and take up this remaining space.

So we'll go to the styles for the chat input or the text box and we'll add the property flex dash grow

1 and save.

And now the text box will grow and take up the remaining space.

If we resize the browser, the text box will also resize to take up the remaining space.

So now we created the layout for the 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 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 a maximum width for our app.

So, let's go to our code and we're going to scroll down to the app component, which is down here, and we'll go down to the HTML.

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 actually appear on the website.

So again, we're going to switch this to a div element so we can style it. So in

here, we'll type div and at the bottom we'll type /ash div. And now we can style this.

First we'll add a class to this div using class name equals double quotes.

And let's give it the class app dash container.

and we'll scroll up to our CSS.

And at the bottom here, we'll type dot to select a class. And

we'll select the class app dash container and curly brackets.

And to set a maximum width of our app, 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.

So now if we resize our browser the app will be limited to 600 pixels just like the final design. Next in the final

design notice that the app is centered on the website. Now there are several ways to center an element in CSS.

One way is to use margin. So we'll go back to our code and in the app container, we're going to

add the property margin dash left colon and we'll set it to auto. And we'll also

set the margin dash right colon auto.

So this will automatically add a space on the left and right of this element until it is centered. So if we save our

code and check our website, you'll notice that the entire app is now centered on the website. And now we

created the layout for the overall app.

Next, we're going to create the layout for the chat messages. If you don't have any chat messages in your final project, you can add some by typing in here and

then pressing send. So notice that the chat messages from the user are on the right while the chat messages from the

robot are on the left. So we're going to create this layout. First, we need to give class names to these chat messages

so we can style them.

So, let's resize our browser for now.

And we'll go to our code. And we're

going to scroll down to the chat message component. And we'll

scroll down to the HTML.

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

type curly brackets. So here we want to give a different class name depending on 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 or on the left. To give this a different class name depending on the sender.

We're going to use a feature of JavaScript called the turnary operator.

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.

If value one is true, then the result is value two. Else the result is value

value two. Else the result is value three.

The turnary operator lets us insert an if else statement directly in the JSX.

So using a turnary operator, we can give a different class name depending on the sender.

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

we'll type question mark. If the sender is the user, we'll set the class name to the string chat-

message dash user.

And then we'll type a colon. So, this

means else. So if the sender is not the user, we're going to give the class name the string chat-

message dash robot.

So again the way this code works is if the sender is equal to user, we'll set the class name to chat message user.

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 else statement directly in the JSX. And

notice that we used curly brackets here because we want to save the result of this code into class name instead of just a string.

Before we continue, we can add some new 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.

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.

And remove some spaces so that this is vertically aligned.

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 value. Now let's save

value. Now let's save and we'll go to our website and let's check the HTML. So in our console, we

can click these three dots here and then 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 pointer on the top left and we'll select

one of these chat messages and click it.

And if we scroll down here, you can see that each chat message now has a class.

And messages from the user have the class chat message user. And messages

from the robot have the class chat message robot.

So now that we added a class to each of these chat messages, let's style these chat messages.

We'll go to our code and we'll scroll up to our CSS.

And at the end, let's type a dot. And

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 profile image on the right. To create

this flexible layout we can use flexbox.

Again 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 class chat message user or chat message robot.

Next, we need to add display flex to this container. So, for chat message

this container. So, for chat message user, we'll add display colon flex.

And now we can use flexbox features.

Another feature of flexbox is we're going to type justify dashcontent colon.

Justify content controls how the elements are displayed horizontally.

If we want these elements to be displayed on the right, we're going to give this a value end.

So it will display these elements at the end of this row or on the right.

So now let's save our code.

And now the chat messages from the user are on the right. And we created the layout for the chat messages.

Next, we're going to style the text in the chat messages.

First, we need to add a class name to this text so we can style it.

Let's go to our code and we're going to scroll down to the chat message component and we're going to scroll to the text

which is here. So currently this text is not inside an element. So first we're going to put this text inside an element

so that we can style just the text.

Above this, we'll put this in a div by typing less than div greater than and below it less than slashd greater than.

And we'll add an indent at the front to show that this text is inside this div.

And now let's add a class to this div so we can style just the text. So, we'll

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.

So now let's style this with CSS. We'll

scroll up to our CSS and at the end we'll type a dot and we'll style the class chat dash message

dash text and curly brackets.

So the first thing we'll style is we're going to change the background color to this gray color. To get this exact color, we're going to rightclick on this

text and then click inspect.

and we'll find this text in the elements tab and we're going to go into the 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

the background dash color colon and we'll paste the RGB color and save.

And now we'll have the exact color in our final design.

However, after we saved, it kind of messed up our layout. So, the chat message user looks okay, but the text for chat message robot is now appearing

below the profile image and it's taking up the entire line.

So, what happened? Remember that we just surrounded this text in a div element.

Normally a div element takes up an entire line by itself because a div is a block element.

However, remember that we also made chat message user a flexbox. When a block element is inside a flexbox, it no

longer takes up the entire line. It only

takes up as much space as it needs to.

So that's why this div only takes up as much space as it needs because it's inside a flexbox.

One way to fix this layout problem is we 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

and we'll style the chat- message dash robot and curly brackets and we'll also give it display colon

flex so it will match the layout for the chat message user.

Let's save.

And now because this div is inside a flexbox, it only takes up as much space as it needs. So now the background color

and the layout looks good. Next, the

style of text or the font is different in the final design.

To change the font, we'll go to our code and we'll add the property font dash family colon And in the final project, I

use the font Ariel.

Let's save.

And now our font matches the final design.

Now, usually we don't set the font for just one element. We set the font for the entire website because we want the

entire website to use the same font or the same style of text. to set the font 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.

And here we'll style the body element curly brackets and we'll set the font

dash family colon to area.

So this sets the font for all elements inside the body, which is basically the entire website. So now we can scroll

entire website. So now we can scroll back down and we can remove this style because we're going to set the font for

the entire website instead.

Let's save.

And now we set the font for the entire website to Ariel.

Next, let's add space on the inside of this text, which is 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 horizontal space. And save.

horizontal space. And save.

And that looks pretty good.

Next, we'll make the corners round.

To do that, we'll use border dash radius colon and 10 pixels and save.

And that looks pretty good. Next, let's

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

save.

And that looks close enough.

And here, if we scroll down to a chat message from the robot, we'll add some space on the left of the text. So, in

our code, we'll add margin dash left.

And let's try 10 pixels and save.

And that looks pretty good. Finally,

let's add some space on the bottom of the text so we can separate them. Here

we'll add margin dash bottom colon. And

let's try 20 pixels and save.

And I think that looks close enough.

However, we now have a problem here, which is the profile image seems to be stretching.

This happens because this container is a flexbox. And by default, elements inside

flexbox. And by default, elements inside a flexbox will stretch vertically.

So, if this text gets longer because we added some margin, this image will stretch.

To fix this, flexbox has another feature called align items. So in our CSS in chat message user,

we'll add the property align dash items colon and align items controls how the elements are displayed vertically. By

default, align items is stretch. That's

why the elements stretch vertically.

Instead, we're going to change align items to start.

This will display the elements at the start or at the top vertically, and it will no longer stretch. Same thing for

the chat message robot. We're going to give it align dash items colon start and save.

And now the elements in the flexbox will appear at the start or at the top vertically.

The last thing we'll style for the text is if we go to our final project and inside the text box we type test and

press send.

You'll notice that the response from the chatbot has a maximum width. So in our project, we're also going to add a

maximum width to our text. So in our code, we'll go to the chat message text

and let's add a max dash width colon.

And let's try 300 pixels and save.

And now if we go to our text box and type test and press send and scroll down, the text has a maximum width and

it matches the final design.

Now we finish styling the text in the chat messages.

Next, we'll style the profile images. So

in our code, let's scroll down to the profile image which is inside the chat message component

and it's these two image elements here.

Currently, we're using an attribute to set the width of this image. However, a

best practice is to use CSS for styling instead of attributes. So let's remove this attribute and we'll remove it down

here as well and we'll add a class to these profile images so that we can style them with CSS. So here we'll add

class name equals double quotes and we'll give it the class chat- message dash profile.

And we'll also add this class to the profile image for the user.

We'll give it the class name equals double quotes chat dash message dash profile.

So now we can style this with our CSS.

We'll scroll up to our CSS and at the end we'll type a dot and

we'll style the class chat dash message dash profile and curly brackets.

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.

and save.

Now, if we look at the final design, it looks like the profile images here 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.

And save.

And I think that looks close enough. And

now our profile images are the same size as the final design.

The last thing we're going to change in this design is we're going to move the text box to the bottom so that it matches the design of other popular chatbots.

In the final project, we're going to make this a little taller. Now, we can move this text box to the bottom of the

page by clicking this link.

And now let's create this design in our project.

First I'll open our project and then move it back to the same window so that 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 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 component which is here and we'll scroll to the

HTML and we're just going to move this chat input below the chat messages. So

we'll select this component and we'll cut and below chat messages we'll paste

and save.

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 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 again. Now before we use flexbox, we're

again. Now before we use flexbox, we're going to make the app container stretch to the bottom of the browser. So right

now if we click inside here and we rightclick and inspect and we go to the elements tab and we

scroll up and look at the app container.

Notice that the app container stops at the chat input section. And that's

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 to stretch the app container to the bottom of the browser so that we can put

the chat input at the bottom. To do

that, we're going to set the height of the app container. So, we'll go back to 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.

And at the end, we're going to set the height colon.

And now we want the height of the app container to stretch to be the same as the height of the browser here. To do

that, we're going to give this a special value 100 VH.

So VH stands for viewport height. This

gives us the height of the browser or the part of the page that is visible.

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 open the console again by right-clicking and inspect

and go to the elements tab and we'll scroll up to the app container again.

And now you'll notice the app container stretches to the bottom of the browser.

However, the app container is actually a little too tall. So it actually stretches below the bottom of the page.

And now we can scroll a bit here. The

reason it's a little bit too tall is because by default the body element here 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 another 8 pixels on the top and bottom.

To fix this issue, we can just remove the default margin from the body. So,

we'll go back to our code 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- 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

colon to zero pixels and save.

So now after we remove the default margin from the top and the bottom, the app container is now exactly the

same height as the browser.

Now that the app container stretches to the bottom of the browser, we can use a flexbox to make the chat messages grow

and push the chat input to the bottom.

Again, there are three steps to use a flexbox.

So here we want to position the chat messages and the chat input. So we need a container around these elements and we already have a container for this which

is the app container.

The second step is to add display flex to the container. So we'll go back to our code and we're going to scroll to

the app container styles which is right here and below this we'll add display

colon flex. Let's save our code.

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 horizontally. So it takes all the

horizontally. So it takes all the elements inside the container and then squeezes them into a row like we see here.

However, this time we want to position the elements vertically, not horizontally.

To position the elements vertically, we're going to use a flexbox feature called flex direction.

So in here, we'll type flex dash direction. colon

direction. colon flex direction determines which direction the elements are positioned.

So flex direction is row by default.

That means it positions the elements horizontally like we see here.

Now we're going to change flex direction to column.

So this positions the elements vertically in a column. If we save our code and check the website, the elements in

the flexbox are now positioned vertically from top to bottom.

Next, we're going to use flex grow.

Again, as a review, flex grow makes an element grow and take up the remaining space.

Here, we want to make the chat messages section grow and take up all the remaining vertical space. And this will push the chat input down to the bottom.

To use Flex Grow, we're going to add a class to the chat messages section.

We'll go to our code and we'll scroll down 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 style a fragment since fragments don't

appear on the website. So again, we're going to switch this to a div element.

and at the end slash div so that we can style it.

And now we'll give this div a class using class name equals double quotes

and we'll give it the class chat dash messages dash container.

And now let's style this class. We'll

scroll up in our CSS and at the end here we'll type dot and we'll style the class chat dash messages

dash container and curly brackets and we'll use the flexbox feature flex dash grow

1.

So now let's save.

And this makes the chat message 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.

So that's how we use a flexbox to position the chat input at the bottom.

Finally, if we look at the final design, we have some space at the top of the app and at the bottom of the app. So let's

add that space at the top and bottom to our website.

We'll go to our CSS and currently the app container has a 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,

we'll scroll down to the chat messages container and we'll add some space at the top using margin dash top colon 20

pixels.

And we'll also add some space below the chat input container. So, we'll scroll 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.

And let's try 60 pixels and save.

And now that looks pretty good. And now

if we look at our website and compare it to the final design, you can see that it looks the same as the final design. So, we finished

styling our project to look like the final design using CSS.

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 than we can see in the browser, we can 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 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 our project and we add some more

messages like test and press send, notice if we have too many messages, it starts to push the chat input down.

To make our chat messages scrollable, we're going to go to the CSS and we're going to find the chat messages container, which is right here.

And at the end we'll add a property overflow colon scroll.

So now if the chat messages overflow or there's too many to be displayed, it 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 press send.

And you may need to add a few more messages to see this feature. Now, if we have too many messages, we're able to scroll up and down to see all the messages.

Now, before we continue on Windows, we have a small problem, which is we start to see these thick scroll bars on the sides, which doesn't look very good. To

hide these scroll bars, we can go back to our CSS and at the end we can use the

property scroll bar dash width colon nut.

So now let's save.

And if we add a message test and press send and you might need to add more messages for your project. Now, if we

have more messages than we can see, we can scroll and we hide the scroll bars.

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

example, if we go down here and add the message test and press send, notice we have to manually scroll down

to the bottom ourselves. But if we go to the final project and at the bottom add a message test and press send,

notice that it automatically scrolls to the bottom of the chat messages. So,

we're going to add this autoscrolling feature.

Let's go back to our website.

And to create autoscrolling, we're going to learn one of the most important features of React called hooks.

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 feature called state into our component and state automatically updates the HTML

when the data changes. Now, React has other hooks that we can use and every hook starts with a word use.

Another hook is called use effect. Use

effect lets us run some code after the component is created or updated.

So in our project after we add a chat message we want to run some code to scroll to the bottom. So this is a

perfect situation for use effect.

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 going to type the code capital R react dot use capital E effect

and brackets.

By the way, in React, we should put our hooks at the top of the component and they should not be inside anything. So,

don't put a hook inside an if statement or inside a function.

Next, we'll give use effect a function.

So, inside these brackets, we'll type a function using brackets, arrow, and curly brackets.

As a reminder, when we give a function to another function, we usually use an 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

and every time the component is updated inside here. Let's try console.log

inside here. Let's try console.log

the string updated and save.

And now if we go to our project and we look at the console. So we'll rightclick inspect and we go to the console.

You'll see that after the component is 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 message like hello and press send.

So now after the component is updated, React runs the function again. So, as

you can see, use effect lets us run some code after the component is created or updated.

So, now let's go back into our code 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 which is an array.

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 component is created.

Now, inside this array, we can also put some data such as our chat messages. So,

we'll type chat messages.

And now, React will also run this function every time our data changes or every time our chat messages changes.

If we save and we look at the console, 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, use effect also runs after chat messages

changes.

So now let's go back to our code.

And this is called a dependency array.

It lets us control when use effect runs.

A best practice is to give use effect a dependency array to avoid running this function too often.

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 to the bottom. To scroll to the bottom,

first we need to get the HTML element that we want to scroll into our JavaScript.

Let's go back to our code. And inside

this function, instead of console.log,

log we need to get this div chat messages container into our JavaScript.

Now in normal JavaScript we might use the DOM to get this element but remember 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 to get this element using React. We're

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 react dot use capital R ref and

brackets.

Use ref lets us automatically save an HTML element from the component.

So this code creates a ref. A ref is a container with special React features.

One special feature is we can give this ref or this container to React and React can automatically save an HTML element

inside this ref or inside this container.

So between these brackets, we're first going to put the value null.

So this is the initial value that is 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.

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

the front we'll create a variable using const and we'll name it chat messages ref equals this result.

And then we're going to go to the HTML element we want to save, which is this div, the chat messages container.

And we're going to give this element a 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 that we created above, which is chat

messages ref.

So now React will take this HTML element and save it inside this ref or inside this container.

To access the HTML element saved inside a ref, we're going to go to use effect and we're going to type the name of the

ref, which is chat messages ref and then current.

Now the reason we put this code in use effect is because remember use effect runs after the component is created. So

we need to wait for the component to be created first and then we can access this HTML element.

So now let's console.log this value to see what's inside this ref. So at the

front we'll console.log log open bracket and close bracket and save.

And we'll open the console for our website.

And you'll see that React saved the chat messages container inside our ref.

Now that we have the HTML element, we need to scroll. Let's learn how to scroll it to the bottom. Let's go back to our code

and first we're going to save this HTML element in a variable. So we'll remove this and at the front we'll create a

variable const and let's name it container lm equals this result.

So ending the variable name with lm tells us that this variable contains an HTML element.

and I'll resize my code editor so we can see more of the code.

Next, we'll create a new line. And it's

a good idea to check if this element actually exists before we scroll it. So,

we'll check if brackets container lm.

Finally, we'll type curly brackets.

And to scroll this element to the bottom, we can use this code container

lm dot scroll top and we'll make it

equal container lm dot scroll height.

So scroll top means how far from the top should we scroll and scroll height gives us the total height of the element. So,

if we set the scroll top to the total height, it's going to scroll all the way down to the bottom, which is exactly what we need. So, now let's save this

code and we'll go to our website and we'll add a message test and press send.

It runs the use effect function because chat messages changed and it automatically scrolls to the bottom.

Now, depending on the height of your browser, you might need to add a few more messages to see this effect. So, we

can also scroll up and then add another message like thank you and press send.

It runs use effect again and it automatically scrolls to the bottom. And

that's all the major features that we need for this project. I'll leave some extra features like removing these default messages and creating the

loading spinner as exercises.

And that's it. We created all the styling and features that we need and we finished the chatbot project. In the

next lesson, we'll learn how to do a proper React setup so we can organize our code into different files and folders instead of putting everything

into one HTML file. And this will help us work on bigger React projects.

And that's the end of this lesson. In

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

the turnary operator which lets us 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 components. We learned the use effect

components. We learned the use effect hook which lets us run some code after the component is created or updated. We

learned the use ref hook which lets us automatically save an HTML element from the component 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,

all of our HTML, CSS, and JavaScript code is combined into one HTML file, chatbot.html.

chatbot.html.

Now, it's not good to combine all of our code in three different languages into one file because if we work on bigger projects, this file might contain thousands of lines of code, and it will

be almost impossible to manage all of that code if we put it all in one file.

Instead, we're going to do a proper React setup that will let us split up this code into different files and folders.

To create this React setup, we'll need to use the command line. So, first let's review the command line. We're going to go to VS Code and I'm going to make this

full screen.

And to open the command line, we're going to click the menu at the top and 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,

we're going to type the command mkdir.

mkdir means make directory. A directory

is another name for a folder. So make

directory creates a new folder.

Then we'll type a space and we'll give this folder a name like test.

If we press enter, it creates a new folder named test. So

if we open our files on the left, you'll see that it created a new folder named test.

If that does not work for you, you can check the troubleshooting steps in the description.

So on this line here we can give instructions or commands to our computer and that's why this is called the command line

and a terminal basically lets us use the command line and it also lets us view the output of the command line up here.

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 our project folder. As a review, the command line runs inside a specific

folder.

To see which folder the command line is currently running in, we can go to the bottom and type this command pwd or

print working directory and press enter.

And this command tells us the command line is currently running in the react-course folder which is our project folder right here. That means any

commands that we give to the computer will be done inside this folder. If we

make a directory, it will create the new 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, 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 inside a specific folder.

Now this folder that the command line is running in is called the working directory or the working folder.

The last thing we need to review about 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 type the command cd or change

directory and then press space and then the name of the folder we want to change to like test.

the command line will look for this folder in the working directory which is 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 press enter it will tell us the command line is now

running inside the test folder.

So the command line basically went 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 that the test folder is inside the

react-course folder.

So now if we give a command like ls and press enter, it will list everything inside the test folder because the command line is

running inside this test folder and it tells us there's nothing inside the test folder.

Finally, to get out of the test folder, we can type cd or change directory and then space and use the special value dot

dot. Dot dot represents the outer

dot. Dot dot represents the outer folder.

If we press enter, the command line will go out of the test folder and back into the react-course folder.

If we type the command pwd or print working directory and press enter, it will tell us the command line is

running in the react-ourse folder again.

So using cd or change directory, we can change which folder the command line is running in and we can basically move around our computer. So this is just a

review of the command line.

The second thing we need for the React setup is NodeJS.

So, we're going to review NodeJS.

First, make sure you have the correct version of NodeJS installed. To do that, you can click this link in the description.

Scroll down to lesson 5 and follow the 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 installed Node.js, we need to restart VS Code to make sure that Node.js is

loaded.

So, we're going to click X in the top right of the terminal and then close VS Code.

And then we're going to open VS Code again.

And we're going to open our project folder React-Course.

and we're going to open a new terminal.

So, in the top menu, we're going to go 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 called node.

So, the node command lets us run JavaScript code outside of a browser.

For example, here we have a file called react-basics.js 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 create this file. Now we can give this file to node and it will run the

JavaScript code in this file. So here

we'll use the node command and type space and give it the file to run which is react-basics.js and press enter.

So this will run the JavaScript inside this file and a console.logs hello. So

as you can see the node command lets us run JavaScript code outside of our browser.

Now when we install Node.js, it also adds another command to our command line called npm.

npm stands for node package manager. A

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.

To do that, we can use the command npm space install and then space and then the name of an

external library or package.

As an example, we'll install the package super simple dev.

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 first and then run npm install super simple

dev again.

If that still does not work for you, you can check the troubleshooting steps in the description.

Once npm install finishes, npm will download this external library or this 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 this contains the code that we've been using in the chatbot project like

react.js and chatbot.js.

and chatbot.js.

npm contains millions of packages that we can download and use in our project and you can search for packages on the npm website.

So this is just a review of NodeJS and npm.

Now that we reviewed NodeJS and npm, we're ready to do a proper React setup.

We just learned that npm has millions of packages available to use. Some of these 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.

If we install this package, it also adds a command to our command line called create-vit.

The create-vit command helps us set up a new React project.

To use the create-v command, we need to do two steps. Number one, we need to install the create-vt package. And

number two, we're going to run the create-v command in the command line.

Now, npm actually has a shortcut for this called npx.

npx does these two steps in one step.

The x means execute.

So let's go to our command line and let's type the command npx create-vt.

And then we'll also type the at symbol.

At means we're going to use a specific version of the create-vit command. For

this video, we're going to use a specific version so that you have the same code that I do and you can follow along.

To get the version of create-vt we're going to use, we're going to click this link in the description.

Go to lesson 5 and here you'll find the version of create-vt we're going to use.

You can also find the full command here.

By the way, the version that you see in this video might be different than the version you see on your page. You should

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 easily update the version in the future.

So, select the version on your page.

Copy.

And in our command line, we're going to paste it after the at.

So again, this command will install the create-vt package and then it will run the create-vit command. The create-v

command will help us set up a new react project.

By the way, in some tutorials, they might use the command npm create vit.

This is just a shortcut for npxcreate-vit.

Now let's press enter.

If it says it needs to install this 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 dash project and press enter.

And then it will ask us what technology we want to use in our project. So we're

going to press the down arrow and select react and press enter.

And it will ask us what other tools we want in our project. We're going to press down and just select JavaScript and press enter.

and create vit will create an empty React project at this location or this folder right here.

Next, we're going to go into this folder with our command line. To do that, we can use the command cd or change

directory and give it the folder name chatbot dash project and press enter.

If we type pwd and press enter, it will tell us the command line is now 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 we're going to run the command npm install.

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 this project. So, npm install is going

this project. So, npm install is going to install all of these packages at the same time.

So, we'll go back to the command line and scroll down and we'll run the command npm install and press enter.

Now, this might take a while because it's going to install a lot of packages.

So, we just got to wait until it finishes.

After npm install finishes, all of the packages here are going to be downloaded into the node modules folder. So, if we open this, you'll see that we have a lot

of packages here. Now, you'll notice that there's more packages here than we have in the package.json file, and 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.

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 opening this URL in our browser. So,

we're going to select this URL and copy and then open our browser.

And I'm going to make it full screen so we can see more of it. We'll create a new tab and paste and press enter.

And now we have a new React website that we can work with. So that's how we do a proper React setup using the command

line npm and vit.

Now that we created a proper React setup, let's go back to VS Code and we'll learn what each of these files

and folders do. As a review, the node modules folder is where npm installs all of the packages.

Next, we're going to look at the src or the source folder.

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 using React, we write JSX code rather

than normal JavaScript code. So, the

files here end with JSX instead of JS.

Next, this assets folder contains images that we want to display on our website.

So, here we have an image of the React logo in SVG format.

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.

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 to this image and you'll be able to access it.

So here they just put this vit image in the public folder as an example. So now

we understand the folders that we have in this setup.

Next let's learn about all the files in this react setup. The first file.get Git

ignore is used by a tool called git. Git

helps us track changes in our code. For

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.

The next file here is eslint.config.js.

So this is used by a tool called eslint.

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 the file app.jsx

and let's say that here I accidentally misspell setc count by removing the last t.

My VS code doesn't really tell me that there is a problem here. But ESLint will 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 go to the extension section

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 underline that this variable name does not match the variable name down here.

So, if we scroll up and we fix the spelling by adding back the t, that red underline or that error will go away.

As you can see, eslint is a really useful tool that highlights problems in 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

configuration file is actually good enough for now. So, we don't need to change this file.

The next file in our setup is index.htm.

html.

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.

The main difference is instead of putting all of our code inside the HTML file index.html loads our JavaScript from a different

file.

So this is the one file that we may need to change inside this setup. If we want to change the HTML for our website,

for example, we can change the title at the top of the tabs by removing this and let's change it to chatbot

project.

If we save, vit will automatically refresh our page just like live server does. And if we open our website, you'll see that the

title at the top changed.

Let's go back.

So the index.html contains the HTML code for this website.

The next file in this setup is package-lock.json.

package-lock.json.

As a review, package.json has a list of 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 all the packages that we installed. So

the next time we run npm install, this file makes sure that we get the same versions for all of these packages.

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 need in our project as well as some other information about our project.

When we npm install a package, it will automatically update this list of packages. So we don't need to change

packages. So we don't need to change this file.

Next, we have the file readme.md.

So this is just text. It provides more information about this project. And this

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.

Finally vit.config.js

configures vit. Vit is the tool that we used to set up this project. Vit also

helps us build the website. That means

it takes all the JavaScript and CSS and then loads them into the HTML file. Vit

also creates a server. A server puts our website at a URL. For example, here it put our website at the URL localhost 5173.

So this lets us view the website in a web browser like a real website. When we

were building the chatbot project in the previous lessons, we used an extension called live server. Live server

automatically refreshes the website when we change some code. The VIT server also 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 we used earlier. So those are three main features of Vit and you can see that

it's really helpful for setting up and developing a React website. We'll go

back to VS Code.

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 this react setup. As you can see most of these files are just configuration files

and we don't need to change them. The

only files we need to focus on and change are the HTML file and the files in the source folder which is our CSS

and JavaScript files.

Now that we understand all the files and folders in this React setup, let's move 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

actually remove the node modules folder 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 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 and we'll start with this file app.jsx.

So notice that in this file we have a react component called app and this component represents the entire application.

Now previously in chatbot.html we also created an app component.

So all we have to do is to replace this 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

here. So we're going to select the app

here. So we're going to select the app component 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 and then go back to app.jsx

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 the app component from our previous project.

And now we're going to scroll up and 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.

First for this error eslint is going to tell us that react is not defined.

Before we loaded the react external library using a script tag and this provided a variable called react.

However, now that we're using NodeJS, we usually don't use script tags to load the external libraries. Instead, we

download these packages into 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 only load the parts of the external

library that we need. So when using npm, a best practice is to load external libraries from node modules. Instead of

using a script tag to load an external library from node modules, we use the word import. And

then we tell the computer which external library or which package we want to load from by typing from and then the name of

the package like the string react. If we

just type a name directly like this and we don't start with dot slash or slash, this tells the computer to look inside node modules for the React package. So,

it's going to look in here and it's going to find the React package in here and load it from here.

Also, when importing from node modules, 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.

So now that we imported use state, we can just use this directly here instead of doing react dot use state. So we can

remove react dot and use state directly.

Next, these two lines import images that were used in the example website. So,

we're no longer using these images. So,

ESLint displays an error. To fix this, we can just remove these imports.

Next, let's scroll down and it's going to tell us that the components chat messages and chat input 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 and in chatbot.html, HTML. We're going

to scroll up and above the app component, we're going to copy over all of our other components. So, we're going to select

components. So, we're going to select all this code and we're going to copy

and let's go back to app.jsx

and we'll scroll up above the app. We're

going to paste all of the other components that we created.

And now if we scroll down and look at our app component, you can see that there's no more errors because we moved these components into this file. So now

we've moved the app component into this new React setup.

After copying over all of our other 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.

First, you might see an error here for the props.

ESLint tells us that these props are missing props validations.

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.

To turn off a check in eslint, we're going to go to the eslint config.js file, and we're going to scroll down to

the rules section here. A rule tells ESLint what to check for. At the bottom 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.

So, this will turn off this particular rule or this particular check. And now,

if we go back to app.jsx, jsx. We no

longer have those eslint errors because we turned off the check.

Next, remember that we're no longer using react.

We can just use state directly. So, we

can remove react dot.

Next, let's scroll down and eslint will 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

remember, now that we're using npm, a best practice is to load the chatbot from node modules.

First, we need to download the chatbot into node modules. To do that, we're 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.

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 or control C on Mac. Note that on Mac,

it's control C, not command C. So, this

will stop the V server and bring us back to the command line. Usually, to exit something from the command line, we can

press control C in both Windows and Mac.

Next, we're going to npm install the package super simple dev. So, this

package contains the chatbot code that we were using earlier. Let's press

enter.

It's going to install the super simple dev package inside node modules. And now

to load it from node modules, we're going to scroll up in our code and at the top we're going to import

and type curly brackets. So we're going to import the chatbot object and we're going to import it from a string and

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 modules and get the chatbot out of it.

And now that we have this chatbot object, if we scroll down, we have access to it. So it's no longer giving us an error.

Finally, we're going to scroll down to the chat messages component.

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 directly as well.

So let's remove the react dot from here and remove react dot from here.

And we're going to scroll up and at the top we're already importing from the React package. To import

multiple things we can just add a comma at the end. and import use ref and add

another comma and import use effect.

This gets these two features out of React and now we can use them directly in our code.

And now we've fixed all the ESLint errors in our app component. If you did the exercises in the previous lesson, you may have some more ESLint errors.

So, make sure you fix any other errors 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

create root, gives it a container, and 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, and then render the app onto the website. So main.jsx

website. So main.jsx

does the same thing as this code. It

sets up React and displays the app onto the website.

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 basically does the same thing. It just

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 component called strict mode. Strict

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 developing our app.

And that's it. We moved all of our JavaScript code into this new setup.

Now, let's open this app in our browser to see what it looks like. We'll go down to the command line and let's make sure

we're running inside the chatbot project folder by typing pwd and press enter.

So, that looks good. And we're going to start the VIT server by typing npm rundev

and press enter.

And we'll open this URL in our browser.

I already have it open.

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.

If we type a message like hello and press send, it will display a response from the chatbot.

However, obviously it doesn't look right, and that's because we haven't moved our CSS code and images over into the new setup. So, we're going to do

that next.

Let's move our CSS code into this new React setup.

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.

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 and then open app.css

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.

And now how does this CSS code get 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 file, which is the source folder. So

it's going to start from source and look for a file called app.css.

and it finds it here and it will load 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?

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.

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 this file and apply it to the website.

So that's how this works. We use Vit to load the CSS code inside app.css CSS.

And this allows us to separate our CSS code into its own file to make our code more organized.

Next, you'll also notice that in here we have an index.css

file.

This CSS file is loaded by main.jsx

here using this import. So why do we have two CSS files? A best practice is 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 for the overall website should go inside

index.css.

index.css.

If we open app.css

and we scroll to the top, the body styles here are not related to 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 index.css.

index.css.

So we'll select this code and then cut and save and then inside index.css CSS.

We're going to remove this default code and paste those body styles and save.

If we go back to app.css,

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.

And now we moved all of our CSS into our new React setup. So, let's open our project again in the browser to see what it looks like.

And now it's looking pretty good. It's

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 we're missing here are the images. So,

we're going to move those. Next,

let's move the robot image and the user image into the new React setup. We'll go

back to VS Code and we're going to scroll down and we're going to select the robot.png image and

we'll copy it by pressing control C on Windows or command C on Mac.

And let's scroll up and we're going to 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 assets folder and we're going to paste the image by pressing controlV on

Windows or commandV on Mac.

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 and we'll copy and then select the assets folder and

we'll paste.

And now we need to load these images into our app. Let's open app.jsx.

And to load this image, we can actually just import it. So at the top, let's type import

and we'll give this image a name like robot profile image. And we'll import it

from a string. and we're going to locate this image file. So inside here, we'll start by typing dot slash, which means

the current folder or the folder that contains app.jsx,

contains app.jsx, which is the source folder. So we're

going to start from the source folder 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 to type a slash. And then we're going to 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.

So also notice that in this import we just gave it a name instead of using curly brackets.

This is called a default export and we'll review this later in the lesson.

But for now just remember that when we import an image we just give it a name without curly brackets.

Let's also load the user image. So,

we're going to import and give it a name, user profile image, and we'll import it from a string. And we're going

to locate the user.png file. So, we'll

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 we'll look for the file user.png.

So remember this is a feature of vit.

Vit lets us import any type of file including an image file. When we import an image like this, vit gives us a file

path to that image. So this contains a file path like this. And we can use this directly in an images source attribute.

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 source attribute, instead of robot.png,

we're going to give it those images that we imported by typing curly brackets.

And here for the robot, we'll insert the variable robot profile image. And we'll

do the same thing for the user. We'll

remove the source attribute and type curly brackets. And we'll

insert the user profile image. So that's

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 now all of the images are loaded.

So, let's try adding a message to make sure this is working. We'll type the message hello and press send.

And that's it. We finished moving our chatbot project into this new React setup.

We'll go back to VS Code.

And the big advantage of this setup is we can separate our code into different files instead of combining everything into one file like we had before. Right

now we already separated our code a bit.

We separated the app component into app.jsx

app.jsx and we separated the code that sets up React into main.jsx.

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, notice that there's many other 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 file. This makes our code easier to work

file. This makes our code easier to work with because each file only focuses on one component.

So, let's separate the chat input component into its own file.

First, we're going to go to the source folder and we're going to create a new 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 create a new folder and we'll name it components

and press enter.

And inside this components folder, we're 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 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 capital C chat capital I input.jsx

and press enter.

And now we're going to move the chat input component into this file. So we'll

open app.jsx

and we'll select the code for chat input which is down here.

And we're going to cut and then open chatinput.jsx.

And in here we'll paste.

and we'll scroll up and we're going to fix these eslint errors. We'll start

with this one. Use state currently doesn't exist in this file. So, we need to import it again.

Let's go back to app.jsx.

And at the top, let's copy this import.

So, we'll select it and copy.

And we'll go to the chat input file. And

at the top of this, we're going to paste the import.

Now that we imported the use state, we're able to use it and there's no longer an error. Now, eslint also tells us that we're not using use ref or use

effect in this file. So, we can remove these.

Next, we're going to scroll down in this file and we'll see that the chatbot 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

select it and chatbot is not used anymore in this file. So this time we're going to cut

and inside chat input at the top we're going to paste that input.

And now we have access to the chatbot.

The last error here is that the chat input component is not being used. To

fix this, we need to review a feature of JavaScript called modules.

By default, any variables or functions 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 variable name in different files, it won't cause an error. Now, if we want to

use this variable outside of this file, we need to export it first. To do that in front of this function, we can just

type export.

And now this error is gone because ESLint assumes that we're going to use this component outside of this file. So

now let's save.

And to use chat input in another file, we need to import it. So we'll open app.jsx.

app.jsx.

And at the top, we're going to import and type curly brackets. And in here,

we'll import the chat input component.

And we'll import it from a string. And

we're going to locate the chat input file.

At the front, we'll type dot slash to start in the current folder, which is the source folder. And then we're going to go to the components folder.

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.

input.jsx.

By the way, when importing a JavaScript file or a JSX file, if we're using Vit, 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.

Also, a common practice is to import from packages at the top and then 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 JavaScript modules feature and the word

export. And we can use chat input in

export. And we can use chat input in this file.

Next, let's move the rest of these components into separate files. First,

we'll move the chat message component.

In the components folder, we'll click it and we'll click this icon to create a new file.

And let's name it the same as the component. Capital C chat, capital M

component. Capital C chat, capital M message.jsx,

message.jsx, and press enter.

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 cut.

And then inside chat message.jsx,

we're going to paste the component.

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 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 be used in other files.

If we scroll down, ESLint tells us that these images are missing. So, we need to move those imports into this file. We'll

go back to app.jsx JSX

and at the top we're going to select these two image imports and we're going to cut and inside chat message.jsx

we're going to scroll to the top and paste.

Now one thing we need to be careful about is that we may need to update these file paths. So now this file is

inside the components folder. That means

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.

To fix this at the front, we're going to use dot dot slash.

So just like in the command line, dot dot represents the outer folder. This

means it's going to go out of this 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 and it will go into the assets folder and find robot.png.

And we need to make the same change for the user image. At the front, we'll use dot dot to go out of the components folder into source. And then we can

locate the assets folder.

And now these imports will work correctly. And we finished moving the

correctly. And we finished moving the chat message component into its own file.

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

components folder, we'll click it. We'll

click this icon to create a new file.

And let's name it the same as the component capital C chat capital M messages.jsx

messages.jsx and press enter.

We'll go back to app.jsx JSX and we'll 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.

Let's scroll to the top.

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.

this file. We'll go to app.jsx.

We'll select this import at the top and copy.

And in chat messages at the top, we're going to paste that input.

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 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 curly brackets the chat message

component from a string 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 and we'll look for the file chat message

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 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.

Instead of typing export at the front of this function, we're going to scroll down to the bottom and at the end, we're

going to type export default and then what we want to export, which is the chat messages component.

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 save.

And to import this, we're going to go to app.jsx.

app.jsx.

And at the top, we're going to import.

And for a default export, we can just type a name without curly brackets. So

we can type chat messages.

We'll import it from a string 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 going to go into the components folder components slash and locate chat

messages.

So this imports whatever the default 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 called a named export.

So some people like using default exports because it encourages each file to focus on one thing. However, it's up 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 default exports.

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 out my JavaScript full course in the video description.

Next, let's fix these last few errors.

So we're not using use ref or use effect in this file anymore. So we can remove these.

And finally, this app component is already in a file called app.jsx.

So we can just leave it in this file.

And usually we put the app component outside of the components folder because app represents the entire application.

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.

So now let's save this file.

And let's make sure that all these other files are saved. And now we'll open our website in the browser and try it out.

And it looks pretty good. Let's refresh

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.

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 file. And this makes our code easier to

file. And this makes our code easier to work with because each file only focuses on one component and each file contains less code.

The last thing we're going to do in this 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 contains CSS for multiple components.

So, we're also going to separate the CSS so that each component has its own CSS file.

For example, this CSS code is related to the chat input component. So, we'll go to the components folder and click it.

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, capital I input

CSS, and press enter.

and we'll move all the CSS related to the chat input component in here. So in

app.css,

we'll select this code for the send button, the chat input, and the chat input container.

And we'll cut and chat input.css,

we're going to paste that code and save.

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 and the CSS file we want to load, which is this one. So we'll type dot slash to

start in the current folder, which is components, and we'll load chat input.css.

input.css.

and save.

As a review, this is a feature of Vit.

If we import a CSS file, it will load all the CSS in the file and apply it to 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.

Below this, these styles are for the chat message component. So, let's create 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 file. And we'll name this chat

file. And we'll name this chat message.css

message.css and press enter.

And we'll go back to app.css CSS and we're going to select the styles for the chat message user, the chat message robot, the text, as well as the chat

message profile and cut.

And then inside chat message.css,

we're going to paste the CSS code and save.

And we're going to load this by going into chat message.jsx JSX and at the top we're going to import a string and we'll

import this file using dot slash chat message CSS and save.

We'll go back to app.css.

Finally, these styles are for the chat messages component.

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 we'll name it chat messages.css

and press enter.

And in app.css,

we're going to select this code and cut.

And in chat messages.css, CSS. We're

going to paste and save.

And we'll load this by opening chat messages.jsx.

messages.jsx.

And at the top, we will import a string.

And we'll locate the file dot slash chat messages.css

messages.css and save.

And finally, we'll go back to app.css

and make sure that we save all of our files.

Now, let's open our website in the browser.

And everything should look and work correctly.

Let's go back to our code.

And that's it. We split up our 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 CSS file. This makes our code a lot

CSS file. This makes our code a lot easier to work with because each file is focused on only one component and each

file contains less code.

In the next lesson, we'll use this new React setup to work on a bigger React project, which is an ecommerce website 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 line, npm, and vit. We reviewed the

command line, which lets us give commands to our computer. We reviewed

npm which helps us download and use external libraries or packages. We

learned the create vit package which helps us create a proper React setup. We

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 JavaScript code. We reviewed JavaScript

JavaScript code. We reviewed JavaScript modules which lets us separate our code into different files. And we separated

each component in the chatbot project into its own JavaScript and CSS files.

Thanks for watching so far. If you find this course valuable, you can support the channel by liking this video, leaving a comment, and subscribing.

You can also check out the premium version of this course where you'll get all the lessons ads free broken down into small videos as well as additional lessons and more projects that are not

in the public react course. Currently,

the premium course contains 11 lessons 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 questions on specific topics, get 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 ads free separated by each lesson, AI videos, backend tutorials, and more.

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 this lesson.

In this lesson, we're going to start a bigger project using React and we'll learn an important feature called routing.

By the way, if something in this lesson does not work for you, you can check the troubleshooting guide in the description.

First, let's take a look at the project we're going to build. In our browser, we're going to create a new tab.

And at the top, we're going to go to supersimple.dev/proscommerce.

supersimple.dev/proscommerce.

And we can close these other tabs.

This is an e-commerce project or an online shopping project. We can add products to our cart.

And then we can click here to view our cart.

And this page will display all the products in our cart. It will calculate the total for our order. and it will also calculate a delivery date. And then

we can create an order.

And this page will list all of the orders that we created. We can also click this button to track the order. So

depending on the delivery date, it will show you the progress of the delivery.

And we'll click here to go back to the orders page.

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 products, we have a cart, and we have orders.

By the way, if you ever need to reset the cart or the orders, you can click this reset button here in the bottom right, and it will reset everything back

to the default data. So, let's click the top left to go back to the main page.

And now that we introduced the project, we're going to build this with React.

We'll go back to VS Code and we'll collapse the chatbot project folder.

And before we create a new React project, let's group these older files into a folder. We'll click this HTML

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 is to click this file and then press shift on your keyboard and click the

bottom file and it will select all the 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.

Next, we're going to set up a new React project using VIT. To do that, we're going to go to our terminal.

If you have the VIT server running, you can close it by pressing Ctrl + C on Windows or control C on Mac.

So, if you're continuing from the previous lesson, the terminal should be running inside the chatbot project folder. To confirm that, we can run

folder. To confirm that, we can run print working directory or pwd.

And it will tell us that we're inside the chatbot project folder. Now, to set up a new React project, we want to be inside the React-Course folder. So, to

get out of the chatbot project folder, we can run the command cd dot dot.

And if we press pwd, 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.

In the command line, we'll run the command npx create-ash 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 and going to lesson six and you'll find the version of vit that we're going to

use as well as the full command.

By the way, the version that you see in this video might be different than the version you see on your page. You should

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 easily update the version in the future.

So, select the version on your page.

Copy.

So, I'm going to paste the version here and press enter.

For the project name, let's name it ecommerce- project. Press enter.

project. Press enter.

And from this list, we'll press the down arrow and select React.

And from this list, we'll press down and select JavaScript.

And it will set up a new React project inside our React-Course folder, which we see right here. And now we need to go

into this folder using the command cd ecommerce- project.

And we're going to run npm install to 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 npm rundev.

And now we can open this project using this URL in the browser. So we'll select this URL and copy.

And in the browser, 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 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 because we're going to be making lots of 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.

We're going to go to our code and we're going to open the Git section here.

If you already have Git installed, it should say initialize repository. If you

do not have Git installed, you can click this link in the description, go to lesson six, and follow these instructions to install Git.

Once you have git installed, we'll click initialize repository.

Now, a repository is just a folder where git is tracking changes. At first, git will tell us that all of these files or

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 all of these files as new files.

We'll go back to the git section and we'll scroll up and we're going to save all of these files into git. At the

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.

Commit means we're going to save these changes into git.

Now, you might run into an error when using git and it tells you you have to configure your username and email. To do

that, you can run these two commands in the command line and choose your username and choose the email you want to use and try to commit again. And now

it should work.

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 go into our code and open the e-commerce

project and change some of these files, we type test and save.

And in the source app.jsx, we type test and save.

And then we can go to the git section.

And now git will tell us everything that we changed in these two files. So as you can see git helps us track changes in our code.

Also git lets us undo our changes. So to

undo this change we can click this arrow button here.

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 easily undo our changes. Let's go back to our files and remember that in our React setup, we

have a file called.git

ignore. So, now we can learn what this file does.

Git ignore tells git which files and 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

tells git that if there are any changes 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 large and none of the changes inside

this folder are changes that we make.

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 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 doggit ignore tells Git which files and folders to ignore or to not track changes.

Now we're ready to start the project.

First, we're actually going to download the HTML and CSS for this project. We'll

click this link in the description and then click here.

And this will open GitHub.

And this contains all the HTML and CSS for the e-commerce project. The reason

we're going to use some starting code is because this course is focused on React.

By using this code, we can focus on learning React features rather than spending our time writing HTML and CSS.

If you want to practice HTML and CSS, you can try to recreate the design on your own after this course.

Another reason we're using some starting code is in the real world, we often work 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.

So to download the starting code, we're 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 unzip this file. On Windows, we're going to rightclick and click extract all

and extract.

And on Mac, you can just doubleclick the zip file.

And then we're going to open this folder.

And we're going to move all of these files and folders into VS Code. First,

let's go into VS Code.

And we're going to organize all of those files into a new folder. So, we'll click the e-commerce project and create a new

folder.

And we'll name this starting dashcode.

And we'll open our downloads folder again.

And we're going to move all of these files into this new folder. So we'll

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 changes that we make.

We'll open the git section and here we added all of the starting code and at the top let's type the message add the

starting HTML and CSS code and commit.

Let's go back to our files and we're going to go to the starting code and look for index.html and we're going to rightclick this file

and we're going to open with live server.

And you'll see we have all the HTML and CSS for this project. So now we're going to create this using React. We'll start

by creating this main page. We usually

call this the homepage.

By the way, a page or a web page is a 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.

To create this homepage, we're going to move all of the HTML and CSS into React.

We'll go back to VS Code and we'll open the starting code index.html.

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 here for the e-commerce project. So,

let's actually drag this index.html HTML and we'll open it at the bottom so we can see these files side by side

and we'll move the HTML in the starting code into our project one by one.

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.

The first thing that we do need to move is this title. So we'll select this title and then cut.

And inside the projects HTML file, let's replace the title here.

And now we'll keep going one by one.

Next, this meta viewport element makes 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 need to move it over. Let's actually

select this code and delete it so that we can keep track of our progress.

Next, this code loads a font or a style of text called rooto.

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 and cut.

And inside our e-commerce project, we're going to paste.

And if you need to, you can fix this spacing by selecting these lines and press shift tab a few times.

Next, these lines of code load the CSS for our project. Now, remember, when using VIT, we actually import our CSS files.

So, we're not going to move these over for now, but we'll keep these for later.

Finally, if we scroll down, the HTML 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.

So, let's move this into a React component.

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 folder and we'll create a new file.

Usually, we create a component for each 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 the pages together. We'll create a folder and we'll name it pages.

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 it capital H home capital P page

brackets and curly brackets and we're going to return brackets we're going to return the HTML for the

homepage which is right here. So we're

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 this arrow to collapse this element. And

we're going to click this arrow to collapse this element as well. And now

we can select all of this HTML code and cut.

And inside homepage.jsx,

we're going to paste that code.

And now we're going to scroll up and fix all of these errors.

First, if we collapse this code and collapse this element, you can see we're returning two elements from this component.

But remember, we can only return one element from a component. To fix this, we can wrap this in a fragment. So, at

the top, we'll create a fragment using 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 slashgreater than. And let's also fix

slashgreater than. And let's also fix the indenting here. We can select all of this code and press tab a few times 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 fix the indenting.

Next, we'll fix these errors. We'll

expand these elements.

And remember in React, we have to use class name instead of class. So to fix these errors, we need to change all of these to use class name. To do that, we

can press CtrlF on Windows or command F on Mac to find some code. And we're

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 open the replace menu. So this lets us 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 this button to replace all.

And now you'll see that we fixed all of the ESLint errors. Finally, we're going to scroll to the top and we need to export this component so we can use it

in other files. At the front, we'll type export and save.

So, we moved all the HTML from the homepage into our component and we fixed all these errors. Now, let's use this component in our app. We're going to go

to app.jsx JSX

to app.jsx JSX and we'll remove this default HTML.

So we'll select it and delete it and we'll insert our homepage component.

First we need to import it.

at the top. We'll import curly brackets the home page 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 the source folder and we'll go into pages slashhome

page.

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 slashgreater than. And next we'll fix

slashgreater than. And next we'll fix these eslint errors. The react logo and vit logo are not used anymore. So we can

remove them.

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

can remove this as well and save.

And now let's make sure that we saved all of our other files. So we'll open index.html and we'll save it.

And let's open the starting code index.html and we'll save this file.

And now let's take a look at our website. We'll open the browser.

website. We'll open the browser.

And we can close GitHub for now. And

we'll open the e-commerce project.

And you'll see that we have the HTML and the text for the e-commerce project homepage.

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, we're going to go back to our code and we're going to open the starting code index.html.

code index.html.

And here we're going to scroll up and we load three CSS files. So, we're going to 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 which is here and shared and open general.css

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 React.

So we'll click general.css CSS and we'll press control A on Windows or command A on Mac to select all of this code and

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 default code and paste

and save.

And now if we go back to the starting code, we've moved over general.css and

we can delete this file.

And now we'll go back to the starting code index.html.

code index.html.

And we can remove this line.

And we'll move header.css and index.css

into our React project. So both of these style the homepage. So, we'll just move these files beside our homepage component.

First, we'll go into styles, shared, and header.css,

header.css, and we're going to drag this file into our pages folder.

So, we keep our CSS beside the component that it styles.

And we'll scroll down and find styles/pages.

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

styles the main part of the homepage.

Now a best practice is to use the same name as the component here. So we'll

rightclick index.css CSS and we'll 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, we're going to import a string and we'll import the file dot /

header.css. CSS

header.css. CSS

and we'll also import a string slashhome page.css

page.css and save.

And now if we go back to the starting code index.html, 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 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.

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.

And now it's looking really good. We

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 next.

To move the images, we'll go back to VS Code and we'll go to the starting code and find the images folder. So this

contains all the images that we need.

So, we're going to move this into the React project.

Now, usually we put images in the assets folder and then we import the images.

However, to save time, we're going to move this folder into the public folder.

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 homepage.js, jsx and we look at an image. Notice the source attribute

image. Notice the source attribute starts with images slash. When using

vit, if we start with a folder name like 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 folder, we don't have to change any of 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 later as an exercise.

So now let's open our website and all of the images are loaded. So

that's how we move an HTML website into a React website. We just move over the HTML, CSS, and images one by one.

Let's go back to VS Code and we'll save 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

going to type a message at the top. Move

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 browser and we're going to open the final

project at superimple.dev and we're going to click the cart icon in the top right.

This will open the checkout page where 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 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

us create multiple pages in React.

Let's go back to our code and we'll open our files here.

and we're going to scroll down first to the starting code folder.

So, normally to create multiple pages, 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 orders page. However, inside these

orders page. However, inside these 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 it has the same meta and link elements.

So this is not great because if we want to change something on one page we have to change all of the pages. On the other

hand, routing lets us create multiple pages using one HTML file, and this lets

us reuse our HTML code. To use routing, we're going to install an MPM package 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 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.

And to install React Router, we're going to run the command npm install react-rowout.

And we'll also type at. So for this video, we'll use a specific version of React Router just to make sure that it works with the video. So click this link

in the description, go to lesson six, and here you'll find the version of React Router that we'll use, and you'll also find the full command. So again,

you should always use the version that you see on your page.

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 and press enter to install.

So now, how do we use React Router? Like

most packages, React Router has a 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, I'm going to show you the parts of the documentation that we need. According to

the documentation, to use React Router, we need to load it when we render the app component.

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.

So, in this file, we set up React. We

render our app component on the page.

According to the documentation, we need to wrap this in a component called browser router.

So at the top first we're going to import curly brackets the browser router

from a string and we'll import it from the package react router.

As a review, if we just start with a name like this without dot slash, this means it's going to load it from node modules from the React router package.

And now around the app, we're going to create less than browser router greater than.

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.

Let's save.

Next, we need to do a bit more setup.

According to the documentation, inside our app component, we need to add a component called routes.

So, let's open app.jsx.

And at the top, we're going to import curly brackets the component routes

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 less than routes greater than.

So the routes component tells React all the pages that are in our website. So to

add a page to our website, we're going to use another component called route. A

route is basically a page.

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.

So inside routes, we're going to add less than route greater than. So again,

a route basically adds a page to our website.

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 the URL path of this page.

The URL path is the last part of the URL like /checkout or slash orders. So first

let's add the homepage. For the

homepage, the URL path is empty.

To set the URL path as empty, we're going to set it to slash.

And then we're going to give route a 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 go to this URL path for the homepage. We

want to display this homepage component.

So let's select it and cut.

And inside here we're going to paste.

So this tells React that when we go to the URL path slash or empty, it's going 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 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 browser.

And now if the URL path ends with slash or empty, it's going to display the homepage.

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, 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 props. the path equals double quotes.

props. the path equals double quotes.

And for the checkout page, we'll set the URL path to checkout.

This means this page will be displayed when we go to /checkout.

And we'll give it another prop element equals curly brackets.

And right now, we didn't create a component for the checkout page yet. So

let's just create a div here just to make sure that this is working. So we'll

create a div element and inside let's type test checkout page and save.

So now if we go to our project and in the URL path we're going to go to slash checkout and press enter.

It displays the div with the text that we created.

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 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

all of these pages use one HTML file which is index.html.

So this HTML is shared between all of our pages and this reduces repetition.

By the way, this is called a single page application or an SPA. This means we only have one HTML file and instead we

use React to create multiple pages.

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 Router has a prop for this called index.

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 these route components. So, we can use the self-closing element shortcut. We'll

remove the closing tag.

And at the end here, we'll add a space and a slash. And same thing here, we'll remove the closing tag.

And add a space and slash and save.

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 Router.

And in app.jsx jsx. We added some routes or some pages to our website. In

main.jsx,

we loaded the React router. So, let's

create a message to describe these changes. Create multiple

changes. Create multiple 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.

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 we'll create a new file and we'll name

this capital C checkout capital P page.jsx.

page.jsx.

And inside here, we'll create a new component using function checkout page brackets and curly brackets. and

we'll return brackets and we'll move the HTML for the checkout page in here. So, we'll go to the

starting code folder and we'll open checkout.html.

So, this is the HTML file for the checkout page.

We're going to scroll down to the body element first and we're going to move over this HTML.

So we'll click here to collapse this code and click here to collapse this code as well and we'll select all this

HTML and we'll cut and then inside checkout page inside the return we're going to paste

and let's scroll up and we'll fix these errors.

So first if we collapse these two elements remember we're returning two elements from this component which 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 you can also use this shortcut. We can

press controlshiftp on Windows or commandshiftp on Mac and this will open 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 and we can click it or press enter and it will automatically format the

code in this document and fix the indenting.

Next, if we expand these elements, remember in React, we have to use class name instead of class. To replace these,

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

going to replace it with class name equals and click replace all.

And finally the last eslint error here 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 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 using import curly brackets the checkout page

from a string and we'll import dot slash pages slashcheckout page

and we'll use it inside this route using less than checkout page slashgreater and save.

And now let's check our website.

And if we go to the path /checkout, you can see we have the HTML for the checkout page.

Now, let's add the rest of the code for the checkout page. We'll go back to VS Code 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 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,

how do we do that? Well, in React, it's actually pretty simple. We just have to 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 then we'll scroll up and open checkout page.jsx.

checkout page.jsx.

And if we want this page to have a different title, all we have to do is to paste the title at the top and save.

So, if we look at our website now, the checkout page has the title checkout in the tabs. So, we'll go back to our code.

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.

And in the homepage, let's create a title.

And we're going to set the title to ecommerce project and save.

And now we can scroll down to the index.html HTML and we can remove this title because we're going to set it using React

and save.

And now let's move the rest of the HTML in the checkout page.

If we scroll down here, these meta and link elements have already been moved to index.html.

index.html.

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 shared. So, we can remove all of this

shared. So, we can remove all of this code.

And finally, we're going to move over the CSS for this page for general.css.

for general.css.

Remember that we already copied these 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.

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.

So, we can delete this file.

Finally, let's scroll up and we're going to rename the CSS file to match the component name. So, we'll

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 we'll import the CSS file slash checkout- header.css.

header.css.

And we'll also import dot slashcheckout page.css

page.css and save.

We'll go to our website.

And now everything looks really good. So

we finished moving all the HTML and CSS for the checkout page into our React project.

Let's go back to our code and we'll save these changes into git. We'll open the git section and in app.jsx

we use the checkout page component for /checkout and then we moved over the CSS files and in here we moved over the HTML code as

well as the title. Let's type a message to describe these changes.

move checkout page into React and commit.

Before we continue moving pages, there's an issue that we need to fix. If we open the website and click the top left icon,

normally this should take us to the homepage, but now it's blank. So why is 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 created the homepage.

But now we're using routing. So we set the URL paths ourselves. In our project 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 go into our code and update all of the

links to go to the correct URL path.

We'll go back to VS Code.

And to update all of our links, we're 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.

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 or link elements.

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

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

replace this with slash. And then click here to replace all. And confirm.

And let's replace the links for the other pages as well. So up here, we'll also search for checkout.html.

And in this search result, we have a link element with the href checkout.html.

checkout.html.

And in our router, we set the URL path for the checkout page to /checkout.

So we'll replace all of these with slashcheckout and replace all.

And we'll do the same thing for the orders page, which is orders.html.

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 and replace it with slash tracking and

replace all.

And now all of our links should work correctly because they match our router.

If we open the website and at the top we change the URL path to /checkout it opens the checkout page. If we click

the top left icon this should now go to the URL path slash or empty and it will open the homepage.

So let's save this into Git. We'll open

the git section and we just updated all the links in these files to match the router.

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 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 the orders page. Inside the pages

folder, we'll create a new file and we'll name it orders page.jsx

and press enter.

And inside here we'll create a component function orders page brackets and curly brackets.

And we'll return brackets and we'll move over the HTML. So we'll

go back to the starting code folder and open orders.html.

open orders.html.

We'll start with the body. So we'll

scroll down and we can collapse these two elements and we'll select the HTML and cut

and inside the orders page inside the return we'll paste.

We'll scroll up and collapse these elements and we're going to wrap these in a fragment less than greater than and

remove this. and at the end less than

remove this. and at the end less than slashgreater than.

And to fix the indenting, we can use the shortcut control shiftp or commandshiftp and search for the command format

document and press enter.

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 class equals. Click here and replace it

class equals. Click here and replace it with class name and replace all.

And finally, at the top, we'll export this component.

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 it into the component. We'll select it, cut, and at the top in orders page,

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.

So, we can remove this.

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.

We already moved over header.css up

here. So, we just need to move the orders.css.

orders.css.

So, inside starting code, we'll go into styles/pages and we'll move this orders.css file.

So, we'll move it up here beside the orders page component.

And now we moved over everything inside orders.html.

orders.html.

So we can scroll down and delete this file.

Next, we should rename orders.css

to match the component name. So we'll

rightclick and rename orders page.css.

orders page.css.

And finally, we'll load the CSS files.

So, in orders page.jsx

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.

So, first we'll import dot slash header.css.

header.css.

And we'll also import dot slash orders page.css. CSS and save.

And now we moved over all the HTML and CSS for the orders page.

So now let's create a route for this page. We'll go to app.jsx.

page. We'll go to app.jsx.

And first at the top we're going to import curly brackets the orders page

from a string. and we'll locate dot slashpages slash orders page and then 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 this and use the self-closing element

shortcut and we'll give it two props. We'll set

the path equals double quotes and we'll put the orders page on the path slash orders and we'll give it an element to display

equals curly brackets. And for the orders page, we'll display the element less than orders page slashgrater than

and save.

And now let's view the website. We'll

open the website and on the homepage we're going to click this orders link to go to slash orders

and it displays the orders page. So that

looks pretty good. And now we finished moving the orders page into React.

So let's go back to VS Code.

And in the starting code, there's one 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.

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 orders page and we moved over the CSS and the HTML.

So we'll type the message move orders page to React and commit.

Next, we're going to separate our page into smaller components.

For example, if we look at our website, notice that on the orders page, there's this header at the top. And if we click the top left and go to the homepage, we

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 reuse it between these pages. We'll go

back to VS Code 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 is all the HTML for the header.

Let's separate this into a shared component.

Now, because this component is shared between multiple pages, we usually put shared components in a folder called components. So, inside our source

components. So, inside our source folder, we're going to click it and 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 that are specific to a page.

Inside the components folder, we'll create a new file.

And let's name it header.jsx.

And in here we'll create a component for the header using function header brackets and curly brackets. And

we'll return brackets.

And we'll move over the HTML.

So we'll open homepage.jsx JSX

and we're going to select the HTML for the header and cut inside header.jsx.

inside header.jsx.

Inside here, we're going to paste.

And we'll fix the indenting by pressing control shiftp or command shiftp and search for format document and press

enter.

And we'll scroll to the top. And lastly,

we're going to export this component to remove this error.

Next, we should also move over the CSS for the header. Now, luckily the CSS for the header has already been separated into header.css.

into header.css.

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

the top of this we can import the CSS using import a string and we'll import dot slash header.css

and save.

So now that we created this header component, we can reuse it in the homepage and the orders page. We'll open

homepage.jsx.

And at the top first, we don't need to import the header anymore. It's already

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

from a string.

And now we need to locate this file. So

currently we're inside the pages folder.

So we need to get out of this folder using dot dot slash and then go into the components folder. components slash

components folder. components slash header.

And now we'll use this component in the HTML. So down here

HTML. So down here we'll insert less than header slashgreater than and save.

So now this HTML is a bit easier to work 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 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 a string and we'll locate dot dot slash

components slash header and down here instead of this HTML we can remove this and just use the

component less than header slashgrater than this helps us reuse and save a lot of code. Let's save

of code. Let's save and then view the website.

The header looks good in the homepage.

And if we click here to go to the orders 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.

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 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 sense before when our website had

multiple HTML files. To go from one file 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, we don't have to reload every time, we can just use JavaScript to switch

between pages.

To do this, React Router provides a component called link. So, we'll go back to our code

and we'll open the header component and at the top we're going to import curly brackets

the link component from the package react-rowout.

So, the link component lets us go to another page without reloading.

To use it, we just have to replace our 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 link.

And also instead of the href attribute, 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 and in the header we have two other 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 we'll switch the href to two.

And finally, switch this to link and slashlink and switch href to two and save.

And now let's open our website to try it out.

If we click this link to go to the orders page, you'll notice it's a little bit faster because now it's using JavaScript to essentially display a

different page without reloading.

So when using React Router, we should use the link component instead of the A element because the link component lets

us go to another page without reloading.

Now let's save these changes into git.

We'll go to the git section 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 component to switch between pages.

Let's type the message 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.

So, we'll be able to display a list of products and add products to a cart and 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 Vit. We reviewed Git, which helps us

Vit. We reviewed Git, which helps us track changes in our code. We learned

routing, which lets us create multiple pages in React. We created the homepage, 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 header into a component.

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 interactive and then we'll learn how to use a backend with this project.

By the way, if something in this lesson does not work for you, you can check the troubleshooting guide in the description.

First, if we look at our website, currently we only have three products on this website, but in the final project,

we have a lot more products. So, we're

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.

We'll open our code and go to the files 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 product-container.

And we're going to click here to collapse this element. And we're going to collapse this other product container. and this other product

container. and this other product container as well.

Each product container represents one product on the page. To add more products, we could make a copy of this code and add each product manually.

However, that would be very repetitive.

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 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.

First, we need to save the data for these products in our JavaScript. To

save time, I already did this. So, if we go to our files and we go to the starting code folder and we open this data folder inside

products.js, JS I already saved the data for the products in this array. So we

can just use this as our data.

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

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 products array. So at the top we're

products array. So at the top we're going to import curly brackets the products array from a string and we're

going to locate that file. So first we need to get out of the pages and source folder using dot dot dot slash and then we'll find the starting code folder and

the data folder. starting dashcode slash data slash and the products file.

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 going to insert using curly brackets the

products array dot map and brackets. And

we're going to give map a function brackets arrow and curly brackets.

As a review, do map takes each value in an array and transforms it. In this

parameter, we get each value in this array, which is a product.

So again, a product is just this object and it has some details about the product inside.

So, we'll go back and we're going to transform this product object into this HTML.

To do that, we're just going to copy this HTML and inside map, we're going to return brackets

and paste that HTML.

And to fix the formatting, we're going to press control or commandshiftp and then search for format document

and press enter.

And let's scroll up.

And remember, whenever we loop through an array like this, we need to give each 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

key has to be unique. So looking at the data, each product has a unique ID property.

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 transforms it into this HTML.

So now let's save and we'll check the website.

And as you can see, we took each product and transformed it into some HTML.

Now, obviously, we don't want the product to be socks every time. So,

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 time, we're going to remove this. and

insert.

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 image. So instead of showing the socks

image. So instead of showing the socks image every time, we'll remove this and we'll insert the product.

Property.

Next, we'll insert the ratings. The way

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

for this one, we're going to put open curly bracket and close curly bracket around this value. And we're going to change this to a template string using

back ticks and back ticks. And then

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 brackets. So in here we're going to

brackets. So in here we're going to insert the product dot rating dot stars and then multiply it by 10. And this

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.

count.

Next, we'll insert the price. So,

instead of this price every time, we'll insert the product dot price sets. And

we usually save money in cents because many programming languages have trouble calculating decimal numbers. Now, when

we display it on the website, we want to display it as dollars. So to convert this back to dollars, we're going to

divide by 100 since $1 is equal to 100.

And that's it. We inserted the details of each product into this HTML.

This is the same technique that we used in the chatbot project, except our data is just a little more complicated. Now,

let's save and check the website.

And now we have a list of different products on the page and we generated the HTML for these products. Now there

is a small problem here which is for these socks it's showing the price 10.9 but usually for price we want to show 10.90.

To fix this, we'll go back to our code and we're going to scroll down to where we insert the price. And to force this to show two decimals, we're going to

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 capital Fixed and brackets.

So this converts the number into a string and inside these brackets we can tell it how many decimals to show. So

we'll put two and save.

Now if we check the website all the prices show two decimals. So

that's a review of how to generate the HTML using some data. Let's go back to our code.

And now that we're generating all this HTML, we can scroll to the bottom and remove this default HTML that we had

before and save.

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

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 in the chatbot project. We're going to add a backend to this project. So, first

we'll learn what a backend is and why we use a backend. So, right now, if we look at our files, notice that all the products are saved

in a file on our computer called products.js. JS.

products.js. JS.

The problem with this is an e-commerce website or an online shopping website might have thousands of products and it does not make sense to save everything

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 the store does is they set up another

computer in their office or in what we call a data center. And this computer 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 products that we need to display. So

this computer is called the backend.

It's just another computer that's owned by the company and it manages all the data.

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,

where do we save this cart? It does not make sense to save the cart on the customer's computer because if the customer uses a different computer to visit the website, they would no longer

have access to their cart. Instead, we

save the cart in the back end as well.

When they access the website, the backend sends the cart to the website.

So, the back end also lets us share data between computers.

So again, the backend is another computer that manages the data. And this

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 that in this course. We're going to learn how to add a backend and then we're going to learn how to use the

backend in React. So you can see how we use React in the real world.

Now that we learned what a backend is and why we use a backend, let's add a backend to our project. We're going to click this link in the description. Go

to lesson 7 and click this link to open the backend code.

And this is a backend that we can use with our project. I called it the e-commerce backend AI because this was built with AI. And I show you how to do

that in another video. But for this video, I recommend downloading this 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 click this code button here and we'll click download zip.

Once that finishes downloading, we're going to open the downloads folder. So,

for me, it's right here. And then we're going to unzip this. On Windows, we're going to rightclick the file and then click extract all.

And on Mac, you can just doubleclick the zip file.

Then we're going to move this back end into our project. So we'll open our code.

And then we're just going to drag this folder into our project. But first, I'm going to collapse these folders for now.

And we're going to drag this folder to the outside and click copy folder 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 the front end.

We're also going to rename this folder.

So, right click and rename.

and we'll just rename it the e-commerce backend to make it easier to understand.

Next, we're going to start this backend.

So, we're going to go to our terminal or our command line and we'll click here to create a new tab. And then in here, first we're going to change directory

into the e-commerce backend folder. So,

we'll cd ecommerce dashbackend.

So now the command line is running inside this folder and the process for starting the back end is very similar to the website or the front end. So first

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.

So, this tells us the back end is 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, and at the top, we're going to create a new tab, and we're going to go to

localhost col 3000 /s.

And the back end should send back some data.

And this is actually the data for the products.

I can also click this checkbox here to show it in an easier to read format. And

you can see this is the same products array that we were using before except this is coming from the back end. So the

way a backend works is when we access the backend using a URL, it will send back some data. So this is working.

So now let's go back to our code and we'll save these changes into git. Open

the git section and we'll use the message add ecommerce backend and commit.

Next we're going to learn data fetching.

Data fetching means to get data from the back end using our code. So, first we're going to go to our files and let's go

back to the e-commerce project. And

we're going to open our homepage, which is right here.

And we'll scroll to the top. And one way to fetch data or to get data from the back end is to use the function fetch

and brackets.

So fetch is a built-in function. It's

provided by JavaScript.

between the brackets, we're going to create a string and we're going to put the URL that we want to get data from. So, if we go back

to our browser, 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.

And in our code, we're going to paste it into fetch.

And make sure you have http col double slash in front. It doesn't show in the browser, but we need this in order for our code to work. So if we fetch data

from this URL, this should give us the products data that we saw earlier.

However, we cannot save this data in a variable like this. And that's because when we contact a backend, it takes time

for this code to reach the back end and to get a response. So this code does not finish right away. It finishes at some

point in the future. As a review, we call this asynchronous code.

Asynchronous code means code that does not finish right away. So how do we handle this situation?

fetch returns a promise and a promise lets us wait for asynchronous code to finish.

So a promise has a method called dot then and brackets and we give dot then a function brackets arrow and curly brackets.

The way this works is that this code contacts the backend to get some data 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 in the future, this is going to finish.

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.

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 it as a parameter in this inner function called response.

By the way when we contact the back end using fetch this is called a request.

When the back end responds with some data this is called a response. So this

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.

We'll save and then check our website and we'll open the tab for our website and we're going to open the console.

Rightclick inspect and the console.

And you can see that we got the response from the back end. So inside here we have some information like the URL that we accessed and a status code. 200 means

it was successful.

However, notice that we don't have the products data in this response. To get

the products data, we're going to go back to our code and this response object has a method called response.json

called response.json JSON and brackets.

So,JSON gives us the data that is attached to the response. In this case, it gives us the products data. Now, the

tricky part about this is response.json

is also asynchronous. So, again, we can't save this in a variable. Instead,

this is also a promise. So we have to use dot then again and give this another function brackets arrow and curly brackets

and then inside this inner function we have access to the data that we get from the back end. So in this case this is

the products data.

So if we console.log log the data and save and then check the console.

You'll see that the backend gave us an 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 file, but this data is coming from the back end.

Let's go back.

And that's how we fetch data or get data from the back end. We use the built-in function fetch and give it the URL of

the back end and then we use dot then to wait for a response.

Now one shortcut we can use is instead of doing dot then inside another dot 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.

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 just a shortcut that we can use with promises.

Another thing to note is the back end can also run on the same computer as the website or the front end. So right now 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 own computer. We do this during

own computer. We do this during development because it's easier. But

once this website is on the internet, the back end will be another computer.

So now let's save this code and we'll save this into git. In the get 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 we use response.json and then another.

To make this code cleaner, we're going to use an npm package called Axios.

Axios is a cleaner way to make requests to the back end. First, we're going to go to our command line and we'll open the tab for the front end. And here

we'll press Ctrl C to stop the V server.

And we're going to npm install Axios and 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.

And this is a version of Axios we're going to use. So, again, you should always use the version that you see on your page.

So, select the version on your page and copy it and then paste it in our code and press enter to install Axios.

Once that's installed, we're going to run mpm rundev to restart the vit server.

And then to use axios in our code, we're going to go to the homepage. And at the top, we're going to import axios without

curly brackets from a string axios.

And now instead of using fetch, we're going to use axios.get.

So this does the same thing as before except the data from the back end will be saved directly inside the response.

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, you'll notice it gets the same products data as before.

But if we look at our code, it's a lot cleaner because we can just get the data directly from the response. So as you can see, Axios is a cleaner way to make

requests to the back end. So now let's save this into git. In the get section, 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 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 homepage component. That means whenever

homepage component. That means whenever the homepage changes or rerenders, it will run this code again and send another request to the back end.

However, we just need to load the products once on this page. We don't

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

top, we're going to import curly brackets use effect from React.

And above this code, we're going to do use effect brackets and give this a 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 in here we'll paste.

And I'll select these lines and press tab to reformat.

By default, use effect runs this code 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 a comma and an empty array. As a review, this is called a dependency array. The

dependency array lets us control when use effect runs. If we use an empty array, that means this code will only

run once after the component is created.

And that's exactly what we need here. We

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 twice instead of once. So, this is totally normal and it's caused by using

strict mode in our app. Strict mode runs use effect twice to help us catch bugs and it only does this during development.

So now that we have the data, how do we use it in this loop down here to generate the HTML?

To do that, we need to save the products data inside the state. So at the top, we're also going to import use state

from React.

And at the top of our component, we're going to do const square bracket equals use state and brackets.

As a review, use state gives us an array with two values. The first value is the name of the data. In this case, we'll

name it the products. And then we'll type a comma. And the second value of use state is the updater function. The

updater function lets us update this 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 data capital P products.

And finally between these brackets we're 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 the back end, we're going to save it into the state.

So instead of console.log, we'll use the updater function set products. This will

save the products data into here. And

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

we don't need to import this file here anymore.

So the only thing to note is that the name of the data has to match the name that we use down here. So that this code is actually using the state.

Now let's save and we'll check the website.

And everything still works except now we're using data from the back end to generate this HTML.

We'll go back to our code and we'll save this into git. In the git section, we'll create the message use

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 cart from the back end because we need to display this quantity number up here.

To do that, we'll go back to our code and we're going to make another request to the back end to get the cart. So,

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 colhost

col 3000 slash API/cart- items. The way this works is the back end is

running on http localhost col 3000 and after this we add a URL path. Each URL

path gives us different data. For

example, the URL path/ API/proucts gives us the products data. The URL

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 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.

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.

API means application programming interface. Starting with / API makes it

interface. Starting with / API makes it clear that these URL paths are specifically for interacting with the backend.

So we already learned how to use / API/roucts.

Now we're going to learn how to use / API/cart items. And remember whenever we make a request to the back end it's going to take some

time to get a response. So we need to wait for this code to finish using then we'll give this a function and the response is going to be saved in

here.

So when we make a request to /appi/cart 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 looks like. We'll save

looks like. We'll save and we'll check the console.

And you might need to refresh. And the

back end responded with an array. And

this array represents the cart that we have on the website. So each item in the cart contains the product ID that we 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 on the page. So we'll go back to our code and first we need to save this cart

into state so we can use it to create the HTML.

At the top, we'll create another state const brackets equals use state brackets.

And this state will save the cart, comma, and the updater function set capital C cart.

And let's set the starting value of the 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 state. So instead of console.log,

the state. So instead of console.log,

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.

And remember that the quantity for the cart is inside the header. So we need to 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 the cart.

Let's save this file and we'll go into our code and go to components header.jsx

components header.jsx and then inside the header we're going to get the cart from the props. To do

that at the top, we'll type curly brackets and the cart. As a reminder, this is a shortcut for this code.

And now we're going to calculate the total quantity in this cart. So at the top, let's create a variable. Let total

quantity equals zero to start. And then

we'll loop through the cart using cart for each brackets. And we'll give it a function.

And the inner function will get one 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.

So, we're going to add that to this 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.

And instead of three every time, we're going to insert the total quantity and save.

And now if we look at our project now, it will display the total quantity using data from the back end. So now

let's go back to our code.

And if we scroll up, you might see an error here for props validation. Again,

this is an older feature of React. So,

we can disable this check by going into our files and opening eslint.config.js.

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- types colon the string off. So, make

sure it's inside this rules object. We

can save.

And now if we go back to the header, the props validation error should be gone.

So now let's save this code into git.

We'll open the git section and we'll 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 and scroll up. Notice that for each

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 type localhost 3000 every time. So, we

can actually remove these and save.

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

inside we'll add the property proxy colon another object.

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

double slash localhost colon 3000.

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 had it before, the request will automatically go to localhost 3000. So

we don't have to type it every time.

Another thing we can set up is when we load images, we also want to load them from the back end. Remember the back end 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 images colon and an object

and we'll give it the same target. So

we'll select this and copy and in here we'll paste and save.

And we need to do one more thing. We're

going to go inside index.html HTML and in the head we're going to add less than base slashgreater than and we're going

to give this an attribute href equals double quotes and a slash.

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 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.

So now when we get images, we're going to get them from the back end. And now

because we changed the vit configuration, it's a good idea to stop 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 refresh this to make sure. And

everything still looks good. So now

we'll go back to our code and we'll save these changes into git. Inside git,

we're going to type the message add server proxy config for slash API and 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 the top right and we're going to work on this page.

So, on this page, we also need the cart to generate this HTML.

So, we'll go back to our code and we'll open our files and we're going to open checkout page.jsx.

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 make sense to reload the cart whenever we switch pages. We just need to load

the cart once for the entire website. To

do that, we're going to go to the homepage and we're going to share this cart between the two pages using the technique lifting the state up. As a

review, this means we move the cart state up to an outer component. In this

case, the outer component is the app 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

here, we can share the cart between the homepage and the checkout page. So,

first, let's go into the homepage again.

We're going to select this cart and cut and go back to the app. And we're going to lift it up in here by pasting it. And

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 and save

inside app.jsx.

inside app.jsx.

Below this, we're going to paste.

And remember, we need to put this inside a use effect so that it only runs once.

So use effect brackets, give it a function, and a empty array at the end. And we're

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 need to import this code. So at the top,

we're going to import curly brackets, use state, and use effect from React.

And we'll also import axios. So at the top again, we're going to import axios from the string axios.

So now that we have the cart, we're going to share it between these two pages using a prop. So for the homepage, we'll add a prop. Cart equals curly

brackets and we'll give it the cart. And

for the checkout page as well, cart equals curly brackets. and we'll save the cart.

Let's save this file.

And we'll go into the homepage.

And at the top, we need to access the cart from the props using curly brackets, the cart, and save.

So, the code should work the same as before, except we're just getting the cart from the props. Now, let's open our website to make sure it works. We're

going to go to the homepage and refresh.

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 for the entire website instead of reloading it on every page. We'll open

the get section and we'll give it the 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.

So, first make sure that we pass the 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

going to access the cart from the props using curly brackets and the cart.

And I will use this cart to generate the HTML down here. Now inside this code, 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.

And here we're going to collapse this element. And we'll collapse this element

element. And we'll collapse this element as well.

So each of these represents a cart item on the page. So let's generate this using the cart. Above this we're going

to insert cart map brackets and we'll 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 item. And for each item we're going to

item. And for each item we're going to return brackets some HTML.

So for each cart item, we want to generate this HTML. So let's just select it and copy. And inside here, we're going to paste.

And to fix the formatting, we're going to press control or commandshiftp and run format document.

Now let's scroll up.

And remember, when we loop through an array, each element needs a key property.

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.

ID.

And now instead of showing the same product every time, we're going to insert the details from each cart item.

However, there is a problem here.

Remember that the cart looks like this.

It doesn't have any product data on it.

To fix this, we're going to go to the app component where we load the cart.

And at the end of this URL, we can add question mark expand equals product.

So this is called a query parameter. A

query parameter lets us add additional information to our request. When the

backend receives this query parameter, 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 this file and we're going to open the website and

we're going to go to the checkout page and we're going to open the console. So,

we'll rightclick inspect and inside the console we're going to open the network tab.

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 and the responses. So, by the way, requests only show up here if the

console was open before the request. So,

we may need to refresh 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 it, you may need to search for it up 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

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.

And this contains all the product details that we need for this page.

So now let's go back to our code.

And we're going to go to the checkout page.

And now instead of the socks every time, 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 item.

image and down here we're going to insert the price. Now, if we go to the homepage, remember that in the homepage, we wrote

some code here to display the price. So,

let's actually move this code into a function so we can reuse it. Inside our

files, we're going to click the source folder and we'll create a new folder and let's call it utils for utilities.

And inside the utmost folder, we'll create a new file and we'll name it money.js.

money.js.

So this file contains utilities or code that helps us work with money. So in

here, let's create a function and we'll name it format money brackets and curly brackets.

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 copy it.

And inside money.js, inside here, we'll paste it.

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 template string. And remember in

template string. And remember in template strings to insert something, we need dollar curly brackets. And now,

instead of getting the product.pricent

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 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 format. At the end, let's return this

format. At the end, let's return this value from the function. and we'll

export it so we can use it in other files and save.

So now we can go back to the homepage and at the top we're going to import curly brackets the format money function

that we just created from a string and we're going to locate the utils folder.

So, we'll go out of this folder with dot dot slash utils slashmoney.

And now we'll scroll back down and instead of this code, we're going to remove it and insert format money

brackets and we'll give it product.pric

sets and save.

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

going to import curly brackets, the format money function from a string, and we're going to locate this file. And for

me, I'll go out of this folder using dot dot slash utils/money.

Now, if you did the exercises from the previous lesson, this file might be inside a folder called checkout. In that

case, make sure you have two dot dot slash in front. And now we're going to scroll back down and we're going to replace this money

with curly brackets.

Format money brackets. And we're going to give it the cart item.

price sets and we'll replace the quantity. So, insert

quantity. So, insert cart item dot quantity and save.

And now if we go back to the website, now we are generating these cart items using data from the back end. And this

was the default HTML we had before. So

now we can go back to our code and we can scroll down and we can remove the default HTML

and save.

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 generate

HTML for the cart items and commit.

Next, we're going to generate the HTML for the delivery options. So, we'll go back to the checkout page and we'll scroll to the top of this component. And

here we'll load the delivery options 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

also need import curly brackets. Use

state and use effect to save the delivery options. So import it from

delivery options. So import it from React.

And now inside the component we'll create some state to save the delivery options const

bracket equals use state and brackets and we'll name this delivery options colon and the updater function set

delivery options 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

here we'll do use effect brackets and we'll give it a function brackets arrow and curly brackets. And at the end we'll give it a comma and an empty dependency

array so that this code only runs once on this page. And inside here we're going to call axials.get

get brackets and the URL to get the delivery options is slash API slashd delivery-options and then we're going to wait for the

response to come back using then brackets and give it a function brackets arrow and curly brackets and inside the function the response from the back end

will be saved as the response parameter.

So once we get this response, we're going to save it in the delivery options up here using set delivery options brackets

response.

Now let's save this code and we're going 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 need to refresh to make sure we get the request and we'll remove this and search

for delivery options. And we'll click 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

delivery option has the number of days 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 has a estimated delivery time. So, we

could use this delivery days to calculate this date on the front end.

But remember, it's generally the backend's job to manage the data and do these calculations.

So, if we go back to our code, this URL path also supports a query parameter called expand. So at the end

we'll add question mark expand equals and I called it estimated delivery time.

So when the back end sees this expand parameter it will calculate the estimated delivery time for us and then give it back in our response. If we save

and check the console and refresh and open the response and now you'll see that each delivery option now has an

estimated delivery time in milliseconds.

So now we'll go back to our code and we have what we need to display the date.

As you can see it's generally the backend's job to manage the data and to do the calculations. And now the front end's job is to present that data in an

easy to read way on the website.

So now let's use these delivery options to generate the HTML. We're going to click in this file and press Ctrl+F to search for code. And we'll search for

delivery dash options.

And inside here we should see an element with a class name delivery option. So

we're going to collapse this element and also collapse the other delivery options and each of these represents one delivery option on the page. So let's

generate this HTML using React. Above

this we'll insert and we'll run the code delivery options dot map brackets and give it a function brackets arrow and

curly brackets and the parameter will be each delivery option and here we're going to return brackets

some HTML for each delivery option. So

we want to return this HTML. So we can select it and copy. And inside here we'll paste.

And we can fix the formatting using control or commandshiftp and press format document.

And let's scroll up. And as always, we need a key prop whenever we're looping through an array. So we'll add key equals curly brackets. And each delivery

option has a unique ID. So we'll just set it to the delivery option ID.

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

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.

So, we're going to go to the terminal 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 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 this link in the description to get the version of day.js we're going to use.

And we'll copy that version and paste it in here and press enter to install day.js.

day.js.

And after that we're going to npm rundev to restart the server.

So the dayjs package helps us work with dates and it helps us display a date in a particular format. To use it, we're

going to scroll to the top and at the top we're going to import dayjs from the package day js.

And now we'll scroll back down or we can control F and search for delivery options.

And we'll scroll down here. And now

above this date, we're going to insert.

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 actually have inside delivery option dot

estimated delivery time ms or milliseconds.

And now that we wrapped this in dayjs we can format it into this format. So after

this bracket here, we're going to use the method dot format and brackets and give it a string. To show the time in

this format, we're going to type D four times, which is the day of the week. And then

we'll type a comma to show this comma and a space. And we'll type capital M four times to show the month and a space. and we'll

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.

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 to scroll up to the inside of this loop here,

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, we're going to set this to a default of

free shipping.

And then we're going to overwrite this if we have a price. So, below this, we're going to check if brackets the

delivery option.

Sense is greater than zero.

curly brackets. So if it is not free, we're going to overwrite this price string equals a template string

and inside we're going to insert and remember we have the format money function to display the price. So as I here we'll call format money and

brackets and we're going to give it the delivery option price sets.

And at the end we're going to add a dash and shipping.

And now we can scroll back down and instead of free shipping every time we're going to insert the price string.

Next, we're going to scroll up a bit and there's a few things that we need to replace for this input type radio element. So, this represents the

element. So, this represents the selector and there's a few special attributes that we need to replace. The

first one is the name attribute. So, the

name groups the selectors together. So,

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 them. So here instead of doing delivery

them. So here instead of doing delivery option one every time we're going to replace this with a product ID because each set of selectors should belong to

one product.

So in this code we're going to replace it using curly brackets and change this to a template string using a back tick and a back tick and

instead of one every time we're going to insert and we'll insert the product ID.

Now in this code we actually have access to the cart item from above. So inside

here we can just insert the cart item.

ID.

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 the selector to be checked every time.

Each cart item has a delivery option ID 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 check equal and insert some code. And

we're going to compare if this delivery option do ID is equal to the cart items.

Option ID.

So only the delivery option that matches 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 options. So now let's scroll down and we

options. So now let's scroll down and we can remove this default code and save

and let's check the website.

And now we're generating these delivery options and the correct ones are checked and we have the estimated delivery dates for each displayed in an easyto read format.

The last thing we need to generate is this delivery date up here. So, we'll go back to the code and we're going to scroll up

um to the cart item and we're going to find the cart item container and this delivery date here. So, this date is 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.

So inside this loop, we'll create a variable const for the selected delivery option and equals.

And to find this, we're going to get the delivery options and then use the method dot find and brackets.

And find gets a function. So brackets,

arrow, and curly brackets.

And in this inner function, it receives each delivery option. So we'll call it delivery option.

And I'll just add a new line here and select this code and press tab to format it a little bit.

So the way that find works is it's going to loop through each delivery option.

And the first function here that returns true is going to be the result. So

that's how we find something. And then

it's going to save it in this variable.

So inside here we want to return the delivery option id that is equal to the cart items

dot delivery option id. So the delivery option that matches what is inside the cart item will return true and that's going to be saved in here. And now we

can replace this date. So we'll type curly brackets and we'll use day js brackets and the selected

delivery option dot estimated delivery time ms and outside this bracket we'll use a

method dot format brackets and give it a string and to get this date format we'll

give it d four times a comma and capital M four times space and capital D.

And now we can remove this date here.

And before we run this code, there is one small problem here because remember the delivery options start out as empty.

So if they are empty, we might not find the selected delivery option. To fix

this in front of this code, we're going to check if delivery options.length

is greater than zero and type and and 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 rest of the code. So now we can save and check the website.

And now we're generating everything here using data from the back end. So let's

go back to our code and we'll save this into git. Inside the

git section, we'll type the message generate the HTML for the delivery options

and commit.

Next, if we go back to the website, we're going to generate the HTML for the payment summary here. Now, we could 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.

Remember, the backend's job is to manage the data and to do the calculations. The

front end's job is to present the data in an easy to read way. So let's go back to our code and we'll go back to the checkout page and we'll scroll to the

top and we're going to create a state for the payment summary. So here we'll type const square brackets equals use

state and brackets and we'll name this payment summary, and the updater function set payment

summary.

And as a starting value, we're going to use null because the payment summary is going to be an object. And it's a little easier to check if the object is not loaded if we set it to null at the

start.

Next, we're going to use Axios to get the payment summary from the back end.

So down here, we'll use Axios.get get

brackets and we'll give it the URL path slash API slash payment- summary and we'll use dot then to wait for a

response and give it a function and inside here we can get the response.

Once we get the response, we're going to use set payment summary brackets

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 to our website and open the console and open the network tab and we'll refresh

just in case. We can click this to remove the search and type payment and we get the payment summary. So we

can click this and you can see that in the response the back end calculated all the numbers that we need. So now we just need to present this on the page.

Let's go back and we'll press CtrlF in this file and we'll search for payment 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

we'll replace these numbers with the numbers we got from the back end. So

first we'll replace the total quantity here using curly brackets and we'll replace it with payment summary dot

total items. And here we'll replace the product cost.

I'll type a new line to make it a little easier to read. And we'll insert.

And remember for money we need to format 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.

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 format money again brackets and this one

is a shipping cost which is payment summary dot shipping cost sense.

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

payment summary dot total cost before tax cents.

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 and then down here we're going to

replace this one and insert format money brackets the payment summary dot total cost sense

and finally we only want to display this if the payment summary is loaded 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'll check if payment summary and and brackets.

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 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

select all this code up to the place order button and we'll cut

and inside here we're going to paste.

Now a problem here is that we're 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 greater than and remove this for now.

And at the end 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

now we'll format our code using control or commandshiftp and run format document and save.

And that's it. Now we're generating the 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 code and we'll save this into git. In

the git section, we're going to type the 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.

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 display the quantity. So, we need to 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 share the cart with the orders page using a prop cart equals curly brackets.

And we'll save the cart and save.

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 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 brackets and the cart.

Let's save.

and we'll open the website and we're going to go to the orders page. So,

first we'll click here to go to the homepage and then we'll click here to 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.

So, we'll go back to the orders page and 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

brackets use state and use effect from react.

And now down here first we'll create some state to save the orders using const square brackets equals use state and brackets.

And we'll call this data the orders, comma, and the updater function set orders.

And at the start, we'll set the orders to an empty array. And below this, we're going to make a request to the back end

using use effect brackets and a function brackets arrow and curly brackets. And

down here, we'll give it a empty array so that it only runs once. And inside

we're going to use axios.get

again. So brackets and the URL path for the orders is slappi/ord orders and then we'll do dot then to wait for

the response from the back end. We'll

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

we get the response, we're going to save it inside orders using set orders brackets response

data. Let's save.

data. Let's save.

And now we can check the network tab to see if we got the orders. We'll open the console.

Inside the network tab, we can refresh and remove this and search for orders.

And down here, we'll click this request and go to the response tab. And the back 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, but we also need to display some product details on the website. And again, the

backend supports an expand parameter for this URL path. So at the end here, we'll 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 and check the network tab again. And

we'll refresh.

And now inside the orders request, you'll see that each order has the product ID, but it also has the other data for the product. And this is what

we need to display on the website.

So now we'll go into our code and we're going to generate the HTML. So first

we'll press control or command F and we're going to search for order dash container which is down here. And we can collapse

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 generate this HTML.

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.

And this parameter is going to be each order.

And for each order, we're going to return some HTML.

So, we want each order to be converted into this HTML. We're going to select it and copy it inside here. We'll paste.

Press control or command shiftp and run format document.

And we'll scroll back up.

As always, we need a key prop when we're 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.

As usual, we're going to replace the values in here. Feel free to pause if you want to try it yourself first. So

for the delivery date, we're going to insert and we're going to use dayjs brackets and each order has an order dot

order time ms and outside this bracket we use dot format brackets and a string. And to

display the date, we're going to use four capital M's for the month and a capital D for the date. So now we also need to import day.js. So we'll scroll

to the top and at the top we'll import dayjs from a string dayjs.

And let's also import format money because we're going to use it later. So,

import curly brackets format money from a string dot dot slashyouutills/ money.

Now, we're going to scroll back down 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 going to insert format money brackets

and give it the order dot total cost sense.

We'll scroll down and here we're going to replace this with the order ID. So

curly brackets order ID.

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 this using React as well. So above this

we're going to use curly brackets and we're going to get the order products array and we're going to loop through it using map brackets and give it a

function and save each product and for each product we're going to return brackets some HTML.

So if we collapse this code and collapse 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 contains all of these because we're 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 paste and the one difference here is that if

we scroll up 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 less than greater than. But then we have another problem here which is remember

when we loop through an array each element that we return should have a key property and we can't add props to fragments like this. To solve this we

need to use the full fragment syntax. So

we're going to scroll to the top and for React we're going to import using comma the fragment component.

So we'll scroll back down and in here we're going to use a full fragment syntax and remove this. So this does the same

thing except now we can add a key prop to it equals curly brackets and let's set the prop to the product ID.

and we'll scroll to the bottom.

And before these brackets, remember to add the closing fragment tag.

And finally, we'll press control or commandshiftp and format document.

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 product name. And here let's also

product name. And here let's also replace the image curly brackets. Replace it with product.

curly brackets. Replace it with product.

And actually I made a mistake. I forgot

that all the product details are saved in a property called product. So let's

actually rename this to order product.

And then here we're going to do the order product dotproduct ID and the order product.product.im

order product.product.im

image and the order product.product.name.

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

and give it the order product dot estimated delivery time ms and outside

these brackets we'll do dot format brackets and a string and we'll use the format capital M four times for the

month and capital D for the date. And

then down here for the quantity, we're going to insert and the quantity is directly on the order product dot quantity

and save.

And now if we scroll down, we can also remove the rest of this default HTML and save this file. And now let's check

our website.

And everything should be working except we're generating the HTML for these orders using data from the back end. So

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

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 one file. To make our code cleaner, we

one file. To make our code cleaner, we 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 homepage.

So, inside the homepage, we're showing a grid of products. To make the code 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 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

we organize this into a folder. So,

inside here, we're going to create a new folder and we're going to call it home and press enter.

And we group all the components related to the homepage inside here. So, we'll

move the homepage.jsx.

And let's update the imports and also homepage.css

and also the products grid.

And whenever we move files, we need to make sure the imports are still correct.

So in homepage, I'm going to scroll up and we should make sure that we have two dot dot slashes in front because now we're inside an additional folder. So

that looks good to me. And we're also going to go to app.jsx

and scroll up and make sure that the homepage is now inside the home folder.

So now let's save and check our website 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 products grid into its own file. So in

here we'll create the component using export function products grid brackets and curly

brackets and we'll return some HTML 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 grid and we can collapse this element

and select all this code and copy inside the products grid. Inside here,

we can paste and press control or commandshiftp and format document.

Now, we'll scroll up and we're going to fix these errors. So first we need access to the products. So we can pass those in as a prop curly brackets

products.

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 money

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 dot dot slash utils/money and save.

And now inside the homepage at the top we're going to import our products grid.

So import curly brackets the products grid 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.

And then down here we can remove this HTML and just use our component less than products grid slashgreater than and we

need to give it the products. So we'll

create a prop products equals curly brackets and we'll give it the products.

So, as you can see, this makes the code 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 function since we're not using it anymore. Let's save

anymore. Let's save and let's open the website and make sure everything still works. So, that looks good.

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 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 to scroll down here and we can move the 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 folder called checkout.

Now, you might have already done this if you did the exercises from the previous 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.

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.

And inside app.jsx,

make sure that there is a checkout folder in front of this component. So

I'll go back to the checkout page and 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 curly brackets. and we're going to

curly brackets. and we're going to 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 and find the order summary. We can

collapse it and select this code and copy.

Inside the order summary, we'll paste and press control or command shift P and format document.

and we'll scroll to the top and we're going to need the delivery options and the cart inside here. So, we're going to get this from the props using curly

brackets, the cart, comma, and the delivery options.

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 from day js and import curly brackets

format money from a string and we'll find the utils file which is

dot dot slash dot dot slash utils slashmoney and all the errors should now be gone.

We'll save.

And inside checkout page, we can remove this code.

And we can use our new component less than order summary /grater than. And we

need to give it the cart equals curly brackets and save the cart. And we need 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 summary

from a string dot slash order summary.

And we don't need dayjs anymore.

So let's save and check the website. And everything

still works.

We'll go back and scroll down.

And next, we can also move the payment summary into its own component. Feel

free to pause the video if you want to try it yourself first. So, inside the checkout folder, we'll click here and

create a new file, payment summary.jsx,

and we'll create the component export function payment summary brackets and curly brackets. and we'll return the

curly brackets. and we'll return the HTML.

Inside the checkout page, we're going to collapse this element and select the HTML and copy inside the payment summary. We're going

to paste control or command shiftp format document and we're going to scroll back up and we're going to get the payment summary

from the props. So curly brackets 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 dot slash dot do/youutils/money

and save.

In the checkout page, we can remove this code and replace it with less than payment summary slashgreater than. And

we need to give this the payment summary equals curly brackets and save the payment summary.

And as you can see, our code is much 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 brackets the payment summary

from a string dot slashpayment summary.

And we don't need format money anymore and save.

Let's go back to the website and everything is still working.

We'll go back to our code and we're going to go inside the order summary component.

So in here the code is still a little bit too complicated. So what we can do is we can find this element with the class delivery options and we can

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,

I'm going to go to the checkout folder and create a new file and name it delivery options.jsx.

delivery options.jsx.

And we'll create a component export function delivery options brackets and curly brackets and return some HTML. And

back to the order summary. And here we can collapse this element and select it and copy.

Inside delivery options inside here we can paste. Control or command shiftp and

can paste. Control or command shiftp and format document.

And we'll scroll to the top. Here we

need to get the delivery options using the props. So curly brackets delivery

the props. So curly brackets delivery options.

And we're going to import format money.

So up here we're going to import curly brackets format money from a string dot

dot slash dot dot slash utils/money and we also need dayjs. So up here we'll

import dayjs from a string dayjs and I think we also need another thing here which is the cart item. So we're

going to get this from the props as well.

So up here we're also going to get the cart item and save.

And now in the order summary we can replace all this code with our component less than delivery options /grater than.

And we're going to give it the cart item equals curly brackets. save the cart item and give it the delivery options

equals curly brackets save the delivery options and we also need to import this. So at

the top we can import curly brackets the delivery options from a string

dot slash delivery options and save and let's check our website and make 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 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.

We can actually keep separating this into smaller components if we want. For

example, we can also have a cart item details component or a delivery date 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 just get started on it. So, here inside the pages folder, we're going to create

a new folder for the orders page. So,

orders and we're going to move this component inside here and update the imports.

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 dot slashes in front. That looks good.

And in app.jsx,

make sure that the orders page is now inside an orders folder. So we'll save this and open the website.

And we're going to click here to go to home and click here to go to orders. And

the orders page should still be working.

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 section, we'll create the message

separate into smaller components and commit.

Next, we're going to go back to our files and we're going to go to our homepage.

and we're going to review async await.

Async await is a feature of JavaScript and it lets us write asynchronous code like normal code. Right now we're using

promises which means we need to use to wait for this code to finish and then run this function with async await. We

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 going to wait for this code to finish

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 save this result in a variable. So at

the front we can save it in const response equals await this code.

And now we don't need to use dot then anymore and we can remove it.

However, in order to use a weight, we need to be inside an async function. So

in front of this function, we need to add async and space. As you can see, async8 lets us write asynchronous code

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 recommended to use async await instead

of promises when we can. However, in

React there is a small problem with using async await and use effect. As a

review, when we put async in front of a 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 code that takes some time to finish. So

that means that this entire function is going to take some time to finish.

That's why it has to return a promise.

Now the problem is the inner function in use effect should not return a promise.

It should only return nothing or a cleanup function like this. A cleanup

function is useful if we want to do some cleanup when this component is removed.

So because this inner function is now returning a promise, it's sort of breaking the rules of use effect. To

solve this, we usually create a new function inside use effect like const get home data equals and create a new

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.

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 and it will also not mess up use effect.

At the end, we just need to run this function using get home data and brackets.

So this gets the same data as before but it uses async await. So remember when using async await inside use effect we need to create a new function and then

run the function otherwise it will break the rules of use effect. So let's save and check the homepage

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 component where we get the cart. So here feel free

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 curly brackets.

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.

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 wait for this to finish. And then we're going to save the result in a variable

const response equals this result.

And now we can remove and these brackets and the code is much cleaner. Finally,

we're going to run this function fetch app data and brackets and save.

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.

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

and we'll move this code inside cut and in here paste and select these lines and press tab and we're going to turn

this into an async function so we can use await inside. So in front of this request, we're going to await.

And we're going to save it in a variable 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 might want to reuse this variable. And

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

going to save the result inside response 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.

We'll open the website. Make sure the homepage is working and then go to the 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 and that's async await. It lets us write asynchronous code like normal code. I'll

leave converting the orders page to async aait as an exercise. So now we can save this into git.

We'll give it the message convert home and checkout to async await and commit.

In the next lesson, we're going to learn data mutation, which means instead of just getting data from the back end, we'll update data in the back end, and

we'll be able to add products to our cart and create orders. And that's the end of this lesson. In this lesson, we reviewed backend, which manages the data

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

learned Axios, which is an easier way to make requests to the back end. We

learned how to generate the HTML using the data from the back end. We separated

our pages into smaller components and we learned async a weight which lets us 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 lesson.

In this lesson, we're going to learn data mutation and we're going to make the website interactive. Data mutation

means we update data in the back end. If

we open the website and I'll close some of these other tabs.

If we go to the homepage, 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 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

to our code 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 open the products grid.

And we're going to scroll down in this file to this add to cart button. The

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 curly brackets and give this a function

brackets arrow and curly brackets.

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.

Now, inside here, we're going to add the product to the cart. So, we could try to update the cart here in React, but then 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 save the cart. The advantage of using the backend is it will simplify our

React code and we can share the data in the back end. So if we access this website from another computer, we can access the updated cart using the back end.

So here to use a backend to add a product to the cart. We're just going to make another request to the back end.

We're going to go to the top and at the top we're going to import axios so that we can make another request.

and we'll scroll back down.

And when we click this button, we're 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.

So previously we used axios.get

to get data from the backend. Post is a different type of request.

Is used to create data in the back end.

In this case, we are adding a product to 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 URL path slash API/cart- items. So, notice this is the same URL

path that we used to get the cart. But

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 items. Next, we need to tell the backend which

product to add to the cart. To do that, we can give axios.post another value which is an object.

When we use post, we can also send 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 cart. First, it needs to know the

cart. First, it needs to know the product ID that we want to add. In this

case, this button is for if we scroll 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 to add this product ID to the cart. And we also need another

information which is the quantity that we want to add. For now, let's just use the quantity one. So this code will send a request to the back end telling it to

add this product to the cart with a quantity of one.

So now let's save this file and then we'll go to the website and we're going to go to this t-shirt product and we're going to click add to

cart.

And then we're going to refresh the page.

And now if we look at the cart here, we 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 t-shirt to the cart. So that's how we do 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 updating and saving the data. So, in the real world, we use the back end to

manage and update the data.

Next, notice that when we added this product to the cart, we had to refresh the page to see the new cart. It would

be better if we could just reload the cart and update the page without needing to refresh.

We'll go to our code and at the bottom, we're going to go to app.jsx.

app.jsx.

So here this code reloads the cart from the back end and it updates the state.

After it updates the state, React will update the page. So when we add a product to the cart, we just need to rerun this code and it will update the

page and then we don't have to refresh the page every time.

We're going to select this entire function and we'll cut.

And outside the use effect, we're going to paste it.

And now that it's outside the use effect, we can share this function with our components.

Now, let's actually rename this function 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 components using a prop. So we're going to scroll down here and in the homepage we're going to give it the prop load

cart equals curly brackets and we'll give it the function load cart and save.

And now if we go to the homepage at the top, we'll get load cart out of the props and then give it to the

products grid component. So remember

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

give it the load cart function and save.

And now inside the products grid at the top, we're going to get load cart out of the props. And then if we scroll

back down, after we update the cart, we're going to call the function load cart.

So this means we will update the cart in the back end and then we'll get the new cart and update the page without needing to refresh.

One other thing we have to do here is remember axios.post

remember axios.post 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 to the next line. To wait for this to

finish at the front of this code we can type await and space. And remember in order to use await we need to be inside

an async function. So we'll add async.

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.

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 consistent. So now let's save

consistent. So now let's save and we'll check the website.

And first we'll go back to the homepage.

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.

And now notice that the quantity here 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, it also updated the cart on the page without needing to refresh.

We'll go back to the homepage 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 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 the quantity selector. To do that, we're going to use a controlled input. We

learned controlled inputs when creating the text box in the chatbot project. So,

as a review, we'll scroll up and we're going to create a state to save the quantity. At the top, we're

going to import curly brackets use state from React.

And in this component, we're going to create a state const bracket equals use state and brackets.

And we're going to name the state the quantity, comma, and the updater function set quantity.

And we'll set the starting value of the quantity to one.

Then we're going to scroll down and we're going to find this select element.

So this element represents the selector 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 the quantity.

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 curly brackets.

And whenever we use an event handler like on click or on change, this function gets a parameter called event.

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, which is one of these values. To get the quantity that we selected, we can use

event.target.

event.target.

value and let's save the quantity was selected in a variable at the front. We'll create

const quantity selected equals this value.

Now one thing to be careful of is this value is going to be one of these values here and these are going to be a string.

So we need to convert it into a number.

To do that around this value, we're going to use the code capital n number open bracket and close bracket.

So this will convert the string here into a number. So now that we have the quantity that we selected, let's save it

into the state using set quantity brackets quantity selected.

So this is called a controlled input.

When we have a value and an onchange property when we change the selector, it's going to set the quantity in the state and then the new state is going to 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 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

console.log log the quantity selected to

console.log log the quantity selected to see if it works. So, we'll save and we'll go to the website

and we're going to open the console with rightclick inspect and the console. And

now on the website, we're going to click the quantity selector here and we'll select three.

And now inside the console, it displays the quantity that we selected.

However, there is a problem here. Notice

on this website when we change one 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

let's fix this. We'll go back to the code.

And if we scroll to the top, this is happening because the state here is outside of this loop. So that means

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

solve this problem, we need to move this state inside this loop so that each product has its own quantity. So, we're

going to select this code and cut.

And inside this loop, we're going to paste.

However, this code actually breaks the rules of React hooks. We can only put hooks at the top level of a component.

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 component.

So, inside the home folder, we're going to create a new file and we'll name it product.jsx.

product.jsx.

And we'll create a component for each product, which is export function product brackets and curly brackets. And

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 the code for each product. So, we'll

select it and copy.

And inside the product component, we're going to paste and then control or command shiftp format document.

We'll scroll up and we'll go back to the products grid.

And we also need to copy over the state.

So we're going to select this copy and inside product at the top we're going to paste.

And we'll fix these errors. So first we need to import use state at the top. So

import curly brackets use state from react and the product we'll get it from the props using curly brackets product.

Scroll down we'll need the format money function as well as axios and load cart. So first

we'll import curly brackets format money from a string and we'll find dot dot slash do/youutils/money.

At the top we're going to import axios from axios and we'll get the load cart function

from the props. So, comma load cart and save.

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 because this state is at the top level of this component.

We'll go back to the products grid.

And here we can remove this HTML and just use our component less than product /greater than and we need to give it the

product equals product and also the load cart function equals load cart

and we can remove this state and remember when we loop through an array we need to give it a key prop. So at the front here we'll set a key equals curly

brackets and we'll set it to the product id.

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 product component from a string and it's

right beside this file. So, we'll do dot slash product and we can remove these because they're no longer being used and save.

And since we have the key in this loop here, we can also go into the product

and remove the key in here and save.

Now, let's open the website.

And if we change one of these selectors, notice that each product can now have its own quantity.

Now that we have this quantity, when we 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 product and we're going to scroll down

to the add to cart button here. And

instead of adding a quantity of one every time, we're going to add the 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

the website and let's go to this plate product and we're going to select a quantity of three this time and we'll click add to cart.

And notice that the cart updated and it now has a quantity of eight, which is three more than before. If we open the cart

and we scroll to the bottom, we now have three of these plates in the cart. So

now the quantity selector is working.

Let's go back to the homepage.

And this time, let's try adding a product that already exists in the cart.

So, for the plate product, we're going to select the quantity of three again, and we're going to click add to cart.

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 plate product, it just increased the quantity by three for a total of six. So

if the product already exists in the cart, the backend handles this situation for us and just increases the quantity.

Remember the purpose of the backend is to manage the data. By letting the backend manage and update the data, we can simplify our React code.

Let's go back to our code and we're going to do some cleanup in this component.

First, instead of doing quantity colon quantity, we can use the shorthand property syntax and just use the quantity. It does the same thing as

quantity. It does the same thing as before.

Next, instead of putting our event handlers directly in the HTML like this, 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 we're going to scroll up.

And at the top we're going to create a function const add to cart equals and we'll paste that code.

So we usually save the function separately like this. And then we can scroll down.

We can remove this code and just use the function name add to cart. And this

makes the code easier to read. Next,

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 function as well. We'll select this code and copy and we'll scroll up

and here we're going to create another function const select quantity and make it equal and we'll paste that code and

we'll use this function below. So down

here, instead of putting this function directly in the HTML, we use the

function name select quantity and save.

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 when we click add to cart, but I'll leave this as an exercise. Now, let's

save this into Git. We'll open the git 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 to scroll up in this component and I want to explain axios.post

a little more. As a review, when we send 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

example, if we use / API/roucts, the backend gives us the products. If we

use / API/cart items, the backend gives us the cart.

In addition to the URL path, every 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 back end. So it sends two pieces of

back end. So it sends two pieces of information to the back end. The type

and the URL path.

When we did axios.post/appi/cart

post/api/cart items. This sends the type post and the URL path /api/cart items to the back end.

Now when the backend receives our request, it looks at both the type and the URL path to decide what to do.

For example, if the backend receives get and/api/cart 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 items, it will create a new cart item.

So both the type and the URL path together determine what the backend does.

In the description, I have a documentation page for my backend, and it lists all the different requests

that my backend supports. Notice that

each request has a type and a URL path.

By the way, the type is also called a HTTP method.

When working with a backend, there are 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 create some data. Put

means we want to update some data and delete means we want to delete some data.

So, Axios has a method for each type.

Axios.get Get sets the type of request to get. Axios.post

to get. Axios.post

sets the type to post. Axios.put sets

the type to put. And axios.delete

sets the type to delete. And then

between the brackets, we put the URL path.

So in our code, this sends a request to the back end with the type post and the URL path/ API/cart items. So the most

important thing to remember here is that each request has a type and a URL path and both of these determine what the backend will do.

In the rest of this lesson, we'll get more practice sending different types of requests to the backend.

Next, let's go back to the website.

And inside the checkout page for each product, we have these delivery options.

So, we're going to add the ability to update the delivery option. Because

we're updating something in the cart, we're going to practice using a put request.

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 and open our files.

and we're going to find the pages and checkout folder and we're going to open delivery options.jsx

delivery options.jsx and we'll scroll down and here each of these represents one delivery option on the page. So we're

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, 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 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 component.

So, we're going to add the on click attribute equals curly brackets. And

let's create a function for this. Above

this, we'll create a function with const 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 brackets because we know we're going to make a request to the back end to update

the delivery option.

Also, we create the function here inside of this loop because we need access to each delivery option.

So next to update the delivery option for a product, we're going to make a request to the back end. We're going to

scroll to the top and at the top we'll import axials from Axios and we'll scroll back down

and inside here according to my documentation my backend supports the request put/ API/cart items. This lets

us update the cart. For example, we can update the delivery option for a product.

So, we're going to do axios.put

brackets.

This sends a request with the type put to the back end. And we'll set the URL path to / API/cart-ite

items. And we'll add another slash. And

we're going to insert the product ID that we want to update here at the end of the URL path. So in my documentation, 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 URL. This is just a naming

the URL. This is just a naming 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 update inside the URL. So here first we're going to change this to a template

string using back ticks and then at the end we'll insert dollar curly brackets and we're going to insert the product ID that we want to update.

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 product ID.

Next, we need to tell the backend which delivery option we want to update to. To

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.

And in my documentation, this section 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.

So, we're going to give the back end the 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.

So, we'll tell the backend to update to the delivery option ID.

And after we update the delivery option, we're going to reload the cart and update the page.

So in front of this, let's wait for this to finish using await.

And remember, we created a function for reloading the cart called load cart. So

inside app.jsx,

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

load cart and save.

And then inside the checkout page at the top we're going to get load cart.

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 summary. So we're going to share it with

summary. So we're going to share it with the order summary first.

We'll scroll down to the order summary and here we're going to give it the load cart equals curly brackets load cart and

save inside the order summary at the top we're going to get from the props load cart and then we're going to

share it with the delivery options. So,

we'll scroll down to these delivery options and we'll give it the prop load cart equals curly brackets load cart and

save.

And finally, in the delivery options, we can get load cart from the props. So,

comma load cart and scroll down.

After we update the delivery option, we're going to await load cart and brackets so that we reload the cart and

update the page and we don't have to refresh to see the updates. Finally,

we're going to take this function and put it in this on click. So, update

delivery option and save.

Now let's go to the website and we'll try changing a delivery option.

And now you can see that it updates when we change the delivery option.

Now one last thing here is if we open the console, we're going to get this warning message saying we provided a check property without an onchange handler. So let's

fix this warning. We're going to go back to the code and the warning means that for an input element, if we have a checked prop, we

should also have an onchange prop. On

change lets us change the value of this input.

However, in our situation, we already use this on click up here to change the value of the input. So, we don't really need an onchange property. So in here to

get rid of that warning, we can just add an on change property equals curly brackets and give it an empty function.

And this will just make the warning go away. We'll save

away. We'll save and go back to our website.

And let's refresh.

And now if we change the delivery option and check the console, we no longer get that warning.

Next, we have another problem on this 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 delivery price.

To fix this, after we update a delivery 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

go to our code and we're going to open the checkout page and we're going to scroll up

and inside this use effect we have this code here that reloads the payment summary.

So we want to rerun this code after updating the delivery option. Now we

could separate this into a function and 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

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,

we can put values inside this array. And

whenever a value changes, it will rerun the use effect. In our situation, we can put the value cart inside this

dependency array.

And now whenever the cart changes, it 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 to update the payment summary in case the cost of the order changes.

So in React there are often multiple solutions to do something and we should try to pick the cleanest solution.

Also note that this will cause the delivery options to be reloaded which is not really necessary. So we could separate reloading the payment summary

into another use effect but I'll leave this as an exercise.

So now let's save and we'll go to our website.

And now when we update the delivery option, notice that the payment summary 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

go back to our code and open the git section.

And here we'll use a message create update delivery option feature and commit.

Next, we're going to go to our website and we're going to work on deleting an item from the cart. So, we're going to 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 our code and in our files we're going to find the

order summary component and we're going to scroll down in this component and find the delete link. If

you did the exercises, this might be inside a cart item details component.

Now, for this delete link, we're going 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 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 and I'm going to create the function inside this loop because I need access

to this cart item to delete. So in here we'll create the function const delete

cart item equals a function.

And let's make this an async function because we know we're going to make a 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 axios.

And then inside this function, my backend can receive a request called delete/appi/cart items. And this will delete a product

from the cart. So we'll do axials dodelete and brackets.

This sends a request with the type delete to the back end. For the URL path, we're going to use a template

string and we'll do / API/cart- items slash and we're going to insert the product ID in the URL. Again, this

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

this case, we need to give the backend the product ID we want to delete. So the

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

it. When my backend receives a request with the type delete and this URL path, 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 front of this, we'll type await to wait

for this code to finish. And then we're going to await load the cart and brackets.

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 to pass this function into your component using a prop.

So, now let's scroll down. And that's

all we need to delete a product from the cart and then reload and update the page. Let's save.

page. Let's save.

We'll go to the website and we're going to delete this first product.

And notice it updates the cart and it also updates the payment summary. If we

delete another product, you'll notice it 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 the quantity in the cart as an exercise.

So now let's save this into git. We'll

open the git section and then here we'll 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 add the ability to create an order. So,

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, we're going to open the payment summary component and we're going to scroll down

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 brackets. And we'll give it a function.

brackets. And we'll give it a function.

Let's call it create order.

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 name it create order equals an async

function brackets arrow and curly brackets.

Again we're going to make a request to the back end to create the order. So at

the top we're going to import axios from a string axios and in here for my back end we can send

a request with the type post and the URL path /api/orders 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 then give it the URL path slash API/

orders.

And that's all we need. Remember the

cart is already saved in the back end.

So the back end can take that cart and create an order for us.

So let's wait for this code to finish using a wait.

And after we create an order, the back 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 checkout page.

So here we get load cart from the props 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 load cart using a prop load cart equals

curly brackets load cart and save.

And then inside the payment summary at the top in the props, we'll get comma load cart.

And now after we create an order, we're going to await load cart and brackets to

reload the cart and update the page.

Finally, after we create an order, let's also redirect to the orders page so we can see our new order. To do that, React Router provides a hook that lets us

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

from React-Router.

And at the top of our component, we're going to use const

equals use navigate and brackets.

So use navigate gives us a function and this function lets us navigate to or go to another page in our app. So after we

create an order and we reload the cart, let's navigate to the orders page using navigate brackets and a string. And

we're going to navigate to slash orders.

Now, navigate is not asynchronous, so it finishes immediately and we don't need to await this code. Let's save.

And we'll go to the website and test out the place order button.

So, we could update the delivery option to get a shipping cost. And then click place order.

And now you can see that it created a new order.

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.

Once we are on the orders page, there's some code at the top of the orders page that loads the orders from the back end and updates the page. And that's how

we're able to see our newest order here.

So, that's how we create an order. I'll

leave making these add to cart buttons work as an exercise.

So now we finished all the major features of our project. We can add products to our cart. We can update the cart and we can create an order. And

you'll see that in the real world, we use a backend to manage and update all the data.

And in our React code, we just make 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 simplify our code a lot. So now let's

save this into git. Go to the git 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 lesson, we'll learn how to create automated tests in React to make sure 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 the back end. We learned different types

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 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

the dependency array of use effect to 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 another page using our code.

Thanks for watching so far. If you find this course valuable, you can support the channel by liking this video, leaving a comment, and subscribing.

You can also check out the premium version of this course where you'll get all the lessons ads free broken down into small videos, as well as additional lessons and more projects that are not

in the public React course. Currently,

the premium course contains 11 lessons, 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 questions on specific topics, get 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 ads free separated by each lesson, AI videos, backend tutorials, and more.

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 this lesson.

In this lesson, we're going to add automated tests to our app. Automated

tests means using code to test our app.

This is more efficient than manually opening the app and clicking around to test it.

To create automated tests in React, we're going to use an npm package. The

two most popular packages for automated testing are justest and vest.

We're going to use VEST because it integrates well with Vit, but just and Vest are very similar. If you learn one, you can easily learn the other. First,

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 running the front end. And we'll stop

the VIT server using C.

And we're going to npm install dash save-dev test.

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.

And we're also going to add at to give vest a specific version. So you can click this link in the description, go to lesson 9, and here you'll find the

version of Vest that we'll install. So

we'll copy that version and then paste it in here and press enter to install VEST.

Now that we installed Vest, we're ready to create our first automated test. So

there are different types of automated tests that we can create. The first type is called unit tests. A unit test means

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 and we open our utils folder and open money.js JS.

If we test a function like format money, this would be considered a unit test because it's just one piece of the code.

However, if we test something like the product component here, testing components like this are not unit tests because they use many different pieces

of code together.

So, we'll start by creating unit tests for format money.

So, we're going to go to this money.js file, and beside this file, we're going to create a new file for the tests. And

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 test.js.

test.js.

Now inside this test file at the top we'll import curly brackets it

from a string v test.

So it lets us create a test and we'll also import the format

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 give this a string.

So this creates a test and the string here is the name of the test. So this

describes what we are testing. So let's

give it a name like formats1 1999 cents as $119.99.

If we run format money with 19.99, it should give us $119.99 as the result. So this name is describing what we want to test and a

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.

And then we're going to give this a function brackets arrow and curly brackets.

And in here we're going to test if format money works correctly.

To do that, we're also going to import expect from vest. So expect lets us check if the result is correct. So in

here we're going to run expect and brackets.

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.

And then expect has different methods that we can use to check this result.

One method is called dot to b and brackets.

So in this second bracket we can put the expected result of this code. So we said 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, this check has passed. If they are not

equal, this check has failed.

And then expect is going to send this result to vest. and V test will display a summary of what passed and what failed.

So now let's run this test. We're going

to save this file and then in our command line, we're going to create a new tab for running the tests.

And first we have to be inside the e-commerce project folder. So we'll cd ecommerce dash project

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 and runs the tests inside and then it

displays the result in the command line.

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 going to use it again

and a string. And remember that we had some problems with money not showing two decimals.

So let's test if it displays two decimals and give it a function.

And now inside here we can run expect and brackets format money brackets. And let's give it

a value that might not show two decimals like 1 090.

And then we'll check if this is correct using 2 tob and brackets and a string. And the

expected result of this code should be dollar 10.90.

So we're going to check if this result is equal to this result. If we save, 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

you can see we have two tests that passed.

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.

And let's try format money brackets with a different value like 100. So we expect

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.

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 to pass in order for this test to pass.

If one of these checks fails, the entire test will fail and it will show up here.

So as a quick example, if I change this and save, one of these checks failed. So we can 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 the format money function. A best

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 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.

So above these tests, we're going to use the code describe and brackets and we'll give this a string

and this is the name of the test suite or the group of tests. So these tests are for the format money function and

we'll give it a function brackets arrow and curly brackets and we're going to move our test inside.

So we'll select it and cut and paste and save and everything still passes

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

want to test a different function inside this file, we would create another test suite and group our tests in there. So a

best practice is to always put our tests inside a test suite, even if we only have one test suite. So now let's save this into git. We're going to go to the

get section and let's use the message create unit test for format

money and commit.

Next, we'll create another type of test called an integration test. Integration

test means we test multiple units or pieces of code working together.

For example, if we look at our files and we open the product component, testing a component would be considered

an integration test. Notice this uses multiple pieces of code like the format money function and the load cart function.

So now let's create tests for this file.

Beside product.js, 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 file like this.

So, first let's actually copy the imports from our money test file because we're going to be using these again. So,

we'll copy and in here we'll paste, but this time we're going to import the

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.

And give this a function.

And inside we'll create our first integration test using it brackets and a string.

And for components, the first thing we 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 correct, the image is correct and so on.

So we'll name this test it 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 correctly? So when testing a function,

correctly? So when testing a function, 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 result. So render means to display the

result. So render means to display the component on the page. To render the component in our test, we need to add

some more npm packages. So, we're going to go to our command line and right now 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.

And now we're going to click this link in the description, go to lesson 9, and we're going to install all of these npm packages that we need. So, we're going

to select this and copy. And then in our command line, we're going to paste this command and press enter to install all these

packages.

After installing, we also need to create 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 vit.config.js

vit.config.js and click it. And we're going to create a new file and name this vtest.config.js.

vtest.config.js.

And we'll click this link in the description and go to lesson 9. We're

going to copy this setup code. So we're

going to select this and copy.

And then in here we'll paste that code and save.

And we're also going to create another file beside this.

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.

And we're going to copy this code and paste it in here and save.

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 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 to work. And this basically runs the

to work. And this basically runs the 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 methods to expect that help us test components.

Now that we have the setup, we're going to go back to our test and at the top we're going to import

curly brackets render from the package at testing- library/react.

So this renders or displays a component in a fake web page specifically for testing.

Inside our test, we're going to use the render function and brackets and we'll tell it to render the product

component using less than product slashgreater than.

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 add the prop product equals curly brackets

and we're going to provide a sample product to test with. To do that in our files we're going to go to the starting code folder and open the data folder and

open products.js.

open products.js.

And here we have a bunch of sample products that we can use. So, let's just select the first product and copy it.

And then in our test, we're going to save the sample product in a variable const product equals and

paste.

And we're going to take this product and save it as the product prop.

Next, we also need to provide a load cart function to this component. So in

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 because the backend might not be available during tests. In our tests

might accidentally update real data. So

instead, a best practice is to mock this function in our tests. Mock means to create a fake version of this function.

To create a mock at the top, we're going to import vi from vest.

And we'll scroll back down and we'll create const load cart equals vi.fn. fn

and brackets.

So vi.fn

basically creates a fake function that doesn't do anything. So, this fake function is called a mock and we're 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 mock load cart. And this will prevent

our component from accidentally contacting the back end in our tests.

And that's it. This will render the product component on a fake web page. So

now, how do we check if this component was displayed correctly? We can't see the fake web page, but we can check it using our code. To do that, we're going

to scroll up and we'll also import the screen from testing library/react.

So screen lets us check the screen or the fake web page to see if everything was rendered correctly

in our test. After we render the component, we're going to use screen and the method

get by text and brackets.

So this searches the screen or the fake 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 name is displayed correctly. So, we'll

scroll up and we're going to copy this product name.

And then in here, we're going to paste.

And this will search the screen or the fake web page for an element with this text inside.

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 page. To do that before this code, we'll

page. To do that before this code, we'll use expect and open bracket

and at the end a close bracket and we'll use the method dot to be in the document

and brackets.

So this method is added by testing library/jestdom and this checks if this element exists

on the screen or on the fake web page.

So now let's save 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 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 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 for the price on the screen. So for the

sample product, the price should be dollar10.90.

So, we'll scroll down and search for dollar 10.90 on the screen. And we

expect this dot to be in the document and brackets and save

and feed will rerun the test and tell us that this passed.

Next, let's check if the product image is correct.

So down here we'll use another expect brackets screen dot but this time we can't use 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 files we'll open the product component

and we're going to scroll down until we find the product image here.

And for this element, we're going to add an attribute data-

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 the class name to find this element, but if we change our class name, it will

break the test. To avoid this, we usually use an ID specifically for testing like this. So now let's save.

And in our test, we'll use screen dot get by test ID and brackets and a string

and the test ID product dash image. So

this will give us the image element in the product component.

Now let's check if this image element source attribute is equal to the products image up here. So we'll select

this image and copy and then down here

dot to have attribute brackets and we'll check the source attribute if it's equal to the string

and paste the image from our sample product and Save 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.

Next, let's check the ratings image and the rating count. Feel free to pause if you want to try it yourself first. So

first we'll do expect open bracket the screen dot and we'll check the ratings image first.

So, we'll go to the product component and we're going to scroll down until we find the image product rating stars and

we'll give this a data dash test id equals

product rating stars image and save.

And let's just select this test ID and copy.

And in our test, we'll get by test ID brackets a string

and paste.

And we expect this dot to have attribute brackets the source attribute equals a string.

And we'll go back to the product component.

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 paste.

Now for our sample product we have a rating of 4.5.

So that means we take 4.5 and multiply it by 10. We're going to get the value 45.

And this is the rating image that should be displayed on the page. So we'll save.

And v test tells us everything passed.

Finally, let's check the rating count.

So we'll expect brackets screen dot. And

this time we're looking for text. So we

can just use get by text brackets. And

for this sample product, the count is 87.

So we'll look for the string 87.

And we expect this to be in the document and save.

Vest will rerun and everything passed.

So now we tested if the product 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 and we'll use the message create integration test for product component

and commit.

Next we're going to test user interactions.

In the product component, we have an add to cart button. We can also test clicking this add to cart button to see if it behaves correctly.

So in our test file, let's create a new test using it brackets and a string. And

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

we'll select it to here and copy.

And then in our second test, we're going to paste.

So this sets up the sample product and 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 button in our test?

Earlier we installed a package called testing library/ user event. This

package lets us simulate events like clicking a button. So at the top of our test, we're going to scroll up and we'll

import user event from the package at testing- library/ user-event.

So this lets us simulate events like a click.

So now we'll scroll back down to our test and first we need to set up user event

using const user equals user event dot setup and brackets.

So now we can simulate events using user.click.

user.click.

So this simulates a click event and inside the brackets we're going to tell it which element to click. So we want it to click the add to cart button. So

first we need to get the add to cart button inside our test. We'll go to our files and in the product component,

let's scroll down to the add to cart button and we're going to give this a

data dash test ID equals a string add to cart button.

And let's select this test ID and copy and save.

And then in the product test, we're going to get the button using screen dot

get by test ID brackets and a string and we'll paste the test ID.

So this will get the add to cart button from the screen.

So let's save it in a variable const add to cart button equals and we're going to give this to

user.click

user.click add to cart button.

Next when we click this button it takes 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

for this to finish at the front, we're going to use await.

And remember to use await we need to be inside an async function. So above in this function, we're going to make it

async.

And we'll scroll back down.

And now once we click the add to cart button, this is going to make a request to the back end using axios.post.

But remember in our tests we should not contact a real backend because we might accidentally update real data.

So earlier we mocked load cart and replaced it with a fake function.

Now we're also going to mock axios. So

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 mock brackets

and the string axios.

So this mocks the entire axios package.

This means that when we are testing, when we import from axios, we will get a fake version of axios instead.

So when we click add to cart, it will use the fake version of Axios and it 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 axios.post

axios.post and we can test if we gave axios.post

the correct values.

To do that at the top, we're also going to import Axios from the package Axios.

And because of vi.mmock,

this is a fake version of Axios.

So now we can scroll back down and after we click add to cart, we can

expect brackets axios.post. post.

If we give a mock to expect, we can check if our code ran axios.post

and if we gave it the correct values using the method dot to have been called

with and brackets.

So we expect our code to call axios.post

with /api/cart items. So in here we'll check if the first value we gave it was slappi/cart- items

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.

So in here we can also check if we give it an object with a product ID colon and 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 and scroll back down

and create a string and paste the ID and we expect the quantity colon to be one because we did not change the

quantity selector.

So this basically checks that when we 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 called them and we gave them the correct values.

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 ran load cart. So down here we can also

expect 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.

So this just checks if our code called load cart and does not check what values we gave it. So now let's save

and v test will run our code and everything still passed. So that's how we test user interactions. We create

some mocks and then we check if our code 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 test clicking add to cart button and commit.

Before we move on, we're going to do some code cleanup. Notice that in each of our tests, we have some setup code at

the top where we create some sample data and mock load cart. So we can actually share this setup code between our tests.

To do that, we can move these two variables outside of this it function.

So we'll select this code and cut.

And outside of this function, we'll paste.

Now that these two variables are outside of this function because of scope these can be accessed anywhere inside this

outer describe function. So that means it can be accessed in both tests. So in

the second test we can just remove this setup code because now it's shared between the two tests up here.

Another recommendation is to recreate shared variables before each test because if one test modifies a variable, that change is going to carry over into

the next test which can cause bugs.

So before each test, we're going to recreate these variables.

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 brackets.

So before each runs some code before each test and also we need to import before each.

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

going to do that in here. Inside we'll

use product equals and let's just select this value and cut.

And in here we'll paste.

And because we're modifying this variable, we need to change from const to let.

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 above we can remove this

and change this to a let.

So now before each test we're going to recreate the setup code and we'll have a fresh set of variables and this will make our tests more consistent. So now

let's save.

V test will rerun our test and everything still passes.

So before each is known as a test hook.

There are other test hooks that we can use to help us do some setup or some cleanup in our tests.

So now let's save this into git. In the

get section, we'll use the message use before each to remove duplication and commit.

So, we just learned how to create mocks that don't do anything. Now, we're going to learn how to mock the implementation.

Mock the implementation means we make the mock do whatever we want. To do

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 component.

And here we're going to create a new file and name it homepage.est.jsx.

And let's just copy all the imports from the product component test because we'll use most of them. So we'll select this and copy.

And in homepage.test

we're going to paste.

And this time we'll import homepage from dot /home page.

And as always, we'll start by creating a test suite with describe.

And we'll name this homepage component and a function.

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.

Brackets, arrow, and curly brackets.

And now let's render the homepage using render bracket less than homepage slashgreater than.

And the homepage requires two props cart 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 as an empty array.

And for load cart equals curly brackets again we'll mock load cart. So above

this test we'll create let node cart and we'll use before each brackets

and a function brackets arrow and curly brackets 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 homepage component.

Next, the homepage component is special.

If we open the homepage, notice at the start, we load products from the back end using axios.get/appi/roucts.

axios.get/appi/roucts.

Again, in our test, we should not contact a real backend. So, we're going to mock Axios.

So here at the top, we'll mock Axios using vi.mmock

vi.mmock brackets and the package axios.

Now, this just makes axios.get do

nothing. However, in the homepage, we actually need axios.get get to return something because we're going to return a response and the homepage is going to

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 to make axio.get do whatever we want.

So in our test inside before each we're going to do axials.get

dot mock implementation and brackets and we're going to give this a function

brackets arrow and curly brackets.

So this means that in our code whenever we use axios.get get it's going to run this fake function instead. So basically

we can make axios.get do whatever we want. That's what mock implementation

want. That's what mock implementation means.

So remember we can give axios.get some

values. Those values are going to be saved as parameters in here. So 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.

Next inside our fake function let's check if the URL path is equal to the string /

products.

So for the URL path /api/proucts, usually the backend returns all the products in an array. But in our test, we don't really need all the products.

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 what axios.get normally returns. So

what axios.get normally returns. So

axios.get

normally returns a response with a property data. So in our test

property data. So in our test this mock implementation should also

return an object with a property data.

And normally response data is an array of products.

So in our test, our data property should also be an array.

So basically in this fake function, we should match what axios.get normally

returns. And this makes sure that the rest of the code still works with our mock.

So now in our 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 and the data and the products.js.

And here, let's just collapse the first two products and we'll select them and copy.

And inside the homepage test, we're going to paste.

So now in our test, axio.get get will return these two products.

Now there's one more thing we need to do which is remember that axios.get

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 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 async.

So remember that async makes a function return a promise.

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 mock do whatever we want.

Now let's run our tests to make sure that this works. We'll save

and v test will rerun and we actually got an error. So if we look at this error and we scroll up

to the details of the error, you'll see that we got this error here and it came from React Router. And this happens because if we look at our homepage

component, remember that the homepage also contains a header component. And if we open the components folder and the header

component, inside the header component, we have these link components.

In order for a link components to work, they need to be inside a router. In

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 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

this we just need to put a router around the homepage in our test. So, we'll go back to our test

and first we'll scroll to the top and we're going to import a router. So,

we'll import curly brackets and we're going to import the memory router from the package react-outer.

So, the memory router is specifically for testing.

So we'll scroll down and when we render the homepage, we're going to put it inside a memory router.

So less than memory router and we'll select the homepage and cut.

And in here we'll paste and we'll fix the indenting.

And now if we save the link components are inside a router.

And now our tests should pass.

Now let's check if the homepage displayed the products correctly. So

after we render this homepage because we mocked Axios to return these two sample products, there should be two products

on the page. Let's add a test ID to 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 the HTML and we're going to find the product container

and we're going to add the attribute data- test id equals a string the product dash container

and save.

And in our test, we're going to look for the test ID using screen.get

using screen.get all by test ID and brackets and the test

ID product dash container.

So we use all here because we're going to have multiple products on the page.

So we're going to get multiple product container elements.

However, there's actually a problem here.

When the homepage is first created, the products are empty. So, there will not be any products on the page. And we need to wait for the homepage to run use

effect and load the products and then update the state. So to wait for homepage to finish loading in our test, we're going to use a different method

called find all by test ID.

So find does the same thing as get, but it will wait until it finds this element.

So this is useful when our component needs to load something and we need to wait for it to load. Now, because this code is waiting until it finds these

elements, this code is asynchronous and it returns a promise. So, we're going to 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.

So now this will wait until it finds these product containers. And then let's save these in a variable using const

product containers equals this result.

And now we can check this result to see if it was displayed correctly. So down

here let's check if we have two product containers on the page. So we can expect

brackets the product containers.length

dot 2b 2.

So this gives us an array of elements and we're just checking if the length is equal to two. If we save,

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 homepage.

Next, we'll check inside each product container to see if they have the correct product name. Now, before we used screen get by text to search for

some text on the page. However, this

searches the entire page. Here we want to check specifically the first product 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 within

from testing library/react.

And we'll scroll back down.

And within lets us find things within or inside a specific element. So to find things inside the first product

container, we're going to use within brackets the product containers square bracket zero.

This gives us the first product container and we're going to search inside this container. And then here we're going to do dot get by text and

brackets.

And for the first container, we're going to search for the first product name. If

we scroll up, this is the first product name. So we'll

select it and copy.

And down here, we're going to paste.

So again, this searches inside the first product container for this text. And

I'll add a new line to make it a little 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 and just going to reformat this code a little bit and at the end close bracket

and use 2B in the document and brackets.

Now let's save 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 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.

And down here, paste.

And we'll change the zero to a one. This

gets us the second product container.

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 and scroll back down.

And here we're going to paste and save and the test passed. So now we know that the second product container is

displaying the correct product. Now we

could check all the other details of the product as an exercise. However, we

don't have to do it because remember that all the product details have already been tested in the product component test.

So instead for the homepage component, we focus on testing things that are specific to the homepage such as rendering multiple products and loading

products using Axios.

So that's how we test a more complicated component like the homepage. We need to mock the implementation of axios.get

and we may need to wrap the component inside a router. I'll leave adding more tests for the homepage as an exercise.

So now let's save to git. We'll open the git section and we'll use the message

create integration test for home page and commit.

So now whenever we make changes to our code we can run these automated tests to make sure that format money the product 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 leave that as exercises.

In the next lesson, we'll learn deploying, which means how to put our React app on the internet.

And that's the end of this lesson. In

this lesson, we learned how to create automated tests with VEST. We learned

how to create unit tests, which test one piece of the code. We learned it, expect, and describe, which lets us create a test, check the results, and

group the tests together into a test suite. We learned how to create

suite. We learned how to create integration tests, which test multiple pieces of code working together. We

learned how to test a component using render and screen. We learned how to create a mock, which is a fake version of a function or a package. And we learn

how to mock the implementation, which means we make a mock do whatever we want.

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 React app on the internet. So, there are many services we can use to deploy. In

this lesson, we're going to use AWS or Amazon Web Services. AWS is the biggest 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 for your career.

So AWS stands for Amazon Web Services.

It's a collection of services that help us put stuff on the internet. And AWS

has a free tier where we can use many of their services for free using some credits.

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.

Now, before we begin, AWS might change their website design in the future. If

you have any issues, please check this AWS troubleshooting guide here.

Now, let's get started with AWS.

We'll click this link to open AWS.

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, you can also click sign in

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 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 card, billing address, and phone number when signing up. If you're unable to provide this information, please check

the AWS troubleshooting guide in the description.

However, I still recommend at least watching this tutorial to see how AWS 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

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.

So, we just need to give it a bit of time.

Now that we created a new AWS account, one thing to note is when signing into AWS, if you see an account ID and I am here,

we're going to click this sign in with root email button.

And then here we can sign in with the email and password we created earlier.

After signing in, you can see the 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 is a collection of services that help us

put stuff on the internet. So, here we 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 search for a service. So, we're going to start with the most basic service called EC2.

And click here to open it.

EC2 stands for Elastic Compute Cloud. It

basically lets us rent a computer from AWS.

Earlier in the course, I mentioned that many websites use a backend to manage the data and the backend is another computer on the internet. Now, we could

buy a physical computer ourselves and use that as the back end, but then we have to keep this computer running 24 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 a computer from AWS and AWS will manage

the computer and keep it running 24 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 infrastructure as a service or IAS. This

means that AWS manages the infrastructure or the computers for us.

So to rent a computer in here, we can click the instances section and then click launch instance. By the way, one

instance is one EC2 computer.

However, we're not going to use this 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 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 manages the computer, there's still a lot of manual work we have to do. To

solve this problem, AWS provides another service.

At the top, we're going to search for elastic beantock and click here to open this service.

You can think of elastic beantock as a layer on top of EC2. It uses EC2 to rent a computer, but it also installs all the

software we need on this computer and it connects the computer to the internet.

So, Elastic Beantock also does all the software setup for us. All we have to do is just upload our code to elastic

beantock and it will just work. This is

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 learn more about these concepts, you can check out my backend overview video in

the description.

Now that we have an overview of AWS and some of the services we can use, let's learn how to use Elastic Beantock. Now,

Amazon might change the design of these pages in the future. If you run into any issues, make sure to check the AWS troubleshooting guide in the description.

We're going to start by creating an application. Or we can click here, click

application. Or we can click here, click environments, and create environment.

And on this page, we're going to select a web server environment. And we're

going to give a name to our application.

So let's just use e-commerce- project- react.

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 choose the technology we want to use here. For us, we're going to use NodeJS.

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.

And we'll scroll down. And here we'll choose single instance. If you see free tier allegible, pick that one.

Otherwise, just pick the single instance.

And then here we'll click next.

And here we need to create a role. A

role gives elastic beantock permission to use other services in AWS.

So in here, if you already have a role 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

click next.

And then click next.

And at the bottom, we'll click create roll.

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.

And we'll select the RO that we just created.

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 values that it gives. Click 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 we can keep this as blank. And we'll

click next.

For the networking and database 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.

And for the instance settings, we're going to scroll down and find the section called capacity.

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 drop down here. So, this lets us choose

the size of the computer that we want to rent from EC2.

So, in the description, we're going to click this link and go to lesson 10 and then follow the instructions here to

select the correct instance types.

So, now we'll scroll down and click next and we can leave monitoring and logging settings as the default. So, we'll

scroll down and click next.

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

will also install all the software that 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 to the internet.

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.

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 this URL here or click here to open this website.

And now we should see a sample NodeJS application on this page. If something

goes wrong and this doesn't work, please check the AWS troubleshooting guide in the description.

Now that we set up Elastic Beantock, we're ready to put our code on the internet. We'll go back to Elastic

internet. We'll go back to Elastic Beantock.

And our code has two parts, the back end and the front end. We put the back end on the internet first and then we put the front end. To put the back end on

the internet, we just need to upload our 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 to VS Code.

And I'll collapse this for now. And I

actually set up the e-commerce backend so that it works with elastic beantock.

So this backend has a command that will save all the code in a zip file. So

we're going to go to the command line and we're going to create a new tab.

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 into a zip file which is right here. If

I open this zip file, you'll see that it just contains all of the backend code.

So now we just need to upload this zip file to Elastic Beantock. We'll go back to the browser

and we'll click this to choose a file.

And for me, my code is on the desktop inside the React course folder inside e-commerce backend.

And if I scroll down, I'll see this 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 deploy.

So now elastic beantock will take the backend code and put it on the internet.

So we'll wait for a few minutes for this to complete.

Once that's done, we're going to click this URL again.

And now instead of the sample application, it should say index not found, which is normal. This is how I designed my back end.

Now in the URL, we're going to click up here and go to the end. We're going to enter the URL path slash API slash

products and press enter.

So this will give us the products data 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 on the internet.

Now that our back end is on the internet, let's put our front end on the internet as well. For the front end, we also need to prepare our code. So, we'll

go back to VS Code.

And I'll collapse this folder for now.

And if we look at the front-end code, notice that in here we use JSX code.

However, remember that the browser does not understand JSX. It only understands normal JavaScript. So, we need to

normal JavaScript. So, we need to 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.

And this time we'll cd into ecommerce dash project.

And vit has a command called npm run 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 saves the code in a folder called dist.

So inside here we have an index.html 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 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 one file and it also minified or compressed the code. So, it shortened

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 all the front-end code and run it. By

combining and compressing the code, it makes our website load faster. And Vit

did the same thing with the CSS.

You can see that it combined all of our CSS files together and compressed it. So

now our front end is optimized and it's ready to be put on the internet.

So now when we open a website, we need 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 then when we visit the website our browser will download this front-end

code from there.

However, notice in our current setup that we already have this backend computer that's running in elastic beantock.

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 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 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 and then drag it into the e-commerce

back end like this.

And I added some code in the e-commerce 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 in the back end and we're going to 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.

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 and open Elastic Beantock and we'll click upload and deploy.

And we'll choose a file.

And this time we'll choose the second file here and click deploy.

And we'll wait a few minutes for this to complete.

Once that's finished, we're going to click this URL again.

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.

I'll add a toaster and two plates.

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 them like usual.

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 app is now on the internet. If we go back to the homepage,

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 our front end code in the backend computer and I set up some code in the back end so that when we visit the

website using the URL path slash the 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 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

developing, the front end and the back end run on the same computer because it's easier for development.

But when we put the React app on the internet, the front-end code runs on our 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

go back to VS Code and we'll go to the e-commerce project folder which is here. So remember that

we created a disc folder and then 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 directly.

We're going to scroll down to vit.config.js.

to vit.config.js.

And in this configuration at the bottom we're going to add a property called build colon curly brackets. And in here

we'll use a property out capital D dur colon and a string.

So this tells vit where to put the dist folder.

So we want to put it inside the e-commerce backend folder. So we'll give it dot dot slash to go out of e-commerce project and then into e-commerce

dashbackend slashdist and save.

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 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 an exercise.

So now we'll save this change into git.

We'll go to the git section and we'll use the message save build

result in ecommerce dashbackend and commit.

Before we continue, I want to discuss how to deploy a react app without a backend.

So notice that so far to put a React app on the internet, we needed a backend.

But what if we don't know how to write 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 code on the internet directly.

For example, in our code here, we're 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

has React code. So to deploy this 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 and we'll cd into the chatbot-

project folder.

And if we need to, we can npm install and then npm run build.

And this will convert all the React code into normal JavaScript and save it in a disc folder again. So notice that inside

the disc folder, we actually just have normal HTML, CSS, and JavaScript code.

So this is actually just an HTML website and we can actually upload this code to 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 just upload this code to GitHub pages and it will put it on the internet. No

backend knowledge required.

To learn more, you can actually follow the same steps as my video, how to put a HTML website on the internet. However,

make sure you do the exercises in this lesson first since there's still some small configuration changes that we need to make for this to work. So, basically,

if we just have a front end, we can just upload this code directly to the 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 complicated service like AWS to put the back end and the front end on the

internet.

In the rest of this lesson, we're going to improve our AWS setup to make it more real world and professional.

So, we'll go back to the browser and we'll open AWS again. And I'm

actually going to close some of these other tabs because we don't need them.

And inside Elastic Beantock in this project, we're going to go to the configuration section.

And we're going to scroll down and find the configuration for instance traffic.

If you don't see this, you can check the AWS troubleshooting guide in the description.

So here we'll click edit.

and we're going to scroll until we find the capacity section. And here we'll look for something like environment type 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.

So what this does is it adds another 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 computer might not be enough to handle all the requests. So we can actually run

the back end on multiple computers and this load balancer will distribute the requests across these computers. This

allows our website to handle much more users.

So here we can decide how many back-end computers to run. Since we're just testing, we'll set this to a minimum of

one and a maximum of one.

And then we'll scroll down and click apply.

And now Elastic Beantock will set up a 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.

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

min is one and max is one. If it's not one, we can click edit and then scroll back down and then

change it to one. And we'll scroll down and click apply again.

So when that finishes, I'll just check it again.

And now it's one and one.

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 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 these concepts.

Next, currently all the data for our React app like the products, the cart, and the orders are saved in a database

and the database is saved in a file.

However, when we put our React app on the internet, we usually put the database on a separate computer and this lets us share the data between backend

computers.

So, inside AWS, we're going to go to the configuration again and we'll scroll down to the database

configuration and we'll click edit.

And inside the database section, we're going to scroll down and find database and we'll click enable database.

Elastic Beantock will automatically create a new computer that's running a database and it will connect this database to our back end.

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

e-commerce back end works with the database MySQL. So we're going to use

database MySQL. So we're going to use that.

And then here we're going to look at the instance class setting. So this is the size of the computer running the database.

In the description, we'll click this link, go to lesson 10, and then here we'll follow the instructions to select the correct instance class for the

database.

And finally, we'll set a password.

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 some code in my e-commerce back end to 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 and it still works. If we add something to the cart, notice that the database

still works. And if we open the orders

still works. And if we open the orders page, remember that earlier I created a new order.

And now the orders are back to the default values.

So this means that we're using the new MySQL database that we set up. And now

our AWS setup looks like this. We have a load balancer, a backend, and it 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 this default URL, which is really long.

So, now we're going to set up a domain 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.

So instead of putting this long URL in the browser, we can just type myite.com and it will open this website. So I'll

show you how to set up a domain name with AWS.

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 optional. If you already have a domain

optional. If you already have a domain name that you purchased before and you 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 name. There are many services we can use

name. There are many services we can use to purchase domain names. I use a service called namecheep for all my websites like superimple.dev.

In the description, we'll click this link, go to lesson 10, and click here to 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, part of your purchase will help support this channel. Thank you so much.

this channel. Thank you so much.

Once we're on NameCheep, we're going to search for a domain name that we want.

If you see a search box here, you can search for it. Otherwise, we can go to domains and domain name search.

and we'll scroll down here and search for a domain name. So, domain

names are unique. Once they are taken, 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 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 do stands for commercial. It's the most popular ending for domain names. Now,

you could pick another ending that you want, but be careful because some domain endings don't work with normal browsers.

If you're not sure which ending you want, I recommend using com or.net just to be safe because they are the most popular.

So now I'm going to click search to see if this domain has already been taken.

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.

And this one is available. So you might need to modify your domain name to find one that works for you.

So, we'll add this to the cart and then open the cart.

If you want to autorenew this domain name, you can click here and then we'll click confirm order.

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 internet.

Once we have a domain name, we're going to set up the domain name in AWS.

So, we'll go back to AWS and at the top we're going to search for the service route 53

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 and click create hosted zones

and then click get started.

If you don't see that, we can also click this menu here, click hosted zones

and then click create hosted zone.

A hosted zone lets us connect a domain name to our app. So currently a hosted zone costs about 1.6 6 cents per day. So

you can use it for free for a few hours.

So here we're going to enter the domain 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 zone.

And now inside here, we're going to scroll down and click create record.

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 and we're going to check alias.

And here we can select which AWS service we want to connect to.

So for us, we're using elastic beantock and we're going to choose the region. If

we go back to the tab that's running 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.

So go back to route 53 and I'll search for the region Ohio and select it. And

we should see our app here. So I'll

select that.

and then scroll down and click create records.

And finally, we need to tell NameCheep or the company that you use for your domain name to redirect to AWS.

So inside NameCheep or your domain 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 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

might take a while. So we just have to wait until the verification is complete.

And we may need to log out and log back 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, 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 servers. If you're having trouble

servers. If you're having trouble finding this in namecheep or your domain company, please check the AWS troubleshooting guide in the description.

And then in here, we're going to click this dropown and we're going to set custom DNS because we're going to use AWS for this.

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.

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 to look for the record NS or name server.

So in the NS record, we should see these four URLs here. So we just need to copy 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 here we'll paste.

And we'll go back and select the second name server.

copy and paste.

If we need to, we can add two more name servers.

And here we'll select this and copy.

And here we'll paste.

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 going to redirect to AWS and then AWS

will redirect to Elastic Beantock or to our app.

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 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 try opening a new tab.

And in here we'll type http colon double slash and our domain name.

So for me it's simon baenge.com and press enter.

And this will redirect to our app. So

now we're able to access our React app 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 secure warning here. So this means that

our website is not using encryption.

This means that any data we send to this website can be intercepted by a hacker.

To enable encryption on this website and make it secure, we need to set up an SSL certificate, which is a special file that enables encryption.

To get an SSL certificate, we can use AWS.

So, we'll go back to AWS Route 53 and then at the top we'll search for another service called certificate manager

and click here and we can request a certificate. If you

don't see it, you can also go in here and click request certificate.

We'll use the default value and click next.

And here we're going to enter our domain name. Make sure to enter your domain

name. Make sure to enter your domain name.

And we'll scroll down and make sure DNS validation is selected.

And scroll down and click request.

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 pending validation.

To do that, we can just click this create records in Route 53 button. If

you don't see this, please check the AWS troubleshooting guide.

And it should show up here. And we'll

click create records.

And we'll wait for this to finish. We

may need to refresh a few times until it says it was successful.

And now that we have an SSL certificate, we can use this in elastic beantock. So

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 edit.

And we're going to scroll down until we find this listeners section.

And here we'll click add listener.

For the port we're going to use 443.

And for the protocol we're going to use HTTPS.

HTTPS means we're going to have a secure connection to our website. And this

usually uses port 443.

And here we're going to choose the SSL certificate that we just created.

And we should be able to leave the SSL policy blank and click save.

If that didn't work, please check the AWS troubleshooting guide. So this

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.

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 and I'll create a new tab.

And in the URL, we're going to type https colon double slash. So this tells the browser to use the secure connection to our website

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 and we're using a secure connection to our website that uses encryption.

Also now if we just type our domain name in the URL without HTTPS in front and press enter

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.

And now we have a professional and realworld setup for our React app.

In this section, I'll show you how to delete everything we created in AWS.

However, I recommend to do the exercises of this lesson first to get more practice with AWS and then do this deletion.

Also, I try to keep everything we created in the free tier. The only

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 check your AWS bill. We can go to the profile and click billing and cost

management.

And now after you finish the exercises, I'll show you how to delete everything just in case. So in elastic beantock, we

can click this actions dropown and click terminate environment.

And in here we need to type the name of the environment which is here and click terminate.

Once that's finished, we can go up here and go to route 53.

And in this menu, we can go to hosted zones.

and we'll open the hosted zone.

And inside here, we're going to select the A record and the CNAME record and delete these records.

And then at the top, we can delete the hosted zone.

And in here, we'll type delete and click delete.

Once that's finished, at the top, we'll go to certificate manager.

And in this menu, we're going to click list certificates.

And we'll select the certificate and click delete.

Type delete and click delete.

You can also delete your entire account 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 this. I usually keep my account open for

this. I usually keep my account open for a while to practice with the free tier.

So now we put our React app on the internet and we created a professional 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 collection of services that help us put

stuff on the internet. We learned EC2 which lets us rent a computer from AWS and is known as infrastructure as a

service or IAS. We learned Elastic Beantock which manages EC2 and sets up all the software that we need. This is

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 internet. We learned how to deploy React

internet. We learned how to deploy React without a back end. We added a load 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, and HTTPS for our website.

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 of React, and we'll learn how to use TypeScript with React.

On the React website, there's a page that lists the updates in the new version of React. You can find a link to this page in the description.

So there's a lot of changes here and many of these changes are related to using React in a framework which is basically a layer on top of React.

For now I'm just going to go over the changes that are related to this course.

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 the head section like the title, link and meta elements directly inside our

component like this. So this lets us 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 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 title inside the head section and

this will change the text in the tab.

Before React 19, we had to use an npm package like React helmet to do this.

After React 19, we can just put these elements directly in our components. So,

it's easier.

Another change is called ref as a prop.

Earlier in this course, we learned about refs and we can use a ref to get access to an HTML element directly.

We can also give a ref to a component.

For example, if we want to get an HTML element inside this component.

Before React 19, ref was a special prop.

We can't access it inside this component. We had to use a feature

component. We had to use a feature called forward ref.

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 forward ref anymore, so it's easier.

The next change is the introduction of the React compiler. The React compiler optimizes our React code. For example,

let's say we had a component like this.

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 it will also recreate these other two components. Even though clicking the

components. Even though clicking the counter does not affect the other two components.

That's because by default, when a component updates, it will also update or recreate all the components inside.

And this may cause performance issues.

To avoid this issue before React compiler, we had to use three features.

Use memo, use callback, and memo. And

this prevents a component from being recreated unless one of the props changed.

So don't worry if you don't understand this code because after the React compiler, the compiler will just add these optimizations automatically.

And now we can just write our code as normal and we don't need to worry about use memo, use callback or memo anymore in most cases.

So again, the React compiler optimizes our React code. All we have to do is to set up the React compiler and we will

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

description, we'll click this link, go to lesson 11, and here we have the instructions for setting up the React compiler. I put the setup instructions

compiler. I put the setup instructions here because this process might change in the future, and it's not easy to update the video. So, follow the

instructions that you see on your page.

For me, the first step is to install the React compiler npm package. So, I'm

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 create a new tab. And I'll close these other tabs so that I can start fresh.

And first, I need to make sure I'm running inside e-commerce-pro.

So, cd ecommerce- project and then I'll paste the command and press enter to install the react

compiler npm package.

And then I'll go back and the next instruction is to copy this react config. So, I'll select this config and

config. So, I'll select this config and copy it.

And then I need to update vit.config.js.

js and put that react config in here. So

I'll go to the project and open vit. doconfig.js.

And at the top I see this react config.

So I'm just going to replace it and paste and save.

And that's the setup. Again, the

instructions might be different when you watch this video. So follow the instructions on your page.

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 and down here we have some instructions for checking if React compiler is working. Again, follow the instructions

working. Again, follow the instructions 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.

I'll go back to VS Code and in the command line I'll create a new tab and I'm going to go into the backend

folder using cd ecommerce-backend and run mpm rundev.

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 and the next step is to install the React DevTools Chrome extension. So

we'll click here.

So this is an extension made specifically for React. It has a bunch of features that help us with React development.

So here we're going to add this extension to our browser.

And once that's finished, I'll go back to the instructions.

And the next step is in your project, 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 in the console, we're going to click here. And we should have a new

here. And we should have a new components tab.

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

scroll down and if we look at our components, they should have a badge beside them called memo. This means that the React compiler is working and it's

optimizing our React components.

Now, let's go back and look at some more changes in the new version of React.

The next change is removed prop types and default props. So prop types were an older feature of React. It basically

lets us check the type of a prop.

For example, here we can check if the prop text is a string. If we run this app and text is not a string, it would

show a warning in the console.

So now we use a different tool called TypeScript which is better at this type of type checking. So React removed the prop types feature in favor of

TypeScript.

React also removed default props. If a

prop is undefined, this feature lets us set a default value. So now we can do this with normal JavaScript. So we don't

need this React feature anymore.

Now that we learned that propt types was replaced by TypeScript, let's learn how to set up TypeScript with React, we'll go back to VS Code.

And to set up TypeScript with React, we can use the create vit command. So in

the command line, we'll create a new tab and make sure this is running in the React course folder. And we're going to 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

click this link in the description. Go

to lesson 11.

And we'll use this version of vit. So

copy the version that you see on your page.

And here we'll paste and press enter.

If it asks to install the package, press Y and press enter.

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- project-ts

or TypeScript and press enter.

For the framework, we're going to press down and choose React.

And for the variant, we're going to choose TypeScript.

So this will create a new React project that uses TypeScript.

If we look at the code inside source, notice that it uses tsx files instead of JSX.

TSX means this code uses TypeScript while JSX means it uses JavaScript.

So now to run this project, we're going to follow the instructions that we see.

So for me, I'll cd into e-commerce dash project-ts and run npm install to install all the packages that we

need.

And then I'm going to open the tab that's running the front end. And I'll

press Ctrl C to stop the front end so we don't have any issues. And then in the TypeScript tab, we're going to run mpm

rundev to start this project.

And now we'll open this in the browser.

So I already have it open. So I'm going to go in here and open this tab and refresh.

Now we have a new React project. But

this project uses TypeScript instead of JavaScript.

And now I'll give you an intro to TypeScript.

Let's go back to our code.

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 features.

So notice that this TypeScript code is the same as JavaScript code. The syntax

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 the same way as JavaScript using const

message equals the string hello.

And then we can console.log log message.

So as you can see, TypeScript is just JavaScript.

However, TypeScript gives us some extra features on top of JavaScript. The main

feature is we can add types to our variables.

So what are types? Remember that

JavaScript has different types of values like numbers, strings, and objects.

In Typescript, we can set what type of value is inside a variable.

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.

So, this tells TypeScript that this variable contains a string.

So now below this if I type message and 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 lowercase

and brackets.

So using TypeScript our computer can give us better autocomplete suggestions.

Next, if I type message to fixed and brackets, two fixed only works with numbers.

Because TypeScript knows that this is a string, it's going to give us an error saying that too does not work on strings.

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 helps us avoid errors. In JavaScript,

there is no type checking. So if I want to put this code on my website, JavaScript will just let me do it and it will crash my website. But in

Typescript, if I want to put this code on my website, I would save this code and then in my command line, press

control C to stop the server and run npm run build.

Notice that TypeScript actually blocks us from building this code and putting it on our website because there's an error with the types.

So, as you can see, TypeScript gives us type checking, which helps us avoid a lot of these coding errors and helps us keep our code safer.

Another feature of TypeScript is type inference. Type inference means

inference. Type inference means TypeScript can figure out the type automatically.

For example, in this code, this variable obviously contains a string. So we

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 this is a string. So I can remove it and save

and the error check still works because TypeScript knows that this is a string.

Another example of type inference is up here in use state. So this count variable contains the number zero.

TypeScript will infer or figure out that count is a number.

So if we do count to two lowercase and brackets, it's going to give us an error because two lowercase only works with

strings and TypeScript figured out that this is a number. So, as you can see, TypeScript is just JavaScript, but it adds extra features like type checking

and type inference to our code, and this helps us find and avoid errors. So, now

let's save this code. And we'll save these changes into git. In the git section at the top, we're going to use the

message create new React TypeScript project and press commit.

So, we just learned how to create a new React project that uses TypeScript.

Now, let's learn how to convert an existing project, like our e-commerce project, to Typescript. To do that, we're just going to move all of our

changes over to the new TypeScript project.

Before we begin, if you have any issues during this process, please check the troubleshooting guide in the description since things might change depending on

the version of VIT.

To make this easier in the e-commerce 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, and we'll collapse these folders and click the outside and rightclick and

paste.

So, this just helps us keep track of 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.

So, we're going to take the public folder and we're going to drag it to the TypeScript project and click move

and click replace.

Next, let's go into the source folder and we're going to move our changes over one by one. So, first in the assets folder, we didn't make any changes to this

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 from a default TypeScript project and then only move our changes over to the

new project.

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 TypeScript project inside the source folder

and click move.

And if it asks to update the imports, we're going to click no because we're going to move everything over.

Next, we're going to go back up and the pages folder is new. So, we're going to drag this folder into the TypeScript project inside source

and click move and update the imports. Click no.

Next, we'll scroll up and the utils folder is new. So, we're going to select this folder and drag it into the TypeScript folder inside source. So,

move and click no.

And next, we'll keep going one by one.

For app.css,

we made it empty. So, we're going to move this over. So, drag it into source.

Click move and click replace and scroll back up for app.jsx.

We made a bunch of changes in here. So,

we're going to move this over. So, drag

it into source and click move.

However, notice in the TypeScript project, the file is called app.tsx.

So, we're going to replace this code 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 it to tsx.

Now, we'll scroll back up and continue moving our changes.

So index.css

we completely changed this file. So,

we're going to move it into the TypeScript project into source.

Click move and click replace and scroll back up. And finally, in main.jsx,

main.jsx, we just added the router. So, let's move this file as well. We'll select it and drag it into source

and move.

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 main.tsx,

main.tsx, and press enter.

Update the imports. Select no.

We'll scroll back up and we moved all of 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 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 ignore, we didn't make any changes to this file, so we don't need to move it

over and we can delete it.

In eslint.config.js,

we added one change to this file at the bottom, which is we added this rule to disable prop types. So we'll select this

code and copy.

And in the TypeScript project, we're going to open eslint.config.

And at the bottom in this rules object, we're going to paste and move that change over and save.

So again, we don't want to move all of our code over. We just want to move the changes over because a lot of this code is specific to TypeScript.

So, we'll scroll back up here and we can delete this file because we moved it over.

Next, let's keep going in here. For

index.html, we changed a few parts of this code. So,

we're going to move these changes over to help us compare this code with the TypeScript version. I'm going to scroll

TypeScript version. I'm going to scroll down and take this index.html HTML and then move it at the bottom here so that I can

compare these side by side.

So first the first three lines here we did not make any changes so we can skip them.

And then here the next three lines we 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.

And here we also deleted the title. So

in the TypeScript version, we're also going to delete the title.

And here we added a font called Roboto.

So we're going to move this change by selecting it and copy.

And in here we'll paste the font. And if

we need to fix the formatting, we can 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 make any changes. So now we moved all the changes over. I'm going to save this file and close this for now.

And then in the copy, we can delete index.html.

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,

we can just delete this file and I'll scroll back up and we'll move over package.json.

In this file, we didn't change anything at the top, but we did add some dependencies and dev dependencies. So,

we're going to move these over. We'll

select the dependencies and copy.

And then in the TypeScript project, open package.json.

package.json.

And in these dependencies, we'll type comma and paste.

And then we'll remove any duplicates.

So, we'll remove React and React DOM and save.

And we'll scroll back up and open package.json.

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 and copy.

And in the TypeScript project package.json JSON in the dev

package.json JSON in the dev dependencies at the bottom we'll type comma and paste

and we'll remove all these duplicates.

So I'll remove eslint and I'll remove these duplicates and these duplicates

and these duplicates and remove this until there are no more duplicates remaining.

And now we'll save.

And then we're going to run npm install 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 project and we'll run npm install.

And now we can scroll up and delete package.json.

package.json.

And we'll keep going for readme.md. We

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 project.

And we'll scroll up and we're going to move over vit.config.js.

So in here we added a bunch of configurations.

So in the TypeScript project we're going to drag vit.config.ts ts at the bottom

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 config. So, we're going to select this

config. So, we're going to select this React config and copy and then select this code, remove it,

and paste.

And we'll keep going. So, all of these configs are new. So, we can just select this code and then copy.

And inside the TypeScript version, we're going to paste and save.

So, now we moved all of our changes over to the new project. And we can delete this file.

And I'll close this for now.

And finally, vtest.config.js.

JS is new. So, we can drag it into the project.

And now we moved all of our changes over 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 fix the errors. First, we'll open main.tsx.

main.tsx.

And in here, instead of importing from app.jsx,

app.jsx, the file is now app.tsx.

So we're going to update that.

Also, we have an error here. So this

code tries to get an element from the page using the ID root. However, this

element might not exist. So TypeScript

gives us an error telling us this value might be null. However, if we check our index.html

and scroll down, we have an element here with the ID of root. So, we know that this element definitely exists.

In main.tsx,

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.

So this tells Typescript that this value 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

reason we get these errors is because these files are still.jsx

files or JavaScript files. So, we could rename all of our files totsx, but then Typescript will start doing type checking in these files and we may

get a bunch of errors.

Instead, in our files, we can scroll down to tsconfig.app.json.

tsconfig.app.json.

And inside here, we're going to add a setting double quotes allow capital J S

colon true and comma and save.

So this setting lets us mix TypeScript and JavaScript files in our project. So

now in app.tsx, tsx.

Our TypeScript code can also import from 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 to TypeScript, one file at a time.

Now that we fixed the errors, let's run this project again to see if our 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 we're going to npm rundev and press enter.

And now if we open this URL in the browser and refresh and now you can see that our e-commerce

project is working with TypeScript. If

we try some of the features like add to 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 in the description.

Now, let's go back to our code and let's rename our folders so that we use TypeScript by default. We're going

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 for JavaScript.

And then we're going to rename e-commerce project-ts to e-commerce project.

So now by default our project will be using TypeScript.

And just to make sure, we're going to go 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 tabs. And then we'll reopen the command

tabs. And then we'll reopen the command line using the terminal menu and new terminal.

And we're going to restart the back end using cd ecommerce-backend mpm rundev and create a new tab

and we'll run the front end cd ecommerce- project and npm rundev.

And in the browser, we'll refresh and our TypeScript project still works.

We'll go to VS Code. And finally, we're 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 version or the React basics folder. So,

let's click outside and we'll click here to create a new folder. and let's call it old dash projects.

And then we'll drag the JavaScript version into here.

And we'll move React Basics into here.

So now our folders are a little bit more organized.

So now let's save this into Git. We'll

open the git section and at the top 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 into our files and in the project, we're going to go to

source the utils folder and we're going to look at money.js.

Currently, this is a JavaScript file.

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 and rename.

And we'll rename it to money.t. ts or

typescript.

So this converts the file into typescript and now it will enable type checking and now we will get an error here.

So this error says amount sent implicitly has an any type. So what this means is that earlier we learned the feature type inference which means

typescript can figure out the type automatically.

However, in this situation, TypeScript does not have enough information to figure out the type of amount sets. So,

we have to set the type manually.

To set the type of a parameter after this parameter, we're going to type 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 type number and save.

And now that TypeScript knows what type of value this is, the error will go away. And now we successfully converted

away. And now we successfully converted this file to TypeScript.

Let's do another example. We're going to go to the components folder and we're going to convert header.jsx into

TypeScript. So we're going to rename this file to header.tsx.

to header.tsx.

So tsx is just a TypeScript file, but 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.

So now this converts the file to TypeScript and it enables type checking and we get some errors here.

If we look at this error, we get a similar error. Cart implicitly

has an any type. So again, this means that TypeScript does not have enough information to figure out the type of cart automatically. So we have to set

cart automatically. So we have to set the type manually.

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 this code is actually a shortcut for this code. This is called the

this code. This is called the dstructuring shortcut.

So this whole thing is the parameter.

So we need to add the type here after the parameter.

So this code is a shortcut for props which is an object. To tell Typescript that this is an object here we're going

to type curly brackets and then inside here we can also tell 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

remember that the cart is an array like this.

So we're also going to tell Typescript that this cart is an array using colon and square bracket semicolon.

So again, this code tells Typescript that this value is an object with a property called cart and the cart is an array.

Next, we can also tell Typescript what is inside this array. In front of the array, we can type curly brackets to tell Typescript that this is an array of

objects.

And inside this object, we can also tell 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 ID is a string. So we can tell that to

TypeScript using colon string semicolon and each object also has a quantity and this is a number. So we can tell that to

Typescript using colon number semicolon and each object has a delivery option ID

which is a string. So colon string semicolon.

So using this code we can tell 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 three properties.

So now TypeScript can actually look at the rest of our code and check if each value in the array has a quantity and if we accidentally misspell quantity

here like this. TypeScript can use this type here to check if we made a mistake.

So this helps us avoid a lot of mistakes 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 directly in the code like this is a little hard to read. So, we can actually

take this type and then save it separately.

above this component we can use type space and then give this a name.

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 we're going to move this type up here.

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 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 code. For example, down here, we can

code. For example, down here, we can just use this type header props and it will substitute this type into

our code just like a variable.

And now our code is much cleaner. So

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.

So now let's save and we'll save these changes into git.

In the git section at the top we'll use the message convert

money utils and header to type script and commit.

Finally, we're going to learn how to use 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.

The easiest way to get started with AI is to use GitHub Copilot, which is built into VS Code. Before we begin, AI tools

are changing very quickly. If something

in this section is not working, you can check the troubleshooting guide in the description.

To set up GitHub Copilot, we're going to install the GitHub Copilot extension.

So, in the extension section, we need to 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 GitHub Copilot

and install this extension.

Once we have that installed, we're going to click this C-pilot icon 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

you don't have a GitHub account, you can create one by clicking here or going to github.com.

github.com.

So, I'm going to log into my GitHub account and then I'll click continue and I'll click here to go back to VS Code.

Once we finish the setup, we can start using some features of AI. The first

feature is autocomplete.

So, let's say that we're in the header and we'll close this window for now.

And let's scroll down to the HTML and we're going to go to the right section.

Let's say that inside the header, we want to add a link to a login page. So

here we can just start typing in this code and the AI will give us some autocomplete suggestions. To accept

autocomplete suggestions. To accept these suggestions, we can press tab.

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

press tab.

And this creates the closing tag for the link.

So you notice that the autocomplete is very smart because the AI can read and understand the rest of our code and it can suggest code that follows the same

patterns as the rest of our code. For

example, here it creates a link element and it gave it a class name that is similar to the other class names.

However, when using AI, we may need to go in and modify things to make sure we get exactly what we want. So, here the AI created a link to the homepage, but

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.

And I can also change the text to login.

And I'll change this to login. And I

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.

So using AI, I'm able to write this code a lot faster.

Another feature of AI is we can give the AI instructions.

For example, let's remove this code for now.

And we can click this copilot icon.

and it will open this chat window. And

inside here we can just tell the AI what we want to do. For example, in here we

can say in the header add a link to the login page and make

sure in this dropdown you have agent or edit selected and we'll press enter.

and the AI will make edits to our code.

So here you can see that it added a login link like before. So we can press keep to keep these changes or undo if we

don't like these changes. So this looks good to me. So I'm going to press keep.

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 this before the orders. So I can just

select this code and cut and at the top paste that code.

So, as you can see, by using AI, we can write React code faster. But you'll

notice that we still need to understand the code to check if it's what we want and to modify the code if we need to.

So, it's important to learn how to code 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 these changes because this was just an example.

And that's the end of this lesson. In

this lesson, we learned some of the updates in the new version of React. We

learned how to set up the React compiler 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 intro to TypeScript and learned basic features like type checking and type

inference. We converted our e-commerce

inference. We converted our e-commerce project to TypeScript.

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

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 premium version of this course where I will be adding extra lessons and projects in the future. Currently, the

premium version has 11 lessons, but I'll be adding more lessons in the future.

You can also check out the membership for extra content on AI and backend.

As the next step after learning React, I recommend moving to the back end and learning the command line and NodeJS.

I'll be putting my work in progress on these technologies inside the membership first, so be on the lookout for that.

Thanks so much for watching and taking this course with me and I'll see you in the next one.