5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

| Blog Home (/blog)

Ionic Framework Tutorial: Build your

rst cross-platform app
Dec 01, 2020 - 13 min read

Ryan Thelin

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

Master app UI development

https://www.educative.io/blog/ionic-framework-tutorial#what 1/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

Add Ionic to your skillset with hands-on

practice with common front-end
problems.

Developing Mobile Apps with Ionic and

React
(https://www.educative.io/courses/devel
oping-mobile-apps-with-ionic-and-
react )

What is Ionic?

Ionic is an open-source software development kit (SDK) used to

develop mobile, desktop, or Progressive Web Applications (PWA)
(https://www.educative.io/blog/build-modern-apps-progressive-web-
apps). 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.

https://www.educative.io/blog/ionic-framework-tutorial#what 2/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

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

How does Ionic work?

Ionic apps are built by combining built-in UI building blocks called
Components. Ionic has thousands of UI Components in its library
that are used to implement common forms like buttons, alerts, or
input prompts. All built-in Components behave and look the same
regardless of the platform.

https://www.educative.io/blog/ionic-framework-tutorial#what 3/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

Android iOS

Component comparisons across different mobile platforms

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>
);

https://www.educative.io/blog/ionic-framework-tutorial#what 4/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

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.

Cordova

Has tools for native apps and platform

emulators, but no UI SDK.

Ionic

Easy UI development and intuitive

control, but no support for native apps.

How Cordova and Ionic t together

Other frameworks
Ionic is often paired with other front-end frameworks like React and
Angular.

React is a favorite front-end

framework for mobile application
development. Ionic supports a native
React version with a setup identical to
standard React apps.

https://www.educative.io/blog/ionic-framework-tutorial#what 5/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

Ionic React leverages DOM specific

React functions with react-dom and
implements React Router
(https://www.educative.io/blog/react-
router-tutorial) behind the scenes for
routing and navigation. React Ionic is
often used because of how closely it
behaves and controls like standard
React apps.

Angular is a front-end framework and

is commonly used for enterprise apps.
It is less beginner-friendly, but Ionic
offers tools and APIs designed to help
Angular developers seamlessly
integrate the two technologies.

Ionic 4 and later use the official

Angular stack for building and routing
to ensure your Angular Ionic app fits
perfectly with other Angular-focused
tools.

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!

https://www.educative.io/blog/ionic-framework-tutorial#what 6/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

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.

https://www.educative.io/blog/ionic-framework-tutorial#what 7/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

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.

Keep learning about Ionic

Speed up your app development and reach a larger user base by
learning Ionic. Eduactive’s hands-on courses help get you up to
speed in half the time, without scrubbing through tutorial videos.

Developing Mobile Apps with Ionic and React

(https://www.educative.io/courses/developing-mobile-apps-
with-ionic-and-react)
https://www.educative.io/blog/ionic-framework-tutorial#what 8/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

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.

ionic-react-example-app-educative.zip
(/api/page/6296094892359680/image/download/6280028170485760/educative
-code-widget.zip)
(/api/page/6296094892359680/image/download/6280028170485760/educative
-code-widget.zip)

https://www.educative.io/blog/ionic-framework-tutorial#what 9/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

Tour of Ionic React code

Let’s take a deeper look at this app’s code.

index.tsx
Open up the index.tsx file. This file is long, but the most important
parts are at the top.

1 import React from 'react';

2 import ReactDOM from 'react-dom';
3 import App from './App';
4 import * as serviceWorker from './serviceWo
5
6 ReactDOM.render(<App />, document.getEleme

index.tsx

https://www.educative.io/blog/ionic-framework-tutorial#what 10/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

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.

index.html
This file contains many tags in <head> that control how the
application renders on mobile devices. Ionic has already optimized
this file so you should rarely have to alter it. Instead, make changes
to the index.tsk file.

1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8" />
6 <title>Ionic App</title>
7
8 <base href="/" />
9
10 <meta name="color-scheme" content="light
11 <meta name="viewport"
12 content="viewport-fit=cover, width=dev
13 <meta name="format-detection" content="t
14 <meta name="msapplication-tap-highlight"
15
16 <link rel="manifest" href="%PUBLIC_URL%/m
17 <link rel="shortcut icon" type="image/png
18
19 <!-- add to homescreen for ios -->
20 <meta name="apple-mobile-web-app-capable
21 <meta name="apple-mobile-web-app-title"
22 <meta name="apple-mobile-web-app-status-
23 </head>
24
25 <body>
26 <div id="root"></div>
27 </body>
28
29 </html>
30

index.html

https://www.educative.io/blog/ionic-framework-tutorial#what 11/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

The body tag on line 25-27 contains a div paired to root to allow
index.html to connect with index.tsx .

App.tsx
This file defines the App component. This is really where your
application’s React code starts. App is defined as a constant arrow
function, of the type React.FC . FC is short for FunctionComponent .

This function returns HTML to define the component. Most Ionic

code appears in this HTML-like form.

1 const App: React.FC = () => {

2
3 return (
4 <IonApp>
5 <IonReactRouter>
6 <IonSplitPane contentId="main">
7 <Menu />
8 <IonRouterOutlet id="main">
9 <Route path="/page/:name" compo
10 <Redirect from="/" to="/page/I
11 </IonRouterOutlet>
12 </IonSplitPane>
13 </IonReactRouter>
14 </IonApp>
15 );
16 };
17
18 export default App;
19

App.tsx

https://www.educative.io/blog/ionic-framework-tutorial#what 12/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

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 .

Page.tsx
Page is another component similar to App . The primary difference
is that the FunctionComponent is a generic of type
RouteComponentProps . This is what allows the Router to pass those

https://www.educative.io/blog/ionic-framework-tutorial#what 13/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

route parameters.

In this case, it is expecting that route props to contain just a name,

which it passes into the arrow function as the value match.

1 const Page: React.FC<RouteComponentProps<{

2 return (
3 <IonPage>
4 <IonHeader>
5 <IonToolbar>
6 <IonButtons slot="start">
7 <IonMenuButton />
8 </IonButtons>
9 <IonTitle>{match.params.name}</Io
10 </IonToolbar>
11 </IonHeader>
12
13 <IonContent>
14 <IonHeader collapse="condense">
15 <IonToolbar>
16 <IonTitle size="large">{match.
17 </IonToolbar>
18 </IonHeader>
19 <ExploreContainer name={match.param
20 </IonContent>
21 </IonPage>
22 );
23 };
24

Page.tsx

Menu.tsx
Now open the menu.tsx file. This is where the side menu
appearance and categories are defined.

Near the top of the file, it defines an AppPage interface, used to hold
common properties about a page, such as its URL, icons, and title.

1 interface AppPage {
2 url: string;
3 iosIcon: string;
4 mdIcon: string;
5 title: string;
6 }

Properties within Menu.tsx

Below is a selection of pages for each of our menu categories.

1 const appPages: AppPage[] = [

2 {
3 title: 'Inbox',
https://www.educative.io/blog/ionic-framework-tutorial#what 14/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app
4 url: '/page/Inbox',
5 iosIcon: mailOutline,
6 mdIcon: mailSharp
7 },
8 {
9 title: 'Outbox',
10 url: '/page/Outbox',
11 iosIcon: paperPlaneOutline,
12 mdIcon: paperPlaneSharp
13 },
14 {
15 title: 'Favorites',
16 url: '/page/Favorites',
17 iosIcon: heartOutline,
18 mdIcon: heartSharp
19 },
20 {
21 title: 'Archived',
22 url: '/page/Archived',
23 iosIcon: archiveOutline,
24 mdIcon: archiveSharp
25 },
26 {
27 title: 'Trash',
28 url: '/page/Trash',
29 iosIcon: trashOutline,
30 mdIcon: trashSharp
31 },

Menu categories in Menu.tsx

Next, it defines the labels visible in the menu:

const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel',

'Reminders'];

Below that is the React markup:

1 const Menu: React.FunctionComponent<MenuPro

2
3 return (
4 <IonMenu contentId="main" type="overlay
5 <IonContent>
6 <IonList id="inbox-list">
7 <IonListHeader>Inbox</IonListHead
8 <IonNote>[email protected]</
9 {appPages.map((appPage, index) =
10 return (
11 <IonMenuToggle key={index} a
12 <IonItem className={select
13 <IonIcon slot="start" ico
14 <IonLabel>{appPage.title
15 </IonItem>
16 </IonMenuToggle>
17 );
18 })}
19 </IonList>
20
21 <IonList id="labels-list">
22 <IonListHeader>Labels</IonListHe
23 {labels.map((label, index) => (
24 <IonItem lines="none" key={ind
25 <IonIcon slot="start" icon={
26 <IonLabel>{label}</IonLabel>
27 </IonItem>
28 ))}
29 </IonList>
30 </IonContent>
31 </IonMenu>

https://www.educative.io/blog/ionic-framework-tutorial#what 15/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app
React markup in Menu.tsx

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 (https://www.educative.io/blog/react-hooks-

tutorial-todo-list) 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
(https://www.educative.io/courses/developing-mobile-apps-with-
ionic-and-react) course. This course hands-on lessons on the
creation, optimization, and deployment of cutting-edge Ionic apps.

https://www.educative.io/blog/ionic-framework-tutorial#what 16/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

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
Getting started with React and TypeScript
(https://www.educative.io/blog/react-and-typescript)
React Router Tutorial: Adding Navigation to your React App
(https://www.educative.io/blog/react-router-tutorial)
How to Design a Web Application: Software Architecture 101
(https://www.educative.io/blog/how-to-design-a-web-
application-software-architecture-101)

WRITTEN BY

Ryan Thelin

Join a community of 270,000 monthly readers. A free, bi-monthly email

with a roundup of Educative's top articles and coding tips.

Full Name

E-mail

Subscribe

More from Educative:

Spring Framework Tutorial: React Tutorial: How to build

Getting Started with Spring the Instagram UI with React

https://www.educative.io/blog/ionic-framework-tutorial#what 17/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

Today, we help you start your Today, we'll help you get familiar
Spring Framework journey by with React by building Instagram's
exploring the advantages and… UI.

Ryan Thelin Ryan Thelin

May 4 · 2021 Apr 28 · 2021
(/blog/spring-framework-tutorial) (/blog/react-instagram-tutorial)

Advanced YAML Syntax

Cheatsheet

Today, we explore some advanced

YAML syntax features to help you
impress your next interviewer.

Ryan Thelin
May 5 · 2021
(/blog/advanced-yaml-syntax-cheatsheet)

(/)

Learn in-demand tech skills in half the time

LEARN

Courses

(/explore)

Early Access Courses

(/explore/early-access)

Edpresso

(/edpresso)

Blog

(/blog)

Pricing

(/unlimited)

Free Trial New

(/trial)

https://www.educative.io/blog/ionic-framework-tutorial#what 18/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app

For Business
(/business)

CodingInterview.com

(//codinginterview.com/)

SCHOLARS H IPS

For Students

(/github-students)

For Educators

(/github-educators)

CONTRIBUTE

Become an Author

(/authors)

Become an Af liate

(/af liate)

LEGAL

Privacy Policy

(/privacy)

Terms of Service

(/terms)

Business Terms of Service

(/enterprise-terms)

MORE

Our Team

(/team)

Careers

(//angel.co/educativeinc/jobs)

For Bootcamps

(//try.educative.io/bootcamps)

Blog for Business

(/blog/enterprise)

Quality Commitment

(/quality)

FAQ

(/courses/educative-faq)

Contact Us

https://www.educative.io/blog/ionic-framework-tutorial#what 19/20
5/8/2021 Ionic Framework Tutorial: Build your first cross-platform app
(/contactUs)

(//linkedin.com/company/educative- (//www.youtube.com/channel/UCT_8FqzTIr2Q1BOtvX_DPPw/?
educativeinc) (//twitter.com/educativeinc) (//educativesess
inc/) sub_con rmation=1)

Copyright ©2021 Educative, Inc. All rights reserved.

https://www.educative.io/blog/ionic-framework-tutorial#what 20/20