Full React Tutorial #11 - Props
HTML-код
- Опубликовано: 3 янв 2021
- Hey gang, in this React tutorial we'll learn about props - which is a way to pass data from parent components into child components.
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱💻 🐱💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja
Without any doubt the most straightforward, no nonsense React tutorial series on RUclips, by a wide margin. Thanks buddy
No problem :) thanks for the kind words!
@@NetNinja Does your channel have any other react tutorials? Would love to see more, maybe some tutorials on getting components to communicate with each other?
Im late to this but thankyou! Most logical approach ive found online!
* Best React tutorial on the internet.
Agreed. This has shattered some mental barriers for me that I've been struggling with for years. 🙌
The thing I'm loving about this tutorial is that they are short and straight to the point. No need for like 20 minutes of explaining
exactly.
I really want to say:"Sir. you have the best react courses on RUclips. Thank you." ^_^ I am your big fan.
Thank you so much :)
@@NetNinja Right now I understand how other Star chasers feel after they got replay from their idol 😆 😆😁 Thank you sir 😁
@@viviannwangrydh1187 why your badge is better than mine?
@@unknownman1 sorry i do not know why 😂
@@viviannwangrydh1187 you still doing React?
I've never seen someone explain this in such a simple way as you did! Kudos for this!
"And third: It allows me to show you how to use props." 😂👍
now, it does make sense LOL
I take another react courses but no one tell the logic behind the action. You are great teacher sir. I understand completely the logics behind the actions. You are telling a lot of thing within the short time. Im glad for your efforts
I cant believe im actually getting React now . Thanks man
even though I am very comfortable with React, I still love watching Shaun explain it.
One video and I'm subbed. I'm in a React class and they had a very convoluted way of explaining all this. THANK you so much for the video. Literally exactly the kind of explanation I needed.
I'm enjoying this playlist a lot! Most up to date and straightforward, thank you!
I was referred to your channel and it has assisted me when i felt completely lost! The last 3 videos have completely relieved my stress and that was due to you breaking it down to small digestible parts . THANK YOU 👨💻
Glad I could help! :D
this course is simple , short , straight to the point and cristal clear as day. i must say that it helped me clear the core concepts of react in a very beginner friendly way. best beginner react course out there, that too its free.
Started attending a course in React in Poland. But having watched your explanation of props, I finally understand them. Thanks a lot! You're the BEST!
You are the BEST!! I have been stuck with this for over a week and no vids made sense to me. I'm using props like 2nd nature now, thank you for the extremely clear explanation
finally i understand how props works🥺👍
Very well structured and simple explanation of something you can easily get lost in, thanks!
Shaun, Thank you so much for this awesome video. Loved it. It helped a lot, as it is very easy to follow.
You explain everything deeply but fast. Making it really easy to learn.
You have the best playList so far ...
Keep it up
the last deconstructing part just made my components so much cleaner, glad i learnt that
This is what i call teach! explaining and telling how and why we should use things, your channel is pure gold, thanks for sharing with us.
You just saved me from hours and hours of googling and research trying to figure this out in 9 minutes!! Well earned sub, sir.
This is exactly what I was looking for, thank you very much. Going to watch many more of your videos to learn react.
Going through this series just to bush up my React skills. Again a nice one , followed you in Github as well Shaun. Keep it up !! :)
simple, straight to point , quick , i love you
It could not be more Perfect.Thanks a lot
Lucid and memorable. Excellent educator as ever.
I really really love your videos. You always straight forward to point
For real this helped me understand props way better than any other tutorial ♥
Its really So REALLY THE BEST tutorial for REACT out there!!! Just WELL DONE mister!!! And its also free!!! Just wow!!
I was waiting for this soo long
As a React beginner this cleared up a lot of things for me! Thanks!
I’ll be honest, I tried several times learning to code, your guide series helped me finally acquire the logic I was lacking, it wasn’t this series alone, it took me some thinking and analyzing prior to that but this series definitely made it 90% easier so thank you very much! I appreciate it more than you know!
That's great to hear :) glad it helped. Thanks for watching Mrwolf!
@@NetNinja thanks a lot bro, can’t thank you enough!
Edit: just a sec I just remembered I can actually pay you back
It may not be much but honest work (jk lol thanks again, it’s really not taken for granted)
Wow. I struggled understanding props from my current course (which i'm not shaming btw, the free course i'm taking is great) but this video summed it up so well for me. Very clear and concise. Thank you man.
Great Videio - mentioning that props is an object was extremlly helpful
Pretty good tutorial, now I know how exactly props working !!!
right , me too here
De-structuring Props object in an argument is one of the best part for me.
This course is amazing.... I´m really old fashion dev (clipper... d3 pick.. etc.) and it´s pretty clear all yours explanations... My first react app is on the wayyyy....
Fantastic video! You said you would teach us props and you did it quickly. Thank you!
Been breaking my head for the past few hours. Trying to map over results. Sometimes it worked, sometimes it didn't. 😮💨
Figured it must have something to do with the response time from the fetch, but didn't know what to do about it.
I can always count on you to have the answer I need and to explain it simply enough that I can understand it at my current level.
I owe you a debt of gratitude Shaun. I will not forget this once I graduate and am in a better situation. I hope you're doing well and that well-deserved success is finding you in all your endeavors. ✊
[edit] I actually meant to leave this comment on the video titled "Full React Tutorial #17 - Fetching Data with useEffect" where you go over how to fetch data and conditionally display it once there actually is something to dosplay.
I don't know how it ended up here. Guess I must've had too many tabs open trying to find the video with the right answer. 🤦♂😅
Also I love ❤️ your tutorials. so simple to understand.
Best ever react tutorial I have found
I finally understood props.... God bless you.
When you create a separate file for the blog list and use props the react compiler will sometimes throw an error at blogs.map line, to solve this use "CTRL+C" to terminate current job and run the command "npm run start", this will recompile the project and you will see that the error is gone :)
Ahn?!
I was having this issue and it really annoyed me for ages, couldn't figure out what was happening. Thank you so much for your solution.
Do you (Or anyone else) know why it happens at all? My very first time using React, I don't know if this is a common thing!
@@54321conor Glad that it helped 😊
THANK YOU. I only spent 10 minutes before I decided to look at the comments to see if this problem had been encountered. But it could have been hours!
@@mcloughman no problem mate, as a fellow programmer I knew this would help so the reason I put up this comment :)
2023 and this tutorial really helped me understand props, I really appreciate that you explained the logic behind the concepts.
Glad it was helpful Julio :)
Anyone wanting to learn Web Development could just stay on this youtube channel and land a job! Amazing teaching skills!
Thanks Robi!
@@NetNinja And now decided to grab a Udemy Course! Excellent!
I really love it! Great! What can I say more I really don't know but Sir you're the perfect instructor. Thank you very much!
Hey! I just found your channel and subscribed, love what you're doing! Particularly, I like how clear and detailed your explanations are as well as the depth of knowledge you have surrounding the topic! Since I run a tech education channel as well, I love to see fellow Content Creators sharing, educating, and inspiring a large global audience. I wish you the best of luck on your RUclips Journey, can't wait to see you succeed!
Your content really stands out and you've put so much thought into your videos!
Cheers, happy holidays, and keep up the great work :)
Thanks man, you means a lot for all of us
Thank you so much for this. It's extremely helpful
I was struggling to understand this and this video gave me perfect clarity. Thank you
That's awesome to hear, thanks for watching Soulju!
Thanks for the great tutorial!
Thanks a lot, you saved my life, my master!
you Sir deserve a trophy for this course
I have been looking for a good tutor to take me through react tutorials but i have landed and yo. I must say you are the best so far.. Thank you sir
You're very welcome Eteku! Thanks for watching :)
This was really helpful thank you!!
Thanks again! Very helpful
so far learning from you is sooooo easy to understand, thankyou verymuch may god bless your kindness soul
Glad to hear that! Thanks Jinji :)
Thank you for great videos and explaining the foundation very clearly !!!
Glad it was helpful! :)
Amazing video, thank you!
Nice explanations! like always!
You explain very well. Thank you!
You're very welcome!
This is SO helpful! THANK YOU!!!
Glad it helped Chris!
Hi, thank you for this tutorial ! Is it possible to know what icon extension you use in your vs code ?
ممنون شایان جون
bought a couple react courses on Udemy. This free couse is waaaaaaay better. Ur a great teacher. thanks!
Thanks Michael! much appreciated :)
was waiting THIS video from 2020....
great video man
masterful , I joined after a few lessons, this channel is my life now
Awesome to hear that Lex, thanks for your support :)
@@NetNinja thank you for your lessons!!
clean explanation
Really the best tutorial
Thank you so much, this video helped me a lot.
Glad it helped! :)
awesome content man
This Ninja the best!!!
Hi Shaun, I definitely agree with the majority of comments on here, you certainly do seem to know how to teach adults, I am very much enjoying learning with you. I would like to ask one question though... if you were building a website from scratch, what would you use - straightforward HTML and CSS, Bootstrap 5, React or something else?
Thanks!
you my man. are awesome.
What folder icon theme is this! It's the cleanest
Also the video series is pretty damned good. Hats off!
Brilliant
You are really good teacher
I really wish if I can pay you, you are a great teacher
thanks for this course
Hope it was helpful! :)
Very helpful video, thanks ;)
Glad it was helpful! :)
Thank you.
excellent job
Thank you Dawud! awesome display pic :)
Hi Shaun! I've got an issue with a component like your BlogList. Program says I can't use this as a JSX component and it failed to compile the data from Home component. What it can be and why? And how to solve this problem?
Are you using a modified Dark+ theme, because I like how yours highlights the react components a different color and wish mine would do the same.
Okay what if want to share data between two components neither of which is the other's parent or child. Is making a third component that is both components' parent and getting the data from there a good practice?
Yo. How are you doing that SFC + tab = component template thing?
hey net ninja!
what did you do to make VS Code save everything without any popups?
whenever I make changes it tells me that there are "pending changes" and I need to manually accept every change I make.
do you know how to disable it?
Hi Sensei. Correct me if I'm wrong, but importing module "BlogList" to Home simple means where invoking it and were using "blogs" as argument as indicate here
You are the best man
Thanks Bernard!
quick question: in a previous video you used square brackets to deconstruct the data, such as "const [blogs, setBlogs] = useState(", but in this video you used curly brackets to do deconstruction of the props, "const BlogList = ({blogs, title})". What is the reasoning of using one over the other? Thanks and as everyone else pointed out, excellent video series!
I found the new syntax he showed wasn't explained well. It's hard to read.
He used {} because props is an object. When destructuring objects you use { }. While Arrays use [ ]. I would recommend reviewing destructuring concept in JavaScript if you are still struggling. This is all vanilla syntax so far besides the arrow function using () instead of {}, but that is JSX synatx.
Thanks
props made simple 😎
you're a god
Very good ❤
Thanks 😄
thanks
How does destrucuring props directly when its passed in work? Like can you destructure any parameter or is that a react thing
mannnn, thanks
great