React and React Native – A brief introduction

React is a framework and used for data-driven web interfaces. React is created by Facebook. React provides a component driven architecture which uses a declarative syntax and is easily extensible.

What is the difference between React and React Native? 

React was created for web user interfaces. “Learn Once, Write Anywhere” is the mantra behind React. The set of principles given in React such as the virtual dom, stateful components, layout engine, and many others to the iOS and Android platforms.

The benefit of React and React Native is learning once and writing anywhere. If you understand how to build a React Native app for Android, you understand how to build a React Native app for iOS. React Native provides a virtual DOM representation that renders native controls. React Native takes native platform components like sliders, labels, tab bars, switches, and wrap them in React component counterparts. 

React uses web components as building blocks whereas React Native uses native components. If you already know React, still you need to learn React-Native stuff like the native components. To understand the basic structure of a React Native app. We need to learn some of the React concepts like JSX, state, components, and props. React Native uses the same design as React, letting you compose a rich mobile UI from declarative components. It lets you build mobile apps using only JavaScript.

Why do we need to go for React-Native?

React Native is built around a rich ecosystem. This is made possible with the help of fellow developers’s willingness. It is well documented and has plenty of plugins available for ease of use. It also has plenty of packages for easy usage. Last but not the least it is Javascript.

Build native mobile apps:

import React, { Component } from 'react';

import { Text, View } from 'react-native';

class Sample extends Component {

  render() {

    return (

      <View>

        <Text>

          Hi, Basic app using React-Native framework.

        </Text>

        <Text>

          In React-Native, we will use native components like 'View' and 'Text',

          Where in React we use web components like 'div' and 'span'.

        </Text>

      </View>

    );

  }

}

A React Native helps us build the real mobile app. You build a real mobile app that is the same as from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. We just put those building blocks together using JavaScript and React.

import React, { Component } from 'react';

import { Image, ScrollView, Text } from 'react-native';

class ScrollingImageWithText extends Component {

  render() {

    return (

      <ScrollView>

        <Image

          source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}

          style={{width: 320, height:180}}

        />

        <Text>

          On iOS, it uses native UIScrollView.

          On Android, it uses a native ScrollView.

          On iOS, native UIImageView.

          On Android, native ImageView.

        </Text>

      </ScrollView>

    );

  }

}

React Native lets us build our app faster. Instead of building and recompiling the app, we can instantly reload our app. We can even run new code while retaining your application state. 

Optimise with Native code:

If we need to optimize a few aspects of our application, it is also easy to build part of our app in React Native, and part of your app using the native code directly. Facebook app works the same.

import React, { Component } from 'react';

import { Text, View } from 'react-native';

import { TheGreatestComponentInTheWorld } from './your-native-code';

class SomethingFast extends Component {

  render() {

    return (

      <View>

        <TheGreatestComponentInTheWorld />

        <Text>

          We could use native Objective-C, Java, or Swift - the product development process is the      same.

        </Text>

      </View>

    );

  }

}

Conclusion:

In this post we have seen a brief introduction about React and React Native. We have seen some of the reasons to use the new developing technology and ways to optimise the app development process through them. In an another post we will see in detail about some upcoming technologies.

–
Prakash B,
Android Development Team,
Mallow Technologies.

 

P.S: Cover image courtesy – Codefluegel.com