1 00:00:00,920 --> 00:00:05,180 In this section we're now going to refactor our state initialization that is currently taking place 2 00:00:05,180 --> 00:00:06,580 inside the constructor. 3 00:00:06,590 --> 00:00:11,300 Remember that when we initially did this initialization process I'd mentioned that there were two ways 4 00:00:11,300 --> 00:00:14,870 to initialize our state in a lot of blog posts and documentation. 5 00:00:14,870 --> 00:00:18,890 You're going to see the alternate way that does not use a constructor function. 6 00:00:18,920 --> 00:00:23,090 So I just want you to be aware that this alternate method exists and in fact we're probably going to 7 00:00:23,090 --> 00:00:26,160 use this ultimate alternate method quite a bit throughout the course. 8 00:00:26,180 --> 00:00:31,790 So here's the refactor I'm going to go outside of my constructor function right underneath it and I'm 9 00:00:31,790 --> 00:00:39,650 going to say state equals an empty object and I'll put in there two properties that is nil an error 10 00:00:39,740 --> 00:00:40,670 message. 11 00:00:41,630 --> 00:00:43,690 Is an empty string like so. 12 00:00:44,240 --> 00:00:48,620 So what you see right here with the constructor function and the long form this state equals blah blah 13 00:00:48,620 --> 00:00:55,150 blah is a 100 percent equivalent to just writing out state equals and then our state initialization 14 00:00:55,160 --> 00:00:56,510 right after it. 15 00:00:56,510 --> 00:01:01,970 Now notice that I did not put a this state inside there it's just state by itself. 16 00:01:02,330 --> 00:01:06,740 Now I first want to prove to you that doing this refactor works and then after that I want to show you 17 00:01:06,950 --> 00:01:11,660 that the code that we're writing right here like the single line is equivalent to defining the constructor 18 00:01:11,660 --> 00:01:14,720 function and initializing our state inside there. 19 00:01:14,850 --> 00:01:18,400 So I'm going to take my constructor and I'm going to delete it entirely. 20 00:01:19,350 --> 00:01:20,860 So we don't need the constructor anymore. 21 00:01:20,880 --> 00:01:25,500 We can condense the entire state initialization to just be that line of code by itself. 22 00:01:26,290 --> 00:01:28,450 So let's make sure that this still works. 23 00:01:28,450 --> 00:01:33,340 I'm going to save this file and I'll flip back on my browser and I'll just refresh the page and make 24 00:01:33,340 --> 00:01:37,960 sure the application still works and it does no syntax errors nothing like that. 25 00:01:38,140 --> 00:01:42,730 If you want to you could reset your location preference and make sure that all the different states 26 00:01:42,730 --> 00:01:44,550 of our application work as well. 27 00:01:44,860 --> 00:01:50,800 So like I said what we have there now is equivalent to what we had before with the constructor function. 28 00:01:50,800 --> 00:01:54,970 So I want to prove that to you very quickly just to help you understand some of what is going on behind 29 00:01:54,970 --> 00:01:56,270 the scenes here. 30 00:01:56,500 --> 00:02:01,270 As a quick reminder the code that we write inside of our code editor is not what actually shows up inside 31 00:02:01,270 --> 00:02:02,160 of our browser. 32 00:02:02,410 --> 00:02:05,780 The code we write here runs through that tool called Babel. 33 00:02:06,040 --> 00:02:11,020 It takes the javascript code that we write and it converts it down to some form of javascript that can 34 00:02:11,020 --> 00:02:13,950 be understood by all popular browsers. 35 00:02:14,320 --> 00:02:18,640 So with that in mind I'm going to navigate to the Babel home page. 36 00:02:18,640 --> 00:02:19,860 We've been here once before. 37 00:02:19,870 --> 00:02:20,790 It's at Babel J. 38 00:02:20,790 --> 00:02:22,130 S. dot IO. 39 00:02:22,470 --> 00:02:26,390 So open up a new browser tab and go over there and then at the very top. 40 00:02:26,390 --> 00:02:28,500 I'm going to find the button that says try it out. 41 00:02:29,770 --> 00:02:34,030 As you recall this opens up a little replow right here we could enter in some code on the left hand 42 00:02:34,030 --> 00:02:38,700 side and see the trans piled version over on the right hand side. 43 00:02:38,710 --> 00:02:43,640 Now I'm going to open up the sidebar very quickly and I'm going to turn on the stage. 44 00:02:43,630 --> 00:02:52,080 0 1 2 and 3 presets like so then inside of the editor on the right hand side I'm going to put out kind 45 00:02:52,090 --> 00:02:56,420 of a very brief of creation of our app component as it stands right now. 46 00:02:56,450 --> 00:02:57,940 I'm not going to put the entire thing in there. 47 00:02:57,970 --> 00:03:00,210 I'm going to put a couple of different methods. 48 00:03:00,460 --> 00:03:08,360 It's going to say class app extends re-act component and then I'm going to define the constructor function 49 00:03:08,360 --> 00:03:13,330 in here and show you the original version of what we had inside the constructor. 50 00:03:13,620 --> 00:03:21,170 I'll say constructor it's called it props and inside there we're going to call super with props and 51 00:03:21,170 --> 00:03:26,930 then we will do our state initialization by saying this but states and I'll just define the property 52 00:03:26,960 --> 00:03:29,360 as null I'll ignore the error message. 53 00:03:30,030 --> 00:03:36,000 OK so after running this thing through babbel with just those presets you see right there. 54 00:03:38,470 --> 00:03:40,360 That is what we get on the right hand side. 55 00:03:40,780 --> 00:03:42,440 Basically unchanged. 56 00:03:42,760 --> 00:03:45,830 So now let's take our discrete state right here. 57 00:03:46,000 --> 00:03:47,650 Or the entire constructor call. 58 00:03:47,650 --> 00:03:55,870 I'm going to remove the entire constructor and then I'm going to define state equals Latt is null like 59 00:03:55,870 --> 00:03:57,360 so. 60 00:03:57,380 --> 00:04:00,110 So look at what happened after our code ran through Babel. 61 00:04:00,200 --> 00:04:04,190 And by the way really quickly if you don't see something that looks like this on the right hand side 62 00:04:04,460 --> 00:04:07,780 then you can try enabling some of the other presets over here. 63 00:04:09,590 --> 00:04:09,850 All right. 64 00:04:09,860 --> 00:04:12,260 So take a look at what got generated. 65 00:04:12,260 --> 00:04:17,600 You'll notice that when we put in this alternate syntax over here babbel Tooker code it took the entire 66 00:04:17,600 --> 00:04:22,340 class and it actually implemented the constructor function for us. 67 00:04:22,340 --> 00:04:27,220 And then inside the constructor function it did exactly what we had written before. 68 00:04:27,440 --> 00:04:34,460 It said this dot state equals our initialization for state which was the object that had that is null 69 00:04:34,490 --> 00:04:35,370 like so. 70 00:04:35,720 --> 00:04:41,000 So when you do this abbreviated syntax right here after it goes through babbel you're doing the exact 71 00:04:41,000 --> 00:04:44,830 same thing that we had when we were defining the constructor function. 72 00:04:44,840 --> 00:04:50,840 There is no difference because babbel is going to build up the constructor for you anyways and initialize 73 00:04:50,840 --> 00:04:51,910 your state in there. 74 00:04:52,680 --> 00:04:57,360 So what's the lesson lesson is that using this little abbreviation right here or the shortened syntax 75 00:04:57,540 --> 00:04:59,690 is completely equivalent to what we had before. 76 00:04:59,700 --> 00:05:02,690 It just means that we have to write slightly less code. 77 00:05:02,760 --> 00:05:07,560 We don't have to define the constructor and call that super and deal with props and all that kind of 78 00:05:07,580 --> 00:05:09,030 other stuff. 79 00:05:09,030 --> 00:05:09,520 OK. 80 00:05:09,780 --> 00:05:14,790 So good little refactor makes our component just a little bit easier to read. 81 00:05:14,790 --> 00:05:16,150 Let's now take a quick pause. 82 00:05:16,170 --> 00:05:19,130 We'll come back the next section and we're going to continue working on our app.