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.
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.
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?
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.
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.
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.
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.
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.
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.
Now that we have settled the basics of React, we can finally jump into the React Native world.
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.
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!).
I know, some fancy words here, but I will make it simpler.
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.
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.
In any other way, React Native is similar to React 😊.
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.
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:
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
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
Next on: the
render() method, which is in charge of rendering the components in the screen. Here you can see that instead of
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.
The app will look similar on the Web and on the mobile:
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.