#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.
0:06 This is familiar from last time
0:08 when we did the API.
0:10 It gets the props object
0:12 and we have to call the superclass passing on the props.
0:19 We're also going to set up the state object
0:24 which I leave empty for now.
0:28 Then we're going to define a componentDidMount
0:34 method which as we saw on day one
0:38 make sure that whatever we do
0:40 the component has been fully loaded.
0:44 What we're actually going to do here is reset the game
0:48 which will be a helper.
0:51 Let me already stub this out resetGame()
1:01 Oh, and it's actually an arrow function
1:03 so, using fat arrow.
1:05 And one thing I noticed that using arrow function
1:09 it's not necessary to do the binding and constructor
1:12 like we did last time
1:14 so this saves a little bit of code.
1:16 So, still some setup
1:18 and lets also go to the render
1:21 and define the structure of our app
1:23 writing some JSX code.
1:27 We're going to put everything in a game div.
1:35 We will have a title
1:40 which is the constant we defined
1:44 Free Monnkey React
1:48 I will have the state, or the monkey image
1:51 depending on the number of guesses we're into the game.
1:56 I'll call that state
2:05 and the source will be that lambda thing we had at the top
2:11 and we're just going to set that to zero
2:13 the first image.
2:18 Then we will have the mask
2:20 which basically is the word replaced by underscores
2:29 and finally we will have a keyboard
2:31 or 26 letter buttons
2:32 which we'll write in step three.
2:42 See if this all renders
2:43 and there you go
2:44 the first image.
2:45 Of course the mask and keyboard are not there yet
2:48 so let's write those next.