Check out myAngular article series with live demos

Getting started with React Native

Torgeir "Tor" Helgevold
- JavaScript Developer and Blogger
Published: Thu Apr 23 2015

In a previous post I showed how to use React to create both client side and server side web components. In this post I will demonstrate how to use React Native to create an IOS application.

Obviously web and IOS are completely different runtime environments, but since React acts as a layer of abstraction, it is able to bridge the gap between different technologies. This abstraction is key to cross platform development since it allows us to map React to any supported platform.

Here are the required steps:

Use npm to download the React tools and bootstrap your application by running the below commands:

npm install -g react-native-cli react-native init [NameOfYourApplication]

You will need xcode to test your application in the IOS simulator, but you may use any editor to write React code. The entry point for the React code is a generated file called index.ios.js.

The code below shows index.ios.js and an included greeting component.

index.ios.js

'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var Greeting = require('./greeting'); var GreetingApplication = React.createClass({ render: function() { var name = 'Jim Smith'; return ( <View> <Greeting name={name}></Greeting> </View> ); } }); AppRegistry.registerComponent('GreetingApplication', () => GreetingApplication);

greeting.js

'use strict'; var React = require('react-native'); var {Text,StyleSheet} = React; module.exports = React.createClass({ render:function(){ return (<Text style={styles.greeting}>Greetings, {this.props.name}!</Text>); } }); var styles = StyleSheet.create({ greeting: { fontSize: 20, margin: 30, color:'#fff' }

This is essentially all you need in order to bootstrap a React Native application.

To test the application in the IOS simulator follow these simple steps:

1) Open a terminal and run the command:

npm run start

2) Open the generated xcode project (NameOfYourApplication.xcodeproj) and press play.

The application should now launch in xcode and display a greeting.

If you liked this article, it to your friends.

I also invite you to follow me on twitter