LearnAn Introduction to React Native

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.

https://blog.teamtreehouse.com/an-absolute-beginners-guide-to-swift-2-0

• framework
• react
• react native
• tutorial
• web interfaces