2020欧洲杯在线网址

Search docs/

Your First Ionic App: React

The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.

2020欧洲杯在线网址Here’s the finished app running on all 3 platforms:

What We'll Build

2020欧洲杯在线网址We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.

2020欧洲杯在线网址Highlights include:

  • One React-based codebase that runs on the web, iOS, and Android using Ionic Framework UI components.
  • Deployed as a native iOS and Android mobile app using Capacitor, Ionic's official native app runtime.
  • Photo Gallery functionality powered by the Capacitor Camera, Filesystem, and Storage APIs.

It’s easy to get started. Find the complete app code referenced in this guide on GitHub.

Download Required Tools

Download and install these right away to ensure an optimal Ionic development experience:

  • Node.js for interacting with the Ionic ecosystem. .
  • A code editor for... writing code! We are fans of or Ionic Studio.
  • Command-line interface/terminal (CLI):
    • Windows users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
    • Mac/Linux users, virtually any terminal will work.

Install Ionic Tooling

Run the following in the command line terminal to install the Ionic CLI (ionic), native-run, used to run native binaries on devices and simulators/emulators, and cordova-res2020欧洲杯在线网址, used to generate native app icons and splash screens:

2020欧洲杯在线网址To open a terminal in either Visual Studio Code or Ionic Studio, go to Terminal -> New Terminal.

$ npm install -g ionic native-run cordova-res

The -g option means install globally. When packages are installed globally, permission errors can occur. Consider setting up npm to operate globally without elevated permissions. Running the command prompt as an Admin (or using sudo2020欧洲杯在线网址 on Mac & Linux) with npm is not recommended.

Create an App

Next, create an Ionic React app that uses the “Tabs” starter template and adds Capacitor for native functionality:

$ ionic start photo-gallery tabs --type=react --capacitor

This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!

Next, change into the app folder:

$ cd photo-gallery

React Hooks and PWA Elements

2020欧洲杯在线网址Next, we will install a couple of helper libraries for working with Capacitor.

The React Hooks library makes working with Capacitor in React a breeze by providing some custom hooks for each of the specific plugins.

Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic PWA Elements library.

Both packages are separate dependencies, so install them next:

$ npm install @ionic/react-hooks @ionic/pwa-elements

After installation, open up the project in your code editor of choice.

Next, import @ionic/pwa-elements by editing src/index.tsx.

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

That’s it! Now for the fun part - let’s see the app in action.

Run the App

Run this command in your shell:

$ ionic serve

2020欧洲杯在线网址And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.

There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!

Before and after going through this tutorial

Open /src/pages/Tab2.tsx. We see:

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Tab Two</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <!-- some filler -->
  </IonContent>
</IonPage>

IonHeader represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:

<IonTitle>Photo Gallery</IonTitle>

We put the visual aspects of our app into <IonContent>. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a floating action button (FAB). First, update the imports at the top of the page to include the Camera icon as well as the some Ionic components we'll use shortly:

import { camera, trash, close } from 'ionicons/icons';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, 
         IonFab, IonFabButton, IonIcon, IonGrid, IonRow, 
         IonCol, IonImg, IonActionSheet } from '@ionic/react';

Then, add the FAB to the bottom of the page. Use the camera image as the icon, and call the takePhoto() function when this button is clicked (to be implemented soon):

<IonContent>
  <IonFab vertical="bottom" horizontal="center" slot="fixed">
    <IonFabButton onClick={() => takePhoto()}>
      <IonIcon icon={camera}></IonIcon>
    </IonFabButton>
  </IonFab>
</IonContent>

We’ll be creating the takePhoto2020欧洲杯在线网址 method and the logic to use the Camera and other native features in a moment.

Next, open src/App.tsx then import the images icon:

import { images, flash, send } from 'ionicons/icons';

Within the tab bar (<IonTabBar>), change the label to “Photos” and the icon to images for the middle tab button:

<IonTabButton tab="tab2" href="/tab2">
  <IonIcon icon={images} />
  <IonLabel>Photos</IonLabel>
</IonTabButton>

In Ionic React, icons are imported individually from ionicons/icons and set to the icon prop.

2020欧洲杯在线网址That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.

Previous
Quickstart
Next
Taking Photos