1
00:00:02,370 --> 00:00:04,560
A crucial part of React Native

2
00:00:04,680 --> 00:00:07,900
are these components which are built into React Native

3
00:00:07,920 --> 00:00:13,340
because as you learned in the first section of this course, these are special components for which React

4
00:00:13,350 --> 00:00:21,420
Native knows how to translate, how to compile them to Native platform widgets and you can only use such

5
00:00:21,420 --> 00:00:23,730
components in React Native apps.

6
00:00:23,790 --> 00:00:29,070
You can build your own components but these then also in the end have to be made up of these built-in

7
00:00:29,190 --> 00:00:29,910
components,

8
00:00:30,000 --> 00:00:33,390
you can't use divs or paragraphs or anything like that.

9
00:00:33,600 --> 00:00:38,550
So we have to work with the ones built into React Native because there React Native knows how to translate

10
00:00:38,550 --> 00:00:43,640
them and there, we have things like the view, text, button, touchable text input, image, 

11
00:00:43,650 --> 00:00:46,620
these are some of the components you will see throughout this course,

12
00:00:46,620 --> 00:00:51,150
there are more and we'll see plenty of them throughout the course and you will learn how to work with

13
00:00:51,150 --> 00:00:58,620
those, how to configure them and how to compose nice user interfaces with the help of these components.

14
00:00:58,620 --> 00:01:04,500
Now you, as I just mentioned of course, build your user interfaces, your custom components with the help

15
00:01:04,500 --> 00:01:11,130
of these built-in components here, so you compose your user interface, your components from these built

16
00:01:11,160 --> 00:01:16,830
in components there and it looks something like this. You build your own my title component by taking

17
00:01:16,830 --> 00:01:23,520
the built-in ones and mixing and matching them together to get the look or the component you need. Styling

18
00:01:23,520 --> 00:01:28,770
also is an important part in React Native apps and there it's important to understand that React Native

19
00:01:28,860 --> 00:01:35,070
doesn't use web technologies, it doesn't use HTML, it uses Javascript arguably but doesn't use HTML

20
00:01:35,070 --> 00:01:41,580
and it also doesn't use CSS, so CSS which you use for styling in the web is not supported in React

21
00:01:41,580 --> 00:01:50,010
Native but it gives you styling commands, styling configuration you can add to your components, so to

22
00:01:50,010 --> 00:01:55,740
these components that are built into React Native either with the help of inline styles or with so-called

23
00:01:55,830 --> 00:02:02,580
stylesheet objects and there, you write these style instructions in Javascript but you use a syntax

24
00:02:02,580 --> 00:02:09,990
which is based on CSS. So it's not directly related to CSS but of course it's influenced by CSS,

25
00:02:10,170 --> 00:02:17,310
many of the instructions you use here are inspired by CSS and many of the rules or of the properties

26
00:02:17,310 --> 00:02:24,420
you know from CSS also work here in Javascript, in your React Native app. Now regarding the inline

27
00:02:24,420 --> 00:02:30,810
styles vs stylesheet objects thing, I will show both but I will already say that using stylesheet

28
00:02:30,840 --> 00:02:34,800
object is preferred but I'll come back to that once we do use it.

29
00:02:34,910 --> 00:02:39,450
And with that, now that we know roughly what's up with components and styling,

30
00:02:39,550 --> 00:02:43,220
why don't we just get started and start working with these things?