Full React Tutorial #11 - Props

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/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
Modern JavaScript - www.thenetninj...
Vue JS & Firebase - www.thenetninj...
D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Helpful Links:
HTML & CSS Course - • HTML & CSS Crash Cours...
Modern JavaScript course - • Modern JavaScript Tuto...
Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@Investigamer]

Without any doubt the most straightforward, no nonsense React tutorial series on KZbin, by a wide margin. Thanks buddy

[@NetNinja]

No problem :) thanks for the kind words!

[@Investigamer]

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

[@callumclayton3685]

Im late to this but thankyou! Most logical approach ive found online!

[@thegodfatherse7enran]

* Best React tutorial on the internet.

[@CrowMacnas]

Agreed. This has shattered some mental barriers for me that I've been struggling with for years. 🙌

[@beinyourguard]

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

[@amrishpandey2105]

exactly.

[@viviannwangrydh1187]

I really want to say:"Sir. you have the best react courses on KZbin. Thank you." ^_^ I am your big fan.

[@NetNinja]

Thank you so much :)

[@viviannwangrydh1187]

@@NetNinja Right now I understand how other Star chasers feel after they got replay from their idol 😆 😆😁 Thank you sir 😁

[@unknownman1]

@@viviannwangrydh1187 why your badge is better than mine?

[@viviannwangrydh1187]

@@unknownman1 sorry i do not know why 😂

[@googleaccount7252]

@@viviannwangrydh1187 you still doing React?

[@rangepick]

I've never seen someone explain this in such a simple way as you did! Kudos for this!

[@berkyilmaz2941]

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

[@shinebayar]

I'm enjoying this playlist a lot! Most up to date and straightforward, thank you!

[@tsunamiisurferr1794]

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 👨‍💻

[@NetNinja]

Glad I could help! :D

[@amrishpandey2105]

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.

[@jadeymeow]

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

[@dejuanclark4163]

even though I am very comfortable with React, I still love watching Shaun explain it.

[@wahome_]

I cant believe im actually getting React now . Thanks man

[@piotrzacharski8097]

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!

[@stevesajeev6477]

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.

[@ivanbarta2821]

Very well structured and simple explanation of something you can easily get lost in, thanks!

[@ShadyGranny]

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.

[@Mrwolfgd]

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!

[@NetNinja]

That's great to hear :) glad it helped. Thanks for watching Mrwolf!

[@Mrwolfgd]

@@NetNinja thanks a lot bro, can’t thank you enough! Edit: just a sec I just remembered I can actually pay you back

[@Mrwolfgd]

It may not be much but honest work (jk lol thanks again, it’s really not taken for granted)

[@danfrith726]

the last deconstructing part just made my components so much cleaner, glad i learnt that

[@mircast0]

"And third: It allows me to show you how to use props." 😂👍

[@domieSinday]

now, it does make sense LOL

[@corbinslaymaker3346]

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.

[@akshaypendyala]

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 :)

[@kashmirtechtv2948]

Ahn?!

[@54321conor]

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!

[@akshaypendyala]

@@54321conor Glad that it helped 😊

[@mcloughman]

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!

[@akshaypendyala]

@@mcloughman no problem mate, as a fellow programmer I knew this would help so the reason I put up this comment :)

[@julio-dev]

2023 and this tutorial really helped me understand props, I really appreciate that you explained the logic behind the concepts.

[@NetNinja]

Glad it was helpful Julio :)

[@mikef.606]

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. 🤦‍♂😅

[@Dafty23]

This is exactly what I was looking for, thank you very much. Going to watch many more of your videos to learn react.

[@maskman4821]

Pretty good tutorial, now I know how exactly props working !!!

[@amrishpandey2105]

right , me too here

[@yuriaugusto1084]

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.

[@haze4828]

You just saved me from hours and hours of googling and research trying to figure this out in 9 minutes!! Well earned sub, sir.

[@billpapas3054]

Its really So REALLY THE BEST tutorial for REACT out there!!! Just WELL DONE mister!!! And its also free!!! Just wow!!

[@rizalsofyans]

finally i understand how props works🥺👍

[@manee427]

It could not be more Perfect.Thanks a lot

[@empowercode]

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 KZbin 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 :)

[@danieladjeijunior2087]

You have the best playList so far ... Keep it up

[@mohboutarfa3761]

simple, straight to point , quick , i love you

[@Ricardo-fg1bc]

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

[@williambradley1448]

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?

[@usamanayab8381]

De-structuring Props object in an argument is one of the best part for me.

[@CE10118]

Great Videio - mentioning that props is an object was extremlly helpful

[@rjc4200]

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

[@blankslate6393]

Lucid and memorable. Excellent educator as ever.

[@chikasole]

For real this helped me understand props way better than any other tutorial ♥

[@soulju9144]

I was struggling to understand this and this video gave me perfect clarity. Thank you

[@NetNinja]

That's awesome to hear, thanks for watching Soulju!

[@mohammadabdelrahman786]

I finally understood props.... God bless you.

[@abdulrhmana.elshiekh383]

Dude you are a living legend, God bless you always!

[@NetNinja]

I appreciate that! :) thanks

[@manmaaze]

I was waiting for this soo long

[@michaelhatsis66]

bought a couple react courses on Udemy. This free couse is waaaaaaay better. Ur a great teacher. thanks!

[@NetNinja]

Thanks Michael! much appreciated :)

[@etekumoses3320]

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

[@NetNinja]

You're very welcome Eteku! Thanks for watching :)

[@mehedihasan-4042]

Best ever react tutorial I have found

[@yelizkosar3478]

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!

[@jinjiprem]

so far learning from you is sooooo easy to understand, thankyou verymuch may god bless your kindness soul

[@NetNinja]

Glad to hear that! Thanks Jinji :)

[@Web-Dev-Codi]

Anyone wanting to learn Web Development could just stay on this youtube channel and land a job! Amazing teaching skills!

[@NetNinja]

Thanks Robi!

[@Web-Dev-Codi]

@@NetNinja And now decided to grab a Udemy Course! Excellent!

[@kidsfuncreator]

I really really love your videos. You always straight forward to point

[@jonathanmoermans3388]

As a React beginner this cleared up a lot of things for me! Thanks!

[@mayursinalkar606]

Also I love ❤️ your tutorials. so simple to understand.

[@prasathj7436]

Thank you for great videos and explaining the foundation very clearly !!!

[@NetNinja]

Glad it was helpful! :)

[@alexberdea]

masterful , I joined after a few lessons, this channel is my life now

[@NetNinja]

Awesome to hear that Lex, thanks for your support :)

[@alexberdea]

@@NetNinja thank you for your lessons!!

[@amanihrd7609]

you Sir deserve a trophy for this course

[@pauloferreira4040]

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!

[@flamingmind2671]

I found the new syntax he showed wasn't explained well. It's hard to read.

[@notspooky1990]

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.

[@twotentsdown]

Fantastic video! You said you would teach us props and you did it quickly. Thank you!

[@annabadyka4658]

You explain very well. Thank you!

[@NetNinja]

You're very welcome!

[@legking]

This is SO helpful! THANK YOU!!!

[@NetNinja]

Glad it helped Chris!

[@thienphucnguyenvuong1205]

was waiting THIS video from 2020....

[@arazmammadov9276]

Thanks a lot, you saved my life, my master!

[@muhamedkhaled9796]

I really wish if I can pay you, you are a great teacher

[@chrisdietrich1533]

Thank you so much for this. It's extremely helpful

[@onurucar1112]

Thanks again! Very helpful

[@pourianayeb1063]

Thanks man, you means a lot for all of us

[@ardeshirmoradikhah5119]

ممنون شایان جون

[@abiharvey4984]

This was really helpful thank you!!

[@MiriamAraújo-y1x]

Thank you so much, this video helped me a lot.

[@NetNinja]

Glad it helped! :)

[@danmiller7709]

What folder icon theme is this! It's the cleanest Also the video series is pretty damned good. Hats off!

[@PepperNoh]

Thanks for the great tutorial!

[@learningit2572]

This Ninja the best!!!

[@TheDima23]

Amazing video, thank you!

[@afewthoughts7755]

Really the best tutorial

[@kristijanlazarev]

clean explanation

[@Akira-sh7ts]

You are really good teacher

[@TheCodingOdyssey]

Nice explanations! like always!

[@yousoumar]

Hi, thank you for this tutorial ! Is it possible to know what icon extension you use in your vs code ?

[@cydoentis]

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.

[@Lorenzo-kv2ql]

Is this course enough to get me hired in the company as a junior front end developer? if not, is much more needed on the resume? Thank you

[@GiancarloCarccamo]

great video man

[@missinglink2416]

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

[@Sky-gk4qq]

awesome content man

[@silverboii5339]

thanks for this course

[@NetNinja]

Hope it was helpful! :)

[@igorstrzezysz9992]

Very helpful video, thanks ;)

[@NetNinja]

Glad it was helpful! :)

[@batuhanbatuhan3605]

const blogs = props.blogs; is a bit confusing const blogs3 = props.blogs4; now which one of these is the blogs object array in the Home.js file? Where do we refer to the blogs array here exactly and where do we name the variable in Bloglist blogs for convenience?

[@MikeKing710]

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?

[@tarekghosn3648]

you my man. are awesome.

[@bernsTech]

You are the best man

[@NetNinja]

Thanks Bernard!

[@ShaliniNegi24]

Thank you.

[@dawudibnsalahaldin343]

excellent job

[@NetNinja]

Thank you Dawud! awesome display pic :)

[@mriganksingh7586]

props made simple 😎

[@KevinTempelx]

Thanks!

[@rakeshwasnik9327]

Can you make a video on deploying this to github pages, so that we can make it live, I tried it and it's causing routing problems

[@markg5986]

Does it matter whether "blog" is in parenthesis or not? Git has: {blogs.map(blog => ( while the video has: {blogs.map((blog) => ( Thanks!

[@kuka5e]

Brilliant

[@subee128]

Thanks

[@sheikhabubakar1705]

Please tell me that frameworks and libraries of any programming language are developed in the same programming language or developed within another programming language??

[@shadebinder3599]

How does destrucuring props directly when its passed in work? Like can you destructure any parameter or is that a react thing

[@ChukwukaOsakwe]

Yo. How are you doing that SFC + tab = component template thing?

[@notdumb3182]

can't we store that data in different js file and import that data through props whenever needed it will make home page file more readable and small?