Ionic React represents the most significant change in Ionic's history and opens up the Framework to a whole new audience. With one code base across any platform or deployment type, Ionic React makes it easy to build apps for iOS, Android, Desktop, and the web as a Progressive Web App. Join Developer Advocate Mike Hartington as he runs through Ionic React and how to get started building today.

1. IonicWebinar

2. HousekeepingItems
Thepresentationisbeingrecorded
Thelengthwillbe~30mins
Slideswillbesentoutaftertheevent
SubmitquestionsforQ&Aattheend

3. Todayspresenter
MikeHartington
DeveloperAdvocate

4. IonicFramework
IonicReact
MikeHartington
@mhartington
mike@ionicframework.com

5. WhatisIonic
Components,Gestures,Animations
Mobileatfirst,butnoweverywhere
iOS,Android,Desktop,PWA

6. Alongtimeago...
IonicwasonlyAngular
Wantedtosupportothertools
Butnotrewriteoverandover

7. EnterWebComponents

8. ~6monthsofwork
RewroteasWebComponents
Componentsareself-contained
Frameworkadaptorswhenneeded(Routing)

9. EnterIonic4.0
Ionic For everyone

10. Whatdidthepeoplesay
Hugesuccesswithdevsandlargeteams
Refocusedourenergyindifferentareas
Followingframeworkecosystembetter

11. Sowhathappensnext?

13. There'smorethanAngular
Angularisnottheonlyframeworkthesedays
Otherframeworksarepopular
Ioniccommunitywantsmoreoptions

15. WhatisReact?
Declarative,Components,JSX
Propsforpassingdata
Classes,functions,&hooks

16. Reactfitsaniceusecase
Fewerconceptsupfront
Flexibleoptionsfordifferentneeds
BuildyourReactmicro-framework

17. WhatwouldIonicReactlooklike?

18. Components

19. ComponentsasFunctions
Insteadoftemplates,justreturnsomeJSX
BringyourstandardJS-basedtooling
Componentsallthewaydown

20. export function HomePage(){
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Hello</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<h1>Hello World</h1>
</IonContent>
</IonPage>
)
}

21. export const createReactComponent = (tagName: string) => {
...
render() {
return React.createElement(
tagName,
newProps,
children
);
}
};

22. Whydoesthismatter?
ProperReactcomponents
IntegrateswithReactDevTools
Dev'sjustwriteReact,anditworks

23. StillpoweredbyWebComponents

24. IonicasaDesignSystem
(IAADS™)

25. NativeAccess

26. Capacitor
FulliOS,Android,PWAapps
Cappluginsmakeaccesseasy
CanintegratewithexistingNativeapps

27. Demo

28. WrappingUp
IonicReact:It'sjustReact
OnestopshopforPWA,iOS,&Android
Learnonce,writeanywhere

29. Questions?