1
00:00:00,460 --> 00:00:02,980
Venezuela will see how appropriate the.

2
00:00:04,060 --> 00:00:09,000
Check out Page and then use the Acrobat Dome for that for the reactor outing.

3
00:00:10,260 --> 00:00:14,790
Let us go to our visual studio put creator check out component.

4
00:00:16,110 --> 00:00:21,060
To me, psychologist and creative style is fit for that.

5
00:00:24,630 --> 00:00:25,800
Check our boxes this.

6
00:00:28,360 --> 00:00:30,550
And in fact, check out our jet and building this brick.

7
00:00:36,060 --> 00:00:37,350
So I have to import this.

8
00:00:38,910 --> 00:00:43,050
The act and then import the science, the fellowship.

9
00:00:48,290 --> 00:00:52,440
So I intend to do I'll be creating a hello world Typekit one.

10
00:00:55,360 --> 00:00:56,110
Hello, world.

11
00:01:01,410 --> 00:01:07,530
So that in this started, so this is like we have printed the check out, yes, but photos out our React

12
00:01:07,530 --> 00:01:13,230
page to the checkout, like if we click on Get Out or go to the checkout page, so we will download

13
00:01:13,230 --> 00:01:16,160
something called the React Order using the npm package.

14
00:01:17,270 --> 00:01:17,530
OK.

15
00:01:18,710 --> 00:01:23,390
Side me opening on your terminal and reactor down the to.

16
00:01:25,740 --> 00:01:30,210
So this npm package basically helps us for the react routing purpose.

17
00:01:35,600 --> 00:01:39,720
Oh, OK, I forgot the install command and BMI reactor or.

18
00:01:41,800 --> 00:01:44,020
So this will take a few seconds.

19
00:01:45,670 --> 00:01:53,740
Finally, let us use before it gets and started as use that is not bombed yet at project, so we can

20
00:01:53,740 --> 00:01:54,080
see.

21
00:01:55,690 --> 00:02:03,610
The harder I know we are having the confidence, so when use that it goes to like slash check out which

22
00:02:04,630 --> 00:02:10,330
we have for them to check our components instead of rendering the checkout component, it's still rendering

23
00:02:10,330 --> 00:02:14,320
the same the M.P.H. like with the header component and the home component.

24
00:02:14,800 --> 00:02:15,700
So how to do that?

25
00:02:15,880 --> 00:02:17,020
So we'll be using this.

26
00:02:17,260 --> 00:02:21,430
We'll be importing the browser output from react or don't.

27
00:02:32,670 --> 00:02:33,480
As it outcome.

28
00:02:33,870 --> 00:02:36,840
So we'll be using three things, but I can go out and switch.

29
00:02:42,230 --> 00:02:43,230
From the act of.

30
00:02:50,570 --> 00:02:56,330
So as you can see or hear or when you check whether the instructions the installation is completed so

31
00:02:56,330 --> 00:02:57,080
we can use them.

32
00:02:58,200 --> 00:03:03,210
So now what I will do is so I can say that by an initial Esmeralda.

33
00:03:08,780 --> 00:03:08,940
So.

34
00:03:09,920 --> 00:03:15,860
So in that there'll be a switch get like it's like a basic switch, switch gears in your programming

35
00:03:16,020 --> 00:03:16,540
concepts.

36
00:03:16,880 --> 00:03:22,880
So for each about will be implementing different components of that's what will be using the Victoria.

37
00:03:24,680 --> 00:03:24,890
OK.

38
00:03:25,080 --> 00:03:26,000
This is just such.

39
00:03:27,960 --> 00:03:28,200
Yeah.

40
00:03:30,190 --> 00:03:33,310
So instead of the switch like now, you can use the different roads.

41
00:03:33,670 --> 00:03:35,920
So, for example, I want to talk.

42
00:03:39,550 --> 00:03:44,430
For pot, so you have to mention the part that we were told in the past will be check out.

43
00:03:46,370 --> 00:03:50,270
The first check out brought I want to render that and my checkout company, so the hair that is like

44
00:03:50,450 --> 00:03:53,400
basically we left for everything Typekit under my radar.

45
00:03:53,810 --> 00:03:56,630
And then I randomly check out the Hello welcome.

46
00:03:59,380 --> 00:04:01,900
OK, so we have done with the first drop.

47
00:04:02,230 --> 00:04:04,020
So now the second dog will be our home.

48
00:04:04,600 --> 00:04:08,170
So remember one thing the whole should come at the last of all notes.

49
00:04:08,470 --> 00:04:11,920
They should give the homework first for everything, even the homeowner itself.

50
00:04:14,450 --> 00:04:16,460
So now and then the party will be.

51
00:04:19,680 --> 00:04:19,910
On.

52
00:04:21,240 --> 00:04:26,580
So now we'll basically cut this head, I don't know and will pay it over here.

53
00:04:31,960 --> 00:04:32,920
For me, like.

54
00:04:34,040 --> 00:04:35,110
Do dispensing thing?

55
00:04:36,170 --> 00:04:36,440
Yeah.

56
00:04:38,300 --> 00:04:43,850
So basically, we have created around the switch back and then that part, we have implemented this.

57
00:04:44,480 --> 00:04:45,560
So now, as you can see.

58
00:04:49,150 --> 00:04:54,550
Check out is not different, so we have an important check out yet, so I've been for the component.

59
00:05:04,320 --> 00:05:08,910
So now, as you can see, when we are in the flat checkout, you all can see the there and then the

60
00:05:08,910 --> 00:05:16,020
checkout component or the hair that in the checkout if I go to my home like that is the local you can

61
00:05:16,020 --> 00:05:17,960
see here in this thing rendering.

62
00:05:18,360 --> 00:05:25,320
So now what we are left with is that when we click on this basket item, then we have to render the

63
00:05:25,320 --> 00:05:26,640
flash checkout reject.

64
00:05:27,690 --> 00:05:33,330
So how to do that, we'll be using the same link that that we will get from React protocol.

65
00:05:34,730 --> 00:05:41,720
So basically, we have to go to that and adopt this and then import the link that we get from the act

66
00:05:41,720 --> 00:05:43,730
of random import.

67
00:05:45,780 --> 00:05:46,200
Link.

68
00:05:47,990 --> 00:05:48,860
From reactor number.

69
00:06:03,060 --> 00:06:10,200
So once we import it, we often go to the map item Libyan basket and then use it in court in.

70
00:06:16,330 --> 00:06:18,780
So in the link, we have to mention there, too.

71
00:06:19,030 --> 00:06:24,140
Well, like the part the poppy mentioned in the road, we have to mention that you already had to check

72
00:06:24,160 --> 00:06:26,080
out flag sticker.

73
00:06:26,080 --> 00:06:31,660
That means that this is related to the root of the root, the root local, the root you are and is the

74
00:06:31,660 --> 00:06:32,650
local street again.

75
00:06:32,920 --> 00:06:38,020
So it is related to that sort of local hospitals slash vehicle, so it will look at that.

76
00:06:38,440 --> 00:06:44,030
And then when we use it, whenever we use Link, it will give the default style of underlying support

77
00:06:44,320 --> 00:06:48,080
any more than the line will be giving that custom sign over it.

78
00:06:48,760 --> 00:06:50,500
That's why it should be in the object format.

79
00:06:50,500 --> 00:06:54,130
So insert the JavaScript Kali Bridge to use JavaScript.

80
00:06:54,130 --> 00:06:58,150
We are focusing on that object, so I'll be using another object XT.

81
00:06:59,150 --> 00:07:00,940
Decoration will be none.

82
00:07:04,470 --> 00:07:07,970
So the Senate inside this, we have to keep this there.

83
00:07:12,040 --> 00:07:13,250
So we are done with that.

84
00:07:13,490 --> 00:07:19,820
So now when you go to our home page and when you click on that, check out this, then you can see the

85
00:07:19,820 --> 00:07:20,950
checkout page being rendered.

86
00:07:21,260 --> 00:07:25,070
And now if you want to go back, we have to click on the icon so that if you click on the economy to

87
00:07:25,070 --> 00:07:31,250
go back to the original page, so it's the same thing we have to use link over there in the header nova

88
00:07:31,250 --> 00:07:32,370
section, the header, the.

89
00:07:33,440 --> 00:07:34,280
I'll be using that.

90
00:07:38,270 --> 00:07:41,390
So I'll be using the link.

91
00:07:42,760 --> 00:07:51,400
To slash and then, as you know, style will be a custom JavaScript object with text decoration.

92
00:07:55,880 --> 00:07:56,480
As none.

93
00:08:05,450 --> 00:08:07,730
And then I'll be copy pasting this do.

94
00:08:10,680 --> 00:08:11,340
Inside this.

95
00:08:16,010 --> 00:08:21,830
So, yeah, so with this, when you pick online shopping, it is going back to the homepage and if you

96
00:08:21,830 --> 00:08:26,240
click on the check up, the basket diameter is going into the checkout.

97
00:08:26,720 --> 00:08:32,350
So with this, we have completed the routing and linking of different companies following the next year

98
00:08:32,550 --> 00:08:34,730
and see how to create this checkout page.

99
00:08:35,230 --> 00:08:35,720
Not that.

100
00:08:36,140 --> 00:08:41,630
And how to how do we get your product, your products that you added to the cart and then the total

101
00:08:41,630 --> 00:08:44,360
price of the products present so that we haven't seen the next figure?