YouTubeToText.net

Get Transcript Transcript Collection

Chrome Extension Contact

YouTube TranscriptPreparing your results…

Hang tight while we fetch the video data and transcripts. This only takes a moment.

Connecting to YouTube player…

Fetching transcript data…

We’ll display the transcript, summary, and all view options as soon as everything loads.

Next steps

Loading transcript tools…

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

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

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

Share:

Video Transcript

Video Summary

Summary Requirements

Core Theme

This comprehensive React course covers building complex websites from the ground up, starting with fundamental concepts and progressing to advanced features like backend integration, deployment, TypeScript, and AI. The course emphasizes practical application through two major projects: a chatbot and an e-commerce platform, equipping learners with the skills to create dynamic and interactive web applications.

Mind Map

Click to expand

Click to explore the full interactive mind map • Zoom, pan, and navigate

Welcome to the React full course. In

this course, we'll learn how to build

complex websites with React. And by the

end of this course, we'll build two

projects, a chatbot and an e-commerce project.

project.

We'll start from the very basics of

React like how to set up React with

JavaScript and we'll learn each feature

in detail step by step. We'll learn the

major features of React as well as

advanced features like how to use React

with a backend, deploy React to the

internet with AWS,

React with TypeScript, and React with AI.

AI.

You can find the sections of this course

below the video here and here.

You can also change the speed of the

And you can find subtitles for different

And after each lesson, I'll give you a

bunch of exercises that you can do on

your own to practice the skills that we

learned. In total, this course has over

125 exercises.

So, with that being said, let's get started.

I'm going to be doing this course on

Windows, but the steps are the same if

you're using a Mac. Before we begin,

we're going to need two pieces of

software. Number one is a web browser,

and number two is a code editor. The

most popular web browser for web

development is Google Chrome and the

most popular code editor for web

development is VS Code. So I recommend

using these. If you need to install

these, you can search for them on Google.

Google.

Click the link and follow the

Now you'll also need to know the basics

of JavaScript.

React is built on JavaScript and we're

going to be writing a lot of JavaScript

when using React. Don't worry, you don't

need to be an expert in JavaScript. You

just need to know some basic features

like the ones listed here. And I'll also

try to review JavaScript features as we

go through this course. If you want to

learn JavaScript in more detail, you can

check out my JavaScript full course in

the video description.

Finally, you'll need to know the basics

of HTML.

When using React, we're going to be

writing a lot of HTML.

Again, don't worry. You don't need to be

an expert in HTML. You just need to know

some basic features like the ones listed

here. And I'll try my best to review

HTML features as we go through this course.

course.

If you want to learn HTML in more

detail, you can check out my HTML and

CSS full course in the video description.

description.

If you have any issues in this course,

you can check the troubleshooting guide

in the description.

Now that we have all the requirements

that we need, we're ready to learn React.

On our computer, we're going to go to

our desktop and we're going to create a

new folder. So here I'm going to

rightclick and create a new folder.

And this folder is going to contain all

the code that we write in this course.

So let's name it react dashc course and

press enter.

Next we're going to open this folder in

our code editor VS Code. So, we'll open

VS Code

and then click File,

Open Folder

and select the folder we just created.

So, I created my folder on the desktop

and it's this folder right here. So,

we'll select this folder and then click

select folder

and we can close this welcome page.

So, now let's create a new file to learn

React. So up here, we're going to create

a new file and we're going to name it react-basics.html

and press enter.

As a review, a file that ends inh

contains HTML code and this creates a website.

website.

Next, we're going to create a website

and we're going to set up React on this

website. Now, to save time, we're

actually going to download some starting code.

code.

So, we're going to open our web browser,

Google Chrome.

And at the top, we're going to type

super simple.dev/react-basics [Music]

[Music]

and press enter.

So, this page has some starting HTML

code we can use to learn React. So now

let's click on this page and we're going

to select all this code by pressing

control A on Windows or command A on Mac

and we're going to copy paste this code

into our file. So we'll right click

copy. We can also press control C on

Windows or command C on Mac

and then open our code editor and then

inside this HTML file we're going to

rightclick and paste. We can also press

control +VV on Windows or commandV on Mac.

And finally let's save this file by

pressing control S on Windows or command

Next, we're going to open this file in

our web browser to see what the website

looks like. To make this easier, we're

going to use a VS Code extension called

Live Server. So, the benefit of live

server is it will automatically refresh

the web page whenever we change some

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

easier.

If you don't have live server installed,

you can click the extension section and

then search for live server at the top

Once liveer is installed, we're going to

go back to our code and we're going to

open this file in live server by

rightclicking in the file and click open

So live server will open the HTML file

using our browser and it's going to

create a website and we should see the

message welcome to super simple dev

react course on this website.

So this message is displayed by React

and this means that we successfully set

up React on this website.

Now, let's go back to VS Code.

And this is the minimum amount of code

that we need to set up React. We're

going to go through this code step by

step to make sure that you understand

everything here.

First of all, what is React? React is an

external library that helps us create

websites easier. Now, there are two

parts to this statement. Number one,

React is an external library. And number

two, React helps us create websites

easier. Let's go through these one by

one. So number one, React is an external

library. First, let's review what an

external library is. So here we have a

bunch of HTML code. An HTML code creates

a website. And now, how do we load

JavaScript onto our website? There are

several ways to load JavaScript on a

website. One way is to use an HTML

element called a script element.

For example, under this div element,

let's create a script element using less

than script greater than and less

than/cript greater than. But our code

editor might autocomplete this for us.

Now, inside this script element, we can

write some JavaScript code. For example, console.log

console.log

the string hello.

As a review, this code displays the text

hello in the console. So now let's save

and we're going to open the console in

our browser. So we'll open Google Chrome

and Liveer is going to automatically

refresh the page and run that JavaScript

code. And now we're going to check the

console by right-clicking and then click inspect

inspect

and open the console tab.

And you'll see that inside the console

we displayed the text hello. And that's

exactly what this code does. So we

successfully loaded this code onto our website.

website.

We'll go back to VS Code. So this is one

way to run JavaScript code on a website.

First, we create a script element and

then we put our JavaScript code inside.

Another way to run JavaScript is to save

our JavaScript code in a file. So on the

left, let's create a new file

and press enter.

So when we end a file with js, this file

contains JavaScript code. So now let's

move that code into this file. So we'll

go to our HTML file. We're going to

select this code and then rightclick

cut. We can also press controlX on

And inside our JavaScript file, we're

going to rightclick and paste

and save this file.

Now to run the code inside this file,

we're going to go back to our HTML

and we're going to add an HTML attribute

to this script element. So after this

script, we're going to type space and

then type src equals double quotes. So

the src attribute lets us load

JavaScript from a file.

Inside these double quotes, we're going

to tell the computer which JavaScript

file to load. So we'll type react-basics.js.

So this will look for a file called react-basics.js

react-basics.js

beside the current HTML file. So it's

going to find the file here, and it's

going to run all the code inside this

file. So now let's save

and open our browser and check the result.

result.

Live server will automatically refresh

the page. And inside the console you can

see that we display the message hello.

So we're successfully loading code from

inside a file.

We'll go back to VS Code.

And this is a second way to load

JavaScript. We save our JavaScript in a

file and then we load it from the file.

Next, the script element can actually

load code from anywhere on the internet,

not just on our computer. For example,

we're going to open Google Chrome. And

then we're going to create a new tab.

And at the top we're going to type unpkg.com/sups

dash library.js

So on this website we have some

JavaScript code. So this is just normal

JavaScript code. it displays a message.

This is an external library inside the

console. So using the script element, we

can actually take this code from this

website and run it on our own website.

To do that, we're going to open VS Code

and inside the src attribute, instead of

loading the JavaScript code from a file,

we're going to load the JavaScript code

from a website. So, first we need the

URL of the website. So, we'll go back to

Google Chrome and at the top this is a

URL and we're going to copy

and VS Code we're going to remove this

file and we're going to paste the URL.

And now let's save.

So now let's go back to our website and

we're going to go to the tab for our website.

website.

And we're going to check the console.

And inside the console, you can see we

displayed the message, this is an

external library.

So we successfully loaded JavaScript

code from another website.

Let's go back to VS Code.

So using the script element, we can load

JavaScript code from anywhere on the

internet. So this code is called an

external library. An external library is

just code that is outside of our

computer. It's code that someone else

wrote and we can load that code into our

website using the script element.

Now, React is an external library. So,

React is just a bunch of code that is

outside our computer that someone else

wrote and we can load this code on our

website and use it.

So inside our starting file at the

bottom here, these two script elements

load the React external library. So

loads React.js

and React-dom.js.

So let's open these URLs in our browser

and take a look. So we're going to

select this URL and we're going to copy.

And inside Google Chrome, we're going to

create a new tab. And at the top, we're

going to paste the URL and press enter.

And on this website, you can see that we

have a bunch of JavaScript code. So,

this is the code for React. We're just

taking all of this code and then loading

it onto our website.

Let's go back to VS Code. And the same

thing applies to this second URL. If we

select it and then copy

and in our browser create a new tab and

then at the top paste

and press enter.

You can see that this website also has a

bunch of JavaScript code

and this is also the code for React. So,

as you can see, React is an external

library. It's just a bunch of code that

is outside of our computer that someone

else wrote. And we can load this code on

our website and use it.

Now, before we move on, there's two

things you might be wondering about.

Number one, why are we loading React

from Super Simple Dev instead of some

official React URL? So, this just lets

me control the version of React. If we

loaded React from the official URL, you

might get a different version of React

than the one I'm using in this video,

which might cause issues. So, for the

video, we're going to use a super simple

dev URL to make sure that we have the

same version of React and you're able to

follow along.

The second thing you might be wondering

is why are there two external libraries

for React React and React DOM. So React

is designed to be used in different

places like websites and also mobile

apps. So the creators of React decided

to divide it into two external

libraries. React which contains all the

shared features that are used in both

websites and mobile apps and React DOM

which contain features that are specific

to websites. So if we're using React to

create websites, we need to load the

React external library and the React DOM

external library. If we were using React

to create mobile apps, we would load the

React external library and a different

library called React Native.

In this course, we're going to use React

to create websites. So, we're going to

Okay, so we learned that React is an

external library. It's just a bunch of

code that is outside of our computer and

we're going to load it onto our website.

The next part is React helps us create

websites easier. So now let's learn how

to use React.

and we're going to scroll down and these

two lines of JavaScript at the bottom

sets up React. So let's go through this

step by step. In the first line, we're

using document.query query selector to

get an HTML element from the website and

put it into our JavaScript. As a review,

this is a feature of JavaScript called

the DOM or the document object model.

Basically, JavaScript gives us this

document object which sort of combines

JavaScript and HTML together. It lets us

get HTML elements from the page and put

them into our JavaScript and it also

lets our JavaScript modify HTML elements

on the page. So the DOM or the document

object sort of combines HTML and

JavaScript together and it lets the two

languages interact with each other.

Don't worry, you don't need to know a

lot about the DOM to learn React. I'm

just explaining what this code does so

you understand what's going on here.

So the code document.query selector lets

us get an HTML element from the page and

put it into our JavaScript.

Inside these brackets, we tell the

computer which HTML element we want to

get from the page. So if we start with a

dot, this means we're going to look for

a class. And here we're looking for the

class js-container.

Up here, this div element has the class js-container.

js-container.

So, it's going to take this element and

put it into our JavaScript. And finally,

we're going to save it inside a variable

so we can use it later.

Next, let's go to the second line of

code and react.create

routt basically sets up React

To set up React, we have to give it an

HTML element. So, we're going to give it

the element that we saved up here, which

is this div element. So, basically the

way this works is that this element is

going to act as a container.

Everything that we create with React is

going to be displayed inside this

element or inside this container. The

reason React uses a container is because

it keeps things organized.

Everything inside this element will be

controlled by React and React will not

affect anything outside of this element.

So it keeps things isolated and organized.

organized.

So after we set up React with a

container, we can start using the

One feature of React is render. Render

means to display something. So render

lets us display something inside this

container or inside this element. Now

between the brackets of render, we're

going to tell React what to display

inside the container. So right now we

told it to display the text welcome to

super simple dev react course. And if we

go back to our website and open the tab

for our website

and after we open the console, this time

we're going to go to the elements tab.

So this lets us see the HTML that's

currently on the page. We're going to

open this body element and inside we can

see our container and you can see that

React rendered or displayed the message

welcome to super simple dev react course

inside our container. So we'll go back

to our code

and that's how we set up and use React.

First we give it a container and then we

can display things like a message inside

this container.

Before we continue, let's review the

rest of the code in this file to make

sure that we understand every line of

code. So, the HTML at the top here

This HTML is called the HTML structure.

As a review, this is a standard

structure that we follow when writing HTML.

HTML.

At the top, dock type HTML tells a

computer to use a modern version of HTML.

HTML.

The HTML element represents a website.

So all the code for our website should

go inside the HTML element. Now every

website is split into two sections. the

head section and the body section. The

head section generally contains things

that are not visible on the page. For

example, the title element sets the text

at the top of the tab. So, this is not

visible on the page. So, we put this

inside the head.

The body section generally contains

things that are visible on the page. For

example, the div element will be visible

on the page. So we put it inside the body.

body.

Finally, we usually put our script

elements at the bottom of the body

because we want our HTML to be created

first and then our JavaScript can modify

the HTML.

So that's a review of the HTML

structure. This is a standard structure

So now we understand almost every line

of code in this file. This is just the

HTML structure that we have to follow.

This is a container that we give to

React to keep things isolated and organized.

organized.

This is an example of an external

library and this loads the React

external library or loads the code for React.

React.

And this sets up and uses React.

The last two lines that we haven't

learned yet are these two lines right

here. So here we're loading another

external library. And this external

library is called Babel.

So again if I open this URL in my

browser copy

and in my browser going to create a new

tab and at the top paste and press enter.

enter.

You'll see that this website contains a

bunch of JavaScript code and this is the

code for another external library called Babel.

Babel.

So we'll go back to VS Code and let's

learn what is the Babel external library.

library.

Babel is known as a JavaScript compiler.

So it basically translates other

languages into JavaScript.

So why do we need Babel? When using

React, we actually don't use normal

JavaScript. We use an enhanced version

of JavaScript called JSX.

JSX stands for JavaScript XML. It's the

same as JavaScript, but we can also

write HTML directly in our JavaScript

code. So, it's just JavaScript with

extra features. So, let's do an example

of JSX to learn how to use it. Inside

the script element at the bottom, we're

going to create a new variable using

const and let's call it button

equals. And now let's create a button

HTML element. So here we're going to

type HTML directly less than button

greater than and then less than /button

greater than.

So this is actually HTML code and we're

writing it directly inside our

JavaScript. So this HTML code creates a

button and then inside our button we can

put the text hello.

So this code here is actually using JSX.

So JSX works the same way as JavaScript

except we can also write HTML directly

in our JavaScript code.

So, what does this code do? It's

actually pretty straightforward. This

code creates a new button element inside

our JavaScript and then we save it in a variable.

variable.

We can actually do this with normal

JavaScript as well. We can use the DOM

and we can create a button element in

our JavaScript like this. So you can

think of this JSX code as a shortcut for

this JavaScript code.

So that's JSX. JSX is an enhanced

version of JavaScript. So it's the same

as JavaScript, but we can also write

HTML directly in our JavaScript code. So

when using React, we usually use JSX

instead of normal JavaScript because, as

you can see, JSX is simpler.

Now there is one problem with JSX which

is our web browser doesn't understand

JSX. It only understands normal JavaScript.

JavaScript.

In order to use JSX we need to translate

it into normal JavaScript first and then

our web browser can understand this code.

code.

To do that we use the Babel external

library. Babel translates JSX into

normal JavaScript so our web browser can

understand it. To use Babel, we need to

do two steps. First, we load the Babel

external library, which is what we do

here. And then when we want to translate

something into JavaScript, we have to

give the script element an attribute

type equals text/babel.

So this attribute tells Babel to

translate all the code inside here into

normal JavaScript.

So that's what these two lines of code

do. First, we load the Babel external

library and then we tell Babel to

translate the code from JSX into normal

JavaScript so our web browser can

understand it. So now we understand all

of the code in our starting file. And

again, this is the minimum amount of

code that we need to set up React.

Next, let's learn some more features of

React. So, we'll scroll back down. And

currently, we're using React to display

some text inside this container. Now, in

addition to text, we can also display

HTML elements inside this container. So

to do that, we're going to remove this string

string

and instead we're going to give render

an HTML element.

So up here, we actually created an HTML

element or a button. So we're going to

give this to the render function. So

here we're going to give it the button.

And now it's going to display this

button inside our container or inside

this div here. Let's save and we'll open

the browser

and open the tab for our website. And

you'll see it displayed the button with

the text hello on the website.

And if we check the elements tab, you

can see that React displayed the button

inside our container.

We'll go back to our code.

So that's what this code does. It

displays an element inside this container.

container.

Now let's do another example. Let's

display a different HTML element inside

this container. So below this button,

let's use JSX to create a paragraph

element. So first we'll create a new

variable using const and we'll name the

variable paragraph

equals and we'll create a paragraph

element using the code less than p

greater than less than /p greater than.

So this html code creates a paragraph or

a paragraph of text. Inside our

paragraph, let's just put paragraph of text.

text.

And now let's display this paragraph on

our website. So inside render, instead

of the button, we're going to render the paragraph

paragraph

and save.

If we open our website,

you can see it displayed a paragraph of

text. If we go into the elements tab and

we open this div container,

we can see that React displayed this

paragraph element inside this container.

So let's go back to our code. And that's

basically how we use React. We give

React a container and then we can

display an HTML element inside this container.

container.

Next, we're currently using React to

display one element at a time on our

website, which is not that useful. So

now we're going to learn how to use

React to display multiple elements on

our website. So one thing we can't do is

give render multiple elements. So this

is not supported. We also can't save

multiple elements inside a variable.

This is also not supported. Instead, we

need to use another HTML element called

a div element. So, under our paragraph,

let's create a new variable using const

and let's name it div and make it equal.

And we'll create an HTML div element

using the code less than div greater

than less than /d greater than.

So this is the HTML code to create a div

element. As a review, the div element

represents a container. The purpose of a

div element is to contain other elements

like buttons and paragraphs. So that's

actually why we used a div element up

here. This element is a container. It's

going to contain everything that we

create using React. So let's go back down.

down.

Inside our div element, we can put other

HTML elements like a button. So, let's

actually select this code and we'll copy

and then inside this div, paste.

And let's also put a paragraph element

inside our div. So we'll select this

code for the paragraph element and we'll copy

copy

and our div paste.

So this code works because a div is

considered as one element. So we're just

taking one element and saving it in one

variable which is supported in

JavaScript. The only thing special about

this is that this one element can

contain other elements inside.

Next, we're going to give this div to

the render function here. So, instead of

the paragraph, we're going to give

render our div and save.

And if we check our website,

you can see that React displayed

multiple elements on the website, a

button and a paragraph. If we look at

the elements tab and open this div container,

container,

you can see that React displayed our div

inside this container.

Let's go back to our code. And that's

how we display multiple elements on a

website using React.

First, we group the elements inside a

div element. And then we render the div element.

element.

Before we continue, we're going to do

some code cleanup. When we have multiple

lines of HTML like this, a best practice

is to add brackets around it. So, at the

front, we're going to add an open

bracket and at the end, a closed bracket.

bracket.

And we're going to put the HTML on its

own line. So, here we have JavaScript

and HTML together. We're going to add a

new line here by pressing enter. and

we're going to put the HTML on its own

line. Same thing here. Click here and

press enter to put the HTML on its own line.

line.

Next, we have two elements that are

inside a div. So, we're also going to

give this line an indent by pressing

tab. And then, we're going to give this

line an indent by pressing tab. So that

it's easy to see that these two elements

are inside this div element.

So this is how we should format our code

when we have multiple lines of HTML.

Another way to think about this is

inside here, you're actually just

writing HTML normally.

So don't worry, the more that you use

React, the more you'll get used to this format.

format.

So let's save this file.

Now that we learn the basics of React,

let's talk about how React helps us

create websites easier.

If we look at this code, creating a

website with React feels natural. It's a

lot simpler than using the DOM feature

in JavaScript. We can just create the

HTML elements we want directly and then

give it to React and React will display

it on the website.

Another benefit is JSX lets us find

errors easier.

For example, if I misspell button, it

will actually tell me that these two

don't match because this is an actual

element rather than just text or a

string. So, it makes it easier to find

errors when we're coding. So, I'll add

the O back.

Another benefit is we can insert values

inside our JSX elements. For example,

inside this paragraph, we're going to

type space and we're going to insert a

value here by typing open curly bracket

close curly bracket. And inside here, we

can give it any JavaScript code. For

example, 2 + 2. So this will calculate 2

+ 2 and then insert it into this

element. If we save

and then check our website,

we can see that it calculated 2 + 2

which is four and inserted it into this

paragraph element. So we'll go back to

our code and that's another benefit of

using React. We can insert JavaScript

code directly into our JSX elements. So

this is similar to string interpolation

where we can insert values into a string

except here we're inserting values into

actual HTML elements. So those are three

ways that React helps us create websites

easier. Number one, it's more natural.

We can create the elements that we want

and then just give it to React and it

will put it on the website. Number two,

it helps us find errors easier because

these are actual elements. And number

three, we can insert our JavaScript code

into our elements. So this helps us use

JavaScript and HTML together more easily.

easily.

Now, React has many other features that

helps us create websites easier, but

we're going to learn those features

later on as we go through the course.

The last thing we're going to do is

we're going to scroll up and we're just

going to remove this example external library

library

and save

so that we just have the code that we

And that's the end of this lesson. In

this lesson, we learned that React is an

external library that helps us create

websites easier. We learned how to load

the React external library. We learned

how to set up React and use render. We

reviewed the basics of HTML and JavaScript.

JavaScript.

We learned JSX, an enhanced version of JavaScript.

JavaScript.

We created elements directly with JSX.

And we learned how to insert values into

our JSX elements. Here are some

exercises to help you practice what we

learned in this lesson. You can find the

solutions to these exercises in the

In this lesson, we're going to learn two

of the most important features of React,

which are components and props. To learn

this, I actually prepared a project that

we can do for this lesson. We're going

to go to our browser

and we can delete these extra tabs for now.

now.

And we're going to create a new tab.

And at the top, we're going to go to

chatbot and press enter.

This is a chatbot project. We can send a

message to a robot up here and the robot

will respond to our message. For

example, we can click in here and type

hello chatbot and then press send.

And the robot will respond with hello,

how can I help you? Now, if we scroll to

the bottom of this page, we can also

move the text box to the bottom by

clicking this link.

So, a lot of chatbot applications use

this design where the text box is at the

bottom. However, because we're watching

a video, this text box might get cut off

or it might be covered by the video

progress bar. So, just for this video,

we're going to click this again and

we're going to start with a text box at

the top.

Next, this is a simple chatbot and

currently it can only do three things.

get today's date, flip a coin, and roll

a dice. For example, up here, we can

type, "Can you get me today's date?"

and press send.

And it will respond with today's date.

And let's try typing, "How about flip a

coin?" and press send.

and it will respond with heads or tails.

Finally, let's type okay, thank you and

press send.

And it responds with no problem.

So, this is a chatbot project we're

going to work on for the next few

lessons. Now, this is a simple chatbot

and it can only do these three things.

But in the future, we can also switch

this to a more powerful AI that can

respond to any message we send.

But for now, we'll just use this simple

chatbot to learn React. Now, let's use

React to build this chatbot project.

We'll go back to VS Code

and let's make a copy of React Basics.

So, first we'll select this file and

then rightclick, copy.

copy.

And inside here, we're going to

rightclick and paste.

And let's rename this file. So, we'll

rightclick and rename

and rename it to chatbot.html

And let's close the React Basics files

for now.

So, we're going to start with the same

code as the React Basics file, except

we're just going to change the title up

here. So, we'll remove React Basics and

just change it to chatbot

and save.

And now, let's open this file in our

browser. We'll rightclick,

And it should say chatbot in the tab up

here. So now we can close the React

basics tabs which are these two here.

And we'll go back to VS Code.

And now we're ready to begin the chatbot project.

First we're going to learn one of the

most important features of React called

components. A component is just a piece

of the website.

For example, let's go back to our

browser and open the final chatbot project.

project.

So looking at this project, we can split

it up into different pieces. One piece

can be the text box and the button at

the top and another piece are each of

these chat messages.

So these are called components. A

component is just a piece of the

website. Now, when building websites,

it's better to split up the website into

pieces or components so that we can work

on a small piece of the website at a time.

Now that we know what components are,

let's create our first component in

React. So, we mentioned that one way we

can split up this website is to have one

component at the top for this text box

and the button. So, let's create a

component for this in React. We'll go

back to our code

and we'll scroll down and first let's

remove the example button and paragraph

that we used. So, we'll select this and

remove it.

And to create a component in React,

we're going to use a function. So we'll

type function. And now we're going to

name this component. Since this piece of

the website is for inputting a message

and sending it to the chatbot, let's

name this component capital C chat

capital I input brackets and curly brackets.

brackets.

Now in React the component name must

start with a capital letter. So make

sure that chat input starts with a

capital C. This is also known as Pascal

case where each word in the name starts

Next this function will return some

HTML. So we're going to type return and

we're going to return the HTML for this

piece of the website. So this piece of

the website has a text box and a button.

So let's type brackets and press enter

between these brackets.

And to create a text box, we're going to

use the HTML element less than input

greater than. And we also need to type

less than /input greater than. Now you

may notice that in normal HTML input

doesn't need this closing tag. However,

JSX is more strict than normal HTML. So,

all elements need a closing tag,

including input. Now, there's actually a

shortcut we can use here. If there's

nothing inside an element, we can

actually remove the closing tag.

And at the end of this opening tag, we

can just type space and then slash. So,

this code is a shortcut for this code.

And this is called a self-closing

element. So in JSX we have to either

have a closing tag or use this

self-closing element shortcut.

Next, this piece of the website also has

a button. So let's also create a button

element using less than button greater

than less than /button greater than. And

inside this button we have the text send.

send.

And now we're going to get an error here

because we're trying to return two

values or two elements from this

function. But we can only return one

value from a function. To solve this

problem, we can use a div element like

down here to group these two elements together.

together.

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

element.

And at the bottom, less than /d greater

than. And let's also add indents before

these two lines. So we'll click here and

press tab. And also click here and press tab.

tab.

So this shows that these two elements

are inside this div element. And now

this code no longer has an error because

we're returning one value from this function.

function.

Now that we created this component,

let's learn how to display it on the

website. If we scroll down, right now

we're using React to display this div on

the website. So all we have to do is to

insert our component inside this div and

it will be displayed on the website. So

one way to do this is to use curly

brackets to insert something like we did

before. So here we'll type curly

brackets. And now we're just going to

run this function

capital C chat input and brackets.

So this will run the function and it

will return this HTML from the function

and then the curly brackets will insert

the HTML into the div and then display

it on the page.

So, as you can see, we can put any

JavaScript code between these curly

brackets. As long as this code results

in a value, we can insert it into this HTML.

HTML.

Let's remove the button and the

paragraph that we used as an example

and save.

And let's check our website. We'll open

the browser and go to our chatbot

project. And now we created the elements

for the top section of the chatbot

project, the text box and the send

button. So don't worry about how it

looks for now. Later in the course,

we're going to style this with CSS and

make it look like the final project.

Let's go back to our code.

And next, React has a special syntax we

can use to insert a component. Instead

of using curly brackets and running the

function, we can type this code less

than and then the name of the component

capital C chat input greater than and

then less than slash chat input greater than.

than.

So this is called the component syntax.

This does the same thing as the code

above. It runs the chat input function

and then inserts the result into the HTML.

HTML.

If we save

and we check our project, you'll notice

that that syntax does the same thing and

it creates another text box and button.

Let's go back to our code.

And again, this code does the same thing

as this code. Now this syntax has a big advantage.

advantage.

This actually looks like an HTML

element. It has an opening tag and a

closing tag. So you can think of this

like we're creating our own HTML element

called chat input.

HTML provides us with some default

elements like div, input and button. And

now using React, we can actually create

our own HTML element like chat input.

Then we can use our own HTML elements to

build the website instead of just the

default HTML elements. And this is

actually one of the main ideas of React.

We can create our own HTML elements. So

when using React, we should use this

component syntax instead of running the

component function directly because this

syntax lets us create our own HTML element.

element.

And again, we can use the self-closing

element shortcut like we did up here. If

there is nothing inside this element, we

can remove this closing tag.

And inside the opening tag at the end,

we can type space and slash.

And now we can remove this example code above.

above.

And let's save and check our project.

And that creates the top section of the

So go back to VS Code.

And we mentioned in the previous lesson

that React helps us create websites

easier. And this is another way that

React helps us create websites easier.

It lets us split our website into

smaller pieces or components. And this

lets us work on a small piece of the

website at a time.

Before we create the rest of the

project, we're going to improve our code

a little bit. First, notice that in this

component, we're using a div to group

these two elements together. However,

this is also going to insert an extra

div element into our website. So, if we

go to our website

and rightclick and click inspect,

and we're going to go to the elements

tab, and we're going to go to our

container here, and we're going to

expand it.

So notice here that we have a bunch of

extra divs on this website. So what if

we don't want to insert these extra

divs? What if we just want to insert the

text box and the button on our website?

Let's go back to our code and learn how

to do that.

React has another way to group elements

together called a fragment. To use a

fragment, we can remove the word div.

and div from the closing tag and just

have a less than greater than and a less

than slashgreater than. So this is

called a fragment and it groups the two

elements together. So we can return it

from the function but it won't insert an

extra div. So, if we save this code and

then go to our website

and take a look at the HTML,

you'll notice now we have one less extra

div on the website.

Let's go back

and we can also use a fragment down

here. If we don't want to insert this

extra div, we can remove it and remove

it at the bottom and just use a

fragment. If we save and check the website,

website,

now we no longer have those extra divs.

We have our container and we just

inserted the text box and the button.

So that's fragments. It allows us to

group elements together without creating

an extra div.

Let's go back to our code.

And since this variable no longer

contains a div, let's rename it. So

right now we're building a chatbot

application or an app. So let's rename

this variable to app instead. And here

as well, we're going to render the app

and save.

So again in React, when returning

multiple elements or saving multiple

elements, we can use a fragment to group

them together. And this makes our HTML a

little bit cleaner because it doesn't

create an extra div element.

Next, another improvement we can make is

to add a placeholder to the text box at

the top. So the gray text inside the

text box is called a placeholder. It

tells us what to type inside the text

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

disappear.

To create a placeholder, we give this

input element an attribute. So at the

end, we're going to type the attribute placeholder

placeholder

equals double quotes.

And then inside these double quotes,

we're going to put the text that we

want, which is send a message to chatbot.

chatbot.

If we save this code

and look at our website,

now we have a placeholder in the text

box. And when we start typing in it, it

will disappear. So the placeholder is

working. Now there is one problem here,

which is if we remove this text, you'll

notice that this placeholder is too long

and it's getting cut off. To fix this,

let's make this text box wider. We'll go

back to our code.

And to make this input wider, we're

going to give it another attribute. So

at the end, we'll type another attribute

called size equals double quotes. And

this sets how many characters can fit in

this input. By the way, a character is

just a letter, number, or symbol.

Let's set the size to 30 characters and

save and take a look.

Okay, so that looks pretty good for now.

Again, don't worry about how this looks.

We'll style it later in the course using CSS.

CSS.

So, we just created our first component

or our first piece of the website, which

is the section at the top. Now, let's

get some practice and create more components.

components.

Let's go back to the final chatbot project

project

and let's ask ourselves how can we split

up the rest of this website into pieces.

Another piece of this website could be

one chat message here. So let's create a

component for this piece of the website.

We'll go back to VS Code

and to create a component we're going to

use a function. So down here, let's

create a function

and let's name it capital C chat capital

M message

brackets and curly brackets. So remember

a component name must start with a

capital letter and we use Pascal case.

So each word starts with a capital letter.

letter.

Now inside this function, we're going to

return the HTML for this piece of the

website or this component.

So let's also type brackets and enter.

So we can write the HTML on multiple

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

things, some text and a profile image. Since we have multiple things inside

Since we have multiple things inside this component, let's group them

this component, let's group them together using a fragment. So we can

together using a fragment. So we can return one value from this function. So

return one value from this function. So we'll type less than greater than enter

we'll type less than greater than enter and then less than /g greater than to

and then less than /g greater than to create a fragment. And now inside here

create a fragment. And now inside here each message has some text. So let's

each message has some text. So let's create the first chat message in our

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

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

project. And let's just copy paste the text from

And let's just copy paste the text from the first message here which is hello

the first message here which is hello chatbot. So we'll select this and then

chatbot. So we'll select this and then copy by pressing control C on Windows or

copy by pressing control C on Windows or command C on Mac.

command C on Mac. And then inside our code

And then inside our code in the chat message component we're

in the chat message component we're going to paste by pressing controlV on

going to paste by pressing controlV on Windows or commandV on Mac.

Windows or commandV on Mac. And let's fix the indent by pressing tab

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

at the start. Next, each chat message has a profile

Next, each chat message has a profile image. To create an image, we can use an

image. To create an image, we can use an HTML element called img. So, let's

HTML element called img. So, let's create a new line. And we're going to

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

type less than img greater than and then less than / img greater than. So,

less than / img greater than. So, remember that in JSX, every element has

remember that in JSX, every element has to have a closing tag. And again, we can

to have a closing tag. And again, we can use the self-closing element shortcut

use the self-closing element shortcut like we did down here. If there's

like we did down here. If there's nothing inside this element, we can

nothing inside this element, we can remove the closing tag and then just add

remove the closing tag and then just add a space and a slash at the end of the

a space and a slash at the end of the opening tag. And now we have the two

opening tag. And now we have the two things that we need for each chat

things that we need for each chat message, the text and an image.

message, the text and an image. Next, we need to tell the computer which

Next, we need to tell the computer which image to load. Right now, if we look at

image to load. Right now, if we look at our final chatbot project, we have two

our final chatbot project, we have two images that we use, but we currently

images that we use, but we currently don't have these in our project. So,

don't have these in our project. So, let's download them. We're going to

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

rightclick this first image and then click save image.

click save image. And we're going to find the folder that

And we're going to find the folder that contains all of our code. So, for me,

contains all of our code. So, for me, it's on the desktop

it's on the desktop and it's in the folder React-Course.

and it's in the folder React-Course. and we're going to save it inside of

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

this folder. And same things for this robot image.

And same things for this robot image. We're going to rightclick

We're going to rightclick and click save image.

and click save image. Go to the React-Course folder. And we're

Go to the React-Course folder. And we're also going to save the robot image.

also going to save the robot image. And now if we look at our code,

And now if we look at our code, we should have two images inside our

we should have two images inside our project. User.png png and robot.png.

project. User.png png and robot.png. And now let's go back to our code.

And now let's go back to our code. To load an image on the website, we need

To load an image on the website, we need to tell the computer which image to

to tell the computer which image to load. To do that, we're going to give

load. To do that, we're going to give this image element an attribute called

this image element an attribute called src or source equals double quotes. And

src or source equals double quotes. And inside these double quotes, we're going

inside these double quotes, we're going to tell the computer which image to load

to tell the computer which image to load for the first chat message. The image is

for the first chat message. The image is the user image. So let's type this file

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

So this will look for a file called user.png

user.png beside the current HTML file. This is a

beside the current HTML file. This is a current HTML file. So we'll look for

current HTML file. So we'll look for user.png beside it, which is right here.

user.png beside it, which is right here. and then it's going to load this image

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

on the website. Okay, so we created a component for a

Okay, so we created a component for a chat message. Now let's insert this

chat message. Now let's insert this component on the website. We're going to

component on the website. We're going to scroll down

scroll down to the app and let's insert this

to the app and let's insert this component using the component syntax

component using the component syntax like we did up here. So we'll type a new

like we did up here. So we'll type a new line and type less than and then the

line and type less than and then the name of the component which is capital C

name of the component which is capital C chat

chat capital M message.

capital M message. And currently we don't have anything to

And currently we don't have anything to put inside this component. So we use the

put inside this component. So we use the self-closing element shortcut like we

self-closing element shortcut like we did up here. So now let's save

did up here. So now let's save and check our website

and check our website which is this tab. And let's close the

which is this tab. And let's close the console so we can see it. And we created

console so we can see it. And we created a chat message.

a chat message. However, we have a few problems here.

However, we have a few problems here. The first problem is that the profile

The first problem is that the profile image is too big. To make it smaller,

image is too big. To make it smaller, we're going to go back to our code

we're going to go back to our code and inside the img element, we're going

and inside the img element, we're going to give it another attribute called

to give it another attribute called width equals double quotes.

width equals double quotes. And let's try setting the width to 50

And let's try setting the width to 50 and save. And then check our website.

and save. And then check our website. And that looks close enough.

And that looks close enough. Another problem is the chat message is

Another problem is the chat message is appearing on the same line as the chat

appearing on the same line as the chat input, but in the final project, we want

input, but in the final project, we want it to appear below. To fix this, we'll

it to appear below. To fix this, we'll go back to our code

go back to our code and inside the chat message component,

and inside the chat message component, instead of using a fragment to group

instead of using a fragment to group these elements together, we're going to

these elements together, we're going to change it back to a div. So, inside

change it back to a div. So, inside we'll type div and inside here /d.

we'll type div and inside here /d. The reason we're using a div is because

The reason we're using a div is because in HTML, a div is known as a block

in HTML, a div is known as a block element. A block element will always

element. A block element will always take up an entire line by itself. So if

take up an entire line by itself. So if we group this in a div element, instead

we group this in a div element, instead of appearing beside the chat input, the

of appearing beside the chat input, the div is going to take up an entire line

div is going to take up an entire line by itself. So it's going to take up the

by itself. So it's going to take up the entire line under the chat input. So

entire line under the chat input. So let's save this code and then check our

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

website. So now this div is taking up this entire

So now this div is taking up this entire line. If we rightclick and click inspect

line. If we rightclick and click inspect and then click this arrow icon in the

and then click this arrow icon in the top left and then click on this div,

top left and then click on this div, you can see that this div now takes up

you can see that this div now takes up this entire line. So now we have the

this entire line. So now we have the layout that we want. So in React, we

layout that we want. So in React, we still use divs for layout purposes.

still use divs for layout purposes. If you want to learn divs, layout, and

If you want to learn divs, layout, and HTML in more detail, you can check out

HTML in more detail, you can check out my HTML and CSS full course in the video

my HTML and CSS full course in the video description.

description. So now we created our first chat

So now we created our first chat message.

Next, let's create the second chat message. We'll go back to our code

message. We'll go back to our code and instead of creating a whole new

and instead of creating a whole new component, we can actually reuse our

component, we can actually reuse our chat message component. Components are

chat message component. Components are actually designed to be reusable.

actually designed to be reusable. To reuse this component, we don't want

To reuse this component, we don't want the message to be hello chatbot every

the message to be hello chatbot every time. We want to be able to display

time. We want to be able to display different messages in this component. To

different messages in this component. To do that, we can give our component an

do that, we can give our component an attribute. So down here, we're going to

attribute. So down here, we're going to go to the chat message component and

go to the chat message component and we're going to give it an attribute. So

we're going to give it an attribute. So this works just like HTML attributes.

this works just like HTML attributes. We're going to give our attribute a

We're going to give our attribute a name. Let's call it message

name. Let's call it message equals double quotes. And inside these

equals double quotes. And inside these double quotes, we're going to give the

double quotes, we're going to give the attribute a value.

attribute a value. Let's put the text for the first message

Let's put the text for the first message which is hello chatbot. So let's select

which is hello chatbot. So let's select this code and then copy

this code and then copy and we're going to paste it inside here.

and we're going to paste it inside here. So now we have an attribute called

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

message with a value hello chatbot. So again you can see that this syntax looks

again you can see that this syntax looks like HTML. We can even add our own

like HTML. We can even add our own attributes.

attributes. Now that we added this message

Now that we added this message attribute, how do we access it inside

attribute, how do we access it inside this component and use it? To do that,

this component and use it? To do that, we're going to use a feature called

we're going to use a feature called props.

props. Every component function gets one

Every component function gets one parameter up here called props.

parameter up here called props. This props parameter is an object and it

This props parameter is an object and it contains all the attributes that we give

contains all the attributes that we give to this component. So up here, let's

to this component. So up here, let's actually console.log

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

props to see what it looks like. Let's save and then open our website and check

save and then open our website and check the console.

the console. And you'll see that props is an object

And you'll see that props is an object and it contains the attributes that we

and it contains the attributes that we gave to our component. So here we have

gave to our component. So here we have the message attribute and it has a value

the message attribute and it has a value hello chatbot. So the attribute name is

hello chatbot. So the attribute name is saved as a property and the attributes

saved as a property and the attributes value is saved as a value of this

value is saved as a value of this object.

object. So let's go back to VS code

So let's go back to VS code and using this props object we can

and using this props object we can access our attributes. By the way props

access our attributes. By the way props is short for properties. We call this

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

props because the attributes are saved as properties in this object.

as properties in this object. So now to access the message attribute

So now to access the message attribute we can remove this and type props

we can remove this and type props dot and the attribute name which is

dot and the attribute name which is message

and let's save this in a variable so we can use it later. So at the front we'll

can use it later. So at the front we'll create a variable using const name name

create a variable using const name name it message

it message equals props dossage

equals props dossage and we'll add a new line to separate the

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

code a little bit. Now instead of displaying hello chatbot

Now instead of displaying hello chatbot every time let's display whatever is in

every time let's display whatever is in the message attribute. So we'll remove

the message attribute. So we'll remove this

this and let's insert this variable into this

and let's insert this variable into this element. To do that we can use curly

element. To do that we can use curly brackets and type the variable name

brackets and type the variable name message.

message. So again we can put any JavaScript code

So again we can put any JavaScript code between these curly brackets and as long

between these curly brackets and as long as it results in a value it will insert

as it results in a value it will insert it into this element. So now let's save

it into this element. So now let's save and we'll check the website

and we'll check the website and it displays a message hello chatbot.

and it displays a message hello chatbot. That's the message attribute that we

That's the message attribute that we gave it.

gave it. Let's go back to our code.

Let's go back to our code. So that's props. Just like a normal HTML

So that's props. Just like a normal HTML element, we can give attributes to our

element, we can give attributes to our component and then access these

component and then access these attributes using this props object.

attributes using this props object. So props are really useful because props

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

make our component reusable. For example, let's try creating the

For example, let's try creating the second chat message. To do that, we can

second chat message. To do that, we can just create another chat message

just create another chat message component. So down here, let's type less

component. So down here, let's type less than chat message/grater

than chat message/grater than.

than. And we just need to give it a different

And we just need to give it a different message attribute. So here we'll give it

message attribute. So here we'll give it an attribute message equals double

an attribute message equals double quotes. And we'll copy paste the second

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

message in the chatbot project. We'll go to our browser

to our browser and go to the chatbot project and let's

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

copy and paste this second message. We'll select it and then copy.

We'll select it and then copy. And inside our code in the message

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

attribute, we're going to paste. So this will save the message hello how

So this will save the message hello how can I help you inside props and then we

can I help you inside props and then we get it out of props and insert it into

get it out of props and insert it into the component. Let's save and check the

the component. Let's save and check the website

website and go to our tab.

and go to our tab. And now we created the second chat

And now we created the second chat message. So let's go back to our code.

message. So let's go back to our code. And you can see that props make our

And you can see that props make our component reusable. We can reuse this

component reusable. We can reuse this component, but just give it a different

component, but just give it a different attribute or prop and it will display a

attribute or prop and it will display a different message.

different message. Let's get some practice and use props to

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

create two more chat messages. Feel free to pause if you want to try it yourself

to pause if you want to try it yourself first.

first. So down here, let's create our third

So down here, let's create our third message using less than chat

message using less than chat message/grater

message/grater than. and we'll give it a message

than. and we'll give it a message attribute equals double quotes and we'll

attribute equals double quotes and we'll copy paste the third message. We'll go

copy paste the third message. We'll go to the chatbot project

to the chatbot project and select this third message and then

and select this third message and then copy.

copy. And in our code inside the attribute,

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

we're going to paste. And finally, let's create the fourth

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

message less than chat message slashgreater than and then the message

slashgreater than and then the message attribute equals double quotes and we'll

attribute equals double quotes and we'll copy paste the fourth message which is

copy paste the fourth message which is this one. So don't worry if your

this one. So don't worry if your messages are different from mine. We're

messages are different from mine. We're just doing an example. So we'll select

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

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

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

and save. And now, if we check our website

And now, if we check our website and go to our tab, you'll see that we

and go to our tab, you'll see that we now have four chat messages in our

now have four chat messages in our project. So, that's how we use props to

project. So, that's how we use props to reuse the chat message component.

reuse the chat message component. Next, in the final chatbot project,

Next, in the final chatbot project, notice that these two messages are

notice that these two messages are different. These two messages are from

different. These two messages are from the chatbot. So there are two

the chatbot. So there are two differences here. The profile image is a

differences here. The profile image is a robot and the image is on the left. To

robot and the image is on the left. To create this, we can add another prop to

create this, we can add another prop to chat message. Let's go back to VS Code

chat message. Let's go back to VS Code and for each chat message, we're going

and for each chat message, we're going to add another attribute.

to add another attribute. And let's call this attribute the sender

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

equals double quotes. This attribute tells us who sent the

This attribute tells us who sent the message. And we can use this to

message. And we can use this to determine which image to load and where

determine which image to load and where to place the image. So if we send the

to place the image. So if we send the message, let's make the sender the user.

message, let's make the sender the user. And for the second chat message, we're

And for the second chat message, we're going to add another sender attribute

going to add another sender attribute equals double quotes. And the second

equals double quotes. And the second message is from the chatbot. So let's

message is from the chatbot. So let's make the sender attribute the robot.

make the sender attribute the robot. And we'll do the same thing for the

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

third and fourth message. We'll give it a sender attribute.

a sender attribute. The third message is from the user. So

The third message is from the user. So let's make the sender user.

let's make the sender user. And the fourth message sender equals

And the fourth message sender equals double quotes. This message is from the

double quotes. This message is from the robot. So let's make the sender robot.

robot. So let's make the sender robot. Next, let's access the sender attribute

Next, let's access the sender attribute inside our component. To do that, all

inside our component. To do that, all the attributes are saved inside this

the attributes are saved inside this props object. To access the sender

props object. To access the sender attribute, we can type props dot sender.

attribute, we can type props dot sender. So this gives us the value of the sender

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

attribute which is either user or robot. So let's save this in a variable so we

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

can use it later. Type const and let's call it sender equals props.

call it sender equals props. So now that we have the sender

So now that we have the sender attribute, let's use it to decide which

attribute, let's use it to decide which profile image to load and where to place

profile image to load and where to place this image. To do that, we can just use

this image. To do that, we can just use an if statement.

an if statement. So inside here, we can type if brackets

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

and curly brackets. And inside these brackets, we're going

And inside these brackets, we're going to check if the sender

to check if the sender is equal to the string robot.

is equal to the string robot. By the way, by default, if the attribute

By the way, by default, if the attribute just has double quotes like this, the

just has double quotes like this, the value is a string. So here the value is

value is a string. So here the value is going to be the string user or the

going to be the string user or the string robot.

string robot. So now inside our component, if the

So now inside our component, if the sender is the robot, we're going to

sender is the robot, we're going to return some different HTML.

return some different HTML. So let's type return brackets. So we can

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

write this HTML on multiple lines. And let's just copy paste the HTML from down

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

here and modify it. So we'll select this HTML and then copy

HTML and then copy and then inside this return we're going

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

to paste. And let's also select these lines and

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

press tab to fix the indenting. So the first thing we need to change if

So the first thing we need to change if the sender is a robot is that we want to

the sender is a robot is that we want to load the robot image instead.

load the robot image instead. So, we already downloaded the robot

So, we already downloaded the robot image here. To load it, we're just going

image here. To load it, we're just going to change the src attribute or the

to change the src attribute or the source attribute of this image. So,

source attribute of this image. So, we're going to change this from user to

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

robot.png. And we also want this image to be on the

And we also want this image to be on the left. So, let's just move this image

left. So, let's just move this image before the message. So we'll select this

before the message. So we'll select this code and then cut by pressing control X

code and then cut by pressing control X on Windows or command X on Mac.

on Windows or command X on Mac. And then before the message we're going

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

to paste by pressing controlV on Windows or commandV on Mac.

or commandV on Mac. And we can remove this extra new line.

And we can remove this extra new line. So as you can see inside a component we

So as you can see inside a component we can use any JavaScript feature like if

can use any JavaScript feature like if statement and we can return a different

statement and we can return a different HTML and whatever we return will be

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

inserted inside the element here. So now let's save this code

let's save this code and then check our website

and then check our website and then open our tab

and then open our tab and you can see that now we have two

and you can see that now we have two messages from the chatbot. that loads

messages from the chatbot. that loads the robot image and it puts the image on

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

the left. We'll go back to our code

We'll go back to our code and using this sender prop, we're able

and using this sender prop, we're able to reuse this component to create a chat

to reuse this component to create a chat message from the robot. So again, props

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

make our component reusable. And that's it. If we scroll down,

And that's it. If we scroll down, using components, we split up the

using components, we split up the website or the app into smaller pieces

website or the app into smaller pieces like the chat input section at the top

like the chat input section at the top and each chat message. And we created

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

all the HTML that we need for this project.

project. The last thing we're going to learn in

The last thing we're going to learn in this lesson are some shortcuts that are

this lesson are some shortcuts that are commonly used in React, and we can use

commonly used in React, and we can use these to clean up our code.

these to clean up our code. First, let's scroll up to the chat

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

message component. So, instead of doing con message equals

So, instead of doing con message equals props message, we actually have a

props message, we actually have a shortcut for this in JavaScript. So,

shortcut for this in JavaScript. So, down here we can just type const curly

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

brackets and inside we can type message and make it equal to props.

and make it equal to props. So this takes the message property out

So this takes the message property out of this object and saves it in a

of this object and saves it in a variable called message. So this does

variable called message. So this does the same thing as this line above. This

the same thing as this line above. This code is a shortcut for this code. And

code is a shortcut for this code. And this shortcut is called dstructuring

this shortcut is called dstructuring because we're taking stuff out of this

because we're taking stuff out of this object. We're deconstructing it. We can

object. We're deconstructing it. We can also use this shortcut with the sender

also use this shortcut with the sender property to add another property to take

property to add another property to take out of this object. After the first

out of this object. After the first property, we can type comma and the

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

second property sender. So this will get the message property

So this will get the message property and the sender property out of this

and the sender property out of this object and it will save it in a message

object and it will save it in a message variable and a sender variable. So this

variable and a sender variable. So this line of code is a shortcut for these two

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

lines above. So now let's actually turn these two

So now let's actually turn these two lines into comments or comment out these

lines into comments or comment out these lines. At the front we're going to type

lines. At the front we're going to type double slash and at the front here we'll

double slash and at the front here we'll type double slash.

type double slash. By the way, if we start with double

By the way, if we start with double slash, it will turn this code into

slash, it will turn this code into comments and it will be ignored by the

comments and it will be ignored by the computer.

computer. So, we'll just keep this here as a

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

reminder that this is a shortcut for these two.

these two. Next, JavaScript has an even shorter

Next, JavaScript has an even shorter shortcut for this. Since props is a

shortcut for this. Since props is a parameter up here, we can just

parameter up here, we can just dstructure it directly up here. So here

dstructure it directly up here. So here instead of the props object we can just

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

type curly brackets directly and then type message

and then type message and sender.

and sender. This takes the message and sender

This takes the message and sender properties directly out of the first

properties directly out of the first parameter and then saves them in a

parameter and then saves them in a variable called message and a variable

variable called message and a variable called sender. So it does the same thing

called sender. So it does the same thing as this code down here, but it's an even

as this code down here, but it's an even shorter shortcut. We're dstructuring the

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

parameter directly at the top. So this shortcut is used a lot in React

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

tutorials and documentation. So it's useful to know how this works.

useful to know how this works. So let's comment out this line here at

So let's comment out this line here at the front. We'll type double slash.

the front. We'll type double slash. So we remember that this code is a

So we remember that this code is a shortcut for this line of code and these

shortcut for this line of code and these two lines of code.

two lines of code. Now, let's save and check our website to

Now, let's save and check our website to make sure that everything is still

make sure that everything is still working. So, that looks good.

working. So, that looks good. We'll go back. And that is a

We'll go back. And that is a dstructuring shortcut. It allows us to

dstructuring shortcut. It allows us to take properties directly out of an

take properties directly out of an object.

object. Next, we're going to learn how to use if

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

statements directly inside JSX. So currently we have some JSX here and

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

we put an if statement outside of this JSX.

JSX. However, this means we're duplicating

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

some code like the div and the message. To make this code more reusable, we can

To make this code more reusable, we can actually move this if statement directly

actually move this if statement directly inside the JSX down here. So what we

inside the JSX down here. So what we want to do is if the sender is a robot,

want to do is if the sender is a robot, we want to put the image before the

we want to put the image before the message. So down here, let's go before

message. So down here, let's go before the message and press enter. And we're

the message and press enter. And we're going to type curly brackets and we're

going to type curly brackets and we're going to insert the if statement

going to insert the if statement directly inside here. So here before the

directly inside here. So here before the message we want to do something like if

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

the sender is equal to the string robot we're going to insert this image.

we're going to insert this image. However we can't actually use the word

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

if inside of these curly brackets. Instead we need to use another feature

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

of JavaScript called a guard operator or and.

and. In JavaScript, you can write value one

In JavaScript, you can write value one and value two. If value one is true,

and value two. If value one is true, then the result will be value two. So

then the result will be value two. So this works just like an if statement

this works just like an if statement except we can write it on one line and

except we can write it on one line and it results in a value. So if you want to

it results in a value. So if you want to learn more about this feature, I cover

learn more about this feature, I cover it in the booleans lesson of my

it in the booleans lesson of my JavaScript course and you can check out

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

that in the video description. For now, the only thing we need to know

For now, the only thing we need to know is we can use and as sort of an if

is we can use and as sort of an if statement in our JSX.

statement in our JSX. So, first let's remove this

So, first let's remove this and then we're going to use and to

and then we're going to use and to insert this if statement directly inside

insert this if statement directly inside the JSX.

the JSX. So, the first value is going to be our

So, the first value is going to be our if condition, which is sender equals the

if condition, which is sender equals the robot. So we'll check if the sender is

robot. So we'll check if the sender is equal to the string robot

equal to the string robot and then we're going to use and.

and then we're going to use and. So if this is true, the result is going

So if this is true, the result is going to be the second value here. So here if

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

the sender is a robot, we want to insert the robot image. So let's just copy and

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

paste this code. We're going to select this

this and then copy it.

and then copy it. And then down here after and we're going

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

to paste. So again the way this works is if the

So again the way this works is if the value on the left is true then the

value on the left is true then the result will be the value on the right.

result will be the value on the right. So this and is sort of a shortcut for

So this and is sort of a shortcut for this if statement and it lets us insert

this if statement and it lets us insert if statements directly inside our JSX.

if statements directly inside our JSX. So let's actually comment out this if

So let's actually comment out this if statement out here. So we remember that

statement out here. So we remember that this code is a shortcut for this code.

this code is a shortcut for this code. So here before the if statement we'll

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

type slash and star and after the if statement we'll type star and slash and

statement we'll type star and slash and remove the indent. So this is known as a

remove the indent. So this is known as a multi-line comment. All the code between

multi-line comment. All the code between these two stars will be ignored by the

these two stars will be ignored by the computer. So now let's save

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

and check our website. And as you can see, if the sender is a

And as you can see, if the sender is a robot, we're going to add an image on

robot, we're going to add an image on the left before the message. So now, one

the left before the message. So now, one problem here is that we're also showing

problem here is that we're also showing the user's profile image at the back,

the user's profile image at the back, but we only want to show one profile

but we only want to show one profile image. We'll go back to our code

image. We'll go back to our code and here we only want to show the user

and here we only want to show the user profile image if the sender is the user.

profile image if the sender is the user. So let's insert another if statement

So let's insert another if statement down here. Feel free to pause this video

down here. Feel free to pause this video if you want to try it yourself first.

if you want to try it yourself first. So at the front we'll type open curly

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

bracket. At the end a close curly bracket.

bracket. And at the front we're going to type the

And at the front we're going to type the if condition. So we'll check if the

if condition. So we'll check if the sender is equal to the string user and

sender is equal to the string user and then we'll type ant. So if this is true

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

then we will show this image. If this is not true, we will not show this image.

not true, we will not show this image. So this code is a shortcut for this

So this code is a shortcut for this code.

Let's save and check our website. And it works. The robot image is on the

And it works. The robot image is on the left and the user image is on the right.

left and the user image is on the right. So let's go back.

So let's go back. Using the guard operator or and we can

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

insert an if statement directly inside our JSX.

our JSX. Next, we're going to do some code

Next, we're going to do some code cleanup. So, let's scroll up and we're

cleanup. So, let's scroll up and we're going to go to the chat input component

going to go to the chat input component first. So, you notice that in here, this

first. So, you notice that in here, this line is a little bit too long. To make

line is a little bit too long. To make our code easier to read, we can actually

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

put each attribute on its own line. So, here we'll type enter to put placeholder

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

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

enter to put size on its own line. And let's also type enter at the back. So

let's also type enter at the back. So the attributes are on their own lines.

the attributes are on their own lines. And then let's add an indent in front of

And then let's add an indent in front of these attributes by pressing tab and

these attributes by pressing tab and pressing tab. This makes it clear that

pressing tab. This makes it clear that these attributes are part of this

these attributes are part of this element. And we also want to make sure

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

that these two are vertically aligned. This makes it easy to see where this

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

element starts and where it ends. Next, let's scroll down to the chat

Next, let's scroll down to the chat message component. And notice that these

message component. And notice that these two lines of code with the and are also

two lines of code with the and are also a bit too long. To improve this, we can

a bit too long. To improve this, we can surround this value with brackets. So

surround this value with brackets. So we'll type open bracket and at the end

we'll type open bracket and at the end close bracket and then we can put this

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

code on its own line. So here we'll type enter and at the end we'll type enter.

enter and at the end we'll type enter. So this will still have the same value,

So this will still have the same value, but the brackets allow us to put the

but the brackets allow us to put the code on multiple lines. We'll do the

code on multiple lines. We'll do the same thing for the second image.

same thing for the second image. We'll surround it in brackets, open

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

bracket, and close bracket. And we'll put this value on a separate line

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

so that it's no longer too long. Next, let's scroll down even more to the

Next, let's scroll down even more to the app variable. And you'll notice that

app variable. And you'll notice that these lines are also a bit too long

these lines are also a bit too long because of the attributes. Again, we can

because of the attributes. Again, we can put each attribute on its own line. So

put each attribute on its own line. So here we'll put message on its own line

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

and sender on its own line. And we'll put the end of the component on its own

put the end of the component on its own line so that this is vertically aligned

line so that this is vertically aligned with this. And let's also add indents

with this. And let's also add indents before the attributes. So we'll press

before the attributes. So we'll press tab and tab. So it's easy to see that

tab and tab. So it's easy to see that these attributes are part of this

these attributes are part of this component. And we'll do the same thing

component. And we'll do the same thing for the other three chat messages. So

for the other three chat messages. So we'll put this on its own line

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

and add indents. And put this on its own line.

And put this on its own line. Add indents.

Add indents. And put this on its own line.

And put this on its own line. And add indents.

And add indents. and save

and save and check our website and everything

and check our website and everything should still work because we just

should still work because we just changed the formatting of our code. So

changed the formatting of our code. So let's go back and that's how we avoid

let's go back and that's how we avoid our lines being too long. We can put

our lines being too long. We can put each attribute on its own line

each attribute on its own line and we can also surround a value with

and we can also surround a value with brackets and put it on its own line.

brackets and put it on its own line. Finally, down here, instead of using a

Finally, down here, instead of using a variable to save our app, a best

variable to save our app, a best practice is to use a component to create

practice is to use a component to create this app.

this app. So here, let's create a component using

So here, let's create a component using function

function and we'll name it capital A app

and we'll name it capital A app brackets and curly brackets.

brackets and curly brackets. And then this component will return all

And then this component will return all of this HTML.

of this HTML. So we'll return brackets so we can write

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

it on multiple lines. And we're going to move all this code up

And we're going to move all this code up here. So let's select this code. And

here. So let's select this code. And we'll cut

we'll cut and inside the return

and inside the return we're going to paste.

we're going to paste. And we can select these lines

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

and press tab to fix the indenting. So now we're going to use this component

So now we're going to use this component instead of the variable to create our

instead of the variable to create our app. So down here, let's remove this

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

variable. And then inside render, we're going to

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

create the app. We can type less than capital A app greater than and then less

capital A app greater than and then less than slash app greater than.

than slash app greater than. So this creates an entire chatbot

So this creates an entire chatbot application. And then we give this to

application. And then we give this to React to display on the website.

React to display on the website. And again since there's nothing inside

And again since there's nothing inside this component, we can use the

this component, we can use the self-closing element shortcut. So we can

self-closing element shortcut. So we can remove this closing tag. And then at the

remove this closing tag. And then at the end here we can type space and slash.

end here we can type space and slash. And now let's save

And now let's save and check our website.

and check our website. And it displays the app on the website.

And it displays the app on the website. Let's go back to our code.

Let's go back to our code. So a best practice is to use a component

So a best practice is to use a component called app to create the website because

called app to create the website because it gives us access to extra features of

it gives us access to extra features of components like props.

components like props. And also notice that we can have

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

components inside a component. So this lets us split up a website into smaller

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

and smaller components or smaller and smaller pieces.

smaller pieces. So again, React helps us create websites

So again, React helps us create websites easier because it lets us work on a

easier because it lets us work on a small piece of the website at a time.

In the next lesson, we're going to learn a very important feature of React called

a very important feature of React called state. State lets us make our website

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

interactive, and it will let us add new chat messages to our website.

chat messages to our website. And that's the end of this lesson. In

And that's the end of this lesson. In this lesson, we learned that a component

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

is just a piece of the website. We also learned that components let us create

learned that components let us create our own HTML elements. We started the

our own HTML elements. We started the chatbot project. We split the chatbot

chatbot project. We split the chatbot into chat input and chat message

into chat input and chat message components. We learned props which let

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

us insert values into components and make components reusable.

make components reusable. We learned the destructuring and guard

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

operator shortcuts. We did some code cleanup and split longer lines into

cleanup and split longer lines into multiple lines. And we created an app

multiple lines. And we created an app component which represents the entire

component which represents the entire application.

application. Thanks for watching so far. If you find

Thanks for watching so far. If you find this course valuable, you can support

this course valuable, you can support the channel by liking this video,

the channel by liking this video, leaving a comment, and subscribing.

leaving a comment, and subscribing. You can also check out the premium

You can also check out the premium version of this course where you'll get

version of this course where you'll get all the lessons ads free broken down

all the lessons ads free broken down into small videos as well as additional

into small videos as well as additional lessons and more projects that are not

lessons and more projects that are not in the public React course. Currently,

in the public React course. Currently, the premium course contains 11 lessons

the premium course contains 11 lessons and I'll be adding more lessons in the

and I'll be adding more lessons in the future. You can also get a certificate

future. You can also get a certificate of completion, create comments or

of completion, create comments or questions on specific topics, get

questions on specific topics, get progress tracking, search and course

progress tracking, search and course notes. You can also check out the

notes. You can also check out the membership where you can get this course

membership where you can get this course ads free separated by each lesson, AI

ads free separated by each lesson, AI videos, backend tutorials, and more.

videos, backend tutorials, and more. Thanks again, and let's continue with

Thanks again, and let's continue with the course. Here are some exercises to

the course. Here are some exercises to help you practice what we learned in

help you practice what we learned in this lesson.

In this lesson, we're going to learn two of the most important features of React

of the most important features of React called state and event handlers. And

called state and event handlers. And we're going to use these features to

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

create the functionality for the chatbot project.

project. Before we learn state, we're going to

Before we learn state, we're going to improve our code a bit. Currently to add

improve our code a bit. Currently to add a new chat message we have to manually

a new chat message we have to manually type a new chat message component.

type a new chat message component. Instead of manually typing this code we

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

can actually use JavaScript to generate these components.

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

To do that we're going to do two steps. The first step is to save the data. Data

The first step is to save the data. Data means information.

means information. Here the data is the information about

Here the data is the information about our chat messages like the message and

our chat messages like the message and the sender. So we need to save this data

the sender. So we need to save this data or this information in our JavaScript.

or this information in our JavaScript. Let's use a variable to save this data.

Let's use a variable to save this data. At the top of this component, we're

At the top of this component, we're going to create a variable using const

going to create a variable using const and we'll name it chat messages

and we'll name it chat messages equals and we'll save it as an array by

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

typing square brackets. As a review, an array is a list of

As a review, an array is a list of values. So here we want to save a list

values. So here we want to save a list of chat messages. So it makes sense to

of chat messages. So it makes sense to save it as an array.

save it as an array. Next, each chat message has multiple

Next, each chat message has multiple pieces of data, like the message and the

pieces of data, like the message and the sender. So, inside this array, we're

sender. So, inside this array, we're going to save each chat message as an

going to save each chat message as an object by typing curly brackets.

object by typing curly brackets. As a review, an object groups related

As a review, an object groups related values together. So, it's going to help

values together. So, it's going to help us group the message and the sender

us group the message and the sender together.

together. And then inside this object, we're going

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

to create a property called message colon and a string. And we're going to

colon and a string. And we're going to use this to save the message. So let's

use this to save the message. So let's copy the first message. We'll select it

copy the first message. We'll select it and copy. And we're going to paste it in

and copy. And we're going to paste it in here.

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

And then we'll add a comma. And we're going to add a sender property colon and

going to add a sender property colon and a string. and we're going to save the

a string. and we're going to save the first sender which is the user.

first sender which is the user. So that's how we save the data for the

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

first chat message in our JavaScript. Now let's save the data for the second

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

chat message. So after the first object, we're going

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

to type comma and create another object. I will give this one a message property

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

as well colon a string. and we'll save the second message.

the second message. We'll select this copy and then inside

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

here we're going to paste. Add a comma and a sender property colon

Add a comma and a sender property colon and a string. And the second chat

and a string. And the second chat message is from the robot. So inside the

message is from the robot. So inside the sender, we'll save robot.

sender, we'll save robot. Let's do the same thing for the third

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

and fourth chat messages. we'll save them in our JavaScript. Feel free to

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

pause the video if you want to try it yourself.

yourself. So, for the third chat message, we're

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

going to add a comma at the end and another object, a message property, a

another object, a message property, a string,

string, and we're going to copy the third

and we're going to copy the third message,

message, and paste it in here.

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

is from the user. And then we're going to type comma and

And then we're going to type comma and another object the message property

another object the message property colon and a string. And we'll copy paste

colon and a string. And we'll copy paste the fourth message. So we'll select it,

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

copy, and then inside here we're going to paste

to paste and a sender property.

and a sender property. And the fourth message is from the

And the fourth message is from the robot.

robot. So that's how we save the data or the

So that's how we save the data or the information for the chat messages.

After we save the data, the second step is to generate the HTML. So we're going

is to generate the HTML. So we're going to use JavaScript to convert this data

to use JavaScript to convert this data into these components. So we don't have

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

to type these components manually. To do that, after the data,

To do that, after the data, we're going to type the name of the

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

data, which is chat messages. And this is an array. And arrays have a

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

feature called dot map and brackets. As a review, do map lets us go through

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

each value of an array and convert it into a new value.

into a new value. To use dot map, we need to give it a

To use dot map, we need to give it a function. So between these brackets,

function. So between these brackets, we're going to type a function using

we're going to type a function using brackets, arrow, and curly brackets.

brackets, arrow, and curly brackets. As a review, this is an arrow function.

As a review, this is an arrow function. It mostly works the same way as a

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

function, but it's shorter. When we give a function to another function like map,

a function to another function like map, we usually use an arrow function because

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

it makes the code a bit cleaner. This is what React tutorials and

This is what React tutorials and documentations use.

documentations use. Next, this function gets a parameter. So

Next, this function gets a parameter. So at the top, we'll create a new parameter

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

and name it chat message. So now dom takes each value in this

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

array and converts it into a new value. The way it works is it starts with the

The way it works is it starts with the first value and then it saves it in this

first value and then it saves it in this parameter and runs this function and

parameter and runs this function and whatever we return from this function

whatever we return from this function will be the new first value. Then it

will be the new first value. Then it takes the second value. It saves it in

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

this parameter and runs the function. And whatever we return from the function

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

will be the new second value. Then it takes the third value, saves it, runs a

takes the third value, saves it, runs a function and whatever we return will be

function and whatever we return will be the new third value and so on. So map

the new third value and so on. So map basically goes through each value in

basically goes through each value in this array, runs a function and converts

this array, runs a function and converts it into a new value.

So here we want to convert each chat message object into a chat message

message object into a chat message component. So inside this inner

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

function, we're going to return a chat message component by typing brackets

message component by typing brackets and then here less than chat

and then here less than chat message/grater

message/grater than to return a chat message component.

than to return a chat message component. Next, each chat message component has

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

two props, message and sender. So we're going to add those props to this

going to add those props to this component.

component. So here

So here we'll create a prop message

we'll create a prop message equals

equals and now what do we save in this prop?

and now what do we save in this prop? Remember that map takes each object in

Remember that map takes each object in this array and saves it in this

this array and saves it in this parameter. So this parameter contains a

parameter. So this parameter contains a chat message object and each chat

chat message object and each chat message object has a message and a

message object has a message and a sender. So we want to save the message

sender. So we want to save the message inside this prop.

inside this prop. To do that we're going to type curly

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

brackets and inside we'll type this object chat message and get the message

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

property which is dot message. This gets the message out of this object

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

and saves it in the prop. So why do we use curly brackets here

So why do we use curly brackets here instead of double quotes? If we use

instead of double quotes? If we use double quotes, it will save a string

double quotes, it will save a string into this prop, which is not what we

into this prop, which is not what we want. But if we use curly brackets, it

want. But if we use curly brackets, it will save the result of this code into

will save the result of this code into this prop.

this prop. So for the first chat message, the

So for the first chat message, the result of chat message dossage is going

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

to be the string hello chatbot. So it's going to take this and save it into the

going to take this and save it into the message prop here. For the second chat

message prop here. For the second chat message, the result of this code is

message, the result of this code is hello, how can I help you? And it will

hello, how can I help you? And it will save this into the message prop and so

save this into the message prop and so on. So using curly brackets we can put

on. So using curly brackets we can put any JavaScript code inside and it will

any JavaScript code inside and it will save the result of this code into the

save the result of this code into the prop not just a string.

prop not just a string. So next each chat message component has

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

a sender prop. So here we're also going to add a sender

to add a sender equals and again we want to save the

equals and again we want to save the sender property of this chat message

sender property of this chat message object. So we'll type curly brackets and

object. So we'll type curly brackets and the object

the object chat message dot sender.

chat message dot sender. So this will get the sender property out

So this will get the sender property out of each chat message object and save it

of each chat message object and save it in here. And that's it. Now map will

in here. And that's it. Now map will take each value of this array and

take each value of this array and convert it into a chat message

convert it into a chat message component.

component. And here's what the result looks like.

Next, we're going to save the result of this code in a variable. So, up here,

this code in a variable. So, up here, let's type const and we'll name the

let's type const and we'll name the variable chat message components equals

variable chat message components equals this code.

this code. And now we have an array of components

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

or a list of components. Finally, we're going to insert this

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

array into the JSX. So, down here, we can actually remove

So, down here, we can actually remove all of these chat message components

all of these chat message components because we're generating them now.

because we're generating them now. And we're going to type curly brackets,

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

and we're going to insert this array. In here, we'll type chat message

In here, we'll type chat message components.

components. If we insert an array of components,

If we insert an array of components, React will just display all of these

React will just display all of these components on the page. If we save

components on the page. If we save and then go to our project,

and then go to our project, it displays all the chat message

it displays all the chat message components that we generated with our

components that we generated with our JavaScript.

JavaScript. So now we're generating this HTML with

So now we're generating this HTML with JavaScript and we no longer have to type

JavaScript and we no longer have to type out each component manually.

out each component manually. Now, there's one more thing that's

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

useful to know. Let's go back to our code.

code. And there's actually a shortcut that we

And there's actually a shortcut that we can use here. Instead of saving this

can use here. Instead of saving this result in a variable, we can actually

result in a variable, we can actually just insert this result directly in the

just insert this result directly in the JSX.

JSX. So, we'll select this code

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

and then cut. And between the curly brackets, we're

And between the curly brackets, we're going to remove the variable and just

going to remove the variable and just paste that code.

paste that code. And we'll remove the semicolon at the

And we'll remove the semicolon at the end.

end. And we'll select this code and press tab

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

a few times to fix the indenting. And finally, we can remove this variable

And finally, we can remove this variable up here.

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

this code directly in the JSX. This shortcut is used a lot in React

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

tutorials and documentation. So it's useful to know how it works.

useful to know how it works. Now let's save

Now let's save and then check our website.

and then check our website. And everything still works. So that's

And everything still works. So that's how we generate the HTML.

Before we move on, there's actually an issue that we need to fix here. If we

issue that we need to fix here. If we look at our console and we scroll up,

look at our console and we scroll up, we'll see an error saying each child in

we'll see an error saying each child in a list should have a unique key prop. In

a list should have a unique key prop. In React, if we insert an array of

React, if we insert an array of components, we need to give each

components, we need to give each component a prop called key. The key

component a prop called key. The key helps React track changes in the array.

helps React track changes in the array. So, we should give each component a key.

So, we should give each component a key. Let's go back to VS Code

Let's go back to VS Code and for each chat message, we're going

and for each chat message, we're going to add a prop called key equals.

to add a prop called key equals. And this key has to be unique. So, what

And this key has to be unique. So, what should we use as the key?

should we use as the key? Usually when we have some data like this

Usually when we have some data like this in the real world, each piece of data

in the real world, each piece of data should have a unique ID that lets us

should have a unique ID that lets us identify it. So let's add a unique ID to

identify it. So let's add a unique ID to each message to match what we would see

each message to match what we would see in the real world. So for the first

in the real world. So for the first message after the sender, we'll add a

message after the sender, we'll add a property called ID colon. And let's just

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

make it a string ID1 to keep it simple. For the second message, we'll add an ID

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

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

message, we'll make the ID ID3. And for the fourth message, we'll add an ID

the fourth message, we'll add an ID string ID 4. So, we'll use these IDs for

string ID 4. So, we'll use these IDs for practice. They just have to be unique.

practice. They just have to be unique. And now we'll use this unique ID as the

And now we'll use this unique ID as the key. So down here we'll set the key to

key. So down here we'll set the key to be equal to curly brackets and we'll get

be equal to curly brackets and we'll get the chat message do ID.

the chat message do ID. So chat message

So chat message id.

id. Again we use curly brackets here because

Again we use curly brackets here because we want to save the result of this code

we want to save the result of this code as the key. And now each component in

as the key. And now each component in this array will have a unique key. Let's

this array will have a unique key. Let's save and check our website.

save and check our website. And now the error is gone from the

And now the error is gone from the console.

console. Let's go back to our code.

Let's go back to our code. And now we have a lot of code in our app

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

component. To make our code easier to work with,

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

we're going to separate this code into smaller pieces.

smaller pieces. Notice that this code and this code are

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

related to chat messages. So it makes sense to separate these two

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

pieces of code into a chat messages component.

component. So we'll scroll up

So we'll scroll up above app. Let's create a new component

above app. Let's create a new component using function and we'll name it capital

using function and we'll name it capital C chat capital M messages

C chat capital M messages brackets and curly brackets.

brackets and curly brackets. And now we're going to move all the code

And now we're going to move all the code related to chat messages into this new

related to chat messages into this new component. So we'll select this code

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

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

and create some new lines. And we're going to select this code

going to select this code and cut.

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

And inside here, we're going to paste. And at the end of this component, we

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

need to return the HTML. So at the end we're going to return open

So at the end we're going to return open bracket and we'll remove the closed

bracket and we'll remove the closed bracket for now and we're going to use a

bracket for now and we're going to use a fragment to group all of these

fragment to group all of these components together. So we'll type less

components together. So we'll type less than greater than and at the end of this

than greater than and at the end of this less than/greater than and we'll add the

less than/greater than and we'll add the close bracket at the end. And finally,

close bracket at the end. And finally, we can fix the indenting by pressing

we can fix the indenting by pressing tab. And we'll remove the indent here

tab. And we'll remove the indent here and here as well, so that these are

and here as well, so that these are vertically aligned.

vertically aligned. Finally, now that we have this chat

Finally, now that we have this chat messages component, we're going to

messages component, we're going to insert this into our app. So, we'll

insert this into our app. So, we'll scroll down into app and remove these

scroll down into app and remove these lines.

lines. And to insert the chat messages

And to insert the chat messages component, we'll use the component

component, we'll use the component syntax again. Less than capital C chat

syntax again. Less than capital C chat capital M messages

capital M messages slash greater than.

slash greater than. So now we just separated all that code

So now we just separated all that code into its own component and it makes our

into its own component and it makes our code much cleaner. Let's save

code much cleaner. Let's save and check our website.

and check our website. And everything still works. We just

And everything still works. We just reorganized our code into a chat

reorganized our code into a chat messages component.

messages component. Okay, so far we saved the data and we

Okay, so far we saved the data and we generated the HTML. The last step to

generated the HTML. The last step to building a website is to make it

building a website is to make it interactive.

interactive. For example, when we click this send

For example, when we click this send button, we want to add a chat message to

button, we want to add a chat message to the website. To make this website

the website. To make this website interactive, we're going to use event

interactive, we're going to use event handlers.

handlers. An event handler lets us run a function

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

when we interact with a website. Let's do an example. We'll go back to

Let's do an example. We'll go back to our code

our code and we're going to scroll up to the chat

and we're going to scroll up to the chat messages component

messages component and then inside this fragment we're

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

going to create a new line and let's create a new button using less than

create a new button using less than button greater than and less than/button

button greater than and less than/button greater than and inside this button

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

let's put the text send message. So, we'll create a new button for

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

practice. Next, we're going to give this button a

Next, we're going to give this button a special prop. So, here we'll add a new

special prop. So, here we'll add a new prop called on capital C click equals

prop called on capital C click equals curly brackets.

curly brackets. So, on click lets us run a function when

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

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

let's create a function to run. So we'll type function and let's name it send

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

message brackets and curly brackets and inside this function let's just

and inside this function let's just console.log

console.log the string send message.

the string send message. Now that we have this function we're

Now that we have this function we're going to save this function inside on

going to save this function inside on click. So between these curly brackets,

click. So between these curly brackets, we're going to give the name of the

we're going to give the name of the function send message.

function send message. So notice that again we used curly

So notice that again we used curly brackets. Curly brackets lets us save

brackets. Curly brackets lets us save any type of value in a prop including a

any type of value in a prop including a function.

function. Now that we gave on click this function,

Now that we gave on click this function, when we click this button, it's going to

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

run this function and console.log this message. Let's save

message. Let's save and we'll go to our website

and we'll go to our website and try clicking this new send message

and try clicking this new send message button

button and this will run the function and

and this will run the function and display the message send message in the

display the message send message in the console.

console. Let's go back to our code

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

and we'll learn more details about event handlers.

handlers. So on click is known as the event and

So on click is known as the event and send message is known as the event

send message is known as the event handler. It does something when this

handler. It does something when this event happens or it handles the event.

event happens or it handles the event. Now there's two other things to note.

Now there's two other things to note. The event prop always starts with on and

The event prop always starts with on and then the name of the event like click

then the name of the event like click and the event prop must use camelc case.

and the event prop must use camelc case. As a review, camelc case means the first

As a review, camelc case means the first word is lowercase and all other words

word is lowercase and all other words start with a capital. So that's why on

start with a capital. So that's why on is lowercase and click starts with a

is lowercase and click starts with a capital C.

capital C. Another thing we should know is that

Another thing we should know is that here we should not run the event handler

here we should not run the event handler function. So we should not use brackets.

function. So we should not use brackets. So this will run the function and then

So this will run the function and then the result of the function will be

the result of the function will be undefined. and then it's going to save

undefined. and then it's going to save undefined into on click which doesn't

undefined into on click which doesn't work. Instead, we should just give the

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

function directly to on click without running it.

running it. So that's event handlers and event

So that's event handlers and event handler lets us run a function when we

handler lets us run a function when we interact with a website and they make

interact with a website and they make the website interactive.

Next, when we click this button, instead of just console.log, log. Let's add a

of just console.log, log. Let's add a new chat message. To do that, we can add

new chat message. To do that, we can add a new object to the chat messages array

a new object to the chat messages array up here. So, inside this function, let's

up here. So, inside this function, let's remove console.log

remove console.log and then type the name of the array chat

and then type the name of the array chat messages and then use the code.push

messages and then use the code.push and brackets.

and brackets. As a review, dot push adds a value to

As a review, dot push adds a value to the end of an array. So inside here,

the end of an array. So inside here, we're going to add another object using

we're going to add another object using curly brackets.

curly brackets. And each object will have a message

And each object will have a message property. So we'll type message colon

property. So we'll type message colon and then a string. And for our new

and then a string. And for our new message, let's just make the message

message, let's just make the message test.

test. And we'll add a comma. And we'll add a

And we'll add a comma. And we'll add a sender property sender colon a string

sender property sender colon a string and this message will be from the user

and this message will be from the user comma and we'll give it an ID colon and

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

let's just use the string ID5. Now there's one problem with using ID5

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

in this situation. Every message that we create when we

Every message that we create when we click this button is going to have the

click this button is going to have the ID ID5. But the ID should be unique. To

ID ID5. But the ID should be unique. To create a unique ID, we can use some

create a unique ID, we can use some JavaScript code. So instead of ID5,

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

we're going to use the code crypto dot random capital U, capital U, capital I,

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

capital D, and brackets. So this is some JavaScript code that

So this is some JavaScript code that will generate a unique ID string every

will generate a unique ID string every time we run this code. So now every

time we run this code. So now every message that we create using this button

message that we create using this button will have a unique ID

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

at the end. Let's create some new lines and let's console.log

and let's console.log the chat messages array to see if it has

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

a new message. Let's save and we'll go to our website

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

and we'll click send message. And now inside chat messages, we have

And now inside chat messages, we have five messages. So we added this last one

five messages. So we added this last one here. It has the message test. And

here. It has the message test. And notice it has a unique ID. So we

notice it has a unique ID. So we successfully added a chat message when

successfully added a chat message when clicking this button.

clicking this button. Next, notice that even though we updated

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

the data, it did not update the website. So, it did not display a new chat

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

message component on the website. To fix this, we're going to learn one of the

this, we're going to learn one of the most important features of React called

most important features of React called state. State is data that is connected

state. State is data that is connected to the HTML. When we update this data,

to the HTML. When we update this data, it will update the HTML.

it will update the HTML. Let's go back to our code.

Let's go back to our code. And if we scroll up,

And if we scroll up, currently chat messages is just a normal

currently chat messages is just a normal variable. When we update chat messages,

variable. When we update chat messages, it will not update the HTML.

it will not update the HTML. However, if we convert chat messages

However, if we convert chat messages into state, when we update chat

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

messages, it will update the HTML. So now let's learn how to convert chat

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

messages into state. At the top of this component, we're

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

going to use this code capital R react dot use capital S state and brackets.

dot use capital S state and brackets. And between the brackets, we're going to

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

give it the chat messages data. So, we're going to select this data

we're going to select this data and cut.

and cut. and between these brackets we're going

and between these brackets we're going to paste.

So this will convert this data into state. So now if we update this data, it

state. So now if we update this data, it will also update the HTML.

will also update the HTML. So at the bottom here, we can remove the

So at the bottom here, we can remove the chat messages variable because we

chat messages variable because we converted it into state.

converted it into state. Next, react doouse state returns an

Next, react doouse state returns an array. So at the front, let's save the

array. So at the front, let's save the result in a variable const array equals

result in a variable const array equals react. State.

react. State. This array has two values. To get the

This array has two values. To get the first value, we can click here to

first value, we can click here to collapse the code for now. And to get

collapse the code for now. And to get the first value, we're going to type the

the first value, we're going to type the name of the array. Array and then square

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

brackets zero. So remember, an array is a list of

So remember, an array is a list of values and square bracket zero gets us

values and square bracket zero gets us the first value in the list or in the

the first value in the list or in the array.

array. So the first value we get from use state

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

is the current data. So here chat messages can change over

So here chat messages can change over time. It's going to start off as this

time. It's going to start off as this value which is the initial value and

value which is the initial value and then we might add new chat messages in

then we might add new chat messages in the future.

the future. So the first value in this array gives

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

us the current value of chat messages or the current data.

the current data. Let's save this in a variable so we can

Let's save this in a variable so we can use it later. We'll do const and let's

use it later. We'll do const and let's name it chat messages equals array zero.

name it chat messages equals array zero. So now we have the most current chat

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

messages and we can use it down here to generate the HTML.

generate the HTML. Next use state gives us a second value

Next use state gives us a second value in this array. To get the second value

in this array. To get the second value we're going to type array square bracket

we're going to type array square bracket 1.

1. And the second value of this array is a

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

function that updates this data. So let's save this function in a

So let's save this function in a variable using const. And the naming

variable using const. And the naming convention for this function is a use

convention for this function is a use set. And then the name of the data which

set. And then the name of the data which is capital C chat capital M messages

is capital C chat capital M messages equals this value. And we should also

equals this value. And we should also use camel case here. So the first word

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

starts with a lowercase and every other word starts with a capital.

word starts with a capital. So this function lets us update the

So this function lets us update the data. In React, we should not update the

data. In React, we should not update the data directly like we did down here

data directly like we did down here using push. We should always use this

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

function to update the data. And that's because this function tells React that

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

the data changed and to update the HTML. If we update the data directly, React

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

will not update the HTML. If we use this function to update the

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

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

should always use this function to update the data. This is also known as

update the data. This is also known as the updater function.

So now let's give it a try. Instead of updating this data directly, we're going

updating this data directly, we're going to use this updater function by typing

to use this updater function by typing set chat messages and brackets.

set chat messages and brackets. And between the brackets, we're going to

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

put the new value of chat messages. So the way that this updator function

So the way that this updator function works is it's going to replace the

works is it's going to replace the entire chat messages array with a new

entire chat messages array with a new array. So let's give it a try. First, we

array. So let's give it a try. First, we need to make a copy of this array.

need to make a copy of this array. In React, we should not modify the data

In React, we should not modify the data directly. We should always create a copy

directly. We should always create a copy of the data and then modify the copy.

of the data and then modify the copy. This helps React be more efficient.

This helps React be more efficient. To create a copy, we're going to click

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

between these brackets and create a new array using square brackets.

array using square brackets. And to copy chat messages, we can use

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

this code dot dot dot and the array that we want to copy, which is chat messages.

we want to copy, which is chat messages. As a review, this is a JavaScript

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

feature called the spread operator. It basically takes the values in an array

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

and then copies them into a new array. You can think of it like we're taking

You can think of it like we're taking the values in this array and then

the values in this array and then spreading them out into this new array.

spreading them out into this new array. That's why it's called the spread

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

operator. The spread operator is used a lot in

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

React tutorials and documentation. So, it's useful to know how it works.

it's useful to know how it works. So, we created a copy of chat messages.

So, we created a copy of chat messages. And now we want to add a new chat

And now we want to add a new chat message at the end of this copy because

message at the end of this copy because we're trying to send a new message. To

we're trying to send a new message. To do that, we can just add a comma at the

do that, we can just add a comma at the end and then add a new chat message

end and then add a new chat message directly using curly brackets.

directly using curly brackets. So each chat message has a message

So each chat message has a message property colon and we'll give it the

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

string test for now. And each chat message has a sender property colon. And

message has a sender property colon. And let's make the sender the user.

let's make the sender the user. And we'll give each chat message an ID.

And we'll give each chat message an ID. And to create a unique ID we can use

And to create a unique ID we can use crypto

crypto random capital U capital U capital I

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

capital D and brackets. So using the spread operator we made a

So using the spread operator we made a copy of the chat messages array and then

copy of the chat messages array and then we added a value at the end of this new

we added a value at the end of this new array.

array. And now this updater function will

And now this updater function will replace chat messages with this new

replace chat messages with this new array. And because we use this updater

array. And because we use this updater function, React will regenerate the

function, React will regenerate the HTML. So it will basically rerun all

HTML. So it will basically rerun all this code and it will update the

this code and it will update the website. So now let's save

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

and let's check our website and we'll press send message.

and we'll press send message. it will create a new chat message in our

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

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

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

component and display it on the website. Now let's go back

Now let's go back and that is how state works. Let's do a

and that is how state works. Let's do a short review. State is basically data

short review. State is basically data that is connected to the HTML. When we

that is connected to the HTML. When we update this data or we update the state,

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

it will update the HTML. To convert some data into state, we use

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

react doouse state. So here it will convert this data into state and use

convert this data into state and use state gives us two values.

state gives us two values. The first value is the current data and

The first value is the current data and then the second value is a function to

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

update this data. If we use the updater function, it will also update the HTML.

function, it will also update the HTML. So don't worry if state is a little bit

So don't worry if state is a little bit confusing at first. The more you work

confusing at first. The more you work with state, the more you'll get used to

with state, the more you'll get used to it. And we'll do more examples of state

it. And we'll do more examples of state in this course and in the exercises so

in this course and in the exercises so you can get more practice.

you can get more practice. Next, we're going to learn a shortcut

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

called array destructuring. Here we get the first value out of this

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

array and save it in a variable called chat messages.

chat messages. Now JavaScript actually has a shortcut

Now JavaScript actually has a shortcut for this. Above this we can type const

for this. Above this we can type const and then square bracket equals this

and then square bracket equals this array

array and inside the square brackets we can

and inside the square brackets we can type chat messages.

type chat messages. So this is similar to object

So this is similar to object dstructuring. This gets the first value

dstructuring. This gets the first value out of this array and saves it in a

out of this array and saves it in a variable called chat messages. So this

variable called chat messages. So this code is a shortcut for this code. We can

code is a shortcut for this code. We can also get the second value out of this

also get the second value out of this array. At the end here we can type comma

array. At the end here we can type comma and then another variable name. Let's

and then another variable name. Let's use set chat messages.

use set chat messages. So this gets the second value out of

So this gets the second value out of this array and saves it in a variable

this array and saves it in a variable called set chat messages. So this code

called set chat messages. So this code is a shortcut for these two lines of

is a shortcut for these two lines of code. And this shortcut is called array

code. And this shortcut is called array dstructuring because we're taking stuff

dstructuring because we're taking stuff out of this array. We're deconstructing

out of this array. We're deconstructing it. Now in array dstructuring the order

it. Now in array dstructuring the order matters. So this will always get the

matters. So this will always get the first value out of the array and this

first value out of the array and this will always get the second value out of

will always get the second value out of the array.

the array. So now let's comment out these two

So now let's comment out these two lines. So we remember that this is just

lines. So we remember that this is just a shortcut. So we'll type double slash

a shortcut. So we'll type double slash at the front and here double slash at

at the front and here double slash at the front.

the front. Now another shortcut we can use is

Now another shortcut we can use is instead of saving the result of use

instead of saving the result of use state in this variable and then

state in this variable and then dstructuring it we can just dstructure

dstructuring it we can just dstructure this up here.

this up here. So instead of array we can just directly

So instead of array we can just directly dstructure using square brackets and

dstructure using square brackets and then the first value of u state is going

then the first value of u state is going to be chat messages

to be chat messages and the second value from state is going

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

to be the updater function which is set chat messages.

chat messages. So this code is a shortcut for this

So this code is a shortcut for this code. We just don't save it in a

code. We just don't save it in a variable in the middle.

variable in the middle. So at the front of this code, let's also

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

comment it out using double slash. So that is array dstructuring. It gives

So that is array dstructuring. It gives us an easier way to take values out of

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

an array. Now this shortcut is used a lot in React

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

tutorials and documentation. So it's useful to know how it works.

Next, instead of adding the same message test every time, we should add whatever

test every time, we should add whatever message is in the text box. So, we'll

message is in the text box. So, we'll learn how to get the text in a text box.

learn how to get the text in a text box. In normal JavaScript, we might use the

In normal JavaScript, we might use the DOM to get the input element and then

DOM to get the input element and then use a property called dot value to get

use a property called dot value to get the text inside the text box.

the text inside the text box. However, in React, a best practice is do

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

not use the DOM manually. That's because React is managing the website. So, if we

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

use the DOM manually, it might interfere with React.

with React. Instead, we should use React features to

Instead, we should use React features to get the text from a text box. One way to

get the text from a text box. One way to do this is we're going to scroll up to

do this is we're going to scroll up to the text box which is inside the chat

the text box which is inside the chat input component and it's the input

input component and it's the input element here. So to get the text in this

element here. So to get the text in this text box we can use a prop called on

text box we can use a prop called on capital C change equals curly brackets.

capital C change equals curly brackets. Earlier we learned about the event on

Earlier we learned about the event on click which runs a function when we

click which runs a function when we click an element. On change is another

click an element. On change is another event we can use in React. You can tell

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

it's an event because it starts with on. So onchange runs a function when we

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

change the text inside an input. So above this let's create a function to

So above this let's create a function to run. We'll type function

run. We'll type function and let's name it save input text

and let's name it save input text brackets and curly brackets because

brackets and curly brackets because we're going to save the text inside this

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

input. And now let's save this function inside

And now let's save this function inside on change. So between the curly brackets

on change. So between the curly brackets we'll give it the function save input

we'll give it the function save input text. So again we use curly brackets

text. So again we use curly brackets here because we want to save a function

here because we want to save a function inside this prop rather than just a

inside this prop rather than just a string. So now every time we change the

string. So now every time we change the text in this input it will run this

text in this input it will run this function.

function. Next when onchange runs this function

Next when onchange runs this function it's going to give this function one

it's going to give this function one parameter up here called event.

parameter up here called event. event is an object and it contains

event is an object and it contains details about the event or about the

details about the event or about the change. So one detail is event dot

change. So one detail is event dot target

target and this gives us the element that we're

and this gives us the element that we're typing in or that we changed. So in this

typing in or that we changed. So in this case it's going to give us this input

case it's going to give us this input element. So React gives us access to

element. So React gives us access to this input element automatically using

this input element automatically using event.target. target.

event.target. target. And now to get the text inside this

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

input, we're going to use the property value.

value. So now let's console.log this to see

So now let's console.log this to see what it looks like. console.log

and let's save our code and we'll go back to our website

and we'll go back to our website and we'll give it a try. So we'll click

and we'll give it a try. So we'll click this text box and we're going to type

this text box and we're going to type hello.

hello. And you'll see that every time we type

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

or change the text, it will console.log the text in the text box. So that is how

the text in the text box. So that is how we get the text inside the text box

we get the text inside the text box using an onchange event.

Let's go back to our code. And now we need to save this text so we

And now we need to save this text so we can use it later when creating a chat

can use it later when creating a chat message. To save this text, we're going

message. To save this text, we're going to use state. In React, we should use

to use state. In React, we should use state to save data that changes over

state to save data that changes over time, like the text in the text box. So,

time, like the text in the text box. So, at the top of this component,

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

let's use the code react dot use state and brackets.

and brackets. And between the brackets, we're going to

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

put the initial value. In this case, the initial value in the text box.

initial value in the text box. The text box originally starts as empty.

The text box originally starts as empty. So let's set the value to the empty

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

string. Next, use state returns an array with

Next, use state returns an array with two values. So at the front, let's use

two values. So at the front, let's use array dstructuring using const and we'll

array dstructuring using const and we'll type square brackets equals this result.

type square brackets equals this result. And now to get the first value out of

And now to get the first value out of this array inside the square brackets

this array inside the square brackets we're going to type input text.

we're going to type input text. So this is the current data or the

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

current text in the text box. So that's why we name it input text.

why we name it input text. To get the second value out of this

To get the second value out of this array after this we can type comma and

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

give a name for the second value. So the naming convention is to use the word set

naming convention is to use the word set and then the name of the data which is

and then the name of the data which is capital I input capital T text.

capital I input capital T text. So this second value is an updator

So this second value is an updator function. It lets us update the data.

function. It lets us update the data. Now that we set up the state, every time

Now that we set up the state, every time we change the text, we're going to save

we change the text, we're going to save it up here inside input text. To do

it up here inside input text. To do that, instead of console.log,

that, instead of console.log, we're going to use the updater function

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

set input text. And now, every time we change the text,

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

it's going to run this function. And it's going to save the text inside input

it's going to save the text inside input text.

Next, when we click the send button, we want to use this text to create a new

want to use this text to create a new chat message. First, we need to make the

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

send button interactive. To do that, inside this button element,

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

we're going to add the prop on click equals curly brackets.

equals curly brackets. Again, on click lets us run a function

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

when we click this button. And now above this, let's create a

And now above this, let's create a function to run. We'll use function

function to run. We'll use function and let's name it send message brackets

and let's name it send message brackets and curly brackets and we're going to

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

give this function to on click. So down here we'll give the function name send

here we'll give the function name send message.

message. Now when we click this button it will

Now when we click this button it will run this function and let's just

run this function and let's just console.log input text to see what the

console.log input text to see what the value is. So in here we'll console.log

value is. So in here we'll console.log brackets the input text and save.

brackets the input text and save. And we'll go back to our website

And we'll go back to our website and in the text box we're going to type

and in the text box we're going to type hello and then press send.

hello and then press send. And you'll see that it console.logs the

And you'll see that it console.logs the text inside the text box.

Next, we're going to create a new chat message using this text. Let's go back

message using this text. Let's go back to our code.

to our code. And if we scroll down in our code

to the chat messages component, we already have code here that adds a new

already have code here that adds a new message to chat messages. So, let's just

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

select this code and we'll copy. And at the top

And at the top inside send message, we're going to

inside send message, we're going to paste. And we can remove this

paste. And we can remove this console.log.

console.log. And we'll scroll back down.

And we created this function and this button for practice. But now we don't

button for practice. But now we don't need it anymore. So we can actually

need it anymore. So we can actually remove this code

remove this code and remove this practice button.

and we're going to use this code to add a new chat message.

a new chat message. However, we have a problem here. We

However, we have a problem here. We don't actually have access to set chat

don't actually have access to set chat messages inside this component because

messages inside this component because this is inside a different component. To

this is inside a different component. To solve this problem, we're going to learn

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

a technique called lifting the state up. First we need to visualize the

First we need to visualize the components in our app. So we have an app

components in our app. So we have an app component which represents the entire

component which represents the entire application and inside we have a chat

application and inside we have a chat input component and a chat messages

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

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

component we have some chat message components.

components. This is called the component tree

This is called the component tree because it looks like the branch of a

because it looks like the branch of a tree and this helps us visualize the

tree and this helps us visualize the structure of the components in our app.

structure of the components in our app. Currently, chat messages and set chat

Currently, chat messages and set chat messages are located inside the chat

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

messages component, but we want to use it in the chat input component as well.

it in the chat input component as well. To solve this problem, we're going to

To solve this problem, we're going to move this state up into the app

move this state up into the app component and then app can share chat

component and then app can share chat messages and set chat messages between

messages and set chat messages between these two components.

these two components. This technique is called lifting the

This technique is called lifting the state up. By moving the state up to an

state up. By moving the state up to an outer component, it lets us share state

outer component, it lets us share state between multiple components.

So, let's give this a try. First, we're going to move the chat messages state up

going to move the chat messages state up into app. So, in our code, we're going

into app. So, in our code, we're going to scroll down

to scroll down to the chat messages state, which is

to the chat messages state, which is right here, and we're going to move it

right here, and we're going to move it into the app component. So, we'll select

into the app component. So, we'll select all this code,

all this code, and then cut

and then cut and remove these lines.

and remove these lines. And then inside the app component,

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

we'll create some new lines and paste. So now we lifted the state up into the

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

app component. Next, we're going to share the state

Next, we're going to share the state between the two components using props.

So first, the chat input component needs set chat messages and chat messages.

set chat messages and chat messages. So down here, let's create two props for

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

this component. We'll create a prop called chat messages

We'll create a prop called chat messages equals curly brackets. And we're going

equals curly brackets. And we're going to save the value of chat messages from

to save the value of chat messages from the state. So we'll save chat messages.

the state. So we'll save chat messages. And we'll give it another prop called

And we'll give it another prop called set chat messages equals curly brackets.

set chat messages equals curly brackets. And we'll give it the set chat messages

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

function from the state. So set chat messages.

So set chat messages. By the way, notice that chat messages is

By the way, notice that chat messages is an array. So using curly brackets, we

an array. So using curly brackets, we can save an array into this prop. So we

can save an array into this prop. So we can save any type of value inside a

can save any type of value inside a prop.

prop. And then inside chat input, we can

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

access these two props by scrolling up. And in the chat input component at the

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

top, we'll type curly brackets and we'll get the chat messages prop,

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

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

prop. And now this code has access to set chat

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

messages and chat messages. Next, let's scroll back down

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

to the chat messages component. So here we just need the chat messages

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

array to generate the HTML. So let's provide chat messages using a prop at

provide chat messages using a prop at the bottom

the bottom at the chat messages component. We're

at the chat messages component. We're going to add a prop. chat messages

going to add a prop. chat messages equals curly brackets and we'll give it

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

the chat messages array. So here chat messages.

messages. Now I want to talk about the naming

Now I want to talk about the naming convention used here. You'll notice that

convention used here. You'll notice that the component, the prop and the data all

the component, the prop and the data all use the same name. Instead of using

use the same name. Instead of using names like this,

this is the naming convention used in the React documentation.

the React documentation. The documentation tries to use the same

The documentation tries to use the same name for many things like the component,

name for many things like the component, the props, and the data. This keeps

the props, and the data. This keeps things simple and consistent. We don't

things simple and consistent. We don't have to come up with different names

have to come up with different names every time. And when we look at other

every time. And when we look at other people's React code, the names will be

people's React code, the names will be the same.

the same. So, don't worry. It might be a bit

So, don't worry. It might be a bit confusing at first because many things

confusing at first because many things use the same name. The more you work

use the same name. The more you work with React, the more you'll get used to

with React, the more you'll get used to this naming convention, and we'll get

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

Now to access this prop, we're going to scroll up

scroll up and up here we'll type curly bracket

and up here we'll type curly bracket and we'll get the chat messages prop.

and we'll get the chat messages prop. And now this code has access to

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

everything that it needs. Let's save our code and then check our website.

code and then check our website. And you'll notice that everything still

And you'll notice that everything still works. We just lifted the state up into

works. We just lifted the state up into the app component and shared it between

the app component and shared it between chat input and chat messages.

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

and we're going to scroll up to the chat input component.

input component. So now that chat input has access to set

So now that chat input has access to set chat messages, let's use it to create a

chat messages, let's use it to create a new chat message. So when we click send,

new chat message. So when we click send, we're going to run set chat messages and

we're going to run set chat messages and we're going to give it a copy of the

we're going to give it a copy of the chat messages array with a new message

chat messages array with a new message at the end. In this new message, instead

at the end. In this new message, instead of test every time, we're going to use

of test every time, we're going to use the text inside the text box, which is

the text inside the text box, which is saved in input text. So, we'll remove

saved in input text. So, we'll remove this and replace it with input text.

this and replace it with input text. The sender will be the user because we

The sender will be the user because we sent this message. And we'll give the

sent this message. And we'll give the message a unique ID. And that's it. This

message a unique ID. And that's it. This will update the chat messages array with

will update the chat messages array with this new message. And because we use the

this new message. And because we use the updater function, React will also update

updater function, React will also update the HTML.

the HTML. So, let's save.

So, let's save. And we'll go to our project.

And we'll go to our project. Inside this text box, let's type hello

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

and press send. It will take the text in the text box,

It will take the text in the text box, create a new chat message, and it will

create a new chat message, and it will update the HTML.

Next, there is one improvement that we can make at this point. If we scroll up

can make at this point. If we scroll up after we press send, we should also

after we press send, we should also remove the text in the text box. So, we

remove the text in the text box. So, we don't have to manually remove it if we

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

want to send another message. To do that, we're going to learn a

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

feature called controlled inputs. Let's go back to our code.

Let's go back to our code. And after adding a new message, we're

And after adding a new message, we're going to remove the text in the text

going to remove the text in the text box. So after this, let's use the

box. So after this, let's use the updater function. Set input text

updater function. Set input text brackets

brackets will change the input text to the empty

will change the input text to the empty string.

string. So this will update the input text up

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

here to be empty. However, it will not update the HTML

However, it will not update the HTML yet.

yet. To update the HTML, we need to use this

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

input text inside this HTML. To do that, we're going to give the

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

input element a prop called value equals curly brackets.

curly brackets. So value lets us change the value of

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

this input or the text inside this input.

input. So we're going to set the value to

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

whatever input text is. So now if we set the input text to be

So now if we set the input text to be empty, this will set the value to be

empty, this will set the value to be empty as well and it will make the text

empty as well and it will make the text box empty.

box empty. Let's save.

Let's save. We'll go back to our website.

We'll go back to our website. Inside the text box, we're going to type

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

hello and press send. And you'll notice that it makes the text

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

box empty after we send. So let's go back to our code.

back to our code. And this is called a controlled input.

And this is called a controlled input. Using the value prop, we can control the

Using the value prop, we can control the text inside this text box using our

text inside this text box using our code.

The last feature we're going to work on in this lesson is if we scroll up after

in this lesson is if we scroll up after we send a message, we're going to get a

we send a message, we're going to get a response from the chatbot.

To get a response, we're going to use another external library. So, we'll

another external library. So, we'll scroll up to the script elements up

scroll up to the script elements up here. And to add another external

here. And to add another external library, we're going to add another

library, we're going to add another script element.

script element. And we're going to give this element the

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

source attribute equals double quotes. And we're going to give it the URL of

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

the external library. Now, this is another external library that I wrote.

another external library that I wrote. So, let's just copy one of these URLs up

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

here with super simple dev. And we'll copy.

copy. And inside here, we're going to paste.

And inside here, we're going to paste. And then at the end, instead of

And then at the end, instead of react.js,

react.js, we're going to load chatbot.js

we're going to load chatbot.js and save.

and save. So now, let's take a look at the code in

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

this URL. On Windows, you can press control and

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

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

press command and click this link. If it doesn't open, you can also type

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

the URL in the browser. So again, an external library is just

So again, an external library is just normal JavaScript code that someone else

normal JavaScript code that someone else wrote. In this case, it's some code that

wrote. In this case, it's some code that I wrote. And this JavaScript code

I wrote. And this JavaScript code creates a simple chatbot.

creates a simple chatbot. This is an object and it has a method

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

called get response. We just have to give it our message and

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

it will return a response. So now let's use this external library.

So now let's use this external library. We'll go back to VS Code

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

and we'll scroll down to chat input. And now after we send a message below this,

now after we send a message below this, let's use the chatbot external library

let's use the chatbot external library to get a response. So the external

to get a response. So the external library creates a variable called

library creates a variable called capital C chatbot.

capital C chatbot. This is an object and it has a method

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

called dot get response and brackets. Between the brackets, we're just going

Between the brackets, we're just going to put the message that we sent, which

to put the message that we sent, which is input text. So in here, we'll type

is input text. So in here, we'll type input text

input text and get response will return a response.

and get response will return a response. So let's save it in a variable using

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

const and we'll name it response. equals this result. And next, let's just

equals this result. And next, let's just console.log the response to see what it

console.log the response to see what it looks like. console.log

looks like. console.log the response

the response and save.

and save. And now let's go to our website

And now let's go to our website and we're going to close the external

and we're going to close the external library for now. And then we're going to

library for now. And then we're going to click this text box and we'll type the

click this text box and we'll type the message hello and press send.

message hello and press send. And now inside our console it will

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

display the response from the chatbot. And the chatbot responded with hello how

And the chatbot responded with hello how can I help you? So using the chatbot

can I help you? So using the chatbot external library we're able to get a

external library we're able to get a response from the chatbot.

The last step is we're going to display this chatbot response on the website.

this chatbot response on the website. Let's go back to VS Code.

Let's go back to VS Code. And to display the response on the

And to display the response on the website, we can just add another chat

website, we can just add another chat message using set chat messages.

message using set chat messages. Because this is an updater function from

Because this is an updater function from the state, React will automatically

the state, React will automatically update the website as well. So down here

update the website as well. So down here we'll remove console.log

and let's just copy paste this code up here to create a new message. So we'll

here to create a new message. So we'll copy and then down here we'll paste

copy and then down here we'll paste and here the message should be the

and here the message should be the response from the chatbot. So we'll

response from the chatbot. So we'll replace this with response

replace this with response and the sender is going to be the robot

and the sender is going to be the robot this time. and we'll give it a unique

this time. and we'll give it a unique ID.

ID. So now let's save this code and try it

So now let's save this code and try it out. We'll open the website and then in

out. We'll open the website and then in the text box we'll type hello and press

the text box we'll type hello and press send.

send. And if we look at the website, it sort

And if we look at the website, it sort of worked. It displayed the response

of worked. It displayed the response from the chatbot on the website.

from the chatbot on the website. However, it also removed our hello

However, it also removed our hello message. So why did this happen? Let's

message. So why did this happen? Let's go back to VS Code.

go back to VS Code. And if we look at this code

And if we look at this code here, we updated chat messages by making

here, we updated chat messages by making a copy and adding a new message at the

a copy and adding a new message at the end. However, in React, state does not

end. However, in React, state does not update immediately. The state is updated

update immediately. The state is updated after all of the code is finished.

So here all of the code is not finished yet. So chat messages is not updated to

yet. So chat messages is not updated to this new array immediately.

this new array immediately. So when we get to this point in the

So when we get to this point in the code, this chat messages is still the

code, this chat messages is still the old array without the new message that

old array without the new message that we added up here. And then we take the

we added up here. And then we take the old array and we add the chatbots

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

response. And we essentially lost our message.

message. So one way to fix this issue is to save

So one way to fix this issue is to save this updated chat messages in a

this updated chat messages in a variable. So above this we're going to

variable. So above this we're going to create a new variable using const and

create a new variable using const and let's name it new chat messages

let's name it new chat messages equals

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

and we're going to save this value. So, we'll select this code

we'll select this code and then cut.

and then cut. And up here, we're going to paste.

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

variable, new chat messages. So, this does the same thing as before,

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

except we saved the new chat messages in this variable.

this variable. And then down here, instead of making a

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

copy of chat messages, we're going to make a copy of new chat messages, which

make a copy of new chat messages, which contains our new message that we just

contains our new message that we just added. So now it will have our message,

added. So now it will have our message, and we're going to add the chatbots

and we're going to add the chatbots response. So now let's save this code

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

and go to our website. In the text box, we're going to type

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

hello and press send. And it displays our message, hello, and

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

the chatbot's response, hello, how can I help you?

help you? Let's try another example. In the text

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

box, we can type, "Can you flip a coin?" and press send.

and press send. It will add and display our message and

It will add and display our message and it will add and display the chatbot's

it will add and display the chatbot's response which is sure you got heads or

response which is sure you got heads or tails and everything is working

tails and everything is working correctly.

correctly. So as you can see state is another way

So as you can see state is another way that React helps us create websites

that React helps us create websites easier. All we have to do is update the

easier. All we have to do is update the state and React will automatically

state and React will automatically update the website. We don't have to

update the website. We don't have to update the website manually ourselves.

And that's it. Using state, we created the functionality that we need for this

the functionality that we need for this project. In the next lesson, we'll style

project. In the next lesson, we'll style this with CSS to make it look like the

this with CSS to make it look like the final chatbot project.

final chatbot project. And that's the end of this lesson. In

And that's the end of this lesson. In this lesson, we saved the data for our

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

website using arrays and objects. We generated the HTML using map and the key

generated the HTML using map and the key prop. We made the website interactive

prop. We made the website interactive using on click and onchange. We learned

using on click and onchange. We learned state which is data that changes over

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

time and is connected to the HTML. We used the updater function to update the

used the updater function to update the state and update the HTML at the same

state and update the HTML at the same time. We learned the array destructuring

time. We learned the array destructuring shortcut. We learned a technique called

shortcut. We learned a technique called lifting the state up which lets us share

lifting the state up which lets us share state between components. We made the

state between components. We made the chat input component interactive and

chat input component interactive and created new chat messages. And we got

created new chat messages. And we got responses from the chatbot.

responses from the chatbot. Here

Here are some exercises to help you practice

are some exercises to help you practice what we learned in this lesson.

In this lesson, we're going to learn how to use CSS with React and we'll finish

to use CSS with React and we'll finish the chatbot project. Let's go back to

the chatbot project. Let's go back to our code

our code and we'll start by reviewing CSS.

and we'll start by reviewing CSS. CSS is another language and it lets us

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

change the appearance of the website. To use CSS with React, we just use CSS

use CSS with React, we just use CSS normally. So, one way to use CSS is to

normally. So, one way to use CSS is to create a style element.

create a style element. So, we'll scroll to the top of our code

So, we'll scroll to the top of our code to the head element and then inside

to the head element and then inside here, we'll create a style element.

here, we'll create a style element. So, the style element doesn't appear on

So, the style element doesn't appear on the website. That's why we put it in the

the website. That's why we put it in the head section.

head section. And the special thing about the style

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

element is we can write CSS code inside. In here we'll type the CSS code button

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

and curly brackets. And inside we'll type background dash color

type background dash color green and semicolon.

green and semicolon. So this is some CSS code. As a review,

So this is some CSS code. As a review, this code at the front is called the CSS

this code at the front is called the CSS selector. This tells a computer which

selector. This tells a computer which elements we want to change the

elements we want to change the appearance. And inside we have CSS

appearance. And inside we have CSS styles. This tells a computer how to

styles. This tells a computer how to change the appearance of these elements.

change the appearance of these elements. The left side is called the CSS

The left side is called the CSS property. This is what we're changing.

property. This is what we're changing. And the right side is called the CSS

And the right side is called the CSS value. This is what we're changing the

value. This is what we're changing the property to. So this code changes all

property to. So this code changes all buttons on the website and changes their

buttons on the website and changes their background color to green. If we save

background color to green. If we save and then check our website,

and then check our website, you can see that it changed the

you can see that it changed the background color of the button to green.

background color of the button to green. Let's go back to our code.

Let's go back to our code. And one problem here is button will

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

style all buttons on the website. But usually we want to just style a specific

usually we want to just style a specific button. For example, let's scroll down

button. For example, let's scroll down to the chat input component and we're

to the chat input component and we're going to scroll down to this send button

going to scroll down to this send button here. So let's say we just want to style

here. So let's say we just want to style this send button. As a review to style a

this send button. As a review to style a specific element, we can add an HTML

specific element, we can add an HTML attribute called class. In React to set

attribute called class. In React to set the class attribute, we're going to give

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

this element a prop called class capital N name equals double quotes.

N name equals double quotes. And we'll give it the class send dash

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

button. In React, we use class name to set the

In React, we use class name to set the class. That's because React is actually

class. That's because React is actually just JavaScript code and JavaScript

just JavaScript code and JavaScript already has a feature called class. So

already has a feature called class. So class is a reserved word and we can't

class is a reserved word and we can't use it. That's why React uses class name

use it. That's why React uses class name to set the class.

to set the class. Now that this button has the class

Now that this button has the class send-button,

send-button, we can style this specific element.

we can style this specific element. We'll go to our CSS

and in here we're going to remove button and we're going to type dot and then the

and we're going to type dot and then the class send dash button.

class send dash button. As a review, if we start the CSS

As a review, if we start the CSS selector with a dot, it will only style

selector with a dot, it will only style elements with this class. So this will

elements with this class. So this will only style elements with the class

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

send-ash button. If we save and check our website,

and check our website, it styles our send button because we

it styles our send button because we gave it the send-button class.

gave it the send-button class. If we open the console and go to the

If we open the console and go to the elements tab and then we look at our

elements tab and then we look at our HTML here and we find the send button,

HTML here and we find the send button, you'll notice that it has the class

you'll notice that it has the class attribute. So class name in React is

attribute. So class name in React is converted to class in HTML.

converted to class in HTML. Now that we reviewed CSS, we're going to

Now that we reviewed CSS, we're going to style this button to look like the final

style this button to look like the final design. So, first we're going to put the

design. So, first we're going to put the final design and our website side by

final design and our website side by side so it's easier to compare. So, I'll

side so it's easier to compare. So, I'll take the final design here and I'll put

take the final design here and I'll put it on the bottom left and I'll take our

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

website and put it in the top left. And I'm going to resize our code editor

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

so we can see everything side by side. And I'll hide the sidebar.

And I'll hide the sidebar. Next, to style our send button to look

Next, to style our send button to look like the final project, we just have to

like the final project, we just have to style it one by one with CSS. So, we

style it one by one with CSS. So, we already made the background color green.

already made the background color green. Next, let's make the text color white.

Next, let's make the text color white. To do that, we'll type the CSS property

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

color colon and set it to white and save.

save. And that will make the text color white.

And that will make the text color white. Next, let's make our button bigger. To

Next, let's make our button bigger. To do that, we'll add space on the inside

do that, we'll add space on the inside of the button. As a review, space on the

of the button. As a review, space on the inside of an element is called padding.

inside of an element is called padding. So in our CSS we're going to add padding

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

colon and we'll give the padding two values 12 px and 20 px.

values 12 px and 20 px. So the px here stands for pixels. A

So the px here stands for pixels. A pixel is a unit of measurement in

pixel is a unit of measurement in computers. For example, my computer

computers. For example, my computer screen is about 3,800 pixels wide. So 12

screen is about 3,800 pixels wide. So 12 pixels and 20 pixels looks like this.

pixels and 20 pixels looks like this. The first value is the vertical space

The first value is the vertical space inside this button. And the second value

inside this button. And the second value is the horizontal space inside this

is the horizontal space inside this button. So we're going to add space all

button. So we're going to add space all around the inside of this button. So

around the inside of this button. So let's save.

let's save. And it adds space on the inside.

And it adds space on the inside. And I think that looks close enough.

And I think that looks close enough. Next, let's add some space on the

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

outside of this button on the left. As a review, space on the outside of an

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

element is called margin. So, in our CSS, we'll add margin dash

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

and we'll add it on the left colon. And let's add 10 pixels of margin. And save.

let's add 10 pixels of margin. And save. And that looks close enough.

And that looks close enough. Next, our button has a border around the

Next, our button has a border around the button, but in the final design, there

button, but in the final design, there is no border. To remove the borders,

is no border. To remove the borders, we'll type the property border colon and

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

set it to none and save. And that will remove the borders.

And that will remove the borders. Next, the corners of the button in the

Next, the corners of the button in the final design are round. To make our

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

corners round, we're going to use the CSS property border dash radius colon

CSS property border dash radius colon and then how round we want the corners

and then how round we want the corners to be. Let's try 10 pixels and save.

to be. Let's try 10 pixels and save. And I think that looks close enough.

And I think that looks close enough. Next, the text in the button is a little

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

bigger in the final design. To change the size of the text, we'll use the CSS

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

property font dash size colon and let's try 15 pixels and save.

try 15 pixels and save. And that looks pretty good. Next, if we

And that looks pretty good. Next, if we put our mouse over our button, we no

put our mouse over our button, we no longer have the hand pointer icon that

longer have the hand pointer icon that we see here. to use this hand pointer

we see here. to use this hand pointer icon. We're going to set the property

icon. We're going to set the property cursor colon pointer

cursor colon pointer and save.

and save. And now if we put our mouse over the

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

button, we have the hand pointer icon again.

again. Finally, the background color of our

Finally, the background color of our button is a little different from the

button is a little different from the final design. So to get this exact green

final design. So to get this exact green color, we can go to the final project.

color, we can go to the final project. And then we're going to rightclick this

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

button and then click inspect. And we can click these three dots here

And we can click these three dots here and click this icon to open the console

and click this icon to open the console in a different window.

in a different window. And we're going to go to the elements

And we're going to go to the elements tab and we'll find the send button in

tab and we'll find the send button in the HTML. And we're going to look at

the HTML. And we're going to look at these styles. So you can see that this

these styles. So you can see that this button here has a background color of

button here has a background color of this RGB value. So we're going to select

this RGB value. So we're going to select this RGB value and we're going to copy

this RGB value and we're going to copy it.

it. And in our code, instead of the color

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

green, we're going to paste this RGB color.

color. As a review, RGB stands for red, green,

As a review, RGB stands for red, green, blue, and it's a way to measure color in

blue, and it's a way to measure color in computers. Computers can create any

computers. Computers can create any color using a combination of red, green,

color using a combination of red, green, and blue. The first value here is how

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

much red we want in the color. The second value is how much green we want

second value is how much green we want in the color. And the third value is how

in the color. And the third value is how much blue we want. And each value goes

much blue we want. And each value goes from 0 to 255.

from 0 to 255. So this color combines a little bit of

So this color combines a little bit of red, a lot of green, and a bit of blue

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

to get this exact green color. So let's save our code.

save our code. And now our button matches the final

And now our button matches the final project.

project. And that's how we style the send button.

And that's how we style the send button. We just style it one by one using CSS

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

until it looks like the final design. So this is just a review of CSS. If you

this is just a review of CSS. If you want to learn CSS in more detail, you

want to learn CSS in more detail, you can check out my HTML and CSS full

can check out my HTML and CSS full course in the video description.

course in the video description. Next, we're going to style this text box

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

to look like the final design. Again, we're just going to style it one by one

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

with CSS. First, we need to add a class to this

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

element so we can select it in our CSS. We'll go to our code and we're going to

We'll go to our code and we're going to scroll down to this text box which is

scroll down to this text box which is inside the chat input component and it's

inside the chat input component and it's this input element here. So to add a

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

class we're going to use class name. So inside the input element we'll add a

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

class name equals double quotes and let's give it the class chat dash input.

let's give it the class chat dash input. Now, let's scroll back up to the CSS.

Now, let's scroll back up to the CSS. And below these styles,

And below these styles, we're going to type dot to select a

we're going to type dot to select a class. And we're going to select the

class. And we're going to select the class we just added, which is chat dash

class we just added, which is chat dash input and curly brackets. And now we're

input and curly brackets. And now we're ready to style the text box.

ready to style the text box. The first thing we'll change is there's

The first thing we'll change is there's a lot of space on the inside of this

a lot of space on the inside of this text box in the final design. So again,

text box in the final design. So again, space on the inside of an element is

space on the inside of an element is called padding.

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

In our CSS, we'll add padding colon. And let's do 12 pixels for the vertical

let's do 12 pixels for the vertical space and 15 pixels for the horizontal

space and 15 pixels for the horizontal space. Now let's save.

space. Now let's save. And that adds space on the inside of our

And that adds space on the inside of our text box. And I think that looks close

text box. And I think that looks close enough. Next, we'll make the corners

enough. Next, we'll make the corners round. To do that, we'll use border dash

round. To do that, we'll use border dash radius colon. And let's try 10 pixels

radius colon. And let's try 10 pixels and save.

and save. And that looks pretty good. Next, our

And that looks pretty good. Next, our border is too thick compared to the

border is too thick compared to the final design. To change the thickness of

final design. To change the thickness of the border, we'll use border dash width

the border, we'll use border dash width colon. And let's change it to 1 pixel

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

and save. So that looks pretty good. Finally, the

So that looks pretty good. Finally, the text is bigger in the final design. To

text is bigger in the final design. To change the size of the text, we can use

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

font dash size colon. And let's use 15 pixels again. So 15px

pixels again. So 15px and save.

and save. And I think that looks good enough for

And I think that looks good enough for now. So we styled the text box one by

now. So we styled the text box one by one to look like the final design.

one to look like the final design. Next in the final design, the text box

Next in the final design, the text box is wider. And this text box is also

is wider. And this text box is also flexible. That means if we resize the

flexible. That means if we resize the browser, the text box will also resize.

browser, the text box will also resize. To make our text box flexible, we're

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

going to review a feature of CSS called flexbox.

flexbox. Flexbox lets us create a flexible

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

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

are positioned on the website. Here we have a horizontal layout where

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

the elements are beside each other. And also this element is flexible. So

also this element is flexible. So flexbox helps us create this flexible

flexbox helps us create this flexible layout. To use flexbox we need to do

layout. To use flexbox we need to do three steps. The first step is to create

three steps. The first step is to create a container around the elements that we

a container around the elements that we want to position. So let's go back to

want to position. So let's go back to our code and we're going to scroll down

our code and we're going to scroll down to the chat input component and we'll

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

scroll down to the HTML. So here we want to position the text box

So here we want to position the text box and the button. So we need to create a

and the button. So we need to create a container around these two elements.

container around these two elements. Right now we have a fragment around

Right now we have a fragment around these two elements. However, we cannot

these two elements. However, we cannot style a fragment with CSS since

style a fragment with CSS since fragments don't actually appear on the

fragments don't actually appear on the website.

website. Instead, we're going to switch this

Instead, we're going to switch this container to a div element because we

container to a div element because we can style a div element. So, inside

can style a div element. So, inside here, we'll type div and at the end,

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

we'll do slash div to convert this container to a div element.

container to a div element. And now we have a container around the

And now we have a container around the elements.

elements. The second step is to add the property

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

display flex to the container. First, let's add a class name to this

First, let's add a class name to this container so we can select it in our

container so we can select it in our CSS. In here, we'll type class name

CSS. In here, we'll type class name equals double quotes and we'll give it

equals double quotes and we'll give it the class chat-input

the class chat-input dash container.

dash container. And then we'll scroll up to our CSS.

And at the end we'll type dot to select a class and we'll select the class

a class and we'll select the class chat-input

chat-input dash container and curly brackets.

dash container and curly brackets. And finally we'll add the property

And finally we'll add the property display colon flex and that will turn

display colon flex and that will turn this container into a flexbox.

this container into a flexbox. The third step is to use flexbox

The third step is to use flexbox features. Flexbox has many features we

features. Flexbox has many features we can use to control the layout or to

can use to control the layout or to control how these elements are

control how these elements are positioned. One feature is called flex

positioned. One feature is called flex grow. Flex grow makes an element grow

grow. Flex grow makes an element grow and take up the remaining space. So here

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

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

up this remaining space. So we'll go to the styles for the chat

So we'll go to the styles for the chat input or the text box

input or the text box and we'll add the property flex dash

and we'll add the property flex dash grow

grow 1 and save.

1 and save. And now the text box will grow and take

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

up the remaining space. If we resize the browser, the text box

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

will also resize to take up the remaining space.

remaining space. So now we created the layout for the

So now we created the layout for the chat input that we see in the final

chat input that we see in the final design.

Next we'll create the layout for the overall app. Notice in the final project

overall app. Notice in the final project if we resize the browser and make it

if we resize the browser and make it wider the app is limited to a certain

wider the app is limited to a certain width. So it's not going to get wider.

width. So it's not going to get wider. To create this in our project, we'll set

To create this in our project, we'll set a maximum width for our app.

a maximum width for our app. So, let's go to our code and we're going

So, let's go to our code and we're going to scroll down to the app component,

to scroll down to the app component, which is down here, and we'll go down to

which is down here, and we'll go down to the HTML.

the HTML. And currently, the app is contained in a

And currently, the app is contained in a fragment. And remember, we cannot style

fragment. And remember, we cannot style a fragment since fragments don't

a fragment since fragments don't actually appear on the website.

actually appear on the website. So again, we're going to switch this to

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

a div element so we can style it. So in here, we'll type div and at the bottom

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

we'll type /ash div. And now we can style this.

style this. First we'll add a class to this div

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

using class name equals double quotes. And let's give it the class app dash

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

container. and we'll scroll up to our CSS.

and we'll scroll up to our CSS. And at the bottom here,

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

we'll type dot to select a class. And we'll select the class app dash

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

container and curly brackets. And to set a maximum width of our app,

And to set a maximum width of our app, we can just use the property max dash

we can just use the property max dash width colon. and let's try 600 pixels

width colon. and let's try 600 pixels and save.

and save. So now if we resize our browser the app

So now if we resize our browser the app will be limited to 600 pixels just like

will be limited to 600 pixels just like the final design. Next in the final

the final design. Next in the final design notice that the app is centered

design notice that the app is centered on the website. Now there are several

on the website. Now there are several ways to center an element in CSS.

ways to center an element in CSS. One way is to use margin. So we'll go

One way is to use margin. So we'll go back to our code

back to our code and in the app container, we're going to

and in the app container, we're going to add the property margin dash left colon

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

and we'll set it to auto. And we'll also set the margin dash right colon

set the margin dash right colon auto.

auto. So this will automatically add a space

So this will automatically add a space on the left and right of this element

on the left and right of this element until it is centered. So if we save our

until it is centered. So if we save our code and check our website, you'll

code and check our website, you'll notice that the entire app is now

notice that the entire app is now centered on the website. And now we

centered on the website. And now we created the layout for the overall app.

created the layout for the overall app. Next, we're going to create the layout

Next, we're going to create the layout for the chat messages. If you don't have

for the chat messages. If you don't have any chat messages in your final project,

any chat messages in your final project, you can add some by typing in here and

you can add some by typing in here and then pressing send. So notice that the

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

chat messages from the user are on the right while the chat messages from the

right while the chat messages from the robot are on the left. So we're going to

robot are on the left. So we're going to create this layout. First, we need to

create this layout. First, we need to give class names to these chat messages

give class names to these chat messages so we can style them.

so we can style them. So, let's resize our browser for now.

So, let's resize our browser for now. And we'll go to our code. And we're

And we'll go to our code. And we're going to scroll down

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

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

scroll down to the HTML. And we'll give each chat message a class

And we'll give each chat message a class name equals. And we're going to do

name equals. And we're going to do something different this time. We'll

something different this time. We'll type curly brackets. So here we want to

type curly brackets. So here we want to give a different class name depending on

give a different class name depending on if the sender is a user or the sender is

if the sender is a user or the sender is a robot. This will let us position the

a robot. This will let us position the chat messages differently on the right

chat messages differently on the right or on the left. To give this a different

or on the left. To give this a different class name depending on the sender.

class name depending on the sender. We're going to use a feature of

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

JavaScript called the turnary operator. As a review, the turnary operator looks

As a review, the turnary operator looks like this. And it works like an if else

like this. And it works like an if else statement.

statement. If value one is true, then the result is

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

value two. Else the result is value three.

three. The turnary operator lets us insert an

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

if else statement directly in the JSX. So using a turnary operator, we can give

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

a different class name depending on the sender.

sender. Inside here, we're going to type the if

Inside here, we're going to type the if condition. So, we'll check if the sender

condition. So, we'll check if the sender is equal to the string user. And then

is equal to the string user. And then we'll type question mark. If the sender

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

is the user, we'll set the class name to the string chat-

the string chat- message dash user.

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

And then we'll type a colon. So, this means else. So if the sender is not the

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

user, we're going to give the class name the string chat-

the string chat- message dash robot.

message dash robot. So again the way this code works is if

So again the way this code works is if the sender is equal to user, we'll set

the sender is equal to user, we'll set the class name to chat message user.

the class name to chat message user. Else we'll set the class name to chat

Else we'll set the class name to chat message robot. As you can see, the

message robot. As you can see, the turnary operator lets us insert an if

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

else statement directly in the JSX. And notice that we used curly brackets here

notice that we used curly brackets here because we want to save the result of

because we want to save the result of this code into class name instead of

this code into class name instead of just a string.

just a string. Before we continue, we can add some new

Before we continue, we can add some new lines to this code to make it easier to

lines to this code to make it easier to read. So, at the beginning, we can add a

read. So, at the beginning, we can add a new line. And then we'll add a new line

new line. And then we'll add a new line before the question mark and press tab.

before the question mark and press tab. And we'll add a new line before the

And we'll add a new line before the colon. And we'll add a new line at the

colon. And we'll add a new line at the back.

back. And remove some spaces so that this is

And remove some spaces so that this is vertically aligned.

vertically aligned. So, this makes the code a bit easier to

So, this makes the code a bit easier to read. We have the if condition and then

read. We have the if condition and then the first value and then else the second

the first value and then else the second value. Now let's save

value. Now let's save and we'll go to our website and let's

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

check the HTML. So in our console, we can click these three dots here and then

can click these three dots here and then click this icon to open the console in

click this icon to open the console in another window. And we'll go to the

another window. And we'll go to the elements tab and we'll click this

elements tab and we'll click this pointer on the top left and we'll select

pointer on the top left and we'll select one of these chat messages and click it.

one of these chat messages and click it. And if we scroll down here, you can see

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

that each chat message now has a class. And messages from the user have the

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

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

from the robot have the class chat message robot.

message robot. So now that we added a class to each of

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

these chat messages, let's style these chat messages.

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

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

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

And at the end, let's type a dot. And first let's select the class chat dash

first let's select the class chat dash message dash user and curly brackets.

And now for chat message user we want to position these elements the text and the

position these elements the text and the profile image on the right. To create

profile image on the right. To create this flexible layout we can use flexbox.

this flexible layout we can use flexbox. Again

Again remember there are three steps to use

remember there are three steps to use flexbox. First, we already have a

flexbox. First, we already have a container around the elements. It has a

container around the elements. It has a class chat message user or chat message

class chat message user or chat message robot.

robot. Next, we need to add display flex to

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

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

user, we'll add display colon flex.

display colon flex. And now we can use flexbox features.

And now we can use flexbox features. Another feature of flexbox is we're

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

going to type justify dashcontent colon.

colon. Justify content controls how the

Justify content controls how the elements are displayed horizontally.

elements are displayed horizontally. If we want these elements to be

If we want these elements to be displayed on the right, we're going to

displayed on the right, we're going to give this a value end.

give this a value end. So it will display these elements at the

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

end of this row or on the right. So now let's save our code.

So now let's save our code. And now the chat messages from the user

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

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

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

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

the chat messages. First, we need to add a class name to

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

this text so we can style it. Let's go to our code and we're going to

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

scroll down to the chat message component

component and we're going to scroll to the text

and we're going to scroll to the text which is here. So currently this text is

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

not inside an element. So first we're going to put this text inside an element

going to put this text inside an element so that we can style just the text.

so that we can style just the text. Above this, we'll put this in a div by

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

typing less than div greater than and below it less than slashd greater than.

below it less than slashd greater than. And we'll add an indent at the front to

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

show that this text is inside this div. And now let's add a class to this div so

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

we can style just the text. So, we'll give this a class name equals double

give this a class name equals double quotes. And let's give it the class chat

quotes. And let's give it the class chat dash message dash text.

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

So now let's style this with CSS. We'll scroll up to our CSS

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

and at the end we'll type a dot and we'll style the class chat dash message

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

dash text and curly brackets. So the first thing we'll style is we're

So the first thing we'll style is we're going to change the background color to

going to change the background color to this gray color. To get this exact

this gray color. To get this exact color, we're going to rightclick on this

color, we're going to rightclick on this text and then click inspect.

text and then click inspect. and we'll find this text in the elements

and we'll find this text in the elements tab and we're going to go into the

tab and we're going to go into the styles and we'll get the background

styles and we'll get the background color. So, we'll copy this RGB color

color. So, we'll copy this RGB color and we'll go into our code and we'll set

and we'll go into our code and we'll set the background dash color colon and

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

we'll paste the RGB color and save. And now we'll have the exact color in

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

our final design. However, after we saved, it kind of

However, after we saved, it kind of messed up our layout. So, the chat

messed up our layout. So, the chat message user looks okay, but the text

message user looks okay, but the text for chat message robot is now appearing

for chat message robot is now appearing below the profile image and it's taking

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

up the entire line. So, what happened? Remember that we just

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

surrounded this text in a div element. Normally a div element takes up an

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

entire line by itself because a div is a block element.

block element. However, remember that we also made chat

However, remember that we also made chat message user a flexbox. When a block

message user a flexbox. When a block element is inside a flexbox, it no

element is inside a flexbox, it no longer takes up the entire line. It only

longer takes up the entire line. It only takes up as much space as it needs to.

takes up as much space as it needs to. So that's why this div only takes up as

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

much space as it needs because it's inside a flexbox.

inside a flexbox. One way to fix this layout problem is we

One way to fix this layout problem is we can make chat message robot a flexbox as

can make chat message robot a flexbox as well. We'll go back to our code and

well. We'll go back to our code and below chat message user let's type dot

below chat message user let's type dot and we'll style the chat- message dash

and we'll style the chat- message dash robot and curly brackets

robot and curly brackets and we'll also give it display colon

and we'll also give it display colon flex

flex so it will match the layout for the chat

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

message user. Let's save.

Let's save. And now because this div is inside a

And now because this div is inside a flexbox, it only takes up as much space

flexbox, it only takes up as much space as it needs. So now the background color

as it needs. So now the background color and the layout looks good. Next, the

and the layout looks good. Next, the style of text or the font is different

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

in the final design. To change the font, we'll go to our code

To change the font, we'll go to our code and we'll add the property font dash

and we'll add the property font dash family colon And in the final project, I

family colon And in the final project, I use the font Ariel.

use the font Ariel. Let's save.

Let's save. And now our font matches the final

And now our font matches the final design.

design. Now, usually we don't set the font for

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

just one element. We set the font for the entire website because we want the

the entire website because we want the entire website to use the same font or

entire website to use the same font or the same style of text. to set the font

the same style of text. to set the font for the entire website. We can style the

for the entire website. We can style the body element. So, we'll scroll to the

body element. So, we'll scroll to the top of our CSS.

top of our CSS. And here we'll style the body element

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

curly brackets and we'll set the font dash family colon to area.

dash family colon to area. So this sets the font for all elements

So this sets the font for all elements inside the body, which is basically the

inside the body, which is basically the entire website. So now we can scroll

entire website. So now we can scroll back down

back down and we can remove this style

and we can remove this style because we're going to set the font for

because we're going to set the font for the entire website instead.

the entire website instead. Let's save.

Let's save. And now we set the font for the entire

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

website to Ariel. Next, let's add space on the inside of

Next, let's add space on the inside of this text, which is padding.

this text, which is padding. So, here we'll add padding

So, here we'll add padding colon. And let's try 15 pixels of

colon. And let's try 15 pixels of vertical space and 20 pixels of

vertical space and 20 pixels of horizontal space. And save.

horizontal space. And save. And that looks pretty good.

And that looks pretty good. Next, we'll make the corners round.

Next, we'll make the corners round. To do that, we'll use border dash radius

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

colon and 10 pixels and save. And that looks pretty good. Next, let's

And that looks pretty good. Next, let's add space on the outside of the text on

add space on the outside of the text on the right. So, we'll add margin dash

the right. So, we'll add margin dash right colon and let's try 10 pixels and

right colon and let's try 10 pixels and save.

save. And that looks close enough.

And that looks close enough. And here, if we scroll down to a chat

And here, if we scroll down to a chat message from the robot, we'll add some

message from the robot, we'll add some space on the left of the text. So, in

space on the left of the text. So, in our code, we'll add margin dash left.

our code, we'll add margin dash left. And let's try 10 pixels and save.

And let's try 10 pixels and save. And that looks pretty good. Finally,

And that looks pretty good. Finally, let's add some space on the bottom of

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

the text so we can separate them. Here we'll add margin dash bottom colon. And

we'll add margin dash bottom colon. And let's try 20 pixels and save.

let's try 20 pixels and save. And I think that looks close enough.

And I think that looks close enough. However, we now have a problem here,

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

which is the profile image seems to be stretching.

stretching. This happens because this container is a

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

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

a flexbox will stretch vertically. So, if this text gets longer because we

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

added some margin, this image will stretch.

stretch. To fix this, flexbox has another feature

To fix this, flexbox has another feature called align items.

called align items. So in our CSS in chat message user,

So in our CSS in chat message user, we'll add the property align dash items

we'll add the property align dash items colon

colon and align items controls how the

and align items controls how the elements are displayed vertically. By

elements are displayed vertically. By default, align items is stretch. That's

default, align items is stretch. That's why the elements stretch vertically.

why the elements stretch vertically. Instead, we're going to change align

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

items to start. This will display the elements at the

This will display the elements at the start or at the top vertically, and it

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

will no longer stretch. Same thing for the chat message robot. We're going to

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

give it align dash items colon start and save.

save. And now the elements in the flexbox will

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

appear at the start or at the top vertically.

vertically. The last thing we'll style for the text

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

is if we go to our final project and inside the text box we type test and

inside the text box we type test and press send.

press send. You'll notice that the response from the

You'll notice that the response from the chatbot has a maximum width. So in our

chatbot has a maximum width. So in our project, we're also going to add a

project, we're also going to add a maximum width to our text. So in our

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

code, we'll go to the chat message text and let's add a max dash width colon.

and let's add a max dash width colon. And let's try 300 pixels and save.

And let's try 300 pixels and save. And now if we go to our text box and

And now if we go to our text box and type test and press send and scroll

type test and press send and scroll down, the text has a maximum width and

down, the text has a maximum width and it matches the final design.

it matches the final design. Now we finish styling the text in the

Now we finish styling the text in the chat messages.

chat messages. Next, we'll style the profile images. So

Next, we'll style the profile images. So in our code, let's scroll down to the

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

profile image which is inside the chat message component

message component and it's these two image elements here.

and it's these two image elements here. Currently, we're using an attribute to

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

set the width of this image. However, a best practice is to use CSS for styling

best practice is to use CSS for styling instead of attributes. So let's remove

instead of attributes. So let's remove this attribute and we'll remove it down

this attribute and we'll remove it down here as well and we'll add a class to

here as well and we'll add a class to these profile images so that we can

these profile images so that we can style them with CSS. So here we'll add

style them with CSS. So here we'll add class name equals double quotes and

class name equals double quotes and we'll give it the class chat-

we'll give it the class chat- message dash profile.

message dash profile. And we'll also add this class to the

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

profile image for the user. We'll give it the class name equals

We'll give it the class name equals double quotes

double quotes chat dash message dash profile.

chat dash message dash profile. So now we can style this with our CSS.

So now we can style this with our CSS. We'll scroll up to our CSS

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

and at the end we'll type a dot and we'll style the class chat dash message

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

dash profile and curly brackets. So previously we set the width to 50

So previously we set the width to 50 pixels. So let's do that again using

pixels. So let's do that again using CSS. This time we'll set the width colon

CSS. This time we'll set the width colon to 50 pixels.

to 50 pixels. and save.

Now, if we look at the final design, it looks like the profile images here

it looks like the profile images here are a little bit smaller than our

are a little bit smaller than our profile images. So, let's make this

profile images. So, let's make this width smaller. Let's try 45 pixels

width smaller. Let's try 45 pixels instead.

instead. And save.

And save. And I think that looks close enough. And

And I think that looks close enough. And now our profile images are the same size

now our profile images are the same size as the final design.

as the final design. The last thing we're going to change in

The last thing we're going to change in this design is we're going to move the

this design is we're going to move the text box to the bottom so that it

text box to the bottom so that it matches the design of other popular

matches the design of other popular chatbots.

chatbots. In the final project, we're going to

In the final project, we're going to make this a little taller. Now, we can

make this a little taller. Now, we can move this text box to the bottom of the

move this text box to the bottom of the page by clicking this link.

page by clicking this link. And now let's create this design in our

And now let's create this design in our project.

project. First I'll open our project and then

First I'll open our project and then move it back to the same window so that

move it back to the same window so that we can see this side by side a little

we can see this side by side a little easier. And to put the text box at the

easier. And to put the text box at the bottom of the page, the first step is to

bottom of the page, the first step is to move the text box below the chat

move the text box below the chat messages. We'll go to our code and we're

messages. We'll go to our code and we're going to scroll down to the app

going to scroll down to the app component

component which is here and we'll scroll to the

which is here and we'll scroll to the HTML and we're just going to move this

HTML and we're just going to move this chat input below the chat messages. So

chat input below the chat messages. So we'll select this component and we'll

we'll select this component and we'll cut

cut and below chat messages we'll paste

and below chat messages we'll paste and save.

and save. And now the chat input will be below the

And now the chat input will be below the chat messages. And that looks pretty

chat messages. And that looks pretty good. Next, we also want to put this

good. Next, we also want to put this chat input at the bottom of the browser

chat input at the bottom of the browser here. So there are several ways to do

here. So there are several ways to do this in CSS. One way is to use flexbox

this in CSS. One way is to use flexbox again. Now before we use flexbox, we're

again. Now before we use flexbox, we're going to make the app container stretch

going to make the app container stretch to the bottom of the browser. So right

to the bottom of the browser. So right now if we click inside here and we

now if we click inside here and we rightclick and inspect

rightclick and inspect and we go to the elements tab and we

and we go to the elements tab and we scroll up and look at the app container.

scroll up and look at the app container. Notice that the app container stops at

Notice that the app container stops at the chat input section. And that's

the chat input section. And that's because this is all the content that we

because this is all the content that we have. So the app container only has the

have. So the app container only has the height that it needs. However, we want

height that it needs. However, we want to stretch the app container to the

to stretch the app container to the bottom of the browser so that we can put

bottom of the browser so that we can put the chat input at the bottom. To do

the chat input at the bottom. To do that, we're going to set the height of

that, we're going to set the height of the app container. So, we'll go back to

the app container. So, we'll go back to our code

our code and we'll scroll up to our CSS

and we're going to find the styles for the app container which is right here.

the app container which is right here. And at the end, we're going to set the

And at the end, we're going to set the height colon.

height colon. And now we want the height of the app

And now we want the height of the app container to stretch to be the same as

container to stretch to be the same as the height of the browser here. To do

the height of the browser here. To do that, we're going to give this a special

that, we're going to give this a special value 100 VH.

value 100 VH. So VH stands for viewport height. This

So VH stands for viewport height. This gives us the height of the browser or

gives us the height of the browser or the part of the page that is visible.

the part of the page that is visible. 100 VH means 100% of the height of the

100 VH means 100% of the height of the browser. So this means the app container

browser. So this means the app container will be 100% of this height.

So now let's save and we'll go to our website and we'll

and we'll go to our website and we'll open the console again by right-clicking

open the console again by right-clicking and inspect

and inspect and go to the elements tab and we'll

and go to the elements tab and we'll scroll up to the app container again.

scroll up to the app container again. And now you'll notice the app container

And now you'll notice the app container stretches to the bottom of the browser.

stretches to the bottom of the browser. However, the app container is actually a

However, the app container is actually a little too tall. So it actually

little too tall. So it actually stretches below the bottom of the page.

stretches below the bottom of the page. And now we can scroll a bit here. The

And now we can scroll a bit here. The reason it's a little bit too tall is

reason it's a little bit too tall is because by default the body element here

because by default the body element here has a default margin of 8 pixels on all

has a default margin of 8 pixels on all sides. So the app container is the same

sides. So the app container is the same height as the browser, but then we add

height as the browser, but then we add another 8 pixels on the top and bottom.

another 8 pixels on the top and bottom. To fix this issue, we can just remove

To fix this issue, we can just remove the default margin from the body. So,

the default margin from the body. So, we'll go back to our code

we'll go back to our code and scroll up to the styles for the

and scroll up to the styles for the body. And at the end, let's remove the

body. And at the end, let's remove the margin at the top and bottom by typing

margin at the top and bottom by typing margin- top colon. And we'll set it to

margin- top colon. And we'll set it to zero pixels. And we'll also set the

zero pixels. And we'll also set the margin dashbottom

margin dashbottom colon to zero pixels and save.

colon to zero pixels and save. So now after we remove the default

So now after we remove the default margin from the top and the bottom,

margin from the top and the bottom, the app container is now exactly the

the app container is now exactly the same height as the browser.

same height as the browser. Now that the app container stretches to

Now that the app container stretches to the bottom of the browser, we can use a

the bottom of the browser, we can use a flexbox to make the chat messages grow

flexbox to make the chat messages grow and push the chat input to the bottom.

and push the chat input to the bottom. Again, there are three steps to use a

Again, there are three steps to use a flexbox.

flexbox. So here we want to position the chat

So here we want to position the chat messages and the chat input. So we need

messages and the chat input. So we need a container around these elements and we

a container around these elements and we already have a container for this which

already have a container for this which is the app container.

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

The second step is to add display flex to the container. So we'll go back to

to the container. So we'll go back to our code and we're going to scroll to

our code and we're going to scroll to the app container styles which is right

the app container styles which is right here and below this we'll add display

here and below this we'll add display colon flex. Let's save our code.

And unfortunately, it totally messed up our design. So what happened? By

our design. So what happened? By default, flexbox positions our elements

default, flexbox positions our elements horizontally. So it takes all the

horizontally. So it takes all the elements inside the container and then

elements inside the container and then squeezes them into a row like we see

squeezes them into a row like we see here.

here. However, this time we want to position

However, this time we want to position the elements vertically, not

the elements vertically, not horizontally.

horizontally. To position the elements vertically,

To position the elements vertically, we're going to use a flexbox feature

we're going to use a flexbox feature called flex direction.

called flex direction. So in here, we'll type flex dash

So in here, we'll type flex dash direction. colon

direction. colon flex direction determines which

flex direction determines which direction the elements are positioned.

direction the elements are positioned. So flex direction is row by default.

So flex direction is row by default. That means it positions the elements

That means it positions the elements horizontally like we see here.

horizontally like we see here. Now we're going to change flex direction

Now we're going to change flex direction to column.

to column. So this positions the elements

So this positions the elements vertically in a column. If we save our

vertically in a column. If we save our code

code and check the website, the elements in

and check the website, the elements in the flexbox are now positioned

the flexbox are now positioned vertically from top to bottom.

vertically from top to bottom. Next, we're going to use flex grow.

Next, we're going to use flex grow. Again, as a review, flex grow makes an

Again, as a review, flex grow makes an element grow and take up the remaining

element grow and take up the remaining space.

space. Here, we want to make the chat messages

Here, we want to make the chat messages section grow and take up all the

section grow and take up all the remaining vertical space. And this will

remaining vertical space. And this will push the chat input down to the bottom.

push the chat input down to the bottom. To use Flex Grow, we're going to add a

To use Flex Grow, we're going to add a class to the chat messages section.

class to the chat messages section. We'll go to our code and we'll scroll

We'll go to our code and we'll scroll down

down to the chat messages component which is

to the chat messages component which is right here. And currently this component

right here. And currently this component uses a fragment. And remember, we cannot

uses a fragment. And remember, we cannot style a fragment since fragments don't

style a fragment since fragments don't appear on the website. So again, we're

appear on the website. So again, we're going to switch this to a div element.

going to switch this to a div element. and at the end slash div so that we can

and at the end slash div so that we can style it.

style it. And now we'll give this div a class

And now we'll give this div a class using class name equals double quotes

using class name equals double quotes and we'll give it the class chat dash

and we'll give it the class chat dash messages dash container.

messages dash container. And now let's style this class. We'll

And now let's style this class. We'll scroll up in our CSS

scroll up in our CSS and at the end here we'll type dot and

and at the end here we'll type dot and we'll style the class chat dash messages

we'll style the class chat dash messages dash container

dash container and curly brackets

and curly brackets and we'll use the flexbox feature flex

and we'll use the flexbox feature flex dash grow

dash grow 1.

1. So now let's save.

So now let's save. And this makes the chat message

And this makes the chat message container grow and take up the remaining

container grow and take up the remaining vertical space. And this will push the

vertical space. And this will push the chat input to the bottom of the browser.

chat input to the bottom of the browser. So that's how we use a flexbox to

So that's how we use a flexbox to position the chat input at the bottom.

position the chat input at the bottom. Finally, if we look at the final design,

Finally, if we look at the final design, we have some space at the top of the app

we have some space at the top of the app and at the bottom of the app. So let's

and at the bottom of the app. So let's add that space at the top and bottom to

add that space at the top and bottom to our website.

our website. We'll go to our CSS

We'll go to our CSS and currently the app container has a

and currently the app container has a special height of 100 VH. So let's avoid

special height of 100 VH. So let's avoid changing this. Instead, let's add space

changing this. Instead, let's add space above the Chad messages container. So,

above the Chad messages container. So, we'll scroll down to the chat messages

we'll scroll down to the chat messages container and we'll add some space at

container and we'll add some space at the top using margin dash top colon 20

the top using margin dash top colon 20 pixels.

pixels. And we'll also add some space below the

And we'll also add some space below the chat input container. So, we'll scroll

chat input container. So, we'll scroll up to the chat input container which is

up to the chat input container which is right here. And we'll add space at the

right here. And we'll add space at the bottom using margin dash bottom colon.

bottom using margin dash bottom colon. And let's try 60 pixels and save.

And let's try 60 pixels and save. And now that looks pretty good. And now

And now that looks pretty good. And now if we look at our website and compare it

if we look at our website and compare it to the final design,

to the final design, you can see that it looks the same as

you can see that it looks the same as the final design. So, we finished

the final design. So, we finished styling our project to look like the

styling our project to look like the final design using CSS.

final design using CSS. Next, we're going to make the chat

Next, we're going to make the chat messages scrollable. In the final

messages scrollable. In the final project, if we have more chat messages

project, if we have more chat messages than we can see in the browser, we can

than we can see in the browser, we can actually scroll to see all of the chat

actually scroll to see all of the chat messages. Now, you may need to add more

messages. Now, you may need to add more chat messages down here in order to see

chat messages down here in order to see this feature. So, we're going to create

this feature. So, we're going to create this feature in our project. If we go to

this feature in our project. If we go to our project and we add some more

our project and we add some more messages like test and press send,

messages like test and press send, notice if we have too many messages, it

notice if we have too many messages, it starts to push the chat input down.

starts to push the chat input down. To make our chat messages scrollable,

To make our chat messages scrollable, we're going to go to the CSS and we're

we're going to go to the CSS and we're going to find the chat messages

going to find the chat messages container, which is right here.

container, which is right here. And at the end we'll add a property

And at the end we'll add a property overflow colon scroll.

overflow colon scroll. So now if the chat messages overflow or

So now if the chat messages overflow or there's too many to be displayed, it

there's too many to be displayed, it will start to scroll instead of pushing

will start to scroll instead of pushing things down. Let's save our code

things down. Let's save our code and then add another message test and

and then add another message test and press send.

press send. And you may need to add a few more

And you may need to add a few more messages to see this feature. Now, if we

messages to see this feature. Now, if we have too many messages, we're able to

have too many messages, we're able to scroll up and down to see all the

scroll up and down to see all the messages.

messages. Now, before we continue on Windows, we

Now, before we continue on Windows, we have a small problem, which is we start

have a small problem, which is we start to see these thick scroll bars on the

to see these thick scroll bars on the sides, which doesn't look very good. To

sides, which doesn't look very good. To hide these scroll bars, we can go back

hide these scroll bars, we can go back to our CSS and at the end we can use the

to our CSS and at the end we can use the property scroll bar dash width colon

property scroll bar dash width colon nut.

nut. So now let's save.

So now let's save. And if we add a message test and press

And if we add a message test and press send and you might need to add more

send and you might need to add more messages for your project. Now, if we

messages for your project. Now, if we have more messages than we can see, we

have more messages than we can see, we can scroll and we hide the scroll bars.

can scroll and we hide the scroll bars. So, that's how we make the chat messages

So, that's how we make the chat messages scrollable.

The last feature we're going to add to our project is auto scrolling. For

our project is auto scrolling. For example, if we go down here and add the

example, if we go down here and add the message test and press send,

message test and press send, notice we have to manually scroll down

notice we have to manually scroll down to the bottom ourselves. But if we go to

to the bottom ourselves. But if we go to the final project and at the bottom add

the final project and at the bottom add a message test and press send,

a message test and press send, notice that it automatically scrolls to

notice that it automatically scrolls to the bottom of the chat messages. So,

the bottom of the chat messages. So, we're going to add this autoscrolling

we're going to add this autoscrolling feature.

feature. Let's go back to our website.

Let's go back to our website. And to create autoscrolling, we're going

And to create autoscrolling, we're going to learn one of the most important

to learn one of the most important features of React called hooks.

features of React called hooks. Hooks let us insert React features into

Hooks let us insert React features into our component. And we've actually used

our component. And we've actually used hooks before. React.US

hooks before. React.US state is a hook. It inserts a React

state is a hook. It inserts a React feature called state into our component

feature called state into our component and state automatically updates the HTML

and state automatically updates the HTML when the data changes. Now, React has

when the data changes. Now, React has other hooks that we can use and every

other hooks that we can use and every hook starts with a word use.

hook starts with a word use. Another hook is called use effect. Use

Another hook is called use effect. Use effect lets us run some code after the

effect lets us run some code after the component is created or updated.

component is created or updated. So in our project after we add a chat

So in our project after we add a chat message we want to run some code to

message we want to run some code to scroll to the bottom. So this is a

scroll to the bottom. So this is a perfect situation for use effect.

perfect situation for use effect. Inside our code we're going to scroll

Inside our code we're going to scroll down to the chat messages component

which is here. And at the top of the component, we're

And at the top of the component, we're going to type the code capital R react

going to type the code capital R react dot use capital E effect

dot use capital E effect and brackets.

and brackets. By the way, in React, we should put our

By the way, in React, we should put our hooks at the top of the component and

hooks at the top of the component and they should not be inside anything. So,

they should not be inside anything. So, don't put a hook inside an if statement

don't put a hook inside an if statement or inside a function.

or inside a function. Next, we'll give use effect a function.

Next, we'll give use effect a function. So, inside these brackets, we'll type a

So, inside these brackets, we'll type a function using brackets, arrow, and

function using brackets, arrow, and curly brackets.

curly brackets. As a reminder, when we give a function

As a reminder, when we give a function to another function, we usually use an

to another function, we usually use an arrow function because it's a bit

arrow function because it's a bit cleaner. So, React will run this

cleaner. So, React will run this function after the component is created

function after the component is created and every time the component is updated

and every time the component is updated inside here. Let's try console.log

inside here. Let's try console.log the string updated

the string updated and save.

and save. And now if we go to our project and we

And now if we go to our project and we look at the console. So we'll rightclick

look at the console. So we'll rightclick inspect

inspect and we go to the console.

and we go to the console. You'll see that after the component is

You'll see that after the component is created, it runs a function and displays

created, it runs a function and displays updated. And then we're going to go to

updated. And then we're going to go to our website and we're going to add a new

our website and we're going to add a new message like hello and press send.

message like hello and press send. So now after the component is updated,

So now after the component is updated, React runs the function again. So, as

React runs the function again. So, as you can see, use effect lets us run some

you can see, use effect lets us run some code after the component is created or

code after the component is created or updated.

updated. So, now let's go back into our code

So, now let's go back into our code and we'll give use effect a second

and we'll give use effect a second parameter. So, at the end we'll type a

parameter. So, at the end we'll type a comma and we'll give a second parameter

comma and we'll give a second parameter which is an array.

which is an array. So, this array controls when use effect

So, this array controls when use effect runs. If we give it an empty array, use

runs. If we give it an empty array, use effect will only run once after the

effect will only run once after the component is created.

component is created. Now, inside this array, we can also put

Now, inside this array, we can also put some data such as our chat messages. So,

some data such as our chat messages. So, we'll type chat messages.

we'll type chat messages. And now, React will also run this

And now, React will also run this function every time our data changes or

function every time our data changes or every time our chat messages changes.

every time our chat messages changes. If we save

If we save and we look at the console,

and we look at the console, use effect runs after the component is

use effect runs after the component is created. And now if we add a message

created. And now if we add a message like hello and press send,

like hello and press send, use effect also runs after chat messages

use effect also runs after chat messages changes.

changes. So now let's go back to our code.

So now let's go back to our code. And this is called a dependency array.

And this is called a dependency array. It lets us control when use effect runs.

It lets us control when use effect runs. A best practice is to give use effect a

A best practice is to give use effect a dependency array to avoid running this

dependency array to avoid running this function too often.

function too often. So now we learned hooks and the use

So now we learned hooks and the use effect hook. And now we can run some

effect hook. And now we can run some code after the chat messages changes.

The last step is after the chat messages changes, we want to automatically scroll

changes, we want to automatically scroll to the bottom. To scroll to the bottom,

to the bottom. To scroll to the bottom, first we need to get the HTML element

first we need to get the HTML element that we want to scroll into our

that we want to scroll into our JavaScript.

JavaScript. Let's go back to our code. And inside

Let's go back to our code. And inside this function, instead of console.log,

this function, instead of console.log, log we need to get this div chat

log we need to get this div chat messages container into our JavaScript.

messages container into our JavaScript. Now in normal JavaScript we might use

Now in normal JavaScript we might use the DOM to get this element but remember

the DOM to get this element but remember in React we should not use the DOM

in React we should not use the DOM manually. Instead we should use React

manually. Instead we should use React features to get this element

features to get this element to get this element using React. We're

to get this element using React. We're going to use another hook called use

going to use another hook called use ref. So at the top of this component,

ref. So at the top of this component, we're going to type the code capital R

we're going to type the code capital R react dot use capital R ref and

react dot use capital R ref and brackets.

brackets. Use ref lets us automatically save an

Use ref lets us automatically save an HTML element from the component.

HTML element from the component. So this code creates a ref. A ref is a

So this code creates a ref. A ref is a container with special React features.

container with special React features. One special feature is we can give this

One special feature is we can give this ref or this container to React and React

ref or this container to React and React can automatically save an HTML element

can automatically save an HTML element inside this ref or inside this

inside this ref or inside this container.

container. So between these brackets, we're first

So between these brackets, we're first going to put the value null.

going to put the value null. So this is the initial value that is

So this is the initial value that is saved inside this ref or inside this

saved inside this ref or inside this container. So the ref is going to start

container. So the ref is going to start out as empty. So that's why we use null.

out as empty. So that's why we use null. Now let's save an HTML element inside

Now let's save an HTML element inside this ref. To do that, first we're going

this ref. To do that, first we're going to save this ref in a variable. So at

to save this ref in a variable. So at the front we'll create a variable using

the front we'll create a variable using const and we'll name it chat messages

const and we'll name it chat messages ref equals this result.

ref equals this result. And then we're going to go to the HTML

And then we're going to go to the HTML element we want to save, which is this

element we want to save, which is this div, the chat messages container.

div, the chat messages container. And we're going to give this element a

And we're going to give this element a special prop called ref equals curly

special prop called ref equals curly brackets. And between the curly

brackets. And between the curly brackets, we're going to give it the ref

brackets, we're going to give it the ref that we created above, which is chat

that we created above, which is chat messages ref.

messages ref. So now React will take this HTML element

So now React will take this HTML element and save it inside this ref or inside

and save it inside this ref or inside this container.

this container. To access the HTML element saved inside

To access the HTML element saved inside a ref, we're going to go to use effect

a ref, we're going to go to use effect and we're going to type the name of the

and we're going to type the name of the ref, which is chat messages ref and then

ref, which is chat messages ref and then current.

current. Now the reason we put this code in use

Now the reason we put this code in use effect is because remember use effect

effect is because remember use effect runs after the component is created. So

runs after the component is created. So we need to wait for the component to be

we need to wait for the component to be created first and then we can access

created first and then we can access this HTML element.

this HTML element. So now let's console.log this value to

So now let's console.log this value to see what's inside this ref. So at the

see what's inside this ref. So at the front we'll console.log log open bracket

front we'll console.log log open bracket and close bracket and save.

and close bracket and save. And we'll open the console for our

And we'll open the console for our website.

website. And you'll see that React saved the chat

And you'll see that React saved the chat messages container inside our ref.

messages container inside our ref. Now that we have the HTML element, we

Now that we have the HTML element, we need to scroll. Let's learn how to

need to scroll. Let's learn how to scroll it to the bottom. Let's go back

scroll it to the bottom. Let's go back to our code

to our code and first we're going to save this HTML

and first we're going to save this HTML element in a variable. So we'll remove

element in a variable. So we'll remove this and at the front we'll create a

this and at the front we'll create a variable const and let's name it

variable const and let's name it container

container lm equals this result.

lm equals this result. So ending the variable name with lm

So ending the variable name with lm tells us that this variable contains an

tells us that this variable contains an HTML element.

HTML element. and I'll resize my code editor so we can

and I'll resize my code editor so we can see more of the code.

see more of the code. Next, we'll create a new line. And it's

Next, we'll create a new line. And it's a good idea to check if this element

a good idea to check if this element actually exists before we scroll it. So,

actually exists before we scroll it. So, we'll check if brackets container lm.

we'll check if brackets container lm. Finally, we'll type curly brackets.

Finally, we'll type curly brackets. And to scroll this element to the

And to scroll this element to the bottom, we can use this code container

bottom, we can use this code container lm dot scroll top and we'll make it

lm dot scroll top and we'll make it equal container lm dot scroll height.

equal container lm dot scroll height. So scroll top means how far from the top

So scroll top means how far from the top should we scroll and scroll height gives

should we scroll and scroll height gives us the total height of the element. So,

us the total height of the element. So, if we set the scroll top to the total

if we set the scroll top to the total height, it's going to scroll all the way

height, it's going to scroll all the way down to the bottom, which is exactly

down to the bottom, which is exactly what we need. So, now let's save this

what we need. So, now let's save this code

code and we'll go to our website and we'll

and we'll go to our website and we'll add a message test and press send.

add a message test and press send. It runs the use effect function because

It runs the use effect function because chat messages changed and it

chat messages changed and it automatically scrolls to the bottom.

automatically scrolls to the bottom. Now, depending on the height of your

Now, depending on the height of your browser, you might need to add a few

browser, you might need to add a few more messages to see this effect. So, we

more messages to see this effect. So, we can also scroll up and then add another

can also scroll up and then add another message like thank you

message like thank you and press send.

and press send. It runs use effect again and it

It runs use effect again and it automatically scrolls to the bottom. And

automatically scrolls to the bottom. And that's all the major features that we

that's all the major features that we need for this project. I'll leave some

need for this project. I'll leave some extra features like removing these

extra features like removing these default messages and creating the

default messages and creating the loading spinner as exercises.

loading spinner as exercises. And that's it. We created all the

And that's it. We created all the styling and features that we need and we

styling and features that we need and we finished the chatbot project. In the

finished the chatbot project. In the next lesson, we'll learn how to do a

next lesson, we'll learn how to do a proper React setup so we can organize

proper React setup so we can organize our code into different files and

our code into different files and folders instead of putting everything

folders instead of putting everything into one HTML file. And this will help

into one HTML file. And this will help us work on bigger React projects.

us work on bigger React projects. And that's the end of this lesson. In

And that's the end of this lesson. In this lesson, we learned how to use CSS

this lesson, we learned how to use CSS with React. We styled the chatbot

with React. We styled the chatbot project. We reviewed flexbox which lets

project. We reviewed flexbox which lets us create a flexible layout. We learned

us create a flexible layout. We learned the turnary operator which lets us

the turnary operator which lets us insert an if else statement directly in

insert an if else statement directly in the JSX. We learned hooks which lets us

the JSX. We learned hooks which lets us insert React features into our

insert React features into our components. We learned the use effect

components. We learned the use effect hook which lets us run some code after

hook which lets us run some code after the component is created or updated. We

the component is created or updated. We learned the use ref hook which lets us

learned the use ref hook which lets us automatically save an HTML element from

automatically save an HTML element from the component

the component and we created the auto scroll feature

and we created the auto scroll feature for the chat messages.

Here are some exercises to help you practice what we learned in this lesson.

In this lesson, we're going to learn how to do a proper React setup. Right now,

to do a proper React setup. Right now, all of our HTML, CSS, and JavaScript

all of our HTML, CSS, and JavaScript code is combined into one HTML file,

code is combined into one HTML file, chatbot.html.

chatbot.html. Now, it's not good to combine all of our

Now, it's not good to combine all of our code in three different languages into

code in three different languages into one file because if we work on bigger

one file because if we work on bigger projects, this file might contain

projects, this file might contain thousands of lines of code, and it will

thousands of lines of code, and it will be almost impossible to manage all of

be almost impossible to manage all of that code if we put it all in one file.

that code if we put it all in one file. Instead, we're going to do a proper

Instead, we're going to do a proper React setup that will let us split up

React setup that will let us split up this code into different files and

this code into different files and folders.

folders. To create this React setup, we'll need

To create this React setup, we'll need to use the command line. So, first let's

to use the command line. So, first let's review the command line. We're going to

review the command line. We're going to go to VS Code and I'm going to make this

go to VS Code and I'm going to make this full screen.

full screen. And to open the command line, we're

And to open the command line, we're going to click the menu at the top and

going to click the menu at the top and we're going to click the terminal menu

we're going to click the terminal menu and we're going to open a new terminal.

So here we can give an instruction or a command to the computer. For example,

command to the computer. For example, we're going to type the command mkdir.

mkdir means make directory. A directory is another name for a folder. So make

is another name for a folder. So make directory creates a new folder.

directory creates a new folder. Then we'll type a space and we'll give

Then we'll type a space and we'll give this folder a name like test.

this folder a name like test. If we press enter,

If we press enter, it creates a new folder named test. So

it creates a new folder named test. So if we open our files on the left, you'll

if we open our files on the left, you'll see that it created a new folder named

see that it created a new folder named test.

test. If that does not work for you, you can

If that does not work for you, you can check the troubleshooting steps in the

check the troubleshooting steps in the description.

description. So on this line here we can give

So on this line here we can give instructions or commands to our computer

instructions or commands to our computer and that's why this is called the

and that's why this is called the command line

command line and a terminal basically lets us use the

and a terminal basically lets us use the command line and it also lets us view

command line and it also lets us view the output of the command line up here.

the output of the command line up here. So we created a new folder using this

So we created a new folder using this command. Now you might be wondering why

command. Now you might be wondering why did the folder get created here inside

did the folder get created here inside our project folder. As a review, the

our project folder. As a review, the command line runs inside a specific

command line runs inside a specific folder.

folder. To see which folder the command line is

To see which folder the command line is currently running in, we can go to the

currently running in, we can go to the bottom and type this command pwd or

bottom and type this command pwd or print working directory and press enter.

print working directory and press enter. And this command tells us the command

And this command tells us the command line is currently running in the

line is currently running in the react-course folder which is our project

react-course folder which is our project folder right here. That means any

folder right here. That means any commands that we give to the computer

commands that we give to the computer will be done inside this folder. If we

will be done inside this folder. If we make a directory, it will create the new

make a directory, it will create the new directory inside this folder like we see

directory inside this folder like we see here. If we give it another command like

here. If we give it another command like ls or list and press enter,

ls or list and press enter, it will list everything inside this

it will list everything inside this folder. So it will list everything here.

folder. So it will list everything here. As you can see, the command line runs

As you can see, the command line runs inside a specific folder.

inside a specific folder. Now this folder that the command line is

Now this folder that the command line is running in is called the working

running in is called the working directory or the working folder.

directory or the working folder. The last thing we need to review about

The last thing we need to review about the command line is how to change the

the command line is how to change the working directory. To do that, we're

working directory. To do that, we're going to go to the bottom and we're

going to go to the bottom and we're going to type the command cd or change

going to type the command cd or change directory and then press space and then

directory and then press space and then the name of the folder we want to change

the name of the folder we want to change to like test.

to like test. the command line will look for this

the command line will look for this folder in the working directory which is

folder in the working directory which is here and then it's going to go into this

here and then it's going to go into this folder. So now if we press enter and

folder. So now if we press enter and then type print working directory and

then type print working directory and press enter

press enter it will tell us the command line is now

it will tell us the command line is now running inside the test folder.

running inside the test folder. So the command line basically went

So the command line basically went inside this test folder and it's running

inside this test folder and it's running inside here. By the way, this is known

inside here. By the way, this is known as a file path. The slash here means

as a file path. The slash here means that the test folder is inside the

that the test folder is inside the react-course folder.

react-course folder. So now if we give a command like ls and

So now if we give a command like ls and press enter,

press enter, it will list everything inside the test

it will list everything inside the test folder because the command line is

folder because the command line is running inside this test folder and it

running inside this test folder and it tells us there's nothing inside the test

tells us there's nothing inside the test folder.

folder. Finally, to get out of the test folder,

Finally, to get out of the test folder, we can type cd or change directory and

we can type cd or change directory and then space and use the special value dot

then space and use the special value dot dot. Dot dot represents the outer

dot. Dot dot represents the outer folder.

folder. If we press enter,

If we press enter, the command line will go out of the test

the command line will go out of the test folder and back into the react-course

folder and back into the react-course folder.

folder. If we type the command pwd or print

If we type the command pwd or print working directory and press enter,

working directory and press enter, it will tell us the command line is

it will tell us the command line is running in the react-ourse folder again.

running in the react-ourse folder again. So using cd or change directory, we can

So using cd or change directory, we can change which folder the command line is

change which folder the command line is running in and we can basically move

running in and we can basically move around our computer. So this is just a

around our computer. So this is just a review of the command line.

review of the command line. The second thing we need for the React

The second thing we need for the React setup is NodeJS.

setup is NodeJS. So, we're going to review NodeJS.

So, we're going to review NodeJS. First, make sure you have the correct

First, make sure you have the correct version of NodeJS installed. To do that,

version of NodeJS installed. To do that, you can click this link in the

you can click this link in the description.

description. Scroll down to lesson 5 and follow the

Scroll down to lesson 5 and follow the instructions here to install the correct

instructions here to install the correct version of NodeJS.

After Node.js is installed, let's go back to VS Code. And if you just

back to VS Code. And if you just installed Node.js, we need to restart VS

installed Node.js, we need to restart VS Code to make sure that Node.js is

Code to make sure that Node.js is loaded.

loaded. So, we're going to click X in the top

So, we're going to click X in the top right of the terminal

right of the terminal and then close VS Code.

and then close VS Code. And then we're going to open VS Code

And then we're going to open VS Code again.

And we're going to open our project folder, React-Course.

folder, React-Course. and we're going to open a new terminal.

and we're going to open a new terminal. So, in the top menu, we're going to go

So, in the top menu, we're going to go to the terminal section and then open a

to the terminal section and then open a new terminal.

Now, when we install NodeJS, it's going to add a new command to our command line

to add a new command to our command line called node.

called node. So, the node command lets us run

So, the node command lets us run JavaScript code outside of a browser.

JavaScript code outside of a browser. For example, here we have a file called

For example, here we have a file called react-basics.js

react-basics.js and inside we have some simple

and inside we have some simple JavaScript code. If you don't have this

JavaScript code. If you don't have this file, feel free to pause the video and

file, feel free to pause the video and create this file. Now we can give this

create this file. Now we can give this file to node and it will run the

file to node and it will run the JavaScript code in this file. So here

JavaScript code in this file. So here we'll use the node command and type

we'll use the node command and type space and give it the file to run which

space and give it the file to run which is react-basics.js

and press enter. So this will run the JavaScript inside

So this will run the JavaScript inside this file and a console.logs hello. So

this file and a console.logs hello. So as you can see the node command lets us

as you can see the node command lets us run JavaScript code outside of our

run JavaScript code outside of our browser.

browser. Now when we install Node.js, it also

Now when we install Node.js, it also adds another command to our command line

adds another command to our command line called npm.

called npm. npm stands for node package manager. A

npm stands for node package manager. A package is basically an external

package is basically an external library. So npm lets us install external

library. So npm lets us install external libraries or packages into our project.

libraries or packages into our project. To do that, we can use the command npm

To do that, we can use the command npm space install

space install and then space and then the name of an

and then space and then the name of an external library or package.

external library or package. As an example, we'll install the package

As an example, we'll install the package super simple dev.

super simple dev. This is a package that I created that we

This is a package that I created that we can use as an example and press enter.

On Windows, if you get an error like this, you'll need to run this command

this, you'll need to run this command first

first and then run npm install super simple

and then run npm install super simple dev again.

dev again. If that still does not work for you, you

If that still does not work for you, you can check the troubleshooting steps in

can check the troubleshooting steps in the description.

Once npm install finishes, npm will download this external library or this

download this external library or this package into a folder called node

package into a folder called node modules. If we open this folder, we see

modules. If we open this folder, we see the super simple dev package and inside

the super simple dev package and inside this contains the code that we've been

this contains the code that we've been using in the chatbot project like

using in the chatbot project like react.js

react.js and chatbot.js.

and chatbot.js. npm contains millions of packages that

npm contains millions of packages that we can download and use in our project

we can download and use in our project and you can search for packages on the

and you can search for packages on the npm website.

So this is just a review of NodeJS and npm.

npm. Now that we reviewed NodeJS and npm,

Now that we reviewed NodeJS and npm, we're ready to do a proper React setup.

we're ready to do a proper React setup. We just learned that npm has millions of

We just learned that npm has millions of packages available to use. Some of these

packages available to use. Some of these packages also add a command to our

packages also add a command to our command line. For example, there's a

command line. For example, there's a package called create-vit.

package called create-vit. If we install this package, it also adds

If we install this package, it also adds a command to our command line called

a command to our command line called create-vit.

create-vit. The create-vit command helps us set up a

The create-vit command helps us set up a new React project.

new React project. To use the create-v command, we need to

To use the create-v command, we need to do two steps. Number one, we need to

do two steps. Number one, we need to install the create-vt package. And

install the create-vt package. And number two, we're going to run the

number two, we're going to run the create-v command in the command line.

create-v command in the command line. Now, npm actually has a shortcut for

Now, npm actually has a shortcut for this called npx.

this called npx. npx does these two steps in one step.

npx does these two steps in one step. The x means execute.

The x means execute. So let's go to our command line and

So let's go to our command line and let's type the command npx create-vt.

let's type the command npx create-vt. And then we'll also type the at symbol.

And then we'll also type the at symbol. At means we're going to use a specific

At means we're going to use a specific version of the create-vit command. For

version of the create-vit command. For this video, we're going to use a

this video, we're going to use a specific version so that you have the

specific version so that you have the same code that I do and you can follow

same code that I do and you can follow along.

along. To get the version of create-vt we're

To get the version of create-vt we're going to use, we're going to click this

going to use, we're going to click this link in the description.

link in the description. Go to lesson 5 and here you'll find the

Go to lesson 5 and here you'll find the version of create-vt we're going to use.

version of create-vt we're going to use. You can also find the full command here.

You can also find the full command here. By the way, the version that you see in

By the way, the version that you see in this video might be different than the

this video might be different than the version you see on your page. You should

version you see on your page. You should always use the version that you see on

always use the version that you see on your page. I did this because it's hard

your page. I did this because it's hard to update the video. So, this lets me

to update the video. So, this lets me easily update the version in the future.

easily update the version in the future. So, select the version on your page.

So, select the version on your page. Copy.

Copy. And in our command line, we're going to

And in our command line, we're going to paste it after the at.

paste it after the at. So again, this command will install the

So again, this command will install the create-vt package and then it will run

create-vt package and then it will run the create-vit command. The create-v

the create-vit command. The create-v command will help us set up a new react

command will help us set up a new react project.

project. By the way, in some tutorials, they

By the way, in some tutorials, they might use the command npm create vit.

might use the command npm create vit. This is just a shortcut for

This is just a shortcut for npxcreate-vit.

Now let's press enter. If it says it needs to install this

If it says it needs to install this package, we can press y for yes and

package, we can press y for yes and press enter.

Now the create-v command will ask us some questions. First it will ask us for

some questions. First it will ask us for a project name. So let's name it chatbot

a project name. So let's name it chatbot dash project and press enter.

dash project and press enter. And then it will ask us what technology

And then it will ask us what technology we want to use in our project. So we're

we want to use in our project. So we're going to press the down arrow and select

going to press the down arrow and select react and press enter.

react and press enter. And it will ask us what other tools we

And it will ask us what other tools we want in our project. We're going to

want in our project. We're going to press down and just select JavaScript

press down and just select JavaScript and press enter.

and press enter. and create vit will create an empty

and create vit will create an empty React project at this location or this

React project at this location or this folder right here.

folder right here. Next, we're going to go into this folder

Next, we're going to go into this folder with our command line. To do that, we

with our command line. To do that, we can use the command cd or change

can use the command cd or change directory and give it the folder name

directory and give it the folder name chatbot dash project and press enter.

chatbot dash project and press enter. If we type pwd and press enter,

If we type pwd and press enter, it will tell us the command line is now

it will tell us the command line is now running inside of the chatbot project

running inside of the chatbot project folder. So, it's running inside of here.

folder. So, it's running inside of here. The next thing we're going to do is

The next thing we're going to do is we're going to run the command npm

we're going to run the command npm install.

install. Inside our chatbot project folder, we

Inside our chatbot project folder, we have a special file called package.json.

So, package.json JSON contains a list of all the packages that are needed for

all the packages that are needed for this project. So, npm install is going

this project. So, npm install is going to install all of these packages at the

to install all of these packages at the same time.

same time. So, we'll go back to the command line

So, we'll go back to the command line and scroll down and we'll run the

and scroll down and we'll run the command npm install and press enter.

command npm install and press enter. Now, this might take a while because