👉 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
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
3 жыл бұрын
Yeah same here it's a great developer experience!
Great video, well explained and a beautiful UI. Hidden gem of a channel!
@MadeWithMatt
3 жыл бұрын
Really appreciate it! Let me know if there's every anything you'd like to learn 😁
Love it Matt! Love making Todo list apps to learn the basics of a new language/framework
@MadeWithMatt
3 жыл бұрын
Thanks Tom! Same here, they're one of the first things I try when learning a new framework/technology 😁
"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!"
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
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
I was looking for a good beginner tutorial for a long time, and this was it. Awesome tutorial. ✌️
@MadeWithMatt
2 жыл бұрын
Thanks so much Hemant that means a lot 🙌
@laurlifts
2 жыл бұрын
@@MadeWithMatt I completely agree some beginner tutorials are confusing, this helped me so much with my assignment thank you!
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!!!!
Thank you for this video! Honestly I love your teaching style and how thorough the video is!
Simple and clear tutorial, no bs and straight into points. Wish I found your channel earlier!
you explained it in a simplifying way👌👌👌👌best explanation ever❕❕❕
Glad to see you back, keep it up Matt!
@MadeWithMatt
3 жыл бұрын
Thanks man, appreciate the support 🔥🚀
Looking forward to it. Keep it up Matt!
@MadeWithMatt
3 жыл бұрын
Thanks for the support and glad you're enjoying the content 🤩
Short and to the point , brilliant 👏
@MadeWithMatt
3 жыл бұрын
Thank you 🙌😁
Great video! I already feel comfortable with react native after watching this.
Thanks for this.. very easy to comprehend for a beginner like myself. Much appreciated.
@MadeWithMatt
2 жыл бұрын
Amazing, glad it helped 😁🎉
Great video and you were able to explain it fantastically !!!
@MadeWithMatt
3 жыл бұрын
Thanks so much man means a lot 😁🚀 Let me know if there's ever something you'd like to learn!
Thank you so much for this beginner way like really appreciate it.
A very useful lesson for all aspiring softians
A great resource for Beginner. Thank you very much
Very well explained. Thanks man!
This is such an amazing video. Thank you so much.
fantastic video! and your styling is fantastic as well
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!
Very helpful video for beginners 🔥 great job 👏⭐⭐⭐⭐⭐
I really enjoyed this one, thanks!
@MadeWithMatt
3 жыл бұрын
Glad you enjoyed it thanks for letting me know 😁
Thank you so much, Great and simple explanation.
Thanks for the video! You're a great teacher!
@MadeWithMatt
3 жыл бұрын
Appreciate it 😁 Glad you liked the video 🎉
what a masterpiece of channel, great video!
@MadeWithMatt
2 жыл бұрын
Thanks for the comment, I really appreciate it 🙌
Nice video bruh. Hope your channel grow faster !! Keep doin' it !
@MadeWithMatt
3 жыл бұрын
Thank you so much 🙌 I'm happy you liked the video 😎
Loved the way you teach. Keep it up bro. You are my new teacher!
@MadeWithMatt
2 жыл бұрын
I'm really glad to hear you're enjoying the videos! Thanks for the comment 😁
you almost reach 1000 subs, keep doing, idol!
@MadeWithMatt
3 жыл бұрын
My mannn thanks for the support 🚀
I'm vary excited to complete my First mobile app....🤩
Good Job !, very well explained thanks man
@MadeWithMatt
3 жыл бұрын
Thanks so much I'm really happy you like it 😁
This was really helpful. Thanks.
Really cool! I will try this!!
Well done, Professor
Thank You soo Sir much your videos give me a lot of confidence
Thanks For making a video, need such more video on basic of React Native
@MadeWithMatt
3 жыл бұрын
Thanks!! More tutorials coming soon 🙂
Awesome!
Great video. Thanks man.
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.
Awesome Video!!! Tnks for the help
awesome tutorial. looking forward to more. thanks :-)
Thank you so much 🎉❤
thankyou so much sir I'm crying you are my saviour
@MadeWithMatt
3 жыл бұрын
ahahah much appreciated, glad you like it 🙌
Great video to start with thx very much
The reaaall bessttt
It helped me so much 👍
great sir thanks you so much.
thanks for your tutorial! helpful! hope to see your another new mobile tuto!! :)
Wnt more projects like this❤
Very good content; thank you.
Your explanation is beginners friendly, thank you❤️❤️ Please make a Deployment series of expo app in play store ... 🙏🙏🙏
@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
Informative video
Good Job Buddy, Keep them coming..
@MadeWithMatt
2 жыл бұрын
Thanks so much! I appreciate the comment 🙌
awesome video, thank You
You are the Best!
Thank brother
I feel you
Thanks bro
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
2 жыл бұрын
Thanks so much for the support, glad you found it valuable!
this is amazing thanks
@MadeWithMatt
2 жыл бұрын
Thanks for watching 🙌
You are great man .. Keep it up
@MadeWithMatt
3 жыл бұрын
Thanks man, really appreciate that 🙌
Perfect
You're the best bro
@MadeWithMatt
3 жыл бұрын
Thanks bro 👊💯
thank you matt
@MadeWithMatt
3 жыл бұрын
Thanks for the comment, glad you enjoyed it 😁
Great 💯
you deserve more subs
@MadeWithMatt
3 жыл бұрын
ahahah thank you 🚀💯🙌
best , thx master
@MadeWithMatt
3 жыл бұрын
Glad you found it valuable 🚀
I finally understand what a prop is.
Good job!
@MadeWithMatt
3 жыл бұрын
Thanks! 🙌
Super cool video
@MadeWithMatt
3 жыл бұрын
Thanks, the people like you that are watching are even cooler though 👀🤩
Hey Matt, what is that keyboard? It sounds so good.
super
bravo
If you receive an security error after installation try this command line: Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted
@matmanatiptop4572
2 жыл бұрын
And then to check status: expo whoami
@tonba7816
2 жыл бұрын
Thank you! This solved the issue for me!
Great video. I was wondering how would you do the validation of the input length in this case? any advice?
@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
3 жыл бұрын
@@MadeWithMatt Thank you! It works! btw I love your channel, very educational
Great video and great work! Can i know how do you copy all the styles and put into StyleSheet in one times ?
@sowmocoding5740
Жыл бұрын
ALT + Mouse Click (ALT = Option on Mac)
great
i love u. thank u so much.
@MadeWithMatt
3 жыл бұрын
Thank you 🎉🎉🎉
bro you need to make more tutorials !!!
Thank you
@MadeWithMatt
2 жыл бұрын
Thanks for watching!
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
2 жыл бұрын
+following convo. I'm in the same boat.
@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
wow
Great explanation....this is my first react native app. This was a good start ^_^
@quintonpangyixuan3990
2 жыл бұрын
This adds some navigation to it, hope it helps you gain some new knowledge! kzread.info/dash/bejne/aqGK0LRroMqTnM4.html
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"
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
Жыл бұрын
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!
Why don’t I have that metro bundler when I use expo start then select w for open on a web browser?
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?
you are a good programmer
@MadeWithMatt
3 жыл бұрын
Thanks 😁
waiting for the functionalities of this
@quintonpangyixuan3990
2 жыл бұрын
Maybe some navigation? kzread.info/dash/bejne/aqGK0LRroMqTnM4.html
Wow you are going so fast
@quintonpangyixuan3990
2 жыл бұрын
Take a look here if you need any help: kzread.info/dash/bejne/aqGK0LRroMqTnM4.html
Any note on deploying to the app store?
sir can we use data database to strore our data , how can we do ?
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
3 жыл бұрын
Ctrl + Click for multiple carets (If it doesn't work try going to Selection > Switch to Ctrl + Click for Multi-Cursor)
@MadeWithMatt
3 жыл бұрын
Yep exactly! I'm on Mac, and I use Option + click
what are the tech stack used in this video
It's both, react and react native tutorial!
@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!
Are you using Android studio for preview app?
I am getting some permissions errors when I try to install global expo-cli. Is anyone else having the same issue?
@cineverseproductions
2 жыл бұрын
use ‘sudo’ if you’re using mac or linux.
@alvinkk2338
2 жыл бұрын
i use git bash .. vs code unable to run it. And i type in expo init (project name) --template blank
@techbear2309
Жыл бұрын
sudo i -g expo-cli hope this helps 😄