-: At the end of the last section
we got our app component visible on the screen.
Now you might notice that my text right here
is a little bit larger than yours.
Anytime I show you my browser
I'm usually running it pretty far zoomed in.
So yours probably looks a little bit closer
to this right here.
I just run it a little bit larger
so you can see my screen more clearly.
Now that we've got our app component visible
let's go take care of some starting code
for our comment box in our comment list.
We'll get those visible inside of our app component
and then we'll start thinking
about how we're gonna write a test around the app.
All right, so I'm gonna go back over to my editor
and I'll open up my Comment Box and my Comment List files.
We'll first take care of our comment list.
So inside the Comment List dot js file
I will import React from react
and then I will export default a functional component.
So we're going to eventually come back and make this
into a class based component, but for right now
we'll just get started easily with a functional component.
So I'll put down my arrow function, and from this
I will return a div that has the text Comment List like so.
Then we'll do the exact same thing
inside of our comment box.
So inside of comment box dot js I will import react.
Oops, capital R, from react.
And then we'll do an export default
with a functional component that returns a div
with the text Comment Box like so.
So we've now got both these components put together.
We can now import them into the app component
and display them inside there.
So back inside of app dot js
I will go up to the top of the file.
I will import Comment Box from in the same directory
Comment Box, and then the same thing
or Comment List as well.
Now inside of the app component itself
we can replace the text that's right here
with those two components that we just imported.
Now I'm gonna do a little bit of reformatting here.
I'm gonna clear everything out.
I'll put down a set of parentheses and give myself
just a little bit of space to write out this jsx.
So I'll first place my div inside there.
I'll place the comment box at the top,
and then right underneath that
I'll do my comment list like so.
And then if I save the file, I should be able to go back
over to the browser and find the text for the comment box
and comment list visible on the screen.
And when I flip back over, there's the reload,
and Comment Box, and Comment List.
Perfect.
Okay, so we've now got this kind of initial state
or this very early version of our application,
but it's never too early to write a test.
So in the next section, we're gonna take a break right now,
and then in the next section,
we're gonna figure out how we're gonna write our first tests
around that app component.
And these tests are gonna verify
that the comment box is visible
and the comment list is visible as well.
So quick break and I'll see you in just a second.