Ionic React: Cross-Platform Mobile Development with Ionic

Focused View

Mirko Nasato

10:24:21

126 View

1 - Introduction

1 - What is Ionic.mp4

05:37

2 - Required Tools.html

3 - Course Advice.html

2 - From React to Ionic

4 - Overview.mp4

01:32

5 - Project Setup Hello World App.mp4

03:55

5 - hello-world.zip

6 - Adding Ionic to a React Project.mp4

05:09

7 - Toast Messages.mp4

05:16

8 - Adaptive Styling.mp4

06:32

9 - Theme Customisation.mp4

08:59

10 - Ionicons.mp4

03:46

11 - FullPage Ionic Apps.mp4

06:43

12 - Source Code.html

3 - Developing a Complete SinglePage App

13 - Note Ionic Version.html

14 - Overview and Project Setup.mp4

05:14

14 - biorhythm-calculator.zip

15 - Source Code.html

16 - Input Fields.mp4

07:36

17 - Label Positioning.mp4

03:50

18 - Datetime Component.mp4

09:32

19 - Card Component.mp4

04:10

20 - Extracting a Separate Component.mp4

05:34

21 - Date Manipulation with Dayjs.mp4

08:02

22 - Unit Testing.mp4

13:41

23 - Displaying The Results.mp4

05:05

24 - Target Date Selection.mp4

01:57

25 - Saving Data to Local Storage.mp4

08:41

26 - Charting with Recharts.mp4

08:16

27 - Plotting Real Data.mp4

12:41

28 - Styling Components.mp4

07:02

29 - Custom CSS Variables.mp4

08:13

4 - Building for the Web Android and iOS

30 - Publishing as a Web App.mp4

06:14

31 - Important Capacitor Version.html

32 - Capacitor Setup.mp4

08:10

33 - Android Studio Installation.mp4

06:49

34 - Android Emulator Setup.mp4

06:04

35 - Building for Android with Capacitor.mp4

08:23

36 - Running on a Physical Android Device.mp4

04:14

37 - Hiding the Splash Screen.mp4

08:54

38 - Capacitor Livereload on Android.mp4

06:17

39 - Chrome Remote Debugging.mp4

03:35

40 - Xcode Installation.mp4

03:16

41 - Building for iOS with Capacitor.mp4

05:47

42 - Capacitor Livereload on iOS.mp4

02:45

43 - Safari Remote Debugging.mp4

07:57

44 - Icon and Splash Screen Images.mp4

08:43

45 - Upgrading to Capacitor 30.mp4

08:56

5 - Using the Ionic CLI to Create New Projects

46 - Ionic CLI Installation and Usage.mp4

05:13

47 - Generated Project Overview.mp4

09:40

48 - Generated Code Tweaks.mp4

06:40

49 - Livereload with Capacitor.mp4

07:07

50 - Why TypeScript.mp4

13:46

51 - More Project Templates.html

6 - Page Navigation and Routing

52 - Overview and Project Setup.mp4

04:55

53 - Project Code.html

53 - daily-moments.zip

54 - React Router.mp4

09:12

55 - IonReactRouter.mp4

04:46

56 - IonTabs.mp4

05:06

57 - IonList.mp4

05:01

58 - Route Params.mp4

06:17

59 - Back Button.mp4

03:37

60 - Login Flow.mp4

08:31

61 - Grouping Protected Pages.mp4

09:34

62 - Sharing State with React Context.mp4

07:11

63 - Handling Page Not Found.mp4

03:26

7 - Authentication with Firebase

64 - Important Firebase Changes.html

65 - Creating a Firebase Project.mp4

07:39

66 - Enabling Authentication and User SignIn.mp4

06:16

67 - Login Form.mp4

05:38

68 - Handling Login Errors.mp4

08:05

69 - Firebase AuthState Observer.mp4

08:44

70 - AuthState Loading.mp4

04:38

71 - Logout Functionality.mp4

03:28

72 - Registering a New User.mp4

08:00

73 - User ID in Authentication State.mp4

12:12

8 - Storing Data with Cloud Firestore

74 - Creating a Database.mp4

04:00

75 - Cloud Firestore Data Model.mp4

06:06

76 - Fetching a Firestore Collection.mp4

09:31

77 - Fetching a Firestore Document.mp4

06:48

78 - Entry Interface.mp4

06:45

79 - Keeping Separate Data for Each User.mp4

10:10

80 - Firestore Security Rules.mp4

09:06

81 - Avoiding Route Path Conflicts.mp4

05:44

82 - Floating Action Buttons FABs.mp4

03:13

83 - Adding a Firestore Document.mp4

06:59

84 - Listening for Data Updates.mp4

05:29

85 - Deleting a Firestore Document.mp4

04:29

86 - Adding a Date Field.mp4

08:13

87 - Query Order and Limit.mp4

06:18

9 - Storing Image Files with Cloud Storage

88 - Enabling Cloud Storage.mp4

06:45

89 - Allowing Users to Select a Picture.mp4

09:15

90 - Hiding the File Input Field.mp4

07:48

91 - Uploading Files to Cloud Storage.mp4

09:17

92 - Displaying Images from Cloud Storage.mp4

05:25

10 - Using the Native Camera API

93 - Testing the App on Android.mp4

03:50

94 - Using the Camera API.mp4

08:15

95 - Camera Options and Errors.mp4

06:30

96 - Enabling Different Features by Platform.mp4

06:33

11 - Publishing to the App Stores

97 - Preparing for an Android Release.mp4

06:13

98 - Building a Signed APK.mp4

07:56

99 - Building an Android App Bundle.mp4

04:57

100 - Publishing to Google Play.mp4

05:34

101 - iOS Certificates and Running on a Physical iPhone.mp4

05:35

102 - Publishing to the App Store.mp4

09:48

12 - Conclusion

103 - 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

More details

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

Ionic

Mirko Nasato

Instructor's Courses

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.