Online Courses - Ionic + React - Build Cross-Platform Apps (Web, Android, iOS)

Ionic is one of the most exciting technologies you can learn at the moment - it enables you to use one codebase (written in HTML, JS and CSS) to build and ship apps as normal (progressive) web apps as well as real native mobile apps for iOS and Android. This course teaches you the latest version of Ionic from scratch with no prior knowledge about it assumed.

React.js allows you to create awesome web applications powered by TypeScript or JavaScript. Wouldn't it be great to use that React knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device? And also publish them as progressive web apps at the same time.

The Ionic framework allows you to do just that! Use your existing React, HTML, JS and CSS knowledge and build your native mobile app with that! Ionic offers a lot of beautiful components (which you'll learn about in this course) that can be used to compose native-like user interfaces.

Capacitor (another tool provided by the Ionic team) will handle the rest as it's used to then build a native mobile app for iOS/ Android based on your code. This allows you to focus on the things you know and release your application on all possible devices (desktop and mobile) without having to learn thousands of different languages! Indeed, with Ionic, you can use one codebase to ship three different apps (iOS, Android, web).

No wonder that hybrid frameworks like Ionic are extremely popular and in high demand!

My name is Maximilian Schwarzmüller and I'm a freelance web developer as well as creator of many top-rated courses - including my "React.js- The Complete Guide" course, the bestselling React course you can find!

I love creating awesome web applications and it simply is amazing to now use that knowledge and build native mobile apps with it, too!

This course takes your from zero to published app, taking a very practice-orientated route. You'll a realistic app (where users can create and book events) throughout the course, learning about the basics of Ionic, its rich component library, how to fetch and handle user input, how to store data and access native device features and much more!

You'll dive into all important Ionic components as well as concepts like navigation (tabs, sidemenus), user input, native device features (e.g. camera), storage, http, authentication!

And since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser, on an emulatoror on your own device!

What exactly are you going to learn then?

How to set up your Ionic projects
How Ionic works behind the scenes
The basics about Ionic - How navigation works, how your project is structured and you use its rich component library
How to use the many beautiful components Ionic ships with
How to use different kinds of navigation concepts: "Back"-button-navigation, tabs and sidemenus
How to show modals, alerts, toasts and many, many more useful UI components
How to test the app in the browser, on emulators or real devices
How to fetch and handle user input through inputs, textfields, dropdowns, dialogs etc.
How to access the local device storage and native device features like the camera
So much more ... like styling and theming your app
Finally, you'll learn how to configure your app and publish it to the App Store or Google Play Store (or as a progressive web app)

Does this sound great?

I can't wait to welcome you in this course!

Section: Getting Started

1. Welcome! (4:46)

2. What is Ionic? (4:22)

3. Why Ionic? (2:41)

4. Why React? (2:42)

5. Join the Online Learning Community (1:00)

6. The Anatomy of an Ionic Project (3:52)

7. Ionic - Behind the Scenes (5:45)

8. Ionic Alternatives (4:13)

9. The Ionic History (3:19)

10. Getting The Most Out Of The Course (2:29)

Section: Ionic - The Basics

11. Module Introduction (1:02)

12. Ionic Overview (5:15)

13. Using Ionic Components (9:22)

14. More Ionic Components (6:44)

15. Adding JavaScript (7:10)

16. Ionic Behind the Scenes (3:24)

17. Styling & The Grid (4:40)

18. Icons & Slots (6:09)

19. Finishing Touches (6:43)

20. Module Resources (1:00)

Section: Combining Ionic & React.js

21. Module Introduction (1:39)

22. Creating a Project (9:10)

23. Analyzing the Created Project (5:11)

24. TypeScript & React (5:37)

25. Ionic Components vs React Components (4:31)

26. Building the First User Interface (10:11)

27. Adding React Logic (19:00)

28. Managing State (6:21)

29. Splitting the App Into Components (10:54)

30. Adding More Checks (2:49)

31. Displaying an Alert (7:31)

32. App Finetuning (1:47)

33. Adding Segment Buttons (5:44)

34. Connecting Components (6:26)

35. Adding BMI Conversion Factors (5:14)

36. Module Resources (1:00)

Section: Building Native Mobile Apps with Capacitor

37. Module Introduction (1:20)

38. Building a Web App (2:27)

39. Building an Android App (10:59)

40. Running the App on a Real Android Device (1:00)

41. Running Apps as Mobile Apps (2:04)

42. Building an iOS App (6:18)

43. Wrap Up (0:40)

44. Module Resources (1:00)

Section: Debugging

45. Module Introduction (0:45)

46. Understanding Error Messages (4:31)

47. Browser DevTools & Breakpoints (5:06)

48. UI Debugging (2:12)

49. Debugging Native Apps (3:42)

50. Wrap Up (1:06)

51. Module Resources (1:00)

Section: Styling & Theming

52. Module Introduction (1:06)

53. How Styling Works (6:20)

54. Getting Started with Theming & Variables (7:26)

55. Using the Ionic Color Generator (2:28)

56. Platform-specific Styles (3:57)

57. Component-specific Variables (4:27)

58. Theme Variables - Summary (4:59)

59. The Responsive Ionic Grid (20:57)

60. Applying the Grid to the App (5:43)

61. Configuring a Component via Props (4:08)

62. Adding Custom CSS Styles (4:27)

63. Module Resources (1:00)

Section: Navigation - Stack Navigation, Tabs, Side Drawers

64. Module Introduction (1:57)

65. A First Page & Routing (8:43)

66. Adding a Second Route (3:33)

67. Push-Pop Navigation (Stack of Pages) (7:41)

68. Programmatic Navigation (4:28)

69. Adding Tabs (9:28)

70. App-wide Component Style Variables (7:07)

71. Adding Dummy Data (4:20)

72. Working with Dynamic Routes (7:00)

73. Styling the "Back Button" (1:11)

74. Adding a Side Menu (8:55)

75. More Styling & Animation Fixes (2:27)

76. Tabs & Side Drawer Combined (12:01)

77. Different Versions & Code Attachments (1:00)

78. Module Resources (1:00)

Section: Ionic Component Deep Dive

79. Module Introduction (0:52)

80. More on the Card Component (3:40)

81. Rendering a List with Items (7:53)

82. Adding Actions to List Items (6:26)

83. Making Items Swipable (6:08)

84. Toolbar Buttons & Floating Action Buttons (10:13)

85. Showing an Alert (5:20)

86. Presenting a Toast Message (2:59)

87. Showing a Modal (4:18)

88. Adding Modal Content (13:34)

89. Closing Sliding Items (2:17)

90. Your Challenge! (1:19)

91. Adding a "New Course" Modal (7:46)

92. Adding a DateTime Picker (3:13)

93. Rendering a List with All Goals (8:44)

94. Adding Toggle Buttons for Filtering (5:01)

95. Refactoring Components (12:23)

96. Module Resources (1:00)

Section: Handling User Input & Application State

97. Module Introduction (0:54)

98. Fetching & Validating User Input (8:16)

99. Passing Data to the Modal Page (4:21)

100. Setting Up Application Context (15:10)

101. Adding New Courses (8:19)

102. Minor Fixes (1:34)

103. Adding a Goal (16:07)

104. Deleting & Updating Goals (13:46)

105. Handling All Goals & Fixing a Warning (4:41)

106. Filtering Goals (9:01)

107. Finishing Touches (4:07)

108. Module Resources (1:00)

Section: Using Native Device Features

109. Module Introduction (2:27)

110. Getting Started (2:41)

111. Adding Tabs Navigation (7:52)

112. Adding Toolbar Buttons & Fabs (6:30)

113. Theming the App (4:07)

114. Preparing the "NewMemory" Page (5:54)

115. Adding Capacitor (4:26)

116. Using the Device Camera (13:22)

117. Adding an Image Preview (5:51)

118. Using the Filesystem API (8:15)

119. Collecting User Input (5:28)

120. Storing Data in Context (14:44)

121. Getting Image Previews via Context (5:03)

122. Storing & Loading Data via Device Storage (19:58)

123. Refactoring (9:29)

124. Native APIs in the Browser (8:31)

125. A Fallback if no Camera is available (12:16)

126. Running on a Real Device (2:09)

127. Module Resources (1:00)

Section: Optimizations

128. Module Introduction (1:39)

129. Sharing a Page Content Component (6:39)

130. Splitting the App into More Components (4:46)

131. Adding a "Image Picker" Component (10:51)

132. Re-using Types (6:03)

133. Centralizing App Logic (5:06)

134. Adding Lazy Loading (5:27)

135. Module Resources (1:00)

Section: Publishing the Apps

136. Module Introduction (1:05)

137. Configuring the Apps (2:30)

138. Adding Icons & Splash Screens (13:04)

139. Publishing a Web App (5:46)

140. Publishing an Android App (3:54)

141. Publishing an iOS App (4:24)

142. Module Resources (1:00)

Section: Roundup

143. Course Roundup (2:43)

Course Instructor

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.