Welcome back and this video, we we're going to learn how to install the react, reveal and reacts model.
And regrettably, to comments at the same time, and we're going to directly install a reactor, the
reactor and that model in the same time, you need us to tap this command NPM install reget Rivervale
like this and Ariete Dosch model like this as regards the NPM install, reactor reveal and reelects
model does press on to.
And we're going to wait for Koppa Siggins installation of Orwick to package his remarks, reveal and
react more.
Our inspiration is in process processing finished, we have succeeded to install our different packages
about the react and react model and three, recall how we can use these different packages have called
clear.
After installing reactor vessel, we are going to use more reactor projects in order to make some animations
in these different products that we have in our homepage.
So let us go back in our visuals to your codes.
So if we try let us make for our girls, are we going to take a look?
And we has the components, which is, of course, in plural and these components is composed.
It's by difference in vehicle, in singular.
And we are going to make an animation in each they call.
OK, so you can see we have used a map function.
This is our very let us come first in our way.
This is Congress.
So let us scroll down to see where is our three course components.
OK, this is of course components which is included in our home dodgiest components.
And here we have cars, have ID cards, these status cards we have like this and we have all our own
cars here.
OK, so let us go in the car in singularities here and our vehicle.
Oh, the curtain.
Synagro is included in our.
Now, let us go big visible in Vegas, OK, Vegas, please.
Yes, Vegas in here, because we're first for the holidays in Hollywood.
Yes, yes.
They cause a component of a cast which is included in the chase.
And let us go back.
Let us go into Vegas.
Dodgiest.
You're going to see the car.
The cause of this is composed by different by different vehicle.
OK, the first single singular day that we have, you can see we have used the malfunction in order
to acoustics in all our way.
They call and if we try to come in, they call.
You're going to see we have r d a kick, you have Arkes.
So what we're gonna do, we are going to come in there because we are going to use the react to reveal.
So let us see how to use react rethread you know this is animation in our atrip said I'm going to say
for example import Zoome and here I'm going to create my own object that I'm going to name is Zoom and
I'm going to say from react space, space, concert space you're going to see we have rights reserved
here.
So let us click here and you're going to put slash concert space.
You want to see different animations that we have in reveal so you can choose your own animation, in
which case I'm going to choose, choose zoom like I'm going to choose Zoom and we're going to do I'm
going to take my and my object, which is a component, OK?
It is a component.
What I'm going to do, I'm going to grab all my cingulate.
They call these components.
I'm going to grab all these, please.
I'm going to report this in here, I'm going to see your column.
I'm going to say.
OK, so I'm going to say Tsong.
They can't uses the components and I'm going to put all such here.
So it does big for to see what's written, I have like a reaction, so you going to see hear this.
It is not interesting wages because a.
We don't have to put our reactor in here.
OK, so what are we are going to remove or this we're going to put it in inside of our they call components,
OK?
And now they course in plural.
So we are going to make it like it was my thoughts and we are going to come in.
They cockroaches the chase.
OK, and we are going to bring this here.
Imports zoom, please zoom from.
Or yet reveal some.
Lettuce.
OK, and here what we're going to do, we are going to put our side here.
I'm going to grow from this image, OK?
And never put your zoom in.
OK, never put your column between these components, but put the zoom in inside of your column.
OK, is this to correct this here?
OK, yes.
So we are going to take all these.
Please, I'm going to take all discuss the contents of Polycarp, I'm going to grab this contents and
I'm going to say I'm OK and I'm going to pass over here.
Well, so what I'm going to say, I'm going to bet you're very good, you're going to see it's works
perfectly.
If I tried to reload, you're going to see we have some very good.
And I can swear to tell the truth.
For example, Mercedes, Toyota, I kick back to Mercedes, Nissan, for example.
OK, I used.
Lowest level.
Come here.
Yeah, all these.
Computer lowest.
Very good.
And we have succeeded in courts react to reveal in our application, we can do also the same thing with
our records by clicking on add to cart.
The desire is to have an animation or so here in our records.
So let us make our visual studio cards and we are going to come in and record components.
Kanojia, which is here, and we are going to put the same thing.
And here we are going to create we are going to take in the animation, we are going to take the animation.
And here I'm going to say import fades from react, reveal, slash, fade like this we can.
And I'm going to take all my comments, I'm going to grab our discontent.
OK, so again, excuse me.
I have some problem with Lismore's, I have faith that this and I'm going to pass my.
OK, I have faith, very good.
OK, this is.
The Chase court notice and let is big here.
So you're going to see we have same issue.
If it were to click here just to educate.
You see, we have a Fed animation and we can add something here.
We cannot say, for example, right crosscuts left from left to the right.
OK, class cut like this.
Please make sure to put first words here.
I said, okay.
Sayed.
Lift.
Cost cuts, Latisse, and we also try to make sure you're to see this and mission changes, click on
it.
OK, you will see we have this animation that records.
OK, so we can do also the same thing with our order once we click on this button.
So the desire is to get in the animation, you know, the Fed animation in our room from here.
Once they click on Otar, the desire is to have animation from right to the left for this form and we
are going to back up your codes, come in or form components here.
We are going to add from, OK, we are going to edit the Fed animation in order it from we are going
to say we're going to say it fades from reset reveal slash fed that is.
So I just throw down.
I'm going to scroll down and I'm going to grab all my phone.
Excuse me.
I'm going to grab all my phone.
And I'm going to pass this in instead of the Fed component, that is positive Orton's such here, so
let us mix in the tension.
At this and here we just say, let us live by the thought like this, and if I click on this, OK,
you will see here this animation.
OK, so, ladies, it's something we're going to say, right?
Cost cuts like this, right, cost cuts, it has big order.
OK, you have it we have it from right.
OK, from right to the left, a close look on it, like from right to the left.
Very good.
And we have finished with react to reveal in the next video we are going to trickle it model.