Ionic 5 React Application Tutorial

In this article, we will learn How to create an Ionic 5 application using React and also go through the structure and get to know How actually a React application works?

In starting or before Ionic’s version 4, Angular was the only choice available to build an Ionic application. But now Ionic provides multiple platforms and support for multiple JS libraries to choose from like ReactJs, VueJs or simple JavaScript.

Let’s get started and create an Ionic ReacJs Application

Here we are using the latest version of @Ionic/cli which is v6.2.0. Ionic 5 now depreciated the ionic package for CLI and started using @ionic/cli as seen here 

To update the CLI version run following NPM command in the CMD command prompt:

Create Ionic 5 React Application

To create a new Ionic application using React we use --type flag with react as shown below:

creating a blank template for the sake of simplicity.

Now move to the app folder by running cd react-demo then hit code . to quickly open your application code in the Visual Studio code editor if you have already installed!

Run Ionic React App

To open this newly created application just run $ ionic serve --open command that will open your React application

Ionic React Application Structure

Now if we look at the application structure, and you are already familiar with Angular architecture you can easily understand how these Ionic react application blocks are working.

Traditionally a React application have JSX files known as JavaScript eXtention which enables the use of HTML like coding in Javascript files as shown below:

But here we have TSX as Ionic is using TypeScript in React.

So here is a nice graphical UI created personally to give an idea whats happening here 😛

On a Serious Note!

A react app is instantiated from the index.tsx file

Which loads the App component in  App.tsx file in the public/index.html file where have <div id="root"></div>

Exporting the App Functional Component using React Namespace Interface FC

Using the Route component we called Home Component here from Home.tsx file

Which in turn is calling the <ExploreContainer /> available in the ExploreContainer.tsx

In a big picture

We can create multiple views under the pages folder having reusable components under the components folder.

In coming tutorial we get to know how to create more pages in a blank application and also Routing to navigate between them.

Leave a Reply

avatar
  Subscribe  
Notify of