| description | command | resources |
|---|---|---|
| install the latest version of the Ionic CLI | npm install -g @ionic/cli | |
| Structure | src/index.tsx = main entry point public/index.html | https://ionicframework.com/docs/react/quickstart |
| Build blank App with capacitor | Command Format: $ ionic start [TEMPLATE] --type=[FRAMEWORK] --capacitor | |
| [TEMPLATES] | sidemenu | A starting project with a side menu with navigation in the content area blank | A blank starter project list | A starting project with a list my-first-app | An example application that builds a camera with gallery conference | A kitchen-sink application that shows off all Ionic has to offe(Move up and down to reveal more choices) | These are the available templates |
| [FRAMEWORK] | Angular | https://angular.io React | https://reactjs.org Vue | https://vuejs.org | These are the available frameworks |
| Files | ||
| src/index.tsx | main entry point | |
| App.tsx | This is our first React component and will be used in the bootstrapping process for our React app | |
| Create App Examples: | ||
| Agular | ionic start blankApp blank --type=angular --capacitor | |
| React | ionic start blankApp blank --type=react --capacitor | |
| Start The App | ||
| Start Local Server | ionc serve | https://ionicframework.com/docs/cli/commands/serve |
| Start Lab | ionic lab | test to see how it looks in IOS and Android http://localhost:8200/ |
| Create Pages | ionic generate pages/[PAGENAME] | |
| example | ionic g page pages/addition | |
| example | ionic g page pages/movieDetails | |
| No spec.ts files | --spec=false | Use this flag in your page command to avoid creating a spec.ts file |
| Create Services | ||
| example | ionic g service services/movie | |
| Imports | ||
| import React from 'react'; | we first must import React to use JSX. | |
| import { Route } from 'react-router-dom'; | We're importing Route, which is how we’ll match the app’s URL with the components we want to render | |
| import { IonApp, IonRouterOutlet } from '@ionic/react'; | ||
| import { IonReactRouter } from '@ionic/react-router'; | IonReactRouter is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences | |
| import Home from './pages/Home'; | an example component called Home/tsx - This is a component that will be able to navigate to in our app | |
| Router | ||
| <IonReactRouter>Example: | <IonReactRouter> <IonRouterOutlet> <Route path="/home" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonReactRouter> | |
| Another example of IonReactRouter | <IonReactRouter> <IonRouterOutlet> <Route exact path="/home"> <Home /> </Route> <Route exact path="/"> <Redirect to="/home" /> </Route> </IonRouterOutlet> </IonReactRouter> | |
| React Data Binding: | One thing that stands out is that in React, to do data-binding, the value is passed in curly braces ({}) (see above example of IonReactRouter | |
| Import specific Ionic components you will need to import in order to be used within inside a component | import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; | <IonPage> <IonHeader> <IonToolbar> <IonTitle></IonTitle> </IonToolbar> </IonHeader> <IonContent fullscreen> <IonHeader collapse="condense"> <IonToolbar> <IonTitle size="large">Edwin Aquino - Resume</IonTitle> </IonToolbar> </IonHeader> <ExploreContainer /> </IonContent> </IonPage> |
| import a component from another component | import ExploreContainer from '../components/ExploreContainer'; | import from src/components/ExploreContainer.tsx |
| <IonPage> | When creating your own pages, don't forget to have IonPage be the root component for them. Having IonPage be the root component is important because it helps ensure transitions work properly as well as provides the base CSS the Ionic components rely on. | |
| Import ALL IONIC components | import * as IonComponents from '@ionic/react'; | import * as IonComponents from '@ionic/vue'; |
| Component Name | Import Text Usage | HTML Component Usage |
| NOTE: | Source: https://ionicframework.com/docs/api - API Index | Go to the official ionic page for the latest information about each component. This list is as of May 2021. |
| ion-action-sheet | IonActionSheet | <IonActionSheet> |
| ion-alert | IonAlert | <IonAlert> |
| ion-app | IonApp | <IonApp> |
| ion-avatar | IonAvatar | <IonAvatar> |
| ion-back-button | IonBackButton | <IonBackButton> |
| ion-backdrop | IonBackdrop | <IonBackdrop> |
| ion-badge | IonBadge | <IonBadge> |
| ion-button | IonButton | <IonButton> |
| ion-buttons | IonButtons | <IonButtons> |
| ion-card | IonCard | <IonCard> |
| ion-card-content | IonCardContent | <IonCardContent> |
| ion-card-header | IonCardHeader | <IonCardHeader> |
| ion-card-subtitle | IonCardSubtitle | <IonCardSubtitle> |
| ion-card-title | IonCardTitle | <IonCardTitle> |
| ion-checkbox | IonCheckbox | <IonCheckbox> |
| ion-chip | IonChip | <IonChip> |
| ion-col | IonCol | <IonCol> |
| ion-content | IonContent | <IonContent> |
| ion-datetime | IonDatetime | <IonDatetime> |
| ion-fab | IonFab | <IonFab> |
| ion-fab-button | IonFabButton | <IonFabButton> |
| ion-fab-list | IonFabList | <IonFabList> |
| ion-footer | IonFooter | <IonFooter> |
| ion-grid | IonGrid | <IonGrid> |
| ion-header | IonHeader | <IonHeader> |
| ion-img | IonImg | <IonImg> |
| ion-infinite-scroll | IonInfiniteScroll | <IonInfiniteScroll> |
| ion-infinite-scroll-content | IonInfiniteScrollContent | <IonInfiniteScrollContent> |
| ion-input | IonInput | <IonInput> |
| ion-item | IonItem | <IonItem> |
| ion-item-divider | IonItemDivider | <IonItemDivider> |
| ion-item-group | IonItemGroup | <IonItemGroup> |
| ion-item-option | IonItemOption | <IonItemOption> |
| ion-item-options | IonItemOptions | <IonItemOptions> |
| ion-item-sliding | IonItemSliding | <IonItemSliding> |
| ion-label | IonLabel | <IonLabel> |
| ion-list | IonList | <IonList> |
| ion-list-header | IonListHeader | <IonListHeader> |
| ion-loading | IonLoading | <IonLoading> |
| ion-menu | IonMenu | <IonMenu> |
| ion-menu-button | IonMenuButton | <IonMenuButton> |
| ion-menu-toggle | IonMenuToggle | <IonMenuToggle> |
| ion-modal | IonModal | <IonModal> |
| ion-nav | IonNav | <IonNav> |
| ion-nav-link | IonNavLink | <IonNavLink> |
| ion-note | IonNote | <IonNote> |
| ion-picker | IonPicker | <IonPicker> |
| ion-popover | IonPopover | <IonPopover> |
| ion-progress-bar | IonProgressBar | <IonProgressBar> |
| ion-radio | IonRadio | <IonRadio> |
| ion-radio-group | IonRadioGroup | <IonRadioGroup> |
| ion-range | IonRange | <IonRange> |
| ion-refresher | IonRefresher | <IonRefresher> |
| ion-refresher-content | IonRefresherContent | <IonRefresherContent> |
| ion-reorder | IonReorder | <IonReorder> |
| ion-reorder-group | IonReorderGroup | <IonReorderGroup> |
| ion-ripple-effect | IonRippleEffect | <IonRippleEffect> |
| ion-route | IonRoute | <IonRoute> |
| ion-route-redirect | IonRouteRedirect | <IonRouteRedirect> |
| ion-router | IonRouter | <IonRouter> |
| ion-router-link | IonRouterLink | <IonRouterLink> |
| ion-router-outlet | IonRouterOutlet | <IonRouterOutlet> |
| ion-row | IonRow | <IonRow> |
| ion-searchbar | IonSearchbar | <IonSearchbar> |
| ion-segment | IonSegment | <IonSegment> |
| ion-segment-button | IonSegmentButton | <IonSegmentButton> |
| ion-select | IonSelect | <IonSelect> |
| ion-select-option | IonSelectOption | <IonSelectOption> |
| ion-skeleton-text | IonSkeletonText | <IonSkeletonText> |
| ion-slide | IonSlide | <IonSlide> |
| ion-slides | IonSlides | <IonSlides> |
| ion-spinner | IonSpinner | <IonSpinner> |
| ion-split-pane | IonSplitPane | <IonSplitPane> |
| ion-tab | IonTab | <IonTab> |
| ion-tab-bar | IonTabBar | <IonTabBar> |
| ion-tab-button | IonTabButton | <IonTabButton> |
| ion-tabs | IonTabs | <IonTabs> |
| ion-text | IonText | <IonText> |
| ion-textarea | IonTextarea | <IonTextarea> |
| ion-thumbnail | IonThumbnail | <IonThumbnail> |
| ion-title | IonTitle | <IonTitle> |
| ion-toast | IonToast | <IonToast> |
| ion-toggle | IonToggle | <IonToggle> |
| ion-toolbar | IonToolbar | <IonToolbar> |
| ion-virtual-scroll | IonVirtualScroll | <IonVirtualScroll> |
| RESOURCES | Ionic pages | |
| https://www.javatpoint.com/ionic-camera | ||
| css-utilities | https://ionicframework.com/docs/layout/css-utilities |