Let's talk about the directories and structure of a new application created by the React Native CLI.

Project

If you take a look in the files the React Native CLI has created, you can see there are three folders:

  • ios
  • android
  • node_modules

If you are familiar with Node, you know what the node_modules folder is. This is where all the npm packages are located. Remember, React Native is also an npm package and it's located here, along with all the other npm libraries our app uses.

ios and android contain the iOs and Android projects. They are standard projects for ios and android, and you can run them by using xCode or Android Studio, respectively.

package.json

If you have worked with javascript and npm packages you should probably know what package.json is. This file contains metadata about your project, such as version, dependencies, scripts, and so on. 

{
  "name": "projectStructure",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.3.2",
    "react-native": "0.37"
  }
}

index.ios.js // index.android.js

You might ask yourself why we have two files: one for Android and another for iOs? As we said before, we can have specific files for each OS. Let's take a look at these files: 

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

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

class MyFirstProject 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('MyFirstProject', () => MyFirstProject);

Both files are identical initially. Even though they identical, we need to have one for each platform. These are the entry points for any React Native app.

Looking at the file: we start with imports. We import React as well as React Native. The components from React Native are imported here, and they should be explicitly mentioned. View and Text are React Native Components. 

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

We have a class which extends from Component in React. This is interesting and important. We have only implemented the render method which return the components we previously imported. Some important things here:

  • The return method must return only one component. If you have more than one component, it should be nested in a <View> component.
  • If you are not using () after your return statement, the component should start on the same line as the return statement. 
class MyFirstProject 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>
    );
  }
}

As we can see, <View> and <Text> are very easy to use and we can pass style to them as an attribute. Let's see how we can style our components.

React Native lets you style each component by using their StyleSheet library. According to the documentation, it's nothing more than an abstraction similar to CSS StyleSheets. You can use stylesheets directly for each component without creating a StyleSheet , similar to using inline CSS in web development, but this is discouraged. In terms of performance , it's always better to make stylesheets from a style object. With this we can refer to it by ID, instead of creating a new style object each time. We are using Flexbox. 

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,
  },
});

Finishing our code, we have the following line: 

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

AppRegistry is the entry point for all React Native code. The app root component should register itself with AppRegistry.registerComponent , then the native system can load the bundle for the app and call AppRegistry.runApplication .

Now, you know everything about our first helloWorld app. Next, let's create some actions and buttons and improve it a little bit!

Resources