Prerequisites

Install Node.js (LTS recommended) and npm:

  node --version   # v18+ recommended
npm --version

Install the Ionic CLI 

  npm install -g @ionic/cli
ionic --version

Create a New App

Ionic supports Angular, React, and Vue. This course uses React:

  ionic start myApp blank --type=react --capacitor
cd myApp

Other templates: tabs, sidemenu, list.

Project Structure 

  myApp/
├── src/
│   ├── App.tsx           # Root component
│   ├── main.tsx          # Entry point
│   ├── pages/            # Screen components
│   └── theme/            # Global CSS variables
├── capacitor.config.ts   # Native app config
├── ionic.config.json     # Ionic project settings
└── package.json

Run in the Browser 

  ionic serve

Opens http://localhost:8100 with live reload.

Add Native Platforms

Capacitor wraps your web app in a native shell:

  ionic build
npx cap add ios
npx cap add android
npx cap sync

Open in native IDEs:

  npx cap open ios      # Requires Xcode (macOS)
npx cap open android  # Requires Android Studio

Useful CLI Commands 

  ionic generate page Home     # Scaffold a new page
ionic generate component Card  # Scaffold a component
ionic build                  # Production web build
ionic cap run ios            # Build and run on iOS simulator
ionic cap run android        # Build and run on Android emulator

Environment Tips

  • iOS development requires macOS and Xcode
  • Android development requires Android Studio and an emulator or device
  • Use ionic serve --lab to preview iOS and Android styles side by side

First Code Change

Edit src/pages/Home.tsx:

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

const Home: React.FC = () => (
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonTitle>Home</IonTitle>
            </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
            <h1>Hello from Ionic!</h1>
        </IonContent>
    </IonPage>
);

export default Home;

Save and the browser refreshes automatically. Next: explore Ionic UI components.