LearnAn Introduction to React Native

Amit Bijlani
writes on March 17, 2017

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

So what is the difference between React and React Native? React was originally created for web user interfaces. The mantra behind React has been “Learn Once, Write Anywhere”.

Facebook’s goal has been to “be able to develop a consistent set of goals and technologies that let us build applications using the same set of principles across whatever platform we want.”

Given this overarching goal they set out to apply the same set of principles 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 that if you understand how to build a React Native app for iOS, you understand how to build a React Native app for Android. It’s learn once, write anywhere.

Libraries like Phonegap provide a wrapper around a web user interface using HTML, CSS and JavaScript. React Native instead provides a virtual DOM representation which then renders native controls. React Native is able to take native platform components like sliders, switches, labels, tab bars and wrap them in React component counterparts.

ECMAScript 6

To install React Native follow the instructions on their website. If you are writing an iOS app then you will need a Mac so you can run Xcode, after all we are creating a native app.
Once React Native is installed and you have created a sample project you will notice two separate index JS files for each platform: index.ios.js and index.android.js.

Let’s take a look at the index.ios.js file:

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from 'react-native';
export default class MyProject extends Component {
 render() {
  return (
   <View style={styles.container}> 
    <Text style={styles.welcome}>
     Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.ios.js 
    </Text>
    <Text style={styles.instructions}>
     Double tap R on your keyboard to reload,{'\n'}
     Shake or press menu button for dev menu
    </Text>
   </View>
  );
 }
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
},
 welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
},
 instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
 },
});

AppRegistry.registerComponent('MyProject', () => MyProject);

The first thing you will notice is some strange JavaScript syntax if you have not already seen this. This is ECMAScript 6 or ES6 which is the new version of JavaScript has a lot of new JavaScript language features like class syntax, destructuring, properties, etc. (Check out this link for a full list of features: http://es6-features.org/)

Let’s take a look at the second import statement.
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

ES6 provides short form for declaring variables called destructuring.

The above statement could have been written individually as:
var ReactNative = require('react-native');
var AppRegistry = ReactNative.AppRegistry;
var StyleSheet = ReactNative.StyleSheet;
var Text = ReactNative.Text;
var View = ReactNative.View;

As you can see the ES6 feature of destructuring saves a lot of typing and lines of code.

export default class MyProject extends Component {

Yet another ES6 feature which allows you to create objects from class definitions. Here our class MyProject is inheriting from the React frameworks class Component. A component lets you split your user interface into independent units which can be easily reused.

Next the render function returns React elements describing what should be displayed on screen. Finally, you must have noticed some syntax that looks like HTML markup.

For example:

<View style={styles.container}>
 <Text style={styles.welcome}>
  Welcome to React Native!
 </Text>
</View>

This syntax is called JSX, which is an extension to JavaScript. React uses it to describe what the user interface should look like.

Components

React is based on a component architecture. Every UI element is a component which can be styled and backed by a data source.

Going back to our previous example:

<View style={styles.container}>
 <Text style={styles.welcome}>
  Welcome to React Native!
 </Text>
</View>

Here React Native takes this virtual DOM representation and renders native components. The View renders a UIView for iOS and native View in Android. And it looks at Text and renders a UILabel for iOS and TextView for Android.

Hence the reason that it is called a virtual DOM because it is a generic representation of what your UI will look like independent of the two platforms. React Native then renders the native control based on your UI markup.

Each component has a style attribute as well, which can be defined either within the same file or completely in a separate file. The stylesheet provides CSS style syntax and uses Flexbox for layout. Flexbox provides an efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic. Using Flexbox for layouts provides a major benefit because layout engines on mobile platforms are a pain to work with, especially for complex layouts.

State

No article about React or React Native would be complete without talking about state. A component has types of data binding: state and props. Think of props as properties of a component which are defined when creating a component. For example, the text for a label or image URL for an image component. These remain fixed throughout the life of a component.

On the other hand, state is dynamic and can drive what content needs to be displayed within a component. For example, you download data and populate a list. Or create a list of tasks using a ListView which can be dynamically updated as tasks are created, updated or deleted without having to re-render the UI manually or even having to keep track of the UI elements.

Conclusion

React Native is not very different from React. If you have learned the former then it’s fairly easy for you to create a mobile app using React Native. Some knowledge of the native UI components would be helpful so you understand how to use them and understand their limitations.

React Natives benefits over native iOS development are: fast app iteration, modern JavaScript and clear style rules similar to CSS. And not to forget Flexbox for UI layout.

There are lots of React-related courses on Treehouse. The React Basics course can help you get started with React. My React Native for iOS workshop is helpful for those that are already familiar with React and want to learn how to build an iOS app. Finally, the Learn React discussion panel is a great place to start if you are on the fence about React.

The Updated Absolute Beginner’s Guide to Swift

4 Responses to “An Introduction to React Native”

  1. Justin Houghton on July 20, 2017 at 5:27 pm said:

    I am a mobile UX designer who is currently working on designing an app that has been coded in react native/ruby. So far, the engineering team has had a hard time taking elements from my design and translating them into code. (They focus more on backend than front-end work) That is to say, the details a designer cares about the most (spacing, size and position) have not been a huge priority.

    I would like to be able to go into the script and adjust the layout/styling. I would love to get your thoughts on what specific tracks / courses can get me to that point quickly.

    I am working through the Beginner JavaScript track right now (having already finished the JavaScript basics course) and was going to finish the whole track and then start taking the React Basics course.

    Are there any courses in the JavaScript track that wouldn’t necessarily help me get closer to understanding basic react native? I plan to go through everything eventually, (the more you know the better) but I am just curious.

  2. Thank you for this tutorial! I think it’s great that you pointed out how similar React is to React Native. The most amazing part about React Native is that you can learn once and write everywhere.

    If anyone really wants to get in-depth with React Native from beginning to deployment, check out my course. I truly believe anyone can learn and deploy an iOS and Android app within a week 🙂

  3. Main problem of this article is that it doesn’t actually introduces anyone to React Native.
    It talks about ES6 mainly, and overall React things later. Also, it has factual errors: You actually now can use react native without Mac (see create-react-native-app — https://github.com/react-community/create-react-native-app).

    • Well you need a mac to run the ios emulator or ios device. You can develop the thing on any platform. So technically not a actual error in article.

Leave a Reply

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more