Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll initialize the project using Create React App. Then, set up assets like styles, images and template code.
Starter Files
If you're not using Create React App, you can download the project files here.
Resources
Related Courses and Workshops
Normally when starting a React project,
0:00
I use Create React App to make
the boilerplate files and code I need.
0:02
We have a workshop at Treehouse on using
Create React App to start a project, so
0:05
feel free to view that content,
if you haven't yet.
0:09
I put a link to the workshop
in the teacher's notes.
0:12
You can also use Create React App to start
the app for this course if you want.
0:14
Now, things change in the JavaScript
world fairly quickly.
0:18
So I've taken an extra precaution to
make sure you'll be able to complete
0:21
this course, even if Create React App
changes from the time I'm recording this.
0:25
So, in the teacher's notes,
I've provided a folder you can start from.
0:30
Just download it, unzip it,
and run npm install.
0:34
This just ensures minor changes
won't break the whole app.
0:35
Once you've run npm start to
start the development server,
0:38
the server should open a page
in your default browser.
0:42
And you'll see this default screen
that Create React App created for you.
0:45
Now let's look at the assets
we're going to be working with.
0:49
And you'll need to download them
from a link in the teacher's notes.
0:51
Inside the folder, there's an index.html
file and a CSS file inside the CSS folder.
0:54
If I open index.html in the browser,
you can see we have a styled,
1:01
static version of the app.
1:05
Now, none of these
buttons do anything yet,
1:07
because it will be our job to
bring them to life with React.
1:09
These are all just placeholders
we can use to guide our work.
1:12
So I'm going to set up the project
from scratch using Create React App.
1:15
Feel free to follow along, or again,
use the project folder I've provided.
1:20
In my terminal,
I'll create he project with the command
1:24
create-react-app, and
I'll name the project rsvp.
1:29
Once the project is created,
I'll navigate inside the rsvp directory,
1:38
then run npm start to start
the development server.
1:44
First, let's move the static
assets like the stylesheet and
1:48
images over to the rsvp
React app we just started.
1:51
I have both the assets folder and
the rsvp folder open here.
1:54
So I'll start by copying the favicon
from the assets folder into
1:59
the public folder to replace
the one Create React App supplies.
2:03
Notice I copied the file
instead of moving it.
2:07
It's better to leave the original
assets intact in case I mess up
2:09
something later and
I need a fresh copy again.
2:14
So I'll copy all the assets for
this reason.
2:16
Next, I'll copy the images folder
into the app source folder.
2:19
Now, we'll copy the HTML and styles.
2:27
For the styles,
2:30
we can copy the CSS file inside
the CSS folder into the source folder.
2:31
And we want this to be the app styles,
so we'll rename it to index.css.
2:37
But first,
let's delete the existing index.css file.
2:43
Then we'll rename style.css to index.css.
2:50
And I'll go ahead and drag the index.html
file over to the source folder too.
2:54
Because we'll need to open this
file up and copy out some parts.
3:00
Next, I'll open the project
folder in a text editor so
3:03
I can see the contents of index.html.
3:06
I'm using Atom, but
3:08
feel free to use whatever text
editor you feel comfortable with.
3:10
So first, I'll open index.html
inside the source folder.
3:13
And from here,
I wanna copy the contents of the body,
3:18
which is a div with the class app.
3:22
So I'll select and copy the div and
all of its contents.
3:25
Then in the main app component,
which is inside the file app.js,
3:29
I'll render the content I just
copied from my index.html file by
3:34
replacing the div with the class name app.
3:39
I'll give this file a save.
3:45
And since we've added new
files to our project,
3:46
let's go back to the terminal and
stop and restart the app.
3:50
So now if you look at the browser
where the app is rendered,
3:57
you can see we're getting an error.
4:00
Well, that's because we've pasted
HTML where React expects JSX,
4:02
and the two are not exactly the same.
4:07
So this error is occurring because
the JSX expects any elements
4:10
with no closing tag to self close.
4:15
For example, the input elements have
no closing tag so I'll add a space and
4:17
a slash just before the angle
bracket at the end of each input.
4:24
So first here on line 13, then on line 21.
4:30
Scroll down to the input on line 44.
4:34
The one below on 51,
and the one on line 58.
4:40
I'll give it a save, and
now we're getting a different error.
4:44
The CSS file can't find the image file.
4:50
Well, the assets folder had a different
structure than our app does now so
4:54
we just need to update the URLs and
the CSS file.
4:59
So I'll open up index.css and
scroll down to line 98, and
5:02
instead of having to go up a folder
to find the images directory,
5:07
the CSS file just needs to
look in the current directory.
5:11
So I'll remove the first dot from the URL.
5:16
After saving, we have something close
to what we wanna see in the browser.
5:22
It looks like the styling is a little off
and we're not getting the right fonts yet.
5:27
Looks like our CSS class
rules aren't getting applied.
5:32
Well, that's because JSX expects
class name attributes rather
5:36
than class attributes
to target CSS classes.
5:40
And if you wanna explore JSX a little
more, check the teacher's notes for links.
5:43
So here, in the app component,
5:48
I'm gonna change these class
attributes to className attributes.
5:50
And to do that,
I'll do a quick Find and Replace All So
5:54
here, I'll replace class with className.
6:02
And I don't wanna replace the JavaScript
class keyword here with name,
6:07
so I'll change this one back to class,
give this a save,
6:13
and now the styles look
a lot better in the browser.
6:18
Next, let's load our fonts.
6:23
So, I'll go back to index.html and
copy the links to
6:25
the fonts here, Lines 7 and 8.
6:30
Then I'll go over to the public
directory and open up index.html and
6:36
I'll paste them into this file
right above the title element.
6:43
And while we're here,
let's change the title to rsvp.
6:52
Switching back to the browser,
7:00
you can see the fonts are now loading and
the title has updated, great.
7:01
So now we have everything we need
from this index.html file in
7:06
the source folder, so I'll just delete it.
7:10
And I'll also delete this image
file that Create React App made by
7:21
default, logo.svg.
7:23
And since we won't be using this image,
let's remove where we import it here in
7:29
App.js If I switch over to the browser,
7:33
I see that there is a slight
issue with our styles.
7:39
Notice how everything here is centered.
7:42
Well, that's because we're getting
7:46
some styles in addition
to the ones we imported.
7:48
This style is coming from the app
component CSS file here in App.css,
7:52
which Create React App used to style the
page we saw when we first started the app.
7:56
So we wanna remove them from our project.
8:02
So here in App.css, I'll select and
8:04
delete every rule in this file and
give it a save.
8:07
And the stylesheet is still being loaded
by the app component here on line 2.
8:11
You can remove this line if you want to,
but I'll leave it here just to remind you
8:16
how it's connected, in case you wanna play
with overriding the styles on your own.
8:20
So now in the browser,
you can see the page is looking perfect.
8:24
If you happen to have your dev
tools console open though,
8:27
you'll see a couple of errors.
8:30
Now, these are fine for now.
8:32
They're just saying that we haven't
connected some of our inputs to be handled
8:34
by React, and
these will go away as we code the app.
8:38
So we're in great shape to start making
this app into an interactive app.
8:41
Before we do though,
let's plan our components out and
8:45
think about how data will
move through the app.
8:48
You need to sign up for Treehouse in order to download course files.
Sign up