WEBVTT

1
00:00:00.580 --> 00:00:02.990
Now that we have access to all of our data

2
00:00:02.990 --> 00:00:04.920
in our components Local state.

3
00:00:04.920 --> 00:00:05.753
In this guide,

4
00:00:05.753 --> 00:00:07.880
we're going to see how we can use

5
00:00:07.880 --> 00:00:10.620
our background image or banner image

6
00:00:10.620 --> 00:00:13.600
as the background here on the detail page.

7
00:00:13.600 --> 00:00:14.940
Now, this is going to,

8
00:00:14.940 --> 00:00:16.340
like I mentioned in the last guide,

9
00:00:16.340 --> 00:00:18.630
this is going to really kind of extend

10
00:00:18.630 --> 00:00:20.530
and reinforce our knowledge

11
00:00:20.530 --> 00:00:22.687
on what we built in

12
00:00:22.687 --> 00:00:25.030
when we built out this grid.

13
00:00:25.030 --> 00:00:27.010
The code for it is going to be very similar.

14
00:00:27.010 --> 00:00:30.036
However, what we built is pretty complex

15
00:00:30.036 --> 00:00:32.114
and it's definitely more advanced

16
00:00:32.114 --> 00:00:35.660
than the standard kind of knowledge set

17
00:00:35.660 --> 00:00:38.050
that usually would get as you're learning react.

18
00:00:38.050 --> 00:00:39.410
Because you're learning,

19
00:00:39.410 --> 00:00:40.243
not only,

20
00:00:40.243 --> 00:00:43.500
how to implement a little bit of a more advanced style,

21
00:00:43.500 --> 00:00:47.410
you're trying to make the entire process dynamic.

22
00:00:47.410 --> 00:00:49.670
Where you're able to take in data.

23
00:00:49.670 --> 00:00:51.750
You don't know what the end result is going to be.

24
00:00:51.750 --> 00:00:54.200
You simply know you're going to get some data.

25
00:00:54.200 --> 00:00:57.186
And then, you're injecting that data

26
00:00:57.186 --> 00:00:58.960
into render styles.

27
00:00:58.960 --> 00:01:00.930
And so, that's a complex process.

28
00:01:00.930 --> 00:01:03.610
So, it's really helpful to walk through that a few times.

29
00:01:03.610 --> 00:01:05.170
And that's what we're going to do in this guide.

30
00:01:05.170 --> 00:01:08.976
We're going to see how we can make this spot up here

31
00:01:08.976 --> 00:01:11.210
be a background image.

32
00:01:11.210 --> 00:01:12.890
We're not going to worry about styles.

33
00:01:12.890 --> 00:01:13.740
Once again, here,

34
00:01:13.740 --> 00:01:16.580
we're going to implement our styles in the very next guide.

35
00:01:16.580 --> 00:01:17.413
In this one,

36
00:01:17.413 --> 00:01:19.940
we're simply going to try to get this code here.

37
00:01:19.940 --> 00:01:21.670
This path to this image,

38
00:01:21.670 --> 00:01:23.740
we're going to try to get it to be the background image.

39
00:01:23.740 --> 00:01:26.800
So, let's get started with that.

40
00:01:26.800 --> 00:01:27.750
So, right here,

41
00:01:27.750 --> 00:01:29.530
I'm going to start writing some code

42
00:01:29.530 --> 00:01:31.820
right after we performed our destructuring.

43
00:01:31.820 --> 00:01:34.500
And this is because I want to be able to pull out

44
00:01:34.500 --> 00:01:37.280
a few of these data points.

45
00:01:37.280 --> 00:01:38.600
So, the very first thing I'm going to do

46
00:01:38.600 --> 00:01:40.710
is I'm going to create a variable here

47
00:01:40.710 --> 00:01:43.310
called banner styles.

48
00:01:43.310 --> 00:01:47.800
And it's simply going to be a standard JavaScript object.

49
00:01:47.800 --> 00:01:49.381
There's nothing of anything special about it

50
00:01:49.381 --> 00:01:53.340
until we pass it to the div

51
00:01:53.340 --> 00:01:56.770
that's going to be managing those background styles.

52
00:01:56.770 --> 00:01:58.610
So, the very first thing we're going to have

53
00:01:58.610 --> 00:02:00.700
is a background image.

54
00:02:00.700 --> 00:02:01.710
And if you remember

55
00:02:01.710 --> 00:02:04.260
how we built our background image last time,

56
00:02:04.260 --> 00:02:05.940
it looked a little bit weird.

57
00:02:05.940 --> 00:02:07.370
And I also misspelled it,

58
00:02:07.370 --> 00:02:08.850
there we go, background image.

59
00:02:08.850 --> 00:02:11.440
And so, we have to use a string

60
00:02:11.440 --> 00:02:14.440
where we say URL and then parens.

61
00:02:14.440 --> 00:02:15.870
And then after that,

62
00:02:15.870 --> 00:02:17.450
we're going to connect this

63
00:02:17.450 --> 00:02:20.450
with the dynamic portion of our JavaScript.

64
00:02:20.450 --> 00:02:22.060
So, here, we're going to say,

65
00:02:22.060 --> 00:02:23.100
plus,

66
00:02:23.100 --> 00:02:26.760
the banner image URL,

67
00:02:26.760 --> 00:02:27.667
plus,

68
00:02:27.667 --> 00:02:29.800
and then we're simply going to close that out.

69
00:02:29.800 --> 00:02:31.210
And that's all we need to do there.

70
00:02:31.210 --> 00:02:32.470
And because this is an object,

71
00:02:32.470 --> 00:02:34.070
we add a comment at the end.

72
00:02:34.070 --> 00:02:35.290
And then, after that,

73
00:02:35.290 --> 00:02:36.123
I'm going to say,

74
00:02:36.123 --> 00:02:39.940
I want the background size to be cover,

75
00:02:39.940 --> 00:02:40.908
which is a string.

76
00:02:40.908 --> 00:02:45.130
And then, I want the background repeat

77
00:02:45.130 --> 00:02:47.603
to be no dash repeat.

78
00:02:48.580 --> 00:02:49.460
And then, lastly,

79
00:02:49.460 --> 00:02:53.120
I want to have the background position

80
00:02:53.120 --> 00:02:56.560
to simply be center and center.

81
00:02:56.560 --> 00:02:59.020
And that's everything we need here at the banner style.

82
00:02:59.020 --> 00:03:01.480
So, really we're simply creating

83
00:03:01.480 --> 00:03:04.840
a plain old vanilla JavaScript object here

84
00:03:04.840 --> 00:03:06.940
with keys and values.

85
00:03:06.940 --> 00:03:08.090
That's all we're doing.

86
00:03:08.090 --> 00:03:10.310
These don't really come into effect.

87
00:03:10.310 --> 00:03:12.040
They don't really start working

88
00:03:12.040 --> 00:03:15.090
until we actually extend this

89
00:03:15.090 --> 00:03:17.350
and we call it from our JSX code

90
00:03:17.350 --> 00:03:19.140
and we say that this is going to be

91
00:03:19.140 --> 00:03:22.760
a set of inline styles that we're passing to it.

92
00:03:22.760 --> 00:03:25.080
So, that is what we're going to be doing there.

93
00:03:25.080 --> 00:03:28.460
And then, I also want to add some styles for our logo.

94
00:03:28.460 --> 00:03:29.880
So, here I'm going to create a variable.

95
00:03:29.880 --> 00:03:30.800
We could place,

96
00:03:30.800 --> 00:03:33.640
place this right inside of the JSX code,

97
00:03:33.640 --> 00:03:35.630
but I'm just going to create a variable here

98
00:03:35.630 --> 00:03:37.220
called logo styles.

99
00:03:37.220 --> 00:03:38.053
And then,

100
00:03:38.053 --> 00:03:40.970
this is going to be a vanilla JavaScript object again.

101
00:03:40.970 --> 00:03:41.940
And here,

102
00:03:41.940 --> 00:03:42.890
I'm simply going to say,

103
00:03:42.890 --> 00:03:45.750
I want the width to be 200 pixels.

104
00:03:45.750 --> 00:03:48.237
So now, we have these two style objects

105
00:03:48.237 --> 00:03:51.760
and now, we simply have to pass these in.

106
00:03:51.760 --> 00:03:53.983
So, the very first thing I'm going to do is,

107
00:03:53.983 --> 00:03:56.890
I have inside of this div,

108
00:03:56.890 --> 00:03:58.940
this is where I'm going to first,

109
00:03:58.940 --> 00:04:00.060
let's add a class name

110
00:04:00.060 --> 00:04:02.810
so, we can add some baseline styles.

111
00:04:02.810 --> 00:04:05.380
So, I'm going to say, this is our banner class name.

112
00:04:05.380 --> 00:04:08.430
And then, lastly, I want to add inline styles.

113
00:04:08.430 --> 00:04:10.140
And part of the reason why I'm doing this

114
00:04:10.140 --> 00:04:12.120
is cause I also want you to see,

115
00:04:12.120 --> 00:04:13.360
there are going to be times

116
00:04:13.360 --> 00:04:15.930
where you might want to have a component

117
00:04:15.930 --> 00:04:16.950
that has a,

118
00:04:16.950 --> 00:04:19.361
both a regular class name

119
00:04:19.361 --> 00:04:21.870
and it has inline styles.

120
00:04:21.870 --> 00:04:24.310
And that's exactly what we're doing right here.

121
00:04:24.310 --> 00:04:27.170
Now, this is going to have our banner styles,

122
00:04:27.170 --> 00:04:28.710
nope, not banner image URL,

123
00:04:28.710 --> 00:04:30.970
banner styles, just like that.

124
00:04:30.970 --> 00:04:31.803
And then,

125
00:04:31.803 --> 00:04:33.120
for our image here,

126
00:04:33.120 --> 00:04:35.862
our image is going to have a style prop

127
00:04:35.862 --> 00:04:40.862
and we're going to pass in those logo styles to it.

128
00:04:41.189 --> 00:04:42.421
So, hit save here.

129
00:04:42.421 --> 00:04:44.370
So now, we're calling both of these

130
00:04:44.370 --> 00:04:45.780
and let's go see what we have.

131
00:04:45.780 --> 00:04:47.340
And this is working.

132
00:04:47.340 --> 00:04:49.770
So, we're not centering the logo yet.

133
00:04:49.770 --> 00:04:52.150
And all of these styles, aren't looking good,

134
00:04:52.150 --> 00:04:55.560
but we actually have the key elements that we wanted.

135
00:04:55.560 --> 00:04:56.860
We have our logo

136
00:04:56.860 --> 00:04:59.360
that is sitting on top of a background image.

137
00:04:59.360 --> 00:05:01.940
And if you go and you take a look

138
00:05:01.940 --> 00:05:03.720
at any of the other ones,

139
00:05:03.720 --> 00:05:05.300
you'll see that this is dynamic.

140
00:05:05.300 --> 00:05:06.920
We're getting that background image.

141
00:05:06.920 --> 00:05:08.250
We're getting our logo.

142
00:05:08.250 --> 00:05:11.490
It's placed on top of it, exactly how we want.

143
00:05:11.490 --> 00:05:14.370
So, I am very happy with that.

144
00:05:14.370 --> 00:05:15.230
Now, we can go,

145
00:05:15.230 --> 00:05:18.460
we can get rid of that banner image URL

146
00:05:18.460 --> 00:05:21.550
cause we're already using that right here

147
00:05:21.550 --> 00:05:23.410
in our banner styles object.

148
00:05:23.410 --> 00:05:24.970
And this is everything we need.

149
00:05:24.970 --> 00:05:27.960
These are all of the key items that we need

150
00:05:27.960 --> 00:05:29.400
in order to get this working.

151
00:05:29.400 --> 00:05:32.620
The very last thing that I'm going to do is,

152
00:05:32.620 --> 00:05:34.510
inside of this visit link,

153
00:05:34.510 --> 00:05:37.833
I actually want to make this have its own dedicated styles,

154
00:05:37.833 --> 00:05:38.820
so here,

155
00:05:38.820 --> 00:05:39.858
I'm going to add a class name,

156
00:05:39.858 --> 00:05:43.779
and then let's just call this site dash link.

157
00:05:43.779 --> 00:05:45.100
Hit save.

158
00:05:45.100 --> 00:05:46.820
And that's not going to actually change anything

159
00:05:46.820 --> 00:05:47.653
on there yet

160
00:05:47.653 --> 00:05:50.840
because these styles, nothing happens here.

161
00:05:50.840 --> 00:05:52.550
Nothing's magical about them

162
00:05:52.550 --> 00:05:55.410
until we go and we actually define some styles

163
00:05:55.410 --> 00:05:56.530
with those names.

164
00:05:56.530 --> 00:06:00.090
But as far as all of the structure goes

165
00:06:00.090 --> 00:06:02.380
on the react side and the JSX side,

166
00:06:02.380 --> 00:06:04.910
this is now working beautifully.

167
00:06:04.910 --> 00:06:07.890
So now, that we have all of this in the next guide,

168
00:06:07.890 --> 00:06:08.760
we're going to walk through

169
00:06:08.760 --> 00:06:12.972
and implement each one of those style implementations

170
00:06:12.972 --> 00:06:15.693
in our SAS in CSS code.

Resources

• Source code