We've now got our two services put together.
So now it's time to start working on our ReACT application.
We start working on the react app.
Just a quick note.
If you don't know react or if you don't want to work with it at all that is not a problem.
This skip the videos or about to go through that focus on this react application and you can download
all the completed react code in just a couple videos.
Now at some point in time this application I will ask you to make a couple of changes to this react
project.
But in general it'll be a small set of changes so it shouldn't be too bad.
OK.
So with that might let's get started.
The first thing we're going to do is come up with a general component design for our ReACT application
on the left hand side I've got a mockup of our app on the right hand side.
I've got a component hierarchy that I think we should try to implement.
So at the very top is gonna be our classic app component we're then going to have a post create component
the post great component as your guest is going to show that form right there.
Well then also have a post list component the plus list component is going to render everything on the
bottom half the page the post list is going to be in charge of showing the actual post themselves.
And for every post will also show a comment list and a comment create component comment list is going
to be in charge of rendering out a list of comments that have already been associated with the post.
So right now in this mock up there's only one comment listed but we could easily have five 10 20 however
many comments listed right there and then comment create as you would guess is going to be this form
down here at the very bottom.
So comment create will be in charge of creating an actual comment and associating it with a given post
all right.
So that's our component design.
Let's now flip on over torch terminal.
We're gonna start up our code editor inside of our ReACT project directory.
We're going to start up a react application and start doing a little bit of initial setup all right.
So I'll flip back over to my terminal.
Here's my client project directorates that's where my react project is going to open up my code editor
inside their and then I'll flip back over to my terminal.
We're gonna do a very quick npm install here.
We're gonna get the axles module just so we can make requests over to our Express API in a little bit.
So I'll do a quick npm install
and then after that is complete I'll make sure I do it in NPM start to start my project up and come
on come on every go.
So NPM start all right.
So it's going to start up our ReACT application hopefully on port three thousand.
Yep there it is right there.
All right.
So I'm not going to open up my editor inside of our ReACT project so make sure you're inside of your
client directory inside of your editor.
And then going to open up my s see directory and I'm going to delete everything inside there.
The reason for that is that every now and then the react boiler plate changes just a little bit.
There's a ton of regenerated code inside there that we really don't need.
So it's a lot easier to just start off from scratch than inside my s RC folder.
I'll make an index dot J File also make a app dot j ust file so our app dot J S file as your guest is
going to be our app components.
We're going to create the component side of here.
We're then going to import it into the index not j ust file and then render it into some actual DOM
element let's first start inside of APT.
J.S. at the very top I will import react and react well then do an export default and for it now all
destroy tentative that says most app or how about blog app doesn't really make a difference.
Well then save this file I'm going to change back over to the index not just file that we just created
I'm going to import react from react and react Dom from react dash Dom.
Well then get my app component and then finally we'll do a react Dom dot render.
I'm going to try to show an instance of my app component I want to render it into my index dot e-mail
file that I go into my public directory find that file just as a quick reminder we are given this div
right here at an idea route which is traditionally where we're going to render our route component to
so as a second argument to react on dot render pass passing a reference
to that root element like so yeah.
So let's say this and then gonna go back over to my browser going to refresh the page looks like the
entire process crashed because we deleted that indexed dot J as file.
No problem.
Holdco backward my terminal and restart the development server so once that is restarted go log app.
All right.
So humble beginnings we still have a lot of components to put together so quick pause start working
on that entire component hierarchy in just a moment.