Ionic React App
Speaker: NC Patro
Follow me on Twitter and Medium
@npatro7m
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6880399/IonicFramework.png)
What is Ionic ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6880399/IonicFramework.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6880399/IonicFramework.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6878482/Picture1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6878509/Picture3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6878481/Picture2.png)
Defining Moment in Marvel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6880360/ionic-framework-og.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6880362/Angular_full_color_logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6880364/1200px-React-icon.svg.png)
Defining Moment in Hybrid App Development
What is Ionic React ?
-
A native React version of Ionic Framework
-
Build apps for iOS, Android, Desktop, and the Web as a PWA
-
All with one code base
-
Standard React development patterns
-
Same react-dom library
![](https://media3.giphy.com/media/3o7bu63eNwKf0KUmEo/giphy.gif)
What About React Native ?
React Native vs Ionic React
- Native UI vs Web UI
- Mostly Android and iOS vs Any Platform where web runs (Mobile, Desktop, PWA)
-
Shared Code vs Shared Component
-
Hybrid-Native vs Hybrid-Web
-
react-dom vs react-native
What About Performance?
![](https://media0.giphy.com/media/VFB3cJJne7b5m/giphy.gif)
What is Capacitor ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1219776/images/6890783/capacitor.png)
Build ionic-react app
/* Install Ionic CLI */
npm install -g ionic@latest
/* Creation of a React project with Ionic */
ionic start myApp blank --type=react
cd myApp
/* Run project in browser */
ionic serve
Build native app
/* add Capacitor to your project */
ionic integrations enable capacitor
/* Next, build the project, then add platforms */
ionic build
ionic cap add ios
ionic cap add android
/* open native IDEs to build and run */
ionic cap open ios
ionic cap open android
Choices
![](https://media0.giphy.com/media/3b3lvvT6jUprrvy5k5/giphy.gif)
Thank You
Follow me on Twitter and Medium
@npatro7m
Ionic React
By NC Patro
Ionic React
- 162