Know React? You won’t believe how easy it is to get started with React Native.
If you are a React web developer, then you’ll be excited to hear that you’re very close to being a React Native mobile developer. At Infinite Red, the app design and development agency I work for, we’ve been astonished with how quickly our React web team can start shipping code on an iOS and Android React Native project. The skills and good practices you’ve developed around React carry over to React Native.
Let’s take a look at important differences and similarities that come with React Native and how easy it is to get started in React Native with a background in React.
Developer Tooling: Xcode & Android Studio
First off, the major (and probably most obvious) difference is going to be developer tooling. To run and build mobile applications, you’re going to need Apple’s Xcode for iOS, and Google’s Android Studio for Android applications.
Important: You do not need to use Xcode or Android Studio as your primary code editor. Keep using your favorite editor as you have it set up for React.
At Infinite Red, our team works almost exclusively on Macs, but this is not required. While Xcode is available only on Mac computers and is required to build iOS applications, Android Studio works on Mac, Windows and Linux machines. Therefore, if your team works primarily on Windows machines, you and your team can use Android Studio as long as you have at least one developer (maybe more depending on team size) with a Mac who can build/compile, run tests and fix bugs in an iOS environment. If you don’t need iOS for your application, then you won’t need Xcode or an Apple guru either.
If you want to learn more about setting up React Native on Mac, Windows and/or Linux, take a look at this three-part series, Painless React Native Setup, by my colleague Frank von Hoven, Executive Editor of the React Native Newsletter.
Missing DOM
We know the DOM is specific to web browsers and React Native run in a native mobile environment, without a browser. React Native translates our React code into native components for each platform we’ve chosen (most popularly, iOS or Android). This means we have no DOM elements, click events or CSS, but… we do have substitutes that are very similar. Take a look at the following list.
- HTML Markup
In React Native, we must substitute all HTML markup with React components that ship with React Native. If you’re not familiar with JSX markup, you will be once you get started with React Native. In the example below, you’ll see that we use only JSX components instead of weaving HTML and JSX like you might find in a web app. Essential we’re creating our own HTML elements with JSX that look and feel very familiar to HTML.
In addition, React Native has no index.html like we’re use to seeing on the web. Instead we have an index.js with limited functionality compared to index.html.
The index.js file just tells our compiler where the starting point of our application is. In the example above, you can see on line 2, that we import our main React component, called App. On line 4, we’re then telling React Native our app is called HelloWorld and we want to start building our application for our App component.
Compared to a usual index.html, we have no <link /> tag that allows us to bring in code from other sources. In React Native, our 3rd-party libraries need to be compiled and built into the application. This includes native libraries we want to use in our application with cocoapods and gradle packages (more on these later).
2. CSS
Styles are another part of React Native that looks similar to React, but work a little differently. If you’re already using CSS-in-JS, then you’ll have no problem making the switch. React Native styles look and feel like CSS, but you will notice you do not have certain CSS features such as media queries or nth-child. But don’t worry — these features can be implemented with JavaScript or by using a third-party library, like react-native-extended-stylesheet, that has already solved this for you.
If there is no concept of CSS in React Native, how does our CSS-in-JS actually work? Let’s take a look at a library called Yoga.
“Yoga is a cross-platform layout engine which implements Flexbox.” The library is written in C/C++ so that it can be cross-platform. Yoga is not restricted to React Native and can be used in other UI frameworks, too. Note that not all parts of React Native are this isolated. Many other CSS-like aspects implemented in React Native are specific to React Native and are not packaged as external dependencies, like Yoga.
React Native’s website has code playgrounds built into its documentation, and they run in the web browser with no setup needed. I highly recommend you visit the website and play around with styles in React Native. This is the best way to get a grasp, and be amazed with, how much you already know in React Native.
3. NPM Packages
Most of your favorite tooling found on NPM is going to work with React Native. Yay! As mentioned before, React Native has no DOM. Therefore, any NPM libraries that rely on the DOM will not work with React Native. Our biggest loss here is going to be UI libraries. Various libraries that give us pre-formatted form fields with error handling, validation and other nifty features are not compatible with React Native.
On the brightside, we do get our favorite state management libraries we’re using with React on the web. This is one of the major benefits of coming to React Native with a background in React. You know how to work with data and how to handle async callbacks. It works just the same in React Native. It is even possible to package your state management business logic in a private NPM package and share it between your React and React Native solutions!
Take a look at React State Museum written by my colleague Gant Laborde. It contains multiple examples of state management solutions that work in both React and React Native.
Native Layer
When setting up React Native, we touched a little bit on the native tooling when mentioning Xcode and Android Studio. Where else will we have to dive into native development?
React Native has grown in popularity over the last several years and has a thriving ecosystem. When it comes to a device’s native features, such as camera, many third-party React Native wrappers have been created for existing cocoapods and gradle packages (which are iOS and Android’s third-party packages systems, respectively). These wrappers contain the bridge between native code and JavaScript. They let you bypass the need to know the underlying native stack and continue building your application.
One drawback to these wrappers is that they may not be designed for your specific needs. In this case, you will need to extend the native wrapper by adding or editing the native code found in the wrapper. For a real life example from Infinite Red, we needed the ability to select a specific number of files to upload in our app. The available file upload wrappers we found did not have this feature, so we had to extend the library and write some native code to support it.
Again, this is when you’ll need some serious native talent to get the work done. Depending on your team’s size and needs, you may have a native developer on staff or you may need to look outside your team to a consultant. If you end up having to look outside your team for additional talent, Infinite Red does consulting as well.
Deploying
Deploying a website is easy, fast and hassle-free compared to other types of software. When deploying a React Native application, you’ll need to submit it to the Apple App Store and Google Play Store. In order to do this, you’ll need to purchase a developer license for each store.
In addition, the different stores have different guidelines, requirements and approval processes for your application. Apple is much stricter than Google when it comes to accepting an application. It is strongly recommended that you review Apple’s guidelines before getting too far down the road designing and building your application. You may need to update your app accordingly. You can review Apple’s guidelines here.
Mobile applications are more like traditional software. Publishing updates and bug fixes may present unique challenges, as users may be on an old version of your application. When having software installed on a physical device, there are no quick code pushes that can be deployed to the server and downloaded on the next page refresh. This makes hunting down bugs more difficult, in addition to the different versions and devices running iOS and Android. However, a new market is forming for tools that help with bug tracking and hot code pushes. Various services, such as Bugsnag and Sentry (who sponsor Chain React), make it easier to ship updates and bug fixes to your users.
Give it a go
If you or your team is familiar with React on the web, you should take a serious look at React Native. Yes, at some point you’ll likely need someone with some serious native chops to get you through a particularly tricky feature or nasty bug, but you can see how much knowledge transfers over (and you can always hire Infinite Red to do the hard parts!). If you’re good at React, you’re going to be good at React Native.
AJ Robertson is a React Native trainer and software engineer at Infinite Red. Utilizing his degree and experience, AJ creates better products informed by how people actually use and build apps. Please clap, follow, and tweet @codeithuman to learn more.
Interested in bringing your team up to speed with engaging, hands-on React Native training? Infinite Red Academy is just that! Learn more at https://academy.infinite.red/.
