This is an exciting moment.
We're finally ready to apply everything that we've learned so far to get started building
our final project, the Keeper app.
So in this lesson, I've got a challenge for you that is going to get us part of the way towards our final
product.
So this is what we're aiming for,
we've got a Header component,
we've got a Note component, and we've got a Footer down here as well.
Now in the index.js file, I've got all the steps that you need to go through in order to complete
this challenge.
If you want to work on this project locally instead of on CodeSandbox, then the simplest way is to go
to the link that is listed in the Course Resources for the starting project, and then once you're here,
go ahead and click on this button to export this project as a zip file and then unzip that file, and
you should end up with a project folder.
Now once you've got your project folder, you can click and drag it into your VS Code and add it to
your workspace. And then you can remove any previous folders that you've been working on.
And if you expand all the files, you end up with the same starting files.
So in this case, the files that we've got are index.html which is kept very simple. It's got a title,
it's got a link to google fonts,
so if you remember from previously we can simply select the fonts we want from Google and then embed
the fonts as a stylesheet link. And then we've got a link to the stylesheet inside styles.css
,
and finally, we've got a link to our index.js as a jsx file. And of course, as always we've got
that prerequisite div with the id of "root".
So the other file to take a look at is the styles.css file, because in here I've already added a
bunch of styles and classes which you're going to be applying to the code that you're writing with React.
It's up to you whether if you want to work on this in CodeSandbox or on your local environment that
you've set up in the last lesson.
Now if you do decide to go down this route, I recommend the first thing to do
once you've downloaded it is to open up your hyperterminal and cd over to the location of your project.
So in my case, it's in Downloads/keeper-app-part-1, and then go ahead and run "npm install". This
way you'll install the react, the react-dom module, and the react-script module that's included with
the package.
And once that's done, then you can go ahead and run "npm start" for it to run the server to be able to
view it inside your browser under localhost:3000.
So it's up to you if you want to complete this challenge using CodeSandbox or if you want to do it
locally using your editor of choice.
But either way, the goals are going to be the same. You're going to be creating a new React app that includes
an app component, inside that app component, you can have three components: a Header component, a
Footer component and a Note component. The header is going to look something like this, showing the Keeper
app title, or whatever it is that you decide to call it, and then the footer is going to look like this,
with a dynamically rendered year so not a statically typed number. You're going to use what you've learnt
about JavaScript dates to try and get the actual current year showing up here. And then finally, you've
got this Note component which is going to show a title and some content.
And the final step is just to make sure that the styling is the same for the website that you've created
and this sample completed app, which you can access right here. In order to get the styling right,
you might have to take a look inside these styles.css and see which classes are being targeted
and which HMTL elements are being targeted, in order to render the same style as you see here.
So the goal is to test everything that you've learnt so far.
And if you want to, you can even update the styles.css to whichever style you want it to be to customize
it if you wish. Or if you want to completely create the styles.css from scratch, then you can also
just delete that and try to create your own style if you wish.
But what I recommend is to go through each of these points in the index.js and try to complete
it.
And once you're done with the challenge, head over to the next lesson, and I'll go through the solution
with you. Pause the video now and try to complete the challenge.