All right.
So here's the starting file for the React Components Practice, and the aim of the game is to separate
out all of this code into a separate component. By the end
you should have a single component which is called App inside your index.js,
and then you should have two separate JSX files, an App.jsx, and a Heading.jsx.
And you should be able to use what you learnt from the previous lessons to separate out a lot of this
logic into different components.
Pause the video, fork the sandbox and see how you get on.
All right.
So here I've got the original code and we're rendering a single h1 element which is the "heading" which
is showing up right here. And what we want to do is we want to clear out all of the code from our index.js
so that it's only rendering a App component.
So let's go ahead and cut this h1 element and move it over to our Heading.jsx, and also
the code that's required to render the heading,
so all of this logic, we're going to cut it out of our index.jsx
jsx and move it over here as well.
Now remember we need our React module in order to render JSX, so let's go ahead and import React
from "react".
And now we're going to create a function that is going to be called Heading,
and this function is going to enclose all of this code.
So I'm going to cut this part out, and then move it to the bottom here.
The final thing we need to do is we need to give our function an output, so tell it what it needs to
return
and it's, of course, going to be this h1 with class name of "heading", with style that's dynamically
determined by a code above and the greeting is also determined by the time of day using our JavaScript
code inside this adding component. The final thing we need to do with our Heading component is to export
this Heading() function. So let's go ahead and export default Heading and now we can save it and use it
inside our App.js. So our App.js
is going to be the starting point of our component tree.
So it's going to import from React and then it's simply going to have a function called App, and we're
just going to return one component in this case.
So normally, you would probably have a div with multiple components.
In our case, we could have the div or we could simply leave it out because all we want to return is just
that custom-heading component which of course comes from the Heading.jsx file which we'll need
to import if we actually want to use it.
Finally, we're going to export our App as the default export from this file and then we're going to go
back over into our index.js, and we're going to try and use that App element inside the ReactDOM render()
method.
So let's go ahead to
import App from "./App."
And remember what I said in the last lesson that normally you would have a directory called components
to store all of these JSX components
and in that case then instead of ./App, it would be ./components/App and we get
back exactly the same website that we had in the beginning, but now we've got a starting point for our
app which is the App.jsx component and then inside that App.jsx
we've got a child component which is the heading that is worked out from the custom code right here.
So did you manage to get it right?
If not be sure to have a review of the last lesson.
But in the next lesson, we're going to do a deep dive on this import and export keyword that we've been
seeing a lot in the last few lessons.
And this is something that comes from ES6.
If you're interested in learning more about how imports and exports and how modules work in ES6, then
head over to the next lesson.
But if you're already really familiar with this and you've already used it and you're comfortable with
it, then feel free to skip the next lesson and continue in the curriculum.
So whichever way you choose,
I'll see you on the next lesson.