#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Constructor, componentDidMount, and first render
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Lets start off by writing our constructor. This is familiar from last time when we did the API. It gets the props object
0:13
and we have to call the superclass passing on the props. We're also going to set up the state object which I leave empty for now.
0:29
Then we're going to define a componentDidMount method which as we saw on day one make sure that whatever we do the component has been fully loaded.
0:45
What we're actually going to do here is reset the game which will be a helper. Let me already stub this out resetGame()
1:02
Oh, and it's actually an arrow function so, using fat arrow. And one thing I noticed that using arrow function
1:10
it's not necessary to do the binding and constructor like we did last time so this saves a little bit of code. So, still some setup
1:19
and lets also go to the render and define the structure of our app writing some JSX code. We're going to put everything in a game div.
1:36
We will have a title which is the constant we defined Free Monnkey React I will have the state, or the monkey image
1:52
depending on the number of guesses we're into the game. I'll call that state and the source will be that lambda thing we had at the top
2:12
and we're just going to set that to zero the first image. Then we will have the mask which basically is the word replaced by underscores
2:30
and finally we will have a keyboard or 26 letter buttons which we'll write in step three. See if this all renders and there you go the first image.
2:46
Of course the mask and keyboard are not there yet so let's write those next.