React Tutorial for Beginners 2020 - React Crash Course 2020 / 2021 [React js]

what's up guys welcome back to web dev evolved today we're going over the introduction to react.js which is the best javascript framework so today we're going to go over what is react what makes react the best javascript framework how to install react react components jsx and react fragments for jsx react props keys and children props and react state if you're excited for this then hit that like button show us some port so before we get started some couple things y'all need to know you need to have some basic javascript knowledge es6 in particular javascript classes we also can need to have node installed we're going to be using node to create our react app with npm create react app it's really easy to install guys you don't have to know html however knowing html can make it easier to learn jsx jsx is very very similar to html what is react.js and its most important concepts it's react.js is a javascript library for building user interfaces pretty simple it's not a framework it's a library it's very small fast easy to use so react uses a declarative approach so a declarative approach essentially means that you tell react what you want it to change and react handles changing it so we're not going to be manipulating the dom directly with react we're going to actually be manipulating the virtual dom so for instance let's say i want to update a paragraph on a web page to some new awesome text i say hey update it's a new awesome text and then react will handle reconciliation which is comparing the virtual dom to the browser dom and updating in a fast efficient way okay so react is component based so in react we're going to create class or function based components and they're essentially just es6 javascript classes and they extend a react class to get all the special things about them so react works well with other languages like node.js but react is pretty language agnostic so you can use it with php on the back end or java somehow or really whatever you want to it it's really versatile in that aspect so how do we get started with react.js to install it first we have to have node installed just like i mentioned a moment ago so install node you just go to nodejs.org and you download the installer for your machine and then just follow the prompt that shows up next you're going to need a empty folder in re for to install react and once you're ready to install react into an empty folder you can use the command npx create react app period the period just says what directory are you installing it in period means the current directory in if you're in a directory that has a bunch of other stuff in it and you want to create a new folder when you install you can then use the folder name instead of period what's up guys welcome back to the code so we're going to start react real quick so to do this we're going to open a new terminal on visual studio code and we're going to run npx create dash react dash app period so this is going to take a moment to install so i will see you when it gets done installing all right guys it just finished downloading so let's just take a look at what all it did real quick so depending on your computer settings you may or may not see this node modules folder node module folder is essentially like the react code it's it's all the you don't you don't actually code in here unless you're making i don't know some extension to react you have this public folder this is you'll use the sum the source folder is where you can make all of your components for react so you're going to be in this folder a lot and then we have some other stuff here we have a git ignore files because i'm using github we have a package.json which will tell you like all the versioning and stuff of your react app so here you can see i'm using react 17 which is the latest version at some time of recording this uh this readme file is for github and this yarn lock file is for yarn you can use npm or yarn i've used both so it has a yarn lock file because i've been using yarn so uh just get started real quick and dive into this you can change your name up here to whatever you want to i'm just going to leave this name react basics which is just the name of the folder which is spelled wrong apparently um but you can change its name to whatever you want your application to be named uh there shouldn't be anything else in here we have to change so just real quick is if you see we have these scripts that was automatically created for us by react create app and we have a start script which allows us to run react right so we're going to go ahead and run that i'm going to use yarn start but another command you can also use if you don't have yarn installed is npm start and npm only requires having node installed okay so react script start is going to start a instance of react on local host 3000 it should automatically open up in your web browser and as you see here we have this react logo spinning in circles and here it tells us hey edit the source folder of app.js and save to reload so this is telling us is uh that if we go to our source folder here and go to app.js if we change something in this code this will automatically update so here if i just delete learn react which is this blue part right here at the bottom this on the right side of the screen and i save it it should relay yep and it reloads and now you don't see it anymore so we're going to go over um why it reloads and how all this kind of works in a moment all right guys so now that we went over how to install react let's quickly go over what a react component is and then we'll go in the code and code it so react component is a javascript class or function that extends react component so when i earlier when i said a prerequisite was is that you know what javascript classes were this is why because react is kind of built on them and it's just a plain javascript class that uses polymorphism to extend the react stuff so that you have all the react functionalities in your class now here i kind of said function that extends react component functions can't actually extend something because they're not classes but uh you can write components in react that are function based and that's actually a newer and suggested way of doing things so uh what is it what's some things about react component is that they have their own encapsulated state that is self-managed so essentially what that means is their state is private and that other components cannot access that component state without being past the status props or something like that and we're going to go over props later in this tutorial they are also written in javascript which allows us to write complex user interfaces interfaces efficiently so everything in react is just javascript so even jsx and the code that we're just looking at an app.js that's all javascript and the reason why that's so helpful is because if you conditionally render stuff to the screen or whatever well it's just javascript so you can just write if statements so it allows us additional functionality that like html wouldn't it components are exported and can be imported which allows them to be reusable so exporting and importing is actually a feature in javascript once again es6 if i'm not mistaken which is why it was kind of prerequisite for this and that's one of the big things about react is you can develop really fastly because i could create one form and then use that form on multiple pages because i can just import it now what makes components so powerful a little nuance of components is is they must start with a capital letter so that you can use them properly and class components will require using this when accessing state and props and life cycle methods is so we're kind of going into difference between a class function a class component versus a functional component functional components are the new way in the way you're going to see a lot on the documents going forward however working on previous code bases you will see class based components in react another way to go around the this identifier in a class-based component is you can create a constructor method and bind it so functional components do not use this and they have hooks if you're familiar with classes this kind of goes to classes and essentially works for classes so life cycle methods versus hooks life cycle methods and hooks are what allow you to there their functionalities of react to allow you to do certain things at different points in the react life cycle like the render life cycle or before the it renders to do kind of unique things and also plays a huge role into how react is efficient because it can determine when to render and when not to render stuff we're going to also go over jsx real quick before we go into code so jsx is just syntax sugar for a an example is div hello world it looks exactly like html and it's very similar to html however what it's actually doing is it's actually taking that syntactic sugar and converting it to react.create you can code react without jsx and originally there wasn't jsx you had to write react.createelement for every single element you wanted to create however it's really beneficial to use csx so one thing about jsx is different than html is it uses camel case for attribute name for instance class name is camelcase class uppercase name also another thing to notice is in html you just type class however class is a reserved keyword in javascript so they had to use class name and they just use camelcase which just means the first letter is lowercase and then every first letter of another word is upper case another good thing about jsx and why you should use it in react even though it's technically optional is that jsx prevents injection attacks or cross-site scripting attacks it does this by automatically escaping embedded values before rendering them to the screen which essentially just means it's secure jsx also allows you to write user interfaces quicker and more secure than using just without it for like if you're just using react create element there's a really a lot of stuff to type just to make a diff it's also pretty hard to read and here we just mentioned you can use react without js jsx and react can only be returned as one element so it may not make 100 right now however we're going to go in the code and i'm going to show you that and it'll make a lot more sense then and we're also going to go over react fragments this is the last thing before we go back into the code so react fragment just allows us to return one jsx element so you can have you have to import react fragment to be able to use it and you could technically get around the returning one jsx element without react fragment by wrapping everything inside of the div so the reason why you would not want to wrap everything inside a div and we won't use a fragment over a div is the fact that react fragments are not rendered to the browser dom so that can just kind of make your code look cleaner and more accessible especially to things like screen readers so react fragments have can have attributes just like jsx or html and it also has camel casing just like gsx there is a shorthand for react fragments that can be written with just the alligator signs as you see on the screen however the react shorthand for fragments cannot have attribute names and uh it also does not have to be imported all right guys welcome back to the code so we're gonna first go over what is a component in react kind of in the code and how we can make our own components uh one thing we didn't mention is kind of like the structure a little bit more in detail about this index.js is essentially where everything is loaded from so index.js loads your app component as you can see right here app a ppp starts with a capital letter remember all uh components we'll have to start with a capital letter and up here on line four we imported app app.js is loaded from index and app.js is where all of your components that we create will be loaded from okay so as we can see here at the moment we have right here we have a functional based app component which is the new kind of standard reactors that use functional components over class based components and it returns a chunk of code that looks like html and this is actually jsx despite it looking like html it's just syntactic sugar for react and it's actually you can run javascript and stuff in here which is pretty cool we're not using a fragment at the moment as you see we're wrapping everything inside of a div here so if i was to delete this div we would get an error because remember we can only return one jsx element actually we won't because it's wrapped inside of a header so if we delete the header then we will get an error because now it's no longer returning one jsx element so you can see everything's already going all red and if we open up our browser you see it says fail to compile and jsx elements must be wrapped in an enclosing tag so if you get that error what that means is you can only return one root element so if we un control z here as you can see all of these elements are wrapped inside of a header okay so in jxx that it can only return one element just means that you can't have multiple parent elements you can have multiple children of one parent but you can't have multiple parents returned another way to do this instead of wrapping inside of a header or a div would be with that react fragment we talked about so let's just go ahead and import the react fragment so to import the react fragment we're going to type import react comma space fragment from react uh so there was a difference between um importing inside of curly braces and not in sodium chronic braces is this is a default export and this is a named export so as you can see down here app export default app is is being exported as a default so you could import app theoretically by just saying import app however if we didn't have default here and we just had export app it would have to be imported inside of curly braces so you use a react fragment you can use it just like you're kind of using these html or jsx elements or like html tags however it has to start with that capital letter because it's a component and that's how you know something's a component is because it starts with a capital letter and you have your opening and closing tags here so if we do that as you'll notice if we go to the browser it is still lurking um the styles decided to disappear for some reason because i'm not exactly sure why they decided to disappear but they decided to disappear so react fragment but it's not erroring out and if we were to look in the browser dom so i just opened the developer tools with ctrl shift i on windows on mac it should be like command i or whatever if we look at the uh html here it's being rendered to the bro dom as you see we this root div is not coming for er but our images and our paragraphs and our a tags are not wrapped inside of another div or header or anything else this div here on the outside is not coming from our component here it's actually coming from i believe it's index i think it's no i think it's coming from index i think it's this react strict mode thing that gets it however so that's kind of how fragment works and why you need to keep from erroring out and i showed you that error so if you ever see that error you'll know what's talking about so now we went over react components uh we kind of went over jsx sum but we can look at some more jsx real quick which is just right here in front of us jsx as you see does not start with the capital letter this is kind of how you can distinguish jsx from components i know they look similar as you saw components started with a capital f uh and you have these camel case attribute names for instance class name remember we're using class name instead of just class because class is reserved keyword in javascript and we still have all of our normal stuff from like html like alts and source for images and you have most of your html tags in jsx so like your header footer main sections pair or asset tags all that wonderful stuff and like semantic html still applies in react so like semantic jsx kind of still applies so having headers and stuff kind of makes sense uh we should actually create our own component from scratch real quick so to do this i'm just going to in the source folder i'm going to create a new file and i'm going to call this my awesome component and it starts with a capital letter so now to use my awesome component what we're going to do is we'll come over here and we're going to import our react and we're going to actually make this the class based component so y'all can see what a class based component looks like in react versus this functional component that we have here for app by default so class based components are a little bit older but they're fully supported and they have no intentions of ever or no intentions in the near future to continue to not support them or continue to support them so to create a based function we're just going to say const my awesome component extends uh react dot or we can just say component okay my guess it's not constant it's actually class class my awesome component extends component and it would help if i spell component right component we're going to go ahead and put our export also here so we're going to say export default my awesome component it's got to be capitalized also so inside of our class component here we have to have a render and a return so as you saw in the functional component we only had a return with class components you have to do this other thing called a render and inside your render you just return so that's giving me this red error because there's nothing inside of return so that is one difference when using classes you have this render here and so to convert from a class component to a function a functional component you just get rid of the render or add the render depending on which one you're going to and from and then this this top part changes a simple class based component would just be like a fragment and in here we just return some jsx like a paragraph actually returned two paragraphs if i could type paragraph my ah my awesome component and we'll just return another paragraph and we'll say is working so now we have a class based component and we have a functional base component over here so you see it says function app and you have a return of jsx and then for a class component you have to say class class the component name extends component which this component is actually coming from react for instance we could technically say uh react dot component and that would also work however we're going to leave it as just component and then it has a render and inside of the render it returns and then it has the jsx so you can see this is more code and that's kind of why they went to the functional ones is one reason is less code and it's kind of shorter more concise so if we open up our web browser here we can see i'll even refresh that it's all still working and we're not getting the component because we have not imported or displayed the component out so in order for us to see it on the web page we have to import the component to app.js and then display it through jsx down here so to import it we're just going to type import the component name which you could technically name it something different here so i'm even going to name something different right uh i'll just name my component here from the path to the component which is going to be dot forward slash which just means the same directory and then in here we can just put the component somewhere so i'll just put at the bottom right my component so if i save this and we go to the browser we will see component is not defined inside of austin component.js okay so what i'm missing here is i forgot to import it so to use the component from react we actually have to import component as a named import and that should work now that we have that import so now you can see the stuff that already had and right here you can see this text my awesome component is working which is coming from our class component okay so just to kind of sum up that real quick the difference between class and functional components this one's a functional component it's here we're using just function app however this could also be defined in um es6 uh arrow functions so you could do this and this would also work and i'll prove it to you because it's still running in the browser you can see me still see my office component they use return but they do not have render and we still have to export them so my house component we have to import react if you're going to do it class space you have to import component and we're using fragments so we're still going to import the fragment from react and then we use class myosin component extends component which the components coming from react and then we have to have a render and then inside the render we have a return then we can put our jsx we still also have the export default component up here has to be capitalized and the component name also has to be capitalized what's up guys so now we're going on our last stretch of uh powerpoints and then we're gonna go back to the code and start to wrap things up so what are react props i think i may have mentioned it some in the code example uh so react props are just a way to pass data from a parent component to a child component so as you know of components they encapsulate all their data their state and whatnot so it's kind of almost like a private variable so other components can't really access it but what if i need to access that data from another component well that's when we have to use props props are very can pass variables functions state etc so you know objects or booleans or integers all of those and functions the name of the prop doesn't have to be the same as the value of the prop so i can name a prop a banana and then pass a variable called apple inside of it which will demonstrate that in a second so here on screen we have some code examples so on line one we're just declaring a string on line two we declare a function called logout that just console logs logged out on line three and four we have two components right we that we created ourselves so we have my custom component and these things with username and password are props so inside of username we're passing a string of bob and inside a password we want to pass the value of hashed password right so to do that to pass a variable as a prop inside of jsx remember it's all just javascript so what we're going to do is we're going to use curly braces and those curly braces say hey whatever's inside of these curly braces process this code as javascript and then we push to put the hash password which is a variable that we declared on line one and that will pass bob and the value of hash password to the component of my custom component then on line four we just have a component called log out button we have a prop called log out and then we're passing in log out so logout is a function and it console logs logged out so inside of logged out component we'd be able to call props.logout to run that function as you notice here we're also using the curly braces which just says hey this is javascript that we actually want inside this jsx and logout does not have parentheses at the end of it because we want to pass the function as a reference and we do not want to call the function so next we're going to go over react key so react keys are technically a type of prop and reactor just a special prop and they allow react to keep up with elements and only update elements that have changed so this is an efficient thing for react if you don't have a react key it won't completely break your code you'll get a warning in your console and it makes react no longer better update as efficiently as it should some information about react keys is they got to be unique among siblings that'll make a little bit more sense when we go over the example and i went one slide too many in the example here we have some code on line one we're just declaring an array it's equal to one two three four on line two we have a variable that is equal to numbers.map which is a typo because that's supposed to be the array above so line one should be let numbers equal the array so numbers is an array of numbers and we're mapping it which is essentially for looping through it if you're not super familiar with map from javascript and then we're just setting list items equal to list items of the key and the number so what we're doing here is showing you how you can use uh keys so this is actually a pretty common instance where you have unordered lists being filled with list items of dynamic data that you may not know ahead of time meaning that you can't just hard code it so imagine this stuff was coming from like a database that numbers wasn't just written out on line one and it was written equal to a fetch request to a mysql database and we didn't know what was going to be in it so the key property is kind of just like class name or any other property we put it on the individual list items and we're setting it equal to number which in this instance our array is all unique numbers because those need to be unique now if we had multiple unordered lists that we were rendering the keys only have to be unique within their own sibling so like you could have the first owner of the list and it could have key one two three four and the second unordered list could also have keys one two three four and they wouldn't collide with each other and that would still work so after react keys prop we have a react children prop once again it's another special prop for react it's just a different way to pass data to children components it's typically used for components that don't know their children ahead of time like a sidebar component that lists all the users you're friends with like on a messaging app or something so the children prop allows you to display elements between opening and closing tags when invoking a component so that sounds a little bit complicated but it'll make a lot more sense when you see a live example in code and when props change the child component re-renders by default that's a important thing that i'm not sure i think we mentioned it on the prop slide but when props changed components re-render and child props change components also re-render so here's an example of a children a child prop we have two fake components here so online when we're saying app.js we're saying it's our app component it's imagine our app component we're returning a div with the site a component of sidebar inside of that sidebar in between the opening and closing tags we can put whatever dynamic data we have that we don't know ahead of time that we won't as jsx elements and that will actually be passed to sidebar as props dot children and then in sidebar we can just use it by using props.children to kind of display that jsx to screen it's also kind of helpful when you have large chunks of gss that you're trying to pass to another component so now the last topic we're going over i know these slideshows are kind of boring is react state so react state is an object that persists on component re-renders when the react state value changes it causes the component to re-render and the state's encapsulated which essentially means it's private that other components cannot access other components state unless you pass them as props or children or something of the sort state can be added to class and functional components however state in a class component is used differently than state in a function component so you use state in a class component you have to create a constructor as you can see on line two through five that we created you have to call super of props and then line four just says this state equals date of new day so state this is actually where we're setting state is lined four and we're setting it to an object that's what those color braces mean and we're just saying for the pro of that object for the property of date set equal to a new date so then inside of jsx on line 10 we show you how you can use state in a class component which is this state dot date dot to local time string in this instance we're just converting that date to a time that's more presentable to users as we mentioned earlier when you're using class-based components you have to use this dot state and this dot props instead of just props and states that kind of makes them longer and that's one thing just keep in mind when you're working with class and functional components there's also another way to do state inside function class components that are shorter hand as you can see on line two you can do it without a constructor method and just say state equals date colon new data whatever object and properties you want to it you actually don't have to use this dot state when you're declaring it without a constructor which can be a little confusing because i just said you have to use this dot state or desktop props and whatnot however when you use it like we do on line 7 then you have to still use this dot state i'm just going to jump into the code my slide for using state and functional components kind of got messed up however i'm going to show you how to do it so we'll just start with it right now so to use state in a functional component we actually have to use things called react hooks so as you remember earlier in the course i mentioned that we used hooks for functional components and life cycle methods for class components so we're not going to go into all the hooks and all the life cycle methods in this video we'll have to have a separate video on that because it's quite an extensive topic however react yes docs are really good at explaining stuff and they go pretty in depth into that you stay in a app component you have to use a hook called use state so first you have to import it at the named exports that means you import it inside of curly braces from react on the same line where you imported fragment and react so to use that we're just going to come down here and we're going to set a variable for instance we'll call it our secret message and we're going to set our secret message equal to use state which is going to be essentially almost like a function that we're going to call and execute here and we're going to set the initial value inside the parentheses which would be secret code yeah it's amazing what this will do is it will set the value of this stuff on the left side to the state however i did this wrong so i actually have to use object destructuring and i should have copied that so let's use object destructuring when using state the use state and a functional component which is a javascript feature it's a little bit newer than um newer than es6 i believe it's like es8 or something so essentially how this works if this is new to you object destructuring in javascript is this used going to return two things it's going to turn the value of the state and it's going to return a function to change the state so this first part our secret message is the value of the state and the second part the set message is a function that we can call to update the state okay so let's show you how that works so if we just start simple here we just go down to here we just create another paragraph and we can use the state by simply typing inside of curly braces to say hey this is javascript and then using our secret message and if we save that and open the browser what you'll see is secret codes being displayed to the screen which is what we set our secret message to so it's being logged to the screen okay not sure how we all can see that but there it is now just so that we can use set message to change the message so we can just do it kind of really barbaric here and just right below declaring it change it if we set the message as a function so we call it and then inside of that we can change it to whatever we want to like this is our new secret message and if we save that what you're going to see being logged to the screen that this is our new secret message so as you saw it just refreshed or re-rendered oh oh so this is a common problem you'll run into if you didn't catch that error i should probably reopen it too many re-renders react limits number of renders to prevent an infinite loop so remember react when the state changes it reloads the component and this is in a place that every single time i load the component it was updating the state and then it would reload the component because the state changed and it got an infinite loop so we're going to actually put this onto a button so we're just going to create a button which is just kind of like you do is javascript we're just going to say change secret message we're going to actually have a little bonus thing here which is going to be event listeners in react which essentially work just like javascript event listener so here we're just saying on click so when we click this button we're going to call a function and we're going to call handle submit well that's bada handle button click so on click we're going to run a function called handle button click which is which is going to then set our state so now if we run all this we should see a button on our screen and we see a button down here it says change secret message i'll zoom in so it's nice and big for y'all and right here we see our secret code so when i click this button our message changes so this is our new secret message so if we go over real quick because there's a little bit of a spaghetti kind of circle going mitch matt uh how that works is to use state in a functional component we import use state from react we set two variables to the u state which what this is doing is inside of these curly braces we're using object destructuring which is a javascript feature and and we're setting the first one the first part our secret message that's being set to the value of the current state and then we're comma space we're using set message which is being set to a function that we can use to update state so now to use that on line 25 we then say our secret message inside of curly braces which is how we can just use this just like a variable almost essentially use it just like a variable and then to set it we have to use the set message function that we declared right here on line seven and we just put our value inside it of whatever we want to set it to and we did that on click which on click is just an event listener technically it's a synthetic event listener because react does virtual dom and not just the browser dom however it works pretty much the same way so now let's go over how we can use state in a class component so you stay in a class component we do not have to import state and the slide shows i showed you two ways we can do it with a constructor and without a constructor so i'm just going to do without constructor because it's easier and shorter so we just literally say state equals an object which in this instance we're using color braces say hey this is an object in javascript and not saying hey we're writing javascript code because the jsx is only the code inside of this return statement so if we were to put object color braces down here we're saying hey i'm typing in javascript so just kind of keep that in mind now we're saying hey we're creating an object and we're just going to set a property of this object to anything we want so secret code 2 and we're just going to set that to a string of banana and i apparently didn't spell banana right now to use state inside of a class component we just say this dot state this dot state dot the property that we're trying to access for instance secret code 2 in this instance so if we save this and we open our browser we should see banana right here we see banana so that's working so to set state and react components a rat class base components a little bit different we don't use the function use state we actually use a function called set state right and it's actually this dot set state and inside this dot set state we it takes in the object and then you put the property name that you're trying to change for instance secret code 2 and then you put a colon because we're just typing in javascript object syntax now and then a string of whatever you want it to equal to so now we'll say apple now same problem if we were to run this as we ran into a moment ago is this will cause an infinite loop so we're going to go ahead and make this on a button also so we're just going to go ahead and create a function and technically we can create a method here we shouldn't have to use the let and whatnot because we're inside the class so method is just a function on a class so here we can just say handle handle button click which is equals a function at es6 function that sets the state put a button down here and we will put the text as never guess what this button does that is a very long button name probably not probably not greatest decision there however on click we are going to call the function just like we did in the functional component with on click and then carly braces this is just a event listener and on click we're going to call handle button click and that sets the state using this set state which takes in an object and then you put the parameter name that you want to change and then you put the value that you want to change it to as you can see this is a lot longer uh syntax so it takes a little bit longer to type out that's kind of why they've moved more to the functional price however it'll still work if if we type it right so actually i put that in the wrong place it doesn't if you're creating a method on a class it has to go outside of the render not inside of the render i don't think that's what we were having problems with oh and now since it's a method of the class and not just a function we have to use this dot handle button click as you can see now it's code highlighting like supposed to so this essentially just refers to the class so when we say this dot handle button click what it's saying is say hey javascript on my class my austin component find the method of handle button click so now when we go to the browser it loads and this never guess what this button does when we click it changes banana to apple so that's how we use state in a class component now we can go over props real quick now that we have some data to mess around with so let's say i wanted my awesome component to have access to our secret message right but it can't just we can't just access it right if i if i went to uh my awesome component and try to access this it wouldn't work because it it's just gonna error out and say it's not defined it's not fine it can't find it because it's encapsulated in here so to access it inside of another component this instance a child component which essentially just means a component that is being rendered or returned by this component which it is because it's right here we're going to pass a prop to it and we're just going to name this prop a secret message or we'll even name same thing our secret message and then you can put our secret message however so so this what goes inside of the eq the curly braces equal sign is what you're setting it to and this is what we're calling it like this is like setting a variable name this does not have to be the same on the rights the left side does not have to be the same as the right side to prove that i'll just change this to secret message okay so now inside of my awesome component i can now access the secret message by using this dot props dot secret message okay so just go over that real quickly again on my awesome component that's being loaded as a child component of app.js we pass a prop and we declare that prop as secret message equals our new secret message and then inside of the class component my awesome component which is winning our jsx down here inside of curly braces just said this dot props dot secret message so if we go to the browser secret code right here in between the buttons so you can see it's there when props update this the component that is receiving the props also updates so if uh our secret message changes inside of app.js because it's coming in as a prop to my awesome component my awesome component will also update so we can prove this concept by chain using our button here that changes our secret code and what and what's going to happen is both places we're printing out is going to update the reason that is because this component technically just re-rendered now it updated re-rendering essentially updates it so you see the new value so now we went over props and state we need to go over child props and keys so what we can do there is for child props we'll start with instead of making this a self-closing component we can make this a component with opening and closing tags so now this component has opening and closing tags my awesome component and we're going to pass a child prop to it says child child prop it can be other components or it can just be jsx so in this moment let's just uh pass jsx and say a paragraph this is our child prop data right pretty simple so what this is doing is it's passing whatever we put in between the opening and closing tags to our component my secret component very similarly way that it passes props just like we did here with secret messages and whatnot this is typically used when you have dynamic data and you don't know what the prop is going to equal right you can't say secret message equals something we don't know yet so anyway to show you how you use children props inside of the awesome component it's actually really simple y'all might be able to guess what it is you're going to use this props dot children that's all it is this props dot children and now when we go to our browser we'll see this is our child prop data so it's just another way to pass data between components and it's most commonly used when we don't know the date of that component so now to understand key props or it's really a key attribute more than a prop the most common example of when you need to use a key prop is for unordered list or when you're for looping through stuff and creating multiple components or jsx elements on stuff so to do that we're just going to create a unordered list down here an ordered list and inside of it we're going to load a variable that we have not declared yet called list items and up here we're just going to set let list items equal we need to write for this to work so we're going to say let numbers equal an array of 1 two three and four teach me a counter as i fill the type and this actually has to go inside the render because we're in a class component been doing a lot of work with functional components so i kind of forgot about that and we're just going to map through these this numbers array which is just javascript and we're just going to return a list item of the number so all this doing if you're not familiar with this numbers just for each loops through the array and for each index in the array we're calling it number and then we're supposed to be supposed to have color braces around that we're just displaying that number in a list item and then we're taking those list items are displaying it to the screen so now d without a key prop this will technically work and y'all see this real quick right without a key prop we have this unordered list right so it's like why do we need a key prop but if we open our developer console for me it's ctrl shift i and firefox down here we see these warnings for each child in a list that's actually really small each child on the list should have a unique key prop we also see invalid prop class name applied to react.fragment which is interesting but however we will go ahead and fix our styles by just uh putting a div here and also div is supposed to be lowercase i'm going to fix that on this other line real quick and that will get rid of this error the other error that we have and now it's all dark and styled so now you just see this one error here or warning technically that each child on the list should have a key prop so why do we need to keep rock if it's working right it's working as one two three four why do we need to keep prop well we need to keep rock not really for us but react needs to keep rock so that it can efficiently update the browser dom so we're not going quite too in depth into virtual dom and stuff this episode this kind of advanced topic however essentially what happens when react state or props updates you know like when we click that button and click our button and our our code changes um react doesn't reload the whole page if you did that and just javascript the entire page would reload and everything on this page would have to reload which is a very expensive process so what react does is you click this button and it's using react synthetics events on click so i'm actually using the browser on click but it's using the virtual dom so on click it changes the virtual dom and in the virtual dom just change to this is our new secret message and then react use a process called reconciliation to compare the virtual dom to the browser dom and then it determined exactly what changed and then it only updated this one thing right here that changed and i'm not sure what's not lame highlight that but it only updated this one line right here that changed and not the entire page which makes it really efficient however with keys uh because it does not have a key prop if one of these values changed in its unordered list it wouldn't know which item changed because we're looping in a for loop and you just can't keep up so if one of these changed would have to reload this entire unordered list now was it on a list of four things that's not really that bad however this was a long list that could come with a big problem so what we're going to do is show you how to use key props real quick or attributes i keep saying props i think it's taking my attribute so you just use the word key and then you equal it to a unique identifier this is we're just going to use number because we know our value does not contain any repeating values that are all unique however typically you'd use like an id of some data or something else because usually your data may or may not be unique so now if we go back to the browser and we refresh which we actually didn't have to refresh well we had to refresh for the console error to disappear you no longer see the key props because this is all working and everything else still works such as key prop it allows react to efficiently update if you get the warning pop a key prop on it pretty easy so we did props child props key props state functional and class components so i think that's everything uh i wanted to show y'all real quick though on the react docs which we actually haven't went to you can go to react.js.org then you can go there docs tab and actually have really good documentation so you have installation main concepts advanced guides and they have tutorials also however go under i believe it's in our main so i think it's where fragment is maybe it's under advanced i didn't think our fragment was advanced but it's right here fragments so fragments are a common pattern and react for components to return multiple elements that allow you group children without adding extra nodes to dom which is just remember how i showed y'all react fragments don't load to the dom um i was trying to show you where it said react fragments could have attributes because remember we had that everything class names weren't allowed and i thought that they were allowed so see if we can find an example here except because sore you could have react right uh react class names on fragments you can have attributes because we can add a key here so we have attribute of key so react fragments can have keys however apparently they cannot have class names interesting so i learned something new they can have fragments can have attributes but they cannot have class names which is kind of disappointing um also since we're not using any attributes key or anything here we could use shorthand for fragment which would be just like that it's like an empty element and we would no longer have to import it and on our browser we'll also see that this is still working and we can click our buttons and our messages are updated and we're all fine and dandy here so today we went over a lot of concepts pretty rapidly we went over what react is why react is the best javascript framework prop state keys children props functional components class components uh how to install react whenever a lot of concepts really quickly so you know build your own project builder to do app build something to uh really sync this into your brain and i will see you in the next video don't forget to like and subscribe to continue seeing some more content

Channel: Web Dev Evolved

Views: 294

Keywords: web dev evolved, React, React.js, React Components, React Props, React JSX, React Fragments, React Keys, React Child props, React State, React For Beginners, React Crash Course, Javascript Framework, React Guide, React js

Id: r1zuCwPZYYc

Length: 55min 26sec (3326 seconds)

Published: Sun Nov 22 2020