Instructor: In the last section, we installed
a couple of modules into our newly generated project.
I've started up my development server
by running npm run start inside of my client directory.
So now our development server for the front-end application
is running on Port 3000.
I still have my backend API server running as well
on port 3090.
Okay, so I've also, one other quick thing, I've started
up my code editor already inside my client directory.
So here is the React project that we just generated.
Inside this section, we're gonna do a little bit of cleanup
of some of the default code that we got inside of here.
So we're gonna delete a couple of automatically
generated files outta this thing
and start putting together the React
and Redux sides of our application.
So just as we did way way earlier inside this course,
I personally don't really like using pre-generated code,
so I'm gonna take the entire src directory
and we're gonna delete it.
So we're gonna build out this entire
authentication application from scratch.
So now, inside the client directory,
I'll make a new folder called src,
and then inside there, I'll make my root file of index.js.
Inside of index.js, we're going to import React,
we're gonna get ReactDOM,
we'll very quickly make an app component,
and then pretty soon we'll wire up
React Router DOM to this thing as well.
So at the top, I'll get started by making
an import statement for React from 'react',
and I'll get ReactDOM from 'react-dom'.
Now we're definitely going to need
some component to show on the screen,
so let's make an app component right away.
The app component is gonna be kinda the centralized location
of our entire application on the React side of things.
Inside my src directory,
I'm gonna make a new folder called components,
and then inside there, I'll make an App.js file.
Inside of App.js, we'll put together some boiler plate
for a functional component.
I really don't think this App component is going to need
many helper methods or any component level state as well.
So I think a functional component will do just fine.
So at the top, I will import React from 'react',
and then I will export default, an arrow function,
that just returns a .
And let's just say, Hi, I'm the app.
Good enough for now.
So then I'll save this file,
and then I'll flip back over to the index.js file.
So back over inside of index.js,
we'll import the app we just created.
So import App from './components/App'.
And then down beneath that,
we'll do our ReactDOM.render call, so ReactDOM.render.
We'll throw our in there.
And as a second argument,
we'll do our document.querySelector,
and we'll get that root HTML element.
So here's our HTML document.
We're looking for the <div with an id of "root".
So we're going to do a querySelector of '#root' like so.
Okay, humble beginnings.
Let's flip back over to the browser and see how we're doing.
So back over here, if I do a forceable refresh on the page,
we might have to restart our development server
'cause we did nuke that default file.
Oh no, we're good to go.
All right, so we've got Hi, I'm the app on the screen.
Again, humble beginnings, but it's a place to get started.
So let's take a pause right here.
We're gonna come back to the next section
and start adding in some navigation to our app as well.