Normally when starting a React project,

I use Create React App to make the boilerplate files and code I need.

We have a workshop at Treehouse on using Create React App to start a project, so

feel free to view that content, if you haven't yet.

I put a link to the workshop in the teacher's notes.

You can also use Create React App to start the app for this course if you want.

Now, things change in the JavaScript world fairly quickly.

So I've taken an extra precaution to make sure you'll be able to complete

this course, even if Create React App changes from the time I'm recording this.

So, in the teacher's notes, I've provided a folder you can start from.

Just download it, unzip it, and run npm install.

This just ensures minor changes won't break the whole app.

Once you've run npm start to start the development server,

the server should open a page in your default browser.

And you'll see this default screen that Create React App created for you.

Now let's look at the assets we're going to be working with.

And you'll need to download them from a link in the teacher's notes.

Inside the folder, there's an index.html file and a CSS file inside the CSS folder.

If I open index.html in the browser, you can see we have a styled,

static version of the app.

Now, none of these buttons do anything yet,

because it will be our job to bring them to life with React.

These are all just placeholders we can use to guide our work.

So I'm going to set up the project from scratch using Create React App.

Feel free to follow along, or again, use the project folder I've provided.

In my terminal, I'll create he project with the command

create-react-app, and I'll name the project rsvp.

Once the project is created, I'll navigate inside the rsvp directory,

then run npm start to start the development server.

First, let's move the static assets like the stylesheet and

images over to the rsvp React app we just started.

I have both the assets folder and the rsvp folder open here.

So I'll start by copying the favicon from the assets folder into

the public folder to replace the one Create React App supplies.

Notice I copied the file instead of moving it.

It's better to leave the original assets intact in case I mess up

something later and I need a fresh copy again.

So I'll copy all the assets for this reason.

Next, I'll copy the images folder into the app source folder.

Now, we'll copy the HTML and styles.

For the styles,

we can copy the CSS file inside the CSS folder into the source folder.

And we want this to be the app styles, so we'll rename it to index.css.

But first, let's delete the existing index.css file.

Then we'll rename style.css to index.css.

And I'll go ahead and drag the index.html file over to the source folder too.

Because we'll need to open this file up and copy out some parts.

Next, I'll open the project folder in a text editor so

I can see the contents of index.html.

I'm using Atom, but

feel free to use whatever text editor you feel comfortable with.

So first, I'll open index.html inside the source folder.

And from here, I wanna copy the contents of the body,

which is a div with the class app.

So I'll select and copy the div and all of its contents.

Then in the main app component, which is inside the file app.js,

I'll render the content I just copied from my index.html file by

replacing the div with the class name app.

I'll give this file a save.

And since we've added new files to our project,

let's go back to the terminal and stop and restart the app.

So now if you look at the browser where the app is rendered,

you can see we're getting an error.

Well, that's because we've pasted HTML where React expects JSX,

and the two are not exactly the same.

So this error is occurring because the JSX expects any elements

with no closing tag to self close.

For example, the input elements have no closing tag so I'll add a space and

a slash just before the angle bracket at the end of each input.

So first here on line 13, then on line 21.

Scroll down to the input on line 44.

The one below on 51, and the one on line 58.

I'll give it a save, and now we're getting a different error.

The CSS file can't find the image file.

Well, the assets folder had a different structure than our app does now so

we just need to update the URLs and the CSS file.

So I'll open up index.css and scroll down to line 98, and

instead of having to go up a folder to find the images directory,

the CSS file just needs to look in the current directory.

So I'll remove the first dot from the URL.

After saving, we have something close to what we wanna see in the browser.

It looks like the styling is a little off and we're not getting the right fonts yet.

Looks like our CSS class rules aren't getting applied.

Well, that's because JSX expects class name attributes rather

than class attributes to target CSS classes.

And if you wanna explore JSX a little more, check the teacher's notes for links.

So here, in the app component,

I'm gonna change these class attributes to className attributes.

And to do that, I'll do a quick Find and Replace All So

here, I'll replace class with className.

And I don't wanna replace the JavaScript class keyword here with name,

so I'll change this one back to class, give this a save,

and now the styles look a lot better in the browser.

Next, let's load our fonts.

So, I'll go back to index.html and copy the links to

the fonts here, Lines 7 and 8.

Then I'll go over to the public directory and open up index.html and

I'll paste them into this file right above the title element.

And while we're here, let's change the title to rsvp.

Switching back to the browser,

you can see the fonts are now loading and the title has updated, great.

So now we have everything we need from this index.html file in

the source folder, so I'll just delete it.

And I'll also delete this image file that Create React App made by

default, logo.svg.

And since we won't be using this image, let's remove where we import it here in

App.js If I switch over to the browser,

I see that there is a slight issue with our styles.

Notice how everything here is centered.

Well, that's because we're getting

some styles in addition to the ones we imported.

This style is coming from the app component CSS file here in App.css,

which Create React App used to style the page we saw when we first started the app.

So we wanna remove them from our project.

So here in App.css, I'll select and

delete every rule in this file and give it a save.

And the stylesheet is still being loaded by the app component here on line 2.

You can remove this line if you want to, but I'll leave it here just to remind you

how it's connected, in case you wanna play with overriding the styles on your own.

So now in the browser, you can see the page is looking perfect.

If you happen to have your dev tools console open though,

you'll see a couple of errors.

Now, these are fine for now.

They're just saying that we haven't connected some of our inputs to be handled

by React, and these will go away as we code the app.

So we're in great shape to start making this app into an interactive app.

Before we do though, let's plan our components out and

think about how data will move through the app.