1
00:00:00,840 --> 00:00:05,740
In the last video we wrote out a lot of code to get a component visible on the screen of our device.

2
00:00:05,740 --> 00:00:10,560
Now in this video I want to take a quick pause and review some the code that we've written out in particular

3
00:00:10,590 --> 00:00:14,030
I think that you might have a couple of different questions about the code we just wrote.

4
00:00:14,070 --> 00:00:17,910
So I want to go over a couple of different common questions right here and provide a couple of different

5
00:00:17,910 --> 00:00:19,500
answers for each one.

6
00:00:19,500 --> 00:00:24,990
So first off what's that text thing that we imported inside of our component screen Doc J.S. file.

7
00:00:25,110 --> 00:00:27,810
I'm talking about this text thing right there.

8
00:00:27,810 --> 00:00:33,750
So that text thing is what we refer to as a primitive react element primitive react elements are provided

9
00:00:33,750 --> 00:00:35,420
by the React Native library.

10
00:00:35,550 --> 00:00:41,250
They allow us to show some amount of basic content to a user so a text element is a primitive react

11
00:00:41,310 --> 00:00:44,880
element that shows some very basic text to a user.

12
00:00:44,880 --> 00:00:47,650
There are several other primitive elements that you need to be aware of.

13
00:00:47,670 --> 00:00:49,620
We're going to look at these over time.

14
00:00:50,010 --> 00:00:56,280
Another primitive element is called a view a view allows us to show kind of some general grouping element

15
00:00:56,670 --> 00:01:01,180
that can assemble different elements together and provide some styling to them.

16
00:01:01,200 --> 00:01:05,910
We also have a primitive element called an image that we can use to show an image to a user or a button

17
00:01:05,940 --> 00:01:06,780
that shows a button.

18
00:01:07,720 --> 00:01:10,290
There are several other primitive elements you need to be aware of.

19
00:01:10,630 --> 00:01:15,370
And as I mentioned we'll go over these over time Okay next up.

20
00:01:15,370 --> 00:01:15,850
What's that.

21
00:01:15,850 --> 00:01:19,860
Each team will looking stuff we refer to it as J.S. X..

22
00:01:19,920 --> 00:01:23,680
So I'm talking specifically as this text tag right there.

23
00:01:23,680 --> 00:01:26,340
So this is what we refer to as J.S. X..

24
00:01:26,500 --> 00:01:30,930
This is not technically valid javascript when you write out this code right here.

25
00:01:30,940 --> 00:01:36,400
It then passes into that React Native bundler that's running inside of our terminal that bundler is

26
00:01:36,400 --> 00:01:41,790
using a tool called Babble to turn this J sex into some plain javascript code.

27
00:01:41,790 --> 00:01:47,860
So let me show you exactly what that line right there turns into when we convert it into normal javascript.

28
00:01:48,130 --> 00:01:50,360
So I'm going to copy that J a sex element right there.

29
00:01:50,360 --> 00:01:56,300
The entire text element and then going to go over to a Web site called Babble J.S. dot Io.

30
00:01:57,130 --> 00:02:03,340
So this is a tool that is being used by the react native bundler to turn our code into plain JavaScript

31
00:02:03,460 --> 00:02:07,060
as opposed to the J.S. sex we fed into it on this page.

32
00:02:07,060 --> 00:02:12,850
In particular on the left hand side I can enter in some J.S. sex and we'll show me the resulting javascript

33
00:02:12,880 --> 00:02:14,330
on the right hand side.

34
00:02:14,530 --> 00:02:17,520
So I'm gonna paste in that text element and we'll see the results over here.

35
00:02:19,240 --> 00:02:24,530
So as you can see a j a sex element gets turned into a normal function call.

36
00:02:24,700 --> 00:02:29,800
Nothing weird about this whatsoever is just a normal function call to a function called react dot create

37
00:02:29,830 --> 00:02:30,730
element.

38
00:02:30,730 --> 00:02:32,960
So why do we use gay sex.

39
00:02:32,980 --> 00:02:37,360
Well as you're going to see very soon when we put together react components we frequently write out

40
00:02:37,420 --> 00:02:40,800
many different J.S. sex elements like this one right here.

41
00:02:40,960 --> 00:02:45,850
If we were to write out all those different JS sex elements instead as normal function calls like this

42
00:02:46,080 --> 00:02:51,670
it would result in a component that's really hard to make changes to and really hard to modify and maintain

43
00:02:51,730 --> 00:02:53,170
over time.

44
00:02:53,260 --> 00:02:59,010
So instead we make use of this J.S. sex syntax just to make our lives as developers a little bit easier.

45
00:02:59,020 --> 00:03:00,230
That's pretty much it.

46
00:03:00,880 --> 00:03:03,720
We'll talk more about the rules around J.S. sex very soon.

47
00:03:04,910 --> 00:03:05,210
OK.

48
00:03:05,250 --> 00:03:07,100
So next big question you might have.

49
00:03:07,140 --> 00:03:10,740
What's that app navigator or the navigator thing in general inside the app.

50
00:03:10,740 --> 00:03:15,250
J.S. file okay so back inside of app dot J.S. Right here.

51
00:03:15,250 --> 00:03:21,000
Remember we've got this great stack navigator function this navigator stuff that you see inside the

52
00:03:21,000 --> 00:03:26,610
app dot J.S. file as I mentioned I wrote this out ahead of time just to save us a little bit of complexity

53
00:03:27,630 --> 00:03:32,160
all that navigator stuff is from a tool called react navigation.

54
00:03:32,160 --> 00:03:38,100
This is a library that's used in a ton of different react native projects for handling navigation.

55
00:03:38,100 --> 00:03:42,930
When we talk about navigation we're really discussing about showing different content to the user so

56
00:03:42,930 --> 00:03:47,940
making it appear as though there are different screens of content inside of our application.

57
00:03:47,940 --> 00:03:52,380
We're going to learn about react navigation over time and eventually we're going to wire all this stuff

58
00:03:52,380 --> 00:03:56,200
up from scratch on a future application.

59
00:03:56,260 --> 00:03:56,590
All right.

60
00:03:56,590 --> 00:03:57,550
Final question.

61
00:03:57,640 --> 00:04:01,950
What's that Stiles thing back inside of our component file.

62
00:04:02,060 --> 00:04:02,300
All right.

63
00:04:02,300 --> 00:04:07,910
So back inside of component screen out J.S. I'm talking about this Stiles object right here so just

64
00:04:07,910 --> 00:04:12,740
to be clear because you might have seen a different way of applying styling to an element on some other

65
00:04:12,770 --> 00:04:16,420
react native content maybe another tutorial or a blog post.

66
00:04:16,460 --> 00:04:21,920
We are not strictly required to apply styling to an element using this style secret function call right

67
00:04:21,920 --> 00:04:22,820
here.

68
00:04:22,820 --> 00:04:28,040
The only reason we use style she does create is that it will automatically validate the different styling

69
00:04:28,040 --> 00:04:30,380
rules that we're trying to apply to an element.

70
00:04:30,380 --> 00:04:32,660
Let me show you what I mean.

71
00:04:32,770 --> 00:04:36,430
I'm going to pull my application back on the screen really quickly and I want you to notice that I've

72
00:04:36,430 --> 00:04:38,810
got a font size property right here.

73
00:04:38,890 --> 00:04:45,010
So as you might guess we're trying to use this rule to change the font size of our text element in order

74
00:04:45,010 --> 00:04:46,170
to change the font size.

75
00:04:46,170 --> 00:04:51,740
We have to pass in a property that is specifically font size with a capital S..

76
00:04:51,880 --> 00:04:57,650
So if we change the spelling of this or even the capitalization the rule will not be applied correctly.

77
00:04:57,700 --> 00:05:03,760
So for example if I change font size to have a lowercase s instead and then save this I'll very quickly

78
00:05:03,760 --> 00:05:04,990
see an error message appear.

79
00:05:05,380 --> 00:05:09,040
So it says font size is not a valid style property.

80
00:05:09,040 --> 00:05:13,420
This validation in the Big Red error message that you're seeing right here is provided by this style

81
00:05:13,420 --> 00:05:18,850
she does create function now just to show you a little technicality very quickly.

82
00:05:18,920 --> 00:05:24,890
I'm going to come in out that styles object and then up here on my text element rather than referencing

83
00:05:24,890 --> 00:05:26,190
styles dot textile.

84
00:05:26,210 --> 00:05:32,150
I'm going to delete that and replace it with a plain javascript object to notice I now have two sets

85
00:05:32,150 --> 00:05:40,190
of curly braces and then inside of here I'll say font size of 30 like so so if we want to we can't technically

86
00:05:40,370 --> 00:05:46,310
pass a styling object directly into a J OSX element and everything's going to work just fine.

87
00:05:46,310 --> 00:05:52,880
In addition if we make a typo inside there I instead put in like font size with a lowercase S. we're

88
00:05:52,880 --> 00:05:58,190
still going to see not an error not a big red error message but we will see a warning down here at the

89
00:05:58,190 --> 00:06:03,880
bottom that has essentially the same message something telling us hey we did something incorrectly so

90
00:06:03,880 --> 00:06:05,620
this style she does create function right here.

91
00:06:05,650 --> 00:06:11,440
We're only using because it shows a big red error message to us that tells us immediately right away

92
00:06:11,650 --> 00:06:15,280
that we did something poorly with styling inside of some given component.

93
00:06:15,580 --> 00:06:21,580
So it's an immediate signal to you and I that we need to go and figure out what we did incorrectly and

94
00:06:21,580 --> 00:06:25,600
the only reason I show you this alternate way of applying styling is just to let you know that if we

95
00:06:25,600 --> 00:06:30,280
don't want to always have to create this big style sheet object down here we always have a kind of escape

96
00:06:30,280 --> 00:06:31,120
hatch.

97
00:06:31,120 --> 00:06:35,580
We'll talk about why we might want to pass what we refer to as an inline style right here.

98
00:06:35,580 --> 00:06:41,650
Overtime for now I'm going to undo these changes I made so I'm go into uncommon that and I'll change

99
00:06:41,650 --> 00:06:46,820
this back to styles dot text style and I'm back to you.

100
00:06:46,880 --> 00:06:49,520
Whoops let me change the font size here as well.

101
00:06:49,520 --> 00:06:49,850
There we go.

102
00:06:49,850 --> 00:06:51,340
That's better.

103
00:06:51,420 --> 00:06:54,860
OK so that's the style she does create function.

104
00:06:54,860 --> 00:06:58,940
Again we use it because it's going to validate the different rules that we're trying to apply to some

105
00:06:58,940 --> 00:07:00,960
given element.

106
00:07:01,000 --> 00:07:04,510
All right now that we've gone over a couple of different questions that you might have right here.

107
00:07:04,510 --> 00:07:07,600
Let's continue working on our first full application in the next video.