1
00:00:01,530 --> 00:00:09,420
In this video, we'll see how to use this to react, Dom, and I'm creating the react different components

2
00:00:09,420 --> 00:00:15,090
of, you know, skin section experience, a section, education section and portfolio sections.

3
00:00:16,120 --> 00:00:23,170
So, yeah, this should be the final core of what we want to do in this video, I'll explain you all

4
00:00:23,170 --> 00:00:28,590
the code line by line, why it is happening and what what we want to achieve by the from this code.

5
00:00:28,810 --> 00:00:29,080
Right.

6
00:00:30,700 --> 00:00:31,120
So.

7
00:00:33,770 --> 00:00:38,120
So, yeah, so we have seen here all the import statements.

8
00:00:38,480 --> 00:00:40,790
But what this this statement means.

9
00:00:42,300 --> 00:00:48,960
So this is basically where this reactor, Rotterdam, is a dependency that we install that you can also

10
00:00:48,960 --> 00:00:52,490
check over here and or package or Jason grabbing reactor or the.

11
00:00:54,030 --> 00:00:59,880
That we are important, but we don't want all the functions that are present in the package.

12
00:01:00,390 --> 00:01:05,070
We only want a few certain functions that are that are present in the package that are.

13
00:01:06,300 --> 00:01:07,740
Doubters out and switch.

14
00:01:08,010 --> 00:01:13,920
OK, so this we are importing, but we're using some curly braces, as you can see here.

15
00:01:14,450 --> 00:01:19,560
But before imports, we're not using any collaborators, but here we are using the curly braces for

16
00:01:19,560 --> 00:01:21,240
importing why this is happening.

17
00:01:21,630 --> 00:01:26,790
This is because these are all the default exports that we are making inside these files.

18
00:01:27,240 --> 00:01:30,780
For example, we'll see one go to some about section dodges.

19
00:01:32,560 --> 00:01:36,380
Here you can see we are exporting this function by default.

20
00:01:36,400 --> 00:01:43,810
So this is the default export about this so that it's said that no need to import that using locally.

21
00:01:43,860 --> 00:01:49,660
This is but this since many one thing I remember is there can be only one function that is the default

22
00:01:49,660 --> 00:01:50,080
export.

23
00:01:50,440 --> 00:01:56,500
You can export as many as functions you want, insert any file or any dependency, but only one can

24
00:01:56,500 --> 00:01:57,040
be D4.

25
00:01:57,340 --> 00:02:01,580
So that is why, since there are many functions in the reactor room, there is only one default, but

26
00:02:01,580 --> 00:02:03,520
we don't know what the default or export is.

27
00:02:04,210 --> 00:02:05,320
So basically, we run through.

28
00:02:05,320 --> 00:02:09,770
You will be using this calibration, then we'll be importing all the necessary functions that we want

29
00:02:09,770 --> 00:02:14,260
from the reactor, Tottenham, since they are not the default export that they're just exports.

30
00:02:15,950 --> 00:02:22,340
And then the next thing you have to do after importing the army is you have to create a folder called

31
00:02:22,340 --> 00:02:23,810
components, right?

32
00:02:24,500 --> 00:02:29,330
Create affordable components in this folder will have all the components within the folder for now,

33
00:02:29,330 --> 00:02:31,790
but there will be a folder for various components.

34
00:02:32,120 --> 00:02:33,680
Then there's been pages components.

35
00:02:33,680 --> 00:02:39,020
You can now create organiser folders for our world education experience, portfolio profile, access

36
00:02:39,020 --> 00:02:40,400
skills and all this you want.

37
00:02:41,090 --> 00:02:45,050
And then you can basically, you know, fact then you can create these files.

38
00:02:45,800 --> 00:02:47,420
This is a basic thing that will do.

39
00:02:48,530 --> 00:02:49,040
And then.

40
00:02:50,390 --> 00:02:56,570
Well, we have been warned them from the create what we created, so I show you one thing, for example,

41
00:02:56,990 --> 00:03:01,960
an inside page, I'm getting a new file called Best Dark Genius.

42
00:03:02,840 --> 00:03:03,800
If you do this.

43
00:03:05,730 --> 00:03:06,760
And out of sea.

44
00:03:07,770 --> 00:03:14,120
So this is this report that I'll be using, though if you want to have this go to package's extensions,

45
00:03:14,140 --> 00:03:15,810
yeah, and then click for.

46
00:03:17,650 --> 00:03:20,430
Just six is six.

47
00:03:22,760 --> 00:03:23,030
Yeah.

48
00:03:23,990 --> 00:03:31,100
JavaScript ethics code snippets, you can install this there are also other things reactor babbled reactor

49
00:03:31,100 --> 00:03:32,020
reactor Dexia.

50
00:03:33,780 --> 00:03:35,340
Well, the act.

51
00:03:36,860 --> 00:03:45,530
Yes, p.m. This package is $7 Act slash redux slash draft, fast react native cineplex, this is a package

52
00:03:45,530 --> 00:03:46,850
that you can start individuals.

53
00:03:47,540 --> 00:03:52,460
And one thing I'll be using mushrooms to record because of this package and snippets in visual studio

54
00:03:52,460 --> 00:03:52,800
code.

55
00:03:52,820 --> 00:03:58,700
There is a beautiful option for all these packaging cineplex tonight, so according pack will be easy

56
00:03:58,700 --> 00:04:01,200
for us to start lighting up the board.

57
00:04:01,640 --> 00:04:06,470
The mini lot of kind of boilerplate what we can basically use the Cineplex so that we have the autofill

58
00:04:06,470 --> 00:04:10,730
option so you can install it and run through struggles and you can read or how to reload.

59
00:04:10,730 --> 00:04:17,660
Can you be reload and then click and automatically reload and then you can start using.

60
00:04:18,200 --> 00:04:23,300
So what's happening is I created a folder named that's launches, right?

61
00:04:25,000 --> 00:04:31,390
Fact Dargis, I'll be using this coming out of and then clicking on enter, then you can see it is automatically

62
00:04:31,390 --> 00:04:37,610
creating a function called desert is returning a do and it is export defaulting that function in port

63
00:04:37,630 --> 00:04:37,940
react.

64
00:04:38,200 --> 00:04:42,730
And this weekend, this component, we can see it's we're exporting it can use it anywhere by importing

65
00:04:42,730 --> 00:04:42,850
it.

66
00:04:43,360 --> 00:04:50,350
So instead that Burgess I can import, I get import into Europe for skins that an importer test from

67
00:04:50,350 --> 00:04:52,870
components slash pages slash test.

68
00:04:53,470 --> 00:04:55,960
OK, so this is how all these components are imported.

69
00:04:55,960 --> 00:04:58,480
All the home skills experience, the education portfolio.

70
00:04:59,210 --> 00:05:00,340
There's an audit of SNL.

71
00:05:00,340 --> 00:05:01,990
I have showed you how to do that.

72
00:05:01,990 --> 00:05:02,880
I am gang related.

73
00:05:03,410 --> 00:05:03,620
Yeah.

74
00:05:04,850 --> 00:05:10,340
So this is the first, so after this thing now coming into that function part.

75
00:05:11,310 --> 00:05:13,260
So what we have to get done inside the function.

76
00:05:14,550 --> 00:05:19,320
So since I do worry about allowing two different pages, we have to open with it all.

77
00:05:20,250 --> 00:05:22,650
And in the role that we should have out.

78
00:05:23,730 --> 00:05:24,620
Rout means.

79
00:05:26,430 --> 00:05:31,180
The which thing we are, do we have to like surrounded by default?

80
00:05:31,720 --> 00:05:34,690
So before the switch gears, you're having something called home, right?

81
00:05:35,020 --> 00:05:36,430
So initiative will to give it home.

82
00:05:36,760 --> 00:05:39,110
Home will be like home means.

83
00:05:39,110 --> 00:05:42,540
So as you consider completing, the whole thing is.

84
00:05:43,180 --> 00:05:43,520
OK.

85
00:05:43,540 --> 00:05:48,220
The home page is called home dargis so that we are rendering, often rendering.

86
00:05:48,670 --> 00:05:52,480
Now we have news this which guess so bob will be here.

87
00:05:52,480 --> 00:05:56,500
You can see the exact bodies slash slash wounds homepage.

88
00:05:56,890 --> 00:06:03,010
So if you can see here random flash and enter, that is the same as three thousand local that you same

89
00:06:03,010 --> 00:06:03,970
over the landing page.

90
00:06:04,630 --> 00:06:06,370
But this slash refers to the.

91
00:06:08,600 --> 00:06:14,150
You know this for sure, the homepage and then we'll discuss about this, what is this thing in the

92
00:06:14,150 --> 00:06:17,180
for the upcoming upcoming minutes?

93
00:06:18,280 --> 00:06:19,630
Switch now.

94
00:06:19,760 --> 00:06:24,260
After having this shroud now switch gears and then let out different props.

95
00:06:24,480 --> 00:06:27,380
So the party slash skins, then what me up to render?

96
00:06:27,680 --> 00:06:33,110
If the round part is equal to slash experiences, then what we have to do if they're out participants

97
00:06:33,110 --> 00:06:35,990
to slash education for or four wheel drive, for example.

98
00:06:35,990 --> 00:06:40,610
Take this education, go to MPH and click on Slash.

99
00:06:41,650 --> 00:06:45,670
Education's considering the education component rendered.

100
00:06:46,120 --> 00:06:49,090
OK, so this is how the drought works.

101
00:06:49,270 --> 00:06:54,610
By default, we have to give one run to the home page that is the home component and then the which

102
00:06:54,610 --> 00:06:58,540
gave the depending on where you are and if you can flash skills, you have to render some different

103
00:06:58,540 --> 00:07:06,460
components and we have to end up in a kind of like finish this, which gets to chill and then we have

104
00:07:06,460 --> 00:07:08,290
to end the downturn, then we are exporting that.

105
00:07:09,040 --> 00:07:14,560
So this is basically working with the companies like our to render the components based on their voting

106
00:07:14,560 --> 00:07:14,860
power.

107
00:07:15,220 --> 00:07:20,950
OK, now what is this component is equal to skills compared to the contrary experience as mean.

108
00:07:20,950 --> 00:07:24,460
Like what they're actually depicting that we can see in the next year.

109
00:07:24,500 --> 00:07:29,500
This is basically taught how to handle props and everything the parent level, the children level and

110
00:07:29,500 --> 00:07:32,370
ability that will focus in the next video back.