Ionic React

Ionic React

Build iOS, Android, Desktop, and Progressive Web Apps using React

ionicframework.com/react
Add your details here.

My Name

My Name

A bit about me/bio

Ionic enables web developers to build cross-platform apps using just one codebase. In addition to open source offerings, Ionic helps teams build apps via support, enterprise-specific functionality, and DevOps services.
What is Ionic Framework?

What is Ionic Framework?

️✓ Cross-platform UI toolkit for building native mobile, desktop, and web apps with web tech✓ Powering over 10% of apps in Apple and Google Play Stores [1]✓ Used by more than 5 million developers in 200 countries️✓ Backed by growing company[1] https://appfigures.com/top-sdks/development/apps
Ionic React uses open web standards and built-in browser capabilities, so it's compatible with any of the millions of web libraries out there.
What is Ionic React?

What is Ionic React?

️✓ React flavor of Ionic Framework️✓ 100+ React Components: Modals, menus, tabs, navigation, lists, cards, and more!✓ Build cross-platform, native-quality apps with a single codebase️✓ It's Just React! Compatible with majority of React libraries and tools
More than just the UI toolkit - it's a complete app building platform.
The Ionic Platform

The Ionic Platform

️✓ End-to-end platform for building cross-platform apps✓ Ionic Framework: Open Source, cross-platform UI toolkit✓ Ionic ️Capacitor: Native runtime✓ Ionic Native: Premium native solutions and core plugins✓ Ionic Appflow: Mobile DevOps
See all Ionic components in action using the embedded demo app.
UI Components

UI Components

️✓ 100+ web components️✓ Framework agnostic️✓ Powerful theming️✓ Native-style navigation️✓ High performance animations
Example of Ionic Card component alongside actual code
IonCard

<IonCard>

Your Daily ListIonic Apps We Think You'll Love.

Sworkit

The number one fitness app

Untappd

Discover and share beer

Shipt

Bring the store to your door

Amtrak

Book a trip today

Ionic implements all native animation/gesture details so you can focus on building your app.
Gestures & Animations

Gestures & Animations

️️✓ Adaptive styling️✓ Native-style navigation️✓ High performance animations️✓ Latest UI designs
Ionic implements all native animation/gesture details so you can focus on building your app.
Swipe to Close Modal

Swipe to Close Modal

️️✓ Latest iOS design️✓ Requires only two properties
Rich page transitions out of the box, using routing that's familiar to React devs.
Routing/Navigation

Routing/Navigation

️✓ ️Rich page transitions️✓ ️React Router under the hood

Ionic React apps are automatically set up for unit and integration testing with Jest, React Testing Library, and a small suite of utilities for testing Ionic-specific concepts.
Testing

Testing

️✓ Jest️✓ ️React Testing Library️✓ ️Ionic React Testing Utils

Ionic React provides first class PWA support and recommends Zeit for hosting.
Progressive Web Apps

Progressive Web Apps

️✓ Available out-of-the-box️✓ ️Preconfigured Service Worker with cache-first strategy️️✓ Easy deployment

Capacitor builds upon lessons learned from Cordova, React Native, and others to provide a modern native runtime tool. "Code once, configure everywhere" means that Cap embraces native project management and tooling. By not creating custom tooling that breaks easily, it's easier to update and manage native projects over time.
Capacitor

Native Access: Capacitor

️✓ ️Cross-platform: iOS, Android, Desktop, Web️✓ Web standards-based APIs️✓ ️"Code Once, Configure Everywhere"️✓ ️Inspiration: Cordova, React Native, and Turbolinks
capacitor.ionicframework.com

React Native is a great tool for building mobile apps. There are some differences though. Many React libraries don't support RN, RN does not officially support PWAs, and Facebook does not offer dedicated support. For developers looking to build a PWA as well as mobile (and desktop), Ionic React is the way to go.
React Native Comparison

React Native Comparison

️✓ Web Standards and React DOM️✓ First-class PWAs️✓ Build in the Browser️✓ Official Enterprise Support
Two ways to get started: using the Ionic CLI or the App Wizard.

Create an Ionic React App 🚀

CLI:

Built by Ionic 💙

Dive deeper: ionicframework.com/react

Built with DeckDeckGo

Built with DeckDeckGo

️✓ Simple, powerful PWA presentation builder️✓ HTML or Markdown️✓ Web Components and Ionic components️✓ Free and open sourcedeckdeckgo.com