I got to that point in my career where I feel confident to mentor young computer science students (yay!). So when the call for mentors at my company, Around25, was launched, I said yes. The catch was: we introduced an internship on React Native and as the resumes started rolling, I realized people didn't know what React Native actually is.
This is how this article came to be. So I'm sharing with you a few introductory notes about React Native, what you should know before entering this vast world, and - maybe most importantly - how is React Native different from React.
Initial Considerations
The React Native code is written in JavaScript and the final compiled version of the app will be almost native iOS and Android code. Further along this article, you'll see what I mean by 'almost native'.
Before starting with ReactJS and React Native, you should have a basic knowledge of the following:
Because both React and React Native libraries are developed by the same company, (Facebook) and they're both pretty similar, I want to start with the basics of React, before jumping into React Native.
How does ReactJS work?
Picture this: it’s Friday night, you are coming home from work, tired and want to relax. You're sitting on the couch with a cold one and with your laptop. Before opening Netflix, you check your Facebook feed to see what your friends are doing.
While scrolling down your feed, you notice a funny photo of your best friend from their annual company event. You give out a reaction to the photo and write a comment.
At this point you are in the midst of writing your comment and you see someone typing a comment at the same time, that comment then pops up, the reactions and likes are increasing. You reply to one of them, you may like another, you get another reply and so on.
All these without needing to refresh the page! This is the work of our good friend - ReactJS.
So, how does React know what to display to you and how the work is done under the hood?
Let’s Dive into It
React is a component-based library. This means that the web application is made up of different components. The components are eventually compiled into HTML elements.
These components are independent blocks which are linked together to build the entire web application. You can visualize this as a tree, where there is a root component and each of the other components become individual branches which are further divided into sub-branches.
This keeps the UI of the application organized and also allows the data and state changes to flow smoothly between the branches. Plus, the components can be linked together, so one component can refer to other components.
Every component has its own state, together with the lifecycle methods.
Every time a set of data is changed, React will automatically update the component's state accordingly.
In what concerns the code, React is using the JSX (JavaScript XML) syntax - an XML/HTML-like extension to JavaScript - for the code. Here is a glimpse into how JSX looks:
As you can see, JSX is not plain JavaScript code, nor HTML.
JSX is a separate technology from React and completely optional while building React applications. However, life's much easier when you combine JSX with React.
Without JSX, the code can get messy due to the number of elements required to create HTML in JavaScript.
Something like this:
This is the compiled code of the JSX syntax. It is completely valid React code but is much harder to write and to understand.
More of how React is using JSX you can find here.
But how does React understand JSX?
In order for React to understand and compile JSX, it needs a transpiler. For this, we have Babel which is a JavaScript compiler that can translate markup or programming languages into JavaScript. Also, with Babel you can use all the features of ES6 (ECMAScript 2015).
Ok, now that you have a rough idea of how React looks like, let’s go back to our example and examine how this library knows what HTML elements to display to the user.
React has a concept of Virtual DOM.
Let’s say you have written a simple HTML web page in React. This page is transpiled JavaScript output which creates your HTML. Now, let’s say you want to change/add/remove an element in this page and display the change without refreshing the page.
These changes are not pushed to the DOM directly, but instead to something called Virtual DOM.
The Virtual DOM is basically just a copy of the real DOM that React makes. So every time you want to change an element, React compares the Virtual DOM to the original DOM. At this point, if there is a difference between the Virtual DOM and the real HTML DOM, the changes are pushed to the real DOM, but only for that specific part of the DOM. The rest remains unchanged.
This is what makes React so fast.
JavaScript is a very fast programming language and is interpreted by the browser almost instantly. The slower part of web development is the render and CSS part. This is why it's faster to keep a copy of the original DOM in the JavaScript code and compare it every time a change is made instead of replacing the entire DOM.
Replacing this simple page with the elements from the above example with our friend, you can easily understand how Facebook and other applications using React, know how to display dynamic data without refreshing the entire web page.
What is React Native?
Now that we have settled the basics of React, we can finally jump into the React Native world.
React Native is an open-source mobile application framework, developed by Facebook. Its first release was on 26th of March 2015, at the React JavaScript Configuration Conference.
React Native was designed to create mobile applications for iOS and Android by providing developers a tool to use React along with the native mobile platform.
How does React Native work?
The working principles of React Native are the same with React, but instead of targeting the browser, they're targeting mobile apps.
So, now that you are an expert in React basics, it should be pretty simple: React Native also manipulates some kind of a DOM, compares it and that’s it. It is changing a mobile app UI, right?
But wait... in a mobile app there is no trace of HTML DOM. And we need to make a mobile app, not a website. So we cannot open the mobile device browser (duh!).
That being said, React Native does not manipulate the DOM via the Virtual DOM, instead it runs a background process - a JavaScript thread - in order to communicate with the native platform via a serialized, asynchronous and batched Bridge.
I know, some fancy words here, but I will make it simpler.
React Native does not use HTML, but native views via the messages that are sent using that bridge between the JavaScript part and the native iOS (C/Swift) and Android (Java) code.
This is why I like to say that the final React Native app is an almost native mobile app. You still have that bridge between JavaScript and Native iOS and Android code.
To make this easy to understand, check the following image:
In the example above, Bill - the awesome React Native developer - is creating a starting screen in his React Native mobile app. It needs to display 2 elements on the page: the React logo and a Login button.
For this, he writes the code in React Native using the JSX and similar React code structure, but instead of using divs and HTML elements he is using React Native View elements. When the code is compiled, it generates a JavaScript thread which creates a 'bridge' between the React Native render method and the actual iOS/Android native code. Using this bridge, React Native can ask native code to provide the native elements it needs.
In this case, React Native is invoking the native rendering API to receive the Image and the Button elements and then it only displays them within the app. The final components that are displayed are the fully-native UI elements. It's not necessary to create a webview and render HTML in it.
This is why React Native is so powerful. The final app will look and feel like any other mobile application.
Besides providing access to the native render API, React Native also exposes JavaScript interfaces for native platform APIs, so you can access platform-specific features such as phone camera, location and so on.
In any other way, React Native is similar to React 😊.
Advantages of React Native
After working with React Native, I think the following are some pretty solid advantages of it:
- You can write code faster and release it for both iOS and Android with only tiny differences that are device-related. There is no need for 2 teams of developers for the same app.
- Due to the fact that React Native actually renders components using the native platform API, it stands out from most existing methods of cross-platform development such as Cordova or Ionic which are using webviews to display HTML elements in the app.
- You don’t need too much knowledge of C/Swift or Java in order to develop mobile apps for both mobile platforms
- Ability to basically write React code that runs separately from the main UI thread communicating with the native platform.
- Friendly for Web (Frontend) Development - you can write mobile applications with the performance, look and feel of a native application, while using familiar tools.
These are just a few of the advantages of React Native, but I think you got the idea.
React vs React Native. Example
As I mentioned above, React and React Native are very similar in code-writing point of view, so let me come with a practical example.
Here you have a simple To-Do list app written both in React and React Native for the sake of comparison.
Heads-up: don’t be scared of the JSX syntax and do not focus much on the code. The idea is to notice the small differences between React and React Native code, besides some styling.
I will break the differences apart in order to be easier to understand:
In the handleChange() function in React, the parameter of the function is the event object and through it, we can get the value of the HTML element that triggered that event.
On the other side, in the React Native handleChange() function, we can send directly the current value of the input element and set that value in the Component state.
Another difference you can notice is in the handleSubmit() function.
The same principle applies, on the React side - the event object is used in order to prevent the default behavior of the element that triggers that event, which is the form HTML element. By default, when the onSubmit event is triggered, the form automatically makes a request with the form-data.
On the React Native side, this is not necessary and the handleSubmit() function is triggered when pressing the Add button.
Next on: the render() method, which is in charge of rendering the components in the screen. Here you can see that instead of divs, inputs, forms and other HTML elements, the React Native code uses elements from the “react-native” package, which are mobile native UI elements.
Finally, in React the ReactDOM.render() method is used, which is mandatory in order to inject the <TodoApp /> component into the <div id="root"/> HTML element.
Don't forget that this is JavaScript, so every HTML element in the page is injected in that root div.
The app will look similar on the Web and on the mobile:
Let's sum it up
React Native is a framework still in its early stages, it's work in progress so it sure does have some limitations. But all in all, it really helped me transition from web to mobile development and it’s a great fit for the project I’m working at.
I’d be glad to hear from your experiences with React Native - be them good or bad - so feel free to stir any debate or ask for any advice.
Top comments (6)
Great article! Easy to follow and fun to read. One suggestion: You only mentioned advantages of React Native. What are the disadvantages?
I’m glad you liked it!
Hmm… Some disadvantages that are coming to my mind right now are, for example, the native modules.
They are a great plus and definitely an advantage too, but if you want to develop a native module you still need some native code knowledge to work on both Android and iOS platforms - Objective-C/Swift and Java. Also, if you have some issues with a native module package, you may still have to dig into the native code of the app.
Another disadvantage that I encountered is some compatibility issues between the 2 platforms and some memory management issues due to that Javascript Bridge that I mentioned in the article. Don't get me wrong, an app built in React Native can work and perform like a fully native app but you need to have the knowledge on how to properly build apps in React Native and how React and React Native works in order to have a high performance app.
But in my opinion, there are plenty more advantages that disadvantages of using React Native and you should definitely give it a try! :)
Thank you for the information!
I am using React Native and React for the job that I am currently working at. It is been a great journey so far but I know that I still have so much to learn. I am feeling a little bit insecure about how React Native works at the background so do you have any kind of recommendation about that topic?
You're welcome!
To get rid of this insecurity, just practice, practice and practice :D! To gather knowledge of how it works, my advice is to read "best practices / how to" articles, watch tutorials, follow good writers, search encountered issues in your projects and talk with the community. With time, I'm sure you'll gain more confidence in your code.
Again, thank you for the information!
I will definitely look into it.
Cheers
Hey Alex. You made the differences and similarities between React and React Native quite clear. I’m just starting to learn React and I want to eventually try React Native as I’m interested in mobile development as well.
Thanks for this article.