👉 Build your first React Native app - Todo List Tutorial Part 1

Поделиться
HTML-код
  • Опубликовано: 26 янв 2025

Комментарии • 232

  • @윤하-n6y
    @윤하-n6y Год назад +15

    I m korean. This video speak in only English. So i skip it first.. but i watch this video now, it s amazing and nice video!! you give me confidence to study rn!!! Thank you very very much!!!!

  • @simasjanusas1766
    @simasjanusas1766 9 месяцев назад +3

    Nice, short and straight to the point video. Thank you. No bs, no explanation, straight diving into the code and the design, - as it should be! Also kudos for showing how to use Figma tool. Efficient Figma use + React Native = turbo speed in development! Thanks

  • @yasith2426
    @yasith2426 3 года назад +29

    Great video, well explained and a beautiful UI. Hidden gem of a channel!

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +2

      Really appreciate it! Let me know if there's every anything you'd like to learn 😁

  • @ElBlancoFinance
    @ElBlancoFinance 4 года назад +9

    Glad to see you back, keep it up Matt!

    • @MadeWithMatt
      @MadeWithMatt  4 года назад +2

      Thanks man, appreciate the support 🔥🚀

  • @beko9858
    @beko9858 Год назад +1

    the best tutorial ever, rly i was enjoying every minute of this explanation , and wanna find out even more after this one , wish everyone has done the same job, well done and thank you friend

  • @thomasgauvin
    @thomasgauvin 3 года назад +6

    Love it Matt! Love making Todo list apps to learn the basics of a new language/framework

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      Thanks Tom! Same here, they're one of the first things I try when learning a new framework/technology 😁

  • @DaveEmtb
    @DaveEmtb 3 года назад +7

    I was looking for a good beginner tutorial for a long time, and this was it. Awesome tutorial. ✌️

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      Thanks so much Hemant that means a lot 🙌

    • @laurlifts
      @laurlifts 2 года назад

      @@MadeWithMatt I completely agree some beginner tutorials are confusing, this helped me so much with my assignment thank you!

  • @steven7936
    @steven7936 3 года назад +15

    I love the react native style sheets that you can use them in the file itself. Reminds me of the styled div components of React.

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +2

      Yeah same here it's a great developer experience!

  • @bakhromkhalikulov7558
    @bakhromkhalikulov7558 Год назад

    "Thank you so much for this video, Nomi! I really appreciated how you explained simple ToDo app in such a clear and concise way. I learned a lot and can't wait to try out it. Keep up the great work!"

  • @jesusochoa6616
    @jesusochoa6616 3 года назад +1

    what a masterpiece of channel, great video!

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      Thanks for the comment, I really appreciate it 🙌

  • @MinhTran-pc4lh
    @MinhTran-pc4lh Год назад

    Thank you for this video! Honestly I love your teaching style and how thorough the video is!

  • @vedatsozen
    @vedatsozen Год назад

    Thanks for tutorial.
    This video is generally about designing. I am waiting to learn props and state management. I am passing to next video to learn it.
    I designed it with your tutorial. Lets see what ll happen in next video.

  • @Manan_K
    @Manan_K 3 года назад

    Great video!
    I already feel comfortable with react native after watching this.

  • @anum2471
    @anum2471 3 года назад

    you explained it in a simplifying way👌👌👌👌best explanation ever❕❕❕

  • @matthartstein
    @matthartstein 2 года назад +1

    I've been looking for a way to develop iOS apps on Windows 10 without a VM. React and Expo are so cool. Awesome video!

  • @ddikodroid
    @ddikodroid 4 года назад

    Looking forward to it. Keep it up
    Matt!

    • @MadeWithMatt
      @MadeWithMatt  4 года назад +1

      Thanks for the support and glad you're enjoying the content 🤩

  • @adam_firdaus
    @adam_firdaus 3 года назад +1

    Nice video bruh. Hope your channel grow faster !! Keep doin' it !

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Thank you so much 🙌 I'm happy you liked the video 😎

  • @alikibao3744
    @alikibao3744 3 года назад +2

    Thanks for this.. very easy to comprehend for a beginner like myself. Much appreciated.

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Amazing, glad it helped 😁🎉

  • @liebestraum003
    @liebestraum003 Год назад

    Simple and clear tutorial, no bs and straight into points. Wish I found your channel earlier!

  • @sktamim_01
    @sktamim_01 3 года назад

    I'm vary excited to complete my First mobile app....🤩

  • @shourya9998
    @shourya9998 3 года назад +1

    Short and to the point , brilliant 👏

  • @djred8889
    @djred8889 3 года назад +5

    you almost reach 1000 subs, keep doing, idol!

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      My mannn thanks for the support 🚀

  • @sameerpatel9172
    @sameerpatel9172 3 года назад

    Loved the way you teach. Keep it up bro. You are my new teacher!

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      I'm really glad to hear you're enjoying the videos! Thanks for the comment 😁

  • @lrajoo11
    @lrajoo11 3 года назад

    fantastic video! and your styling is fantastic as well

  • @platinumrock
    @platinumrock 3 года назад +2

    Great video and you were able to explain it fantastically !!!

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Thanks so much man means a lot 😁🚀 Let me know if there's ever something you'd like to learn!

  • @mohamedamr3811
    @mohamedamr3811 Год назад

    Thank you so much, Great and simple explanation.

  • @saralagab4036
    @saralagab4036 3 месяца назад

    thank you so much matt u got a new subsciber !

  • @azeemtariq3257
    @azeemtariq3257 2 года назад

    A very useful lesson for all aspiring softians

  • @TechBoldy
    @TechBoldy 3 года назад +1

    Very helpful video for beginners 🔥 great job 👏⭐⭐⭐⭐⭐

  • @shadon_official2510
    @shadon_official2510 3 года назад

    This is such an amazing video. Thank you so much.

  • @vgnxjhd3447
    @vgnxjhd3447 3 года назад +2

    I really enjoyed this one, thanks!

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Glad you enjoyed it thanks for letting me know 😁

  • @aanyc.6198
    @aanyc.6198 8 месяцев назад

    Thank you so much for this beginner way like really appreciate it.

  • @faizanmubarak9357
    @faizanmubarak9357 2 года назад

    Thank You soo Sir much your videos give me a lot of confidence

  • @honey78665
    @honey78665 2 года назад

    This was really helpful.
    Thanks.

  • @moncefarajdal4582
    @moncefarajdal4582 2 года назад

    Very well explained. Thanks man!

  • @elisakozlowsky5469
    @elisakozlowsky5469 3 года назад

    Really cool! I will try this!!

  • @williamkakooza4603
    @williamkakooza4603 10 месяцев назад

    Well done, Professor

  • @matmanatiptop4572
    @matmanatiptop4572 3 года назад +3

    If you receive an security error after installation try this command line:
    Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

    • @matmanatiptop4572
      @matmanatiptop4572 3 года назад

      And then to check status: expo whoami

    • @tonba7816
      @tonba7816 3 года назад +1

      Thank you! This solved the issue for me!

  • @goncalaocs
    @goncalaocs 3 года назад

    Awesome Video!!! Tnks for the help

  • @reversetour
    @reversetour 2 года назад

    A great resource for Beginner. Thank you very much

  • @codehunter5200
    @codehunter5200 3 года назад +1

    Hey what was the shortcut used at 9:54 where you wrote :{} for one style item and it was automatically written for every item

    • @jonathanh2923
      @jonathanh2923 3 года назад +1

      Ctrl + Click for multiple carets (If it doesn't work try going to Selection > Switch to Ctrl + Click for Multi-Cursor)

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      Yep exactly! I'm on Mac, and I use Option + click

  • @alexiadams458
    @alexiadams458 3 года назад +1

    Thanks for the video! You're a great teacher!

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Appreciate it 😁 Glad you liked the video 🎉

  • @stackflowtwo6199
    @stackflowtwo6199 3 года назад

    Good Job Buddy, Keep them coming..

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Thanks so much! I appreciate the comment 🙌

  • @ChrisOkw
    @ChrisOkw 2 года назад

    Great video. Thanks man.

  • @adamgerber3698
    @adamgerber3698 2 года назад

    I finally understand what a prop is.

  • @vishalyadav8789
    @vishalyadav8789 4 года назад

    Thanks For making a video, need such more video on basic of React Native

    • @MadeWithMatt
      @MadeWithMatt  4 года назад

      Thanks!! More tutorials coming soon 🙂

  • @ziaarfeen9992
    @ziaarfeen9992 3 года назад

    thankyou so much sir I'm crying you are my saviour

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      ahahah much appreciated, glad you like it 🙌

  • @jobarmure6169
    @jobarmure6169 2 года назад

    Great video to start with thx very much

  • @onnyvergieansaputra3514
    @onnyvergieansaputra3514 3 года назад +2

    Good Job !, very well explained thanks man

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Thanks so much I'm really happy you like it 😁

  • @kelolettek3927
    @kelolettek3927 3 года назад

    thanks for your tutorial! helpful! hope to see your another new mobile tuto!! :)

  • @GenjisaburoArashikage
    @GenjisaburoArashikage 5 месяцев назад

    i just started developping damn! this is good

  • @sunnysingha1154
    @sunnysingha1154 11 месяцев назад

    Wnt more projects like this❤

  • @albinsmajli1644
    @albinsmajli1644 2 года назад

    It helped me so much 👍

  • @bigfloppa6703
    @bigfloppa6703 Год назад

    Why don’t I have that metro bundler when I use expo start then select w for open on a web browser?

  • @maximuscho3847
    @maximuscho3847 3 года назад +3

    just started learning react native, without any prior experience learning react... I have a solid understanding of JS and HTML so I am wondering if its possible to learn this without having learnt react.
    Great Tutorial btw, very clear and much easier to understand than every other large youtuber I have seen!

    • @greydock5768
      @greydock5768 3 года назад +1

      +following convo. I'm in the same boat.

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +3

      Hey, great question and thanks for the feedback!
      If you've got a solid understanding of JS, that's all you need to get started learning React OR React Native. Since React and React Native have very similar base concepts and implementations, once you know one it's easy to learn the other

  • @pimentsni
    @pimentsni 3 года назад

    thanks for the video bro, saved me from a school job besides giving me a good learning experience.
    it cost! like + sub for you.

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      Thanks so much for the support, glad you found it valuable!

  • @qhaleedk1842
    @qhaleedk1842 5 месяцев назад

    Thanks matt

  • @gustocoder8900
    @gustocoder8900 Год назад

    Any note on deploying to the app store?

  • @nuggets5787
    @nuggets5787 2 года назад

    awesome video, thank You

  • @TheSociate
    @TheSociate 2 года назад

    Hi Thanks for the tutorial however I get a blank screen when I open the web browser, in the console it says "ReactDOM.render is no longer supported in React 18"

  • @Mahmoudery
    @Mahmoudery Год назад

    Hello, Matt. Nice video, mate!
    I was applying the knowledge by my self and I got well so far in the state management and different manipulation experiences, however, I am facing a trouble with an error that I cannot resolve at all. It says: cannot be a child node of a . Please, can you help me?

  • @ahlan3609
    @ahlan3609 3 года назад +5

    I am getting some permissions errors when I try to install global expo-cli. Is anyone else having the same issue?

    • @cineverseproductions
      @cineverseproductions 2 года назад +1

      use ‘sudo’ if you’re using mac or linux.

    • @alvinkk2338
      @alvinkk2338 2 года назад

      i use git bash .. vs code unable to run it. And i type in expo init (project name) --template blank

    • @techbear2309
      @techbear2309 2 года назад +3

      sudo i -g expo-cli
      hope this helps 😄

  • @samikshyakc875
    @samikshyakc875 2 года назад

    my ios camera says no usable data while scanning the QR code.Tried it with the QR scanner app and says invalid URL. Also cant install xcode for the simulator as is not supported by my macos version. I could open it in the web but please tell me the solution for the mobile. Thanks

  • @mohammedaladi2996
    @mohammedaladi2996 3 года назад

    You are the Best!

  • @idc20627
    @idc20627 2 года назад

    The square in touchable opacity is not coming up. Any suggestions?

  • @gauravm.
    @gauravm. 3 года назад

    Hey Matt, what is that keyboard? It sounds so good.

  • @aliseftali38
    @aliseftali38 Год назад

    hey bro, I have problem with "undefined" I did everything but its not gonna solve, I can't write on console. Can you help me?

  • @AmarSapcanin-n9h
    @AmarSapcanin-n9h Год назад

    I tried doing this but have error. It says that file components/Task does not exist...

  • @programmingwithnit5308
    @programmingwithnit5308 Год назад

    Thank you so much 🎉❤

  • @arfinchowdhuryarif
    @arfinchowdhuryarif 3 года назад

    You are great man .. Keep it up

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Thanks man, really appreciate that 🙌

  • @SpencerDavis2000
    @SpencerDavis2000 3 года назад

    awesome tutorial. looking forward to more. thanks :-)

  • @willayatdaniyal7864
    @willayatdaniyal7864 Год назад

    great sir thanks you so much.

  • @leopoldomolina1763
    @leopoldomolina1763 2 года назад

    I wanted to start this (and actually did) in my VS Code on Arch Linux... but I faced a lot of problems and gave up. I noticed you are using Mac. Maybe the development tools like Xcode cannot be handle on arch linux?

  • @abirsonet925
    @abirsonet925 Год назад

    Informative video

  • @jaztinbuenaventura8127
    @jaztinbuenaventura8127 Год назад

    what is kind of database did you use for this?

  • @akashsarwade2559
    @akashsarwade2559 3 года назад

    sir can we use data database to strore our data , how can we do ?

  • @pkiss9369
    @pkiss9369 2 года назад

    Love the video! If possible please slow down a bit, it's hard to keep up without pausing the video every 10 seconds. Thank you! 100% subscribing.

    • @5amonline699
      @5amonline699 2 года назад

      Dude.
      Go to ‘Settings’ > ‘Playback Speed’ …. Choose from:-
      0.5x
      0.75x
      Normal
      1.25x
      1.5x
      … Personally, I just watched this @ 1.5x speed as I like to consume as much educational content (like this great vid), as fast as I can!

  • @sigfigronath
    @sigfigronath Год назад

    bro you need to make more tutorials !!!

  • @tikka6554
    @tikka6554 3 года назад

    Are you using Android studio for preview app?

  • @jinlun4019
    @jinlun4019 2 года назад +2

    Great video and great work! Can i know how do you copy all the styles and put into StyleSheet in one times ?

    • @sowmocoding5740
      @sowmocoding5740 2 года назад +3

      ALT + Mouse Click (ALT = Option on Mac)

  • @mastercode7851
    @mastercode7851 3 года назад

    this is amazing thanks

  • @DANNY-BOAKYESTYL
    @DANNY-BOAKYESTYL Месяц назад

    Pls how can i download this app on my phone to use

  • @kali8854
    @kali8854 3 года назад +1

    I need help. After I enter the first command it downloads some stuff and it looks fine. but when using the command "expo" it says "The term 'expo' is not recognized as the name of a cmdlet, function, script file, or operable program." What should I do? Thanks in advance.

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Hey, sorry for the delay. To fix that, you may need to install expo. You can find the npm command here - docs.expo.dev/get-started/installation/#installing-expo-cli. Hope that helps!

    • @shailesh8189
      @shailesh8189 3 года назад

      Try with npm , it should work fine.

  • @SteveHarper-sw1qc
    @SteveHarper-sw1qc Год назад

    Awesome!

  • @solver55
    @solver55 Год назад

    what are the tech stack used in this video

  • @abaridria54
    @abaridria54 3 года назад

    you deserve more subs

  • @namanbhayani1016
    @namanbhayani1016 4 года назад

    You're the best bro

  • @dardanberisha4098
    @dardanberisha4098 3 года назад +2

    Great video. I was wondering how would you do the validation of the input length in this case? any advice?

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +3

      Thanks! Yeah for sure. So validate the length of the string here's what you can add to the top of the handleAddTask function:
      if (task.length > 16) {
      alert("The password is too long!);
      return;
      }
      In the example above, if the length of the task is longer than 16 characters, it will show an alert to the user and return so that it doesn't actually create the task in the list. Let me know if that helps 🙂

    • @dardanberisha4098
      @dardanberisha4098 3 года назад

      @@MadeWithMatt Thank you! It works!
      btw I love your channel, very educational

  • @Norogoth
    @Norogoth 3 года назад

    Very good content; thank you.

  • @joel_mathew
    @joel_mathew 3 года назад

    can someone tell me the windows shortcut of how he can select MULTIPLE DIFFERENT texts at the same time?

  • @manojbj2778
    @manojbj2778 3 года назад +1

    This app don't store the data after refresh the app or remove from resents app all the data stored in it is deleted is this need a database or how to store those data in phone memory only help me plzz🙏

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      That's a great idea for a next video! This one is kept simple to give beginners the chance to learn react native quickly and easily. In the future, I will be making videos which dig deeper into more complex concepts like data storage

  • @vishnumanikantan8213
    @vishnumanikantan8213 3 года назад +1

    How to setup the simulator? Should we download it separately?

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      What's great about Expo is that you can actually use your phone as a simulator. So when you run "expo start", you should see a QR code show up. Scan that QR code with your phone and it will open up the Expo Go app. From there, it will build your react native app and run it on your device so you get to use it! When developing with react native without Expo, you do need to use a simulator. I'll have a video on that soon covering how to set it up!

    • @vishnumanikantan8213
      @vishnumanikantan8213 3 года назад

      @@MadeWithMatt yeah please do that thank you

  • @AhmedKhaled-gg2uf
    @AhmedKhaled-gg2uf 3 года назад +1

    I need link to download this app 1:09

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      If you follow step by step, you should be able to create the todo list app with me as we code together. But if you'd like to see the source code here's the link! github.com/mattfrances/simple...

  • @rakoahmed5439
    @rakoahmed5439 2 года назад

    Great content! One question, can I run IOS simulator on windows? If yes, how?

  • @eshwargetenv1
    @eshwargetenv1 3 года назад

    thank you matt

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      Thanks for the comment, glad you enjoyed it 😁

  • @jai7787
    @jai7787 3 года назад

    I understand how html, css & JS (JUST BASICS) work. Can I jump in straight to React Native?

    • @jai7787
      @jai7787 3 года назад

      Also Matt, this was an informative video. Keep creating. Please keep vue.js in to list for video creation. Looking forward to learn more

  • @DhiaMagicien
    @DhiaMagicien 3 года назад

    Super cool video

    • @MadeWithMatt
      @MadeWithMatt  3 года назад +1

      Thanks, the people like you that are watching are even cooler though 👀🤩

  • @kresnawira5708
    @kresnawira5708 3 года назад +1

    Excuse me, how to show iPhone screen like in the video?

    • @MadeWithMatt
      @MadeWithMatt  3 года назад

      To do that I’m running the iOS simulator. Using expo, you type in “i” in the vs code command line and it should open it up. Please note that for it to work you need to be on an Apple device. More info here - reactnative.dev/docs/running-on-simulator-ios

    • @kresnawira5708
      @kresnawira5708 3 года назад

      @@MadeWithMattokay, thank you sir

  • @jaysonlana9147
    @jaysonlana9147 2 года назад

    How can I pass more value in item ?

  • @programmingwithnit5308
    @programmingwithnit5308 Год назад

    Thank brother