The idea of writing mobile applications in JavaScript feels a touch 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 need to look and therefore the work done to truly render your application onto the
page.

To render interactive user interfaces during 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 big impact on performance.

Rather than directly render changes on the page, React computes the required changes in-memory and re-renders the minimal amount necessary.

how this works.

In the context of React on the online , most developers consider the Virtual DOM as a
performance optimization.

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 therefore the actual rendering exposes tons of interesting possibilities.

What if React could render to a target aside from the browser’s DOM? After all, React already “understands” what your application is meant to seem like.

Indeed, this is often how React Native works, Instead of rendering to the browser’s DOM, React Native invokes Objective-C APIs to render to iOS components, or Java APIs to render to Android components.

This sets React Native apart from other cross-platform app development options, which frequently find yourself rendering web-based views

React can render to different targets

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 describes how they should look. 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.

The core React Native project supports iOS and Android. Because of the abstraction
layer provided by the Virtual DOM, React Native can target other platforms, too—
someone just needs to write the bridge.

For example, there are community implementations of React Native for Windows and Ubuntu, so you can also use React Native to create desktop applications.

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: How Does React Native Work

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password