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

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

КОМЕНТАРІ • 232

  • @윤하-n6y
    @윤하-n6y Рік тому +13

    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!!!!

  • @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 😁

  • @simasjanusas1766
    @simasjanusas1766 8 місяців тому

    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

  • @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

  • @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.

  • @MinhTran-pc4lh
    @MinhTran-pc4lh Рік тому

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

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

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

  • @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 😁

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

    what a masterpiece of channel, great video!

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

      Thanks for the comment, I really appreciate it 🙌

  • @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!

  • @ElBlancoFinance
    @ElBlancoFinance 4 роки тому +9

    Glad to see you back, keep it up Matt!

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

      Thanks man, appreciate the support 🔥🚀

  • @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!"

  • @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!

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

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

  • @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!

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

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

  • @saralagab4036
    @saralagab4036 2 місяці тому

    thank you so much matt u got a new subsciber !

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

    Short and to the point , brilliant 👏

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

    fantastic video! and your styling is fantastic as well

  • @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 😎

  • @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 😁

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

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

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

    Thank you so much, Great and simple explanation.

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

    Looking forward to it. Keep it up
    Matt!

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

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

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

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

  • @djred8889
    @djred8889 3 роки тому +5

    you almost reach 1000 subs, keep doing, idol!

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

      My mannn thanks for the support 🚀

  • @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!

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

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

  • @aanyc.6198
    @aanyc.6198 7 місяців тому

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

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

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

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

    Good Job Buddy, Keep them coming..

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

      Thanks so much! I appreciate the comment 🙌

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

    A very useful lesson for all aspiring softians

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

    I really enjoyed this one, thanks!

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

      Glad you enjoyed it thanks for letting me know 😁

  • @williamkakooza4603
    @williamkakooza4603 9 місяців тому

    Well done, Professor

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

    Really cool! I will try this!!

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

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

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

    A great resource for Beginner. Thank you very much

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

    Very well explained. Thanks man!

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

    This was really helpful.
    Thanks.

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

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

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

    Awesome Video!!! Tnks for the help

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

    Good Job !, very well explained thanks man

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

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

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

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

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

      Appreciate it 😁 Glad you liked the video 🎉

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

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

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

      Thanks!! More tutorials coming soon 🙂

  • @GenjisaburoArashikage
    @GenjisaburoArashikage 4 місяці тому

    i just started developping damn! this is good

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

    Great video. Thanks man.

  • @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

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

    Great video to start with thx very much

  • @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!

  • @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 🙌

  • @sunnysingha1154
    @sunnysingha1154 11 місяців тому

    Wnt more projects like this❤

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

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

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

    You are great man .. Keep it up

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

      Thanks man, really appreciate that 🙌

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

    Informative video

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

    It helped me so much 👍

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

    The reaaall bessttt

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

    You are the Best!

  • @qhaleedk1842
    @qhaleedk1842 4 місяці тому

    Thanks matt

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

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

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

    awesome video, thank You

  • @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

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

    Thank you so much 🎉❤

  • @SteveHarper-sw1qc
    @SteveHarper-sw1qc Рік тому

    Awesome!

  • @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 11 місяців тому

    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?

  • @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!

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

    I finally understand what a prop is.

  • @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

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

    great sir thanks you so much.

  • @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 😄

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

    You're the best bro

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

    Very good content; thank you.

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

    Any note on deploying to the app store?

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

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

  • @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!

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

    what are the tech stack used in this video

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

    this is amazing thanks

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

    you deserve more subs

  • @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?

  • @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?

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

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

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

    Super cool video

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

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

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

    what is kind of database did you use for this?

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

    thank you matt

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

      Thanks for the comment, glad you enjoyed it 😁

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

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

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

    bro you need to make more tutorials !!!

  • @DANNY-BOAKYESTYL
    @DANNY-BOAKYESTYL 11 днів тому

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

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

    Great explanation....this is my first react native app. This was a good start ^_^

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

      This adds some navigation to it, hope it helps you gain some new knowledge! ua-cam.com/video/8mVnR2pg-lk/v-deo.html

  • @gauravm.
    @gauravm. 3 роки тому

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

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

    Are you using Android studio for preview app?

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

    Thank brother

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

    Great 💯

  • @AmarSapcanin-n9h
    @AmarSapcanin-n9h Рік тому

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

  • @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.

  • @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

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

    Thanks bro

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

    Good job!

  • @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

  • @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 ?

  • @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...