As it turns out, React has proved tremendously successful, both on my own projects, and with many others around the web, including large companies like Netflix. And now with React Native, the framework has been brought to mobile. React Native is a great option for creating performant iOS and Android apps that feel at home on their respective platforms, all while building on any previous web development experience.
Further Reading on SmashingMag
This article will explain why I think you should consider using React Native, by providing an overview of the framework and what I believe to be its best features.
This Button component has two pieces of input data: onPress, which is a callback function for when the button is pressed; and text, which is the string to display inside the button. The XML-like structure you see returned by the render function is called JSX, which is syntactic sugar for React function calls. And TouchableOpacity and Text are existing components that are included with React Native. Now that this Button component has been created, it can be used many times throughout the application, with consistent behavior and styling.
While this is a simple example, it demonstrates how a React app is built, piece by piece. Continuing in this manner, you can create components that represent increasing layers of abstraction. For example, you might create a ButtonGroup component that contains several connected buttons. And building on top of that, you can write components that represent entire screens. Even as your app gets significantly larger, components remain understandable and manageably sized at each level.
React’s best feature when it originally launched for the web was making your app’s view layer a pure output of state. As a developer, this means that instead of imperatively making changes to view components (for example, programmatically altering the text or color of a button by calling a function on it), you simply define what your view should look like based on input data, and React intelligently makes the changes for you when the state changes.
This shift in thinking can drastically simplify building UIs. We’ve all used apps where the UI enters a weird unintended state after taking a path the developer didn’t expect. With React, bugs like this are much easier to track down. You don’t have to think as much about the user’s path through the system, instead focusing on making sure your view declarations can handle all possible shapes for your app’s state. This is a much easier problem to solve – and to test for. It is also more easily understood by the computer, so improvements to static analysis and type systems will only make these bugs easier to find.
React Native component definitions look and behave pretty much just like React for web components, but target native UI widgets instead of HTML. So instead of using a <div>, you would use a <View> (which on iOS gets rendered to a native UIView, and on Android, android.view). When your components’ data changes, React Native will calculate what in your view needs to be altered, and make the needed calls to whatever native UI widgets are displayed.
Many software frameworks promise that they will let you make a great app for Android and iOS, but the product frequently ends up somewhere in the middle without feeling truly native to either. By embracing the native platforms while still letting your app share the majority of its codebase between platforms, React Native enables developers to make awesome native apps their customers will love, without the increase in budget building two separate apps could entail.
Ease Of Learning
One of React’s greatest strengths is how readable it is, even to those unfamiliar with it. Many frameworks require that you learn a long list of concepts that are only useful within that framework, while ignoring language fundamentals. React does its absolute best to do the opposite. As an example, consider the difference between rendering a portion of a list of friends in React Native vs Ionic (AngularJS).
With Ionic, you use the directive. Let us say we have an array of friends, each of which contains the following fields: first_name, last_name and is_online. But we only want to show those friends that are currently online. Here is our controller:
If you aren’t familiar with Ionic/AngularJS, this code snippet raises some immediate questions. What is $scope? What is the syntax for filter? And how would I add additional behavior, like sorting the list of friends?
With React Native, you make use of your existing knowledge of language fundamentals, using the built-in and functions.
Smashing Membership.Just sayin’.
Thanks to its declarative views, certain libraries are particularly suited for use with React Native. One I’d be remiss not to mention is . Described as a “predictable state container”, redux is an awesome library for manipulating your application’s state. Redux is highly testable, and encourages writing small functions that are explicit about what data they change. Once your state changes are written this way, your app can take advantage of powerful features, like global undo/redo and hot reloading.
Happy developers are productive developers, and React Native has a great development environment. Instead of repeatedly waiting for your code to compile and your app to restart while making tiny edits, changes to a React Native codebase are made to your running app without the need to restart (see a demo of that here).
For creating your app’s layout, React Native uses flexbox. While every layout engine has its own learning curve, upsides and downsides, React Native’s support for flexbox means you can use the exact same layout code for Android, iOS and web, instead of learning three different engines.
We’ve already discussed how React Native can share code between Android and iOS, but what about the web? Anything in a React project that doesn’t directly tie to a native platform is already sharable. Think about an app that can render on the server, in a web browser, or on Android or iOS – all driven by one shared codebase. While we aren’t quite there yet, the community is working on it. Keep an eye on the project.
Between the ease of development, quality of the apps built with it, and the richness of the platform and ecosystem, I’ve had a lot of fun learning and building with React Native. If you want to learn more, check out the links below!
Why You Should Consider React Native For Your Mobile App