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

In this first video of the Todo List React Native tutorial series, you’ll learn: layouts using react native, creating reusable components, passing props to custom components, using Expo to run your react native app, styling react native components and more!
Link to source code - github.com/mattfrances/simple...
Link to Figma design - www.figma.com/file/ndTNp9FBR5...
❤️ Thanks for watching
👍 If you liked this video, be sure to give it a thumbs up
👊 Want to see more of this? Smash that subscribe button
📢 Let me know in the comments what you'd like to learn!
Follow me:
Twitter - / madewithmatt
KZread - / @madewithmatt
What we’ll be doing: (0:00)
Setting up Expo: (0:41)
Getting started with App.js: (1:54)
Today’s Tasks section: (2:22)
Creating a reusable Task component: (5:00)
Passing props: (7:27)
Task component styling: (8:28)
DONE 🎉: (13:40)

Пікірлер: 228

  • @steven7936
    @steven79363 жыл бұрын

    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 жыл бұрын

    Yeah same here it's a great developer experience!

  • @yasith2426
    @yasith24263 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

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

  • @thomasgauvin
    @thomasgauvin3 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

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

  • @bakhromkhalikulov7558
    @bakhromkhalikulov755811 ай бұрын

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

  • @simasjanusas1766
    @simasjanusas1766Ай бұрын

    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 Жыл бұрын

    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

  • @DaveEmtb
    @DaveEmtb2 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

    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!

  • @user-jq6el6ys2w
    @user-jq6el6ys2w Жыл бұрын

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

  • @MinhTran-pc4lh
    @MinhTran-pc4lh7 ай бұрын

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

  • @liebestraum003
    @liebestraum00310 ай бұрын

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

  • @anum2471
    @anum24712 жыл бұрын

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

  • @ElBlancoFinance
    @ElBlancoFinance3 жыл бұрын

    Glad to see you back, keep it up Matt!

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thanks man, appreciate the support 🔥🚀

  • @ddikodroid
    @ddikodroid3 жыл бұрын

    Looking forward to it. Keep it up Matt!

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

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

  • @shourya9998
    @shourya99983 жыл бұрын

    Short and to the point , brilliant 👏

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thank you 🙌😁

  • @Manan_K
    @Manan_K2 жыл бұрын

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

  • @alikibao3744
    @alikibao37442 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

    Amazing, glad it helped 😁🎉

  • @platinumrock
    @platinumrock3 жыл бұрын

    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!

  • @aanyc.6198
    @aanyc.619828 күн бұрын

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

  • @azeemtariq3257
    @azeemtariq3257 Жыл бұрын

    A very useful lesson for all aspiring softians

  • @Shahidulidseacademy
    @Shahidulidseacademy Жыл бұрын

    A great resource for Beginner. Thank you very much

  • @moncefarajdal4582
    @moncefarajdal45822 жыл бұрын

    Very well explained. Thanks man!

  • @shadon_official2510
    @shadon_official25102 жыл бұрын

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

  • @lrajoo11
    @lrajoo112 жыл бұрын

    fantastic video! and your styling is fantastic as well

  • @matthartstein
    @matthartstein2 жыл бұрын

    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!

  • @TechBoldy
    @TechBoldy2 жыл бұрын

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

  • @vgnxjhd3447
    @vgnxjhd34473 жыл бұрын

    I really enjoyed this one, thanks!

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Glad you enjoyed it thanks for letting me know 😁

  • @mohamedamr3811
    @mohamedamr3811 Жыл бұрын

    Thank you so much, Great and simple explanation.

  • @alexiadams458
    @alexiadams4583 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Appreciate it 😁 Glad you liked the video 🎉

  • @jesusochoa6616
    @jesusochoa66162 жыл бұрын

    what a masterpiece of channel, great video!

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

    Thanks for the comment, I really appreciate it 🙌

  • @adam_firdaus
    @adam_firdaus3 жыл бұрын

    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
    @sameerpatel91722 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

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

  • @djred8889
    @djred88893 жыл бұрын

    you almost reach 1000 subs, keep doing, idol!

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    My mannn thanks for the support 🚀

  • @sktamim_01
    @sktamim_012 жыл бұрын

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

  • @onnyvergieansaputra3514
    @onnyvergieansaputra35143 жыл бұрын

    Good Job !, very well explained thanks man

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

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

  • @honey78665
    @honey78665 Жыл бұрын

    This was really helpful. Thanks.

  • @elisakozlowsky5469
    @elisakozlowsky54692 жыл бұрын

    Really cool! I will try this!!

  • @williamkakooza4603
    @williamkakooza46033 ай бұрын

    Well done, Professor

  • @faizanmubarak9357
    @faizanmubarak9357 Жыл бұрын

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

  • @vishalyadav8789
    @vishalyadav87893 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thanks!! More tutorials coming soon 🙂

  • @SteveHarper-sw1qc
    @SteveHarper-sw1qc Жыл бұрын

    Awesome!

  • @ChrisOkw
    @ChrisOkw2 жыл бұрын

    Great video. Thanks man.

  • @vedatsozen
    @vedatsozen6 ай бұрын

    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.

  • @goncalaocs
    @goncalaocs2 жыл бұрын

    Awesome Video!!! Tnks for the help

  • @SpencerDavis2000
    @SpencerDavis20002 жыл бұрын

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

  • @programmingwithnit5308
    @programmingwithnit53089 ай бұрын

    Thank you so much 🎉❤

  • @ziaarfeen9992
    @ziaarfeen99923 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    ahahah much appreciated, glad you like it 🙌

  • @jobarmure6169
    @jobarmure6169 Жыл бұрын

    Great video to start with thx very much

  • @salmaindrianputri164
    @salmaindrianputri164 Жыл бұрын

    The reaaall bessttt

  • @albinsmajli1644
    @albinsmajli16442 жыл бұрын

    It helped me so much 👍

  • @willayatdaniyal7864
    @willayatdaniyal7864 Жыл бұрын

    great sir thanks you so much.

  • @kelolettek3927
    @kelolettek39272 жыл бұрын

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

  • @sunnysingha1154
    @sunnysingha11544 ай бұрын

    Wnt more projects like this❤

  • @Norogoth
    @Norogoth2 жыл бұрын

    Very good content; thank you.

  • @ashisbhowmik348
    @ashisbhowmik3482 жыл бұрын

    Your explanation is beginners friendly, thank you❤️❤️ Please make a Deployment series of expo app in play store ... 🙏🙏🙏

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

    I'm glad to hear that thanks so much for the comment 😁 That's a great idea, will look into it for future videos

  • @abirsonet925
    @abirsonet925 Жыл бұрын

    Informative video

  • @stackflowtwo6199
    @stackflowtwo61992 жыл бұрын

    Good Job Buddy, Keep them coming..

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

    Thanks so much! I appreciate the comment 🙌

  • @nuggets5787
    @nuggets5787 Жыл бұрын

    awesome video, thank You

  • @mohammedaladi2996
    @mohammedaladi29962 жыл бұрын

    You are the Best!

  • @programmingwithnit5308
    @programmingwithnit530810 ай бұрын

    Thank brother

  • @Smokinz
    @Smokinz Жыл бұрын

    I feel you

  • @DevEmpower
    @DevEmpower2 жыл бұрын

    Thanks bro

  • @pimentsni
    @pimentsni2 жыл бұрын

    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

    2 жыл бұрын

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

  • @mastercode7851
    @mastercode78512 жыл бұрын

    this is amazing thanks

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

    Thanks for watching 🙌

  • @arfinchowdhuryarif
    @arfinchowdhuryarif3 жыл бұрын

    You are great man .. Keep it up

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thanks man, really appreciate that 🙌

  • @alipourhassan3263
    @alipourhassan32632 жыл бұрын

    Perfect

  • @namanbhayani1016
    @namanbhayani10163 жыл бұрын

    You're the best bro

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thanks bro 👊💯

  • @eshwargetenv1
    @eshwargetenv13 жыл бұрын

    thank you matt

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thanks for the comment, glad you enjoyed it 😁

  • @mukulthakre5966
    @mukulthakre59662 жыл бұрын

    Great 💯

  • @abaridria54
    @abaridria543 жыл бұрын

    you deserve more subs

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    ahahah thank you 🚀💯🙌

  • @iputubastianadiputra5816
    @iputubastianadiputra58163 жыл бұрын

    best , thx master

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Glad you found it valuable 🚀

  • @adamgerber3698
    @adamgerber36982 жыл бұрын

    I finally understand what a prop is.

  • @oguzhankalfa1259
    @oguzhankalfa12593 жыл бұрын

    Good job!

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thanks! 🙌

  • @DhiaMagicien
    @DhiaMagicien3 жыл бұрын

    Super cool video

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

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

  • @gauravm.
    @gauravm.2 жыл бұрын

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

  • @varadasaiprakash9998
    @varadasaiprakash99982 жыл бұрын

    super

  • @MrDania101
    @MrDania1012 жыл бұрын

    bravo

  • @matmanatiptop4572
    @matmanatiptop45722 жыл бұрын

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

  • @matmanatiptop4572

    @matmanatiptop4572

    2 жыл бұрын

    And then to check status: expo whoami

  • @tonba7816

    @tonba7816

    2 жыл бұрын

    Thank you! This solved the issue for me!

  • @dardanberisha4098
    @dardanberisha40983 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    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

  • @jinlun4019
    @jinlun40192 жыл бұрын

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

  • @sowmocoding5740

    @sowmocoding5740

    Жыл бұрын

    ALT + Mouse Click (ALT = Option on Mac)

  • @varadasaiprakash9998
    @varadasaiprakash99982 жыл бұрын

    great

  • @cyerripaws8270
    @cyerripaws82703 жыл бұрын

    i love u. thank u so much.

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thank you 🎉🎉🎉

  • @sigfigronath
    @sigfigronath9 ай бұрын

    bro you need to make more tutorials !!!

  • @mr.uneasy6805
    @mr.uneasy68052 жыл бұрын

    Thank you

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

    Thanks for watching!

  • @maximuscho3847
    @maximuscho38472 жыл бұрын

    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

    2 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    2 жыл бұрын

    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

  • @varadasaiprakash9998
    @varadasaiprakash99982 жыл бұрын

    wow

  • @dronser
    @dronser2 жыл бұрын

    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! kzread.info/dash/bejne/aqGK0LRroMqTnM4.html

  • @TheSociate
    @TheSociate Жыл бұрын

    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"

  • @pkiss9369
    @pkiss9369 Жыл бұрын

    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

    Жыл бұрын

    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!

  • @bigfloppa6703
    @bigfloppa67039 ай бұрын

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

  • @Mahmoudery
    @Mahmoudery5 ай бұрын

    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?

  • @Purple-he1ke
    @Purple-he1ke3 жыл бұрын

    you are a good programmer

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    Thanks 😁

  • @markbenosa2896
    @markbenosa28962 жыл бұрын

    waiting for the functionalities of this

  • @quintonpangyixuan3990

    @quintonpangyixuan3990

    2 жыл бұрын

    Maybe some navigation? kzread.info/dash/bejne/aqGK0LRroMqTnM4.html

  • @smalls5001
    @smalls50012 жыл бұрын

    Wow you are going so fast

  • @quintonpangyixuan3990

    @quintonpangyixuan3990

    2 жыл бұрын

    Take a look here if you need any help: kzread.info/dash/bejne/aqGK0LRroMqTnM4.html

  • @gustocoder8900
    @gustocoder89007 ай бұрын

    Any note on deploying to the app store?

  • @akashsarwade2559
    @akashsarwade25592 жыл бұрын

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

  • @codehunter5200
    @codehunter52003 жыл бұрын

    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 жыл бұрын

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

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

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

  • @solver55
    @solver558 ай бұрын

    what are the tech stack used in this video

  • @pguti778
    @pguti7783 жыл бұрын

    It's both, react and react native tutorial!

  • @MadeWithMatt

    @MadeWithMatt

    3 жыл бұрын

    React and React Native are very very similar but there are some small differences mainly in building the UI, navigation and animations. If you're able to do React Native though, you can easily learn React and vice-versa!

  • @tikka6554
    @tikka65542 жыл бұрын

    Are you using Android studio for preview app?

  • @ahlan3609
    @ahlan36092 жыл бұрын

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

  • @cineverseproductions

    @cineverseproductions

    2 жыл бұрын

    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

    Жыл бұрын

    sudo i -g expo-cli hope this helps 😄