[React Native][Part 2]: The “shoe” app

Everything is in place now, time to start the work!

Let’s navigate to the directory where we initialized the shoe app:

cd Shoes

# directory  listing
ls -F

screen-shot-2016-10-19-at-10-13-29-pm

We have got several files here. T0 give possibility to distinguish the code based on the version used, we have 2 entry scripts: index.ios.js and index.android.js which will be parsed and executed based on the corresponding app platform.

This is how the default index.ios.js script would look like:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from 'react-native';

export default class Shoes 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}>
 Press Cmd+R to reload,{'\n'}
 Cmd+D or shake 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('Shoes', () => Shoes);

We can notice here that our script consists from several sections.

In the top we are importing couple of components which will be needed to run the script. Some components are imported from react, while others from react native modules.

  • AppRegistry
    will be used at the end of the file to register the entry script
  • StyleSheet
    We are able to define the stylesheet rules by using StyleSheet.create() and passing object of styles as argument
  • View
    This components acts like container to our app
  • Text
    Label components, accepts styling

You will notice also that the default class has render() function which is supposed to return the objects to be parsed and rendered in the native app.

Notation used in return statement of render function() is called JSX – a Javascript syntax extension which make it look like XML. Of course you don’t have to write using JSX and can use a plain javascript, however JSX will be much more comfortable.

You can read more about JSX here:

https://facebook.github.io/react/docs/jsx-in-depth.html

As mentioned in the previous section, we will use the following command to run our code as we developer:

react-native run ios

Building the Home Page

We will start by creating a folder called src in our project root.

screen-shot-2016-10-19-at-10-34-33-pm

Within the src/ folder we will place our Home page script called home.js. In addition, let’s create a file called shoes.js which will be our root components which can be used both within index.ios.js and index.android.js. This is what I expected to have at this point:

src/
|__  src/shoes.js
|__  src/home.js

Let’s start working on our beautiful home page. At this point I would like to achieve a blank page with some text in the middle, let’s say “Hello world!”. This won’t be a great achievement in comparison to what was already generated in index.ios.js, however it will give as an ideas about how to better organize the code and wrap the default components into more complex reusable components.

This is how my home.js file would look like at this point:

screen-shot-2016-10-19-at-10-51-29-pm

 

In the shoes.js file we would like to refer to import home.js file and import it:

screen-shot-2016-10-19-at-10-51-52-pm

At this point we have got the Shoes components ready and it’s using the Home component. Placing <Home/> tags within the Shoes component indicates that rendering Shoes component, will require to instantiate and render Home components. All we want to do now in index.ios.js is to include the Shoes component and set it as an entry point to our app.

screen-shot-2016-10-19-at-10-51-38-pm

Now, try to run using:

react-native run-ios

screen-shot-2016-10-19-at-10-52-08-pm

Great ! First step accomplished, we got something working!

Majd Arbash

Leave a Reply