React For Mobile App
How React Native works?
The Virtual DOM in React
In React, the virtual DOM acts as a layer between the developer’s description of things ought to look and work done actually to render them onto the page. To render interactive user interfaces in a browser, a developer must need to edit the browser’s Document Object Model(DOM). This process is a little bit expensive, and excessive writes to the DOM leads to the performance errors. Rather than directly rendering changes on the page, React computes the necessary changes by using an in-memory version of DOM.
Extending the Virtual DOM
The Virtual DOM certainly has performance benefits, but its real potential lies in the power of its abstraction. What if React could render to a target other than the browser DOM? Why should the React be limited to a browser? React “understands” how your application supposed to look like. The conversion of that ideal to actual HTML elements on the page should be replaced by some other step. During the first two years of React’s public existence, some spectators noticed this intriguing possibility. For an instance, Netflix modified React, so that they could render a huge variety of platforms including televisions and DVD players. Then at React conference, Facebook has announced a new library called React Native that does same for iOS and android, allowing React to render natively on mobile platforms.
What does it mean to render natively? In React for the web, this means it renders to browser DOM. With React Native, native rendering means, it renders using native APIs for creating views.
WHY USE REACT NATIVE?
One of the first thing people ask after learning React Native is, how it relates to standard, native platform development. How should the user make the decision of using React Native or not?
– At the beginning, Facebook only developed React Native to support iOS. However, with its recent support on Android operating system, the library can now render mobile UIs for both the platforms.
React is still new but it’s maturing quickly and Facebook has stated its plans to continue investing its growth.
- It offers third-party plugin compatibility and less memory usage: Third-party plugins means a user need not rely on a WebView for certain functions. For instance, if you are adding Google maps functionality to your app, React Native app let’s the user link the plug-in with a native module, so, the user can link-up the map with the device functions like zoom, rotate, and the compass by using less memory.