1
00:00:01,180 --> 00:00:05,910
In the last section we finished up with with Step number three which was to make sure that our component

2
00:00:05,910 --> 00:00:08,000
would show up on the device.

3
00:00:08,010 --> 00:00:13,870
The last thing we must make sure that we resolve is that we handle the declaration as a variable text.

4
00:00:14,010 --> 00:00:17,870
So remember the important thing here to remember about every single javascript file that we're going

5
00:00:17,870 --> 00:00:22,620
to create through our course is that there are no global variables that we can reference.

6
00:00:22,620 --> 00:00:29,050
There's no like magic code that is provided to us so this text right here is an undefined variable.

7
00:00:29,070 --> 00:00:31,750
And if we execute this code it would throw an error.

8
00:00:31,830 --> 00:00:38,010
We have to always make sure that every variable we reference is automatically defined for us.

9
00:00:38,010 --> 00:00:44,940
So this text tag right here is a primitive element that is provided to us by the react native library.

10
00:00:45,000 --> 00:00:51,930
So to get access to be able to use this text tag we must import it from the re-act native library to

11
00:00:51,930 --> 00:00:56,070
do so we're going to use a technique called import destructuring.

12
00:00:56,240 --> 00:00:56,710
OK.

13
00:00:56,750 --> 00:00:59,500
That's that's the name of this technique here.

14
00:00:59,820 --> 00:01:00,770
We're going to run again.

15
00:01:00,810 --> 00:01:04,280
We're going to lay out the code for it and we'll talk about exactly what it does.

16
00:01:04,800 --> 00:01:12,180
I'm going to delete re-activated right there and replace it with one opening and closing curly brace

17
00:01:12,490 --> 00:01:13,460
and side this.

18
00:01:13,470 --> 00:01:14,040
All right.

19
00:01:14,070 --> 00:01:15,750
Just text.

20
00:01:15,750 --> 00:01:20,160
You'll notice that the instant I do that the error message goes away from this line right here.

21
00:01:20,160 --> 00:01:26,640
So text is now defined what this line means right here is a means to say when you import the re-act

22
00:01:26,640 --> 00:01:27,630
native library.

23
00:01:27,630 --> 00:01:29,940
I don't actually want access to the whole library.

24
00:01:29,940 --> 00:01:34,060
I just want access to that text property out of that library.

25
00:01:34,080 --> 00:01:39,900
So this really depends on pretty intricate or detailed knowledge of what different properties or objects

26
00:01:39,900 --> 00:01:41,800
that react native library contains.

27
00:01:41,910 --> 00:01:45,470
And you'll learn about all the different objects that it contains over time.

28
00:01:45,540 --> 00:01:49,790
So this one that we've used right now right here so far is the text tag.

29
00:01:50,100 --> 00:01:54,470
Another library or another property in the library is one that we've already used down here.

30
00:01:54,570 --> 00:01:55,730
The app registry.

31
00:01:56,100 --> 00:02:01,440
So notice that when I replaced the re-act need of reference up here all of a sudden now this is giving

32
00:02:01,440 --> 00:02:04,850
us an error message saying we'll now react nativism defined.

33
00:02:04,890 --> 00:02:10,930
So to solve this we will also import the app registry function from re-act native as well.

34
00:02:10,950 --> 00:02:19,810
So after text we'll place a comma and then reference app registry and finally at the bottom because

35
00:02:19,810 --> 00:02:25,990
we're not making reference to react native anymore I'm going to delete the re-act native don like so

36
00:02:26,890 --> 00:02:27,330
cool.

37
00:02:27,340 --> 00:02:32,850
So now we've got we are importing text in app registry from the re-act native library.

38
00:02:32,980 --> 00:02:38,350
We are using the text tagging site of our component and we are using the app registry component at the

39
00:02:38,350 --> 00:02:44,950
very bottom of our file here to render our component to the device.

40
00:02:44,950 --> 00:02:49,600
The last thing I want to do is you might notice that our component we're getting a little bit of a complaint

41
00:02:49,600 --> 00:02:57,310
here from GSX about how you know the error message says unexpected block statements surrounding everybody.

42
00:02:57,310 --> 00:03:02,470
So like I mentioned just a minute ago if we are referencing just a single element or seeing if we've

43
00:03:02,470 --> 00:03:09,250
got just a single or return value from a federal function we can omit any return statement and the curly

44
00:03:09,250 --> 00:03:09,820
braces.

45
00:03:09,820 --> 00:03:12,010
And so that's what this error message here is about.

46
00:03:12,220 --> 00:03:17,710
Yes Linta saying hey all you're doing with this fado function is returning some variable or returning

47
00:03:17,710 --> 00:03:24,340
some object so for stylistic concerns I recommend you drop the return statement and you drop the curly

48
00:03:24,340 --> 00:03:26,020
braces as well.

49
00:03:26,020 --> 00:03:28,930
We're going to see this error message a lot throughout this course.

50
00:03:28,960 --> 00:03:32,900
It's totally up to you whether or not you want to do the refactor or not.

51
00:03:32,920 --> 00:03:34,170
This is not an error.

52
00:03:34,210 --> 00:03:38,740
It is really just something that Yeslam to saying you know your code would look a little bit better

53
00:03:38,740 --> 00:03:40,060
if you did it this way.

54
00:03:40,450 --> 00:03:44,330
So again I leave it up to you whether or not you want to do this or not.

55
00:03:44,350 --> 00:03:46,250
Just to give you an example the refactoring.

56
00:03:46,270 --> 00:03:48,560
I think I will go ahead and refactor it.

57
00:03:48,640 --> 00:03:53,270
So to get the air to go away I would delete the curly brace up here.

58
00:03:53,620 --> 00:03:59,120
I would delete the return statement right here and put the parentheses up on the line above it.

59
00:03:59,500 --> 00:04:03,690
I'll delete the curly brace at the bottom and then indent everything like so.

60
00:04:03,760 --> 00:04:11,970
So now I'm just left with Konst app federal function and this will return this block of GSX right here.

61
00:04:12,590 --> 00:04:13,790
Again totally up to you.

62
00:04:13,840 --> 00:04:18,450
Either way I'll go both fashions throughout the course.

63
00:04:18,830 --> 00:04:19,110
OK.

64
00:04:19,120 --> 00:04:22,960
So we've now got a full blown re-act native program ready to run.

65
00:04:23,240 --> 00:04:28,990
So if you recall we spoke much earlier about how to run and react native app in an earlier section and

66
00:04:28,990 --> 00:04:34,420
the methodology is different depending on what platform you're on either OSX or Windows.

67
00:04:34,420 --> 00:04:37,960
If you don't recall how to run the similar and with Windows then you'll want to go back a couple of

68
00:04:37,960 --> 00:04:40,180
videos and review that process.

69
00:04:40,180 --> 00:04:48,580
Otherwise if you're using iOS at the command line inside of our project directory we will run re-act

70
00:04:48,640 --> 00:04:51,550
native run IO like so.

71
00:04:51,580 --> 00:04:55,320
And this will start up our iOS simulator and launch the app.

72
00:04:55,440 --> 00:05:01,610
And I've already got the simulator running right here so I'm just going to refresh it and.

73
00:05:01,620 --> 00:05:01,930
OK.

74
00:05:01,930 --> 00:05:04,750
This is our app now as ugly as it looks.

75
00:05:04,750 --> 00:05:06,710
You'll notice that up on the very top left.

76
00:05:06,790 --> 00:05:12,580
I've got the text some text so it looks like it's up there but it's definitely overwriting the status

77
00:05:12,580 --> 00:05:12,900
bar.

78
00:05:12,910 --> 00:05:18,010
So this is you know hey like our content is showing up it looks like our component is being rendered

79
00:05:18,340 --> 00:05:20,870
but it's definitely does not look very good at all.

80
00:05:21,130 --> 00:05:25,030
So let's figure out how to fix this in the next section.