- [Instructor] The first thing that we have to do is create
and setup the directory that will hold our React project.
First you've got to create a directory and call it
React Ecosystems or something like that like I've done here.
And once you've done that,
open up a terminal inside that directory
and run npm init -y to initialize a new npm package.
And that'll create this package.json file here for us.
And if you want to initialize this
as a new git repo as well,
now is a good time to run git init.
And once we've done that,
let's create two directories inside of our root directory.
We're going to call the first one public.
This will hold all the publicly accessible resources
for our app just like in a regular static website.
And we're going to call the second one src.
S-R-C.
This will hold our actual react code.
The next thing that we're going to do
is create a file called index.html
inside the public directory that we just created.
Index.html
This index.html file will be what gets sent to the client
when they send a request to our site.
So what we need to put inside this file
is a bit of very, very basic html that will look like this.
We're going to start out with a DOCTYPE tag at the top,
and then the html tags.
And inside here we're going to have the header.
And it's just going to have a few helpful things inside.
So we'll say meta charset=UTF-8.
Meta name=viewport
content=width=device-width,
initial-scale=1,
shrink-to-fit=no.
Just some very basic stuff that you'll see in most html.
And finally the title tag,
we'll just say React Ecosystems.
That'll be what gets displayed
at the top of the tab of course.
And that's it for the head,
now we move on to the body.
And we're going to define a div here that's very important.
It needs to have the ID root.
And this is the div that React
will eventually render our app into.
We'll see how to do that really soon.
And then we usually include a noscript tag
just in case the user
has JavaScript disabled in their browser.
We say something like
"Please enable JavaScript to view this site"
And last but not least we need a script tag down here
to load our React code.
We're going to say script src=
and then ../dist/bundle.js.
And note that this bundle here doesn't exist yet.
We're going to get to that in just a minute.
So make sure to save your file,
and that's all we need for our index.html file.
It's pretty boring, isn't it?
All the magic is going to happen in our React code.
But first, in order for our React code to actually work,
we'll need to add support for ES6.