Ionic React: Cross-Platform Mobile Development with Ionic 5
4.6 (85 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
525 students enrolled

Ionic React: Cross-Platform Mobile Development with Ionic 5

Create mobile web apps and native Android/iOS apps from a single code base with React, Ionic Framework 5, and Firebase.
4.6 (85 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
525 students enrolled
Created by Mirko Nasato
Last updated 6/2020
English
English
Current price: $83.99 Original price: $119.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 5 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Develop mobile apps using web technologies with Ionic and React
  • Build a mobile website as well as Android and iOS native apps from the same code base
  • Integrate with a Firebase backend to handle user authentication and store data
Course content
Expand all 96 lectures 10:22:26
+ Developing a Complete Single-Page App
15 lectures 01:49:32
Overview and Project Setup
05:14
Input Fields
07:36
Label Positioning
03:49
Datetime Component
09:32
Card Component
04:10
Extracting a Separate Component
05:34
Date Manipulation with Day.js
08:02
Unit Testing
13:41
Displaying The Results
05:05
Target Date Selection
01:57
Saving Data to Local Storage
08:40
Charting with Recharts
08:16
Plotting Real Data
12:41
Styling Components
07:02
Custom CSS Variables
08:13
+ Building for the Web, Android and iOS
14 lectures 01:27:08
Publishing as a Web App
06:14
Capacitor Setup
08:10
Android Studio Installation
06:49
Android Emulator Setup
06:04
Building for Android with Capacitor
08:23
Running on a Physical Android Device
04:14
Hiding the Splash Screen
08:54
Capacitor Livereload on Android
06:17
Chrome Remote Debugging
03:35
Xcode Installation
03:16
Building for iOS with Capacitor
05:47
Capacitor Livereload on iOS
02:45
Safari Remote Debugging
07:57
Icon and Splash Screen Images
08:43
+ Using the Ionic CLI to Create New Projects
6 lectures 42:42
Ionic CLI Installation and Usage
05:13
Generated Project Overview
09:39
Generated Code Tweaks
06:40
Livereload with Capacitor
07:07
Why TypeScript
13:46
More Project Templates
00:17
+ Page Navigation and Routing
11 lectures 01:07:34
Overview and Project Setup
04:55
React Router
09:11
IonReactRouter
04:46
IonTabs
05:06
IonList
05:01
Route Params
06:17
Back Button
03:37
Login Flow
08:31
Grouping Protected Pages
09:33
Sharing State with React Context
07:11
Handling Page Not Found
03:26
+ Authentication with Firebase
9 lectures 01:04:40
Creating a Firebase Project
07:39
Enabling Authentication and User Sign-In
06:16
Login Form
05:38
Handling Login Errors
08:05
Firebase AuthState Observer
08:44
AuthState Loading
04:38
Logout Functionality
03:28
Registering a New User
08:00
User ID in Authentication State
12:12
+ Storing Data with Cloud Firestore
14 lectures 01:32:49
Creating a Database
03:59
Cloud Firestore Data Model
06:06
Fetching a Firestore Collection
09:31
Fetching a Firestore Document
06:48
Entry Interface
06:45
Keeping Separate Data for Each User
10:10
Firestore Security Rules
09:05
Avoiding Route Path Conflicts
05:44
Floating Action Buttons (FABs)
03:13
Adding a Firestore Document
06:59
Listening for Data Updates
05:29
Deleting a Firestore Document
04:29
Adding a Date Field
08:13
Query Order and Limit
06:18
+ Storing Image Files with Cloud Storage
5 lectures 38:30
Enabling Cloud Storage
06:45
Allowing Users to Select a Picture
09:15
Hiding the File Input Field
07:48
Uploading Files to Cloud Storage
09:17
Displaying Images from Cloud Storage
05:25
+ Using the Native Camera API
4 lectures 25:08
Testing the App on Android
03:50
Using the Camera API
08:15
Camera Options and Errors
06:30
Enabling Different Features by Platform
06:33
Requirements
  • Familiarity with web development: HTML, CSS, and JavaScript
  • Familiarity with React, including hooks (at least useState and useEffect)
Description

Ionic React lets you build mobile websites as well as native Android and iOS apps from a single code base, using familiar web technologies such as JavaScript/TypeScript, HTML, and CSS.

This course will introduce you to Ionic step by step, starting from a standard React app and gradually adding more and more Ionic components.

Then it will guide you through developing a simple but complete app that includes some form elements and a chart (based on Recharts), and show you how to build this app not only as a mobile website but also as a native Android and iOS app with Capacitor.

In the latter sections, you will learn how to build a more complex application featuring page navigation / routing and integration with a Firebase backend, including handling user authentication, storing data in the Cloud Firebase database, and uploading user-generated files to Cloud Storage.

This course is based on version 5 of the Ionic Framework.

Who this course is for:
  • React developers who want to build mobile apps