WEBVTT

1
00:00:00.240 --> 00:00:01.380
Hi and welcome back.

2
00:00:01.400 --> 00:00:03.300
Today we're going to start off by building

3
00:00:03.320 --> 00:00:05.650
the components as we
discussed in the last video.

4
00:00:05.680 --> 00:00:08.580
And we're going to be
building header component.

5
00:00:08.610 --> 00:00:12.780
And this header component for example,
has the highest font size.

6
00:00:12.810 --> 00:00:16.420
So what we are going to do is create one

7
00:00:16.450 --> 00:00:20.660
component that is going to take care
of headers and we are going to pass props

8
00:00:20.690 --> 00:00:24.020
to it and we're going to say
what kind of header it is.

9
00:00:24.050 --> 00:00:32.060
So for example in HTML, if you know HTML,
you have headers that are one to six

10
00:00:32.090 --> 00:00:35.220
and six is the smallest one
and one is the biggest one.

11
00:00:35.250 --> 00:00:38.260
So we're going to pass props to our header

12
00:00:38.290 --> 00:00:42.340
and it's going to determine what
should be its font size automatically.

13
00:00:42.360 --> 00:00:44.020
So for example, this is the biggest one.

14
00:00:44.050 --> 00:00:46.340
So we might pass a prop one.

15
00:00:46.370 --> 00:00:50.600
And for example,
this is one that's smaller so this might

16
00:00:50.630 --> 00:00:55.860
be two and this is a little bit even
smaller so this might be three.

17
00:00:55.890 --> 00:00:57.900
So let's start by doing this.

18
00:00:57.930 --> 00:01:02.580
I just want to make this visible to us as
we're building our components and we are

19
00:01:02.610 --> 00:01:07.180
going to be seeing how this
component look on our homepage.

20
00:01:07.210 --> 00:01:08.410
So let's do that.

21
00:01:08.440 --> 00:01:17.260
Let's create the components folder here
and let's call our first component header.

22
00:01:17.290 --> 00:01:22.490
So we have a header directory and inside
this we're going to create header JS file

23
00:01:22.520 --> 00:01:27.100
and we definitely are going to need
the style JS file for this.

24
00:01:27.130 --> 00:01:29.060
So let's just quickly do this.

25
00:01:29.090 --> 00:01:32.900
Let's import style sheet
here from react native.

26
00:01:32.930 --> 00:01:38.340
Let's create the style variable and create
the style sheet for this.

27
00:01:38.370 --> 00:01:44.180
Let's export default style and then
let's do the very basics here as well.

28
00:01:44.210 --> 00:01:47.540
Let's import react from react

29
00:01:47.570 --> 00:01:53.740
and then we are going to need the view
container and the text definitely.

30
00:01:53.770 --> 00:01:56.460
So let's import those from react native.

31
00:01:56.490 --> 00:02:03.000
We're going to create the header constant
that is going to accept props

32
00:02:03.520 --> 00:02:11.060
and for now it's just going to return null
and we're going to export default header.

33
00:02:11.090 --> 00:02:13.800
So since we already know that we are going

34
00:02:13.830 --> 00:02:18.100
to be handling props,
we're going to need prop types from prop

35
00:02:18.130 --> 00:02:20.540
types and we don't have
this library installed.

36
00:02:20.570 --> 00:02:22.580
So I'm just quickly going to do that.

37
00:02:22.610 --> 00:02:25.700
I'm going to open the terminal
to the donation app.

38
00:02:25.730 --> 00:02:28.600
This is the root of our project and I'm

39
00:02:28.630 --> 00:02:29.573
going to do

40
00:02:29.773 --> 00:02:31.608
npm install prop-types

41
00:02:31.808 --> 00:02:33.860
and I'm going to save this.

42
00:02:33.880 --> 00:02:37.220
Great.
Now let's start by building our header

43
00:02:37.250 --> 00:02:41.170
component and we want to be
seeing how this looks.

44
00:02:41.200 --> 00:02:42.860
So the first thing I'm going to do is

45
00:02:42.890 --> 00:02:50.700
navigate to our home screen
and I'm going to import this component.

46
00:02:50.730 --> 00:02:56.780
So I'm going to import header
from our components.

47
00:02:56.810 --> 00:02:57.980
I'm going to save this.

48
00:02:58.010 --> 00:02:59.340
Instead of hello world,

49
00:02:59.370 --> 00:03:04.060
we're going to have the header
component showing up here.

50
00:03:04.090 --> 00:03:04.940
Let's save this.

51
00:03:04.970 --> 00:03:08.610
And currently we see nothing because
our header components returns now.

52
00:03:08.640 --> 00:03:10.660
But let's start designing this.

53
00:03:10.690 --> 00:03:12.700
So we're going to need a view component

54
00:03:12.730 --> 00:03:18.740
that is going to be the container for our
text and then we're going to need the text

55
00:03:18.770 --> 00:03:25.300
itself and here we are going to take
whatever props is passed as the title.

56
00:03:25.330 --> 00:03:30.580
Okay, so since we already know that we are
going to have a title prop,

57
00:03:30.610 --> 00:03:37.980
what we do need to do is say that header
prop types

58
00:03:38.010 --> 00:03:42.500
and it's going to require a title
and that prop type has to be a string

59
00:03:42.530 --> 00:03:48.460
and we can set a default value
for our headers.

60
00:03:48.490 --> 00:03:53.060
So let's do that and let's say
that title is empty by default.

61
00:03:53.090 --> 00:03:56.860
Great so now we do have the title

62
00:03:56.890 --> 00:04:00.500
and let's pass a title from here

63
00:04:00.530 --> 00:04:07.700
and let's say that title is Azzahri A.

64
00:04:07.730 --> 00:04:10.060
Let's save this and we see it appear here.

65
00:04:10.090 --> 00:04:12.660
Now what we want to do is style this text

66
00:04:12.690 --> 00:04:18.820
so I'm just going to give this a style
and I'm going to say that this style is

67
00:04:18.840 --> 00:04:29.180
called title one so we need to import
style from style

68
00:04:29.210 --> 00:04:32.060
right and now we got to create the title

69
00:04:32.090 --> 00:04:41.860
one and let's see what this component has.

70
00:04:41.890 --> 00:04:47.920
So this component has a font family
of inter

71
00:04:52.000 --> 00:04:59.340
and it has a font size of 24 for which we
are going to use our scaling function.

72
00:04:59.360 --> 00:05:02.860
So we're going to do scale font size 24.

73
00:05:02.890 --> 00:05:04.980
And now I'm going to save this.

74
00:05:05.010 --> 00:05:08.180
And then we need just going to format this

75
00:05:08.210 --> 00:05:11.700
well so that you're
able to see it as well.

76
00:05:11.720 --> 00:05:13.580
Great and then we're going to need

77
00:05:13.600 --> 00:05:20.740
the line height
of 29 let's save this as well.

78
00:05:20.770 --> 00:05:25.180
Great and then we need the font weight

79
00:05:25.210 --> 00:05:32.300
600 let's save this and see how
it looks and it looks very good.

80
00:05:32.330 --> 00:05:36.780
Great so now we are done with title one

81
00:05:36.800 --> 00:05:42.140
and what we want to do is design
how the title two would look like.

82
00:05:42.170 --> 00:05:48.820
So for this first of all what we should do
is make sure that we accept a prop type

83
00:05:48.850 --> 00:05:57.060
for our types and let's say that prop
type is going to be a number.

84
00:05:57.090 --> 00:06:00.180
Now let's say that by default this type is

85
00:06:00.210 --> 00:06:06.540
going to be one and we can just pass
type one here even though we don't really

86
00:06:06.570 --> 00:06:11.540
need it it was working without it as well
and now what we need is to handle

87
00:06:11.570 --> 00:06:16.620
the cases when title is going to be
two or title is going to be three.

88
00:06:16.650 --> 00:06:23.480
So let's create a function
here called style to apply.

89
00:06:24.080 --> 00:06:27.500
And this function is going
to return us which style to apply.

90
00:06:27.530 --> 00:06:30.780
So we can have a switch case here

91
00:06:30.800 --> 00:06:35.380
and we're going to say that it
is dependent on Props type.

92
00:06:35.410 --> 00:06:42.500
And if the value is one, we are
going to return style.Title one.

93
00:06:42.530 --> 00:06:43.900
The value is two.

94
00:06:43.920 --> 00:06:47.300
We're going to return title two.

95
00:06:47.330 --> 00:06:52.180
If the value is going to be three,
we're going to return style.title3

96
00:06:52.200 --> 00:06:53.900
i don't think we're going
to have any more value.

97
00:06:53.920 --> 00:06:59.820
So let's set up a default value
returning style.title1

98
00:06:59.840 --> 00:07:00.340
great.

99
00:07:00.360 --> 00:07:04.220
So now we need to take
care of showing this.

100
00:07:04.250 --> 00:07:10.020
So let's style to apply and call
this function inside of here.

101
00:07:10.040 --> 00:07:14.460
And then let's create title
two and title three styles.

102
00:07:14.480 --> 00:07:20.060
So let's do title two and title two will
have the same kind of setup as here.

103
00:07:20.090 --> 00:07:21.900
So let's copy this here and say

104
00:07:21.920 --> 00:07:26.020
that the only thing that's really
changed is font size and line height.

105
00:07:26.040 --> 00:07:29.940
So that would be 18 and 22.

106
00:07:29.970 --> 00:07:34.660
And let's check out what title
three would be it should be here.

107
00:07:34.690 --> 00:07:38.300
And it is 16 and 19.

108
00:07:38.330 --> 00:07:40.100
Let's take care of that.

109
00:07:40.130 --> 00:07:42.260
16 and 19.

110
00:07:42.290 --> 00:07:44.460
And Font weight is the same.

111
00:07:44.480 --> 00:07:46.780
And let's call this title three.

112
00:07:46.800 --> 00:07:48.620
Now let's go back to our header.

113
00:07:48.650 --> 00:07:51.540
These are created and are looking good.

114
00:07:51.570 --> 00:07:58.740
And then let's make this smaller
and let's bring this up here.

115
00:07:58.770 --> 00:08:02.220
Let's go to our home page
and create a couple more headers.

116
00:08:02.250 --> 00:08:04.780
So let's create type two
and let's create type.

117
00:08:04.800 --> 00:08:07.020
Three.
So the first one is the biggest 1,

118
00:08:07.040 --> 00:08:10.380
second one is the medium one,
and third one is the smallest one.

119
00:08:10.410 --> 00:08:13.060
So great.
This is looking good.

120
00:08:13.090 --> 00:08:18.180
Now we have all the headers that we might
need in this application, which is great.

121
00:08:18.210 --> 00:08:21.620
So we're all set with this video
and I'll see you in the next one.

122
00:08:21.640 --> 00:08:22.560
Thanks so much for watching.