Getting Started With Ionic React 😇

Introduction

In this article, we are going to learn about Ionic React and how to create an application using Ionic React step by step.

What is Ionic React?

Recently the Ionic company introduced a new open source library called Ionic React that helps to build Android applications as well as iOS, desktop and the web as a Progressive Web App. This library is a web component based library. Version 4.11 is the first official version of Ionic React.

In the past, Ionic basically works with Angular technology but now they also supprt React as well. In look and feel, the style of the Ionic React component is especially great on Native apps as well as desktop apps.

Ionic React vs React Native

Ionic React

Helps to build hybrid mobile applications as well as to build desktop applications.
It allows using web technology like HTML, CSS, and JavaScript.
Performance is much less as compared to React Native.
Uses Cordova plugins to build an Application.
Developed by Drifty.co.

React Native

Helps to build cross platform mobile apps natively.
Uses React and JavaScript to build an application but at runtime it renders Native UI element.
Better application performance.
Has its own API to build an Application.
Developed by Facebook.
Instagram, UberEats, Myntra are some popular brands which uses React Native

Getting Started with First Ionic React App

Before starting with Ionic React app, make ensure that your system has installed following configuration

Step 1

Install Ionic CLI by using below command (Open command prompt and install)

npm i -g ionic

Step 2 - Create a project

Create a folder where we are actually placing our project

Go to this folder directory

Run the below command to create an application

ionic start my-first-app

It's very interesting to see here, CLI is asking for "Select JavaScript framework to use your new app". You have to select React framework to create Ionic React App using keyboard arrow key and then press enter button.

Once you press the enter button, CLI will ask "which starter template you would like to use in your project." like the below picture.

You can select any one option from the above. In this case, I am going to create "A blank starter project". So, for that, I have selected first blank template option for the project and press enter button. Now, the CLI will create an application and install all the dependencies (files required for the project).

Step 3 - Run Application

Once you have completed the above steps, go into the project directory and run the application using the below commands,

cd my-first-app
ionic serve

Once you have executed the above commands, first your project gets compiled and then starts a dev server and open your application on the browser like below picture.

Step 4

Open your project into VS code or your favorite editor and see the project structure like the below picture.

In this project, you might notice that your file extension is .tsx. it means Ionic React uses typescript to write the code. You can use .js extension file as well.

src - This folder contains all the code related to the application.

pages - this folder is just a container of separate components. e.g.: - about, home, contact component

theme - this folder contains CSS files of project. a variables.css file is there.

Index.tsx - this file is main entry point of the project and render App component of App.tsx file.

App.tsx - in this file, we have imported React from react library and used here. Similarly, other libraries like for Route and Redirect imported “react-router-dom” library.

Step 5 - Test Application

Open Home.tsx file and replace the following code into it.

import {
IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard,
IonCardTitle, IonCardContent, IonCardHeader, IonCardSubtitle, IonGrid, IonRow, IonCol
} from '@ionic/react';
import React from 'react';
const Home: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar color="dark">
<IonTitle>C# Corner App Using Ionic React</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonGrid>
<IonRow>
<IonCol size="6">
<IonCard color="tertiary">
<IonCardHeader>
<IonCardSubtitle>C# Corner</IonCardSubtitle>
<IonCardTitle>About C# Corner</IonCardTitle>
</IonCardHeader>
<IonCardContent>
C# Corner is an online global community of 3 million software developers.
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Home;

Now, run the application by using the below command and check the output for this.

ionic serve

Output

Summary

In this article, I discussed what is Ionic React. After that, we checked the difference between Ionic React and React Native. At the end of this article, we saw set code for Ionic React.