Home/Blog/Web Development/Ionic Framework Tutorial: Build your first cross-platform app

Ionic Framework Tutorial: Build your first cross-platform app

Ryan Thelin

13 min read

content

What is Ionic?How does Ionic work?Cordova Other frameworks Getting started with Ionic Installation Hello World Keep learning about Ionic Make your first Ionic App Tour of Ionic React code index.tsx index.html App.tsx Page.tsx Menu.tsx What to learn next Continue reading about React and Web App Development

The mobile app market is quickly becoming one of the best platforms to reach modern customers. A common problem faced by front-end developers is creating user interfaces (UI) that look and work well on all platforms: Android, iOS, or even as a web app.

Ionic UI software development kit is a common solution for this problem and allows front-end developers to make cross-platform apps with just a single codebase.

Today, we’ll get you started with Ionic, show you how it fits with other web technologies, and help you create your first Ionic app.

Let’s get started!

Here’s what we’ll cover today:

What is Ionic?
How does Ionic work?
Getting started with Ionic
Make your first Ionic App
Tour of Ionic React code
What to learn next

What is Ionic?#

Ionic is an open-source software development kit (SDK) used to develop mobile, desktop, or Progressive Web Applications (PWA). It was originally built on top of AngularJS but now supports all the top front-end frameworks. You can use Ionic to build UIs for mobile apps created with Angular, React, or Vue.js.

Ionic even allows you to develop Ionic Native apps without any framework.

Ionic is used to create hybrid apps, which is essentially a web app that’s been wrapped up in a native shell. The device installs the app container locally (like a native app), but the app uses an embedded browser to connect to any mobile platform capabilities. The embedded browser and any plugins are invisible to the user.

The biggest advantage of Ionic apps (and hybrid apps in general) is that you can build a single codebase then customize it for specific platforms like iOS, Android, or Windows.

The embedded browser separates the source code from the device and acts as a translator between the behavior outlined in the code and the specifics of the device. This platform-specific tuning allows you to create apps that perform and look great on any Ionic-supported platform.

The pros of using Ionic are:

Platform-specific tuning
Backend agnostic
Extensive built-in UI options and elements
Supported by top mobile and web platforms
Easy to pick up for those experienced in Sass, CSS, or HTML

The cons are:

Slow performance for Ionic Native apps (especially for graphics-heavy apps)
Plugin dependency, apps may fully break if a plugin is missing
No hot-reloading support, must restart the app to apply changes

Components allow you to build apps faster because you don’t need to implement each common function from scratch. As a result, you can often complete all the barebones functionalities of your app in just a single sitting.

If you want to go beyond the standard library, you can also create custom Components. Custom Components can be reused across your application from then on.

Ionic Components are written in TSX, the TypeScript version of a JSX file. TSX is an extension of TypeScript that allows you to put HTML markup directly inside your code.

Here’s an example of a TSX file that uses both TypeScript and HTML.

const fruit = [
  'Apples',
  'Oranges',
  'Grapes',
  'Peaches'];
 
return (
  <div>
    <h1>Hello, Ionic</h1>
    <p>Welcome to our app!</p>
    <h2>Here are some fruits</h2>
    <ul>
      {fruit.map((f) => <li>{f}</li>)}
    </ul>
  </div>
);

Cordova#

Ionic apps become hybrid apps with the inclusion of mobile app development framework Apache Cordova or Capacitor. These programs create the embedded browser layer that allows Ionic’s web content to work in a native app. Once wrapped up with the embedded browser, your app functions as a native app and can be deployed to app stores on iOS, Android, Electron, or to the web as a PWA.

Without Cordova, web applications exist in a sandbox and cannot directly access a variety of hardware and software resources on the device. Cordova provides JavaScript API pathways to bridge the sandbox resource restrictions. Simply put, Cordova acts as a translator to allow your hybrid app to access the same resources as a native app.

Finally, Cordova can create virtual emulators of popular mobile platforms like Android or iOS to test your apps with.

Getting started with Ionic#

Now that you’ve got some background knowledge, let’s jump into the hands-on learning. First, we’ll cover how to install Ionic, then move to the traditional Hello World program.

Installation#

You’ll need Node.js installed to install Ionic. We’ll install the Cordova version of Ionic that includes both softwares.

Enter the following code into your command line.

sudo apt-get install nodejs
sudo apt-get install npm 
sudo npm install -g ionic cordova

Wait for the command to run its course, and you’ll have everything you need!

Hello World#

Now we’ll make a basic HelloWorld app to show you the ropes.

Step 1

First, create a folder, helloworld, for your project with the following command:

ionic start helloworld blank

start signals to the CLI to create a new application.

helloworld will be the directory name and app name for your project.

blank selects the built-in blank template, which contains a single bare starter page.

When prompted, if you’d like to add Cordova plugins, type N or No.

Step 2

Change your directory to the helloworld directory we’ve just created. This will allow you to make changes to the project.

cd helloworld

cd is short for “change directory”.

Step 3

Open the helloworld folder in your files. You’ll find a collection of pre-generated folders and blank file templates. Open src/page/home/home.html. We’ll edit this file in the next step.

The other files in this section will be home.scss, which is the page to write your CSS code, and home.ts, where you can write TypeScript code.

Step 4

Delete any current text in the home.html file and replace it with the following:

 <ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Project
    </ion-title>
   </ion-navbar>
  </ion-header>

  <ion-content padding>
   <h2>Hello World </h2>
  </ion-content>

The syntax for this section is nearly identical to HTML syntax. Our helloworld page is titled “Ionic Project” within the <ion-title> field. The only content in our app is the term “Hello World” within the h2 field.

Save the file changes and close home.html.

Step 5

Now, all we have to do is run your application with the following command:

ionic serve

serve runs the application within the selected directory.

Once your app is running, type localhost:8100 into your URL bar to view the web app content.

Make your first Ionic App#

Now we’ll generate a full application from the Ionicframework site and explore each piece.

First, go to the online Ionic app creator at ionicframework.com/start. Name your project firstapp, pick a theme color, and select the menu option. These options determine the start point of your Ionic project. Select React as your framework.

Next, you’ll be asked to create an account or sign in. You’ll then be given a custom-install command used to generate a program with the specifications provided.

Enter npm install followed by the custom-install command into your command line.

Then, enter cd firstapp to select the new project directory and enter ionic serve.

Your firstapp project will now be running.

If you don’t want to generate the files on your end, you can follow along using the zip file below.

Line 1: At the top of the file, you can see an import statement for the react and react-dom libraries. Every app needs to import the React namespace to use React.

Line 2: The ReactDOM namespace provides methods specific to the HTML document object model that should be called from the top-most level of the application.

Line 3: The App import is pulling in the definition of the application itself.

Line 6: Calling ReactDOM.render() says to execute the App Component and place it inside the container specified by the second parameter. That container is an HTML element whose id attribute is root, which is in the index.html file found in the public folder.

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
 
  <base href="/" />
 
  <meta name="color-scheme" content="light dark" />
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
 
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
 
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="Ionic App" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
 
<body>
  <div id="root"></div>
</body>
 
</html>

Line 3: The markup being returned. It is everything inside the return statement.

Line 4: The first thing in it is an IonApp. An IonApp is the root Ionic component that must appear on all Ionic-React pages.

Line 5: Inside of that is an IonReactRouter. This is Ionic’s thin wrapper around the React Router. The React Router is what lets you create multi-page applications with rich page transitions from a website with a single index.html file, also known as a Single Page Application (SPA).

Line 6: Inside of the IonReactRouter is an IonSplitPane component. This is the layout that provides the side-menu that collapses automatically to a hamburger menu on smaller screens.

Line 7: Inside of the IonSplitPane is a Menu component.

Line 8: As an immediate sibling to the Menu is an IonRouterOutlet. This is where your main page content appears. The Menu is on the left, and the IonRouterOutlet houses the rest of your application.

Line 9: Just inside of that are some defined routes. Think of a route as a URL. Given a path, /page/:name, the :name portion will be translated into a route variable called “name.”

Line 9: The component attribute has the component to load when the route matches. In this case, it is the Page component. The exact attribute means that this route will only match if the URL starts with a slash, followed by the word page, another slash, and then by one other word, which becomes the page “name.”

Line 10: The second route is a default route. It simply says that if the URL matched is a single slash character, redirect the application to /page/Inbox.

const Page: React.FC<RouteComponentProps<{ name: string; }>> = ({ match }) => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>{match.params.name}</IonTitle>
        </IonToolbar>
      </IonHeader>
 
      <IonContent>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">{match.params.name}</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name={match.params.name} />
      </IonContent>
    </IonPage>
  );
};

const appPages: AppPage[] = [
  {
    title: 'Inbox',
    url: '/page/Inbox',
    iosIcon: mailOutline,
    mdIcon: mailSharp
  },
  {
    title: 'Outbox',
    url: '/page/Outbox',
    iosIcon: paperPlaneOutline,
    mdIcon: paperPlaneSharp
  },
  {
    title: 'Favorites',
    url: '/page/Favorites',
    iosIcon: heartOutline,
    mdIcon: heartSharp
  },
  {
    title: 'Archived',
    url: '/page/Archived',
    iosIcon: archiveOutline,
    mdIcon: archiveSharp
  },
  {
    title: 'Trash',
    url: '/page/Trash',
    iosIcon: trashOutline,
    mdIcon: trashSharp
  },
  {
    title: 'Spam',
    url: '/page/Spam',
    iosIcon: warningOutline,
    mdIcon: warningSharp
  }
];

const Menu: React.FunctionComponent<MenuProps> = ({ selectedPage }) => {
 
  return (
    <IonMenu contentId="main" type="overlay">
      <IonContent>
        <IonList id="inbox-list">
          <IonListHeader>Inbox</IonListHeader>
          <IonNote>hi@ionicframework.com</IonNote>
          {appPages.map((appPage, index) => {
            return (
              <IonMenuToggle key={index} autoHide={false}>
                <IonItem className={selectedPage === appPage.title ? 'selected' : ''} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}>
                  <IonIcon slot="start" icon={appPage.iosIcon} />
                  <IonLabel>{appPage.title}</IonLabel>
                </IonItem>
              </IonMenuToggle>
            );
          })}
        </IonList>
 
        <IonList id="labels-list">
          <IonListHeader>Labels</IonListHeader>
          {labels.map((label, index) => (
            <IonItem lines="none" key={index}>
              <IonIcon slot="start" icon={bookmarkOutline} />
              <IonLabel>{label}</IonLabel>
            </IonItem>
          ))}
        </IonList>
      </IonContent>
    </IonMenu>
  );
};

Line 6: The IonList component formats items into a list.

Line 8: The IonNote component provides headers.

Line 9: Here is some interesting code. The array map function is called on the appPages array to transform it into a series of IonMenuToggle components, which is used to toggle a menu open or closed.

Line 12: Inside of the IonMenuToggle is an IonItem, used to group other components, which in this case are an IonIcon and IonLabel, both of which should be self-explanatory. The IonItem has a routerLink attribute set to the value of the current page’s URL. This tells Ionic’s router to switch to that page.

Line 21: Below the menu is another list, generated the same way as the menu. The difference is it uses the label array and contains no routerLinks.

And there you have it! Now that you understand each of the parts of this beginner application, you can start adding your own personal touches.

What to learn next#

Congratulations on completing your first Ionic App! The intuitive nature of this framework will allow you to quickly advance to advanced concepts and apps.

The next steps for mastering Ionic with React are to learn:

Different templates, tabs, lists, etc.
React Hooks with Ionic
Testing with Android and iOS emulators

To help you advance in half the time, Educative has created the Developing Mobile Apps with Ionic and React course. This course hands-on lessons on the creation, optimization, and deployment of cutting-edge Ionic apps. By the end, you’ll have the expertise to manipulate all of the basic Ionic templates and have intimate knowledge on how to customize components to your needs.

Happy learning!

Continue reading about React and Web App Development#

Free Resources

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

Ionic Framework Tutorial: Build your first cross-platform app

Master app UI development
Add Ionic to your skillset with hands-on practice with common front-end problems.

Developing Mobile Apps with Ionic and React

What is Ionic?#

How does Ionic work?#

Cordova#

Other frameworks#

Getting started with Ionic#

Installation#

Hello World#

Keep learning about Ionic#

Make your first Ionic App#

Tour of Ionic React code#

index.tsx#

index.html#

App.tsx#

Page.tsx#

Menu.tsx#

What to learn next#

Continue reading about React and Web App Development#

Ionic Framework Tutorial: Build your first cross-platform app

Master app UI development Add Ionic to your skillset with hands-on practice with common front-end problems. Developing Mobile Apps with Ionic and React

What is Ionic?#

How does Ionic work?#

Cordova#

Other frameworks#

Getting started with Ionic#

Installation#

Hello World#

Keep learning about Ionic#

Make your first Ionic App#

Tour of Ionic React code#

index.tsx#

index.html#

App.tsx#

Page.tsx#

Menu.tsx#

What to learn next#

Continue reading about React and Web App Development#

Master app UI development
Add Ionic to your skillset with hands-on practice with common front-end problems.

Developing Mobile Apps with Ionic and React