How React Native Works

Academind by Maximilian Schwarzmüller
A free video tutorial from Academind by Maximilian Schwarzmüller
Online Education
4.6 instructor rating • 26 courses • 1,340,022 students

Lecture description

We had a first look at what React Native is, let's now dive a bit deeper and see what exactly it does for us. 

Learn more from the full course

React Native - The Practical Guide [2021 Edition]

Use React Native and your React knowledge to build native iOS and Android Apps - incl. Push Notifications, Hooks, Redux

32:29:01 of on-demand video • Updated December 2020

  • Build native mobile apps with JavaScript and React
  • Dive deeper into React Native
  • Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android
English 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.