How to Make a Mobile App with React, Ionic and Capacitor

Hi everyone, in this article we are going to make a mobile application using regular react code, we will use ionic framework for getting native ui fill of mobile application. Later we will use capacitor to give it a native wrapper, we can build for iOS , Android and Electron platform using the same. So let's start.

Prerequisites : Node.js should be installed, create-react-app should be installed globally, Xcode(for iOS) or Android Studio(for Android) should be installed.

For android platform final application will look like below.

If you don't have the settings install nodejs from nodejs.org.
Use command : npm i -g create-react-app@latest for installing create-react-app globally.

Let's initialise a create-react-app application instance with typescript template.

It will install all the dependencies required, then open the project in your preferred code editor, I am using VS code. Then install below dependencies.

Once they are installed you are good to go. Use npm run start command and you should see app is running properly.

Now let's replace the template code with following:

We will create pages folder within src, which will hold our basic header,footer and homepage files. You may rename it whatever you want. My project structure looks like below:

Header.js

import {
  IonHeader,
  IonTitle,
  IonToolbar
} from '@ionic/react';
import React, { Component } from 'react';
    
class Header extends Component {
  render() {
    return (
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Travel Wishlist</IonTitle>
        </IonToolbar>
      </IonHeader>
    );
  }
}
export default Header;

Footer.js

import { IonFooter, IonTitle, IonToolbar } from '@ionic/react';
import React, { Component } from 'react';

class Footer extends Component {
render() {
   return (
    <IonFooter>
      <IonToolbar>
        <IonTitle>Footer</IonTitle>
      </IonToolbar>
    </IonFooter>
  );
}
}
export default Footer;

Home.js

In this file I have downloaded two images, and placed them in public/images folder

import {
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonContent,
  IonButton,
  IonCardSubtitle,
  IonImg
} from '@ionic/react';
import React, { Component } from 'react';
    
const Home = ()=> {
    return (
      <IonContent>
        <IonCard>
          <IonImg src={process.env.PUBLIC_URL + '/images/1.jpg'} />
          <IonCardHeader>
            <IonCardTitle>Taj Mahal</IonCardTitle>
            <IonCardSubtitle>Agra, Uttar Pradesh, India</IonCardSubtitle>
          </IonCardHeader>
          <ion-button expand="block" color="secondary">Read More</ion-button>
        </IonCard>
        <IonCard>
          <IonImg src={process.env.PUBLIC_URL + '/images/2.jpg'} />
          <IonCardHeader>
            <IonCardTitle>Eiffel Tower</IonCardTitle>
            <IonCardSubtitle>Paris, France</IonCardSubtitle>
          </IonCardHeader>
          <ion-button expand="block" color="secondary">Read More</ion-button>
        </IonCard>
      </IonContent>
    );
}
    
export default Home;

And based on these changes we will update the App.js file, and wrap the whole thing with <IonApp>

import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';
import { IonApp } from '@ionic/react';
import React, { Component } from 'react';
import Header from './pages/header'
import Footer from './pages/footer'
import Home from './pages/home'

class App extends Component {
render() {
   return (
     <IonApp>
       <Header />
       <Home />
       <Footer />
     </IonApp>
   );
}
}
export default App;

Now our application is ready, use the command npm run start to test it in browser(chrome), if it is running successfully we will proceed creating the native wrapper with capacitor. My app looks like below :

So the application is running perfectly.

Next we will create the app wrapper using capacitor, first we will install the dependencies @capacitor/core and @capacitor/cli :

Now we have to build the react project, because build folder will be the base for the app. So use
'npm run build' to build the project.

Next, we need to initialise capacitor and give an app name. We will use "npx cap init" command and give an app name.

Then you will notice "capacitor.config.json" file is generated. Which looks like below.




The value of "webDir" key should be replaced with "build" as we will be using react build folder.




Now we need to add a platform iOS/Android or Electron, for this example I am using Andriod
Use command "npx cap add android"



Once the Android platform is setup use command "npx cap open android" , which will open up your Android Studio and building of app will start automatically

Note : If you are doing the same for first time, Android Studio might take a bit time to finish gradle sync.

Once the build process is successful, app will run on the emulator or your connected mobile device.

Finally once done and running app in emulator/device :

And the app is up and running ...

Hope this tutorial helps. Thank you for you time...

Used sample image sources :
https://www.bankinfosecurity.com/
kaspersky-new-tajmahal-apt-malware-enables-espionage-a-12365
https://www.independent.co.uk/travel/europe/
5-ways-to-experience-the-eiffel-tower-9214557.html