Intro to React - Build a Todo App

hello friends welcome to coding garden with CJ tonight's episode and intro to react we're gonna build a to-do app so let's get into it we are going to talk about what is react what is JSX we'll use the create react app command to create a react up and then we'll explore how reactor works by building a to-do app if you've seen my view Jas video I'm building it to do that we're gonna build the exact same app but just with react this time but since this is a live stream take it a step further and we're gonna take that simple to-do app and start to break it out into multiple components we're gonna pass props down and really explore what react is used for if you're watching live through our message in the chat and let's get right into this so first thing what is react so if you go to react Jas org you can see their website and it is a JavaScript library for building user interfaces so often when you hear react people are talking about like front-end frameworks like angular or Vijay s or ember react is kind of like in that category of things people often call react more of a library than a framework because it doesn't have a lot built in like some of these other frameworks it really is just the view layer it provides a way of managing state a provides a way of creating components but for other things like more complex state management you would use other libraries but it works in a similar way if you have used other front-end frameworks so then welcome to the stream yeah and it is by Facebook I don't know if that's anywhere on this page but Facebook created this library and yeah I'll read you what's on their home page it is declarative react makes it painless to create interactive UIs designs simple views for each state in your application and react will efficiently update and render just the right components when your data changes so when it talks about just the right components it's really talking about the virtual Dom so this is one of the things that react got really well-known for is the is using the virtual Dom in deciding how to update your UI and in doing this it makes your app a lot faster because it doesn't have to do as much work now I'm not going into too much like what the virtual Dom is or any of that kind of things we're really just gonna see it in action and build an app with it yeah let's rate these other ones so component based build encapsulated components that manage their own state then compose them to makes complex UIs so react has a built-in way of managing state much like other front-end frameworks like PJs or angular and yeah lastly learn once to write anywhere we don't make assumptions about the rest of your technology stack so you can develop new features in react without rewriting existing code cool and there are projects like react native where once you know the concepts in react you can use react native to build native mobile apps and the supporting on the live stream I came across proton which is a way of building native desktop apps with react so once you learn react you can build a different things with it let's just look at this simple component that they defined so all of your reactive components well not all of them for the most part and you'll see later on how it's different but when you create a component you typically extend react component you create a class so this is the es2015 class keyword if you're familiar with prototypical inheritance it's doing the same thing it's just syntactic sugar but you create a class for your component and a class has a render function essentially this is what react will use to decide what to display on the page so this render function says to return a div with the word hello and then there's you see an expression so expressions inside of JSX which is what we're looking at right now are typically surrounded by curly braces so what this says is display a div but display the value of name on props and we'll see when this thing actually gets rendered hello message refers to the component and then name which essentially looks like an HTML attribute right but this is actually a prop and it's a way of passing data to the component so by putting this attribute or propping the string Tayler down and then inside of the component we have access to that to show it on the page and that results in this over on the right-hand side and I am gonna talk about what JSX is ninety I guess I'll do that right now so we are we mentioned what react is it is a library for building user interfaces typically grouped in with other front-end frameworks though it might just be more of a library than a framework but now let's talk about JSX so what you're seeing right now is essentially HTML inside of your JavaScript and this is known as JSX and essentially it's a way of defining your UI without having to write the actual I guess virtual Dom code because this gets turned into this so built into react there's this function called create element and you tell it the tag of the element you're trying to create you can pass in believe this I'll figure out what that is later but you can pass various things down to the element the contents of the element and then any props that might you might get access to on that element oh sorry the last thing is the like the inner text of that element and you could create your react apps using lots of create element if we look at some more complex examples down here like this is a timer its render function is pretty simple let's see this one so this is a to-do app a little simpler than the one we're gonna build but you notice the render function here returns a div it has an h3 inside of it it has this to-do list component which was defined in here it has a form but if you were to write this without JSX it would look like this so essentially you have lots of react nested react to create elements and each of these is creating an element with a specific tag or a specific component and passing data down to it and the tree of all of these things essentially represents the virtual DOM and it would be very tedious to write all of our code like this which is why JSX was invented essentially we can write what looks like HTML which we know and love and that will ultimately get turned into those create element functions but I don't have to worry about that so that's that's that's JSX that's react let's let's start building yeah and I guess I'll show the the hello world example here too so to actually show something on the page you use react Dom render you pass in either react out create element or some JSX and then you tell it where you want to render this and in this case it's using Dom manipulation will drum Dom traversal to grab the element that has the ID root and this is going to be rendered on that element now there's a there's a bit involved to actually take this JSX and turn it into something that the browser can understand essentially has to be turned into those create element function calls and if you're using older browsers like the class keyboard has to be transpiled so we're gonna use a thing called create react app and this will generate an app for us with all of the web pack configuration to take our app defined with JSX and with newer JavaScript features and transpile them so that the browser can actually understand them so we're gonna use this now let's do it and if at any time you have questions in the chat please feel free to ask and I'm gonna use npx so MPX is a way of running a global command without actually installing it so npx create react app and then give it a name so it's called to do and if you have yarn installed on your system create react app automatically detects that and it uses yarn instead of NPM so I do have yarn so let's see what we got you'll see it's a folder has two folders inside of it public and source there is a package.json this package JSON you'll notice doesn't have very many dependencies because create react app is essentially hiding those things from you so there are dependencies on babel and some CSS preprocessors i believe and some other things but by using create react app all that's kind of hidden from you and you get this very simple view if you look in the public folder there is our index.html it's pretty basic it just has a div with ID root and this is where your react application is going to live and web pack is essentially going to inject all of the scripts that we write into this page for to make it actually work and if we look in the source directory this is where we will be writing our code index CAS is the entry point and this is where the our app actually gets added to the page so you'll notice it's using es2015 import statements so we're bringing in the react library we're bringing in react Dom web pack has a CSS loader pre-configured so we're bringing in a CSS file our component called app is defined in the file called app and we're importing that in here and the way JSX works is if you have a component on a variable you can essentially use it like a tag name so what we're saying is on this line grab the element that has ID root and render the app component on that element and let's take a look at the app component if we look at fjs first thing and you need to do this in every component that you create is import react if you're creating a component that uses a class you're gonna bring in component as well the web pack config has loaders for images so we're importing an SVG we're also importing a CSS file in here but because we imported that SVG it's actually being used as the source for an image in the render function but this is our app component the top-level element is a div it has a header with an image and an h1 inside of it and then below that just a paragraph tag so interesting things to note here class name so when you're using JSX instead of using the word class you have to use the word class name because we're inside of JavaScript if I said class like CSS class it wouldn't know the difference between this class like the JavaScript class and the CSS class so when you're when you want to use a class in JSX you have to use class name and later on I'll show for a like a label that has the four attribute instead of using four because that would get confused with the for loop you have to use HTML 4 but let's let's see what we get with just this basic app here so try to yarn start oh I have to CD into the directory that got generated and then do yarn start and this is our basic react app so this was the SVG that got loaded in a simple header these Styles are all defined in that CSS file and there's that paragraph tag there so really basic react up let's see so here's what I'm gonna do I'm actually gonna pull out all of the CSS or at least get rid of it just so we can have no styles at all and start from scratch so even in index dot CSS I guess we'll leave that no margin and a sans-serif font and for now I'm also gonna get rid of that logo and I am just gonna show an h1 that says hello coding garden cool so now if we look at the page it says hello coding garden let's look at our to-do list so we created the react app and if we if we decide to define any new components and if you look at app touch yes it is a component initially I'm gonna put all of our code inside of this one component and later on we're gonna start to break it out to separate components let's take a quick break take a sip of any beverage you have nearby today drinking apricot Lacroix okay so app is our top level component for now we're gonna put everything inside of here later on we are going to create our own components and pull stuff out so first thing show a message from State on the page so in react like in other front-end frameworks you separate the data from the view and that's essentially kind of how this this render function works all of your defeat is defined like on a JavaScript object and when the page renders it uses that data to display it in your in your render function but if that data ever changes the render function will run again and get the latest values that forget about get the latest value of the things that have changed so let's create some basic state on here a class has a constructor inside of that constructor you should call super this is just part of working with classes and the fact that this extends component super essentially calls the constructor of the component that we're extending extending is a way of getting all of the functionality defined in this class so component is provided by react we extend it so we get all of its functionality inside of the Constructors where you can define state this is where I'll say this dot state equals an object and this object here if you're familiar with view j/s this is like our data if you're familiar with angular one this is like our scope if you're familiar with angular five these are like properties on the component but essentially all of the state of our application is gonna go in this object so I'm just gonna create some basic state the message is going to be Hello coding garden so now that this is stored on state I want to use state inside of my render function and you do this like so so you do single curly braces you can say this dot state dot whatever property you want to access in this case message and still works the same way but now instead of hard-coding that it's actually pulling it from state and if I change it it should update cool so this is where all of the the data of our application is going to go and we'll have various ways of changing this data so that it updates the view so pretty basic stuff so far but let's get working on the to-do app so first thing we're gonna create a new to-do form so guess before I do this I'm gonna bring in some basic styles I have this style file I defined it's at HTTP colon slash slash easy - CSS now SH and basically it just has some default Styles like you notice the font size got a little bit bigger you notice there's a little bit of padding I won't have to worry about styles for now and we get some some basic styles ok so right below this h1 and actually let's make this like an h3 so it's a little smaller cool I'm going to create a form inside of that form I'm going to have an input sorry first I'll have a label this label is going to be for you to do and this is where we need HTML for so like I mentioned earlier because we're inside of JavaScript for tonight right right now if I use the word for it doesn't know it thinks I'm talking about a for loop and I don't want a for loop so I want to do HTML 4 so this label will say new to do and then below that I'll have an input and this ID will be new to do and the name will be new to do what we got basic form cool now you'll notice a lot of when you're working with just regular plain old HTML or like a template in PJs you don't have to put a closing tag on input because input is known as like a self closing tag so our images but in react it needs that self closing tag so if you don't put that self closing tag there it doesn't know that you're done using an element so in react everything must close even if it's a self closing tag cool so there's our basic form next we want to call a function when the form is submitted so on our elements we have access to events like on submit and here we can define a function that can be called so we'll say on submit form submitted I think I have to capitalize this on submit I don't know I might need to look it up soon Kaizen welcome to the stream ok so and this should be this stop form submitted now to define a function you simply put it as a method on the class so right above the render function I'm gonna define a method called form submitted we should get access to the event and I will just for now log the event let's see what happens open the dev tools we actually need a button to submit the form so right below the input let's create a button this will say add to do and the type of this button is going to be submit so that the submit function of the form is called now this might need to be a lowercase s if if the submit doesn't work then I know it needs to be a lowercase s okay so learn react click Add it worked well you'll notice the page refreshed and you notice the URL changed so just like in when you're working in regular plain old HTML and a form when it's submitted tries to send the data somewhere so to stop that from happening we need to prevent the default action so right here we can do event prevent default and then right below that we'll just log form submitted so now if I say learn and react and click add form submit it gets logged to the console so it's working cool call a function when the form is submitted oh right create a string property on our state to store the user input so when you're building apps pretty much with any front-end framework everything in your UI you want to represent on state so on our state Here I am going to have a property called new to do and this is essentially going to hold whatever the user is typing into that input box yeah so basically it starts off as an empty string because when the page first loads there's nothing in the info box but as the user starts typing we want to update that value under the hood so that way when we click Add to do we have the latest value of the input so how is that gonna work listen for when the input changes an update state so react doesn't have anything built-in like view or angular does to automatically update something under the hood we have to just handle this the old-fashioned way with events so on this input I'm gonna listen for the on change event and we'll say this dot new to do changed and so now I need a method called new to do changed this is going to get access to the event and we'll just log event dots target value and this should be the value of whatever was typed into the input let's see you'll notice every time the input changes it's getting logged the latest value hello world cool so now we want to take this value and update our state so we want to set new to do to be whatever the the value was from the form cool hey Bob welcome to the string cool okay so to do that there is a built in way called set state so we say this got set state you pass in an object with the properties that you're going to be updating so in this case I want to update new to do to be event target value now this is not going to work and we'll see why in a second all right so type a letter we get an error cannot read property set state of undefined so if we really try to analyze this error set state is it's trying to be called from this so what this is saying is this is undefined so why is that now because we have directly bound this event listener the this here is not the this of our component so notice like we were when we're accessing the methods or when we're accessing something from state we can do just this dot and this refers to the instance of the component now there are a few different ways to get around this one way is to use a fat arrow function in line so you can just say there will be a function that takes in the event and then we want to pass in event there now the reason this works is because a fat arrow function does not bind the value of this it has a lexical list meaning when we define this function here when the gets invoked this this this is going to be the components this because I used a fetter so this this should work learn react and now instead of just logging form submitted let's log this state new to do and actually we're gonna have to do the exact same thing because you'll notice we have another event listener here so in order for the this to be the this we want it to be inside of here we got to do a similar thing so we'll do event fat arrow this stop form submitted invokes with the event okay let's see this work so learn react add the to do get logs to the console that's great so this is this is one way to handle it because we're using the fact that fat arrows have lexical lists meaning when they invoke this function the this in here or in here is gonna be the dis of the component hmm now the other way you'll see this handled is by binding the function and that works like this let's do it for form submitted mm-hmm so if I just set that as form submitted I can bind it in line so I can say that bind this because remember inside of this render function this reference the instance of the component I'm going to do a whole episode on this I just have to in so cousin in the chat is saying the event listener changes the context I believe there is no context at all and and that's that's the way react is working because I believe these are synthetic events because in real Dom manipulation the this of this function would be the element that it was called on but I believe in react there it's not bound to anything so this is one way to handle it bind the viss of this function to be this which is the instance and notice we're not invoking the function we're just binding to this so later on when it is invoked it will be either correctness so this should also worked learn react it works cool one thing you'll see people do though is define that on there as it is and in your constructor you bind all of your methods so you might say this dot form submitted equals this stop form submitted define this so when an instance is created every single well this function will audit will already be bound to the miss of the instance so later on when it's called it was it had already been bound three different ways to do this my preferred way is probably to use the fat arrow because then you're not talking about this or having to worry about buying this or anything like that but this is one reason I keep using or this okay this is one reason why react isn't totally friendly to total JavaScript beginners because this itself is a lot to take in and a lot to learn to really know what it is and what's happening with it and to use react effectively you kind of have to know what that is but you can just use these federer's and then we don't have to worry about doing all that so we'll do that mm-hmm cool but I guess what I was mentioning is technically we could have bound new to do change we could have bound form submitted to this up here and then down here we could have just used them as is and they were already bound to do this cool so we have listened for when the input changes and updated state and we know that we updated state because new to do changed is setting the state right and then when the form is submitted this value here is the latest value because every time it changed we updated state and then when the form was submitted we showed the latest value from state so cool log the user input when the form is submitted we're doing that and notice we're accessing it from state so inside of any of your methods this as long as it's bound correctly as long as the method is bound correctly this will refer to the instance and you have access to state you'll have access to props which we'll talk about later and so we can actually use that and that's that inside of the function cool all right now we will create an array property on our state to store the two dues so all of the data of our application goes in state so the array of to dues is gonna go in here as well to dues is an empty array to begin with and okay so now it's on our state now to add the to do to the array let's take a quick break mm-hmm yeah and just to reiterate cousins question in the chat so the event listener changes the context the event listener doesn't set any context if we were to log this without using a fat arrow or without binding it this is undefined okay so let's add that to do to the array now we're gonna use that state but we're gonna do something interesting here we're gonna say set state to Do's and this is going to be equal to this state to Do's but we want it to make a copy of it we don't want to just push into that array so for this I'm gonna use the spread operator and what this does is it says take all of the values that are currently in the array put them in this array and then after that we will define the new to do that we're pushing into the array and so the title here is going to be this state new to do and done will be false now this is how we have to do it let's let's see what happens if we try to just push into the array well let's do this because it will work we can see them on the page and then let's try it the wrong way and see what happens so essentially what we're doing here is we're taking all of the values that are already introduced so so let's actually predefined it with some values so like title here is learn react done is false that's not right my editor does not like JSX at all I probably have to install something another title will be learn JSX done is false so now our initial state has a few things inside of it so this is basically saying take those two things that are in that array put them in this new array that we're defining here with the brackets and at the end of the array put this new object that has a title and a done property cool and we'll stop logging now okay show the to do's in a list let's do that now so below the form I'm gonna have an unordered list and the thing that we want to have multiple of is that array of two dues so here I'm gonna use curly braces and let's say this state dot two dues dot map so essentially we're going to map this array of two dues from an array of objects to an array of JSX so we're gonna have JSX for every to-do item in the to-do array so we're gonna map this we get each to do and this is going to return just a nice little list item and inside of there we'll put to do that title so when the page renders we're gonna grab that array of two dues from state we're gonna map over it and for every element in that array we're gonna show a list item with the title so when the page renders we see the two existing items in the array there cool you'll notice this error we're getting each child in an array or iterator should have a unique key prop this is very similar to view J s we're react needs to be able to differentiate between the list items so on later updates it doesn't get confused and we can simply just set a key here let's set this to to do that title we're not in view so we don't need the cold name sorry cool encounter two children with the same key to do oh here's the other thing if you want to set a value on an attribute you need to use curly braces not quotes because before when I used quotes it was the actual string to do title so everything had the same key now this is saying take the title from the to do which is unique because we have learn react and learn JSX and that will be the key of the list item cool no errors so now if we try to learn props and add it it gets added to the array because of this set state right here this is essentially saying take everything in the array and put it into this new array with the new item at the end of it what what if though what if we just said this that state dot to do stop push nothing will happen we could say learn and props add we could do that all day long and nothing will happen this might work so like we pushed into the array and then we say this dot sets state and we say to dues is this state that to dues maybe this org I don't know if it does it shouldn't or we don't want to do it this way yeah so this technically works but one of the the fundamental things about react is you should never mutate or modify state every time we want to update state we're actually creating a new state so we don't want to do this we want to do this because well this creates a new array with the existing values inside of it so react knows that it's a new array and it knows that it should update the Dom Kaiser says he sees there's a service worker is there a manifest for PW a not sure let's see what this actually does in production we register a service worker to serve assets from local cash this lets the app load faster on subsequent visits in production and gives its offline capabilities cool curious where he gets the cash room if I'd actually get generated in the webpack build right and I guess this is the other thing I haven't mentioned about react it is it it very much takes or tries to take a functional approach in that our render function is a pure function it takes in state and returns a virtual Dom tree and every time you give it the same state you're gonna get back this is the same virtual Dom tree but if that state never changes you're gonna get back a new virtual Dom tree so it's a it's a pure function and there's another way we could do this so here's what you do we could say constitutes equals this dot state got two dues slice slice is a built-in function to an array in JavaScript that essentially will make a copy of it if you don't give any parameters so this would create a copy of the array and then we could push into that copy this object like so and then we could just set state to be two dues and now that reacts state has a new array it's happy with that so we could use that add that works using the spread operator is my preferred way because it looks fancy and it may be a little bit cleaner you don't have multiple variables the other way was creating a variable and then pushing into the array so more stuff was happening Kaizen is saying save to desktop did you see that in here somewhere you mean in terms of like where oh maybe it's in the public yep this must be the manifest for the serviceworker it tells it where to start and it probably traverses the the files that it pulls in like the JavaScript files and CSS files cool yeah so we're putting it into the array and it's showing up on the page do I have it in my to-do list no I know so one thing that's not happening right now is we're not clearing the form so if I say learn props and add it the form doesn't clear out so let's let's attempt to clear the form now when we are pushing into the array is when we want to clear the form so we could set state to be an empty string so now whenever we push into the array we're also setting the state to be empty string however in our render function we're not telling it what the value should be so even though I'm doing this this won't be reflected in the UI just yet so I'll do learn props and enter it's still there because we need to tell the virtual Dom render function that the input should have take its value from state so on this input I'm going to say value is this state that new to do and now every time the page renders its getting its value from state which we're updating every time so it's there and then when we clear it out the latest value is empty so it's not there can you upload it to github I would like to use as a reference absolutely yeah I believe this is a this is a good stopping point because we have like a basic add to do to the page and now we're gonna get into marking things as done changing some styles all that good stuff so yeah I'll go ahead and commit and push up anybody else have any other questions thoughts comments it's there oh yeah I'll share this oh did it create a git ignore cool I did okay I thought it might have committed my note modules there you go cool let's keep on keep it on so right now we got a basic to-do app all of our state all of our data in our UI is represented in state we've got some event listeners for when the form is submitted when the input is changing and we're updating state to reflect the latest we're we're updating States so that on the page it's reflected in the list here cool alright check done on us to do to mark it as done so on every list item instead of just showing the roughness and curly braces instead of just showing the list item I'm also going to show a checkbox so right here I'll have an input type of checkbox so those checkboxes are there let's change the style is a bit just so it's in line yeah cuz those Styles that I brought in they have display:block with 100% so if I do display in line and width is auto it'll show up on the same line so let's do that I'm just gonna add this to my index dot CSS I'm gonna say input with type of checkbox we'll have that style cool so now the checkbox is show up there awesome so just like when we were listening for changes in the input box here we also need to listen for changes when the box is checked so let's do this on the input will have an von change and this will take in the event and we'll call a method this dot toggle to do done and we'll pass in the event and now we need this method so on here we're going to have toggle to do done this will take in the event we're gonna have to pass in some other stuff but for now I just want to see what they give us access to we most likely will have access to event target value and value might be true or false we're also gonna need access to which to do we actually click this on but let's just see what we get for now so when this change we get that we can look at the target in kaizen earlier this is what I was mentioning so the event itself is a synthetic event so it's not an actual Dom event but we have target and do we have a value let's just try to log event target value on on it's always on that's peculiar I wonder if we have access to checked because that is a an HTML attribute okay there we go so checked is either true or false that's the one we want specifically for a checkbox so when it's checked it's true when it's unchecked it's false awesome so now we have if the checkbox is checked or not but we also need to know which to do we actually want to update let's take a quick stretch cool so this map here is a JavaScript map so inside of a map we also have access to the index so we are going to use that index and pass it in to this function so that we know which to do to change the done property on okay so first thing we'll do is we need to make a copy of the to do's and I'm just gonna do it like so so I'm gonna say to do's is an array with this dot state dot - duze okay so we made a copy and now we need to find that to do in here and update its property and we'll also need to make a copy of that to do so here's what we'll do we'll say to do is going to be to do that find and we're going to get access to the to do oh no sorry we have we have the index so next we can just say to do is going to be - duze at the index and I don't want to just do to do dot done equals event target checked because this essentially would be mutating state this right here does a shallow copy of the array meaning it just takes the existing to do objects and puts them in a new array but in order for RAC to see the changes I can't just change the property I need to make a copy of that to do and then change the property on it so here's what I'm gonna do I'm gonna say to do is to do zat index well actually to do is going to be an object with the properties from to do is that index so this will make a shallow copy of that object put it in this variable and then when we overwrite the variable we're overriding it on a new object we are not modifying the existing object and then when we reset the array that to do was inside of that array so it should see the latest value cool I think I have do I have react dev tools let me install it so there are there's a thing called reactive tools I'm curious if it will show me the value the values on state it's not why not click away dues well it's happening let's make sure that this is actually working so what's the look let's just log not that log to Do's let's look at our console console weird okay so when we check it true and if we look at our to Do's done is false and done as false did i specify oh I know why this is creating an object I popped a copy of the object but it's not inside of the array so we essentially need to replace it inside of the array actually what's the best way to do this because yeah here's what I'm gonna do I'm gonna say to dues at that index is going to be this copy and then we're gonna update the value at that at that index this might not be the best way to do it but ultimately what we're doing is we're creating a copy of the array we're creating a copy of that specific object and actually yeah creating a copy of that object inside of that array and then updating the property inside of that array so now it should have the latest value so if we check this we're logging true and then the first one should have done of true cool and if we look at the react dev tools our array is there and the first one has a value of true awesome so that's working let's add some comments here so copy V array copy the to do and this is update done property on copy to do and again the reason we're copying this is because we don't want a mutate state we want to give react a copy of state with the latest updates so that it knows how to update the page cool so that's toggling it what else do I have in the to do show a line through the text so now I want to bind some style properties so let's do this on the actual title on the the text of the to do I'm going to put this in a span and on here I want to have a style binding and styles can just be a I guess they can be an object but I could I could I could bind it to a string let's let's try to do it as an object or quick so the property that I want to set is text decoration and the value is going to be so if to do dot done the value is going to be line through otherwise inherit so it gets the the default value let's see what happens and that works and if we look at the actual Dom elements see the list item you see the span and you'll notice that style binding actually got turned into just an inline style now this syntax is a little weird because the outer curly braces are basically saying the thing inside of this is an expression the inner curly braces are literally an object so we are we're defining an object that has a text decoration property and the value of that property varies and we're using just an inline turn ternary to say if done is true then the value should be lined through and if done is false then the value should be inherent which just means no line through it cool curious if we can do a class binding in a similar way let's let's try to do that real quick I might have to look it up but let's say instead we have a done class with a text decoration of line through and now we want to apply this done class if to do that done let's just comment that out for now but if I were to create a span and inside of there I do to do dot title and I want to bind a class maybe it works the same way can we say apply the done class if to do done oh yeah and I can't use class I have to say class name okay that does not work I may let's see react bind class oh so a bind class name dynamic class name I may actually have to just do a string with a ternary inside of that yeah I think that's what I got to do so basically class name should be a string and if to do dot done then the class is done otherwise no class at all so now if I check it it gets the done class and you'll notice on this element it has a class of done and on this element it has no class properties at all hey emmi welcome to the stream cool I've done really good so far not talking about how much work this is compared to view gist but this is a lot of work and a lot of new concepts that as a beginner you would have to learn cool yeah let's let's just use the class winding I'll leave this as a comment so you can see how we actually would buy and find a styles if you want to the other interesting thing about this one right here is you could define this style object in a javascript file that exports an object and then just put the name of that object here and it would use those those Styles on the element cool so we are now showing a line through the to-do text when we check done cool next let's add a button to remove the to do so right below the span we're gonna add a button this is gonna say remove and on click we are going to call a function we get in but we won't need the event in this case we're just gonna say this dot remove to do and we'll pass in the index cool now we need a remove to do function on our component so I'll add that here remove to do it takes in the index and then we got to do some similar things so we could first copy the array and then pull out that specific index so I could do a splice of that index and one and I'd have to do this I think on the next line because we'll just displace modify the array or return a new array let's see let's look it up real quick I think it modifies the array but if you created a new array then that would essentially do the the work of copying the array yeah so changes the contents of an array so we will first copy it and then we'll say - duze splice the index and one of them so now we have a new array that is missing that specific index and then we update state to be that array so if we click remove it disappears yay cool so that's removing again one of the key concepts here is when we're updating state we have to make copies of things you can't just directly update them okay so we have remove it to do next thing add a button to mark all to dues as done let's do that so in our render function let's do it right below the form we're gonna create a button we're gonna say all done and we'll have a on click here we'll say element so for this I'm actually gonna use a map so let's say constitutes is gonna be this state dot - dues that map so map is gonna give us a new array we get the to do we want to return a copy of the to do so if I do spread the to do that's gonna take all of its properties and put it on this object and I want done to be true let's take a quick stretch cool so some weird syntax happening here but basically map is gonna create a new array we're mapping over to do's and for every to do we're gonna create a new object with all of the existing properties but done is going to be set to true now in this example it's somewhat contrived to just use the spread operator because I could say title is to do dot title because that's the that's the only other property on the to do and then the done property will always be true let's just do this and then right after that I'll do a set state we're gonna set state we're going to set B to deuce on the state B Joe welcome to the chat yeah so that doesn't work because you got to do this stats that state okay all done they all get marked and in checked is done but notice the check box isn't getting checked we actually need to set the the checked property on the element to also look at state so on the check box we're gonna say checked equals to do gun and so now that should listen to when the done property is true cool and if we add some other things learn props learn components we can check these we can mark all done we can uncheck these we can remove them all is right with the world there we go we're we yet add a button to mark all twos is done cool so this this just our basic to do a quiff react there's a lot going on here kind of a lot of new concepts if you haven't really worked with some of these features in JavaScript like spreading or yeah spreading an object spreading an array binding or using a fat arrow function we also have the class keyword here all this stuff is not react all this is JavaScript and we're just using it with react yeah I guess one thing to mention is this right here would be the same thing as object Donna sign this is built into JavaScript but in I think es5 it was introduced but in es2015 they introduced the spread operator so it's a little bit shorter hand way of doing object design okay let's review this app what did we build and then we're gonna start to break it down into smaller components and pass props and stuff like that okay so we have one component it's called app and it has some estate on it it has a message this is just what we display at the top of the page it has a new to do property this represents the current value in the form it has a - duze property this is an array of all of the - dues every to do has a title and a done property we have a few events new to do change is called whenever the input value on the forum changes so when it changes we update the state we set new to-do to be the latest value that the user typed in we also have a form submitted function we get access to the event and we can prevent default just like we would in like vanilla JavaScript and then we set state here one thing we do is we set new to-do to be empty this will clear out the form and then we update to do is to be a new array with all of the existing values introduced and then our new to do that we're creating at the end of that array we have toggle to do done this creates a copy of the array and then creates a copy of that specific to do at that index inside of that array and then updates the done property at that index to be marked is true one another way to write this would be to just say so create the copy but then the done property is going to be event target checked instead of updating it after the fact this should still work the same way because basically the the spread will take all of the existing properties add them to the object and then after that's done if there was already a done property it's gonna be overwritten with with this value okay let's see if this works so that's this is the function that gets called when we just do a oh I need a comma so that still works but now instead of updating the property afterwards we're spreading it and setting the property on the object cool and remove to do will copy the array and then splice modifies that array so after we've made the copy we pull out that specific index and then update state to be this new array that's missing that one to do at that index and then all done will map over to dues to create a new array and then for every to do inside of that array we're gonna create a new to do with all of its properties but done is going to be true and I showed can also do that dot that to do because this would spread all of the properties and you would use this if you're copying like a really big object with lots of properties are you just super simple it only has two properties so it's easy enough to just say title but in other apps you're working in you probably want to use the spread operator cool and then our view is just tapping into all those functions and States so we display the message up at the top we have our form which has the on submit event we're using a fat arrow here so we don't have to bind this that way when these functions are called inside of those functions this is the same this in the render function it's the this of the instance we then have an input that on change event is bound to that function so any time the user in terms of value that event fires in an update state and we're also setting the value of this input to be the value on state so every time the input value changes that function gets called it gets updated on state when you update state the rent function will run again and when the render function runs again value will have the latest value because we set state before it was rendered we then have the button which will mark everything is done you click that it creates a copy of the array and then a copy of every object setting done to true we're then using just a plain old JavaScript map of our array from state to create new list items for everything from inside of that state your elements in a map always need a key so react knows how to keep track of them in the virtual Dom this should be unique technically if I created 2 - duze with the same title this would break so it's important if you typically when you're doing this it's like data from an API or something like that so your key can be a unique ID every to do has an input box and we have a an event on it for when the input box check changes and when that happens we call toggle to done pass in the index of the to do we want to set as done we find that to do update a create a copy and update its property and we're also binding the checked value to be the done property so wouldn't we set state to be done this rear Enders and it shows up as checked cool and then I'm showing two different ways to bind to either styles or classes one way is to bind style using an object the keys are the CSS properties camel cased the values are the values of those CSS properties and then for class name we're just setting that to a string so we use a ternary just to say if it's done the string should be done which is the class called done if it's not done then don't set any class at all and this is what puts the line through the text and then lastly we have our remove button which just passes in the index of the to do and that's how we pull it out via ray that is an app alright nextpart what are components what are props we're gonna start to break this thing down any questions that's comments in the chat before I talk about this next thing and actually I'll push up the code what did we add we added give me add the line three yeah we did okay we added the line through we add move and all done cool so that latest code is up on github if you want it or need it okay let's talk about components if you've used other front-end frameworks you're probably already familiar with the concept of components but essentially we want to break down our UI into smaller components so right now everything is in just one app component but we can actually break this up into smaller pieces so for example what we're gonna do is we're gonna take this form here and put it to put it in its own component we're gonna take the list put it in its own component we're gonna take each list item put it in its own component and the ID of components is they're totally reusable really the only component we're gonna be reusing is list item because there are multiple of them but on a lot of websites you have things that are repeated in a lot of different places so you can define that component code and reuse it in multiple places if we're breaking down this into components you might have like the navbar the list items you might have info each one of these is like an info component maybe each one of these is an example component that has a title a description a code sample and a render on the right-hand side but basically you could define that component and then pass data down to it to change how it looks so here we're talking about seeing a simple component here we're talking about a stateful component here we're talking about and application but all three of them have the same data for those things question from P Joe would love to hear your opinions on use cases for react versus view like when one is better suited than the other oh and then Kaizen the next question is can one separate the files and what's the usual standard operating procedure yeah so that's basically what I'm about to do instead of having this one big component I'm gonna pull it out into like three separate files but on P Jo's question I think it's all a matter of preference I kind of hinted at that like I don't like this because we have to do so much work one one thing about it though is if you really want to get good at JavaScript and just like yes 2015 es snacks like features of JavaScript react is going to make you do that because you have to know those things to be able to use it you also have to know a lot about and use properly like binding of this and that's kind of one reason why I don't like it like I like Vijay s because it does a lot for you and doesn't require as much overhead like I could build this same app with probably half as much code because I don't have to manually set up all these event listeners yeah but at the same time it really takes link how you think about apps because for someone that just knows JavaScript this can make a lot of sense because like you you have just like a basic map and you're just using that inside of your render function everything is very idiomatic like it is what it is and it does what it says it does whereas in view j/s there's a lot of stuff that it does for you and you kind of have to know about that in order to take advantage of it and if you're totally new to view j/s it's gonna take some learning to figure out what it's doing for you okay my connection just went down for a second and yeah I think that's the thing like I view J yes a year ago didn't have asthma as many plugins or as much of an ecosystem but UJS has a huge ecosystem now a huge community behind it if you're trying to find like an existing plug-in or component you can probably already find it for Vijay s um and yeah I haven't I haven't written react up and probably like two months and this is making me not want to do react like all these all these jobs I'm applying to like a lot of them are react it's good for what it was and it's like a simple and small library but I really I really do like Vijay s okay yeah it's very much in pto saying it's very much brand name Britta brand right now I would all like honestly if you're trying to convince them even just show them a simple to-do app like this is a to-do app with react this is a to-do app using like the basic features of the framework with Vijay s and also peejoe it has anyone at your company used angular one or familiar are they familiar with anchor angular one because for me I did angular one for like close to three years and view Jas is so similar in how you set up the template and similar in how the directives are so if you're used to that it's really really easy to transition into view jeaious yeah yeah so peter says he started with react it was like this is so much cooler than jQuery and it is like I would I would do this any day over just plain old Dom manipulation but if I had to choose between view Jas and react I would probably choose for you but that's just my opinion based on my experience and based on my preferences you might be different let's take a quick break and then we'll start to break this thing up into multiple files Shalom says they're still in a bootcamp what are you learning there mm-hmm are you doing like full-stack JavaScript or just running cool let's get into this all right so I talked about like what components are let's actually create one so here's what I want to do I want to take this form right here I want to pull it out and I want to be able to say new to do form just like that so I want to essentially take what was there put it inside of this component put that in a separate file so let's do that so in my source folder I'm going to create a new file and they call this new to-do form is and I'm actually going to define this as a stateless functional component because all of my state I'm gonna have living at the top-level inside of this component and this to do for my create is just gonna get well it doesn't need any date it but it does need a function it needs a function so that it can call it whenever the form is submitted but I'm just gonna pass that down so for this there's no need to extend component I'm just gonna have basically just a wrench a render function so let's say Const new to-do form is a render function that gets props and then returns that and one thing you have to do even if it is just a simple component like this you still have to import react so up at the top here I'm going to import react we don't need component though so this is a super basic component it takes in props and then returns the form like this and this is just JavaScript so we're going to export the form so we're gonna say export default new to do before cool so right now a few things are broken actually we'll just update so anywhere on here where we were trying to access this now we're gonna access them from props so props dot form submitted props dot in you to do changed and props dot new to do will import this and then we'll talk about what are props so in this file I now need to import new to do form from new to do form cool so just a plain old JavaScript export and import now I have access to the form inside of here and now it should just render on the page right here I might get some errors about like props dot whatever is not defined but yeah still ringers so looks exactly the same but now this part right here is actually defined in a separate file now let's talk about props so you'll notice that this accepts the props and then uses them props are essentially a way to pass data down to a component so the things I need inside of this component are form submitted new to do changed and new to do so here I'm gonna pass those down so I'm gonna say form submitted will be this stop form submitted not that and new to do changed we'll be new to view changed this dot and let's just format this a little bit so it's a little easier to read so I'm submitted new to do change and then we also need access to new to do so new to do it's gonna be this state new okay so this component is coming from this import here so we're pulling that in from the other file but we need to pass things down to it so these they look like HTML attributes but these are these are called props and basically what we're saying is the prop inside of this component called new to do is going to be equal to state that need to do the prop form submitted is going to be equal to this stop form submitted which is an actual function in here and new to do change is going to be set equal to needs to do change which is a function in here and by setting these props they get passed down and then we actually have access to them here in this component and so just like that it should work in the same way like if I'm doing Oh No oh okay here here's here's where we probably do want to bind this you'll notice now that we're passing these down as props in here there is no this because this itself is a federal function so here's what we gonna do we're actually we are going to pass down and just use the the props directly so we just we just use those directly but when we pass them down we are going to bind them to this so that's just data that should be fine but here we're gonna say bind to this and here we're gonna say bind to this and essentially what we're doing is we're saying whenever this function is invoked form submitted inside of here this will be equal to app component this so that set state actually exists because we want to call set state on app there is no set state on this component because it's super basic so now we're passing down those functions but they're bound so they should work now so what type of letter it works we could still edit cool let's catch up on the chat so Shalom says he's doing react in bootcamp yeah do some node back in stuff definitely in like I think that's the great thing about nodejs is like once you know job the JavaScript language it's just a matter of learning the server-side concepts you can use the language you already know definitely cool so that added it to the list oh and this is the era I was talking about earlier like now both of these have the same key because they have the same title but cool easy enough we now have new to-do form defined in a separate file great so we talked about prop that's basically a way to pass down functions or data to a child component so we created the form component and we passed down the add to do function which still seems to work now let's create a to-do list component so basically all of this the entire unordered list this is going to go in a component called to-do list cool so now I need a new file called to-do lists j/s we're going to import react from react we're going to define to-do list this is just going to be a simple render function that returns this and then we'll export default to-do lists cool now notice where we have a lot of access to this here we don't want that so we want to use props instead so instead of this dot state - dues we'll do props dot - dues instead of this toggle - you done we'll do props that toggle to do done instead of this not removed to do we'll do props not remove to do and should be all we need so now we need to do is that's our first prop so here we're gonna say - dues is going to be this state - dues and then the next thing we need our toggle to do done and that's going to be this toggle to do done and we need to bind it cool we also need remove to do and we need to bind it now one thing I did a little bit differently so you'll notice on the on the new to-do form I'm just using those functions directly and that's because the only thing we need access to is the event and by just setting the function there it's automatically gonna pass the event down however for these two i need the index also so by defining my own little fat arrow function we can bind them in the parent but now when we invoke them we can actually pass in an extra parameter because we need more than just the event cool so we have remove to do and I think that's all we need for this component let's see if it works a to-do list is not defined now we have to actually import this in so just like we imported the form we're going to import to-do list from to-do list what whoa and it works so we are learning components we are learning props that still works I can still check them all done I can still uncheck them remove them everything seems to work cool alright last thing is now we're gonna go one level deeper and inside of this to-do list we're gonna create a to-do item so let's do this the this list item here is going to be we're gonna call it list item or we'll call it to-do item cool we will import to-do item from to-do item and then we need to define that vidyou item gotta do that I was just gonna copy our basic stuff here that goes there this is called to-do item this just returns that and now notice this we don't have access to to do to to do so we're gonna have to pass that down as a prop so we're gonna say well actually well we'll use we'll define the key in the parent so that we don't need that there but where we do access to the to do we have to say props dot to do and props taught to do and props not to do and actually this is a perfect use case for D structuring and we can do that right here so I can say constitu is gonna be props and then we just wrap that and now everywhere I have props dot to do can just be to do because we pulled it out of props but it still has to be on props cool so now in the to-do list [Music] Oh No Oh No okay the to-do item still needs a key so actually let me do this let's define this on this line cool so it still needs a key actually we'll bind that to index because we're not doing any reordering or anything like that so key is there we need the to do so to do is gonna be equal to to do but we also need toggle done and remove to do so we gotta pass those down as well so toggled nope nope what just happened toggle done is dropped stop toggle done and then we also need remove to do which is going to be prop stop remove to do so now who are actually passing these things down several layers deep where we're taking well let's let's make sure index is not fine oh we need index also so keas index and then we need to pass down index because we need the index when we're invoking these functions so now we're gonna grab this from props as well okay to do is assigned a value but never used where oh oh accidentally accidentally undid my prop set to do thing sorry other components that we defined so first we have new to do form and wait I think my stream just cut out start over just a little face let's take a quick break first we're almost done this is fun okay so top level component all of our state is defined here all of our functions that modify state are defined here and then we're just passing them down to dumb components I haven't called them that yet but these are dumb components they take in props and Kurt returned a render function taking props returned a render function so new to-do form will take in new to dues to be displayed in the form form submitted to be called when the button is pressed and new to do changed every time the user inputs in the form but we're passing these things down and then just using them here cool and then also to-do list so to-do lists will accept the array of two news it's going to map over that it'll accept these two functions toggled on and remove to do but it's not going to call those directly it's gonna pass those functions further to it's a child component there so if we look at to-do list it gets to dues from the props so those are directly passed down here from state we then map over them and return a new to-do item which is a component we defined and it further accepts several props so first accepts the index of the to do so we can pass that in when we're removing it or updating it we could access the to the to-do itself and then we pass down those two functions or toggle to do and remove to do now inside of that component we use those props to invoke toggle done to display whether or not the box is checked to display the title of the to do to decide whether or not to put a line through the title and then also when we're calling to remove to do so everything's at the top and then passing it to those dumb components cool I think that's it let's look at my to-do list so we created a to-do list component we passed down the array we pass down the mark done function we pass down the remove function and we also created a to-do item component we passed down the to do individual to-do item and then pass down also those two functions cool I think that's it so I have covered pretty much like the the essential concepts in building an app with react there are a lot of other things I encourage you to check out the react Docs and check out advanced guides they get further into checking types of props more in depth with JSX dealing with refs which actually give you access to the Dom elements themselves all kinds of things that go beyond just building like basic react app like this so yeah Kaizen are you saying wasn't too bad like I wasn't too bad or react isn't too bad yeah cool that's pretty much it reaction org more and more info I am gonna push the rest of this code up it's on github coding garden slash intro - react - to do any last questions comments thoughts in the chat before we end the stream for tonight yeah cousin was clarifying Emma's react I only sort of agree I I think I don't know if like if you compare this to something built with view Jas it really would be like half half the code which i think is a good thing right code is a liability the more code the more possibility for bugs however if your company is using this or you want to learn this or you see jobs that are using this react is better than a few is better than react I agree but it's still a thing people are using it and they're using it because it works I'm gonna stop talking before I say anything too bad there's that I don't have my upcoming live streams up just yet but those should be up soon if you visit my channel that's me playing with my hair for whatever is since the streams for next week should be up either tomorrow or the day after so you can click remind yourself peejoe I don't I don't think you tuned in last night but I did I did do a Coty's number three last night so check out that video if you have it oh they were you there you can make another one either way every Wednesday at 8:20 p.m. mountain time I do a stream on solving code Coty's every Tuesday I do newbie Tuesdays I have resident noob Tony he's a friend that's been coding on and off for about a year and we'll just build an app and kind of pair together and then Thursday mornings and Sunday mornings I will do morning tea with CJ where I just talk about the news and maybe try to build something with that thanks everyone for watching have a wonderful morning afternoon evening or night wherever you are in the world and I will see you next time goodbye you

Channel: Coding Garden

Views: 23,064

Rating: 4.9491525 out of 5

Keywords: mechanical keyboard, node.js, html, full stack web development, learn web development, backend, vscode, learn to code, full stack javascript, learn node.js, live coding, learning, frontend, learn javascript, lesson, javascript, web development, full stack, css, debug, how to code, live streaming, programming, debugging, beginner, coding, frameworks, educational

Id: vIA130MePY8

Length: 95min 31sec (5731 seconds)

Published: Thu May 03 2018

Reddit Comments

[u/theineffablebob]

What do u wann do