The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore how to use Ionic with React and Vue. Ionic is traditionally associated with Angular, but it also supports React and Vue, allowing developers to leverage their preferred frameworks while building cross-platform mobile applications.

Key Concepts

Ionic Framework: A powerful UI toolkit for building high-quality, cross-platform apps for native iOS, Android, and the web—all from a single codebase.
React: A JavaScript library for building user interfaces, maintained by Facebook.
Vue: A progressive JavaScript framework for building user interfaces, known for its simplicity and flexibility.

Setting Up Ionic with React

Step 1: Install Ionic CLI

First, ensure you have the Ionic CLI installed. If not, you can install it using npm:

npm install -g @ionic/cli

Step 2: Create a New Ionic React App

Use the Ionic CLI to create a new Ionic app with React:

ionic start myIonicReactApp blank --type=react

This command creates a new Ionic project named myIonicReactApp with a blank template using React.

Step 3: Understanding the Project Structure

The project structure of an Ionic React app is similar to a standard React app with additional Ionic-specific files and folders:

src/: Contains the main application code.
- components/: Reusable components.
- pages/: Application pages.
- App.tsx: The root component.
public/: Static assets.
ionic.config.json: Ionic configuration file.

Step 4: Running the App

Navigate to the project directory and start the development server:

cd myIonicReactApp
ionic serve

This command will open the app in your default web browser.

Using Ionic Components in React

Ionic provides a set of UI components that can be used in React applications. Here’s an example of using an Ionic button in a React component:

import React from 'react';
import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonButton expand="full">Click Me</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

Explanation

IonPage: Represents a single page in the app.
IonHeader: Contains the header of the page.
IonToolbar: A container for header elements.
IonTitle: Displays the title of the page.
IonContent: The main content area of the page.
IonButton: A button component.

Setting Up Ionic with Vue

Step 1: Create a New Ionic Vue App

Use the Ionic CLI to create a new Ionic app with Vue:

ionic start myIonicVueApp blank --type=vue

This command creates a new Ionic project named myIonicVueApp with a blank template using Vue.

Step 2: Understanding the Project Structure

The project structure of an Ionic Vue app is similar to a standard Vue app with additional Ionic-specific files and folders:

src/: Contains the main application code.
- components/: Reusable components.
- views/: Application views.
- App.vue: The root component.
public/: Static assets.
ionic.config.json: Ionic configuration file.

Step 3: Running the App

Navigate to the project directory and start the development server:

cd myIonicVueApp
ionic serve

This command will open the app in your default web browser.

Using Ionic Components in Vue

Ionic provides a set of UI components that can be used in Vue applications. Here’s an example of using an Ionic button in a Vue component:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-button expand="full">Click Me</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
export default {
  name: 'Home'
};
</script>

Explanation

ion-page: Represents a single page in the app.
ion-header: Contains the header of the page.
ion-toolbar: A container for header elements.
ion-title: Displays the title of the page.
ion-content: The main content area of the page.
ion-button: A button component.

Practical Exercise

Exercise 1: Create a Simple Ionic React App

Create a new Ionic React app.
Add a new page called About.
Use Ionic components to create a simple layout with a header, content area, and a button.
Add navigation to switch between the Home and About pages.

Solution

Create the app:

ionic start myIonicReactApp blank --type=react
cd myIonicReactApp

Create the About page:

// src/pages/About.tsx
import React from 'react';
import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';

const About: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>About</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonButton expand="full">Learn More</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default About;

Update the App.tsx to include routing:

// src/App.tsx
import React from 'react';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/home" component={Home} exact />
        <Route path="/about" component={About} exact />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

Add navigation buttons in Home.tsx:

// src/pages/Home.tsx
import React from 'react';
import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { useHistory } from 'react-router-dom';

const Home: React.FC = () => {
  const history = useHistory();

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonButton expand="full" onClick={() => history.push('/about')}>Go to About</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

Exercise 2: Create a Simple Ionic Vue App

Create a new Ionic Vue app.
Add a new view called About.
Use Ionic components to create a simple layout with a header, content area, and a button.
Add navigation to switch between the Home and About views.

Solution

Create the app:

ionic start myIonicVueApp blank --type=vue
cd myIonicVueApp

Create the About view:

<!-- src/views/About.vue -->
<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>About</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-button expand="full">Learn More</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
export default {
  name: 'About'
};
</script>

Update the router/index.js to include routing:

// src/router/index.js
import { createRouter, createWebHistory } from '@ionic/vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

Add navigation buttons in Home.vue:

<!-- src/views/Home.vue -->
<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-button expand="full" @click="$router.push('/about')">Go to About</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
export default {
  name: 'Home'
};
</script>

Conclusion

In this section, we explored how to set up and use Ionic with React and Vue. We covered the basics of creating a new Ionic app, understanding the project structure, and using Ionic components in both React and Vue. Additionally, we provided practical exercises to reinforce the learned concepts. By leveraging Ionic with React or Vue, developers can build high-quality, cross-platform applications using their preferred frameworks.

Ionic with React and Vue

Key Concepts

Setting Up Ionic with React

Step 1: Install Ionic CLI

Step 2: Create a New Ionic React App

Step 3: Understanding the Project Structure

Step 4: Running the App

Using Ionic Components in React

Explanation

Setting Up Ionic with Vue

Step 1: Create a New Ionic Vue App

Step 2: Understanding the Project Structure

Step 3: Running the App

Using Ionic Components in Vue

Explanation

Practical Exercise

Exercise 1: Create a Simple Ionic React App

Solution

Exercise 2: Create a Simple Ionic Vue App

Solution

Conclusion

Ionic Development Course

Module 1: Introduction to Ionic

Module 2: Basic Components and Navigation

Module 3: Styling and Theming

Module 4: Working with Data

Module 5: Advanced Components and Features

Module 6: Testing and Deployment

Module 7: Advanced Topics