1
00:00:02,230 --> 00:00:07,780
So throughout this module, we had a look at a lot of important basics you have to know when working with

2
00:00:07,780 --> 00:00:13,030
React Native. You learned about these core components which you import from React Native and that you

3
00:00:13,120 --> 00:00:15,910
only can work with these core components,

4
00:00:15,910 --> 00:00:21,580
you can build your own components but these components then in turn also have to be based on these

5
00:00:21,580 --> 00:00:27,640
built-in core components or on other custom components which then are based on these core components.

6
00:00:27,850 --> 00:00:32,830
That is really crucial, you have to use these core components and you can style these core components

7
00:00:32,920 --> 00:00:38,320
with the help of inline styles or a stylesheet as we're doing it here. In the end, all the styling of

8
00:00:38,320 --> 00:00:42,190
course happens with Javascript because that's all just Javascript code here,

9
00:00:42,190 --> 00:00:46,750
it's a Javascript object in the end to which we're then pointing here when we're assigning a style

10
00:00:46,990 --> 00:00:51,270
and in general, you control your entire UI with Javascript.

11
00:00:51,310 --> 00:00:53,590
This part here, the view,

12
00:00:53,800 --> 00:00:55,890
so the elements you're building here,

13
00:00:55,960 --> 00:00:59,850
this is the part which React Native will compile to native code,

14
00:01:00,190 --> 00:01:03,670
this part up here, your other Javascript code,

15
00:01:03,670 --> 00:01:07,280
that will stay Javascript code, that will not be compiled,

16
00:01:07,370 --> 00:01:13,300
instead that will run in this virtual machine which I showed you in section one of this course and will

17
00:01:13,300 --> 00:01:20,230
then talk to the native code through a special bridge set up by React Native. Now and other than that,

18
00:01:20,230 --> 00:01:22,030
we used normal React features.

19
00:01:22,060 --> 00:01:29,770
We're using props to pass data around, we're using state here with useState, the useState hook to use functional

20
00:01:29,770 --> 00:01:35,650
components only. You could have converted this to a class-based component to use set state there and

21
00:01:35,650 --> 00:01:39,440
useState in there as you probably learned it about class based components

22
00:01:39,520 --> 00:01:43,690
but I want to use this very modern React syntax and hence I use React hooks

23
00:01:43,870 --> 00:01:47,560
and with that, we got the basics set.

24
00:01:47,560 --> 00:01:52,420
Now of course besides the official docs which are always worth a look if you want to learn more about

25
00:01:52,420 --> 00:01:59,650
a specific component, we'll dive much deeper into these components we use here, into styling and in the

26
00:01:59,650 --> 00:02:06,460
next section, we'll also have a look at how you can debug an such application before we then build a different

27
00:02:06,460 --> 00:02:12,460
app, a more beautiful app already where we then dive also into questions like how you can adjust your

28
00:02:12,460 --> 00:02:20,320
app to different device sizes, how you can style your widgets, your components in a bit of a nicer way

29
00:02:20,620 --> 00:02:25,360
and also how you can adjust your styles or your layout to the different platforms,

30
00:02:25,360 --> 00:02:27,370
so iOS for Android, you're running on.