Learn how to use Props in React in 19 minutes (for beginners)

yo what's going on pup fam welcome back to another video today we're gonna learn all about props why they're so crucial to you mastering it as a react developer get ready wrote the intro let's go [Music] so today's video is made possible by the amazing guys over at skillshare before we get started check this out skillshare is an online learning community where millions of people come together to take the next step in their creative journey the thing i love about skillshare is that there are no ads they're always launching new premium classes and they also recommend really interesting classes so before you know it i'm actually no longer watching tv on netflix all i do is watch skillshare while i'm actually eating my food most classes are under 60 minutes so they should be able to fit any schedule whether you're super busy or you've got a little bit more time on your hands i've actually gone ahead and dropped the react basics 101 entire class on skillshare the first 1000 people to use the link in the description are going to get a free month worth of premium skillshare and you're going to be able to with that access the react basics which i've uploaded on top of that you're going to get access to thousands and thousands of courses available on skillshare's platform i've actually been checking out a amazing video editing class at the moment by ali abdel where i was actually able to find out how i could use my ipad to add animated handwriting into my videos to level up my production value and now i'm making the best use out of my ipad as well as leveling up my final cut production game so this is just an example of the amazing value that i've got since i've signed up at skillshare and if you guys want to go ahead and benefit from this just like i have then go ahead and remember the first 1000 people to go ahead and grab that link are going to get one free month of skillshare premium which means that you can access my react basics 101 class it's completely free you have nothing to lose and then after that you can go ahead and continue if you're enjoying what you see on skillshare what's going on guys welcome back to another lesson in today's lesson we're going to be talking about props and why they make react so damn useful now it's the reason why components can be reusable in the first place so props simply stands for properties and imagine we had an app like uh imagine we had a component like a product right a product would have something like a name a description a price we would write the component once and then we would reuse it several times and simply change the props that we passed to it this would then render out to be the desired outcome that we want so i'm going to explain this and break this down very very simply for us now worth mentioning that props are present in both functional and class-based components so something we need to know is that props are passed from the top down so imagine we had the app component at the top and then we rendered several products underneath we would pass data from the top component down to those products and that would render out onto the screen we would then be able to render out several components underneath that and past props as required this is why we have a tree-like structure in react and it's essentially how react determines what to re-render at what different time now i'm going to go through an example here which will explain all of this to you so don't worry if it doesn't make sense we're going to use the example of a shop like amazon which is essentially an app which has lots of different products on display and different sub components are rendered underneath them so let's dive into an example right now so here is our application and imagine it was an amazon style app right so it's an e-commerce platform typically we would start with the app itself so the app component itself just going to draw a little box around that to resemble a component this would render out several sub components beneath it so imagine if it rendered out three product components so we're gonna go ahead and write the product over here like so and what this will do is we're gonna go ahead and create one product and then reuse it several times where it's needed okay so this will actually pose several benefits it means that essentially we only write the code once and then we have styling for that one file and if we ever change that it's going to get changed in every single location that it's used across our app now each product can be customized via the use of props so like we said before a product can have different properties such as a name a title so a description sorry so we can have a name a description and we could have something like the price right and each one of these would get then passed over to each of the different components so from the app component we would go ahead and pass the required props to each of the components so as we mentioned before it would travel in a downwards tree-like motion now if we have a component beneath this level so imagine a product has a item description component so imagine a product has an item description component then this would then get rendered beneath it as such so imagine we could go ahead and do the following so imagine the product went ahead and rendered this right here and then we could go ahead and it could be rendered out again for this and again for this right so as you can see we have a tree-like structure where it's simply components being reused over and over again so this would render this and this would render this and the tree can go on and you can render whatever different components you want and however many different components you want at each level now from this level we could go ahead and pass something like say the item description only took things like the name and description then only these two can get passed down if we only want that so if we want these two as props then they can only be the ones that get passed down and we could maybe leave the price for example so that is an example of how the props travel downwards and what only downwards so you can't actually go ahead and pass a prop back up the tree okay so it's a very important thing to know now another interesting tip that we have to remember are that props are read only which means once a component receives a bunch of props they cannot be changed we can only then use and consume the prop but we cannot modify that property once it's passed down into a component if we want to do that what we would tend to do is use state at the component above and then we would modify it accordingly and then pass it down to the child component so what we're going to do now is we're going to dive into a demo application so we're going to start off from where we left off let's hop into our code so here we have a starting application from create react app and we've just modified it to say hello world now what we're going to do is we're going to go ahead and create our first amazon like application okay so imagine what we're going to do here is we're actually going to go ahead and create a product and then render it here render it here here here so we're going to have four different products and each one is going to take a name a description and a price right so imagine if we could pass these in each as different properties then that would be pretty handy because then we only have to write one component and we can reuse it by passing different properties to that component so in order to do that i'm going to go ahead and create a product dot js file and i'm going to use ear snippets to go ahead and create my functional component so here is our component made and what we're going to do at this point is right here where we have the product being initialized we're going to go ahead and say props so props actually get passed in as a parameter to a functional component or class based component and the way we're going to access it is simply by going ahead and doing the following so we can go ahead and say props dot whatever the proper is called so if it was name it would be props.name if it was description it'll be description and if it was price it would be prop stop price okay so what we're going to do at this point is i'm going to go back here i'm actually going to go ahead and render a product okay so notice it says auto import so you might get that sometimes with intellisense but if you don't you can go ahead and simply import at the top manually now what we're going to do is i'm going to pass in three props and props are passed in just like html attributes so here i'm going to go ahead and say name and for this product we're going to say amazon echo right and for the description i'm going to go ahead and say your ai assistant awesome okay and then for the price i'm going to go ahead and pass in a value so if we pass in a number we do the jsx curly braces and i'm going to go ahead and say this is 59.99 okay so there we go that we have our first product with three different props being passed away so you can see it's very clean syntax i'm gonna go ahead save that file and the prettier did a nice job of cleaning that up i'm gonna go back to product and now we wanna consume that information so firstly i'm to go ahead and add a h1 tag now for the h1 tag i'm going to go ahead firstly make myself a bit uh more visible by having the app on the left hand side and the product component on the right hand side so here i'm going to go ahead and use the name prop so i'm going to say props dot name as a h1 tag right then as a smaller h2 tag i'm going to go ahead and say props dot description okay save it now the price i want to do something special i'm going to go ahead and say we have a h3 and i'm going to go ahead and add in the props dot price here but what i'm going to actually do is i'm going to go here and i'm going to add in the dollar sign before it because it's going to be resembling a dollar amount right so we're going to have props name props description props price so let's go ahead and test this i'm going to go ahead and press command j to pull up my terminal and we are running on localhost 3000 i'm going to go ahead and open this up right now so let's go over to localhost 3000 and you should be able to see there we go we have our component being rendered on the screen so you can see i actually pulled through that property that i passed in so let's go back and jump to our code and what i'm going to do is split the screen for you guys so you guys can see this very very simply and what i'm going to do now is pass over here so here you can see an app we have the product being rendered we have the name amazon echo we have the description your ai assistant and we have the price 59.99 okay now what i'm going to do is i'm going to change the name to go ahead and prove that this is correct we're going to say google home and i'm going to save and now you can see it changed google home so this is really handy and what is this handy for it means that we can actually go ahead and make one component reuse it several times all throughout our application so what i'm going to do now is i'm going to come copy this and i'm going to paste it three times and i'm going to get rid of these comments okay and i'm going to change each of these products so i'm going to say iphone [Music] and i'm going to say the new iphone 12 pro max nice i'm going to say the best iphone because that's what they always say then i'm going to say price is 1 200 because you know iphones are expensive and then here i'm going to go ahead and this was bugging me i can't do that to myself right now here i'm going to go ahead and say let's go with a macbook pro okay and then your favorite computer little pc attack right and then we're gonna here we're gonna go ahead and say it's 2500 because they're even more expensive all right so i'm going to go ahead save it and watch the magic there we go guys so you can see we're just reusing this component three times with different props properties right and it goes ahead and it renders accordingly so if i go over to product you can see our code code is extremely clean at this point now what i mentioned before is that we could actually have a item description or another child component underneath this and pass the props down to them so the first thing i'm going to do is show you a little neat trick so in es6 we have something called es6 destructuring so what we can do is perhaps instead of saying prop stock name props to description prop stock price we can have curly braces around the props to say pull apart this object which is called destructuring and then what we can do is we can go ahead and grab the elements directly at this point so we can say description and price so now what i can do is i can go ahead and get rid of all of the following things so now it's name description and price because we're actually pulling apart the props at this point destructuring it and then we're rendering it so you can see if i save it nothing broke okay but if it broke at that point probably didn't have some of your syntax right so what we're going to do now is i'm going to create another sub component called item description and we're going to pass props down to that one and i'm going to show you how that tree structure works so let's go ahead and create a item description component and this will most likely arrive because we haven't got an item description component which makes sense i'm going to go ahead and create that item description dot js save it gonna go ahead and say rfce boom we have it up and running okay so that's awesome and then now we go ahead and we get some props and as i mentioned before the item description is gonna take the name and the description only okay so just a sort of test right here so let's go ahead and save that and then what we're going to say is it's going to have a p tag oops a p tag which will then show the name so let's go ahead and say it takes the name and i'm going to have another p tag underneath it which is going to be in italics and this is going to have the description okay there we go and now what we're going to do is go back to our product i'm going to go to the end of the component name control spacebar neat little trick auto import that will be a nice little trick for you guys and now what we can see is the item description renders but i can't see anything on the screen sony that's correct because we haven't actually passed any props which means that this is actually blank right so what i'm going to do now is rather than having the name and description over here i'm going to go ahead and say i'm going to move the price underneath the item description as such and i'm just going to simply pass this down as a prop so i'm going to say the name prop in this case is the name prop that we passed down from the app component and then here i'm going to say the subscription prop of item description is the description prop passed down from the app and then here we keep the price in this level save it and now you can see we have a nice item description with a big price right so it's very very powerful okay now this is extremely reusable it's extremely powerful and it's quite simple in terms of how effective and use useful is so notice how remember i said it was top down which meant that you can't pass the prop back up so if i want to push the name back up to the app from this level we can't because we went downwards and again if i was go inside the item description i can no longer pass the name and description back up okay unless we introduce something like redux in which case there's a whole different type of data flow which we're going to talk about in a later lesson so with that said now what we're going to do is we are going to demonstrate how you can change one of these components to a class-based component and that is going to show you guys how to use props inside of a class-based component and show you how it's a little bit more complicated to write that so as i've mentioned previously functional components are the way forward however it's most likely that the code bases that you're going to be interacting with are oda and remember guys class-based components were out longer than functional components so we need to know both unfortunately um it is just the way it is so at this point what i'm going to do is i'm going to refactor this to become a class-based component so that way you get some experience about going from functional to class based as well so at this point what i'm going to do is i'm going to go ahead and copy this jsx so i don't lose that for later i'm going to go ahead get rid of all of this code and i'm going to use my handy little snippets r c c to create a class component now inside i'm going to paste back my jsx so we have everything we started with but remember don't actually have access to my props anymore so how do i use the props so in class-based components it's not actually as clear as it may have been before so firstly we need to go ahead and say this dot props dot name now right so again it's a little bit more abstracted and even here i need to say this dot props dot description hit save and you can see now we get access to those props right so you can see this is actually a bit more there's a bit more code going on right we have the class we have the extends component we have a render and then we have the return block inside of it okay now what you might see in traditional apps is we used to have to write this syntax like so where it said constructor props super props but we no longer actually need to go ahead and write this and this is typically where we would go ahead and say this dot state and define our state if we were doing so as we showed you in the previous lesson okay but in the modern react syntax we don't actually need that which is quite nice okay and you can see it still works without that now a little trick and one of the little top tips i've actually found people do now what we can do at this point to clean this up a little bit if you are stuck with using class based components is inside the render block where we can actually have some jsx we can go ahead and say this we can go ahead and say const and then we can destructure so object destructuring in another es6 function is we can go ahead and say the name and description from this dot props and what this is doing is going inside of this dot props and it's pulling the name and description so what we can now do is go to this dot props and get rid of it so that's another way of cleaning up your code if you're stuck with using a class-based component but remember guys you're not going to be stuck it is always possible to go ahead and translate this entire code right here to a functional component so with that said guys i hope this has been useful to show you the differences between a class-based component and a functional component and hopefully you guys are on my side and you prefer the functional approach because that is the modern approach for many reasons and the main one being simplicity guys use that one it's a lot more simple um and with that said guys we it's very clear how we can go ahead and write code once reuse it in several places with props now this doesn't look too great so in the next lesson i'm going to show you guys how to add some style to your code and actually style each of your components and also show you how to level up your react skills by combining components with their own css files and watching the magic unfold in front of your eyes so i hope you guys enjoyed that and i will see you guys in the next lesson peace [Music]

Channel: Sonny Sangha

Views: 3,707

Rating: 4.9627328 out of 5

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, dev, clone, backend, fullstack, motivation, reactnative, react-native, redux, typescript

Id: kHJSNFU7H4U

Length: 19min 11sec (1151 seconds)

Published: Mon Sep 20 2021