Introducing the Project

Now it's time to open up the project files and start coding. 0:00 You can download the starter files for 0:03 this course in the downloads section of this video. 0:04 I've also posted the link in the teacher's notes. 0:07 Before you get started, you'll need to have Node.js and 0:08 NPM installed on your computer. 0:11 If you haven't done that yet, 0:13 you'll find links in the teacher's notes to instructions on how to install these. 0:14 So first, let's have a look at the app you're going to create. 0:18 The project for 0:21 this course is a simple Front End Course Directory built with React. 0:22 The colorful directory has four main sections, home about, teachers, 0:25 and courses. 0:28 When the app loads, you immediately know that you're viewing the home section, 0:29 because the home link in the menu is active. 0:32 And as you navigate through the app by clicking the nav links, 0:35 you'll notice that the menu links become active and 0:38 the browser doesn't reload the app when the URL changes. 0:41 This is all done via routing. 0:44 For example, clicking About renders an About component. 0:46 Clicking Teachers renders a list of Teachers, and so on. 0:49 Over in the Courses section you'll see a subnavigation that links to 0:52 courses on different topics like HTML, CSS, and JavaScript. 0:56 Clicking a subnavigation link not only loads new content but also changes 1:00 the path in the URL, while keeping both the topic and Courses link active. 1:05 And you can navigate the app with the browser's back and forward button buttons, 1:10 even refresh the app, and the UI will always be in sync with the URL. 1:15 Later in the course, you'll even learn how to change routes programmatically and 1:21 build routes that accept dynamic parameters. 1:24 For example, in the home component, I included a simple form that navigates 1:27 to a route in response to the form submission. 1:31 If you type a name and subject into the fields, the form redirects 1:33 you to a URL that includes the name and the subject in its path. 1:38 And you can even render the name and subject in your content via routing. 1:42 All right, now let's take a look at the project starter files. 1:46 I'm using Atom as my text editor for this course, 1:49 but you can use your preferred text editor. 1:52 I set up the app using the tool create-react-app, so 1:54 make sure you've installed it before working on this project. 1:57 I've posted a link to a Treehouse video on installing and 1:59 using create-react-app in the teacher's notes. 2:02 In your terminal or console, navigate to the course directory project folder and 2:05 run, npm install, to install all the project dependencies. 2:09 Over in our project files, 2:16 we're going to be working with the files in the source directory. 2:17 This contains the app's main entry file, index.js. 2:21 A components folder with all the components that make up the app. 2:24 And a CSS folder. 2:28 Now the style sheet already contains the styles for the app, so 2:30 we won't be working with the CSS, but you can change it as you please. 2:33 And our project consists mostly of pure or stateless components. 2:37 In other words, components that don't initialize or change a state. 2:42 They are simply functions with just a render method and no state. 2:46 And the data we're going to use in the app will come from the teachers.js and 2:51 courses.js files located here in the data folder. 2:55 So, for example, we'll use the CSS, HTML, and 2:59 JavaScript courses arrays here to render a list of front end courses. 3:02 And the TeacherList array to render a list of teachers. 3:07 Now, most of the time you won't keep your data in files like this. 3:10 More commonly, you'll retrieve this data from the server using an API. 3:14 But for this course, since we're focusing on routing and 3:18 just the components being rendered, we'll use this data along with the simple 3:21 stateless components to make the concepts I'm teaching easier to understand. 3:25 All right, now let's launch the app from the terminal or 3:29 console by running npm start. 3:33 Now, we're not seeing anything too exciting in the browser just yet. 3:36 We're only seeing the course directory's container or wrapper div, 3:38 which lives here inside the file app.js. 3:43 And as I showed you earlier, we're going to use React Router to dynamically load 3:46 and unload components inside the app component. 3:51 React Router will pay attention to the browser's address bar for 3:54 changes in the URL, then render the components for that URL. 3:57 Coming up in the next video, you'll install React Router and 4:02 create your first route. 4:04 See you there. 4:06