1
00:00:02,460 --> 00:00:04,290
So now that we know what React Native is,

2
00:00:04,290 --> 00:00:07,370
let's take a brief look behind the scenes.

3
00:00:07,530 --> 00:00:13,080
Now as I mentioned, with React and React Native, we build an app and our code typically looks something

4
00:00:13,080 --> 00:00:13,700
like this.

5
00:00:13,710 --> 00:00:19,260
We build normal React Components as you know it from the web with Javascript because Javascript is the

6
00:00:19,260 --> 00:00:21,650
language we use to build React Native apps

7
00:00:21,810 --> 00:00:26,290
but in there, we use special components like view and text here.

8
00:00:26,310 --> 00:00:31,130
These are not your normal HTML elements because the normal HTML elements are not supported,

9
00:00:31,680 --> 00:00:37,230
the native platforms don't know how to use them, therefore you use special components given to you

10
00:00:37,230 --> 00:00:42,600
by React Native for which React Native is able to translate them to instructions the native platforms

11
00:00:42,630 --> 00:00:46,380
do understand, so that's how this works.

12
00:00:46,380 --> 00:00:51,150
Now it's important to understand that your views, so the components you're working with, therefore are

13
00:00:51,150 --> 00:00:58,440
in the end compiled to real native widgets, to real native elements, to real native code. Your Javascript code

14
00:00:58,470 --> 00:01:03,480
where you manage your business logic will not be compiled but your views will be and that of course

15
00:01:03,750 --> 00:01:09,190
also means that you typically get a great performance when building React Native apps because the result

16
00:01:09,190 --> 00:01:14,310
is a real native app where a large chunk of the code is real native code.

17
00:01:14,310 --> 00:01:19,300
Now if we take a closer look at this component thing, it's important to understand that

18
00:01:19,320 --> 00:01:25,640
you can of course use React for building web apps but that you could also build native apps for Android and

19
00:01:25,650 --> 00:01:31,530
iOS with native code, so without React Native or that you can use React Native, so these are four

20
00:01:31,530 --> 00:01:37,410
different ways of building apps where of course React for the web won't give us a native app but just

21
00:01:37,410 --> 00:01:40,260
to compare how this would be related.

22
00:01:40,260 --> 00:01:45,630
So if you're using React for the web, you typically work with let's say a div to structure your content.

23
00:01:46,260 --> 00:01:48,540
If you would work directly with Android,

24
00:01:48,540 --> 00:01:54,780
so you would build your app in Android Studio without React Native at all, you would work with an Android

25
00:01:54,780 --> 00:02:00,600
view for example, that would be a widget you can use there in the user interface you're building directly

26
00:02:00,600 --> 00:02:08,970
with native platform features to structure your content. On iOS, that would be the UI view widget and

27
00:02:08,970 --> 00:02:10,780
you don't need to memorize these terms,

28
00:02:10,830 --> 00:02:16,020
I just want to explain how React Native translates things for you because in React Native apps, you

29
00:02:16,020 --> 00:02:18,180
actually use the view element.

30
00:02:18,180 --> 00:02:22,950
Now if you have a look at that view element, you of course see that it's very similar to the div element,

31
00:02:23,010 --> 00:02:24,830
it looks like a HTML tag,

32
00:02:24,840 --> 00:02:30,510
the difference of course is that it starts with a capital character and that view is no HTML tag,

33
00:02:30,690 --> 00:02:36,180
the browser wouldn't know what to do with a view but React Native does and React Native will translate

34
00:02:36,240 --> 00:02:42,990
that view to the Android view or to the UI view for you and it does that of course not just for this

35
00:02:43,050 --> 00:02:49,260
view general wrapper component but for example, if you're fetching user input, on the web you would

36
00:02:49,260 --> 00:02:54,210
do that with the input element, if you would build a native Android app, you would use edit text, for

37
00:02:54,210 --> 00:02:59,850
a native iOS app, you would use UI text field and in React Native, there's the text input component,

38
00:03:00,090 --> 00:03:06,240
again React Native compiles that to the native widgets for you and that's how React Native works behind

39
00:03:06,240 --> 00:03:11,520
the scenes. Of course we don't care about the web in this course here, just so that you understand that

40
00:03:11,520 --> 00:03:17,310
there are some similarities, we use these tags which look like HTML tags but of course, that the important

41
00:03:17,440 --> 00:03:24,660
difference is that these are special components compiled to native code. Now as I already mentioned, it's

42
00:03:24,660 --> 00:03:30,500
important to understand that for UI, React Native gives you special components which are then compiled

43
00:03:30,540 --> 00:03:33,000
to native use, for your other logic,

44
00:03:33,060 --> 00:03:38,760
so if you're using Redux or if you having any business logic, you're sending HTTP requests, you're transforming

45
00:03:38,760 --> 00:03:47,070
data, all your other Javascript code is not compiled to native code but instead, it's running on a special

46
00:03:47,070 --> 00:03:52,980
thread hosted by React Native. So you can imagine your React Native app which you get in the end as a real

47
00:03:52,980 --> 00:03:58,450
native app because it is one, where all the views have been compiled to native widgets but where there

48
00:03:58,450 --> 00:04:05,760
is an extra mini app inside of your app, a mini Javascript app running in there, hosted and started by React

49
00:04:05,760 --> 00:04:12,690
Native so to say, which runs all your Javascript code and your Javascript code can then talk to the native

50
00:04:12,690 --> 00:04:13,800
platform.

51
00:04:14,160 --> 00:04:19,860
You can picture this like this here, you have your code, your app and you build a native app and that's

52
00:04:19,860 --> 00:04:25,110
running on a native platform and of course there, you have certain platform features available like

53
00:04:25,110 --> 00:04:27,150
for example using device camera.

54
00:04:27,150 --> 00:04:32,520
Now as already mentioned, your code can be split into two things here - your views and your business logic,

55
00:04:32,520 --> 00:04:38,430
so the other Javascript code. Now as already mentioned multiple times, your views are compiled to native

56
00:04:38,490 --> 00:04:46,620
views, to native widgets for these platforms and your code however is kept as Javascript code and you

57
00:04:46,620 --> 00:04:53,090
can tap into native platform features like the camera because your Javascript code runs in a special

58
00:04:53,100 --> 00:04:58,430
virtual machine in the end, spun up and hosted by React Native inside of your app,

59
00:04:58,440 --> 00:05:04,710
so the right part here is all inside of our native app which we ship to the app stores and that Javascript

60
00:05:04,710 --> 00:05:10,080
code, this Javascript virtual machine, knows how to talk to the native platform features,

61
00:05:10,200 --> 00:05:14,340
so to the operating system your app is running on in the end through a special bridge

62
00:05:14,340 --> 00:05:20,580
you could say and that bridge and that virtual machine, that's all automatically provided by React Native.

63
00:05:20,580 --> 00:05:22,050
You don't have to care about this,

64
00:05:22,170 --> 00:05:29,190
all you do is you write your React Native app with Javascript and with these special components and

65
00:05:29,190 --> 00:05:30,720
that's all you need to know for now,

66
00:05:30,720 --> 00:05:36,870
this is how a React Native app works behind the scenes and I find it important to be aware of this because

67
00:05:37,170 --> 00:05:43,050
it takes some of the magic away in a positive sense because you understand what you're actually writing

68
00:05:43,050 --> 00:05:47,020
and what will happen with your code and how this code ends up in a native app

69
00:05:47,100 --> 00:05:51,960
and of course, you also understand that you have a real native app therefore in the end. Not all your

70
00:05:51,960 --> 00:05:52,980
code is compiled,

71
00:05:52,980 --> 00:05:58,300
that would be pretty impossible but your views are compiled and of course, the views,

72
00:05:58,320 --> 00:06:03,650
so the part the user sees, is the most important part when it comes to performance for an app because

73
00:06:03,650 --> 00:06:05,700
re-rendering the UI and all of that,

74
00:06:05,700 --> 00:06:10,620
that's typically the performance intensive part and therefore it's very good that this is compiled and

75
00:06:10,620 --> 00:06:13,410
that's one of the huge strengths of React Native.