Preview
Video Player
00:00
00:00
Setting up the Project
8:50In this video, we'll initialize the project using Create React App. Then, set up assets like styles, images and template code.
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