‫So to finish up this part, I want to once again
‫do a quick comparison of the React code that we just wrote
‫with an equivalent Vanilla JavaScript implementation
‫of the same app.
‫And this Vanilla JavaScript implementation I actually
‫gave you at the beginning of this section.
‫So we placed it right in the public folder.
‫So let's now open that up and open it here on the site.
‫Okay, so again, the Vanilla JavaScript implementation is
‫inside an HTML file, where here we have first the HTML
‫and then separated the JavaScript.
‫So this HTML might look familiar
‫as it is quite similar of course to this JSX.
‫The only thing we don't have here is the button
‫to open and close the component.
‫So I didn't include that part.
‫But anyway here then starts our script
‫so we have the same messages
‫and then here we have to manually select all
‫of these DOM elements based
‫on the classes that we gave them.
‫Then next we have this let variable here with a step
‫which we will then update
‫down here in these event handler functions.
‫So here we took the elements that we selected manually
‫and used add event listener on them.
‫We have a similar logic inside of these event
‫handlers to basically update the step variable.
‫So when we go back, the step goes minus one
‫and when we go forward, the step goes plus one.
‫So this is a bit similar to what we have here.
‫So these event handlers, but the big difference is
‫that here all we have to do is to just update the state.
‫And so then React will keep the UI in sync.
‫Where here we first update the state variable
‫and then we have to call this function
‫which does the DOM manipulation.
‫So here inside of the update UI values function
‫we need to now manually update the DOM
‫and keep it in sync with this step state
‫because of course as soon as we click these buttons here
‫if all we did was to update this value
‫then nothing would happen in the UI.
‫So after doing that, we need to then
‫call this function here.
‫Or of course we could also just have all
‫of this code here, but since we need the same code here
‫I just place it into this function.
‫So then here
‫we manually update the text content of the message.
‫While here in the JSX, it is simply declared
‫right in the markup.
‫So here we have imperative code that tells JavaScript
‫step by step what it needs to do.
‫So update the text content,
‫then set the class list,
‫set this class list, and set this class list.
‫So set the class to active
‫in case that the step is currently active.
‫While here, that's all just declared in the JSX.
‫We don't tell React to do anything,
‫we just write that here the step
‫should be equal to the current step
‫and that here the active class
‫should be inside the class name
‫if the step is greater equal one,
‫but we don't need the imperative DOM manipulation
‫that we have here.
‫So we talked about this now many times
‫and so I think that this is enough set at this point,
‫but of course it would be a good idea
‫for you to keep comparing now, these two implementations.
‫There's just one small thing that I want to do here
‫which is going back to the previous lecture
‫where I told you that each component has
‫and manages its own state.
‫So what I want to do now is to prove that to you in code.
‫So let's actually take all of this code
‫and place it into a new component,
‫which we will call step.
‫Or actually let's call this component here Step.
‫Then we don't have to do so much copy pasting.
‫Then let's remove this
‫and actually call it steps
‫now, right.
‫And now here we do our app again.
‫So export
‫default
‫function
‫app
‫and then this app
‫will basically include two steps.
‫So let's say here we have a diff
‫and then we want to have
‫the steps two time.
‫Now just a few more changes we need to do.
‫So now since we have two components on the same page
‫let's actually
‫return a diff ear so that the button
‫and then these steps are all in the same place.
‫And then just one quick change in the CSS please.
‫So down here in the close
‫let's just remove this line of code.
‫All right, let's close that.
‫Put it here on the side.
‫And then as you reload, you will see
‫that now we have two steps on the page.
‫So we successfully reused our steps component.
‫So this is now no longer the app.
‫Again, it is steps, and we can nicely see that here
‫in the React dev tools.
‫So now we have a bit of a bigger component tree.
‫So we have app and then it has two child components.
‫So, but what I wanted to show you is that
‫as we change the state in this one, for example
‫the state here will stay the same.
‫And so even though both of them are steps component
‫the state in each of them is completely isolated.
‫So of course I can also close this one,
‫and this one stays open.
‫And we can obviously also see that down here
‫in the dev tools
‫with a bit more space even.
‫Yeah. So the first steps here
‫the state is three, and it is visible.
‫So that's this true here.
‫While the second one, the state is one
‫and it is not visible.
‫Okay, so that was just a small and quick demonstration.
‫And so now that we have used state a couple of times here
‫it's time for you to practice state
‫on your own in the upcoming coding challenge.