Learning React Native

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.

Note

If you’d prefer to dig into the development process and see React Native in action, feel free to jump ahead to the next chapter!

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, first we’ll need to recall one of React’s features, 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 by using an in-memory version of the DOM, and rerenders the minimal amount necessary. Figure 2-1 shows how this works.

Figure 2-1. Performing calculations in the Virtual DOM limits rerendering ...