In this section we're now going to refactor our state initialization that is currently taking place
inside the constructor.
Remember that when we initially did this initialization process I'd mentioned that there were two ways
to initialize our state in a lot of blog posts and documentation.
You're going to see the alternate way that does not use a constructor function.
So I just want you to be aware that this alternate method exists and in fact we're probably going to
use this ultimate alternate method quite a bit throughout the course.
So here's the refactor I'm going to go outside of my constructor function right underneath it and I'm
going to say state equals an empty object and I'll put in there two properties that is nil an error
message.
Is an empty string like so.
So what you see right here with the constructor function and the long form this state equals blah blah
blah is a 100 percent equivalent to just writing out state equals and then our state initialization
right after it.
Now notice that I did not put a this state inside there it's just state by itself.
Now I first want to prove to you that doing this refactor works and then after that I want to show you
that the code that we're writing right here like the single line is equivalent to defining the constructor
function and initializing our state inside there.
So I'm going to take my constructor and I'm going to delete it entirely.
So we don't need the constructor anymore.
We can condense the entire state initialization to just be that line of code by itself.
So let's make sure that this still works.
I'm going to save this file and I'll flip back on my browser and I'll just refresh the page and make
sure the application still works and it does no syntax errors nothing like that.
If you want to you could reset your location preference and make sure that all the different states
of our application work as well.
So like I said what we have there now is equivalent to what we had before with the constructor function.
So I want to prove that to you very quickly just to help you understand some of what is going on behind
the scenes here.
As a quick reminder the code that we write inside of our code editor is not what actually shows up inside
of our browser.
The code we write here runs through that tool called Babel.
It takes the javascript code that we write and it converts it down to some form of javascript that can
be understood by all popular browsers.
So with that in mind I'm going to navigate to the Babel home page.
We've been here once before.
It's at Babel J.
S. dot IO.
So open up a new browser tab and go over there and then at the very top.
I'm going to find the button that says try it out.
As you recall this opens up a little replow right here we could enter in some code on the left hand
side and see the trans piled version over on the right hand side.
Now I'm going to open up the sidebar very quickly and I'm going to turn on the stage.
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
of a very brief of creation of our app component as it stands right now.
I'm not going to put the entire thing in there.
I'm going to put a couple of different methods.
It's going to say class app extends re-act component and then I'm going to define the constructor function
in here and show you the original version of what we had inside the constructor.
I'll say constructor it's called it props and inside there we're going to call super with props and
then we will do our state initialization by saying this but states and I'll just define the property
as null I'll ignore the error message.
OK so after running this thing through babbel with just those presets you see right there.
That is what we get on the right hand side.
Basically unchanged.
So now let's take our discrete state right here.
Or the entire constructor call.
I'm going to remove the entire constructor and then I'm going to define state equals Latt is null like
so.
So look at what happened after our code ran through Babel.
And by the way really quickly if you don't see something that looks like this on the right hand side
then you can try enabling some of the other presets over here.
All right.
So take a look at what got generated.
You'll notice that when we put in this alternate syntax over here babbel Tooker code it took the entire
class and it actually implemented the constructor function for us.
And then inside the constructor function it did exactly what we had written before.
It said this dot state equals our initialization for state which was the object that had that is null
like so.
So when you do this abbreviated syntax right here after it goes through babbel you're doing the exact
same thing that we had when we were defining the constructor function.
There is no difference because babbel is going to build up the constructor for you anyways and initialize
your state in there.
So what's the lesson lesson is that using this little abbreviation right here or the shortened syntax
is completely equivalent to what we had before.
It just means that we have to write slightly less code.
We don't have to define the constructor and call that super and deal with props and all that kind of
other stuff.
OK.
So good little refactor makes our component just a little bit easier to read.
Let's now take a quick pause.
We'll come back the next section and we're going to continue working on our app.