Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
React Toggle Counter Example - Ionic Typing CST Test
React Toggle Counter Example — Ionic Code
Demonstrates a counter with an additional toggle button to double the increment in Ionic React.
import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonTitle, IonToolbar, IonText } from '@ionic/react';
const Counter = () => {
const [count, setCount] = useState(0);
const [double, setDouble] = useState(false);
return (
<IonApp>
<IonHeader>
<IonToolbar>
<IonTitle>Toggle Counter</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding" style={{ textAlign: 'center' }}>
<IonText><h2>Counter: {count}</h2></IonText>
<IonButton onClick={() => setCount(count + (double ? 2 : 1))}>+</IonButton>
<IonButton onClick={() => setCount(count - (double ? 2 : 1))}>-</IonButton>
<IonButton onClick={() => setCount(0)}>Reset</IonButton>
<br /><br />
<IonButton onClick={() => setDouble(!double)}>Toggle Double: {double ? 'ON' : 'OFF'}</IonButton>
</IonContent>
</IonApp>
);
};
export default Counter;Ionic Language Guide
Ionic Framework is an open-source UI toolkit for building high-quality, cross-platform mobile, desktop, and web apps using web technologies like HTML, CSS, and JavaScript, often paired with Angular, React, or Vue.
Primary Use Cases
- ▸Cross-platform mobile apps (iOS, Android)
- ▸Progressive Web Apps (PWA)
- ▸Desktop apps via Electron
- ▸Single Page Applications (SPA)
- ▸Rapid prototyping of mobile-first interfaces
Notable Features
- ▸Prebuilt mobile-optimized UI components
- ▸Cross-platform support for Web, Mobile, and Desktop
- ▸Integration with Angular, React, and Vue
- ▸Theming with CSS variables and Ionic theming
- ▸CLI tooling for scaffolding, building, and deploying apps
Origin & Creator
Created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013 to simplify hybrid mobile app development.
Industrial Note
Ionic is widely used in enterprise mobile apps, PWAs, and hybrid apps that need native-like performance across multiple platforms.
Quick Explain
- ▸Ionic provides a rich library of mobile-optimized UI components and utilities.
- ▸It supports building apps for iOS, Android, Web (SPA/PWA), and Desktop via Capacitor or Electron.
- ▸Ionic emphasizes performance, cross-platform consistency, theming, and accessibility.
Core Features
- ▸Components like IonButton, IonCard, IonList, IonModal
- ▸Navigation and routing with IonRouterOutlet
- ▸Native device access via Capacitor plugins
- ▸Theming with CSS variables and global overrides
- ▸TypeScript support and modern frontend framework integration
Learning Path
- ▸Learn HTML, CSS, and JavaScript fundamentals
- ▸Understand Ionic components and CLI
- ▸Explore navigation and routing
- ▸Practice building PWA and mobile apps
- ▸Integrate Capacitor plugins for device features
Practical Examples
- ▸Responsive tab navigation using IonTabs and IonRouterOutlet
- ▸Card-based lists with IonCard and IonList
- ▸Forms with IonInput, IonSelect, IonButton, and validation
- ▸Modals using IonModal and dialogs
- ▸Building PWAs with offline support
Comparisons
- ▸Cross-platform mobile focus vs Quasar (Vue-based SPA + multi-platform)
- ▸Framework-agnostic components vs Quasar/Vuetify (Vue-specific)
- ▸Native plugin access via Capacitor vs Quasar/Cordova
- ▸Responsive and accessible mobile-first UI
- ▸Best for hybrid and mobile-first applications
Strengths
- ▸Cross-platform app development with one codebase
- ▸Rich library of mobile-first components
- ▸Strong integrations with Angular, React, and Vue
- ▸Support for native features via Capacitor
- ▸Active community and ecosystem of plugins
Limitations
- ▸Web-first framework; native performance depends on Capacitor
- ▸Some components may need customization for true native feel
- ▸Bundle size can be larger for web apps
- ▸Learning curve for hybrid and PWA-specific optimizations
- ▸Opinionated mobile design style (iOS/Material) may not fit all projects
When NOT to Use
- ▸Projects not targeting mobile or cross-platform
- ▸Single-page web apps without PWA/mobile needs
- ▸Apps requiring highly custom desktop UI
- ▸Projects prioritizing minimal bundle size for web
- ▸For non-hybrid or native-first apps
Cheat Sheet
- ▸`IonButton`, `IonCard`, `IonInput` - common components
- ▸`IonPage`, `IonContent` - page structure
- ▸`ion-color` and CSS variables - theming
- ▸`IonTabs`, `IonRouterOutlet` - navigation
- ▸`*ngIf`/v-if/conditional rendering - framework-dependent
FAQ
- ▸Is Ionic free?
- ▸Yes - MIT license.
- ▸Does Ionic support native apps?
- ▸Yes - via Capacitor.
- ▸Is Ionic responsive?
- ▸Yes - mobile-first layouts and utilities.
- ▸Can I customize Ionic themes?
- ▸Yes - CSS variables and global theme settings.
- ▸Which platforms does Ionic support?
- ▸Web (SPA/PWA), iOS, Android, and Desktop via Electron.
30-Day Skill Plan
- ▸Week 1: Core components (IonButton, IonCard, IonInput)
- ▸Week 2: Navigation (IonTabs, IonRouterOutlet, IonMenu)
- ▸Week 3: Theming and global CSS variables
- ▸Week 4: Advanced components (IonList, IonModal, IonPopover)
- ▸Week 5: Build full PWA and mobile apps with Capacitor
Final Summary
- ▸Ionic Framework is a hybrid, cross-platform framework for mobile, desktop, and web apps.
- ▸Provides mobile-first UI components, navigation, and device integration.
- ▸Supports Angular, React, and Vue.
- ▸Capacitor enables native device access for mobile apps.
- ▸Ideal for PWAs, hybrid apps, and rapid cross-platform development.
Project Structure
- ▸src/ - main source folder
- ▸src/components/ - reusable Ionic components
- ▸src/pages/ - page components
- ▸ionic.config.json - main Ionic project config
- ▸package.json - dependencies and scripts
Monetization
- ▸Build Ionic templates or starter apps
- ▸Offer hybrid mobile app development services
- ▸Create reusable component libraries
- ▸Consulting for cross-platform apps
- ▸Rapid prototyping for clients
Productivity Tips
- ▸Use prebuilt components for faster development
- ▸Leverage Ionic CLI for scaffolding and builds
- ▸Use theme variables for consistency
- ▸Lazy-load pages for performance
- ▸Use TypeScript for type safety
Basic Concepts
- ▸Components: IonButton, IonCard, IonInput, IonList, IonModal
- ▸Navigation: IonRouterOutlet, IonTabs, IonMenu
- ▸Theming: CSS variables, light/dark modes, global variables
- ▸Styling: Ionic CSS utilities, classes, scoped CSS
- ▸Responsive design: mobile-first layouts, breakpoints