IONIC V4 & REACT JS | INSTALLATION, STRUCTURE & BASIC EXAMPLE | BASICS

Share the post

Ionic V4 React – Installation, Structure & Basic Example 

Hello All,

Today we will discuss about Ionic 4 release. As we already knew that Ionic now will support not only Angular JS but it’s also support React JS as well as Vue JS from Version 4.So, Now mobile application development is bit easy for those who don’t know about Angular JS but they know about React or Vue JS. If you knew about any one of these language you can able to develop hybrid mobile application.

For Ionic 4 release, We will start with React JS.As we are little bit familiar with Angular JS but we have not start React JS yet.

So, We will start the step by step process beginning with Installation of Ionic 4 for React. We will see how to create a new project in ionic 4 for React JS. We will also discuss about the structure of project in Ionic 4.

Installation in ionic 4 : 

So, let’s try to install Ionic 4 by using following command :


npm install -g ionic

It will install latest release of Ionic. You can check the Version by writing following command in command prompt.


Ionic -v

Now, the next step is to create a blank application in react. To create a blank application please write following command 

ionic start myapp --type=react blank

Here, myapp is our project name & please do not forget to mention the type of your application by writing –type = react. By mentioning the type ionic able to understand for which language you want to create a new project. As we have mention the –type = react then it will create a Ionic 4 project for React JS. Also, we have written blank at the end of command which indicates we want a blank project. You can write tab for tab project & so on.

Project structure in ionic 4 :

After installing the Ionic 4 project we will open the project in Visual Studio Code tool(Most recommended).You have to open a myapp folder into Visual Studio Code. After opening the folder you can able to see structure of the project as shown in below image :

project_structure_ionic4_react

In above Image we can clearly see the folder as explained follows :

node_modules  : This folder contains the project node dependencies.

public : This folder contains the assets of project includes images, videos, fonts And index.html

index.html : This is the first page which loads at first time after running the application. In body tag you can able to see the div which having root as a id of div.

<body>           <div id="root"></div>
</body>

Your whole project’s HTML & JS will loads inside this div.

src : This folder contains pages,theme,App.test.tsx,App.tsx,index.tsx,react-app-env.d.ts,theme.css

pages : Of Course, this folder contains the all pages of which contains JSX elements which we include in files.

        What is JSX ? 

        JSX means JavaScript XML. JSX allows to write an HTML within React JS. Simply, JSX is the combination of HTML & React JS.



theme : This folder contains variables.css file which can control application CSS.

index.tsx : This file is the most important file in entire structure as It renders the elements. 


ReactDOM.render(<App />, document.getElementById('root'));

This above methods takes two parameters in which first is element & second one is container. Here,<App /> is the element used in App.tsx file & container is id of ‘root’ which assign to the index.html <div> tag. It means that we are telling react to render the element inside the container which having id of ‘root’.

Basic Example Using Ionic 4 React :

So, we done with the understanding the application structure. Now we will see a basic example for login page. This page we will Simply create a Username textbox, Password textbox & the button for login. We will call a simple function on click of login button & fetch the values of both Username & Password.

The Home.tsx file is as follows :


import {

  IonInput, IonItem, IonLabel, IonContent, IonHeader, IonTitle, IonToolbar,

  IonButtons, IonButton

} from '@ionic/react';

import React, { useState } from 'react';




const Home: React.FunctionComponent = () => {




  const [username] = useState('');

  const [password] = useState('');




  const login = () => {

    console.log("Login");

    console.log("username" + username);

    console.log("password" + password);

  }




  return (




    <>

      <IonHeader>

        <IonToolbar>

          <IonTitle>Ionic Blank</IonTitle>

        </IonToolbar>

      </IonHeader>

      <IonContent className="ion-padding">

        <IonItem>

          <IonLabel>Username</IonLabel>

          <IonInput type="text" value={username} placeholder="Enter Username"></IonInput>

        </IonItem>




        <IonItem>

          <IonLabel>Password</IonLabel>

          <IonInput type="password" value={password} placeholder="Enter Password"></IonInput>

        </IonItem>




        <IonToolbar>

          <IonButtons slot="start">

            <IonButton color="secondary" onClick={() => { login(); }}>Login</IonButton>

          </IonButtons>

        </IonToolbar>

      </IonContent>

    </>

  );

};




export default Home;

While coding with React JS we have to import Ionic HTML tags from ‘@ionic/react’ & React, {useState} from ‘react’.

For now don’t worry about useState we will cover this in next session.

From the code you can able to understood that we have Home Function Component which contains both HTML & JS. We call login() function

on Click of Login button & we console the both values in login method.

Please see below image as an output for above application : 

Output

Today, We have covered the Installation process of Ionic 4 React application, structure of Ionic 4 application & basic program written using React JS. In next topic we will see What is the useState ?

Leave a Comment