Keep It Up with React Native

React can be used as a base in the development of single-page or mobile applications. Complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API

History

In 2012 Mark Zuckerberg commented, “The biggest mistake we made as a company was betting too much on HTML5 as opposed to native”. He promised that Facebook would soon deliver a better mobile experience.

Inside Facebook, Jordan Walke found a way to generate iOS UI elements from a background JavaScript thread. They decided to organize an internal hackathon to perfect this prototype in order to be able to build native apps with this technology.

After a few months of development, Facebook released the first version for the React.js Conf 2015. During a technical talk,Christopher Chedeau explained that Facebook was already using React Native in production for their Group App and their Ads Manager App.

Working principles

The working principles of React Native are basically the same as React except that it is not manipulating the DOM via the VirtualDom but some native views. It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native platform via a serializable, asynchronous andbatched Bridge.

It can be seen that Facebook corrected the error that Mark Zuckerberg mentioned in 2012: React Native doesn’t rely on HTML5 at all, everything is written in JavaScript, and relies on native SDKs.

Basic usage

The following is a rudimentary example of React usage in HTML with JSX and JavaScript.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

Virtual DOM

Another notable feature is the use of a “virtual Document Object Model”, or “virtual DOM”. React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser’s displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render sub components that actually change.

Lifecycle methods

Lifecycle methods are hooks which allow execution of code at set points during the component’s lifetime.

• shouldComponentUpdateallows the developer to prevent unnecessary re-rendering of a component by returning false if a render is not required.
• componentDidMountis called once the component has ‘mounted’ (the component has been created in the user interface, often by associating it with a DOM node). This is commonly used to trigger data loading from a remote source via an API.
• renderis the most important lifecycle method and the only required one in any component. It is usually called every time the component’s state is updated, reflecting changes in the user interface.

JSX

JSX (JavaScript eXtension) is an extension to the JavaScript language syntax. Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers. React components are typically written using JSX, although they do not have to be (components may also be written in pure JavaScript). JSX is similar to another extension syntax created by Facebook for PHP, XHP.

An example of JSX code:

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

Nested elements

Multiple elements on the same level need to be wrapped in a single container element such as the <div> element shown above, or returned as an array.

Attributes

JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component. All attributes will be received by the component as props.

JavaScript expressions

JavaScript expressions (but not statements) can be used inside JSX with curly brackets {}:

<h1>{10+1}</h1>

The example above will render

<h1>11</h1>

Conditional statements

If–else statements cannot be used inside JSX but conditional expressions can be used instead. The example below will render { i === 1 ? ‘true’ : ‘false’ } as the string ‘true’ because i is equal to 1.

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}

Functions and JSX can be used in conditionals:

class App extends React.Component {
  render() {
    const sections = [1, 2, 3];
    return (
      <div>
        { 
          sections.length > 0
            ? sections.map(n => <div>Section {n}</div>)
            : null
        }
      </div>
    );
  }
}

Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers.This processing is generally performed during a software buildprocess before the application is deployed.

Reference Websites : Wikipedia