1
00:00:00,920 --> 00:00:03,020
We've got a square screen put together.

2
00:00:03,020 --> 00:00:07,940
Let's now try to create a reusable component that's going to show essentially just that right there

3
00:00:08,480 --> 00:00:11,460
we can then show it three times inside of our square screen.

4
00:00:11,520 --> 00:00:14,820
It'll pass in a prop of either red green or blue.

5
00:00:14,930 --> 00:00:20,860
To customize the text that shows up inside that component so back inside my editor I'll find my source

6
00:00:20,890 --> 00:00:27,040
components directory inside there I'll make a new file and I'm going to call this like a boat color

7
00:00:27,520 --> 00:00:28,500
adjuster.

8
00:00:28,510 --> 00:00:30,260
How about colored counter.

9
00:00:30,370 --> 00:00:35,440
J.S. I'm gonna call it color counter because we're essentially building a small counter component of

10
00:00:35,440 --> 00:00:36,490
sorts right here.

11
00:00:37,250 --> 00:00:41,990
So then inside this component we'll put down some boiler plate again rather than rewriting it all from

12
00:00:41,990 --> 00:00:42,520
scratch.

13
00:00:42,530 --> 00:00:44,810
I'll just go back over to my square screen.

14
00:00:44,810 --> 00:00:49,610
I'm going to copy everything inside of here and then paste it inside of a color counter again just to

15
00:00:49,610 --> 00:00:55,870
save us ourselves a little bit of time I'll then update some variables inside of color counter so we'll

16
00:00:55,870 --> 00:01:04,200
update the component name to color counter I'll update the export default to color counter and I we

17
00:01:04,200 --> 00:01:06,920
can start putting together some actual implementation.

18
00:01:07,100 --> 00:01:11,610
So I'm going to also import the button element from React Native.

19
00:01:11,600 --> 00:01:16,170
So I've now got view tax style sheet and button so that we can put something together here.

20
00:01:16,220 --> 00:01:22,670
I'm going to first begin by deleting that text element or replace it with a view inside there.

21
00:01:22,680 --> 00:01:25,770
I'll place text again in fright now.

22
00:01:25,780 --> 00:01:30,290
I'm just going to hard code in red so I'm going to assume that we're just building this first one.

23
00:01:30,400 --> 00:01:33,840
Well then come back in and customize the text using some props.

24
00:01:33,850 --> 00:01:40,930
After we get everything working so I'll give this a text of Red I'll then show a button element that

25
00:01:40,930 --> 00:01:49,340
has a title of increase red I'll duplicate that down in the second one I'll give increase.

26
00:01:49,350 --> 00:01:51,640
No not increase but decrease red.

27
00:01:51,680 --> 00:01:52,410
There we go.

28
00:01:53,850 --> 00:01:54,130
Okay.

29
00:01:54,170 --> 00:01:56,100
So this looks like a good first shot.

30
00:01:56,120 --> 00:01:58,200
Let's now show this inside of our square screen.

31
00:01:58,250 --> 00:02:01,730
Three separate times and we'll start to customize it using props.

32
00:02:01,880 --> 00:02:03,400
So I'll save this file.

33
00:02:03,440 --> 00:02:05,800
Look back over the square screen at the top.

34
00:02:05,810 --> 00:02:08,630
I will import color counter

35
00:02:11,300 --> 00:02:12,710
from up one directory.

36
00:02:12,830 --> 00:02:18,870
I'll go into components and then get the color counter file then inside of here rather than showing

37
00:02:18,900 --> 00:02:24,570
a text element I'll replace it with a view inside a view.

38
00:02:24,640 --> 00:02:31,210
I'll place color counter three times once again I'm using a self closing tag here because I don't expect

39
00:02:31,210 --> 00:02:34,610
I have to pass in anything between the opening and closing tag.

40
00:02:34,640 --> 00:02:36,500
There are reasons that we would want to do that.

41
00:02:36,500 --> 00:02:40,190
We'll take a look at why we would do that later on INSIDE THE COURSE OK.

42
00:02:40,240 --> 00:02:41,710
So now it's time to test this out.

43
00:02:41,740 --> 00:02:43,140
I'll save it.

44
00:02:43,180 --> 00:02:47,620
Flip back over I'll go to Square demo and yep that's looking pretty good.

45
00:02:47,620 --> 00:02:51,280
Well maybe it doesn't look great but it's definitely essentially what we want.

46
00:02:51,430 --> 00:02:55,270
And on Android we've got something very similar.

47
00:02:55,300 --> 00:03:00,270
So now we need to start to customize the text inside of color counter by using the prop system.

48
00:03:00,370 --> 00:03:04,690
So we're probably going to want to pass in a prop to the first color counter to indicate that it should

49
00:03:04,690 --> 00:03:07,400
show red and then blue and green.

50
00:03:07,450 --> 00:03:09,070
So I'm going to make up a prop name.

51
00:03:09,070 --> 00:03:12,570
I think a reasonable prop name would be like color.

52
00:03:12,560 --> 00:03:18,160
So I will be a string of red and I'm going to make it capitalized here because in all my mockups over

53
00:03:18,160 --> 00:03:23,730
here really showing a capitalized string of red I could pass in lowercase red instead.

54
00:03:23,810 --> 00:03:29,330
But then I'd just have to uppercase it or handle capitalization inside my component which is just a

55
00:03:29,330 --> 00:03:36,090
little bit annoying I'll then repeat that process for the other two as well I'll change the second one

56
00:03:36,090 --> 00:03:41,930
to be blue and then the last one to green.

57
00:03:41,940 --> 00:03:42,170
All right.

58
00:03:42,180 --> 00:03:43,920
So we can now save this file.

59
00:03:43,920 --> 00:03:47,880
We can go back over to our color counter where we're going to make use of this new prop that we were

60
00:03:47,880 --> 00:03:49,120
passing in.

61
00:03:49,350 --> 00:03:53,910
So back inside of color counter we can receive that props object.

62
00:03:54,000 --> 00:03:59,490
Remember we usually make use of D structuring and we only pull out the property we actually care about.

63
00:03:59,580 --> 00:04:04,200
So rather than receiving the entire props object I'm going to instead place a set of curly braces inside

64
00:04:04,200 --> 00:04:09,460
of here and list out color because once again that's the only property I really care about using we

65
00:04:09,460 --> 00:04:13,570
can now make use of that color variable everywhere inside of here that we currently have written out

66
00:04:13,570 --> 00:04:13,970
red.

67
00:04:14,680 --> 00:04:20,860
So rather than red right here I'll replace it with red curly braces or I suppose just color bases are

68
00:04:20,860 --> 00:04:25,660
on my Ed. They are red but they're not necessarily red on your editor will print out the color variable

69
00:04:25,660 --> 00:04:26,720
inside there.

70
00:04:26,920 --> 00:04:28,490
And now for the title right here.

71
00:04:28,540 --> 00:04:30,620
Well this is going to be a little bit more complicated.

72
00:04:30,640 --> 00:04:35,110
Remember I told you a little bit ago that when we place a string inside of a J a sex element we don't

73
00:04:35,110 --> 00:04:37,600
need to use those really braces.

74
00:04:37,600 --> 00:04:43,300
However in this case we want to use a little bit of string interpolation or string templating to essentially

75
00:04:43,300 --> 00:04:49,390
inject this color variable into this string if we're using string interpolation then we do have to make

76
00:04:49,390 --> 00:04:51,610
use of those curly braces.

77
00:04:51,610 --> 00:04:56,320
So I'm going to wrap that string right there with curly braces and then going to replace the double

78
00:04:56,320 --> 00:04:59,810
quotes with back to characters.

79
00:04:59,860 --> 00:05:02,940
Again these are back to characters not a single quote.

80
00:05:02,950 --> 00:05:09,220
Make sure you are using back ticks as well I can then delete read and replace it with dollar sign Curly

81
00:05:09,220 --> 00:05:16,130
races and I'll refer to color inside their and now we can repeat that same process with a second title

82
00:05:16,130 --> 00:05:17,030
as well.

83
00:05:17,390 --> 00:05:23,150
So I'll just delete the entire string this time lace my curly braces place the back ticks I'll do decrease

84
00:05:23,330 --> 00:05:27,010
dollar sign curly braces color.

85
00:05:27,080 --> 00:05:28,700
All right so we're ready for another test.

86
00:05:28,790 --> 00:05:32,090
So I'll save this what back.

87
00:05:32,380 --> 00:05:33,550
And now I see red.

88
00:05:33,560 --> 00:05:38,000
Increased red decreased red blue blue blue blue and green as well.

89
00:05:38,000 --> 00:05:39,450
Very good.

90
00:05:39,470 --> 00:05:40,630
All right so is looking good.

91
00:05:40,670 --> 00:05:45,500
So now the last thing we have to do is start to add in some state variables and modify them from this

92
00:05:45,500 --> 00:05:46,530
button element.

93
00:05:46,700 --> 00:05:49,830
But there's kind of a really big question that we need to answer first.

94
00:05:50,090 --> 00:05:53,270
Where are we going to place these state variables.

95
00:05:53,270 --> 00:05:56,860
Should we create the state variables inside of our color counter component.

96
00:05:56,930 --> 00:06:02,090
Because this is what is modifying them or should we create the state variables inside of our square

97
00:06:02,090 --> 00:06:05,730
screen because this is what's going to actually use them.

98
00:06:05,750 --> 00:06:07,930
So that's actually a interesting question.

99
00:06:07,940 --> 00:06:09,110
Let's take a quick pause right here.

100
00:06:09,110 --> 00:06:13,640
We'll come back in the next video and we'll get some guidance on where we should create our state variables.