AppDividend
Latest Code Tutorials

Beginners Guide To Create React Native Application

3,192

Get real time updates directly on you device, subscribe now.

In this tutorial, we will see the Beginners Guide To Create React Native Application.  React Native makes it possible to make native iOS and Android mobile apps without needing to know 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 just create login view for iOS application, so nothing more complicated. But we will be walking through a primary installation process. In this application, we are building an iOS app. So 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. 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 folder 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.

React Native Starter App

 

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

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

 

iPhone Development Server

It will help us in live reloading the server and stuff like that. Keep it open, never close it.

After compiling the project, we will see our main terminal something like this.

React Native Tutorial

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 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.

Related Posts
1 of 8
code .

The folder structure of Our application looks like below.

React Native iOS Tutorial

Step 6: Create a components folder inside the root.

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

So let us create components folder.

mkdir components
cd components

Inside 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 have introduced some form elements from react native framework.

As a regular React.js component, Login component has render() method that output the design of our application. We use Text, TextInput, View, and Image component. There are lots of other ready-made components that you can use in the react native project. But in this app,  we just need these components to render the application.

 

React Native Stylesheet Tutorial

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

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

If we want to see this design inside iPhone Simulator, then we need to import this into 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',
  }
});

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

 

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

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

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.