Ionic + React - Build Cross-Platform Apps (Web, Android, iOS)
Build cross-platform applications with React.js and the Ionic framework.
Start courseIonic 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!
Course content
Section 1Getting Started
- Welcome!4:46
- What is Ionic?4:22
- Why Ionic?2:41
- Why React?2:42
- Join the Online Learning Community1:00
- The Anatomy of an Ionic Project3:52
- Ionic - Behind the Scenes5:45
- Ionic Alternatives4:13
- The Ionic History3:19
- Getting The Most Out Of The Course2:29
Section 2Ionic - The Basics
- Module IntroductionPremium1:02
- Ionic OverviewPremium5:15
- Using Ionic ComponentsPremium9:22
- More Ionic ComponentsPremium6:44
- Adding JavaScriptPremium7:10
- Ionic Behind the ScenesPremium3:24
- Styling & The GridPremium4:40
- Icons & SlotsPremium6:09
- Finishing TouchesPremium6:43
- Module ResourcesPremium1:00
Section 3Combining Ionic & React.js
- Module Introduction1:39
- Creating a ProjectPremium9:10
- Analyzing the Created ProjectPremium5:11
- TypeScript & ReactPremium5:37
- Ionic Components vs React ComponentsPremium4:31
- Building the First User Interface10:11
- Adding React Logic19:00
- Managing StatePremium6:21
- Splitting the App Into ComponentsPremium10:54
- Adding More ChecksPremium2:49
- Displaying an AlertPremium7:31
- App FinetuningPremium1:47
- Adding Segment ButtonsPremium5:44
- Connecting ComponentsPremium6:26
- Adding BMI Conversion FactorsPremium5:14
- Module ResourcesPremium1:00
Section 4Building Native Mobile Apps with Capacitor
- Module IntroductionPremium1:20
- Building a Web AppPremium2:27
- Building an Android AppPremium10:59
- Running the App on a Real Android DevicePremium1:00
- Running Apps as Mobile AppsPremium2:04
- Building an iOS AppPremium6:18
- Wrap UpPremium0:40
- Module ResourcesPremium1:00
Section 5Debugging
- Module IntroductionPremium0:45
- Understanding Error MessagesPremium4:31
- Browser DevTools & BreakpointsPremium5:06
- UI DebuggingPremium2:12
- Debugging Native AppsPremium3:42
- Wrap UpPremium1:06
- Module ResourcesPremium1:00
Section 6Styling & Theming
- Module IntroductionPremium1:06
- How Styling WorksPremium6:20
- Getting Started with Theming & VariablesPremium7:26
- Using the Ionic Color GeneratorPremium2:28
- Platform-specific StylesPremium3:57
- Component-specific VariablesPremium4:27
- Theme Variables - SummaryPremium4:59
- The Responsive Ionic GridPremium20:57
- Applying the Grid to the AppPremium5:43
- Configuring a Component via PropsPremium4:08
- Adding Custom CSS StylesPremium4:27
- Module ResourcesPremium1:00
Section 7Navigation - Stack Navigation, Tabs, Side Drawers
- Module IntroductionPremium1:57
- A First Page & RoutingPremium8:43
- Adding a Second RoutePremium3:33
- Push-Pop Navigation (Stack of Pages)Premium7:41
- Programmatic NavigationPremium4:28
- Adding TabsPremium9:28
- App-wide Component Style VariablesPremium7:07
- Adding Dummy DataPremium4:20
- Working with Dynamic RoutesPremium7:00
- Styling the "Back Button"Premium1:11
- Adding a Side MenuPremium8:55
- More Styling & Animation FixesPremium2:27
- Tabs & Side Drawer CombinedPremium12:01
- Different Versions & Code AttachmentsPremium1:00
- Module ResourcesPremium1:00
Section 8Ionic Component Deep Dive
- Module IntroductionPremium0:52
- More on the Card ComponentPremium3:40
- Rendering a List with ItemsPremium7:53
- Adding Actions to List ItemsPremium6:26
- Making Items SwipablePremium6:08
- Toolbar Buttons & Floating Action ButtonsPremium10:13
- Showing an AlertPremium5:20
- Presenting a Toast MessagePremium2:59
- Showing a ModalPremium4:18
- Adding Modal ContentPremium13:34
- Closing Sliding ItemsPremium2:17
- Your Challenge!Premium1:19
- Adding a "New Course" ModalPremium7:46
- Adding a DateTime PickerPremium3:13
- Rendering a List with All GoalsPremium8:44
- Adding Toggle Buttons for FilteringPremium5:01
- Refactoring ComponentsPremium12:23
- Module ResourcesPremium1:00
Section 9Handling User Input & Application State
- Module IntroductionPremium0:54
- Fetching & Validating User InputPremium8:16
- Passing Data to the Modal PagePremium4:21
- Setting Up Application ContextPremium15:10
- Adding New CoursesPremium8:19
- Minor FixesPremium1:34
- Adding a GoalPremium16:07
- Deleting & Updating GoalsPremium13:46
- Handling All Goals & Fixing a WarningPremium4:41
- Filtering GoalsPremium9:01
- Finishing TouchesPremium4:07
- Module ResourcesPremium1:00
Section 10Using Native Device Features
- Module IntroductionPremium2:27
- Getting StartedPremium2:41
- Adding Tabs NavigationPremium7:52
- Adding Toolbar Buttons & FabsPremium6:30
- Theming the AppPremium4:07
- Preparing the "NewMemory" PagePremium5:54
- Adding CapacitorPremium4:26
- Using the Device CameraPremium13:22
- Adding an Image PreviewPremium5:51
- Using the Filesystem APIPremium8:15
- Collecting User InputPremium5:28
- Storing Data in ContextPremium14:44
- Getting Image Previews via ContextPremium5:03
- Storing & Loading Data via Device StoragePremium19:58
- RefactoringPremium9:29
- Native APIs in the BrowserPremium8:31
- A Fallback if no Camera is availablePremium12:16
- Running on a Real DevicePremium2:09
- Module ResourcesPremium1:00
Section 11Optimizations
- Module IntroductionPremium1:39
- Sharing a Page Content ComponentPremium6:39
- Splitting the App into More ComponentsPremium4:46
- Adding a "Image Picker" ComponentPremium10:51
- Re-using TypesPremium6:03
- Centralizing App LogicPremium5:06
- Adding Lazy LoadingPremium5:27
- Module ResourcesPremium1:00
Section 12Publishing the Apps
- Module IntroductionPremium1:05
- Configuring the AppsPremium2:30
- Adding Icons & Splash ScreensPremium13:04
- Publishing a Web AppPremium5:46
- Publishing an Android AppPremium3:54
- Publishing an iOS AppPremium4:24
- Module ResourcesPremium1:00
Section 13Roundup
- Course RoundupPremium2: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.