Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Ionic + React - Build Cross-Platform Apps (Web, Android, iOS)
Getting Started
Welcome! (4:46)
What is Ionic? (4:22)
Why Ionic? (2:41)
Why React? (2:42)
Join the Online Learning Community
The Anatomy of an Ionic Project (3:52)
Ionic - Behind the Scenes (5:45)
Ionic Alternatives (4:13)
The Ionic History (3:19)
Getting The Most Out Of The Course (2:29)
The Academind Pro Referral Program
Ionic - The Basics
Module Introduction (1:02)
Ionic Overview (5:15)
Using Ionic Components (9:22)
More Ionic Components (6:44)
Adding JavaScript (7:10)
Ionic Behind the Scenes (3:24)
Styling & The Grid (4:40)
Icons & Slots (6:09)
Finishing Touches (6:43)
Module Resources
Combining Ionic & React.js
Module Introduction (1:39)
Creating a Project (9:10)
Analyzing the Created Project (5:11)
TypeScript & React (5:37)
Ionic Components vs React Components (4:31)
Building the First User Interface (10:11)
Adding React Logic (19:00)
Managing State (6:21)
Splitting the App Into Components (10:54)
Adding More Checks (2:49)
Displaying an Alert (7:31)
App Finetuning (1:47)
Adding Segment Buttons (5:44)
Connecting Components (6:26)
Adding BMI Conversion Factors (5:14)
Module Resources
Building Native Mobile Apps with Capacitor
Module Introduction (1:20)
Building a Web App (2:27)
Building an Android App (10:59)
Running the App on a Real Android Device
Running Apps as Mobile Apps (2:04)
Building an iOS App (6:18)
Wrap Up (0:40)
Module Resources
Debugging
Module Introduction (0:45)
Understanding Error Messages (4:31)
Browser DevTools & Breakpoints (5:06)
UI Debugging (2:12)
Debugging Native Apps (3:42)
Wrap Up (1:06)
Module Resources
Styling & Theming
Module Introduction (1:06)
How Styling Works (6:20)
Getting Started with Theming & Variables (7:26)
Using the Ionic Color Generator (2:28)
Platform-specific Styles (3:57)
Component-specific Variables (4:27)
Theme Variables - Summary (4:59)
The Responsive Ionic Grid (20:57)
Applying the Grid to the App (5:43)
Configuring a Component via Props (4:08)
Adding Custom CSS Styles (4:27)
Module Resources
Navigation - Stack Navigation, Tabs, Side Drawers
Module Introduction (1:57)
A First Page & Routing (8:43)
Adding a Second Route (3:33)
Push-Pop Navigation (Stack of Pages) (7:41)
Programmatic Navigation (4:28)
Adding Tabs (9:28)
App-wide Component Style Variables (7:07)
Adding Dummy Data (4:20)
Working with Dynamic Routes (7:00)
Styling the "Back Button" (1:11)
Adding a Side Menu (8:55)
More Styling & Animation Fixes (2:27)
Tabs & Side Drawer Combined (12:01)
Different Versions & Code Attachments
Module Resources
Ionic Component Deep Dive
Module Introduction (0:52)
More on the Card Component (3:40)
Rendering a List with Items (7:53)
Adding Actions to List Items (6:26)
Making Items Swipable (6:08)
Toolbar Buttons & Floating Action Buttons (10:13)
Showing an Alert (5:20)
Presenting a Toast Message (2:39)
Showing a Modal (4:18)
Adding Modal Content (13:34)
Closing Sliding Items (2:17)
Your Challenge! (1:19)
Adding a "New Course" Modal (7:46)
Adding a DateTime Picker (3:13)
Rendering a List with All Goals (8:44)
Adding Toggle Buttons for Filtering (5:01)
Refactoring Components (12:23)
Module Resources
Handling User Input & Application State
Module Introduction (0:54)
Fetching & Validating User Input (8:16)
Passing Data to the Modal Page (4:21)
Setting Up Application Context (15:10)
Adding New Courses (8:19)
Minor Fixes (1:34)
Adding a Goal (16:07)
Deleting & Updating Goals (13:46)
Handling All Goals & Fixing a Warning (4:41)
Filtering Goals (9:01)
Finishing Touches (4:07)
Module Resources
Using Native Device Features
Module Introduction (2:27)
Getting Started (2:41)
Adding Tabs Navigation (7:52)
Adding Toolbar Buttons & Fabs (6:30)
Theming the App (4:07)
Preparing the "NewMemory" Page (5:54)
Adding Capacitor (4:26)
Using the Device Camera (13:22)
Adding an Image Preview (5:51)
Using the Filesystem API (8:15)
Collecting User Input (5:28)
Storing Data in Context (14:44)
Getting Image Previews via Context (5:03)
Storing & Loading Data via Device Storage (19:58)
Refactoring (9:29)
Native APIs in the Browser (8:31)
A Fallback if no Camera is available (12:16)
Running on a Real Device (2:09)
Module Resources
Optimizations
Module Introduction (1:39)
Sharing a Page Content Component (6:39)
Splitting the App into More Components (4:46)
Adding a "Image Picker" Component (10:51)
Re-using Types (6:03)
Centralizing App Logic (5:06)
Adding Lazy Loading (5:27)
Module Resources
Publishing the Apps
Module Introduction (1:05)
Configuring the Apps (2:30)
Adding Icons & Splash Screens (13:04)
Publishing a Web App (5:46)
Publishing an Android App (3:54)
Publishing an iOS App (4:24)
Module Resources
Roundup
Course Roundup (2:43)
Adding Toggle Buttons for Filtering
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock