1
00:00:00,440 --> 00:00:04,690
In the less section we explored our project structure a little bit and clear out the contents of the

2
00:00:04,690 --> 00:00:06,280
index file.

3
00:00:06,580 --> 00:00:11,290
In this section we're going to start with the absolute basics which is to attempt to get some content

4
00:00:11,350 --> 00:00:17,560
on the screen of our mobile device whenever we want to place and content on the screen in any type of

5
00:00:17,560 --> 00:00:18,430
app we built.

6
00:00:18,460 --> 00:00:24,470
We are always going to do so by creating a component a component is a widget of sorts.

7
00:00:24,490 --> 00:00:30,130
It's a thing that produces some text or a shape or an image that can be rendered onto the screen of

8
00:00:30,130 --> 00:00:31,840
our mobile device.

9
00:00:31,840 --> 00:00:37,090
The apps that you and I build are going to be composed by collections of these different components

10
00:00:37,090 --> 00:00:38,580
that we are going to make.

11
00:00:38,590 --> 00:00:46,220
So our job right now inside of this index file is to create a component and then somehow render it onto

12
00:00:46,240 --> 00:00:48,610
the screen of our mobile device.

13
00:00:48,610 --> 00:00:53,480
So to help us in this first task we're going to add some comments to guide us along.

14
00:00:53,590 --> 00:00:56,970
So up on the first line here I'm going to add one comment.

15
00:00:57,130 --> 00:01:04,570
I'm going to say the first thing we need to do is to import a library to help create a component then

16
00:01:04,570 --> 00:01:10,300
a little bit underneath that I'm going to say that we are going to attempt to create a component and

17
00:01:10,300 --> 00:01:13,930
then a little bit further underneath that we're going to say that we are going to attempt to render

18
00:01:13,930 --> 00:01:18,060
that component to render it to the device.

19
00:01:18,070 --> 00:01:21,610
So let's talk about these three steps here and a little bit greater detail.

20
00:01:21,730 --> 00:01:26,410
So the first thing we're going to attempt to do is to create or see import a couple of libraries to

21
00:01:26,410 --> 00:01:32,470
help us make it component components or intelligent objects that have a lot of InnerWorkings associated

22
00:01:32,470 --> 00:01:33,310
with them.

23
00:01:33,310 --> 00:01:38,820
So we don't want to have to implement all that fancy pants code every time we make a component.

24
00:01:39,160 --> 00:01:45,610
So instead we use a few functions provided by reac native to make the process of generating a new component

25
00:01:45,610 --> 00:01:48,150
much easier for us.

26
00:01:48,160 --> 00:01:53,920
The next thing that we're going to do is use that library that we just imported to create a new component.

27
00:01:53,920 --> 00:01:56,850
Now I keep using this term component over and over again.

28
00:01:56,860 --> 00:02:02,770
Remember this is a thing for lack of a better term that produces some content that's going to appear

29
00:02:02,770 --> 00:02:04,950
on her mobile device.

30
00:02:04,990 --> 00:02:09,970
Finally the act of just creating an component doesn't actually do anything.

31
00:02:09,970 --> 00:02:15,430
We have to specifically tell Riak needed to take the component we just created and place it onto the

32
00:02:15,430 --> 00:02:20,680
screen in all of the different apps that we are going to create and of course we'll have to deal with

33
00:02:20,740 --> 00:02:26,770
a dozen or so different components and at every step along the way we always have to be very specific

34
00:02:27,040 --> 00:02:33,250
in telling our device exactly when to display each of these different components to our users.

35
00:02:33,250 --> 00:02:36,070
So let's begin with step one up here at the top.

36
00:02:36,100 --> 00:02:40,280
We're going to add a little bit of code to import to libraries into this file.

37
00:02:40,450 --> 00:02:49,270
So let's write it out and say import react Wouk's import re-act from react and import re-act native

38
00:02:49,360 --> 00:02:53,800
from re-act dash native like so.

39
00:02:53,800 --> 00:02:59,590
So already some crazy looking code because all this time we've been talking about this library called

40
00:02:59,590 --> 00:03:04,910
re-act native but now it appears that we are importing two separate libraries here.

41
00:03:04,960 --> 00:03:09,090
One that's called react and the other that's called re-act native.

42
00:03:09,190 --> 00:03:14,260
Let's take a short break right here and then we'll figure out exactly what the differences between these

43
00:03:14,260 --> 00:03:16,030
two libraries in the next section.