Beginners Guide to Create React Native Application

React Native makes it possible to create native iOS and Android mobile apps without knowing any iOS or Android programming. I will guide you through the necessary setup to develop React Native Apps. 

At the end of this tutorial, we will create a login view for the iOS application so nothing is more complicated. But we will be walking through a primary installation process. In this application, we are building an iOS app. So a MAC computer is a minimum requirement.

Beginners Guide to Create React Native Application.

We will start our project by setting up the development environment.

Setup React Native Environment.

First, we need to install the homebrew to install other dependencies smoothly on Mac.

Step 1: Install Homebrew

Open the terminal and hit the following command.

/usr/bin/ruby -e "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 2 – Install Watchman.

After installing the homebrew, it is easy for us to pull the other mac dependencies easily. For example, type the following code to install Watchman.

brew install watchman

Step 3: Install React Native.

Now, run the following code to install React Native globally on your mac.

sudo npm install -g react-native-cli

Step 4: Install XCode.

You can install XCode on this URL: https://itunes.apple.com/us/app/xcode/id497799835

Step 5: Create First React Native App.

Okay, now go to the desktop or any other one of your project folders and create a boilerplate for our React Native application.

react-native init AwesomeProject

After installing the project, go into that project and start the server.

cd AwesomeProject

react-native run-ios

It will open up the iOS emulator like this.

We can now open the iPhone simulator since we have downloaded the XCode, and we can now edit the code in the App.js file, reload the iPhone screen, and see the changes are updated.

Also, one development server is running on our terminal like this.

It will help us in live reloading the server and stuff like that. So keep it open; never close it. After compiling the project, we will see our main terminal as something like this.

Now, open the project in your favorite editor. I am using Visual Studio Code. It has excellent support on React Native. So I highly recommend it to you as well. If you are new to VS Code, then check out my below Tutorial.

Related Tutorial: How to install visual studio code on mac.

To open our code in Visual Studio Code. Just type the following command inside AwesomeProject.

code .

The folder structure of Our application looks like below.

Step 6: Create a components folder inside the root.

We need to show the login view, which is why first we are creating the Login.js view inside the components folder.

So let us create a components folder.

mkdir components
cd components

Inside the component, create a new file called Login.js. 

// Login.js

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

const styles = StyleSheet.create({
    image: {
        width: 100, 
        height: 100,
        alignSelf: 'center'
    },
    input: {
        height: 50,
        width: 200,
        marginTop: 30,
        padding: 4,
        fontSize: 18,
        borderWidth: 1,
        borderColor: 'green'
    }
});

export default class Login extends Component {

    render() {
        return (
            <View>
                <Image
                    style={styles.image}
                    source={require('../images/login.png')}
                />
                <TextInput style={styles.input} 
                    placeholder="Username"
                />
                <TextInput style={styles.input} 
                    placeholder="Password"
                    secureTextEntry={true}
                />
            </View>
        )
    }
}

Here, first, I have imported the React component. Then I introduced some form elements from react native framework.

As a regular React.js component, the Login component has render() method that outputs the design of our application. We use the Text, TextInput, View, and Image components.

There are lots of other ready-made components that you can use in the react native project. But in this app,  we need these components to render the application.

In React Native, this is how we can style a particular element. We assign the key to that element referenced here concerning their styles.

Step 7: Import Login.js inside App.js.

To see this design inside iPhone Simulator, we must import it into an App.js file.

// App.js

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

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

import Login from './components/Login';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Login />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

After saving the file, you will see the screen below if you open the simulator and reload that.

Yey, we have built just a login view for the iPhone application using React Native.

So this is how you can set up a development environment for React Native application. Our Beginners Guide To Create React Native Application is over. Thanks for taking it.