Instructor: Our app test file and our app component
are both complete.
So we're now ready to move forward with our application.
In this section, we're gonna start working
on our CommentBox component
which is placed inside the CommentBox.js file.
You'll recall that the CommentBox is responsible
for this text area at the top
along with the submit button right underneath it.
So putting this component together is gonna be pretty
straightforward.
Remember, we're going to eventually work
in Redux to this application.
We haven't added it in just yet, but we will very shortly.
So for right now
we're just gonna start to put together the component itself.
We'll write out a test or two around it
and then eventually we'll come back up
come back around and hook redux up to the component.
So let's get to it.
I'm gonna get started by making sure
that I have my CommenBox.js file open
and inside of here
I'm going to replace the functional component
that I've created with a class-based component instead.
This component is going to be responsible
for watching input from a user.
And so we definitely want to make it class-based
so that we have access to component level state
and can easily add callback methods to it as well.
So I'm going to delete the entire function we had in there
and replace it with class CommentBox extends react
or excuse me, component.
I was gonna say let's not forget to import component
from React as well, like so.
So then inside of here, I'll place my render function.
I'm going to return.
Right now. How about just a form tag?
And inside there we'll put down an h4
with the text of add a comment.
I'll put down a textarea and I'll put down a
div that contains a button as well.
And I'll make that button say something like submit comment.
I think that's reasonable.
And then finally, at the very bottom of the file
I'm going to export default the CommentBox
All right, so that looks pretty reasonable right now.
I'm gonna save this file.
One quick thing I wanted to point out to you at this point
of time is you'll notice now that the CommentBox
component no longer has the text.
I am a CommentBox being displayed.
It doesn't say anything about a CommentBox.
Yeah, it says comment, but it doesn't say anything
about CommentBox.
And so going back to that discussion we were having just
a moment ago about making sure that we write our test to
make sure that a given test file does not try to
make assertions about the inner workings
of other components.
You'll notice if we go back over to the app.test.js file
we do not have to make any modification to
this test file now before it had a reference
to the actual contents of the CommentBox component.
But we remove that.
So now we don't have to go back and modify our app test file
in any way, which is definitely good.
Okay, so inside the CommentBox
I'll very quickly flip back over
To my browser and open up the React application.
And it looks like I've now got my text area
on here along with the submit comment button as well.
So this is a good start.
Let's continue in the next section
and we're going to hook up a couple of event handlers
to this thing and then get started on a test around it.
So quick break and I'll see you in just a minute.