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