Setting up the Project

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