1 00:00:07,830 --> 00:00:15,840 Welcome back and this video, we we're going to learn how to install the react, reveal and reacts model. 2 00:00:17,790 --> 00:00:25,290 And regrettably, to comments at the same time, and we're going to directly install a reactor, the 3 00:00:25,680 --> 00:00:37,050 reactor and that model in the same time, you need us to tap this command NPM install reget Rivervale 4 00:00:37,260 --> 00:00:48,360 like this and Ariete Dosch model like this as regards the NPM install, reactor reveal and reelects 5 00:00:48,360 --> 00:00:49,890 model does press on to. 6 00:00:52,760 --> 00:00:58,730 And we're going to wait for Koppa Siggins installation of Orwick to package his remarks, reveal and 7 00:00:58,730 --> 00:00:59,720 react more. 8 00:01:01,790 --> 00:01:09,740 Our inspiration is in process processing finished, we have succeeded to install our different packages 9 00:01:09,740 --> 00:01:20,950 about the react and react model and three, recall how we can use these different packages have called 10 00:01:21,500 --> 00:01:21,950 clear. 11 00:01:25,690 --> 00:01:35,050 After installing reactor vessel, we are going to use more reactor projects in order to make some animations 12 00:01:35,050 --> 00:01:40,330 in these different products that we have in our homepage. 13 00:01:40,990 --> 00:01:43,320 So let us go back in our visuals to your codes. 14 00:01:43,840 --> 00:01:47,620 So if we try let us make for our girls, are we going to take a look? 15 00:01:48,460 --> 00:01:56,580 And we has the components, which is, of course, in plural and these components is composed. 16 00:01:56,580 --> 00:01:59,920 It's by difference in vehicle, in singular. 17 00:02:00,370 --> 00:02:05,590 And we are going to make an animation in each they call. 18 00:02:06,160 --> 00:02:12,100 OK, so you can see we have used a map function. 19 00:02:12,730 --> 00:02:15,670 This is our very let us come first in our way. 20 00:02:16,090 --> 00:02:17,250 This is Congress. 21 00:02:17,500 --> 00:02:21,900 So let us scroll down to see where is our three course components. 22 00:02:22,090 --> 00:02:27,340 OK, this is of course components which is included in our home dodgiest components. 23 00:02:27,940 --> 00:02:37,900 And here we have cars, have ID cards, these status cards we have like this and we have all our own 24 00:02:39,130 --> 00:02:39,940 cars here. 25 00:02:40,130 --> 00:02:47,380 OK, so let us go in the car in singularities here and our vehicle. 26 00:02:48,010 --> 00:02:49,120 Oh, the curtain. 27 00:02:49,120 --> 00:02:50,940 Synagro is included in our. 28 00:02:53,870 --> 00:02:57,870 Now, let us go big visible in Vegas, OK, Vegas, please. 29 00:02:57,890 --> 00:03:04,070 Yes, Vegas in here, because we're first for the holidays in Hollywood. 30 00:03:04,100 --> 00:03:04,660 Yes, yes. 31 00:03:04,670 --> 00:03:10,040 They cause a component of a cast which is included in the chase. 32 00:03:10,340 --> 00:03:11,220 And let us go back. 33 00:03:11,270 --> 00:03:13,010 Let us go into Vegas. 34 00:03:13,430 --> 00:03:14,060 Dodgiest. 35 00:03:14,360 --> 00:03:16,160 You're going to see the car. 36 00:03:16,320 --> 00:03:23,090 The cause of this is composed by different by different vehicle. 37 00:03:23,150 --> 00:03:29,270 OK, the first single singular day that we have, you can see we have used the malfunction in order 38 00:03:29,270 --> 00:03:31,970 to acoustics in all our way. 39 00:03:32,990 --> 00:03:36,800 They call and if we try to come in, they call. 40 00:03:37,280 --> 00:03:41,380 You're going to see we have r d a kick, you have Arkes. 41 00:03:41,720 --> 00:03:47,680 So what we're gonna do, we are going to come in there because we are going to use the react to reveal. 42 00:03:47,870 --> 00:03:55,160 So let us see how to use react rethread you know this is animation in our atrip said I'm going to say 43 00:03:55,160 --> 00:04:02,900 for example import Zoome and here I'm going to create my own object that I'm going to name is Zoom and 44 00:04:02,900 --> 00:04:10,410 I'm going to say from react space, space, concert space you're going to see we have rights reserved 45 00:04:10,430 --> 00:04:10,790 here. 46 00:04:11,000 --> 00:04:15,170 So let us click here and you're going to put slash concert space. 47 00:04:15,170 --> 00:04:22,400 You want to see different animations that we have in reveal so you can choose your own animation, in 48 00:04:22,400 --> 00:04:30,260 which case I'm going to choose, choose zoom like I'm going to choose Zoom and we're going to do I'm 49 00:04:30,260 --> 00:04:35,180 going to take my and my object, which is a component, OK? 50 00:04:35,300 --> 00:04:36,530 It is a component. 51 00:04:37,130 --> 00:04:41,510 What I'm going to do, I'm going to grab all my cingulate. 52 00:04:41,510 --> 00:04:42,920 They call these components. 53 00:04:42,920 --> 00:04:45,890 I'm going to grab all these, please. 54 00:04:48,600 --> 00:04:54,150 I'm going to report this in here, I'm going to see your column. 55 00:04:56,470 --> 00:04:57,610 I'm going to say. 56 00:05:01,610 --> 00:05:04,070 OK, so I'm going to say Tsong. 57 00:05:08,940 --> 00:05:13,560 They can't uses the components and I'm going to put all such here. 58 00:05:15,560 --> 00:05:21,470 So it does big for to see what's written, I have like a reaction, so you going to see hear this. 59 00:05:22,550 --> 00:05:27,890 It is not interesting wages because a. 60 00:05:31,500 --> 00:05:35,450 We don't have to put our reactor in here. 61 00:05:35,510 --> 00:05:43,280 OK, so what are we are going to remove or this we're going to put it in inside of our they call components, 62 00:05:43,290 --> 00:05:43,640 OK? 63 00:05:44,340 --> 00:05:46,680 And now they course in plural. 64 00:05:46,690 --> 00:05:52,950 So we are going to make it like it was my thoughts and we are going to come in. 65 00:05:52,950 --> 00:05:54,450 They cockroaches the chase. 66 00:05:54,690 --> 00:05:57,720 OK, and we are going to bring this here. 67 00:05:57,960 --> 00:06:03,420 Imports zoom, please zoom from. 68 00:06:05,340 --> 00:06:08,490 Or yet reveal some. 69 00:06:09,490 --> 00:06:10,120 Lettuce. 70 00:06:10,210 --> 00:06:15,250 OK, and here what we're going to do, we are going to put our side here. 71 00:06:15,280 --> 00:06:17,800 I'm going to grow from this image, OK? 72 00:06:18,490 --> 00:06:21,760 And never put your zoom in. 73 00:06:22,270 --> 00:06:28,780 OK, never put your column between these components, but put the zoom in inside of your column. 74 00:06:28,960 --> 00:06:33,230 OK, is this to correct this here? 75 00:06:33,370 --> 00:06:34,360 OK, yes. 76 00:06:34,370 --> 00:06:36,250 So we are going to take all these. 77 00:06:38,700 --> 00:06:45,510 Please, I'm going to take all discuss the contents of Polycarp, I'm going to grab this contents and 78 00:06:45,510 --> 00:06:52,800 I'm going to say I'm OK and I'm going to pass over here. 79 00:06:56,100 --> 00:07:00,820 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 80 00:07:00,820 --> 00:07:01,560 perfectly. 81 00:07:01,930 --> 00:07:06,250 If I tried to reload, you're going to see we have some very good. 82 00:07:06,250 --> 00:07:07,990 And I can swear to tell the truth. 83 00:07:07,990 --> 00:07:16,250 For example, Mercedes, Toyota, I kick back to Mercedes, Nissan, for example. 84 00:07:16,830 --> 00:07:17,830 OK, I used. 85 00:07:19,420 --> 00:07:21,550 Lowest level. 86 00:07:22,960 --> 00:07:23,640 Come here. 87 00:07:24,260 --> 00:07:26,890 Yeah, all these. 88 00:07:28,670 --> 00:07:30,180 Computer lowest. 89 00:07:31,190 --> 00:07:31,860 Very good. 90 00:07:32,120 --> 00:07:37,970 And we have succeeded in courts react to reveal in our application, we can do also the same thing with 91 00:07:37,970 --> 00:07:40,010 our records by clicking on add to cart. 92 00:07:40,130 --> 00:07:44,290 The desire is to have an animation or so here in our records. 93 00:07:44,690 --> 00:07:49,370 So let us make our visual studio cards and we are going to come in and record components. 94 00:07:49,370 --> 00:07:53,170 Kanojia, which is here, and we are going to put the same thing. 95 00:07:53,510 --> 00:07:59,420 And here we are going to create we are going to take in the animation, we are going to take the animation. 96 00:07:59,540 --> 00:08:11,030 And here I'm going to say import fades from react, reveal, slash, fade like this we can. 97 00:08:12,730 --> 00:08:17,770 And I'm going to take all my comments, I'm going to grab our discontent. 98 00:08:18,740 --> 00:08:20,440 OK, so again, excuse me. 99 00:08:21,830 --> 00:08:28,730 I have some problem with Lismore's, I have faith that this and I'm going to pass my. 100 00:08:30,390 --> 00:08:33,160 OK, I have faith, very good. 101 00:08:33,580 --> 00:08:34,680 OK, this is. 102 00:08:35,370 --> 00:08:38,980 The Chase court notice and let is big here. 103 00:08:39,330 --> 00:08:41,000 So you're going to see we have same issue. 104 00:08:41,100 --> 00:08:44,340 If it were to click here just to educate. 105 00:08:44,820 --> 00:08:50,480 You see, we have a Fed animation and we can add something here. 106 00:08:50,490 --> 00:08:58,410 We cannot say, for example, right crosscuts left from left to the right. 107 00:08:58,530 --> 00:09:01,890 OK, class cut like this. 108 00:09:03,320 --> 00:09:06,230 Please make sure to put first words here. 109 00:09:17,430 --> 00:09:18,610 I said, okay. 110 00:09:20,060 --> 00:09:20,870 Sayed. 111 00:09:36,940 --> 00:09:37,690 Lift. 112 00:09:39,260 --> 00:09:46,400 Cost cuts, Latisse, and we also try to make sure you're to see this and mission changes, click on 113 00:09:46,400 --> 00:09:46,580 it. 114 00:09:47,590 --> 00:09:51,520 OK, you will see we have this animation that records. 115 00:09:51,560 --> 00:09:57,890 OK, so we can do also the same thing with our order once we click on this button. 116 00:09:58,250 --> 00:10:05,970 So the desire is to get in the animation, you know, the Fed animation in our room from here. 117 00:10:06,080 --> 00:10:13,130 Once they click on Otar, the desire is to have animation from right to the left for this form and we 118 00:10:13,130 --> 00:10:17,410 are going to back up your codes, come in or form components here. 119 00:10:17,990 --> 00:10:26,570 We are going to add from, OK, we are going to edit the Fed animation in order it from we are going 120 00:10:26,570 --> 00:10:37,310 to say we're going to say it fades from reset reveal slash fed that is. 121 00:10:38,090 --> 00:10:39,110 So I just throw down. 122 00:10:40,050 --> 00:10:43,920 I'm going to scroll down and I'm going to grab all my phone. 123 00:10:44,490 --> 00:10:45,210 Excuse me. 124 00:10:47,580 --> 00:10:50,340 I'm going to grab all my phone. 125 00:10:52,060 --> 00:11:01,140 And I'm going to pass this in instead of the Fed component, that is positive Orton's such here, so 126 00:11:01,150 --> 00:11:03,340 let us mix in the tension. 127 00:11:09,680 --> 00:11:18,840 At this and here we just say, let us live by the thought like this, and if I click on this, OK, 128 00:11:18,890 --> 00:11:20,930 you will see here this animation. 129 00:11:22,010 --> 00:11:26,050 OK, so, ladies, it's something we're going to say, right? 130 00:11:27,820 --> 00:11:34,540 Cost cuts like this, right, cost cuts, it has big order. 131 00:11:37,660 --> 00:11:40,430 OK, you have it we have it from right. 132 00:11:41,380 --> 00:11:48,790 OK, from right to the left, a close look on it, like from right to the left. 133 00:11:48,820 --> 00:11:49,450 Very good. 134 00:11:49,460 --> 00:11:55,510 And we have finished with react to reveal in the next video we are going to trickle it model.