Ionic + React - Tutorial for Beginners

Поділитися
Вставка
  • Опубліковано 5 січ 2025

КОМЕНТАРІ • 245

  • @hadenp1
    @hadenp1 4 роки тому +34

    5:32 What is ionic?
    12:00 What is React?
    20:47 What is a wrapped web app
    45:28 Ionic basics
    50:30 Ionic BMI calculator example
    1:04:13 How do ionic elements work
    1:10:25 Ion grid layout
    1:25:53 Ionic + React example
    1:41:12 Typescript
    1:48:05 Turning ionic web components to ionic react components
    2:02:33 Adding functionality
    2:05:13 Useref to get user inputs
    2:22:11 Usestate() to change state of BMI calculator output area
    2:26:45 Improving code: splitting giant IonApp component into smaller components
    2:29:46 Passing props from parent to child components

  • @pierremorelle3248
    @pierremorelle3248 4 роки тому +38

    Thanks for the video ! For people who already know a little bit Ionic, React and what all stand for, you can start the video at 42:10, because all the explanations which came before 42:10 are about the history of Ionic, the competitors, pros and cons, etc... So you can really get started at 42:10 if you fill the first part is to obvious for you. Thanks again !

    • @TheSharkbeast
      @TheSharkbeast 2 роки тому

      i want to learn ionic Can this video help me as newer version of ionic is out.

  • @chrissigrilus6390
    @chrissigrilus6390 3 роки тому +1

    I have to give it to you at some point. I started with your Angular course, did Node and MongoDB after that. Followed by React, WebComponents and Docker. You are the reason I managed to get 3 developer jobs in not even 2 years and more than double my income in that time.
    Whenever I need or want to learn a new thing I come straight to you. Buying a new course from you is not even a question anymore.
    I owe you a lot I think, there is no more precise content out there and by offering it so cheap everybody can take part.
    If we meet in munich any time I owe you a beer.
    Dankeschön.

  • @NadirAli-kn7sl
    @NadirAli-kn7sl 4 роки тому +37

    Developers introduces a new Tech
    Max: Good news I have a course on that.

    • @saipeor
      @saipeor 3 роки тому +2

      More like they release new tech-based on Max's courses.

  • @abdel6147
    @abdel6147 4 роки тому +96

    How this guy knows everything? amazing!

    • @nikolajstraub
      @nikolajstraub 4 роки тому +7

      I'm pretty sure he's a cyborg. ;-)

    • @alghost91
      @alghost91 4 роки тому

      Easy, learn another language and you will know how.

    • @rudyNok
      @rudyNok 4 роки тому

      Ikr? Anytime I need to know something and google it, I find this guy and his course about the topic which goes into depth......incredible, I don't understand how he can remember so many things

    • @AbcdefghijklmnopqrstuvwxyzLUL
      @AbcdefghijklmnopqrstuvwxyzLUL 4 роки тому

      @@rudyNok must be heavily prepared snd scripted or his brain would explode

    • @lutfiikbalmajid3128
      @lutfiikbalmajid3128 3 роки тому

      almost read 5 times comments like this in max videos 😂

  • @usamabilal3798
    @usamabilal3798 4 роки тому +121

    The Prophet Muhammad (صلى الله عليه وعلى آله وسلم) said " Acquire knowledge and impart it to the people "
    That's what Max u are doing :)
    Thanks for everything

    • @visualquran_
      @visualquran_ 4 роки тому +2

      Masha Allah

    • @AlphaMaverick1111
      @AlphaMaverick1111 4 роки тому +3

      صلى الله عليه وعلى آله وسلم‎

    • @Niurhan
      @Niurhan 4 роки тому +2

      صلى الله عليه وسلم 

  • @tonybenci2796
    @tonybenci2796 3 роки тому

    I have been with Max since the start on Udemy... my workmates and I even effect Max's turns of phrase in our daily discussions. When we have a question about anything we all just say "what does Max have to say about it".
    I consider Max (and Brad Traversy) to be the "go to guys"... Any time there is a new Udemy or UA-cam I watch it and Max has shepherded my through Angular, React, Vue etc. and now React Native.
    Of course it is brilliant... It's Max.
    Once again, thank you Max... I always expect to be a "insert name here" programmer at the end of a Academind course.

  • @arwahsapi
    @arwahsapi 4 роки тому +5

    With the advent of Flutter, React Native and the such we kind of forgetting Ionic. Thanks Max for reminding us how awesome Ionic is!

  • @badasspuppy
    @badasspuppy 3 роки тому +2

    This is accidentally the best React tutorial I've seen yet. So straight to the point and with so many little tricks I didn't know. Awesome job!

  • @mjr333
    @mjr333 2 роки тому +1

    Max, not long ago I had to buy programming books for learning new technologies. Your teaching techniques fast tracks my learning in a fun and unique way!

  • @sbaiahmed3173
    @sbaiahmed3173 4 роки тому +3

    you are a legend man just like Messi, Picasso, Dicaprio but in another way

  • @happinesswithinme247
    @happinesswithinme247 4 роки тому +1

    Max as always your course are best either free or paid. Thank you so much.

  • @kevinamiri909
    @kevinamiri909 4 роки тому +3

    This man is everywhere, thanks for all of the videos

  • @johnyepthomi892
    @johnyepthomi892 3 роки тому

    Max for president ...lol We don’t deserve you, but we need you!

  • @liamdavis492
    @liamdavis492 4 роки тому +3

    thanks dude i'm gonna use this knowledge to change the world

  • @getuliovieira1439
    @getuliovieira1439 4 роки тому +12

    What a great content, well explained, easy to follow, amazing teacher. Thank You for this wonderfull video man, Congrats.

  • @ronilbiswas
    @ronilbiswas 3 роки тому

    Ultimately understood ionic !! So much thanks , Max

  • @danivalldosera2523
    @danivalldosera2523 4 роки тому +3

    Thank you very much for creating and sharing such a detailed tutorial, you guys are doing a great work, always do.

  • @ProsenjeetPaulProsenjeetPaul
    @ProsenjeetPaulProsenjeetPaul 4 роки тому +3

    Hey max thanks for the free tutorial lots of love and stay safe

    • @academind
      @academind  4 роки тому +2

      Thank you, best wishes also to you in these difficult times!

  • @diwakarpp
    @diwakarpp 2 роки тому

    Excellent tutorial, Max. Your approach in explaining the details and presentation are amazing.

  • @ineptDev
    @ineptDev 4 роки тому +1

    unbelievable value of this tutorial. Thanks a lot for such a great job!

  • @traderjones5954
    @traderjones5954 2 роки тому +1

    What a wonderful adventure this has been! Thank you so much! I learned something new this weekend because of you. I appreciate what you guys do!

  • @siharps30
    @siharps30 4 роки тому

    Superb course, thanks so much for taking the time to build this

  • @simonkincaid645
    @simonkincaid645 4 роки тому

    At 1:53:50 you get the position suggestion on the IonLabel JSX component. I've tried everything for the last hour trying to get my vscode to work, but it isnt bringing up the option. Can anyone help?

  • @manishkishoresharma
    @manishkishoresharma 3 роки тому

    I like the way u explained. I seriously Appreciate it.

  • @praveenkumarm7834
    @praveenkumarm7834 4 роки тому

    long wait ......! finally got it thanks, thanks for the video

  • @oemmon
    @oemmon 4 роки тому

    Great Content Max, I enjoyed it. Awesome. Coming from an Ionic+Angular environment wit no prior knowledge of React,thought this will be really hard but I grasped it well. Thanks to your straight to the point explanations. I wish you could do a Ionic+React CRUD Operation. Have not found any so far in youtube

  • @MrKillakiddx
    @MrKillakiddx 3 роки тому

    You're an incredible instructor!!!!

  • @traderjones5954
    @traderjones5954 2 роки тому

    How did he do that formatting trick at 1:53:30?

  • @alladdinshaker8589
    @alladdinshaker8589 4 роки тому +2

    I love u Max, and I am watching to your React.js course on Udemy

  • @abenjamin13
    @abenjamin13 4 роки тому

    Awesome thank you 🙏 Max, I will for sure take this course 👍

    • @academind
      @academind  4 роки тому +1

      Thank you Adam, looking forward to have you on board!

  • @sacabonos
    @sacabonos 4 роки тому

    When I tried to serve the project I got typescript error node_modules/pretty-format/build/index.d.ts(7,13) complaining about asterisk in:
    import type * as PrettyFormat from './types';
    I had to update typescript in package.json to 3.8.3 for the project work
    Now I'm stuck at 2:34:28 App.tsx gives an error line 88 onCalculate
    Type 'number | undefined' is not assignable to type '() => void'.
    Type 'undefined' is not assignable to type '() => void'. TS2322
    tried to get my head around it but I'm noob in typescript. I hope someone have some insight!

  • @MrJoaopaulofurtado
    @MrJoaopaulofurtado 4 роки тому +5

    What kills RN is:
    - Custom styling is a nightmare
    - Dealing with XCode and android studio is a pain (Expo solves this issue, but has limitations)
    - Development time is huge, comparing to IONIC
    - You cannot test your own changes in a browser.
    ps. Im a RN dev, thinking about migrating

    •  4 роки тому

      i'm also a RN dev and i have to go with Ionic for a project because there isn't the react native component that i want. I have the component for the web, but it is supported only for web. So this problem makes turn my app into Ionic because native solutions are hard.

  • @shreyasmishra8271
    @shreyasmishra8271 4 роки тому

    I just liked the video to make it reach 1k enjoy ..but now i'm going to watch it.

  • @alexandergebers8895
    @alexandergebers8895 2 роки тому

    very well and detailed explanation! very helpful!

  • @andreacipollone3317
    @andreacipollone3317 4 роки тому +2

    Hi Max, always the best!

  • @shubhampawar79
    @shubhampawar79 4 роки тому

    Hello i m totally new to this and i have got good idea because of you . can you please suggest which extension is used in vs code at 45:18 about html. as you were talking about web development setup is needed which im not aware. please need your suggestions.

  • @reiaquila1682
    @reiaquila1682 2 роки тому

    Hi sifu, I just want to ask if there is also Activity life-cycle in Ionic? similar to Android sdk.

  • @plelkes
    @plelkes Рік тому

    thanks Max:) Du you have a video about 'capacitor'?

  • @CelineAngelinaMusicLab
    @CelineAngelinaMusicLab 4 роки тому +1

    hi, I'm using ionic react for my final project on campus. do you have the tutorial for deploying ionic react to android apk and iOS? I've been searching for it everywhere and I cant find it.

  • @brahmacharyaadventure6846
    @brahmacharyaadventure6846 4 роки тому

    No video from academind on grid on youtube .....guys please make it...i watched ur flexbox videos...they are ausome...love u people

    • @academind
      @academind  4 роки тому

      We got a whole module on the Grid in our CSS course, just in case you want to have a look => acad.link/css

  • @hphade96
    @hphade96 4 роки тому

    Thank you, Max! Loved the combo of Ionic + React with Typescript + Capacitor to build cross-platform apps.

  • @yanuka7
    @yanuka7 2 роки тому

    thanks, its a good introduction

  • @josephsummers9116
    @josephsummers9116 4 роки тому

    Can you use angular and react in the same ionic app? I.e. One page is written using react and the next page is written in angular?

  • @haikazahid4665
    @haikazahid4665 4 роки тому +1

    Thank you for sharing such a detailed and amazing tutorial.
    Can you please also create a video on how to integrate Electron with Ionic-react?

  • @lensepe
    @lensepe 4 роки тому

    Sir please help me..i have a source code of a react native app and i want to connect my woocommerce site to it...and my plugins also....i connected my site to woocommerce....but plugins not.working please hel0

  • @mayaahmed
    @mayaahmed 4 роки тому

    Thanks. Excellent course as usual.

  • @academicsnair6466
    @academicsnair6466 4 роки тому +2

    ok first thing how do you know every technology there is LOL. really like your work dude, can you upload this too on O'reilly videos as a full course like the angular one you already have PLEASE?

  • @ZoomGadget
    @ZoomGadget 2 роки тому

    Hi Max, my buttons didn't work untill I changed the code to onClick={() => calculateBMI()}. Do you know why that is?

  • @JustKeepBreathing01
    @JustKeepBreathing01 3 роки тому

    Great video!!! 😎😎

  • @rami_atallah
    @rami_atallah 2 роки тому

    Thanks for the tutorial this tutorial is amazing

  • @apprendre12fr
    @apprendre12fr 4 роки тому

    Hello, React dosn't Work with me (cannot find module react) please help, thanks

  • @vergelaranas8569
    @vergelaranas8569 4 роки тому

    Hi Sir, is it possible to use ionic on ssr like next js? Thanks

  • @Gyaan722
    @Gyaan722 4 роки тому

    Always rocked🔥🔥🔥🔥💯

  • @alind9947
    @alind9947 4 роки тому

    Which React UI library would you recommend for web apps? Is this one better than other UI libraries like Material UI for example?

  • @realfootball338
    @realfootball338 4 роки тому

    I think Flutter the best. Because it uses each pixel of displey like Ionic but without browser with DOM. It has pluses from both React Native and Cordova(Ionic)

  • @kasuneranda3282
    @kasuneranda3282 4 роки тому

    Hi max i watching your tutorials.i found that this is the best place to start someone's their development career.wish you all the best you guys,also i need your opinion with wich is the best for develope mobile app like uber an
    👍👍👍👍

  • @tob3842
    @tob3842 4 роки тому

    Is there anything What works like expo, but for ionic(iOS)?

  • @drac8854
    @drac8854 3 роки тому

    capaciter 3 is here
    are there any changes?

  • @galaxyzpj1047
    @galaxyzpj1047 4 роки тому +1

    Please make a similar course for Iconic + Angular.
    I love your courses.
    Have followed your Angular and CSS courses on udemy.
    Much love

    • @academind
      @academind  4 роки тому +1

      Got such a course already => acad.link/ionic

    • @smaudd
      @smaudd 4 роки тому +1

      I might suggest ionicacademy.com/ Really awesome content too and ionic/angular specialized

  • @pitisradu
    @pitisradu 4 роки тому +1

    Great video as always Max. But I see there is a problem with notches when building apps with Ionic, how can one manage to get rid of this annoying bug?

  • @santoshdahal4911
    @santoshdahal4911 4 роки тому

    where is the part you teach how to publish this in app store. the capacitor part is completely missing.

  • @shivamnerwal72
    @shivamnerwal72 3 роки тому

    Really amazing content ..Thanks alot

  • @nurfa1105
    @nurfa1105 3 роки тому +1

    this is an amazing course! easy to understand and i hope you will teach the back end side too how to work with firebase

  • @TheSharkbeast
    @TheSharkbeast 2 роки тому

    i want to learn ionic Can this video help me as newer version of ionic is out.

  • @aguswisnu879
    @aguswisnu879 4 роки тому

    how to remove the result component when clicking the reset button?

  • @buziyborni
    @buziyborni 4 роки тому

    Please how do I use javascript with ionic and React. I don't like using typescript can you make a short demonstration please

  • @scoopydevy
    @scoopydevy 4 роки тому +2

    i love this guys accent

  • @danieltamunotonye1050
    @danieltamunotonye1050 4 роки тому

    This is awesome. Tnx man, just sub to the Pro package.

    • @academind
      @academind  4 роки тому

      Thank you Daniel, great to have you on board!

  • @AshSrinivas
    @AshSrinivas 4 роки тому

    Great video, thanks!

  • @danycance7011
    @danycance7011 3 роки тому

    Good evening. I'm writing from Italy and I would like to know, which is the shortcut to edit the 'import 'line into multiple lines like you do in the video?

  • @israeldiniz631
    @israeldiniz631 4 роки тому

    Hi, my program isn't doing the calculation, and the code of the both files, it's exactly like yours!
    Can be some problem whit the JS file?
    Thank you.

  • @kyleyu8126
    @kyleyu8126 4 роки тому

    how come such a great video only have 12k view?

  • @mohd.faizan3003
    @mohd.faizan3003 4 роки тому

    Can I use node js with ionic and react for backend

  • @isaachatilima
    @isaachatilima 2 роки тому

    As simpler as you can put it. Which is better Ionic + React or React Native?

  • @yatsuk
    @yatsuk 4 роки тому

    If you going to use reactjs that why not to use react native instead of ionic?

  • @theeternalwanderer3499
    @theeternalwanderer3499 4 роки тому

    hey max, your course is greate again but i noticed that i just have to rename the index and the app file in jsx files and than you can use normal javascipt for coding. Is it correct or do i run later into errors?

  • @thuanthien6199
    @thuanthien6199 3 роки тому

    Hello, Did you upload the full course on the Udemy platform yet? Ive just looked and couldn't find it on Udemy

  • @abdellatifahammad7735
    @abdellatifahammad7735 4 роки тому

    you are awesome bro, good job

  • @benjaminrachi2255
    @benjaminrachi2255 4 роки тому

    Thanks a lot Max ! Very great stuff, could you please alo make a video for Ionic + vue ? It will be great

  • @trocandobytes
    @trocandobytes 4 роки тому

    Very nice! How to use JS instead of typescript ?

  • @kuan8608
    @kuan8608 4 роки тому

    Can anyone plz tell me how come when I typed HTML and there's no potions that I can choose?

  • @erikgaborim5283
    @erikgaborim5283 4 роки тому

    quase tão bom quanto o guanabara!!! very good my parsero

  • @varaprasad4163
    @varaprasad4163 4 роки тому

    Thank you so much GURU

  • @cwcfunclock2709
    @cwcfunclock2709 4 роки тому

    Hello max! We kindly request you to upload a video about your journey up to base and obstacles which you crossed. Please do it.

  • @nahueltarricone
    @nahueltarricone 4 роки тому

    Hey Max!
    Do you explain at any point in the course how can I save images taken with the camera or from the gallery to a data base via POST method? I´m really struggling with this and can´t find a solution. Thanks a lot!

  • @lawalmukhtar1456
    @lawalmukhtar1456 3 роки тому

    Amazing project 💙💙.
    I do I have a question as regard to the iontabs. Is it that it can't be used in other components aside from the app.tsx?

  • @av50ox
    @av50ox 4 роки тому

    will you have this with ionic/vue aswell?

  • @cahayaharapan7272
    @cahayaharapan7272 2 роки тому

    Best tutorial

  • @aleksandarjocovic9452
    @aleksandarjocovic9452 4 роки тому

    Does somebody know what font is this. thanks :)

  • @ijasdeen3809
    @ijasdeen3809 4 роки тому +1

    Hi max! Is there any possibility to release IONIC + Vue js?

  • @gatita18punk
    @gatita18punk 4 роки тому

    Hello , thanks so much , just what i am looking for :)

  • @alwaysgrowww
    @alwaysgrowww 4 роки тому

    Please be safe guys! Thanks for this video...

    • @academind
      @academind  4 роки тому

      Same to you, thank you!

  • @EmSantano
    @EmSantano 4 роки тому

    Thanks a lot Max! Do you know if it is possible to change the extension of the files from .ts to .js. I don't really like typescript to work with.
    Thanks again!

    • @AaronSaundersCI
      @AaronSaundersCI 4 роки тому

      You can change the extensions and it will work fine

  • @Ne3zyTV
    @Ne3zyTV 3 роки тому

    thanks, can you make a tutorial on deploying a node js app on a vps with NGINX/DOCKER etc

  • @purushotham5984
    @purushotham5984 4 роки тому +1

    Nice video

  • @yogeshaggarwal3098
    @yogeshaggarwal3098 4 роки тому

    YOU ARE AWESOME

  • @prasoongoswami7172
    @prasoongoswami7172 4 роки тому

    Can't find the complete course on Udemy

  • @generalideas3115
    @generalideas3115 4 роки тому

    This course must be added in udemy .iGreat work max.. please make it available it udemy too..a lot student are waiting for this one.. please upload in udemy too..

    • @academind
      @academind  4 роки тому

      Thank you, but this course is only available on Academind Pro, also as single course purchase => acad.link/ionic-react

  • @Kg.gibson
    @Kg.gibson 4 роки тому +1

    thank you so much ionic was mwaaa