particularly well to complex web applications that deal heavily with user interaction and changing data.
How is this possible? And perhaps more importantly — how can you take advantage of it?
In this article, we will start by covering the basics of React Native and how it works. Then, we will explore how to use your existing knowledge of React to build complex mobile applications with React Native, taking advantage of host platform APIs such as geolocation, the camera, and more. By the end, you will be equipped with all the necessary knowledge to deploy your iOS applications to the App Store.
Though we will be focusing on iOS-based examples, the principles we will cover apply equally well to React Native for Android and other platforms.
Are you ready to write your own mobile applications using React? Great — let’s get started!
How Does React Native Work?
The Virtual DOM in React
In React, the Virtual DOM acts as a layer between the developer’s description of how things ought to look, and the work done to actually render them onto the page. To render interactive user interfaces in a browser, developers must edit the browser’s DOM, or Document Object Model. This is an expensive step, and excessive writes to
the DOM have a significant impact on performance. Rather than directly render changes on the page, React computes the necessary changes by using an in-memory version of the DOM. It then re-renders the minimal amount of your application necessary.
Figure 1-1. Rendering with the VirtualDOM
In the context of React on the web, most developers think of the Virtual DOM primarily
as a performance optimization. Indeed, the Virtual DOM was one of React’s early claims to fame, and most articles discussing React’s benefits mention performance and the Virtual DOM in the same breath. This focus makes a lot of sense, given the context. At the time of React’s release, the Virtual DOM approach to rendering
Extending the Virtual DOM
The Virtual DOM certainly has performance benefits, but its real potential lies in the power of its abstraction. Placing a clean abstraction layer between the developer’s code and the actual rendering opens up a lot of interesting possibilities. What if React could render to a target other than the browser DOM? Why should React be limited to the browser? After all, React already “understands” what your application is supposed to look like. Surely the conversion of that ideal to actual HTML elements on the page could be replaced by some other step.
During the first two years of React’s public existence, some onlookers noticed this intriguing possibility. Netflix, for instance, modified React so that they could render to a huge variety of platforms including televisions and DVD players. Flipboard demonstrated how to render React to the HTML
This is all possible because of the “bridge,” which provides React with an interface into the host platform’s native UI elements. React components return markup from their render function, which instructs React how to render them. With React for the web, this translates directly to the browser’s DOM. For React Native, this markup is translated to suit the host platform, so a might become an iOS-specific UIView.
While the projects from Flipboard and Netflix are not affiliated with React Native, the basic idea is the same. Flipboard has essentially built a bridge from React to the HTML5