So now that we know what React Native is,
let's take a brief look behind the scenes.
Now as I mentioned, with React and React Native, we build an app and our code typically looks something
like this.
We build normal React Components as you know it from the web with Javascript because Javascript is the
language we use to build React Native apps
but in there, we use special components like view and text here.
These are not your normal HTML elements because the normal HTML elements are not supported,
the native platforms don't know how to use them, therefore you use special components given to you
by React Native for which React Native is able to translate them to instructions the native platforms
do understand, so that's how this works.
Now it's important to understand that your views, so the components you're working with, therefore are
in the end compiled to real native widgets, to real native elements, to real native code. Your Javascript code
where you manage your business logic will not be compiled but your views will be and that of course
also means that you typically get a great performance when building React Native apps because the result
is a real native app where a large chunk of the code is real native code.
Now if we take a closer look at this component thing, it's important to understand that
you can of course use React for building web apps but that you could also build native apps for Android and
iOS with native code, so without React Native or that you can use React Native, so these are four
different ways of building apps where of course React for the web won't give us a native app but just
to compare how this would be related.
So if you're using React for the web, you typically work with let's say a div to structure your content.
If you would work directly with Android,
so you would build your app in Android Studio without React Native at all, you would work with an Android
view for example, that would be a widget you can use there in the user interface you're building directly
with native platform features to structure your content. On iOS, that would be the UI view widget and
you don't need to memorize these terms,
I just want to explain how React Native translates things for you because in React Native apps, you
actually use the view element.
Now if you have a look at that view element, you of course see that it's very similar to the div element,
it looks like a HTML tag,
the difference of course is that it starts with a capital character and that view is no HTML tag,
the browser wouldn't know what to do with a view but React Native does and React Native will translate
that view to the Android view or to the UI view for you and it does that of course not just for this
view general wrapper component but for example, if you're fetching user input, on the web you would
do that with the input element, if you would build a native Android app, you would use edit text, for
a native iOS app, you would use UI text field and in React Native, there's the text input component,
again React Native compiles that to the native widgets for you and that's how React Native works behind
the scenes. Of course we don't care about the web in this course here, just so that you understand that
there are some similarities, we use these tags which look like HTML tags but of course, that the important
difference is that these are special components compiled to native code. Now as I already mentioned, it's
important to understand that for UI, React Native gives you special components which are then compiled
to native use, for your other logic,
so if you're using Redux or if you having any business logic, you're sending HTTP requests, you're transforming
data, all your other Javascript code is not compiled to native code but instead, it's running on a special
thread hosted by React Native. So you can imagine your React Native app which you get in the end as a real
native app because it is one, where all the views have been compiled to native widgets but where there
is an extra mini app inside of your app, a mini Javascript app running in there, hosted and started by React
Native so to say, which runs all your Javascript code and your Javascript code can then talk to the native
platform.
You can picture this like this here, you have your code, your app and you build a native app and that's
running on a native platform and of course there, you have certain platform features available like
for example using device camera.
Now as already mentioned, your code can be split into two things here - your views and your business logic,
so the other Javascript code. Now as already mentioned multiple times, your views are compiled to native
views, to native widgets for these platforms and your code however is kept as Javascript code and you
can tap into native platform features like the camera because your Javascript code runs in a special
virtual machine in the end, spun up and hosted by React Native inside of your app,
so the right part here is all inside of our native app which we ship to the app stores and that Javascript
code, this Javascript virtual machine, knows how to talk to the native platform features,
so to the operating system your app is running on in the end through a special bridge
you could say and that bridge and that virtual machine, that's all automatically provided by React Native.
You don't have to care about this,
all you do is you write your React Native app with Javascript and with these special components and
that's all you need to know for now,
this is how a React Native app works behind the scenes and I find it important to be aware of this because
it takes some of the magic away in a positive sense because you understand what you're actually writing
and what will happen with your code and how this code ends up in a native app
and of course, you also understand that you have a real native app therefore in the end. Not all your
code is compiled,
that would be pretty impossible but your views are compiled and of course, the views,
so the part the user sees, is the most important part when it comes to performance for an app because
re-rendering the UI and all of that,
that's typically the performance intensive part and therefore it's very good that this is compiled and
that's one of the huge strengths of React Native.