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.
Please note that 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.
As specified on their website, React is a JavaScript library for building user interfaces.
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.
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.
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.
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.
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.
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 😊.
After working with React Native, I think the following are some pretty solid advantages of it:
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:
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, wich 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
rootdiv.
The app will look similar on the Web and on the mobile:
Pretty cool, right? :)
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.