To set a condition here, Rodinia State.
We are going to see.
This not perhaps, as you can see, we are using the clock to address clock clock, though this is a
stateful components, it is a components.
If you want to use props, make sure to, first of all, put this that props race.
If this was a statelets components or afunction components, make sure, first of all, to put props
as parameter in your props, make sure to put props, to pass props as a parameter instead of your clock.
A function idea is if you're using a glass, components begin, first of all, to put these those props.
That is, and we are going to say coller.
This is the first condition that means if.
The condition is true, so let us put through here by default.
If true, then you are going to say the car is going to be green like this green Atari's else.
We are going to have orange like this and we have hearing your silence of any segments here.
We need to assign this.
We are going to say, for example, coast caller is going to equal to this that perhaps does color like
this.
And here I'm going to say, for example, I am a green or orange warrant to say I'm going to use some
very borsa some dynamic system.
If it is true, it will say I'm green health.
I'm going to say I'm orange.
Okay.
And I'm going to take all this this condition here.
I'm going to come here, make sure to put Culbreath is if you want to integrate the Java script code
in your day six, this first column, and here we're going to say I'm going to say I'm green like this.
I'm going to say I'm green and here and I'm going, if I'm green, let us remove this.
We don't need it anymore.
And what are going to say?
I'm going to say I'm collo like this.
Yes.
I'm Carla.
Yes, if it is green, I'm going to have here I'm green, if orange and orange, and here we are going
to the front.
Also a class name.
That is in which we are going to put.
Color, as you can see.
Yes, like this incident, and it's automatically understand, for example, if the glass is orange
or green and it will is its tree.
So let us begin by default.
We have three.
We have true.
And here we are going to have these streets like in orange and the message is going to be orange.
I'm green, please.
I'm green for the first condition.
Ungarie, let us back here.
Let us Larry Page.
As you can see, our green.
Very good.
And I'm green.
Let us make for here.
And if you come in your elements Upanishads you're going to see if the tree is take the Fed.
What is it we take.
I'm green and the glass is equal to green as you can see.
But if we try to change here, say false.
Let us be here and you're going to see an orange and the class also extends to orange, the very simple
and here you can read the message, orange is very simple and it is moments we are going to learn,
for example, how you can integrate, for example, two classes in a natural beauty.
For example, you have a class name attributes in each e-mail, you have a class attributes.
But in any set of these attributes, you want to use two classes.
We are going to to to solve this problem.
Also says we are going to add a new class that's regular Karl.
Big fonts, that's a big font.
And we just a big font is like this.
And instead of our big fonts, we're going to see, for example, font size.
Font size like this regal, say, for example, a font size is going to be a sexy pictures like this.
Sixty pixels and fonts wait.
Fontes weight is going to be equal, frisee is going to be bought, for example, and I'm going to back
our clock doges can by using H.M. if you want.
For example, we are going to add diskless here if you want resample to import this in array tag if
you try to put it for example here it's candlewick, big fonts, big font.
Nothing will happen.
Let us try to reload your page, try to upend our ÉDITH.
Let us see what we have in our three letters for we have only clustering.
Nothing happened and we're going to add this second class like this color is the first class, but we
want to add another class, which is big fonts, having font size and therefore fonts with lattice.
So what's reg'lar do here is to make some JavaScript concatenation like this.
And here we are going to put your big font in inside here.
So let us make here you're going to see nothing happen and orange is dispirits way if you try to scroll
down.
See in our industry take we have Nickless here, but we don't have a Nesbitt's, we have orange and
big fonts we should have in this space here if we want to, to integrate all these two classes in Arabic.
It's streetside.
So let us be OK here.
We're going to put some space and beg.
You're going to see Orrin's having a font size and influence.
Well, if you wait a has we have defined it in our Eclectus.
Yes, this project is very good.
And for example, you have so many classes in inside of your JavaScript file instead of everything.
For example, these kinds of concatenation, we are going to be using what we call a template, the
template literals.
We are going to use the template literals.
Instead of putting this concatenation like this and put the double quotes, we are going to use the
the template literal.
So what is the template to return the template literals.
You're going to take all class, you have input and you're going to top the structure command alt G.R.
seven Lattis.
If you're using a P.C., you have color, but color is a constants or a variable, you can declare color
as a variable or a constants.
As you can see, we are not going to put it like this because in a color we have assigned it in a property
or a value.
So we are going to say color.
We are going to put color in instead of a cardboard.
And before they call races, you are going to put the dollar sign in order to specify this and this,
which is a constants or a variable.
So if we try to make here, you're going to see we're going to get the same thing.
And if we try to make here, you're going to see we have the orange class and we have also the big ones,
glass, very simple and very clear.
So this is the template literals that you can use in your religious projects.
And we are going to continue through the next video.