Chapter 2. Working with React Native

In this chapter, we’ll cover the bridge, and review how React Native works under the hood. Then, we’ll look at how React Native components differ from their web counterparts, and cover what you’ll need to know in order to create and style components for mobile.


If you’d prefer to dig into the development process and see React Native in action, feel free to jump ahead to Chapter 3.

How Does React Native Work?

The idea of writing mobile applications in JavaScript feels a little odd. How is it possible to use React in a mobile environment? In order to understand the technical underpinnings of React Native, we first need to recall one of React’s concepts: the Virtual DOM.

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 your application 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 in-memory and rerenders the minimal amount necessary. Figure 2-1 shows how this works.

Rendering to the browser with the Virtual DOM
Figure 2-1. Performing calculations in the Virtual DOM limits rerendering in the browser’s DOM

In the context ...

Get Learning React Native, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.