From React Web to Native Mobile App with Capacitor & Ionic

If you want to transform your React web app into a native mobile app you don't need to use React Native - with Capacitor the whole process becomes a lot easier.

#############################

👨‍💻 Want to read instead of watch?

⚡️ NEW: 46 Pages Ionic QUICKSTART GUIDE

➡️ Take my famous 7 Day Ionic Crash Course

🤷‍♂️ Want more Ionic tutorials?

#############################

❤️ You can also find me on:

Or join our Facebook group:

#############################

00:00 Introduction
01:45 Create React App with Routing
09:18 Building a React Login
17:02 Adding Capacitor to React
26:32 Using Ionic UI components with React
35:47 Using Ionic Hooks with React
39:00 Conclusion

[TheLukrify]

Exactly what I needed! I never thought it could be so easy. Thanks!

[prashant]

Please make tutorial on webrtc in ionic🙂

[subhampatro]

Please add this in video it would be really useful for us

[maaran_sk]

Please sir make more tutorials for React with ionic & Capacitor 🙏🙏🙏🙏

[abdelallitahiri]

Niice, I really got a lot of new things about this subject, Thank you

[chizuru]

Keep it up! Also please post every video when you learn. doesn't matter if you dont do commentary much or edit it. ☺️ Will help keep the progress together.

[jorgetovar]

What are your thoughts after have been working with Angular? Do you like react?

[techTalks-FullStack]

Thanks for the vedio. I build an app using capacitor and i am facing problem that it closes on click of back button. Suggest a solution pls

[thabisomagwaza]

Amazing, this is exactly what I'm looking for!

[njorogepaul]

Thanks for this Grimm. Please make more videos on react ionic apps

[Rama-Rama]

Thanks for your great videos!

Had this question on Ionic: so, it would seem ALL the HTML tags will have to be revisited to change to their suitable Ionic versions? Will the Web UI be different from both iOS and Android (here it seemed to use the Android version for the same?).

Thanks!

[alastairtheduke]

Great explanation of (web app with react+ capacitor) = mobile app + ionic vs ionic-react + capacitor = mobile app

[RawahulIslam]

Unable to open base configuration reference file, any help?

[subhampatro]

How to implement firebase push notification using capacitor ? In react project and test on ios using xcode

[lacake]

How can I run the app on my iPhone when I am developing on a Windows/Linux machine?

[aleksandrmatyka]

oh man did you try display svg for capacitor native app as background-image?
Didn't find topic about this but it's just doesn't work(

[manrikevillalobos]

Amazing video! Thank you so much for teaching us how to use Ionic and Capacitor! I really enjoy them! It's possible that in some moment, or maybe you can guide me where to search, how to build apps using Ionic and Capacitor with Svelte? Or framework agnostic, usin plain vanilla JS/TS? It's because I don't use React, nor Angular either, so it's a little difficult to follow the tutorials, try to understand the app internals (like service workers with Capacitor, that use the Angular service worker service, so I don't understand how to use, or configure, a plain service worker with JS). That's the reason that I have not could purchase the book Build with Ionic yet, because use Angular as framework. Thank you! Please, keep your good work!!!

[adriandiepeveen]

Hi Simon, thanks for the video. How do I connect to my backend because it seems that it is not connecting to my server and APIs. It is displaying my login screen but not going beyond that.
Do I need to include my .env file somewhere or is there something else I must do. Please help me or let me know where I can look to connect my backend. Thank you.

[ntsqoyj]

Simon, I want to ask you if you were to start from scratch, how would you evaluate going react+capacitor VS. react-native+expo to make it work across mobile and web in one code base

[hassanabuya]

Hello, nice tut,

in my case i have a vite app with .env for my variables in here i have the backend api_url, which i use in my react project throughout so how can i still use my backend in my .apk because i didn't see anywhere about environment variables....plz help, Thankssss