1
00:00:02,380 --> 00:00:08,210
So we already had a look at a solid set of basics you need for building React Native apps, for working

2
00:00:08,210 --> 00:00:10,050
with these core building blocks

3
00:00:10,190 --> 00:00:13,460
even though of course a lot of the things are still unclear,

4
00:00:13,460 --> 00:00:17,660
we haven't really had a closer look at styling and layouting and so on

5
00:00:17,780 --> 00:00:22,820
but one thing which we definitely should do now is also explore how you can build your own components

6
00:00:23,030 --> 00:00:25,780
because thus far, we always worked in the app.js file and

7
00:00:26,000 --> 00:00:28,820
you will certainly not build bigger apps in one file

8
00:00:28,820 --> 00:00:31,360
only, that file would get super big after all

9
00:00:31,430 --> 00:00:37,190
and if you have a custom component which you plan on repeating, right now we would have to copy and paste

10
00:00:37,190 --> 00:00:38,420
our code.

11
00:00:38,660 --> 00:00:44,060
So let's create new components and therefore here in the project, I'll add a new folder named components,

12
00:00:44,060 --> 00:00:49,020
the name is up to you but since I plan on storing some components in there, the name make sense to me

13
00:00:49,710 --> 00:00:55,250
and in there, I want to create a component for the list item and also one for our input area.

14
00:00:55,340 --> 00:01:00,320
So let's create two new files in there and I will have a naming convention for the files where I start

15
00:01:00,320 --> 00:01:09,440
with capital case characters and I'll have my GoalItem.js, it's a Javascript file of course

16
00:01:09,440 --> 00:01:16,100
and my GoalInput.js file. Now both will hold normal React component, so let's start with the goal

17
00:01:16,100 --> 00:01:21,830
item and therefore import React from React, just as you need to do it in a React for web project.

18
00:01:21,830 --> 00:01:29,570
Then here, I'll create my functional component, goal item which gets props and which then has to return

19
00:01:29,570 --> 00:01:36,000
some jsx here and I'll export this as a default, just like this.

20
00:01:36,090 --> 00:01:42,030
Now the jsx I want to render there has to use React Native components or other custom components

21
00:01:42,060 --> 00:01:44,570
which then in turn use React Native components

22
00:01:44,730 --> 00:01:51,180
and here I'll go with this content I had in here. So I'll cut it from the app.js file and return it

23
00:01:51,180 --> 00:01:51,790
here.

24
00:01:52,450 --> 00:01:57,100
Now in order to use this here, we have to import view and text,

25
00:01:57,100 --> 00:01:59,970
so these two components, from React Native.

26
00:01:59,980 --> 00:02:05,760
So let's import view and text from React-Native here.

27
00:02:05,790 --> 00:02:10,410
In addition, I'm setting up some styles and I want to use the stylesheet, so I'll import this here as

28
00:02:10,410 --> 00:02:20,110
well and then set up my styles constant which you could name differently of course with stylesheet

29
00:02:20,380 --> 00:02:26,990
create and I'll go back to the app.js file and grab my list item style here,

30
00:02:26,990 --> 00:02:32,960
cut it from there and go to the goal item and add it here to this object I pass to stylesheet.create.

31
00:02:33,020 --> 00:02:39,140
Now this should work but of course what I'm outputting here will no longer be on item data,

32
00:02:39,500 --> 00:02:46,550
instead let's expect that we simply get this as props, so either props children so that it can be passed

33
00:02:46,550 --> 00:02:53,210
between the opening and closing tag of our custom component or maybe props.title, whatever you want, a

34
00:02:53,210 --> 00:02:59,770
prop name of your choice then. Now we can use our custom component, the goal item by going back to the

35
00:02:59,770 --> 00:03:06,580
app.js file and here I'll add import to goal item with a capital G, so that React recognizes this as

36
00:03:06,580 --> 00:03:15,370
a custom component from ./components/GoalItem, you can omit the .js and now we can

37
00:03:15,370 --> 00:03:24,550
use goal item down here in render item as a custom component, in this case a self-closing component because

38
00:03:24,610 --> 00:03:30,220
since I'm using props title and not props children, I don't expect anything between the opening and closing

39
00:03:30,220 --> 00:03:37,660
tags of my custom component. I do expect a title prop though, so let's set this here with title and then

40
00:03:37,660 --> 00:03:43,360
here, we can point at item data, then get access at the item which is an object where we have a value key

41
00:03:44,480 --> 00:03:53,210
and with that, we should still see the same as before if we enter some goals here, learn all about rn,

42
00:03:54,870 --> 00:04:01,230
yes that's looking good, now with our custom component. Now here's a good practice for you to also put

43
00:04:01,260 --> 00:04:07,320
the text input and button or this entire view here actually into our goal input component and of course

44
00:04:07,320 --> 00:04:12,810
for that, you'll also need to wire up communication between the app.js file and the goal input component

45
00:04:13,170 --> 00:04:18,930
to be informed when users press this button in the goal input component and then add data here in the

46
00:04:18,930 --> 00:04:19,730
app.js file.

47
00:04:20,280 --> 00:04:25,260
It's how you would do it in a React for web project too, so if you have experience with that, it should be

48
00:04:25,260 --> 00:04:30,860
no problem, otherwise we'll do it together in the next lecture but if you know how to do it, definitely

49
00:04:30,860 --> 00:04:32,010
try it on your own first

50
00:04:32,010 --> 00:04:32,250
now.