 All right, so why re why react so we're gonna a quick little kind of about react So it makes building you eyes easy. That's kind of stolen from their there's their Website and it's a personal and unopinionated library So some of the benefits so what makes it easy is you have this thing called JSX Which is something that people either love or hate or grow to love It has a virtual DOM which it uses for performance reasons And it's it's one of the magic things that happens under the hood that makes react Possibility and it has a really small API and so that's going to come key in this Coding that we're going to do because again, I really don't have a whole lot to show you because there's only like a limit Like react itself is very limited in its part Some of the other benefits is it has a vibrant ecosystem. So there's almost a component for pre-medge anything you'd ever want You could find a component like you need a video player if you need a background video If you need any of this stuff if you need Facebook sharing buttons social sharing buttons Like these things all exist and you just pull them in as components and use them It has a community that's building and improving and experimenting. So this is to me. This is something that I really like I like that the react community is constantly trying to make what they do better or trying to Challenge the way that they do things now to find even better ways to do stuff And and we're getting to a point now where we have some proven But maybe still evolving patterns and in the advanced react course We're going to talk about some of those patterns, but over time now we've had react long enough that we started to kind of get an idea of Where are some of the ways you can build components? What are some ways you can structure your application? And there's a lot of best practices that we can rely on because the community is constantly Trying and making things better So some of the learning curve steep learning curve. So if you'll notice here my drawbacks are almost exactly my benefits So I love that it has a small apion is really you know What it does is very simple But that's actually kind of a drawback because it really means that you have to understand JavaScript and you have to fill in a Lot of blanks when you're writing a JavaScript application it again It's just a view layer essentially and it only handles a small part of an entire application. It's very different from something like Like Meteor or angular where it's this entire framework and it has pretty much all the all the problems and all the solutions Figured out for a complete application But yeah, it leaves a lot for you to do and the ecosystem so the ecosystem I love the fact that we're experimenting coming out with new stuff really challenging the norms that we have But to some people that can get old really quick and so I think that's another kind of a love hate kind of thing within the community one of the cool things at least I think it's cool is React has really pushed forward this functional programming kind of concept in JavaScript JavaScript is always really lended itself to being a functional or being written in a functional way and React really start is really what introduced a lot of people to this kind of functional paradigm And you're gonna kind of see some of that As we go through and start coding So one of the things that you'll hear when people start talking about react and functional programming is embracing a declarative versus imperative style of programming So At a high level what you'll hear is on declarative is what should this page look like so when you write stuff in a declarative way You're really saying this is what this should look like and you really don't get yourself involved too much in the details So if you were in the first talk that I gave where I did the higher order component or functions and I did map filter and reduce Traditionally if you wanted to do those things you would have done a for loop and you would have to set a variable and you Would have to increment the variable and all this you're doing all this busy work to make it loop an array so that would be an imperative whereas Using map filter reduces more of a declarative. You're not really telling it how to loop You're just saying hey when you loop do this, you know So that's kind of the difference between a parative and declarative programming And you'll see this in react as well. So the app that we're going to build it's a small little app I have a vanilla JavaScript version that I'm gonna show you first And we're gonna kind of look at the code and then we're gonna Replicate that in react and you'll kind of see that the vanilla JavaScript version is much more imperative than declarative And I always like to say that and I don't know if I stole this or if this was I may have stole this I don't know but the page is a visual representation of the data Which is once you get that into your head and you really start to think about thinking about At the end of day It's just data and all your all your view is is a visual representation of that data So if the data changes your view changes and you only have to do a little bit of work to make those changes happen Once that starts to click you'll really start to see the power that is react All right, so these are some links that you can follow to so I'm going to be using a thing called code sandbox today It's a it's a way for us to code react view vanilla JavaScript They have you can code in anything you want For JavaScript and it has an editor and has live reloading all this cool stuff That way that's what we're going to utilize today when we're doing the live coding So if you go to the first link code sandbox, you're going to see a list of all kinds of sandboxes that I've created Some of them were the jQuery from before What we're going to build today will be on there once it's completed right now. It's empty And there are some other ones for the other talks and just some some really cool sandboxes that could be useful To look at because what you're going to want to do with all of this stuff Once you see me kind of build it out is you're really going to want to get in there Get your hands dirty start breaking stuff moving stuff around and really trying to understand how it works And I think it's really cool that you're going to be able to take something I make and just start to use it and what's also really cool about it Is that we don't have to worry about installing any type of third-party packages or worrying about it Whether you have node or npm or any of these things installed on your local computer you can get coding right away Now specifically we're going to go to the intro to react example That's going to be the one that we're going to be coding right now I'm not set down for this All right, so here's the vanilla JavaScript version of what we're going to build It's it's kind of a to-do app except you can't check stuff off all you can do is delete stuff so it's it's Correct we're going to code that out here in a second. That's where I need your that's where I need your prayers and wishes that It really goes well because it's an empty file Thank you Okay, so here is the here's here's a vanilla example of what we do are what we're going to build So pretty much you can add to do's and you can remove them and that's really all this thing does All right, so you can just add stuff So let's look kind of look at the code So if we go down to line six here This register to-do list what you'll see is I've defined a function and Then afterwards I initialize that function so this is just kind of a pattern I use when I'm writing vanilla JavaScript and So what generally happens is is this code would be in a separate file within my project And I'll export this register to-do function and then in my index.js Which is like the root of my entire project I'll be pulling all of these little files in using the imports and exports from the previous class So what I'll do is I'll have a file I'll define this function Export it and then an index.js. I'll import it and then I'll call it and Other than just kind of separating your code and making it easier to kind of figure out where things are One of the things I like to do with or one of the reasons I like to do this with a function is that I can go and get like the core element that I need for whatever it is I'm building generally whenever you're coding something there's like a root element that you need or if you don't have that It's not going to work and I like to just do this bail early kind of concept where The function will go try and find that element and if it doesn't find it It just returns false or returns and gets out of there and it never executes the rest of this code and this is really useful when you're working with traditional websites and vanilla JavaScript where Certain functionality and elements may only exist on certain pages with this kind of approach You don't have to worry about well. What page am I on and does you know? Does this thing exist? This is a quick way to be like only run this code when these elements exist Otherwise just don't do anything All right, so what I'm doing next is I'm going to go and grab a bunch of elements So I'm getting the list itself, which is a UL. I'm getting this input field and I'm getting this button So I'm using vanilla JavaScript to go and query the document and find those Then the next thing I do is I do button and I do add event listener So this is how you would you know register an event. It's a click event. I get an event I prevent the default and the reason I do that is because if you click the button net Traditionally, it's just going to reload the page Then what I do is I create an item and so the way that I'm doing this here is like I call these poor poor man's templates So I use template literals, which is a new ES six kind of thing where I can say here's the HTML of this item And then I'm going to insert the text of the item And then I have to do this weird thing where I use these fragments and kind of convert this string into actual HTML So that down here this actually ends up being a node element an actual HTML element and I can call a pin child Otherwise if I didn't tell it to do that it would give me an error saying that item is not an node element And then I have to go and remind it to go put the input field back to empty So that it is ready for the next item that I input And then to remove the stuff I'm gonna I'm gonna listen to the on the unordered list I'm gonna listen to any click events on it And then I'm gonna check right here to see if the event Target tag name equals button because that means they actually click the button Because since I'm registering this event on the entire UL anytime they click on the UL and Li a button Any of those all fire this event and I only ever want to call this removing logic When I'm when it's actually clicked on a button So once I know I'm someone clicked on a button the button that got clicked is what's called He is what's in event that target and I use you know JavaScript closest to move up the tree to find its closest parent Li And that's that's how I know which Li I need to remove Based on which button gets clicked and then I call list out remove child to remove that element So again, it's I'm very much in the weeds here telling it step-by-step how to do every single thing Throughout the whole entire application now granted It's not a lot of code and I believe when we do the react version it it'll it's more code overall, but I think Logically and mentally it'll be easier over time as you get more comfortable using react It'll make more sense and it'll be easier to reason about your application Then here here you have a do a lot of reading of code to really understand what's going on with react It'll become easier to really kind of at a glance know what's going on All right, so let's get started So at the end of the day what react is doing is it has it's going to be you're gonna be creating components But at what happens is is those components eventually get converted into creating HTML via JavaScript and beyond and believe it or not You can already create HTML via JavaScript if you want So that's where we're going to start the first thing we're going to do is show you how you could create some HTML with JavaScript Weave them without react and then we're going to start to slowly move our way into the world of react So if we look at the HTML file that gets loaded for this site You'll see that there is a div with an ID of root and that's really all that's in here And that's how a reactor works So react is injecting the entire contents of your application into this one div And we're going to do the same thing right now even with vanilla JavaScript All right, so the first thing I need to do is go get that root element And then what I need to do is I need to create a new element and the element that I want to create is an h1 So I'm using document dot create element. So this is a method that's built on to the document Object in JavaScript, and then I'm going to add a bunch of stuff to it. So I'm going to add a class I'm going to add us some styles And then most importantly, I'm going to tell this element what is in it Using inner text and then I'll take the root element that we found that ID that div that's on the page And we're going to do a pen child and we're going to pass it the element and there you go You can see I've rendered an h1 on the page. It's text-aligned centered. It has a font size And I did that all just with vanilla JavaScript and you can see if we do the console down here You can see that the div with the idea of root now has an h1 in it And it has a class of YOLO and it has some inline styling added to it So again, the whole the whole what JavaScript does is it allows you to build an entire application including h2p on everything in Purely JavaScript what you'll notice here though is that who wants to do this? I mean This is ridiculous So let's let's try to do it with react now what we're going to do first though is we're going to use Kind of a low-level API that's built in the react that you're not actually going to use But I just want to show you that there's this kind of wrapper around what we've seen here That's in react and so we're gonna do that now So I need an import react for this to work I want to cool things about code sandbox is that it's already pulling these dependencies in and it has a build So it's running babble It has things like ES lint for linting and you're gonna see a lot of these errors coming up and they're they're kind of helpful So I just want to point out that there's an entire build application here There's all kinds of stuff going on that we don't have to worry about and so that's why I'm able to just go Head and start importing react without actually, you know setting up a project So similar to the document, we're gonna give it what we want it to be Then we're gonna give it an empty object for now And then we're gonna tell it what the text or what should be in it what its children should be and then in react We have another thing called React DOM so in the way react is built is that the core library of react is in a react package And then the stuff that has to do with the web is in a package called react DOM And then later today when we do the native stuff, you'll see that there's another packet called react native So you have this DOM and native packages and they all kind of pull from the core react So whenever you're working with react not only do you know we have to pull react in but you also have to pull in This other thing and for us, it's the DOM And so what we're gonna pull in is we're gonna pull in a method called render That's in that react DOM package And again these packages are in my node modules if you could see my node modules So these are packages that were installed Using your modern JavaScript, and so that's why I have access to them So I'm gonna use this render and what you do is you pass it The root and then the element I think or maybe it's the other way around and so now you can see that I have a hello world Now this this object that it gets passed You can actually do a lot of stuff with this and one of the things you can do is pass all the props And you're gonna learn about props in a minute and one of the things that we can pass though as a style Object and then we can do this kind of the same stuff we did before And you'll see now we kind of have pretty much the same thing that we had using the vanilla JavaScript And again, this right here is what's called the children so one of the things I could do is I can make another component and a copy a lot of this This one's going to be a div worry about this stuff and what it's going to is it's actually going to get the element As a child and then we're gonna render it out So again, nothing has really changed visually But if we inspect this we'll see that we have our root element that we had before and now we have that new div Which is the wrapper and then we have our h1 inside of it So this is kind of how under the hood react is converting your components into something very similar to vanilla JavaScript It's just just a little bit better And that's the big takeaway here is that no one's we still don't want to do this this sounds horrible All right, so what we want to do now is we actually want to start to use Reacts component Classes to build out our components the way you normally would in react and so let's let's convert what we have here to work with that I love that it saves right away. That is so awesome All right, so we're going to create an app component So this is what's so this first kind of component you're going to see this is what's called a functional or stateless Component so this is a component that's really built out as a function So you can see this is all this really is is an arrow function from the modern JavaScript So this is the first and simplest way to create a component And it's the way that you're going to want to try and create as many components as you can Because they're also referred to as dumb components because they literally take some data and they represent that data as HTML And that's all they do is take data and represent it And it'll make more sense in a minute But let's just go ahead and make this do something All right, so that's our first component. It's I think it's going to be It's going to win a lot of awards for sure But yeah, so you can see all I've really done is to find a function and the reason this works is because I have react on the page And this right here is your first introduction to what's called JSX So this is not HTML. It's a it's a parser and kind of like a language in and of itself That's packaged into work or react. It's not even part of react. It's its own thing But what react does is it uses it to parse this and turn it into Those other create elements that you saw before so that's what it's doing under the hood is it's converting this JSX into those create elements and rendering it all into the page and Once you've created a component to create to actually show off or to use the component you use you use this syntax right here Which also looks a bit like, you know closing HTML and again this render is just injecting this entire component into that root ID And what and you can do things like styles so We can pass this an object So and when you're doing JSX you're going to do stuff like this and we're going to do this kind of thing with props But for right now we're just using style so style equals and then you do square brackets and Then our curly braces and then inside of those curly braces You want to give it an object that represents what you want so similar to what we did a minute ago Right, so we're just passing in that that's that one so and when you see you when I save there that so that's another thing called prettier I don't know if you are using prettier with your coding prettier simple essentially just format your code And it's really nice, and it's really made me a very I mean I think developers are lazy anyway But it makes it to where I just write whatever and hit save and it makes it look good, right? So if you're into laziness Get prettier Also, too if you're using ESLint ESLint's gonna yell at you and throw you lots of errors lots of really useful stuff It's gonna help you catch a lot of things that probably would have been errors at runtime when you loaded the page And if you just have ESLint in there by itself You're going to you're going to be hating life because it's gonna be yelling at you all the time for every little thing But when you use ESLint with prettier so long as you're using similar styling patterns because you can kind of mix match You can change the styling a bit When you use prettier than ESLint together what's nice about that is prettier fixes 99% of the stuff that ESLint would have yelled at you about doing and it really only leaves ESLint to show you stuff That's really important All right, so now what we're going to do is we're going to but we're going to create a new component So we're going to start to actually implement our vanilla JavaScript thing that I showed you So the first thing we're going to do is we're going to create a component called list item And it's going to be a stateless functional component, and we're going to export We're going to use export default So like this is going to be the only thing that really gets exported from this file So again, this is using a lot of the ES6 stuff and the modern JavaScript from the previous talk and Then we just want to return a list item And we're going to use square or curly braces to inject in the text for this item And this text is going to come via what's called props, and so we're going to talk about props And just a second So this is our first component and it just renders out an ally. That's all it's going to do So we're going to go back over into our app. I'm going to get rid of this And we're going to import this new component list item from Dot slash list item so again using kind of imports and exports So you'll see the difference here is that when I'm importing react and I'm importing render I just call the names directly and it works and that's because by default the import stuff That's built into modern JS knows to go look in node modules for those whereas my own stuff I'll do I have to actually map it to the path to where it's actually at And since this file is in the exact same, you know, same level as the current file I can just do dot forward slash and it'll pull it in All right Now the next thing we're going to do is we're going to convert this app component to be a stateful class based component So this is the second way that you can create a component So we're going to say class app Extends Component And we actually have to import another thing we have to import component We need to have a render method. That's an important. That's a requirement for a class based component And so there you go so now I've refactored that component from a Functional component to a class based component and really the only thing that changed was that instead of it being a function We're now extending a component class and instead of just returning JSX We have to have a render method which then returns that JSX. So those are two main differences At this point there's a there's gonna be more differences and we're gonna be exposed to those as we keep building All right, so the so now what I want to do is I'm I'm going to initialize an initial state for this component This is another thing that makes class based components different than the stateless functional components Components like this cannot have any internal state Whereas these these can have their own internal state And I'm gonna set a data property If right now I'm just gonna make this Just a list of stuff And then I'm gonna switch up what I'm returning here and I'm gonna return a UL And then I'm gonna create a new I'm gonna create a new function or method on this class and it's gonna call be called render So we call it render list items And then I'm gonna do what's called object destructuring I think So bad with names, but essentially I'm gonna this state object This is this is an object right this state thing is an object and I can reference it within react using this dot state But just because I want to be too cool for school I'm gonna do this and I'm gonna say data Equals this dot state so this is something you would have seen in the previous talk where I'm going to essentially pull this out of this Dot state so out of the state and now I have this new variable inside of this function called data Which is literally this that's what I did and then what I'm gonna do is I'm gonna return from this thing And I'm gonna map over the data so I'm gonna loop over that data So this is something again higher order functions from the first talk in I'm gonna use an arrow function from the second talk so I'm gonna get an item and I'm gonna output a list item So we got some work to do here, but I'm we pulled that component We made in this one over here and now we're going to loop over this array of data and for each item in the array We're going to create and an instance of this component and we're going to pass this text in So the item And if we look over here, you can see that I'm I'm destructuring or Pulling this text thing out of the props that get passed. So what we're doing right here is passing props So this right here what you see here is me passing props and the beauty with props is that this name text? That's just what I called it It could have been anything I wanted and it's up to your imagination props can be anything you want and you can pass anything You want is props to the to any of your components that you create and in this instance? I'm clear. I'm passing a Text prop which is one of these items and so over here. I pull that text thing out of what's called This prop I'm pulling that out just so that instead I could just do this this prop Text but instead I'm pulling it out and I'm just and I'm able to just call it text So that's what you see me doing there. So one of the things I'd like to point out here, too Is that what I'm doing here? There's probably a lot simpler ways I could have even simplified this even more But I actually made the conscious decision to really show you how I actually would write react because unfortunately Most people in react won't be too cool for school and if you look at any documentation This is what you're going to see and so it's very important I think for you to just get get into doing this stuff now So the last thing we need this is kind of a react kind of thing is that anytime you're looping over a list of stuff And you're mapping things like this. You have to pass it a key And it needs to be something unique So normally like in WordPress we would use probably like the post ID But I don't really have that right now. So I'm just going to use the index which is not preferred, but it'll work So what's cool about map? I didn't cover this previously is that not only do you really get the item? But you also get the index. It's just if you wanted to use that or not. It's up to you then lastly We're going to use this function we called we made cool, so Again, the render here is an unord list and then we use these curly braces to build to run JavaScript So in the render whenever you want to run JavaScript you'll use curly braces and so all I'm doing here is I'm running this function Again, this function goes and gets the state maps over the state and outputs a list item for each one of the items here So I have a script. I'm just looking at it All right So I think that this point what I'm going to do is I'm going to refactor this ability a little bit So instead of having all of this logic kind of in our app I'm going to move this out into a separate component called list and again It's going to be it's still going to be a stateful component. So I'll say class list extends component It's going to have a render it's going to return something And what it's going to return is it's going to return the same thing this was and we're also going to just move this part right here over and One of the things that we need to change is that the data is still going to live up here And this is going to make a little more sense here and a little bit why the data is still up in this upper parent component But the data is going to stay up here So what we need to do in our list is instead of getting data from this that state because it was internal to the state It's going to get it as props. So if we just change this to props It'll start to get it from props and it's also going to need this list item because that's it's now the component That's rendering the list item and then we're just going to import list from list and then down here past data and It's also helpful if you export this thing so that you can actually access it There we go. So I wrote a whole bunch of code and we did nothing so congratulations That's refactoring and so and this is something I think a lot of developers do right you take baby steps You make little incremental improvements. So we refactored it out so that it's in a separate Separate place and so now what we want to do is we're going to add more to this So we're going to create a div and inside of that div We're going to render out our list item. So again, nothing's really changed except now this stuff's in a in a div and the reason we're doing that is because we're going to create a form now and Newer versions of react you don't have to you don't have to have you don't have to wrap You can't and in react in the older versions of react You couldn't have an h1 and h2 or two p tags on the same level as each other without a wrapping parent element and newer versions of react that's going away, but Currently code sandbox. That's it still is using that so I have to ensure that I wrap I Can't I can't have a list in a form here. I'll have to wrap them with a div or else it wouldn't work So we're going to create a form We're going to create an input and we're going to create a button There we go. I was getting a little worried there for a second. We're going to code nothing showed up Cool, so I have a form I can type stuff in here and that works And if I hit add you'll see that just reloads page because that's kind of the default action for a form field Okay, cool. So we're actually going to start to do a lot of stuff that has to do with react We're going to start to really learn a lot of Right now with adding it to do we're going to learn how to do a whole bunch of stuff That's really vital to understanding react So one of the things we need to do is We're going to do an on-click event So in react when you're in your JSX you can just type something like that on click equals square brackets And then give it a function to run and so we're going to create a function called this dot handle add item Curly brackets. I keep saying square brackets. So sorry So we're going to create this function And it's going to get an event just like just like if you are registering DOM events with jQuery or vanilla JavaScript This on-click event whenever someone clicks is going to fire this function is going to pass this in the event So I'm going to say event that prevent console log Yolo and you can see it's working And I'm not going to lie when I'm coding I always do this even though I've registered a million events before I got get in there and really start writing all kinds of logic and not working And then I get mad at myself It's always nice to just make sure that at least we'll show something before you get into doing more So what we want to do now is we actually want to be able to get the value that's in the input And we want to do what's called set state. We want to add an item to this array in the state And there's a couple of ways to do this in react But the preferred way that they want you to work with input fields is to make it what's called a controlled component And what that means is is that we it wants us to register an on change event on the input and listen for every key Stroke that happens and then update a value that's in our state But that didn't make sense it will here in a second So we're gonna make a new value in our state called input value and make it set to empty an empty Thing and then down here. I'm gonna say value equals this dot state input Value now, I think it should be still works There we go now you see when I type now it doesn't work So I broke it but that's kind of what we want. So what we want now is that we want these things to happen on change And we want these to be in our state. So we're gonna create a new function called handle input change and I'm just making up these names by the way and It's gonna get an event and we're gonna use something in react called set state So this dot set state and I'll explain this in just a second. All right, so you can see I can type again So what's happening here is that every time I a keystroke happens this on change function fires Which runs our function and it gives us the event an event that target This is just like vanilla JavaScript So this is again kind of like where you really need to know JavaScript on any event event that target is the element That had the event listener So in our case event that target is the input and the input has a value and we can get that value So every keystroke we're getting a value. So like right this second value was ff. Okay, then we're gonna use Part of the react api. This is a this is like one of the most important parts is like is this that set state So set state is how you handle updating this internal state and react And by doing this react is going to do all of the things that you hear about with a virtual DOM and diffing and figuring out What's going on and it's going to know how to render and what to render and what needs to get updated So by setting by doing this that set state. We're slowly changing this value like this, right? And you can see that I actually updated over here. You see that so again Just another little example of your your view is a visual representation your data My data has an input value with all these weird letters and now this thing does too and as I change them over here They change them over there, right? So they're now because we've done this our input value is now being stored what we type and what that means is down here And add item we can we can do this dot state as well It's just that set state And here we can say data equals something and here I'm going to do the destructuring again So here I can say that data equals data dot concat Which is an array method I'm just going to put input value Into an array and kind of push it into the array It's kind of a way I cheat I guess and then an input value I'm going to set back to the empty string So let's see if this works So you can see that I want to add it update step So just again the input is using it on change Which is setting the input values value and then whenever you hit the button on click it runs this handle add item And that's going to get an event And then what we can do there is we can then set state and we can push a new item into this data array So we're pushing our new item wherever you type into this array And then we can also then reset this input value back to empty string so that it's empty and ready for the next thing So if I refresh the page, they'll go away yeah, and Later on today when we get into much more advanced stuff We normally won't actually have a data thing set will be fetching it from like an API or something So this is more for instructional purposes. But yeah, if you just reset it kind of loses its state And then it'll start building the state up again So the state's only as good as the browser that it's in and as soon as that browser goes away or refresh as it clears state It starts to fresh again. All right, so now we're going to build the move functionality The remove functionality is a little bit more complicated. I'm not going to lie and it's going to start to show kind of One of the potential issues you can have with react as it starts to get bigger and your application starts to grow So the first thing I need to do is I need to make a button so you can see now that each of these things have a button and What I have to do is I'm going to have to what we want to do is On the button we want to do on click We want to run a function right and that function is going to go and update the data the state The problem is is that our state is up here in our in our main app component So the way our react app is working right now is we have our main app component Then we have a list component and then inside of that list component We have the list items and the list items is where the actual click event is going to happen from So what we have to do right now is we actually have to pass a function down as props multiple layer levels So you're going to see me doing this right now where I'm going to be passing this this function down as props and we'll get it to work One thing I didn't mention to that's really important So you can see here when I'm creating these functions how I am using Arrow functions right here So the reason I'm doing that is because by default that that does a binding of what's called this is that if you've ever had trouble with JavaScript and this That's why it's because you're working with events in that event This is different from the original this from where you thought the function was going to be If you don't care about any of that just do arrow functions and you don't have to worry about it This will just always work. Okay, so that's the big takeaway and that's why I'm making these all arrow functions Because if I didn't make these arrow functions, this call to this dot set state would give me an error Okay, so the list right here is going to get a new prop. I'm gonna call it on remove and I'm gonna pass it the this handle Remove item function and then I need to go into my list and I need to tell it that it's getting on remove Prop and then I need to take this on remove prop and I need to pass it down to my list item component It's confusing. I'm not gonna lie and that's why I'm really glad that you're gonna have a link to this So you can mess around with this and figure out why it's How I did what I did and then lastly in here we're going to get this on remove and We're going to just pass it in here So if I go all the way back up to where I define this stupid thing and I do this All right, let's figure out why handle remove item this handle remove on remove this thing over here gets on remove Let's refresh the page Let's just pray. Yes, there was no problem All right, that's tedious needless to say but it's manageable especially for quite a while within an application So you can get really far with set state and having and having what are called these container components So our app right now as a container component It contains a lot of the logic it contains the data and then we have a lot of these like you know Not very smart components that really just handle rendering information and what you're going to want to do is in your application You're going to want to do that and you're going to have a couple of these So like you have a main app and then you might have like two container components to have some logic about say like this To do might be like one container that does something and say on the app We had another feature that did something else that would have its container and its children and so what you're going to want to do is start to build your application into where you have these little pockets of Really intense logic and data and that way when you're passing props, you're able to Not have to pass stuff, you know too many levels deep. I hope so if I yeah Yes, so this this I shared a link to this is in my slides Yeah, I'm almost done. I promise you should okay. Yeah Yeah, I think I shared a link, but if it didn't work, we'll figure it out for sure. Okay, so you guys are spying on me That's so wrong All right, so So this is going to get a little tricky. So what we want to do is We've at least wired it up. We can see the Yolo kind of working So we know we've we've passed this function down and it's doing what it's supposed to do So that's a good sign now. We can actually really work on the actual logic that's going to remove an item from the array So because our array is like a flat array here of just text What we're going to try to do is we're going to use the index that it's in the array to figure out how to remove it If we were working with WordPress this array would probably be an array of post objects And those posts would have an ID and it would be really easy to kind of like loop through this array and find the ID That was getting deleted But in our case, we're just going to use an index so if we Go over to our list You can see that we have an index here and we passed it as a key So what we're going to do is we're going to add one more prop called index And we're just going to pass that index to the list item. Then we're going to go update our list item component to get an index And then what we're going to do is we're going to switch this up a little bit So you can just pass the name of the function and it'll execute the function But you can also in here just do an anonymous function like this with got a love arrow functions And you're going to get an event and then over here you can call this function And so I can pass the event so real quick what you see there is the same as This I didn't do anything different But the reason I'm doing this though is because I want to pass another property, which is this index that I got So as I loop through and I build these list items Using kind of closures and all that stuff we talked about in the first talk It it still knows about this index It knows what number it was and it remembers it and I'm able to pass that along to this on remove function So that it has the index And so if I go over here to my remove item And I update it to get Something I'm just gonna call it item index. This is the index. It's now going to get two items Thank you And then what we're going to do is we're going to do this dot set state We're gonna set some state Again, I'm going to do const data equals this dot state and Then inside of here, I can say data Equals and I'm there's a lot of ways you could do those probably better ways, but man I just love looping and filtering so I'm gonna get an item and I'm just gonna say that And I'm gonna get the index Again when you use map and filter you usually just use the item and get the item But it does pass you the index and what that means is that we can just go and say so long as item Index so the index that got clicked as long as that index isn't the current index I'm looping through then return it and what that means is that the index of the item I did click on gets removed from the array Yeah So you see when I click item 2 item 1 it removes it from the array and so what's happening Let's we'll recap that because it's a bit convoluted So when I this item 1 this button it remembers that it was index 0 So when I click this button and this function fires This right here is 0 and then I go and loop through the array again So the first time I loop through the first item I get to this is 0 So the first item in the array is 0 and the item that was clicked was 0 So since 0 does equal 0 it doesn't get put into this new data So that's essentially making this happen where that it returns an entirely new array Minus that one because those indexes matched All right, so that's the live coding part. It worked Just a few slides Yeah, let me make sure So I have a little bit more. I have like five minutes. I promise Okay, 10 minutes promise. All right, so I've saved all the files So hopefully they do load for you All right, so kind of recapping you know JSX It's very much like HTML but the end of day react is converting that into its its react that create element Which at the end of day is just the JavaScript create element. So nothing special You know why we use it One of the things that people don't like about JSX is they hate the fact that they have their JavaScript in there They're HTML and there they might even have their CSS in there And people don't like that because of the whole separations concerns, which is a valid argument But what we react is taking is that we are doing a separation of concerns where we're separating it not by tech not technology HTML versus JavaScript, but we're we're separating our concerns on a component component based level So what usually happens in a react application is you'll have like that list dot JS element And you'll have like a list dot CSS with your CSS and they'll be to you know together And then you may even write unit tests and you'll have list dot test dot JS right there And so everything for that component is all in one spot right for side-by-side together And that's how we kind of separate our concerns out in react where We're breaking our component down on a component basis not on a technology basis This is an example of how to create a functional stateless component An example that we saw about creating a stateful component so we can actually have states that state we can have additional things going on One of the things we didn't talk about yet, and you're going to see in the next talk is life cycle methods So react comes with a whole bunch of events essentially that happen during the life cycle of a component from when it's about to get rendered To when it is rendered to when it gets taken away And these are very crucial for being able to do actual application work and react and there's I think there's about 8 to 12 of them But I'm just going to cover I think for so component did mount is probably the most important one You're going to use you're going to use this for initializing a whole bunch of stuff when a component first loads and More importantly, you're going to use this to fetch data So this is the place where you're going to want to actually go and fetch your posts from WordPress or whatever REST API you're connecting to Component will receive props So this is important if you have a component and you're going to see this later today If you have a component let's say it mounts and it's a post and it's showing a post and then For somehow some state changes to go show another post well because it's already mounted It's not going to go and fetch or do anything new again So this is your chance to hook in and be like does this post ID match this post ID if not We need to refetch and so this allows you to tell an already mounted component that it needs to update itself because it won't know inherently These are functions So you're going to get what's called next props You're going to get what the next props are and you can use those next props to compare to the current state to know Where you're at you'll see this later and so it'll make more sense, but it's a very another very useful one to know Should component update so before component will update when it receives new props You can actually hook in and tell it not to So react does a pretty good job of trying to figure out what should render when but every now and then it's not right And so you can do some performance improvements by if you catch some stuff That's rendering that you feel like shouldn't be rendering based on a current state change you can tell it not to And then another function is component will unmount This is just hand helpful if you're if you have some like event listeners or you're hooked into some stuff You're going to want to like unregister those events or things like that because if not you'll have what's called like phantom views Any any backbone fans in the world? Phantom views right so if you've done backbone phantom views is like all you ever deal with it seems like But you'll want to unregister from stuff and this is a great way to do that React DOM we talked about that. It's a separate package And it's what let it's what we use on the web to kind of inject our app into our document We have our events in our set states. So it's just some examples there Children so you can actually we didn't do this But you can actually insert other components into parent components like this and all you have to do is they get passed as Props and the proper it gets passed as is called children So so long as you render this that props that children it'll actually output these rows that were nested inside of it And last but not least if you want to get started in react development Don't worry about that Babel or webpack go get create react app Which is the best boiler starter kind of kit that you can get you just install this via npm with one line of On the command line and you're up and running and you'll have everything you need to start writing react on your local install And that's it