All right.
So how did you get on with that challenge?
Was it easy?
Was it hard?
If it was really easy and you've managed to complete everything and you've gotten it to look like this,
then feel free to just skip this lesson and continue in the curriculum.
But if you got stuck at a certain point, or if you want to see me go through the solution then continue
watching,
and let's run through the solution together.
First step is easy enough.
Create a new React app.
We've done this a million times.
So let's go ahead and just do that quickly.
As always,
let's just start out by rendering a h1 and just check to see that it actually works and it gets
shown on screen in the element with id of "root".
And once we can see it in there, then we can go ahead and continue onto the next step.
So we're going to be creating an App.jsx component.
Now notice how in the instructions I've always added the jsx extension for the file names.
Now, this currently is a point of contention,
the official Airbnb style guide which a lot of people follow for creating React components advises us
to do this,
and the reason is because when you have these files say Atlassian, Bitbucket, or some other services,
it needs to recognize this extension in order to highlight the syntax in the correct way. But actually
in terms of the functionality for React apps, you can actually just leave it as App.js and have
all of your files just as JavaScript files.
So this is something that a lot of people argue about and I've recently started removing the x from
my App.js files as well.
But at the end of the day, it really doesn't matter, as long as you pick one and you stick to it, and you're
consistent about it, then that's absolutely fine.
So in order to create an App.js component, I'm already going to start creating a components folder,
and that way I can create my new App.js file inside my components folder. And inside here I'm going
to be creating the very root of my component tree.
So I'm going to import React from "react" and then I'm going to create a functional component called App
and this is going to simply return a div.
And inside this div, let's just make sure that it works. Again,
let's create a h1 called "Hello App" to differentiate it from the old content and then let's go ahead
and export this as the default.
So the only thing that we actually have inside this file is just our App function,
so it makes sense to export it just as the default export.
Now let's hit Save and let's head back to our index.js. Instead of rendering our h1, "Hello world",
I'm going to render that App component that we built just now.
But in order for it to be recognized, we of course have to import it.
So import App from, "./components/App" and I'm going to leave off the js at the end.
Now you can see it's working because we can see, "Hello App" instead of "Hello world".
So now we can tick-off
step 2. Step 3, is to create a Header
JSX component that renders a header element. So again that means we're going to be creating a new component
inside our already created components folder. And it's going to be called Header.jsx.
Now inside our Header.jsx we're going to do all the classic things that we always have to do
inside any component which is to import and then create the component which is a Header function and
then we're going to export it as the default. The header is going to be inserted into the App component
instead of the h1. And inside this header component,
we need to render a header element and a Keeper App name inside an h1.
So instead of returning nothing, let's go ahead and return a header element, and remember that the HTML
elements are lowercase and our custom components are always capitalized with PascalCase.
So this way React can differentiate when you are trying to use a custom React component versus when
you're just trying to tap into the native HTML elements. Inside this header HTML element, I'm
going to create an h1 element and this is just going to say Keeper because that's what I'm going
to name my app. You might name it something else, it really doesn't matter.
But now we're going to try and render this Header component inside our App.js instead of this
h1 right here.
So let's go ahead and add this as a self-closing tag and in order for us to use it, we of course have
to import the Header component from the "./header" file. And now once we refresh our website, you
can see that our header has gone in with all of the styling and all of the bells and whistles.
And the reason for this is because inside are public folder, we've got a styles.css file which
says that the header elements should always have a yellow background, has this margin, padding and the
box shadow at the bottom.
The h1 elements inside a header component should have this color and the McLaren font family.
So we're seeing all of these styles being applied just because we are using the same HTML elements which
are being targeted in our CSS. If in your case you don't see the styling being applied, then it might be
because you are actually not using the elements that are being targeted in your styles.css. If this
was something that you got stuck on, then it might be a chance to go back to your code and see if you
can continue the challenge with this knowledge in hand.
Now that we've completed step 3, it's time to move on to step 4. And step 4 is to create
a Footer component that renders a footer element to show a copyright message with a dynamically updated
year.
So let's go and create a new Footer.jsx and do all of the housekeeping.
And in terms of the footer, all we want to return is just a simple paragraph element. But the paragraph
element is hopefully going to write some text dynamically. So it's going to say something like copyright
and then maybe you can add in the copyright symbol if you wanted to, you can either copy it from here
or you can search in Google for the copyright symbol and just copy it from here.
Either way you should be able to get that symbol,
but the important part is that in the instructions we mentioned that we wanted a dynamically created
year.
So instead of just typing in 2019 in which case it's going to be out of date pretty soon,
and there are developers who feel really strongly about hating on websites that don't have a dynamic
footer.
There's even a website created called updateyourfooter.com so that you have a dynamic timestamp.
And they've got JavaScript snippets, PHP snippets, basically trying to encourage web developers to
always use a dynamic year in their footer.
So we already know how to create a dynamic year,
right?
We create a new Date()object with JavaScript and then we use the getFullYear() method.
So let's go ahead and apply it in our code.
You can either do this inline right here using a set of JSX curly braces, or you can create a
const here called the current year maybe, and set it to equal a new Date() object and then we get
full year, callback that method in order to store it inside this const.
And then you can just insert it in here.
Alternatively, you could have it inline by just putting this code inside here of course. Now the proof
is really in the pudding.
So let's go ahead and save our Footer.jsx and import it into our App.
And render it just below the Header,
like so.
And if you have the same appearance as I have and you're miffed as to, "How can I get it down at the bottom?
How can I get it
this particular color?"
Well, it's probably because we're not actually applying any styling to the text in our footer.
So in order to investigate, you can head into the styles.css and see how these styles are being targeted.
So for example, notice how we've got a position: absolute, text-align: center which should theoretically
center a HTML element,
but notice how that is targeting a footer HTML element. And also the text color of this kind of
gray color that you see here is targeting paragraph elements inside a footer element.
So it's really likely that you might have had the same problem because it's very easy enough to just
render a paragraph tag. But if you're not getting the styling, it might be because you're not wrapping
it inside a footer element which is what is used inside these styles.css
in order to convey all of this styling, the centering, and the color etc.
So that's a common source of confusion. But now we've completed step 4 and all we have left is to
create a Note component
and style the Note component. The Note component is probably going to go in between the header and the
footer, in the middle here.
So let's go ahead and create this new Note.
jsx component, import React from react,
export it as the default
and let's think about what it is that we need to write in order to create a new Note. So we want to have
a h1 and a paragraph which is going to denote the title and the content stored inside a div group.
And this is a very common way of grouping a component using a single divider
right?
Let's go ahead and add an h1 which we'll just call, 'This is the title' and then let's add a paragraph,
'This is the content', and it doesn't really matter what you put in here as long as you've got some content
that can be shown on screen.
Now, let's go into our App.js, import our Note
and add it in between the header and the footer.
So here it is.
But why does that not look like this?
Well, we need to look for clues inside the styles.css.
Here,
you'll notice that there is a class style called note and it defines things such as a box-shadow, border-
radius, padding and how it should be arranged.
And then we've also got styles for h1's, associated with the note class, paragraphs associated with
the note class.
So it seems like we need to apply this class style to our Note component.
This is a quick tip. You might think that you can actually apply the style inside your custom component.
You might say something like className,
remember that's the React way of targeting a particular
CSS class, and className equals
note right?
But unfortunately this does not actually do what you expect it to do. That note style is not in fact
being applied and we're going to learn about this a little bit later on when we learn about React properties
but essentially, whenever you are applying a HTML attribute such as class name or style or onClick or
all of those things, they shouldn't go into your custom component, so the components that you've created
like note or header or footer. Instead they need to be applied to a HTML element such as our div
here.
So if I go ahead and add my className right here with the name of note, you'll see that this now works
predictably. And we're going to be talking about this a little bit later on
so remember that when you're using HTML attributes they can only be applied to HTML elements
even if it's inside the JSX and not your custom created React elements.
So now that we've completed everything in our challenge, we can take a look at the final website we've
created using what we've learnt about React. And you can see that it looks pretty much exactly the same
as the sample app that I gave you to compare against.
How did you get on with this challenge?
If there was anything that was confusing, I recommend to just take a moment and play around with the
code and change some things or switch things around just so that you really get to grips with it
before moving on.
This is kind of a checkpoint or a save point if you will, and it's a good idea to even just take a break
and have a think about it before you move on. But once you're done then head back and in the next lesson
we're going to be learning about React properties.
So for all of that and more, I see there.