3.1 Create the Hangman Component
The whole point of this course is to learn the basics of React while building a hangman-style game. Let's start by creating the main
Hangman component that will load the entire app onto the page and be the launching pad for your game.
1.Introduction2 lessons, 03:04
2.Getting Started3 lessons, 15:16
3.Building React Components4 lessons, 24:57
4.Working With State6 lessons, 40:38
5.Winning and Losing3 lessons, 17:14
6.Refactoring and Final Changes3 lessons, 16:55
7.Conclusion1 lesson, 01:40
3.1 Create the Hangman Component
Now it's time to actually start to create the beginnings of our hang man application. Now, what I wanna do now, is I wanna start with the very basic component. Let's start with the, kinda of the root component that's going to encapsulate everything. So that when I want to add this application to a page somewhere, all I gotta do is pass in one element called the hang man component or whatever you wanna call it. And that's gonna be the beginnings of our application. So what I'm gonna do, is I'm simply gonna modify our hello world example a little bit and show you a little bit of some of the things that you need to pay attention to, when you're working with these components, especially when you're dealing with the JSX inside the render function. So let's go ahead and change this to hangman. I want this to be the hangman element. Or hangman component. So once again, this needs to be my hangman element down here in my reactDom.render function. And once again, that's going to extend the react.component. And in here now instead of saying hello world, let's go ahead and add some markup. Notice this is where you're gonna run into the first gotcha. So, if I wanted to come in here, and I'm gonna call this my hangman clone, and maybe let's say I wanted to add in here maybe a paragraph tag that said welcome to my game, or something like that. You're gonna get a little bit of some red squiggles here, and it's gonna be a pursing error and you're gonna say well, what the heck is going on here. Cuz you can see we have adjacent JSX elements that must be wrapped in an enclosing tag. So the problem that we have here when we are returning a JSS JSX object like this, is we need to be returning a single element. Now that simply means it's a single parent element I can return for markup here but it has to be in case in one element that's being returned. So I can do this if I would like, but the way that I get around that is simply by creating a wrapping div or some other wrapping element and then go ahead and put our code inside of that one div. Now, this obviously is gonna make sense too when you get into styling and you wanna maybe wrap this entire thing in like a game class or something like that. We're gonna get into styling, it's not gonna be the kind of most important thing that we wanna talk about in this course, but it's going to be something that we'll play around with a little bit later. So we can kinda of at least make it look a little bit more like a game and then you can style it any way that you would like later on once I show you how to do that. So now that we have our hangman class or hangman component that has slightly different markup inside and we are using the hangman element here inside of our render function. Let's go ahead and hit save. Then we'll pop back over to our browser. And as you can see, because we're still running NPM start in the background or yarn start if that's what you're using in the background. It is refreshing automatically and now we see we have our hangman clone. And then we see welcome to my game. So now, we have the kind of like the main component that's gonna drive everything. And then within here, we can start to build out all the child components that we wanna use to add functionality and things to render on the screen to actually get our game up and running.