IONIC 4 REACT INSTALLATION, STRUCTURE & BASIC EXAMPLE | BASICS

Share the post

Ionic 4 React Installation, Structure & Basic Example 

Hello All,

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

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

So, We will start the step-by-step process beginning with the 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 the structure of the project in Ionic 4.

Installation in ionic 4 : 

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


npm install -g ionic

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


Ionic -v

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


ionic start myapp --type=react blank

Here, my app 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 mentioned the –type = react then it will create an Ionic 4 project for React JS. Also, we have written blank at the end of the 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 the 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 the structure of the project as shown 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 the project including images, videos, fonts, And index.html

index.html: This is the first page that loads for the first time after running the application. In the body tag, you can able to see the div which has root as an id of div.

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

Your whole project’s HTML & JS will load 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 all pages which contain 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 a variables.css file that can control application CSS.

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


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

The above methods take two parameters in which the first is an element & the second one is a 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 has an id of ‘root’.

Basic Example Using Ionic 4 React :

So, we did with the understanding of the application structure. Now we will see a basic example for the login page. On 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 the next session.

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

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

Please see below image as an output for above application : 

Output

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

Leave a Comment