Ionic Framework and React JS: A step-by-step guide to building a photo gallery app
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- In this video, I'll show you how to build a stunning and functional photo gallery app with Ionic 6 and React, step by step. Whether you're new to Ionic and React or an experienced developer, you'll find something valuable in this tutorial. I'll cover everything you need to know to create your own photo gallery app, including how to set up your project, create and style components, and implement features like image upload and storage. With these tips and techniques, you'll be able to build a photo gallery app that's both visually appealing and easy to use. Don't miss out on this opportunity to learn how to build a photo gallery app with Ionic 6 and React - let's get started!
Feel the Reggae beat while watching and learn something! :)
Do not forget to like and subscribe to see my future videos that might help you somehow :)
Source code: github.com/demoninyo/ionic-6-...
0:00 - Setup Environment
7:06 - Run and Test the App
10:00 - Update UI and Icons
17:00 - Add Taking Photos capability
29:00 - Saving Photos
36:00 - Displaying Photos
43:00 - Saving Photos to Filesystem
01:08:45 - Add Mobile Platforms
01:14:45 - Build App and Deploy - for Android Platform only. But the steps are all the same :)
Ionic Framework: ionicframework.com
Code Editor: code.visualstudio.com/
Command Terminal: www.microsoft.com/en-us/p/win...
#Ionic #React #Typescript #IonicFramework #capacitor
This was really helpfull as m working on a similar personal project, I tried to do the same for video recording, but facing a lot of issues, can you please help here
Glad it was helpful! How can I help you and what are the issues that you are facing?
Hi since I plan to use Ionic React, is there a video for how to create an image cropper with those technologies
Hi. Thank you for checking my video. I dont know of any video related to your topic but maybe this link would help you www.positronx.io/ionic-image-cropper-and-image-picker-integration-tutorial/
awesome..
Thank you! Cheers!
nice
Thanks
i’m Reactjs developer and new to ionic framework , i feel really good at react and i want to create app with custom styles from cards spacing colors and grid… i used to use tailwindcss to build the ui fast with react , when i start with ionic i saw that i have to use a lot of native component which has default styles , question is :
how to let tailwind control styles in a native ionic component ?
there is any effective way to make it (ex styled component or emotion instead of tailwind ) ?
can i build my app with just knowledge of jsx html and react ecosystem like formik tailwind react-query and going on like we used to do with react app ?
please i want some clarification , and some good resources video or courses to follow as react developer
Hi Thank you for checking my video :)
For your first question, I think you can still use that tailwind under or using "craco" but I would suggest to use Material UI instead of using tailwind when working with ionic. latest version of Material UI has lots of options for your needs including customization. mui.com/
For your second question, using jsx is enough to create an ionic app but of course it is advisable to invest some time learning typescript since that is one of the modern web language/script which is in-demand in the job market :)
@@LearnWithJon ❤ thank you very much for your response , yes , problem that i get right know that i want to style a builtin component to feet my needs but i can't override the styling of example IonButton with my custom styling with css or scss or tailwind always the same result no background added or radius increased or any thing i can't override the default styling , this is my pure problem 😨😨😨😨😨😨😓😓
@@mahdisoultana915 that is possible and not that difficult. you can add custom style via styled components. something like this
dev.to/ionic/how-to-css-in-ionic-react-with-styled-components-2eo6#:~:text=Styling%20an%20Ionic%20Component&text=Ionic%20components%20are%20web%20components,the%20web%20component%20can%20use.
Good luck :)
@@LearnWithJon thank you very much for your help you're realy help full jon
@@mahdisoultana915 im glad to know that. please subscribe and hit the bell button to see my future videos that might help you also ;) good luck to your dev journey :)