Mobile Development with Ionic and React — Alerts, Badges, and Buttons

Photo by Tom Bradley on Unsplash

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Alerts

We can add alerts to our Ionic React app by writing:

import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <IonContent>
      <IonButton onClick={() => setShowAlert(true)} expand="block">Show Alert</IonButton>
      <IonAlert
        isOpen={showAlert}
        onDidDismiss={() => setShowAlert(false)}
        cssClass='my-custom-class'
        header={'Alert'}
        subHeader={'Subtitle'}
        message={'This is an alert message.'}
        buttons={['OK']}
      />
    </IonContent>
  );
};
export default Tab1;

We add the useState hook to control the showAlert state.

Then we can sue that to control the opening of the alert with the IonButton component.