Ionic React: Cross-Platform Mobile Development with Ionic

Focused View

Mirko Nasato

9:30:00

22 View

01 - Introduction

001 What is Ionic.mp4

05:37

002 Required Tools.html

003 Course Advice.html

02 - From React to Ionic

001 Overview.mp4

01:32

002 Project Setup Hello World App.mp4

03:55

002 hello-world.zip

003 Adding Ionic to a React Project.mp4

05:09

004 Toast Messages.mp4

05:16

005 Adaptive Styling.mp4

06:32

006 Theme Customisation.mp4

08:59

007 Ionicons.mp4

03:46

008 Full-Page Ionic Apps.mp4

06:43

009 Source Code.html

03 - Developing a Complete Single-Screen App

001 Overview.mp4

02:25

002 Project Setup Biorhythm Calculator App.mp4

02:36

002 biorhythm-calculator.zip

003 Source Code.html

004 Input Fields.mp4

05:43

005 Field Labels.mp4

03:37

006 Date Fields.mp4

05:09

007 Target Date.mp4

03:59

008 Card Component.mp4

05:15

009 Day.js.mp4

02:53

010 Unit Tests.mp4

08:59

011 Unit Tests (part 2).mp4

02:49

012 Biorhythm Results.mp4

03:03

013 Local Storage Custom Hook.mp4

06:13

014 Recharts.mp4

06:58

015 Recharts (part 2).mp4

09:40

016 Component Styles.mp4

05:51

017 Production Build and Deploy.mp4

05:14

04 - Building Android and iOS Apps with Capacitor

001 Capacitor Installation.mp4

04:25

002 Android Studio Installation.mp4

03:42

003 Android Versions.mp4

05:59

004 Android Emulator.mp4

05:47

005 Android Build and Run.mp4

07:09

006 Physical Android Device.mp4

03:29

007 Capacitor Sync.mp4

02:49

008 Live Reload on Android.mp4

04:55

009 Chrome Remote Debugging.mp4

02:37

010 Xcode and Cocoapods Installation.mp4

02:55

011 iOS Simulator.mp4

02:42

012 iOS Build and Run.mp4

05:40

013 Physical iOS Device.mp4

06:48

014 Live Reload on iOS.mp4

02:34

015 Safari Web Inspector.mp4

01:52

016 App Icon and Splash Screen Images.mp4

07:30

05 - Using the Ionic CLI to Create New Projects

001 Note IonicCapacitor Versions.html

002 Ionic CLI Installation and Usage.mp4

05:13

003 Generated Project Overview.mp4

09:40

004 Generated Code Tweaks.mp4

06:40

005 Livereload with Capacitor.mp4

07:07

006 Why TypeScript.mp4

13:46

007 More Project Templates.html

06 - Page Navigation and Routing

001 Project Code.html

002 Overview and Project Setup.mp4

04:55

002 daily-moments.zip

003 React Router.mp4

09:12

004 IonReactRouter.mp4

04:46

005 IonTabs.mp4

05:06

006 IonList.mp4

05:01

007 Route Params.mp4

06:17

008 Back Button.mp4

03:37

009 Login Flow.mp4

08:31

010 Grouping Protected Pages.mp4

09:34

011 Sharing State with React Context.mp4

07:11

012 Handling Page Not Found.mp4

03:26

07 - Authentication with Firebase

001 Important Firebase SDK Version.html

002 Creating a Firebase Project.mp4

07:39

003 Enabling Authentication and User Sign-In.mp4

06:16

004 Login Form.mp4

05:38

005 Handling Login Errors.mp4

08:05

006 Firebase AuthState Observer.mp4

08:44

007 AuthState Loading.mp4

04:38

008 Logout Functionality.mp4

03:28

009 Registering a New User.mp4

08:00

010 User ID in Authentication State.mp4

12:12

08 - Storing Data with Cloud Firestore

001 Creating a Database.mp4

04:00

002 Cloud Firestore Data Model.mp4

06:06

003 Fetching a Firestore Collection.mp4

09:31

004 Fetching a Firestore Document.mp4

06:48

005 Entry Interface.mp4

06:45

006 Keeping Separate Data for Each User.mp4

10:10

007 Firestore Security Rules.mp4

09:06

008 Avoiding Route Path Conflicts.mp4

05:44

009 Floating Action Buttons (FABs).mp4

03:13

010 Adding a Firestore Document.mp4

06:59

011 Listening for Data Updates.mp4

05:29

012 Deleting a Firestore Document.mp4

04:29

013 Update Date Field with Ionic 6.html

014 Adding a Date Field.mp4

08:13

015 Query Order and Limit.mp4

06:18

09 - Storing Image Files with Cloud Storage

001 Enabling Cloud Storage.mp4

06:45

002 Allowing Users to Select a Picture.mp4

09:15

003 Hiding the File Input Field.mp4

07:48

004 Uploading Files to Cloud Storage.mp4

09:17

005 Displaying Images from Cloud Storage.mp4

05:25

10 - Using the Native Camera API

001 Testing the App on Android.mp4

03:50

002 Update Camera Plugin with Capacitor 4.html

003 Using the Camera API.mp4

08:15

004 Camera Options and Errors.mp4

06:30

005 Enabling Different Features by Platform.mp4

06:33

006 Upgrading to Firebase v9.html

11 - Publishing to the App Stores

001 Preparing for an Android Release.mp4

06:13

002 Building a Signed APK.mp4

07:56

003 Building an Android App Bundle.mp4

04:57

004 Publishing to Google Play.mp4

05:34

005 iOS Certificates and Running on a Physical iPhone.mp4

05:35

006 Publishing to the App Store.mp4

09:48

12 - Conclusion

001 Congratulations and Bonus.html

Description

Create mobile web and native Android/iOS apps from a single codebase with React, Ionic Framework, Capacitor, Firebase.

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

Who is this for?

React developers who want to build mobile apps

What You Need to Know?

Familiarity with modern web development: HTML, CSS, JavaScript, npm

Familiarity with React, including hooks (at least useState and useEffect)

More details

Description
Note: this course was recorded using Ionic v6 and Capacitor v4. It has not yet been updated for the latest Ionic v7 and Capacitor v5.
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 normal React app in plain JavaScript, 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 using Capacitor. The Capacitor section includes essential tips on how to debug your application while it's running on Android and iOS.
You will then see how you can use the Ionic CLI to quickly generate a new Ionic React project, including with TypeScript support.
Later on you will learn how to build a more complex application, featuring page navigation / routing and integration with the Firebase API, handling user authentication, storing data in the Cloud Firebase database, and uploading user-generated files such as pictures to Cloud Storage.
Finally, the course will show how to publish a mobile app to the Google Play store for Android, and the Apple App Store for iOS.
Who this course is for:
React developers who want to build mobile apps

User Reviews

Rating

average 0

Total votes0

Focused display

Mirko has 20 years of experience developing software for a wide range of companies, from startups to large, high-profile organisations, more recently as Lead Developer and Architect.He is familiar with a number of programming languages and the full application stack, from backend services to web and mobile apps. Mirko also holds a Postgraduate Diploma in Software Development from the Open University.He is always keen to learn new technologies and enjoys teaching on Udemy because it gives him the opportunity to share his experience with thousands of other developers.He runs his consultancy company, Encoded Knowledge Ltd, based in London, U.K.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.