Instructor: In the last section,
we created a couple of different files and folders
to get our project started.
We'll first begin inside of our App.js file.
Inside of here, we're gonna put together
just a little bit of boilerplate code
and then we'll use our index.js file
to make sure that it's visible on the screen.
So inside of App.js, I'll first get started
by importing React from react and then inside this component
we're going to make a very simple functional component.
So we'll say export default, we'll place an arrow function
and then for right now,
we'll say that this is going to return a div
with the text on the I'm the app component.
So very simple, very humble beginnings to get started.
I'll then save this file
and then we'll immediately flip over to our index.js file
where we will import the app
and make sure that we render it out
to be visible on the screen.
So inside of index.js, at the very top,
we will import React from react.
We will import ReactDOM from react-dom
and then we'll also import the app component
that we just created.
So I'll import app from components/App.
And then finally at the bottom of the file
we're gonna make use of the ReactDOM library
to render an instance of the app component
out to the screen.
So remember how we render a component out
directly to the DOM?
We call ReactDOM, with capitals on DOM right there.
Don't forget that. We'll call render.
We'll then pass in an instance of the component
that we want to show on the screen.
So in this case it's going to be our app component
and then the second argument
will be a reference to a DOM element on the page.
Now anytime we make use of Create React app
we get this public directory
with an index.html file inside of it.
Anytime a user visits our application,
this index.html file will be loaded up
and then that file will pull in all the JavaScript
tied to our project.
So if we open up this HTML document
and scroll down towards the bottom,
you'll find a div right here with an ID of root.
So this is intended to be the root div
of the entire React application.
So we're going to write a query selector
that's going to attempt to find this div element.
Back inside of our index.js file,
we'll do a document.querySelector,
and then to select that div, we'll enter in a string.
And let's new line this very quickly
just so we can see the whole line.
There we go.
So we're gonna do pound root like so.
So that's going to attempt to find that div
with an ID of root.
I'll then save this file
and then we'll test out this inside the browser.
We'll need to first make sure that we start up
the development server for Create React app.
So to do so, I'm gonna go back over to my terminal
and inside of my project directory,
I'll run the command npm run serve...
Excuse me, not serve. We want start.
So we'll run that
and that will start up our development server
that's going to try to bundle those three different files
that we just created together
and then serve them up inside the browser.
Now when I start npm run start right here,
it's gonna take me just a minute to load stuff up,
simply because when I'm running
this desktop recording software on my computer,
well, it tends to bog things down just a little.
So after a very brief pause here
or maybe in my case not that brief,
I will see my application up here on the screen.
And at this point
all I'm really expecting is to see the output
of that app component,
which says simply, right over here,
just the I'm the app component, and nothing else.
That's all we really expect right now.
So if I go back over, you know what, this is taking too long
but I'm sure you've already seen output on yours.
So let's take a quick pause right here.
When we come back to the next section,
we will wire up our comment list and comment box
to the app component.