This year, we launched our first mobile development internship program.
While we're super excited to share our knowledge on cross-platform mobile app development, and we already have some pretty interesting candidates, the internship announcement has also led to some misunderstandings of what React Native is.
Hence, in this post, I decided to give you guys a small introduction to 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.
What is ReactJS?
React was developed by Jordan Walke, a software engineer at Facebook and was initially used for Facebook's newsfeed in 2011, then for the Instagram feed in 2012.
Its initial public release was on 29 May 2013, and it is developed and maintained by Facebook in collaboration with individual developers and companies. It also is open source so anybody can contribute to improve it.
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 get a bit technical
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.
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?
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.
What is React Native?
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.
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!).
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 😊.
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:
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, wich 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:
Pretty cool, right? :)
React vs React Native - let's sum it up
React Native is a framework still in its early stages, so it's still work in progress, but is improving daily.
If you can embrace the frequent changes of a new technology and want to develop a cross-platform mobile app fast and using you web developer skills, then you shouldn’t hesitate and go for it!
The advantage is you don’t need to be scared of it, nor have the impression you should learn native C/Swift and Java code in order to develop mobile apps.
Instead of using only web/frontend knowledge, instead of being just another Android or iOS developer, play the smart (and long-term) game and get the hang of React Native as well. If you're a computer science student in Cluj-Napoca, you can actually do this at our React Native internship by sending your resume here by May 30th 2019.
If not, feel free to write to me here to chat about anything React or React Native. Gladly waiting for your input.