An Android Developer’s Roadmap to React Native : Part 1

Do you want to build more with less code? Lets start with react native

I have been developing Android applications for about two years now. And truth be told, I started getting a little bored writing Android code. Dagger and architecture patterns like MVP do spice things up a bit but still writing Android code can be tiresome.

I recently got a chance to look into react native : a framework for developing cross platform apps. This means that you can develop applications for several platforms (like iOS and Android ) using the same code-base. And, actually it is quite promising. As an Android developer I faced several difficulties while getting familiar with react native. There is a lot to learn in React Native and if you are someone like me, moving from native to react native, you will definitely be surprised by how different things are in React Native.

So I decided to create a series of articles to share what I have learnt and help you get running with react-native, discussing the problems I faced, relevant articles to look at when learning react native and what path to follow. This is the first part where I will be introducing basic concepts of React, React Native and their similarities.

React :

React is a JavaScript library for building user interfaces.

But what kind of user interfaces? Actually react is more like a programming paradigm for creating user interface elements. So it does not matter what you are building for. It can be web, mobile or even windows. React describes user interface elements in the form of components. Each component has a state and props. The state controls the rendering of the component. Every time the state of the component changes it is re-rendered. The props can be considered as the properties of the component. The props control the style and behavior of the component, like controlling what happens when the component is clicked or scrolled or what text is displayed in the component.

/* 
An example of component in React. Here Square is a react component with an initial state defined in constructor. 
*/
class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value,
    };
  }

  render() {
    return (
      <button className="square" 
        onClick={() => this.props.onClick()}>
        {this.props.value}
      </button>
    );
  }
}
/*
Usage of above defined component. Note how the props value are set when using the square component and are directly used when rendering the button in square component 
*/
renderSquare(i) {
    return (
      <Square
        value={i}
        onClick={() => alert('click')}
      />
    );
  }

Lets take a few seconds to know what is happening in the code above. Square is a React component that we have defined and it renders a button with text set as this.props.value and a click event handler as this.props.onClick . These props are set when the Square component is used in the renderSquare function. This example considers rendering of several squares where i is the index of the square. The prop value is then set as the index of the square. Thus the text of the button in the Square component will be set according to the prop value that we set when defining the Square component.

Another thing to note is the state that we have defined for the component in the constructor. Whenever the state of a component changes it is re-rendered. And here lies the power of React. Consider a web page with several React UI components. Now, the user interacts with a particular component causing some of the UI elements to change. React itself maintains a virtual tree of views (virtual DOM) that are being currently rendered. If a few elements of the view tree change, React compares the original view tree and the modified view tree and only re-renders the components that have changed. This is made possible by the virtual DOM and the per component state. So you just change the state of the component and React automatically handles its rendering cycle.

Hey, enough already with React. I came here for React Native and we have not talked anything about it.

Enter, React Native

As I said before, React Native helps you develop mobile applications for several platforms using the same code. Here is what their GitHub repo says:

A framework for building native apps with React. Learn once, write anywhere: Build mobile apps with React.

React Native actually uses React internally to create mobile apps. Hah, a relief, all that knowledge about React components is not a waste after all. Actually, from the perspective of writing code, React Native is almost equivalent to React. Once you get familiar with React, React Native will come easy.

Also note that React Native is a framework that connects the code that you write, with the platform for which you are developing the application. This is done through a bridge that converts React Native components into corresponding native platform UI elements. For example, a React Native component for button will render Android native button on Android platform and an iOS native button on iOS platform. We will not discuss how this bridge works, for you will not need to know it as well if your aim is to develop simple React Native applications. From the perspective of a developer using React Native, putting it all together in simple terms:

React Native is a collection of React components packaged together that can be used to create user interfaces on several platforms using React and JavaScript.

Enough talk, show me the path

If you want to start developing in React Native you need to learn JavaScript first. React and React Native is all JavaScript. Mastering JavaScript is not necessary, but learn just enough to help you understand JavaScript code so that you can yourself make out what is written in the documentation and you can develop JavaScript skills along the way. Read this article for quick introduction to JavaScript.

Along with JavaScript you need to familiarize yourself with JSX. For starters, JSX is an extension to JavaScript that allows you to code your UI in markup syntax right inside JavaScript. React documentation gives a good small introduction to JSX which you can find here.

React Native supports ES6 and ES7 which adds several useful features to JavaScript. You can have a look at these in this section of React Native documentation.

Another thing you need to get familiar with is the Node Package Manager. NPM manages all the dependencies for your React Native project. This article should provide you with enough knowledge to maintain your project dependencies.

As for learning React, the React documentation is a good place to start. The docs and tutorial do a good job explaining you the concepts of React. For React Native, the documentation can be a bit overwhelming, but still is a good place to start.

This article was aimed at explaining you the core concepts and provide a kick-start to your React Native journey. As I said, there is lot to learn in React Native. In upcoming articles we will be discussing more advanced concepts like Redux and help you integrate your React Native application with an existing iOS or Android application.