React in 7 Minutes

[00:00] React is all about rendering out some sort of element, say an h1 that says "Hello," and then targeting something on the DOM, like the document body. You can see once we've done that and I hit refresh, that we have "Hello" already rendered out.

[00:15] Since it doesn't make any sense to just use this h1 as our entire application, let's go ahead and extract it. We'll create a React component. We'll say, "React.createClass." We'll say "render"...You'll be writing "render" a lot...and say "return," which is going to return the element you want to render.

[00:32] We'll go ahead and paste in "Hello." I'll say, "Hello from component." To get this guy in here, we need to give it a name. We'll say, "var App" is our React.createClass. We'll go ahead and say "App" and render out that as an element. When I refresh, you can see "Hello from component."

[00:55] To create an actual component, I'll delete this line. I'll say "div" with an h2 inside of it. Say, "Name." Hit save. Make sure it's still working, and then we'll create an image tag which we'll fill in in just a second.

[01:08] I have an array of people up here, and the first person is Anderson Turner. Let's go ahead and get him and put him in our little card component we're working on. We'll say "getInitialState" to get how we're going to set it up in the first place and say "return people" and then just get the first person from our array.

[01:29] To get this, we can just say, "{this.state.name}." That's going to refer to the name in that first person. When I refresh, you can see we now get "Anderson Turner." This state refers exactly to whatever's returned from your getInitialState call. I can also add the image so there's an avatar property on there.

[01:53] You don't place it inside of a string. You actually delete the string. You're going to be typing "this.state" so much you might as well create a little shortcut snippet for it, which I did right there. I'll hit save, hit refresh, and you can see Anderson Turner's image pops up.

[02:08] We want this application to have more than one card. I'm going to go ahead and rename this to "Card," and then I can create an App component. I'll say, "var App" is React.createclass.

[02:22] Just as always, you type out "render" and give it a function which is going to return something. Here, I can actually return a div with multiple cards inside of it. If I create one card, then duplicate it over and over and over and hit save, you can see that I get multiple cards on this page.

[02:42] We obviously don't want all of these cards to have the exact same data, so we're going to switch from state to something called props, which allows us to pass data in. If I say "name=" and just a string of "John." I'll delete the other cards. You can see that when I refresh, I have John as the name and the same picture.

[03:05] What we want to accomplish at this point is to loop through all of these people, get all of the names, all of the avatars, and render out cards for each of them. The first thing we'll do is rename this from state to props.

[03:16] We'll grab the initial state out of the card. We'll cut it out and put it down into our App here. That's because, again, state is isolated to the component that it's in, whereas these props are something that could be passed in.

[03:30] For our initial state, which needs to return an object this time, we'll return an object that has an array of people assigned to that property of people, and then we can basically loop through all of the people in the state and render out a new card for each one.

[03:46] We'll say, "this.state.people.map." The function we pass in will take a person. Then we'll return a new card that has the new name assigned to person.name and then the avatar assigned to person.avatar. As easy as that, we are looping through all of the cards and displaying all of the data.

[04:14] The real quick recap here is that we have an App which is going to loop through all the people and return a card for each of them. That card is rendering out a div with an h2 with some props that come from the person that's looped and the source of the image coming through that same person.

[04:34] Since we know how to use props now, there's really no reason to use initial state here either because I can just say, "App people ={people}," change "this.state" to "this.props," and then everything will work just the same.

[04:51] The last trick to show is that when something on the card happens, we want something on the App to change. For example, we want to delete a person from our list of people.

[05:03] We could pass in the person that the card hands us. Say, "this.props.people.splice," and then we'll find the index of, so "this.props.people.indexOf" the person we pass in. Say only remove one of them.

[05:22] To be able to call deletePerson from our card, we'll need to say, "Card onClick=," and we'll need to get the proper scope, so "var that = this." Then onClick can be that.deletePerson, and we'll bind it so that whenever we call this...

[05:44] We don't really care about the scope right now, but we always want to pass in the proper person since our card doesn't know about the person. It only knows about the person name and the person avatar.

[05:56] From here, all we need to do is create a button. Make a little break here. Create a button, which on click is going to equal this.props.onClick. I'll say, "Delete me." Hit save.

[06:15] This is not going to work when I click "Delete me," the reason being that although all this is wired up...onClick is wired to this onClick, which is wired to deletePerson, which does actually remove that from the array.

[06:27] We're not telling the state to change. We do need to say "this.setState" any time the state changes if we want to update our components. When I refresh now, I can say, "Delete me. Delete me. Delete him, him, him. Delete him." We have everything wired up.

[06:47] The final recap is that we have an App component being rendered into the document body, which takes in some people, which'll be used as the props.

[06:56] The props, we do a map on that so that it returns a new card for each person that it finds and that card takes in a few things off of this person, one being the person's name, the other being the person's avatar...

[07:12] And then the other being something off of this component, which is this deletePerson function, so that deletePerson is bound to this onClick and it passes in person any time it's called.

[07:23] Our Card, which is the thing that's being spit out every time we loop through this, is simply a template which has props for the name, the avatar, and the onClick. Any time this onClick is fired, you need to set the state to make sure that React re-renders everything and displays it as you want it.