React Native: First Demo

19 Jan. 21
126 VIEWS

Let us start to build our first React Native application on Windows as a development operating system and Android as a target operating system. If you are looking to set up a development environment then please go through this blog : Let’s Start React-Native.

The prerequisites required:

You must be clear with Javascript fundamentals and React. Even though you may not have prior experience using React, it’s possible to follow this. During this lesson, you’ll learn about basic concepts of React.

Select the development tools. Any mix of platforms and editors can be used; however, I recommend you begin with the following:

  • Visual Studio Code: an example of the best existing editors.
  • React Native Tools for VSCode: This is a plugin for Visual Studio Code to be used with React native development which gives users helpful shortcuts, plus lets them debug code straight from the VSCode environment.
  • Reactotron: This is a desktop application used to inspect React Native and React.js projects.

You’ll also be required to install XCode if you need an iOS application.

Let’s look at the basic Structure in both iOS and Android projects!

The Native iOS Project Below is a dump of the tree that our react-native init command generated for the iOS part of our project.

 |--- ios
 | |-- projectlayout 
 | | |--- AppDelegate.h 
 | | |--- AppDelegate.m 
 | | |--- Base.lproj 
 | | | |--- LaunchScreen.xib 
 | | |--- Images.xcassets 
 | | | |--- AppIcon.appiconset 
 | | | |--- Contents.json 
 | | |--- Info.plist 
 | | |--- main.m 
 | |--- projectlayout.xcodeproj 
 | | |--- project.pbxproj 
 | | |--- xcshareddata 
 | | |--- xcschemes 
 | | |--- projectlayout.xcscheme 
 | |--- projectlayoutTests 
 | |--- Info.plist 
 | |--- projectlayoutTests.m

And The Native Android Project Here’s the listing for our generated React Native project,
focusing on the android/ directory :

|--- android 
|--- app 
| |--- build.gradle 
| | |--- proguard-rules.pro 
| | |--- react.gradle 
| | |--- src 
| | |--- main 
| | |--- AndroidManifest.xml 
| | |--- java 
| | |--- com 
| | |--- projectlayout 
| | |--- MainActivity.java 
| |--- build.gradle 
| |--- gradle 
| | |--- wrapper 
| | |--- gradle-wrapper.jar 
| | |--- gradle-wrapper.properties 
| |--- gradle.properties 
| |--- gradlew 
| |--- gradlew.bat 
| |--- settings.gradle

Let’s head on to building our first React native Application.

Steps to create React Native application :

  • Step 1. First, you have to start your emulator (Android Emulator) and make it live.
  • Step 2. Create a directory (ReactNative) in your any preferred drive.
  • Step 3. Open “Command Prompt” and go to your ReactNative directory.
  • Step 4. Write a command react-native init FirstApp to initialize your app named as “FirstApp”.

  • Step 5. Go to your directory location “FirstApp” and run the command react-native

    run-android. It will start Node server and launch your application in a virtual device emulator.
    Now on successfully executing your App, You will see this android emulator having the initial
    Screen like this :

    Before you start coding there is one thing you need to know, That is :

    Function Components and Class Components:

    So what is the Functional component and Class Component!

    With React, you can build components using either classes or functions.

    At first,The class components were the only components that could have state.

    But since the introduction of React’s Hooks API, you can add state and more to function components too.

    Before you start coding there is one thing you need to know, That is :

    Function Components and Class Components:

    So what is the Functional component and Class Component!

    With React, you can build components using either classes or functions.

    At first,The class components were the only components that could have state.

    But since the introduction of React’s Hooks API, you can add state and more to function components too.

    State:

    If you want your Component to remember something, you can have state for it! It means it is a personal data storage for your particular component.

    Also State will become handy in case of handling data that changes over time or it gets dynamic data while user interactions are being performed.

    Let’s look at the same example with Functional Component as well as Class Component.

    Functional Component

       import React from 'react';
       import { Text, View } from 'react-native';
     
      const HelloWorldApp = () => {
    
         return (
    
           ...  Resides 
               flex: 1,
               justifyContent: 'center',
               alignItems: 'center'
             }}>
    
             Hello, world!
    
           
         );
       }
    
     export default HelloWorldApp;

    Class Component :

    As always with class components, you must import the Component class from React:

    import React, { Component } from ‘react’;

     import React, { Component } from 'react';
       import { Text, View } from 'react-native';
    
       class HelloWorldApp extends Component {
    
         render() {
    
           return (
    
             
               Hello, world!
    
             
    
           );
         }
       }
    
       export default HelloWorldApp;
    

    Both these example have same output :

    So here we have completed writing our first React native code..!!

    To the extent that, We will look at how the state works in these two component :

    Syntactically in the class components, state is stored in a state object:

    Here we are managing the boolean into isOn , To do this we will start writing like :

    export class Demo extends Component {
    
    
     state = { isOn: true };
    
     //..
    
    }
    

    To access isOn we will write props with this.props, and you access this object inside your component with this.state:

    For instance :

    <Text>
    
    Hello, my restaurant name is BarBQ , and It will be   {this.state.isOn ? ' Open ' : ' Closed '} on Sunday Morning!
    
    </Text>
    

    And you will then set values inside the state object by passing an object with the key value pair for state and its new value to this.setState():

    
    <Button>
    
      onPress={() => {
        this.setState({ isOn: false });
      }}
    
      // ..
    </Button>
    

    In above example by clicking on a button you will set the state of isOn to false, That’s why it will display on screen Like :

    “Hello, my restaurant name is BarBQ , and It will be Closed on Sunday Morning! ”

    Moving on to the same example using Functional components.

    First, you will want to import useState from React like so:

    import React, { useState } from ‘react’;

    Then you declare the component’s state by calling useState inside its function.

    Just like this:

    const isOpen = (props) => {
    
      const [isOn, setIsOn] = useState(true);
    
      // ...
    
    };
    

    Now this will do 2 things, First it Create isOpen constant which will store the initial value of state as true or false in isOn and second, It creates a function to set that state variable’s value — setIsOn

    To change the value of isOn state we will create a button and it will give onPress Prop :

    <Button
    
      onPress={() => {
        setIsOn(false);
      }}
    
      //..
    
    />
    

    You can find more fundamental topics as well as advance one regarding development with react native from Here.

Conclusion:

People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. In this blog we have learnt about the creating your first App, What is Functional and Class Component along with state. I hope you find this useful. Happy coding! 🙂

Author

Lets Nurture
Posted by Lets Nurture

Blog A directory of wonderful things

AdMob Mediation in Android

We all know about Admob Ads very well. Here, I would like to explain what mediation features and how it will be useful for developers. Let’s take a simple one …

Laundry On-Demand services: A Successful App Service You Should Consider

With our hectic lifestyles and the need to physically distance due to the ongoing pandemic, on-demand app services are rising in popularity. One such category for this niche is on-demand …

How to Setup Twilio Package for SMS in Laravel

In your application workflow, you may need to pass important information to your users. Most services require your users to have an internet connection and unfortunately, this isn’t always the …

Firebase Dynamic Links

Deep links are a powerful and essential part of a market’s toolkit. They are connecting users to campaigns, streamlining user experience and exposing users to the right marking. Many developers …

Kotlin Coroutines in Android

Multithreading is a well known programming concept which all developers might have come across. The concept of multithreading is a vast subject and includes complex mechanisms in it, but in …

Google in app purchase in android app

Before we start with app purchase, Let’s get a basic idea of what type of digital content we are selling to users. Google’s Billing system gives us mainly two types …

COVID lockdown has brought the digital future forward

The Novel Coronavirus epidemic that has spread its tentacles worldwide almost brought business and the economy to its knees. With no way of attending office, how are employees supposed to …

The Impact of COVID 19 on Restaurant & Hospitality Industry

Coronavirus has literally crippled the economies of different countries catastrophically and has forced many industries to put down their shutters for long. Some have closed down temporarily abiding by the …

AI for Pneumonia Detection

The risk of pneumonia is enormous for many, especially in the nations where billions face energy poverty and rely on polluting forms of energy. “The WHO estimates that over 4 …

How Outsourcing & Subcontracting help companies with Disaster Management

According to recent google reports, 114 countries have reported that 1,18,000 have contracted Covid-19, the disease caused by the virus, known as SARS-CoV2. Nearly 4,300 people have died. Introduction Where …

10 most extensively used Python libraries

Python, being one of the most sought after programming languages, has a huge collection of libraries. In fact, this expansive set of libraries can be considered as one of the …

AI for Food Detection

“Four simple ways to fight diabetes/Obesity: Go for regular medical check-ups; Exercise more; Watch your diet, and Cut down on soft drinks.” – Singapore PM Lee Hsien Loong (Nvidia Research …

Django vs Laravel vs Node js

Web Frameworks are basically software packages that ease the complexity of web development. They come with many inbuilt features that are common in web development, thus minimizing the development time, …

8 Chatbot Development Frameworks: Building a Better Bot for Your Business

There has been an explosion in the use of chatbots across both business websites and messaging applications, mainly because businesses want to cater to their customers and customers have a …

Implementation of AI in Financial Planning

AI focuses on a future where machines not only do all of the manual labour, as they have done since the industrial revolution but also the work which requires Intelligence …

Importance of reliable IT outsourcing partner during a global pandemic

Though a bad reputation has developed over the years, outsourcing is on the rise and for good reason: it is a sound financial strategy for companies, of all sizes and …

Tech in Prenatal Care-Empowering rural women with a mobile first avenue for information

In the era of wireless technology, where there are more mobile phones than people, mobile applications play an important role for rural women to improve their maternal health. Technology is …

Survival of the Fittest is now the Survival of the Agilest

A joint study by Forbes magazine and Scrum Alliance has found that Agile practices are gaining a lot more popularity among SME businesses and across sizes that and include startups, …

How agile will transform the organization framework?

Innovation is no longer just about new technology, it is about new models of organization. The high tech breakthroughs that do count today are not only about speed and performance …

The time is now for Machine Learning

Have you heard your peers discussing Machine Learning (ML) yet have only a vague idea of what that implies? It is safe to say that you are burnt out on …

CONTACT US

Have an !dea or need help with your current business?

loading...
We use cookies to give you tailored experiences on our website.
Okay