Okay, so hopefully you managed to give that a go and you achieved the bit of functionality that we've
added here just to switch between the different modes.
And how do we accomplish this?
Well, if we go back to the app components, then what we would need to do is we would need to swap
that constant that we had for just dark mode and use the Usestate give it an initial value of false
in this case.
So dark mode is set to false, which means it's going to start off in light mode.
And then we have our function to set it to dark mode.
Now to make it simple, I created a separate function called toggle dark mode, and I set the dark mode
to the opposite of whatever dark mode currently is set to, and then we can pass down the properties
we need to our navbar where the button is located.
So we've got the toggle dark mode function, and we're passing down the dark mode property to the navbar.
Then inside the navbar we create a type of props and we give the toggle dark mode.
We pass that down and give it its signature.
It doesn't take any parameters and it doesn't return anything.
So that's the signature of that function.
And then we've got the property for dark mode, which of course is a boolean, and then we destructure
them inside the arguments for the navbar function, and then it's just a case of using the onclick and
removing the const of dark mode, of course, and then just setting the onclick function to call the
toggle dark mode.
And that gives us our functionality that we see there.
So just a nice simple challenge to start us off.
Hopefully you had success with that.
And this actually brings us to the end of this section.
So that's a milestone that we've now achieved.
And we can now commit and save our changes into source control.
So if we take a look at the changes we've made then react application itself comes with its own.
Gitignore file.
So it ignores things like node modules and many other things that we don't write ourselves or code that
we don't write ourselves.
So we do not need to send it up to GitHub.
But this is the big one.
This one contains thousands and thousands of files that we do not want to save into GitHub, because
we can get node modules back simply by running npm install, and that will go and get all of the packages
we need and populate this at any time we need to.
So as long as we've got a package.json which we do, which we do save into GitHub, then effectively
we don't need any of those files in the node modules folder and a few other things as well inside there.
But this comes when we create our react project.
It comes with its own.
Gitignore file.
So we don't have thousands of files here.
We've got 45 for our react project.
Looks like my store DB was updated.
Don't worry about that specifically.
Unlike I say you can choose to include this or you can not include it with GitHub.
It really doesn't matter.
And I'm going to say that's fine.
So I'm going to stage these changes.
I'm going to give it a commit message of end of section three.
In this case click commit.
And I'm going to sync changes with GitHub.
And it tells me that syncing will pull and push commits to and from origin main I'm okay with that.
So I'm going to say okay don't show again.
And this will get the changes published into our public GitHub repository.
So that brings us to the end of this section.
And next we'll wrap up with a summary.