ionic-react

⚡ Ionic React Development Container

Cross-platform mobile development with Ionic Framework and React

📋 Overview

This development container provides a complete Ionic React development environment with:

• ✅ Node.js 20 LTS
• ✅ Ionic CLI latest version
• ✅ React with TypeScript support
• ✅ Cordova for native builds
• ✅ Vite bundler
• ✅ Live reload development server

🚀 Quick Start

1. Open in VS Code

   code .

2. Reopen in Container

   • Press F1 → Dev Containers: Reopen in Container

3. Create your first Ionic React app

   ionic start myApp tabs --type=react
   cd myApp
   ionic serve --external

4. Access your app

   • Open browser at http://localhost:8100

🛠️ Included Tools

Runtime & CLI Tools

• 📦 Node.js 20 - Latest LTS version
• ⚡ Ionic CLI - Ionic command-line interface
• ⚛️ React - UI library
• 📱 Cordova - Native app builds
• 🏃 Native Run - Run on devices
• ⚡ Vite - Fast bundler

Package Managers

• 🔧 npm - Default package manager
• 🧶 yarn - Alternative package manager
• ⚡ pnpm - Efficient package manager

Code Quality

• ✨ ESLint - Linter
• 💅 Prettier - Code formatter
• 📘 TypeScript - Type safety

📦 VS Code Extensions

• ionic.ionic - Ionic extension
• dsznajder.es7-react-js-snippets - React snippets
• dbaeumer.vscode-eslint - ESLint integration
• esbenp.prettier-vscode - Prettier formatter
• formulahendry.auto-rename-tag - Auto rename tags
• ms-vscode.vscode-typescript-next - TypeScript support

🎨 Customization

Multi-Stage Dockerfile

1. base - Node.js 20
2. build-tools - npm, yarn, pnpm
3. ionic-cli - Ionic CLI, Cordova
4. dev-tools - Linting, formatting, Vite
5. android-tools - Android SDK (optional)
6. tools - Additional utilities
7. development - Dev environment
8. builder - Build stage
9. production - Nginx runtime

Enable Android Development

Uncomment the Android SDK stage in .devcontainer/Dockerfile.

💡 Usage Examples

Create New App

# Tabs template
ionic start myApp tabs --type=react

# Sidemenu template
ionic start myApp sidemenu --type=react

# Blank template
ionic start myApp blank --type=react

# With Capacitor
ionic start myApp tabs --type=react --capacitor

Development

# Start dev server
ionic serve --external

# Start on specific port
ionic serve --port 8200 --external

# Lab mode (iOS & Android preview)
ionic serve --lab

# Build
ionic build

# Build for production
npm run build

Generate Components

# Page
ionic generate page my-page

# Component
ionic generate component my-component

# Service
ionic generate service my-service

Capacitor (Native Apps)

# Add Capacitor
ionic integrations enable capacitor

# Add platforms
ionic cap add android
ionic cap add ios

# Sync web assets
ionic cap sync

# Open in native IDE
ionic cap open android
ionic cap open ios

# Run on device
ionic cap run android
ionic cap run ios

# Build native app
ionic cap build android
ionic cap build ios

Cordova (Native Apps)

# Add platforms
ionic cordova platform add android
ionic cordova platform add ios

# Build
ionic cordova build android
ionic cordova build ios

# Run on device
ionic cordova run android --device
ionic cordova run ios --device

# Add plugins
ionic cordova plugin add cordova-plugin-camera

📚 Popular Ionic Plugins

# Camera
npm install @capacitor/camera
ionic cap sync

# Geolocation
npm install @capacitor/geolocation

# Storage
npm install @capacitor/storage

# HTTP
npm install @capacitor/http

# File System
npm install @capacitor/filesystem

# Network
npm install @capacitor/network

# Push Notifications
npm install @capacitor/push-notifications

# Social Sharing
npm install @capacitor/share

# Haptics
npm install @capacitor/haptics

# Status Bar
npm install @capacitor/status-bar

# Splash Screen
npm install @capacitor/splash-screen

🎨 UI Components

Ionic provides rich UI components:

import { 
  IonButton, 
  IonCard, 
  IonCardHeader, 
  IonCardTitle, 
  IonCardContent 
} from '@ionic/react';

function MyComponent() {
  return (
    <>
      <IonButton>Click Me</IonButton>
      <IonCard>
        <IonCardHeader>
          <IonCardTitle>Card Title</IonCardTitle>
        </IonCardHeader>
        <IonCardContent>
          Card content
        </IonCardContent>
      </IonCard>
    </>
  );
}

📚 Popular React Libraries with Ionic

# State Management
npm install zustand
npm install @reduxjs/toolkit react-redux
npm install jotai

# Routing (built-in)
npm install react-router-dom

# Forms
npm install react-hook-form
npm install formik yup

# HTTP Client
npm install axios
npm install @tanstack/react-query

# UI Enhancements
npm install framer-motion
npm install react-spring

🧪 Testing

# Run tests
npm test

# Run with coverage
npm test -- --coverage

# E2E tests with Playwright
npm install -D @playwright/test
npx playwright test

🐛 Debugging

Press F5 to launch Chrome debugger with your Ionic React app.

🌐 Ports

• 8100 - Ionic dev server default
• 3000 - React dev server alternative

📚 Resources

• Ionic Documentation
• Ionic React
• Ionic Components
• Capacitor Documentation
• React Documentation
• Vite Documentation

---

Happy Coding! 🎉