1
00:00:00,150 --> 00:00:07,760
Hey there, so in the last section, we explained the folder structure, which is generated by the react

2
00:00:07,790 --> 00:00:16,380
native Kellye, and then we deleted our index JSC file because that file is our entry point to the app.

3
00:00:16,920 --> 00:00:23,340
So we're going to write it from scratch and see our very first content on the emulator screen.

4
00:00:24,620 --> 00:00:27,440
So this is going to be our first step to create our app.

5
00:00:28,790 --> 00:00:37,190
Now, to create our app, we are always going to create components or apps are going to be composed

6
00:00:37,430 --> 00:00:40,130
by collections of these different components.

7
00:00:41,990 --> 00:00:48,200
So it's the components that produce some text or image that can be rendered onto the screen of our mobile

8
00:00:48,200 --> 00:00:48,650
device.

9
00:00:50,620 --> 00:00:55,600
All right, so now we're going to create our first component and then render that component onto the

10
00:00:55,600 --> 00:00:56,820
screen of our mobile device.

11
00:00:57,860 --> 00:01:02,660
So here is what we are going to do in our first component.

12
00:01:03,660 --> 00:01:06,750
I'm going to write some comments for you.

13
00:01:08,070 --> 00:01:17,220
First of all, we will need to import a library to help create a component, and we are then going to

14
00:01:17,220 --> 00:01:18,510
create that component.

15
00:01:22,040 --> 00:01:25,440
And then we're going to render this component onto the screen.

16
00:01:25,940 --> 00:01:29,060
So now I'm going to explain what this process is.

17
00:01:30,290 --> 00:01:35,330
So the first thing we're going to do is import some libraries, because these libraries have a bunch

18
00:01:35,330 --> 00:01:39,620
of intelligent objects which are going to help us to create our components.

19
00:01:41,150 --> 00:01:47,690
Now, to be able to create components, we need these libraries because we don't want to write every

20
00:01:47,690 --> 00:01:53,120
single time all that code that's already contained in those libraries.

21
00:01:54,950 --> 00:01:58,640
So we don't want to implement all that code every time we make a component either.

22
00:01:59,680 --> 00:02:06,490
So instead, we use a few functions provided by react native to make the process of generating a new

23
00:02:06,490 --> 00:02:09,310
component that much easier for us.

24
00:02:11,580 --> 00:02:16,710
So then the next thing they were going to do is use that library that we just imported to create a new

25
00:02:16,710 --> 00:02:17,340
component.

26
00:02:18,730 --> 00:02:24,070
And finally, the act of just creating a component doesn't actually do anything right.

27
00:02:24,850 --> 00:02:32,650
We have to specifically tell react native that it needs to render this component onto a screen in all

28
00:02:32,650 --> 00:02:35,320
of the different apps that we are going to create.

29
00:02:36,570 --> 00:02:42,330
And of course, we'll have to deal with a dozen or so different components at just about every step

30
00:02:42,330 --> 00:02:42,960
along the way.

31
00:02:44,190 --> 00:02:51,300
So we always have to be very specific in telling our device exactly when to display each of these different

32
00:02:51,300 --> 00:02:52,650
components to our users.

33
00:02:53,460 --> 00:02:53,770
Right.

34
00:02:53,820 --> 00:02:55,110
That all makes logical sense.

35
00:02:55,950 --> 00:02:59,160
So why don't we start with importing the library's.

36
00:03:00,440 --> 00:03:02,570
To import libraries is pretty easy.

37
00:03:02,600 --> 00:03:12,260
We just need to say import, react from react and import, react native from react Dasch native.

38
00:03:13,840 --> 00:03:22,510
Now, by the way, as you can see here, I do put single quotes here while I write, but after that.

39
00:03:23,370 --> 00:03:29,850
I can use the double quotes and actually it's really not important, you can just use whichever one

40
00:03:29,850 --> 00:03:31,190
you want, right?

41
00:03:31,490 --> 00:03:31,950
That's all.

42
00:03:34,300 --> 00:03:38,550
Of course, you see that we've imported another library besides Riak native.

43
00:03:39,580 --> 00:03:45,670
So we're going to take a break now and then in the next section, going to come back and tell you why

44
00:03:45,820 --> 00:03:51,160
we need both of these libraries who there's a teaser for you so I'll see in the next section.