Home React Js Introduction to React Js

Introduction to React Js

by Sudhir kumar
Introduction to React Js

React is a Javascript library for building user interfaces. Open-sourced by Facebook in 2013, it has been met with excitement from a wide community of developers. Corporate adopters have included the likes of Netflix, Yahoo!, Github, and Codecademy. Users praise React for its performance and flexibility, as well as its declarative, component-based approach to building user interfaces. As one might expect, React was designed for the needs of Facebook’s development team, and is therefore suited
particularly well to complex web applications that deal heavily with user interaction and changing data.
In January of 2015, the React team announced a new project: React Native. React Native uses React to target platforms other than the browser, such as iOS and Android, by implementing a so-called “bridge” between Javascript and the host platform.
It promises web developers the ability to write real, natively rendering mobile applications, all from the comfort of a Javascript library that they already know and love.

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!

HTML, JavaScript, & Bootstrap – Certification Course[100%OFF]

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 this section, we will explore the technical underpinnings that enable React Native. We will first need to recall one of React’s features, the Virtual DOM, and understand how it relates to React Native for mobile.

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.

The Virtual DOM in React


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
gave it a large performance advantage over existing Javascript frameworks, especially when dealing with changing data or otherwise render-intensive applications. (Since then, React’s model for DOM updates has started to be adopted by other frameworks, such as Ember.js’s new Glitter engine, though React maintains a stronglead when it comes to performance.)

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

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 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

Leave a Comment

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy