Conquering freeCodeCamp - ReactJS - Live Stream #26

hello and welcome to another section in our quest to conquer free code camps curriculum and today we have one of the most requested topics which is react Jas hello everyone in the livestream and hello for those of you for watching in the future the recording how are y'all yeah at least so this is a fun one react.js a lot of people got excited about this so it should be fun let me get everything set up here and then we can proceed it looks fine let me know if you can hear me if you can see and then we can act I think all right you it looks that it working okay react.js introduction react.js created by facebook is an open-source light javascript library for building user interfaces is used it's used to create components handle State and props utilize event listeners and certain life cycle methods to update data as it changes recombines HTML and javascript Knology to create its own markup language JSX this section will introduce you to all of these concepts and how to implement them for use with your own project um a now at the time we're recording this javascript is one of the most uses libraries sorry react is one of the most used JavaScript libraries so a lot of people are looking to learn it which is good that means that we're learning something important now so you should take a good look at this also if you're following along on our quest to conquer free code camp I highly suggest you do these challenges yourself too by doing now why we'll do in the livestream or later it's important that you hold yourself so you get the hang of what but it does it how it works all right let's see what they say here okay we have gsx which is an extension of JavaScript sort of it has several benefit it lets you use full programmatic power of JavaScript within HTML and how to keep your code readable I am big fan of GSX not all all of people like it so you might want to look into it but I really like the way you can handle everything inside JSX el gusano hello Adrian Shiba Mihai for him welcome to the live stream all right let's see next for instance because javascript is a tactic the extension of GSX is a syntactic extension of JavaScript you can actually write JavaScript directly within JSX to do this you simply include the code you want to be treated as JavaScript within curly braces so like this if this is mine since it's used in several future challenges all right however because Jim JSF is not valid JavaScript the JSX code must be compiled the transpiler babel is a popular tool for this process for your convenience is already added behind the scenes for these challenges if you happen to writes in practically invalid gsx you will see the first test in these challenges fail alright yeah so basically you can assign to well properties here variable something that looks like HTML so you can see we assign the Dave but this is actually JSX and behind-the-scene this will be converted to JavaScript functions and stuff like that all right it's worth noting that under the hood the challenges are calling react Dom that render which gets the GS X and puts it inside an element with an ID of root if you haven't used react before uhh this is the way you assign the Dom element your react apps of making your one of your Dom elements react that sort of you get the element on the page and then inside the reactor Dom that render you pass in your react function do this the X element okay this function call is what plays your Jess accent reacts own lightweight presentation of deduct let users react that uses snapshots or resolve them to optimize updating only specific parts of the actual Doug this is why I reacted so powerful is that it won't actually change the Dom it will change will have a little down and it will change that and then only update the Dom when necessary I think that's like a high overview of what it does alright let's see the first challenge the current code uses GSX to assign a development to a constant JSX replace the date with an h1 and add the text hello GSX okay let's see so if we can replace it with an h1 you can have whichever tag you want from whichever HTML tag you want inside your GSX there are a few changes when it comes to attributes but other than that you can use whatever tag one okay okay in the last challenge we created a simple JSX but it can be represented mark it can represent much complex HTML as well one important thing to know is that we can have nested gsx there is that it returns a single element oh okay so I reading and thinking at the same time if we want to have nested gsx so multiple elements multiple eleven hello HTML tags we need to keep in mind that all of these must be wrapped inside one HTML tag so for example you can see here we can't assign this variable because it's embedded it has three Dom elements but instead if we wrap this inside the div we can use it well actually in a newer versions you can do something like this if you pesticide an array or if you there is a tag sort of which you can use alright I don't want to confuse anyone and apparently I'm not doing the best job at this okay Adrian I'm in Moorish okay let's not get mixed up with the chat and everything let's focus so we find a new constant JSX that renders a deal which contains the following elements in order JSX will have a Dave like that and let's h1 we have a paragraph and we have on our donated least with three allies click okay you can see that we needed to wrap inside the div so the first out the first root component sort of the root tag must be one but then inside you can have whatever you want when randomly multiple elements like this you can wrap them all in parenthesis but it's not strictly required also notice this challenge uses a defect to wrap out the Chairman's within a single parent element if you remove the Dave the GSX we no longer inspire keep this in mind since it will also apply when you return gsx element in reactive component SX is not defined okay so it means JSX all right oh let's add title paragraph and item 1 item 2 item 3 you can see that they appear nicely on the screen because keep in mind that behind the scenes we have that react Dom that thread their function which takes this JSX and puts it in our Dave there must be a deal in your HTML with an ID which you will target and you will put all the gist excited all right at commenting JSX he we can add comments weighted this by putting them inside curly braces and then four slash star and four slash the star four slash at the end I didn't use comments that much but in case you ever want it's good to know and you can see that it turns green it showed it is a comment you right read the Reg table elements 2/3 done so far you learned that gsx is a convenient tool to write readable HTML within JavaScript with react we can either distress X directly to the HTML Dom using reacts rendering API known as a reactor down react Dom offers a simple method to render react elements to the Dom which look like this we have the a Kadam and there has function render where the first argument is a react element or component which you want to render and the second argument is the Dom node that you want to render the component to don't think of it like this you build a component let's say countdown component and you want to place it inside a div you created an HTML with an idea of by the no app or usually it's Dave an idea web but that's not our rule you can use whatever you want and it shouldn't be only a deal with an ID you can target it with a very select or whatever you wish as you would expect reactant render must be called after the JSX element decorations just like how you must declare variables before using them all right let's see the collator has a simple gsx component we have a dnh one in the paragraph use the react get some that render method to render this component to the page all right so we want to pass in Jess X and we want to pass it inside a day with an ID challenge in node so we need to target that ID document get element by ID ah challenge [Music] all right you can see now this idea of challenge now it they created somewhere behind the scenes in the HTML so we're targeting it and we're putting JSX inside all right next define an HTML class in JSX okay so this is one key difference in JSX that is different than what we have in HTML in HTML we are setting the class using a class attribute hey joy but in JSX we can do the class we need to use class name oh that's a slight difference but you need to be aware of that also the naming convention for all the HTML attributes and event references in GSX become camelcase for example you don't have unclick or lowercase but you have on and click with capital c you all right so that's the main difference between JSX and HTML also all the tags I think they'll tell us in the future but if they don't all the tags must be must either have an opening and closing tag or they must be something closed so like for example if we have input type of text for example in HTML this would be valid but in gsx now you need to enclose like that okay at the clasp of my deep to the deep so we had a class by saying not this my Dave but instead quest I think the yeah we can't use class because it's a reserved word in JavaScript that's why they change it to class name all right at any given point if you have questions let me know in the live chat or if you're watching this recording let me know in the comments and I'll do my best to answer everyone learn about self closing tax here so exactly what ties that before so I went a little had in HTML almost all tags oh I've bought an opening and closing tag the closing tag always has the forward slash before the tag name that you are closing however there are special instances of HTML called self and closing tags or tags that don't require both an opening and closing tag before another tag can start for example the line break tag can be written like this but should never be written as this since it doesn't contain any content in Jess's the rule our little different energy SS element can be written with a self closing tag and every element must be closed the line break tag for example must always be written as this in order to have valid checks that can be transpired hey Dave on the other hand can be written like this so it's a self and closing and you can pass attributes an ID or something and then you can manipulate it like that or you can have an opening a closing tag okay the difference between those that are the fact that the first in tax version there is no way to include anything inside the leaf okay you will see little challenges that this syntax is useful when rendering react components first fix the errors in the code editor so that is a valid GSX let's see remove these now we have the break here which is not a second closing and I think this one also yeah oh now we're fixing okay a twist functional components these are the curve react everything you react is a component and here and here you will learn how to create there are two ways to create track components the first way is to use a JavaScript function defining a functor component in this way creates a stateless functional component the concept of state in an application will be covered in later challenges for now thing called stateless component as one that can receive data and render it but does not manage or track changes to that data okay all right so he'll create a component with a function you simply write a JavaScript function that returns either JSX or no one important thing is to note is that react requires a function name to begin begin with a capital letter here's an example of a stateless functional component that assigns an HTML class in JSX okay so we have our function which returns by JSX as you can see here a deal with a class of custom class and we store it inside a component which we are calling demo component because a Jess x-component renders HTML if we put several components together to create a more complex HTML page this is where the power reactor comes from oh this is one of the key advantages in component architecture react provides it allows you to compose your UI from many separate isolated content components this makes it easy to build and maintain complex user interfaces oh right you okay so the co-leader has a function called my component complete dysfunction so it returns a single leaf element which contains some string of text all right so we have the my component function and we want to return a component let's put it aside parentheses which will be a div with some text and you can see that it now appeared on the screen which is awesome the text is considered a child of the development so we will not be able to use a self-closing tag yeah all right you the other way to define a react component is with the es6 class syntax we haven't used class in text before [Music] but think of it like being a syntactic sugar on top of functions and constructors we learn about this in our JavaScript section I forgot exactly which one I think Opie object-oriented programming we learned about functions and constructors and all that so if you want to revisit that you can go and check that livestream out okay in the following example kitten extends the AG that component so we're creating a class kitten and we're extending react that component this is something you would need to do always if you want to have a class based component in react you're creating your class name whatever you want it to be and then you want it to extend react that component inside it you would create a constructor okay let's let's actually read to see what they say here they might explain it better than ax this creates an es6 class kitten which extends that yeah component class so the kitten class now has access to many useful react features such as local state and lifecycle hooks don't worry if you aren't familiar with these terms yet they will be covered in greater detail in later challenges also notice the kitten class has a constructor defined within it that calls super it uses super to called the constructor of the parent class in this case reactive component the constructor is a special method used during the initialization of objects that are created with the class keyword this is best practice to call a components constructor with supper and pass props to both okay so we create in our class we're passing props and then we're passing props to the parent okay this makes sure the component is initialized properly or now note that it is standard for this code to be included soon you will see other uses for the constructor as well as props yeah so they kind of show us constructor and props but don't tell us much about it all right you ah [Music] give me a second to put some water and we can go further my component is defined in the code editor using classes index finish writing the render method so it returns a development that contains an h1 with the text hello world okay also one change [Music] from the functional components yeah is that here in the class components we have this render method which is required keep that in mind you okay sorry for the delay I had to drink some water good now inside the render we want to return ativ okay you don't have a deep which would say oh we should have an h1 that's nicely aligned everything all right much better and it should say hello react create a component with composition ooh that sounds fancy now we will look at how we can compose multiple react components together imagine you're building an app and have created three components now our dashboard and footer to compose these components together you could create an app parent component which renders each of these three components as children's or children the renderer component is a child in rec component you include the component name written as a custom HTML tag in the GS X for example in the render method you could write so you can see now that we have these custom HTML tags which are basically react components we don't have an example here properly but think of this navbar as being a react component which renders probably an avid Eve sorry enough tag with a DV side with an image with some text or whatever you would want in the nav and then you return this and you have a react component then you can use the district component whenever wherever you want you can put it here on top of the dashboard or you can I don't know have multiple pages and put it on the sidebar in South pages there are endless possibilities when reacting counters custom HTML tag that references another component a component name wrapped in K in this tag is utterly symbols but it renders the markup for that component in the location of the type this should be straight the parent-child relationship between the app we have here and beside it we have navbar dashboard and footer in the code editor there is a simple simple function component called chart component okay Wichita three terms a Dave and the paragraph and we have a parent component you note that the child component is a functional component and the parent Hunter component is a class so yeah that's her why they child component is defined in a six-letter function because this is a very common practice that's right however known that this is just a function if you are familiar with the error function syntax please refer to the JavaScript section okay but composure to together by rendering the child component within the parent component okay so let's see we have the parent component which returns a dividend h1 and here inside let me remove this comment like that we can put the child component by creating a custom HTML tag which should have the same name of something like this and you can see that a child component appeared which is basically paragraph we can have these as many times as we want and you can see that it will render or we can put it on top or whatever we want that's the power of reactor basically to come here it will put instead of the child component here it will put a paragraph and so on and so forth oh okay so it should return to nested l nested elements are use react to render nested components you the last challenge showed the simple way to composed two components but there are many different ways you can compose components with react component composition is one of the acts powerful features when you work with react is important to start thinking about your user interface in terms of components like the app example in the last challenge you break down your device into its basic building blocks and those pieces become the component this helps to separate the code responsible for the or DUI all right lot of talking there are two functional components defined in the code editor we have type of fruits and we have fruits okay and have type of food all right take the type of fruits component and compose it or nest it between the fruits component okay so we put it inside it's approved take the fruits component and nested between the types of food component okay fruits yeah so something like that you can see nesting this is the third level nesting for second level yeah prutte is the first level and types of proteins at second okay that is rook should be a child component nested within a parent component which is nested within a parent component on its own all right I think this is pretty basic stuff but anyway let me know if you have brushes the challenge continues to use more complex composition with react components and GSX there is one important point to note rendering es6 style class components within other components is no different than rendering the simple components he used in the last few challenges you can render JS x elements stateless functional components and es6 class components within other components alright it's easier to see this and we're practicing in the code editor that types of food component is already rendering of component called vegetables also there is a fruit component from the last challenge let's see we have vegetables here at the bottom a next two components inside fruits first non citrus and that's it as both of these components are provided behind the scenes okay we have a component and citrus that and I guess we have one citizen next mess the fruits class component aside the types of food component so here okay look at that so now it appeared and apparently yeah we have this component the reserve should be a series of nested components which use two different component types okay render the class component too deep down hmm okay we use the Viacom API the process for rendering their components will look very similar the past week challenge is focused on components in composition so the rendering was done for you behind the scenes however none of the react code you will you write will render the done without making a call to the react Dom API here's the here's a refresher on the syntax so we have the act on that render component rather and target now okay react components are passed into react dominat render a little differently than GSX elements or jesse's elements you pass in the name of the element that you want to render however or react components you need to use the same syntax as you it was if you were rendering a nested component okay so we're using the syntax here you use the syntax for both es6 class components and functional components all right let old fruits about it were couples that defined for you credible components as child for the types of food so we have fruits and we have value to both now we want to put them in our top react now that tram there now here we specify types of food note the syntax now with the opening and closing that's not a blink posing less-than and greater-than signs and where we want to put it we want to put it inside document.getelementbyid d of challenge and now we should appear on the screen we can comment this out like this and it will disappear all right right the react component from scratch ooh this sounds fancy we learn the basic of Justices react it's time to write the component on your own okay all right we learn about this define a class last my component and it should extend react that component all right we should have render method which we return something oops let's see Dave with an h1 oh my first react component I don't think we need a constructor make sure to call it a sector for the component oh okay okay structure props and supper preps all right and now we want to add this to our react that render we have my component and we have the document at get element by whoops get the element by E challenged note all right and look at that we have our first web component written from scratch it wasn't that bad right run microphone should contain an h1 tag with a text my first the ecto compound okay so our first track component was of bells right as props to a stateless functional component alright another good section let's see everything's working apparently does he stretch a bit and we can continue in the previous challenges we learned about creating and compazine JSX element functional component and facets okay with this foundation is time to look at another very another feature very commonly react props props props props in react you can pass props or properties to child components so you have an app component which renders a child compound called welcome which is a stateless functional component you can pass welcome a user property by writing these are very similar to HTML attributes which we used before so we have the name and the value this case is a string but this value can be an object an array whatever you want what data type you want even a function you can pass in function as props you use custom estimate attributes created by you and supported by react to be passed to the component in this case the created property user is passed to the component welcome since welcome is a stateless functional component it has access to this value like so when we're creating the stateless functional component we need to set it be equal to a function oh yeah because it's function component and aside here it has access to the crops and then decide if you can call crops that whatever you pest problems props that user in this case and it will have access to mark in our example here is it standard to call this value crops yeah you can call it what everyone but perhaps is how many you so I'm not sure why would you call it different and when dealing with stateless functional components you basically consider it as an argument to a function which returns GSX you can access the value of the argument in the function body with the class components you will see this a little different yeah although we and the looked yeah look at here we have props props okay there are calendar and current date components in the code editor okay calendar return h3 current date returns paragraph and I think it's expecting a prop here okay oh right when we're rendering the calendar the current date we want to pass in a date passing a property of date assigned to the current date from JavaScript date object then access this prop in the current date component of showing its value with the P tags note that the prop value to be evaluated as JavaScript they must be enclosed in curly braces okay so you can see we have the property date and we want to pass in a new web data currently like that so this will evaluate because it's inside the curly braces and now we have access to it inside the props so we can say something like crops that date as this is how we call and look at that we have a string with parent my date here and they times on and everything okay if we pass here something like animal string hello it will shoulder string hello or if we passed in a calculation one plus two it will evaluate and it will say three oh that's fun here you have a Joe you have a question sure what is it that will give me time to create you all right you how does the data object work without installation whitneyhl that's a good question it's the same as saying new date build errors or no it's not the same yeah that's a good question actually I don't know why it works like this and you don't have to pass yes just call the function late they don't initialize it we need to look that up all right oh and Kate welcome pass an array as props okay I'm going to go over it faster so basically we can also pass in a race as I said we can pass in objects and functions and whatever datatype you want okay there is a list and to do components in the code editor let's see we have a to do list list we have two lists okay we're rendering each list from the to the component as in a tasks property assigned to an array of to the desk okay the tasks will be an array let's see finish react learn relax what about tomorrow tasks build five projects these are my own tasks okay so now we passed this to our list but our place does not use the props so let's use it props that tasks let's see what happens okay look at that so we have finish react and learn Redux and we also have build projects now what you can see is that they are next to each other if we pass something here create video or something you don't have us days okay showing its value a P element okay inside the P he was joined to display props tasks in array of P elements s comma separated list so basically this is an array and we can do a join wait a comma and we can add a space so it will have nicely it will basically create a string alright oops second list component representing the tasks for tomorrow should have three or more all right one two three okay good good good so you can see now we can use props all the crazy stuff it also has an option to set default crops you can assign default props to compute component as a property on the component itself and react assigns the default properties necessary this allows you to specify what the prop value should be if no value is explicitly provided for example if you declare my component that default props in something well it should be an object you have defined a location prop that said to the string San Francisco unless you specify otherwise reactor science default props if props are undefined but if you pass know as the value of a prop it will remain no R he-hello in the light and I'm not sure how to pronounce your name but I'm happy that my 30 days challenge work for you Adrienne I play whichever should I come but maybe one has some and you could make a github tutorial I have something on my web on my YouTube watcher all right let's continue the code editor shows a shopping cart component define default props on this component which specify a props items with the default value of zero okay so shopping cart default props I terms should be zero but we're not using it so no we can't see what we did okay look at that so we have here an items component functional component which has it which uses a props quantity and its default prop is zero the first value for the quantity is zero yeah look shopback Shopify not shopping cart component granderson items it has zero key override the default prop by passing in a value of ten for quantity so the default prop can be overwritten by passing the quantity of something like this so basically this is just the default as the names as the name suggests it's perder to see working all out all these modules I'm happy to hear that thank you I'm very happy to see that you're enjoying it use crop types to define the props you expect okay to be honest I don't really use prop types that much so I'm going to go over it fast basically you can create a component and you can say which prop types it should have so you can enforce it somehow which is a good practice to be honest I should use it more because for example let's say you have a list of two dudes right and you want a prop that's that tasks prop if you remember you want that to have an array right because what do you do with the number so the tasks prop or a to do component should be an array so that you can enforce that by saying my component that prop types you say your property and you say prop ties that funky is required or prop ties that object or prop ties that but I'm not sure all of the all of them string number and whatever they have yeah you can look at this documentation or all the options and also make sure that as a react version 15.5 prop tires is important independently yeah as I said I don't use it much if you want to look more into it feel free to search for it we find prop ties for the items to be quantity number required a prop prop tie quantity should be prop types number is required monkey items will include the prop types check that requires quantity to be a number [Music] RUP types amber is required items that crop types Oh quantity quantity excess props using these that props all right get something fun you remember how we used props inside functional component well inside class-based component if we want to use the props we want to access these backdrops so it will be on the disk keyword I mean yeah is that perhaps that date this that props that tasks these that props that whatever prop you're passing to this component from its parent component render an instance of return amp password in the parent component reset password okay return and password if a prop of temp password and the sent value overstaying that it is least 8 characters long ABCDEF eh all right so we get that within the child's return Temkin password access the tempest or prop within the strong the text to make sure the user sees the temporary password alright so as I said we have access to props by this the props dot and the property name in this case stamp press one and it appeared review using props with stateless functional components okay what is this about Oh a stateless function component is any function you read which is check accepts props and returns ESX all right a stateless component on the other hand is a class that extends as a component but does not use internal state covered in the next challenge finally a stateful component is a class component that does not maintain its own internal state all right there are a lot of notions you should probably have an idea of what they do but they are pretty logical I'd say so it certainly are okay common pattern is to try to minimize statefulness and to create stateless functional components whenever possible this helps contain your state management to specific area of your application in turn this improves development and maintenance of your app by making it easier to follow how changes to state affect its behavior yeah basically the stateless functional components or they are also called dumb components they basically just are used to show some date on the screen they take in props and they return gsx don't do very much stuff and you want to have as many of these as possible on in your application and then in one is state full component you will deal with all the props and the state and we're going to learn about states in the next one and then your pass to the child components children Obama to pass all the state and then can do their own stuff that sounds complicated right I do a poor job of explaining this all right let's see the code editor has a campsite component that trend there's a camper component as a child okay define camper component and assign in default props of name the Empire Oh em camper find a camper component okay we can do this inside the camper component render any code you want but make sure to be to have one P element that includes only the name that that is best all right so we have a deterrent paragraph and we're going to pass a name props that name and we need props here all right and also we need camper that default props would be a name and Parbat all right so you can see that now it appeared here because it's used finally define prop types and the camber component of prop type sir proper types name should be [Music] three types that's three oh well should include protests which require the name of care is required it is required so it's required to be a stateful component our ID this is also nice so there are three big things in react so far GSX crops and state I'll keep that in mind gsx is that you can use HTML like syntax inside jealously and you can pass in all sorts of JavaScript functionalities inside these early braces then props you can use parents to pass in data to their children's using crops and now state is one of the most important topics they say state consist of any data your application needs to know about that can change over time you want your apps to respond to state changes and present an updated UI when necessary oh-kay react offers a nice solution for the state management of modern web applications to create state energy a component you create state in a react component by declaring a state property on the component class in its constructor okay action in constructor but you can do it outside them anyways this initialize the component with state when it is created the state property must be set to a JavaScript object declaring it looks like this so we have this that state will be an object and here we're going to have properties you can access the state object throughout the life of your component you can update it render it in your UI and pass it as props to child components the state object can be as complex as a simple or as simple as you need it to be note that you must create a class component by extending reg component in order to create state like this so you can't have stayed in functional components well you can have if you're using hooks but that's a little later in in our curriculum hopefully and not sure if they teach us about hooks because it's kind of new appeared a year ago or so so yeah but at this point just keep in mind if you want state you will use class space component and if you don't use state you don't want to play around with it you don't need to then just use a function component which has its own advantages it's faster and Darla's okay there's a component in the code editor that is trying to render the name you can see we can access the state this that state that me pretty much like with the props did that props that but in this case we're talking about the state so let's set the state here we'll be whatever let's see okay we can put chlorine here and you can see it has access you might think those of you who are new to react okay but was the difference between props and state that would be a good good question once you define a component initial State you can display any part of it in the UI that is rendered if a component is stateful if you always have access to the data in state in its render method you can access the data with this that state if you want access the state value within the return of the Randolph method you have to enclose the velum curly braces okay we know that already state is one of the most powerful features of components in react it allows you to track important date on your app and render a UI in response to changes in this data if your data changes your UI will change react uses what is called virtualdub to keep track of changes behind the scenes when state data updates it triggers a rear-ended of the component using that data including child components that receive the data as a product react updates the actual Dom but only where necessary this means you don't have to worry about changing the dog you simply declare what the UI should look if that's the power of react it does all this job behind the scenes for you updating the Dom making it fast and all that note that if you make a component stateful no other components that are aware of its state its state it's completely encapsulated or local to the component unless you passed a data to child component test props this notion of encapsulated state is very important because it allows you to write cogeco or Center logic and have the logic contained and isolated in one place in your code in the code editor my component is already stateful we can see we have the name pre-cut can define an h1 tag in the components render method which renders the value of name okay so we have h1 and here we can say this dot state that name now the h1 should only render the value of state and nothing else in Jess ex any code you write with curly braces will be treated as JavaScript so to access the value from state just in clothes that are yeah so we enclosed it inside curly braces rather state in the user interface another way all right so there is another way to access state in a component in the render method before return statement you can write JavaScript directly for example you could be clear function success data from state or crops perform computations on the data on this data and so on then you can assign the data variables which you have access in the return statement all right this is a good one let's see what they teach us to do and define a cost called name name but equal to name value in the state components they start state that name because you write JavaScript directing the code part the this part of the code you don't have to enclose yes basically this is JavaScript it's a render function and we can write JavaScript here we have JSX only in the return so keep that in mind don't confuse the two here you can write also whatever JavaScript you want okay next in the return statement a tan h1 and apparently use that name like that you can see we took the name out of this that state that made now for those of you who watched the structuring we can do something like this which you're going to see a lot so basically we're taking the name out of this that state now the powerful thing with this let me use surname age let's do our name or whatever and age 18 and we can be structure name surname and age like that all of them from this that state a bit is asking so stateful components should be class based or something or is it up to the developer yes so hateful components should be class based because you can't have stadium well-known that's tricky because you can have with hooks react hooks which is a newer version of that you can have stayed inside functional components but let's not go into those yet I'm not even sure should I talk about Hoops should I not it's something new so before hooks this was pretty safe forward if you want state use a class component because in functional components so in components which are written like arms my comp here okay and we have a day whatever my deep you don't have stake here all you can do is to pass in a prop and then use that props like this props that I don't know but then yeah as Gulshan said nowadays you can use hooks to add state to your functional components but it's a little more advanced so I won't go into it as of this video let's keep it to the class-based components are stateful and we're using the functional components as dummy components so just did just take props and they show that prop or whatever but good question okay yeah so we hired Jen and a his Bay it's preferred now to use functional component with that but that's a little off-topic there Duran the rich th1 and it should contain the text and they're from the all right since date with this that's said state already this is another good one so we have this state but what we're doing with it okay we have it we initialize it and that's all well actually we can set our state using the dis that set state method and we're passing in the new value of our state so for example if we want to change the user name we're passing in an object and we say username is something else let's see what they say here react provides method okay the keys are your state properties and the values are the updated state data for instance if you were sir storing a username in state I wanted to update it it would look like this react expects you to never modify state directly so you can do something like this that state equals I mean this let's take that name equals Florida this is a no-no but if you want to change the name from the state you will do this that set state and inside you'll say name and for it like that this is a valid way to set the state and change it okay also you should know that react may batch multiple state updates in order to improve performance what this means is that state updates through the said state method can be tense as synchronous see a synchronous okay sorry my English is so with these days there is an alternative syntax for the set state method which provides a way around this problem this is rarely needed but it's good to keep in mind okay you can check it out there is the button on the page which has an on click and this unclick you can see that the attribute is camelcase and it's set to this dot handle click which is our function here and what happens is when we click this button okay you could already see what happened when we click this button this function will run and we can say here alert ie or something okay look at that it works so we can do anything you want when you press this button within the handle click method update the state using this that set state set the name property stay to equal the string react rocks so we have clicked that we clicked and becomes very but we want to say react rocks and we click it and look at that our initial state changes to react rocks click the button and watch the random state update don't worry if you don't really understand how the click handler code works at this point it's covered in our upcoming chat challenges alright let's see buying the bees to a class method okay this is [Music] well we're going to learn about this but I'm not using bind anymore all right let's see what they say about it okay oh yeah as we saw we can use methods inside but if inside our handlers or example this and the click we have this on click property and we want to run the disk dot handle click function when it's clicked now this works fine the only problem with this now is that inside it it won't know what this keyword is about it want it will be bind by this function handle click and we don't want that because this handle click doesn't have a distant state so we want to change the state on our component and in order to do that we can set this that handle click to be equal this that handle click that bind this then when you call a function like this that's at state within your class method this refers to the class there will not be undefined yeah this is basically a hack in order to use the desk keyword inside of function but yeah as joe is pointing out right now in the chat in order to don't need if you don't want to use this which is pretty ugly always by the handle clicks in your constructor what I'm doing is that I'm using arrow functions here so instead of how do you write their own functions I totally forgot we have this I'll be right out of function this area and they'll click [Music] it looking abides let me see so if I write the function need to use my brain power but my function equal okay like this right let's see the quake I have a lips oh it's cold all right bitter too class properties are available ah it's a path we can't use arrow functions now why I wanted to show you this is because using the arrow function this will make that so the kiss keyword will be bound to the component that is called the handle click that is calling the handle click and then the best at explaining this but basically the arrow function if you call the dis keyword inside the narrow function it will go this is how I see it it will go up one level and it will be bound the component in this case my component so now you can access this that set state without this being undefined they don't have to be do all these nonsense okay that might be too much and maybe it's confusing for people who are starting yeah let's just do the binding for now or if it was alright you stay to toggle an element let's go back to the fun stuff sometimes you might need to know the previous state when updating the state however state updates may be synchronous this means that react may batch multiple set that set state calls into a single update this means you can't rely on the previous value of this that state or dis that props when calculating the next value so you should not use go like this this that set state counter dis that accounted is the props that increment instead you should pass set state of function that allows you to access state and props using the function with said state there guarantees you are working with the most current values of state and props okay to be honest I didn't use this that much but if you say so well inside the said state we can Bassin function which takes state and process arguments and it will record an object and then you can access the state and props oh well I was lazy and I just did the objects here an object okay note that you have to wrap the object litter in parenthesis otherwise JavaScript thinks it's a block of code yeah so these parentheses around our object goodgoodgood let's see my component has a visibility property which is initialized to a pulse where oh yeah the render method returns want view if the value of visibility is through and the different view is it for if it's false so let's see don't have gone here if these are say visibility we return something and other words return something else okay so we have a button wait the class of toggle we turn on click method ok M beside here we have an h1 and here we don't all right this is not the best way to do this but ok currently there is no way of updating the visibility property in the component state the value should toggle back and forth between true and false here is a quick handle to the button toggle visibility has a function to set state to define of K Baba alright so let's take this disability function let's declare it and here oops we want to call this that set state that's less in a function this function will take the state which is the less updated state and inside here we want our visibility to be eight that visibility's of the old state but negate negated so if it's true will become false if it's also become true all right so we did that now this almost works but we have the issue of not biting we didn't bind it so let's take this and do the same in the previous one find this and now it should work properly Oh okay look at that now you see me now you don't see I will add something else here in the button I would add a show and here I would add hide now show and you can see it and hide hey this is the powerful how powerful reactive okay you a quick right a simple counter yeah finally we need to do something increment increment reset okay is that increment decrement reset yep well lads that we have increment which is a function Bikram and is a function and reset is another function in all of them we want this that state to be something yes so we take the state and we in the increment we want account to be eight that sound plus plus or plus one we can do plus person the state okay let's copy this over here and also here in the decrement we want to do minus one and in the reset we want to put a count back to zero so that's done uh okay now we need to bind all of these but let's do it this increment will be the starting and that bind let's copy this over 1/2 a Boop's say Bikram and here and we say reset here all right so now if we did everything correctly we have a very interesting application in momentum okay that increment is that stay count state countless one now what is the problem unclick these step increment oh not these that state are it is that set state why didn't you guys correct me but we want to set the state okay and look at that we can increment and we can dig and we can reset if we want which is pretty fun create a controlled input 4k this is also interesting the replication may have more complex interaction between state and the render UI for example form control elements for text input such as input and text area maintain their own state in the dom as the user types with react you can move this mutable state into a react components state the users input becomes part of the application state so the act controls the value of the input field typically if you have react components with input fields the user can type into it will become a controlled input or okay that sounds much fancier than it day itself the code editor has the skeleton of a component called controlled input to create a controlled input element the component state is already initialized with an input property that holds an empty string this value represents the text user types into the input field alright first create a method called handle change and those change that has a parameter called event or a when the method is called it receives an event object that contains things of text from the input element you can access this thing with event target that value okay update I'm going to do what they did what they say here and then I'm going to explain so if you have questions I'm also going to answer them good update the input property of the component state with this news link so we have this that said state we want to set our state at our state to be an object with the property of input and this value a like that oh oh all right this is what happens when you don't use the auto enclosing effects they close in brackets all right this is all right so we have a dis that set state method and we're setting the state input property to be event target value in the Ratan method create an input element above the h4 input okay add a value attribute and set it equal to the input property of the component state so this needs to be equal to this that state that input ah right then as an unchanged event handlers on change and set it to this that hand I'll change get when you type in the input box the text is processed by the handle change method set as the input property in the local state and rendered as the value in the input box on the page the component state is that single source of truth regarding the inputs data last but not least don't forget to add the necessary bindings a bindings all right that's it does this work or I messed up something again is that stated input input that state input a with value on change ah this looks good to me you let's go over again that the input piece that handle change and they'll change or KDS that handle change that's correct the values that stayed at input and own changes the luggage and our chain we have to then target that value and the state is object this looks fine you need to have brackets on the input set state oh it's a pun hi I could write this that said state yeah but we're using the function need to bind on change not don't change we binded the handle change so yeah I could use this but we use the function because that's what they taught us oops this is how they taught us to do to use a function which takes the state and returns an object with the new value that's weird so they tell us to do that and now it doesn't work okay well so apparently yeah and now you can see that it works now the good part with this is that if we take the state as a function into the proof state state yeah so we have it Oh okay yeah so we use the state and I see so we don't use the previous state you're setting it to the value but what then okay I see so this is no good in this case all right let's go over what we're doing here we have an input and we set the inputs value to something we're storing in a state the input here in our case this could be text or whatever if you want by default this value is said to be an empty string okay next we have on the unchanged event listener which is an event listener on the input which runs every time the input is changed we are running the handle change method this takes by default an event parameter we're going to need this to get the value from the input which is on event target that value and we're setting this back to our input input state yeah so it goes sort of in a some kind of loop we're going to the input we press a key s then it goes to this function the value of the input is as it sets to the input which is updates the state object rendered method and it sets the input value to s yeah but basically this is how you would use an input to store this the state input these inputs and text areas are one of the most used ways to collect data from the user so for example think about four you want the name to get the name email password and all that and then when the user gives you that text that information want to store it somewhere so you are going to do something like this a lot of times all right 8a controlled for the last challenge showed that we I can control the internal state for certain elements like input and exterior which makes them controlled components this applies to other form elements as well including the regular HTML form element the my form component is set up with an empty form with a submit handle and learn we have okay for submit and on the on submit we run the handle submit function okay we added a button which submits the form okay you can see it has the typeset to submit indicating it is a button controlling the form so when we're clicking this button we are submitting the form I add the input element in the form and set its value to invalid value and unchanged at the input value should be something unchanged would be something and we need to close it all right and they'll change we have it here so unchanged we'll beat this handle change there already by disbanded it for us so that's perfect and the value should be this that's data input this that stayed at input or what I like to do is to do something Const input equals this that state so we take the input from state and we just press here okay two two two two you should then complete so that it sets the component state property submit to the current input value in the local state so again you should then complete the handle submit matter so that it sets the component state property submit to the current input value in your local state so basically yes we want to set the stage for the submit but it should be the value of the is that state the temple and how they taught us we want to use a function here so state please function and we're using the state like this which is the most updated version now one thing to note is that we must call the event.preventdefault in the submit handler to prevent the default form submit behavior which will refresh the webpage so here we want to say event event befall so the sub in the form will not submit now finally create an h1 tag after the four okay which renders the submit value so because we use the structure here we can say something and it will take submit value from this that state and we pass it here now you can then type in the form and click the button or press Enter so let's see the type fluorine you can see that nothing happened but if we pressed enter learning appeared in our submit state in our submit in our state on the submit property I am complicating things right or free could camp press enter and it changes all right much okay best state as props to child components puh-leeze is another fun stuff you saw a lot of example that passes props to child GSX elements and child react components in previous challenges you may be wondering where this props come from a common pattern is to have a stateful component containing the state important to your hair that then renders the child component you want these components to have access to some pieces of that state which are passed in as props so what I mentioned before you would use a stateful component to handle your state and then all the changes from the state you will pass in to the children's as props which will render those properties okay this pattern illustrates some important products birthday goes in the reactor the first is a knee and I Direction directional dataflow you need how do you pronounce you English speaker all right I'm getting tired state flows in one direction down the tree of your applications component from the stateful parent component to child components so this is unidirectional the child components only receive the state data they need the second is that complex stateful apps can be broken down into just a few or maybe a single stateful component the rest of your component simply receive state from the parent as props and render the UI okay this principle of separating the state logic from your logic is one of the reacts key principles when it's used correctly it makes the design of complex stateful applications much easier to manage the my app component is stateful and renders the navbar component okay past the name property in its state down to the child component then show the name okay so let's move this we want to pass in the name or let's call it different so we don't get confused main crop or something and want to pass down this that state that name or how I want to do it however I'd like to do it is once that name will be this that state and now we can just stay here and like that and now inside of our navbar I don't know why they created a class component I really really really don't know but it is so now we have the props and we can access that crop using this that props that name prop or if you guessed it how I like to do it constant name prop whoops will be this that props and then we can just remove this and look at that how nice it is and it's passed down to the children now the nice part is that probably the next challenges we're going to change the state here in our parent component in the my app component and then it will automatically change the props for the navbar which will automatically update okay so palliative needs the name proper but hopefully this makes sense wise so they are different one is the prop and this is just from the statement that's why I wanted to have a different name for all righty to court two-thirds away so far do you have any questions or any comments in while I'm going to take a few seconds break you okay so apparently no questions all right I think this will be our longest name so far and it's also not an easy stream sorry fight rumble Optima difference between controlled and uncontrolled input element controlled are the ones well it says in the name right control are the ones which are changed right I am NOT under percent I don't want to say something dumb I think usually react you would use welcome import elements I don't know why you would use uncontrolled input elements oh yeah but for safety net look it up online I might just be wrong about it because I didn't use them yeah so control this managed by state from what I know that's what I would say also so yeah okay pass a callback as props finally something even nicer we can also pass in functions as props not only brains or arrays or anything in order to do that let's just complete this challenge and then we can see what happens here there are two components outlining the code editor my app get input and render input add the get input component the rendered method in my hand oops get input all right so get input here I think get in good barely this that props up input alright so now you can see something fun I still don't understand why they have classmates component they should just do functional component what happens here is that the value of the input will be cut will be coming from the props if you remember the the previous ones the value for the input came from the state but this class component this component doesn't have a state and also look at that the unchanged method comes from the props this bothers me so let me convert these two well let me comment this because they might need it and I'm going to paste it here and convert it to a functional component because we don't need all these and C and C here all right you a props equals the pets great error function how do you write another function yet a Strad people cars because okay so like this equals and they're all right okay all right so now we have a nice functional component because we don't need all these mumbo-jumbo look at this it's pretty simple it's just to save a functional component which takes in props and it has a handle change method which is called when the input is changed now pretty simple why do they have to create a class above it I don't know also this one and ER render input will be perhaps a bit will return this all right like that instead of this that props we have props and we can just get rid of this and we can get rid of this nonsense also and look at that we simplify that it looks much much much better so now you know that these are functional components and they don't handle state this is a state full component and handle state and it's eventlistener them all that all right so I guess what they want us to do is to pass into the get input functional component to passing the input to be piece that state that input value so let's get it from the state input value this that state like that and we're passing it here the in the input truck all right and we can also it will require an adult change property so we can say and they'll change with the dis that handle change so keep in mind this is the property name and they'll change and this that handle change is the method okay and I guess we also need to add in the render input which will require us to provide him that input inputs that all right I think that's what they want I don't know I haven't read this but now before passing here in the input something basically we have the wrapper which is my app which handles the state then it passes down the state to the children components one will update the state using the unchanged method so it will call the function given from the parent as a problem and the other one will update the input value Oh pray like that that's it did we did correctly I think did it make sense for you hopefully it did all righty lifecycle methods these are the fourth big thing in react in my opinion I mean the ones we learned so far so we have JSX we learned about props state and now life cycle methods okay use the lifecycle method component will mount react components has several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component these are called lifecycle methods or lifecycle hooks and you and allow you to catch components at certain points in time this can be before they are rendered before they updated before they receive props before they unmount and so on here's a list of some of the main lifecycle methods opponent will mouth did mount component should component update component did update and component will unmount the next several lessons we'll cover some of the basics use cases for these lifecycle methods okay note that the component will bow mount life set the method will be deprecated in the future version and removed yeah oh we don't use it anymore just in this challenge and you hear me yeah the component will mouth method is called before bender when a component is being mount to the down lock something in depth to the console with in component made mouth now the component will mount what the way I learned about this is that I declared all of them all of the lifecycle methods and I saw what are the orders of them appearing now in the real case scenario I only used a couple I think component it mount that's the most years because in component did mount you'll do something as synchronously so for example if you want to get data from from an API or something you want to get data from outside you'll do that inside the component in mount which will update your component so it will render with the default prop and all that and then the component deep mount will kick in it will do the request for you for the API and then you can get back the data and you can update your component again you will still see slight flickering of the component but yeah that's fine you can [Music] you can use some even Al's methods if an Al's conditions in the render see if you have the property line I think I went too far huh this time also let's just keep going and see what they teaches use the lifecycle method component did map okay so you can see that the back best practice with react is to place API calls or any calls to your server in the lifecycle method component did not this method is called after a component is mount to the dump and it calls to the set state here will trigger a rear-end during of your component when your call when you call innately in this method and set your state with the data that the API returns it will automatically trigger an update so yeah this is the nice thing with this set state is that it will update the components and it will rerender and also if you you saw that we use the state we had a number we incremented that number had to be put inside the Dom so behind-the-scenes react rear Enders the component it has a very clever way to do it in a fastest way possible with algorithms and stuff like that but I don't know much about that mm why would someone give an unlike when they are getting this for free [Laughter] okay rolls I like trolls someone told me that when I get this I'm popular so that's good okay well maybe they don't like the way I teach which is fine I'm not the best I'm still learning so it's fine okay to to to to to okay we talked about that now you can see here that they are trying to simulate an API call using the set state function so basically they want to set the state to active users whatever after 2.5 seconds this is something similar you would see when you do an API call right because you're sending a call to a server it might be running slower or something and it might take some time to get back the data and then it will update now I don't see it should go okay so we don't set the state here this is why we don't see let's set the state here so const active users we getting from this that state and we're passing here active users let's see you saw that right so you saw that for 2.5 seconds let's put this to 0 this will be much better you can see that it's zero one two boom so yeah this is what happens we have the default state to zero we call we do the API call in our component in month and then it behind-the-scenes it will get the data and it will set this it set it to the state all righty add event listeners okay the component amount method is also the best place to attach any attach any web designer you need to add specific functionality react provides a synthetic event system which wraps the native event system preventing browsers this means that the synthetic event system behaves exactly the same regardless of the user's browser even in the native the native events may behave different between different browser okay sorry I'm talking too much you're already been using some of these synthetic events handler such as unclick the act synthetic event system is great to use for most interactions you'll manage on Dom elements however if you want to attach an event handler to the document or window object you have to do this directly but touch an event the attach some words I just it's funny the way I said I mean hopefully they're finding Christmas another 9 but I'm hoping that you can understand so attach an event listener in the component it mount method for keydown events and have this events trigger the callback handle key press you can use document.addeventlistener which takes the event as the first argument and the callback as the second argument okay so let's do that be honest I didn't use this mind so this is something I'm learning also which is fine so on the document we want to add an event listener the key down and we want to attach this that handle key press okay and yeah this is actually a good example because whenever we're setting an event listener especially or something which is not the react component because I think they handled the unmounting the removing of the event listener but if we're adding manually we need to make sure that we're removing them it's a good practice to use this lifecycle method to do any clean up or react components before they are unmounted and destroyed removing eventlistener is an example of such clean up action now I'm not sure about adding and removing event listeners yeah and thinking about the real case scenario so you're adding a key down event and then you're on mounting this component and you shouldn't have that event right uhh you all right okay but they were saying yeah we are mounting the event so we're setting the event listener to keep down and we want to remove it after the component component is a month it right because we don't need it anymore if we don't remove it we might accept accidentally have some functionality we wouldn't want so that's the good way to use component will unmount remove eventlistener key down and I think the same arguments okay so you need to pass in what event and what function to I never understood this but probably because you can have multiple functions on the same event so basically this will remove another good good use case for the component will unmount is if you have a set timeout or something or set interval you're setting in your component somewhere set interval which will I don't know update the counter or something but after you unmount that counter make sure to clean the interval so it won't run the background these are good tips for for your code optimizer e renders with should calm opponent update okay this method is useful way to optimize performance for example default behavior is that your componentry renders when it receives new props even if the props haven't changed you can use should component update to prevent this by comparing the props this met the method returns must return a boolean value that tells react whether or not to update the component you can compare the current props lista props to the next props to determine if you need to update or not and return true or false I personally haven't used this that much but I can see the power in it especially as they say that if the property is not changing maybe you would you wouldn't need to change component they should component of the method is added to the component called only events only events okay currently this method returns true so only events with the renders every time we receive no props modified the methods of only events updates only if the value of its new props is even okay so no prob next perhaps modulus to is one not even is there so let's add to the update today updates birthday well next perhaps that value let's see only evens that yeah so next prop that value all right look at that so we are only updating when we clicking the second time which is nice because we only want to show the even numbers twenty-five percent left introducing inline Styles alright I'm going to go over quickly because this is pretty simple Shannon now I'm not getting okay so in our HTML if you remember although we haven't used this much we can set inline styles on the style property and we pass in a string with the color yellow font size 60 pixels so this is pretty much what we do in CSS now when we want to change the style on a JSX element we need to set the style attribute again but this time it should be an object with key value pairs so you can see we have the key color with the value of yellow the key font size with a value of 16 keep in mind a few changes on size is camel cased so every property here will be camel cased for example background color won't be background - color will be background and capital C dollar color okay MLK's alright let's add style property now as for the HTML if you remember we did the section of HTML CSS and all that we don't really add much style there inline styling usually we have a class and if you want to change the classes on the components or the tags you would if you want to change the styles you would change the classes right now inside JSX you might have something very simple so for example you might have a condition if it's true you want the text to be green if it's false you want to be red now in that case it should be fine to have inline styling although again if you could use classes for that might be better because who knows maybe the future instead of just changing the color you would change the font size also so then you need to add here another property another condition but if you only change the class name well that's much simpler okay we want the style to get the color of red let's align it exactly like an object as it is okay color red and we want the font size to be 72 hello Mohammed and you can see that these Styles applied and in lifestyles in react so what's different is it first name a certain okay okay all property values of K height with concise let's pair assume yeah this is a good one or property value units like height width on sites are assumed to be pixels unless otherwise specified you could get give p.m. by setting the street for year if you had you have a large set of styles you can assign a style object to a constant yeah that's a very good point so we can have a constant let's call it style and it will be an object and here we can [Music] let's color purple fontsize oops eight already 40 and we want a border to pixels solid purple and instead of having this we can just swipe this out with our style object we can say our style so it's much clearer that this is the property and this is the value which is our object okay the Styles variable should be an object ion's all right Oh okay so they put the styles up there that's the thing also all right so we put the styles up there good we're separate separating the conserves here I like that use advanced JavaScript in react render method of a advance what about it so we can put inside curly braces props stay comments Eiling whatever these are all common use cases to put JavaScript in gsx but they aren't the only way that you can utilize javascript code in your react component you can also write JavaScript directly in your render methods before the return statement without insert to keep inserting it inside the curly braces this is because it is not yet within the JavaScript gsx code when you want to use a variable later in GSX code inside the third statement you place the variable name yeah so basically we kind of did this I always like to have Const and then [Music] structuring and get the values out of the state of props indical provided the random method has an array con that contains 20 phrases to represent the answers found in the classic whatever the button click event is bound to the ask method so each time the button is clicked a random number would be generated and stored as the random indexing state online 52 delet delete the string change me and reassign the answer Const so you your code randomly access of different index of the possible answers arrey each time the component updates finally insert the answers comes in the side the p-type uh ayyy Oh the bottom about the ask method ask which will set the random index okay now in the answer we want to take these possible answers array and take the element at this that state that random index all right and then we want the answer to be passed inside the paragraph I guess [Music] x-value unchanged [Music] oh I see if these that set easily but so we need to ask something and then when we click this button it will have random answer okay good and we separated here we created a Const answer please that state at random index watch what I will do would also do a random index will be this that state and now we can just pass in the randomly but this is something I like to do is not new fire although it's a night I don't like the way they organize the code here's very nice all right render with an if-else condition we had this before we can have different returns depending on some condition we had that button that we toggle the display and we wanted to see the button in one scenario and see the button and the text in the other one oh that's not something new let's do it if this that state that display and we want to display this else let me format the code else we want to display I guess is but without the h1 basically what we had in that example I would have a better way to do this but but our donors say toggle display it works use the end and for a more concise conditioner this is what I would use now instead of doing even house and having to return keywords with all this mumbo-jumbo what you can do is use condition and and shortcut this is it's short sweet wait not sure what it's called but basically what happens this is a react this is sorry a JavaScript oh right we have a condition so in our case is that toggle display turn on sorry sir please that set the display this is our condition let me actually do it short-circuit yeah right so we have the condition beasts that state that display and of course we want to get the display out of this that state or now we can just say is that these players are display and if this is true we want to go and display our h1 now how this works is that if this is false then the code won't go to the right side because this is already false and the end and condition will return false if this is true it will go to check this part the right side and it will return it I think this is the and maybe not the best explanation but hopefully it makes sense so this is true this will be returned if this is false it will it won't return anything and now you can see how nicely we change from if-else with two returns and the button doing copy and paste twice into a simple I think we can also do this in online into a simple short-circuit like best all right use eternal expression for conditional rendering yeah so this is pretty much the same the only difference is that you can also have something happening if it's false or youth F condition if it's true we'll run this part if it's fault false will run this part the same if-else the nice part with this and the short-circuit we saw a bit earlier is that we can put it inside GSX you can put even else inside as far as I know I never put in and it's not allowed okay give me a couple of seconds to drink some water two hours and 20 minutes oh boy hope you guys find it useful okay the code editor has three constants defined within the check user age let's see check user aah button one button to button three mate you may enter you shall not pass okay they're called button one two and three each of these is assigned a simple GS axis pressure representing a button element okay first initialize the state of check user age with input and user age both set to the values of an empty string input and user age user registry thank you for doing this sir my pleasure thank you for watching once the component is rendering information to the page users should have a way to interact with it within the components return statement set up a ternary expression that implements the following logic when the page first loads render the submit button button one on the page and when a user enters their age and clicks the button render a different button based on the age if a user enters the number less than eighteen render button 8/3 if the users enter a number greater than or equal to 18 render button too okay this is quite interesting so I think the last one we could use we could start with the last button to em button three and reveling around much now let them let them say okay I'm tired all right so we have the user age on this a let's get it out from the state user age is that state and we can also get out the input Oh input see what's the nice thing with the structuring instead of doing something like yes let me do today so instead of doing something like this you can just do this it's the exact same thing and it's much much cleaner and you know what's happening and it's less fewer keystrokes alright now we need to see if the user a each user age is less than 18 we want to do something we want to show the button too otherwise we want to show button now what I like to do is to put them like this on separate lines so you can see clearly like this so we have the condition if it's true from this if it's all from this correctly put the side right oh no no as we are inside already all right so this should work now the thing is that we don't have the input though we need to add another condition input do we have it if we do then me to this condition basically it's a Turner inside the ternary a otherwise we show button one okay so you can see now do we have the input yes he is the user less than 18 but until it's not button 3 is that if we don't have the input then we can I guess let's leave it like that I wanted to do not input but it's fine so now we can pass in a tea you may enter if we don't have anything Oh sorry button three here if it's less than 18 button - if it's if the user enters a number less than 18 and render button 3 if we user renders and there's a button greater than 18 and the button but why can't okay let's see one you shall not less if we have 18 that's interesting user age less than oh I think I know a station this is a string so let's convert it and let's try now one you should not pass 18 that's interesting don't get button too for some reason when a number greater than or equal to 18 is entered into the input element and the button is clicked but the buttons in our text should read you may enter isn't it parts and oh well that yeah percent also but stay for some reason the number also works you might enter put its resonate and then and that's weird when a number is less than 18 and the button is click the buttons in our tax rate you shall not pass use our age it's set plane handle change so the handle change sets the input and the user age to an embassy the submit changes the user age now the submit we're December okay button one oh I see so we enter the number but now we see the button here and we don't have a user age so tu-tu-tu-tu-tu we need to check if we have the user age at the inn and the input right because now we enter a number here and we click Submit and then we get the button you may enter if we remove this then the handle change with kick in it will clean up the user age and now we see the button now if we have the 12 and click and submit you shall not pass okay did does it make sense so we don't need anything to do with the input value here we're checking the user age do we have the user age if we have we need to check if it's less than 80 and show these buttons if we don't have the user age then just throw the first button which needs to be submitted rakesh all right we are pretty pretty close render conditionally from props okay one important logic topic left to discuss that lets you combine any or all of this concept with another powerful rect feature props using props to conditional render so this very common okay in this challenge you'll set up a child component to make rendering decisions based on props you'll also use the ternary operator but you can see out several of the other concepts that were covered in the last challenges might be just as useful in this context okay oh boy why can they have either challenges at the end all right let's stretch a little bit and then we can go further I think this will be a three hour livestream which is a yeah okay the code editor has two components that are partially defined for you parent called game of chance and we also have a result which is a great component but it only deals with the props or why do we have a class component just for me to convert it to a functional component because look at this how simple it is now we get crops and we do something with the crops here all right first you need a simple expression that randomly returns a different value every time it is run you can use method at random this returns us a a number okay so for 50/50 odds use met that random bigger or equals to 0.5 the mystical artistically speaking this expression will return through 50% of the time on line 30 which is not there anymore because it changed it replace the comment with this expression okay I guess here met at random better or equal that 0.5 basically this will return a number from 0 to 1 1 in exclusive and if that number is greater or equal to 0.5 and this will be through otherwise will be false so that's a 50-50 chance okay a render the results component as a child of game of chance the result will be a child right and passed in expression as propped called 50/50 50/50 will get expression in the results component right the Turner expression to render the text you win or you lose based on the 50-50 property so props not 50/50 it is it's true we want to say you win otherwise we want to say you those oh look at it finally make sure the handle click method is correctly counting each turn so the user no hot knows how many times they've played this also serves to let the user know the component has actually updated in case they win or lose so we have the counter we have it find and we didn't change it so we need to change it let's at the state and we do found state that counter last one let's play you win you lose you win new in the lose you know to lose get lots of lasting and you're submitting the camper and that's fun next hopefully this makes sense if you have questions please let me know I might go a little faster sometimes so okay changing line CSS conditionally based on component state okay this is something which is used to change the style based on the earth state the code editor has a simple controlled into component with a styled border you want to start the border red if the user types more than 15 characters of text in the input at the condition to check for this and if the condition is valid set the input border style to 3 pixels solid red you can try it out by entering text in the input Oh II so we have the inputs eight which is empty so let's get it from the state uh input is that state we can remove this that state from here also to make it cleaner now we want to change the border to be either one pixels or three pixels depending on the size so let's store the size in the input from the input that way or we can be even fancier and do something like this wait and be equal to input all right and now for our we have the input style here which is applied so basically we need to change this let's do something fancy we're going to use a template string and here we can test in some conditions if length is less than 15 we want to say one pixel otherwise we want to say three pixels the ordinary so now you can see we did a little condition inside the template string let's see one three four five six thousand okay see how we have the outline so let's move outline oops okay that's you can see that it increases the right let's do 30 pizza okay so now you can see that if changes I guess we can do is less to be this condition we're and this is not that the fire but [Music] I said guess so we don't we keep the ball also well that's actually did these entire days so pixel value and we just passing pixel value like that so now it's much much organized we have the pixel value which is a condition we get the length we get the input all right maybe too much okay so we also want to see if it's red or black okay we know how easy this is a color beyond the length if is oh sorry less than 15 the color should be black or otherwise should be read now we can swap out this with that color okay let's see do to do to do to do yeah look at that now it's red with border okay Impa text should be start with the border of three pixels solid red if the input value in state is longer than 15 hmmm but that's what we're doing or dirtypixel solid red it's longer than 15 characters that's weird less black bigger is red one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen look is red there is another bug in ER because camp would it be easier to have the object for the condition yeah probably let's try that the input style will be length less than 15 it will be the subject otherwise it will be order yeah we are repeating this stuff black they say there are a lot of ways to do it so but the end I guess it depends on you oh right the pixel solid red but that is three pixel solid what's wrong with you that's weird you longer than fit I guess as an equal okay yeah so longer than all right use the rate map to dynamically render elements all right this is another fun one if we have a list of something to those or items or names or whatever and we want to loop over and create a gsx element for all of them [Music] we could use the map function the array the map function let's see inside the constructor Hades that state object and define two states user input that state user input which will be an empty string and to-do list which will be an empty array next delete the comment in the random method next to the items variable alright it's in its place map over the to do list IRA array item stored in the component state and dynamically render Li at the element ok so we have this that state that items or not items to the list and we wanted that map okay I just hate the list will be dis that stated alright now we're going to map over and for every to do we want to return an ally let me put it on life like that any side we can do to do so basically the value of our to-do list you may know that all saving child elements created by a mapping operation like this you need to be supplied with the unique key add to it don't worry this is the topic of the next all right so now I guess when we're pressing when you're submitting we're getting the input and we're setting to do all right so we can say car house this is this is the worst list of to do get click sorry press the button oh look at that so then why we have this plate Oh in the comments okay kids our house waitlist all right look at see now we have a list well another coordinated list with three Ally items okay let's go to the appellee last one if sibling elements a unique key attribute okay so if you're doing a map over and you're creating J sex elements make sure that you give them a key attribute so this way the react engine or well behind-the-scenes the act will know which element is which and what changes so it will perform faster if you don't set a key property you will see an error in the console.log it will work but you'll see the net okay let's do this again I guess a map we have pray more front-end frameworks and we want to return again allies okay say faf Oh it put them inside a bracket so we get the value and we need a key which will be something it should be unique so every yet which should be unique so let's see what we have unique a bubbler this time make sure yet it would set to an equal you okay unique that it could be the value in this case because they are unique sometimes you would use the index here from the array from the function provided to the map but people say this is the nut not the best idea to use the index because it changes the array so it might be the same index from different elements what is suggested usually is that you will well usually you have an array of objects and those objects will have an ID and that idea is unique you could use that ID inside that key if you don't have an ID what I do is I'm using the index which is fine I guess all right and probably the last one array filter okay so this is more of a javascript Challenge more than the react challenge this is why I suggest people to learn the JavaScript basics pretty well so for example the array method because then you're coming to react and you're going to see ok that filter that met what are these you will think that these are something specific to the act and they are not so learn your JavaScript basically act and understand it much better all right I guess they want us to do now some sort of UL with users online and render online let's see submit is an online and some art filtered array so you see only the users who are online to do this okay so we can use the can go over the these that state that users let's get the users out from this that state and then users online we can say users that filter we get the user and we're returning all the users that are user that online this will determine array which contains the users switch our life and then we can map over I guess and get the user and the key and we can return allies with the user inside and that key will be oops we'll be indexed let's change this okay something like that so now we're filtering over the array we're returning an array of only the users which are online and then we're mapping over and creating an ally and in the render online variable map over okay so basically I did everything here alright let's swap out this and we can go users online here and paste in the method because l i key index user by not working be sure to include a unique key built there so we have an air somewhere but functional return leaves this will close that users online users filter hmmm what's wrong and you spot the bug a lie lie I don't say we have a key with an index we have the random online come on the last month that's online okay users from this that state that's fine what's wrong with you should exist and render to the page okay let's see the console a habit here on the right minify director visit or the full message let's copy this everything okay networks if we're using user online here something wrong users that filter user and we're returning user dot online so that log users online okay so we have this then we can map over there and we're returning an ally with the user okay it's a lie should have a key of index and we can have your index all right and let's pass these around online now that's weird also that flower random we have an array children okay is loaves perfectly fine for me you but Allah is a filter user user online okay what's wrong with your boy okay hi Sina finally took a while with where we want to show the users here but we want to show the users username so that was it we were displaying an object yeah you're mapping over an object thank you I'm not sure when you said that probably you said that for a long time all right finally so good good good good good eventually he works I like to align everything look pretty all right so we're filtering all the users which are online and then we're mapping over and creating an allied with the user dot username as these are objects which have property I'm not sure why they had an error usually you won't get an error you will you we want to show an object inside JSX probably let's run the tests let's submit and go to them we have one more okay I thought that it's the last one render react on the server with rendered the string the render string method is provided react Dom server which is available here as a global object the method takes one argument which is select element use these two and wrap toasting okay yeah so this is used if you want to render your tab react app on your server so far you have been rendered exact components on the client normally this is what you will always do however there are some use cases where it makes sense to render a react component on the server since react is a Java Script view library and you can run JavaScript on the server with node this is possible in fact react provides a reactive string method you can use for this purpose there are two key reasons why rendering on the server may be used in a real world app first without doing this your react app would consist of relatively empty HTML file with a large bundle of JavaScript when initially loaded to the browser this may not be ideal for search engines 13:10 sounds funny I say there are trying to index the content of your pages so people can find you if you're under the initial HTML markup on the server and send this to the client the initial page load contains all the pages markup which can be crawled by search engines second this creates a faster initial page load experience because rendered HTML is smaller than the JavaScript code of the entire app react will still be able to recognize your app and manage it after the initial load okay so this is more well I've read it so basically you would want to render to string on your server to make your react app load faster on the page when it comes from the server and if you want search engines to crawl your website because as far as I know not all search engines will parse a website's JavaScript or we'll wait for the JavaScript to run what you want is to send the HTML markup already filled in with data like when you have the reactive working visually hopefully this makes sense so act dumb server via render string I think this method takes one argument which is the react element at the egg dump server and to sing these another function oh this is available and neither red does not raider this is available as a global object okay see I'm so tired after three hours oh boy we have the react dump server object which has the render to string method which needs the app and it needs to be clicked here in order to run apparently now app components render first thing oh I guess we need to do this and it's done finally oh boy this was a long session I'm so sorry if I rumbled too much I may have but finally oh boy look at me stretching I'm wondering who's online so please say something in the chat I want to see who's been so crazy to follow along with me so far [Laughter] all right in the next section we are going to learn radix which is that's it predictable state Fontaine ad hi enjoy right thank you for watching and being a part of this hopefully this livestream will be useful not only for you and for but for all the people who've been watching it react is fun I'm going to use react to create the project from the let's see after we're going to learn three ducks and react and redux this will be done today if you're watching live and we want to watch life for those of you watching the recording as usual find the playlist in the description and you'll be able to see all the videos separated and at the end we'll have five projects and I'm going to do all of the projects with react let's finish related redirects the aqueducts and projects in this session yeah sure [Laughter] [Applause] you're funny too I know you my you should do it okay I'll just pass the lights into you and you can do it I need to take a long nap okay I don't know what else to say just take care happy coding give a like if you didn't this video make the YouTube algorithm like it and push it in front of more people and I've seen to tomorrow's in the next life sleep which should be later today sometimes neither no web and then tomorrow we're going to start building the projects these will be something fun I like projects more than theory but well I said I'm going to cover the entire curriculum so that means the theory part also alright thanks for watching and I see you later

Channel: Florin Pop

Views: 4,219

Keywords: freecodecamp, learn programming, programming for beginners, live coding, live, live stream, programming tutorial, freecodecamp curriculum, florin pop, coding, coding for beginners, planning, coding tutorial, javascript, javascript tutorial, freecodecamp javascript, react, reactjs, react tutorial, reactjs tutorial, react for beginners, learn react

Id: e0tYvYjXWcM

Length: 185min 21sec (11121 seconds)

Published: Tue Mar 03 2020

Reddit Comments

[u/FlorinPop17]

The video starts at 00:01:05.