1 00:00:00,500 --> 00:00:04,037 Now it's time to open up the project files and start coding. 2 00:00:04,037 --> 00:00:06,064 You can download the starter files for 3 00:00:06,064 --> 00:00:08,793 this course in the download section of this video. 4 00:00:08,793 --> 00:00:11,831 I've also posted the link in the teacher's notes. 5 00:00:11,831 --> 00:00:15,187 Before you get started, you'll need to have Node.js and 6 00:00:15,187 --> 00:00:17,114 NPM installed on your computer. 7 00:00:17,114 --> 00:00:18,908 If you haven't done that yet, 8 00:00:18,908 --> 00:00:24,420 you'll find links in the teacher's notes to instructions on how to install these. 9 00:00:24,420 --> 00:00:27,770 So first, let's have a look at the app you're going to create. 10 00:00:27,770 --> 00:00:28,907 The project for 11 00:00:28,907 --> 00:00:33,992 this course is a simple front end course directory built with React. 12 00:00:33,992 --> 00:00:38,290 The colorful directory has four main sections, Home, About, 13 00:00:38,290 --> 00:00:40,050 Teachers, and Courses. 14 00:00:41,670 --> 00:00:47,792 When the app loads, you immediately know that you're visiting the Home section, 15 00:00:47,792 --> 00:00:51,039 because the home link in the menu is active. 16 00:00:51,039 --> 00:00:55,176 As you navigate through the app by clicking the nav links, 17 00:00:55,176 --> 00:00:58,892 you'll notice that the menu links become active and 18 00:00:58,892 --> 00:01:03,044 the browser doesn't reload the app when the URL changes. 19 00:01:03,044 --> 00:01:05,812 This is all done via routing. 20 00:01:05,812 --> 00:01:11,064 For example, clicking About renders an about component. 21 00:01:11,064 --> 00:01:16,120 Clicking Teachers renders a list of teachers, and so on. 22 00:01:16,120 --> 00:01:20,735 Over in the Courses section, you'll see a sub 23 00:01:20,735 --> 00:01:26,296 navigation that links to courses on different topics, 24 00:01:26,296 --> 00:01:29,859 like HTML, CSS, and JavaScript. 25 00:01:29,859 --> 00:01:35,167 Clicking a sub navigation link not only loads new content, 26 00:01:35,167 --> 00:01:38,456 but also changes the path in the URL, 27 00:01:38,456 --> 00:01:43,355 while keeping both the topic and courses link active. 28 00:01:43,355 --> 00:01:48,817 And you can navigate the app with the browser's back and forward buttons, 29 00:01:48,817 --> 00:01:53,595 even refresh the app and the UI will always be in sync with the URL. 30 00:01:53,595 --> 00:01:59,811 Later in the course, you'll even learn how to change routes programmatically and 31 00:01:59,811 --> 00:02:03,382 build routes that accept dynamic parameters. 32 00:02:03,382 --> 00:02:08,153 For example, in the Home component, I included a simple form 33 00:02:08,153 --> 00:02:12,940 that navigates to a route in response to the form submission. 34 00:02:12,940 --> 00:02:16,584 If you type a name and subject into the fields, 35 00:02:16,584 --> 00:02:22,480 the form directs you to a URL that includes the name and subject in its path. 36 00:02:23,850 --> 00:02:28,310 You can even render the name and subject in your content via routing. 37 00:02:29,740 --> 00:02:34,160 All right, now let's take a look at the project starter files. 38 00:02:34,160 --> 00:02:38,620 I'm using Visual Studio Code as my text editor for this course. 39 00:02:38,620 --> 00:02:42,266 But you can use your preferred text editor. 40 00:02:42,266 --> 00:02:47,310 I set up the app using the tool Create React app. 41 00:02:47,310 --> 00:02:51,750 Navigate to your terminal by pressing Cmd+J or clicking this button. 42 00:02:53,500 --> 00:02:58,778 In the terminal, navigate to the course directory project folder and 43 00:02:58,778 --> 00:03:02,634 run npm i to install the project's dependencies. 44 00:03:09,100 --> 00:03:13,840 We're going to be working with the files in the source directory. 45 00:03:13,840 --> 00:03:18,279 This contains the app's main entry file, index.js. 46 00:03:18,279 --> 00:03:24,834 A components folder with all the components that make up the app. 47 00:03:24,834 --> 00:03:29,434 The style sheet already contains the styles for the app, so 48 00:03:29,434 --> 00:03:34,869 we won't be working with the CSS, but you can change it as you please. 49 00:03:34,869 --> 00:03:39,360 Our project consists mostly of stateless components. 50 00:03:39,360 --> 00:03:44,196 In other words, components that don't initialize or change a state. 51 00:03:44,196 --> 00:03:49,779 They're simply functions with just a render method and no state. 52 00:03:49,779 --> 00:03:56,163 And the data we're going to use in the app will come from the teachers.js and 53 00:03:56,163 --> 00:04:00,576 courses.js files located inside the data folder. 54 00:04:00,576 --> 00:04:04,514 For example, we'll use the CSS, HTML, and 55 00:04:04,514 --> 00:04:10,110 JavaScript courses array to render a list of front end courses, 56 00:04:10,110 --> 00:04:15,097 and the teachers list array to render a list of teachers. 57 00:04:15,097 --> 00:04:19,584 Most of the time, you won't keep your data in a file like this. 58 00:04:19,584 --> 00:04:24,136 More commonly, you'll retrieve this data from the server using an API. 59 00:04:24,136 --> 00:04:28,504 But for this course, since we're focusing on routing and 60 00:04:28,504 --> 00:04:34,479 just the components being rendered, we'll use this data along with the simple 61 00:04:34,479 --> 00:04:40,560 stateless components to make the concepts I'm teaching easier to understand. 62 00:04:40,560 --> 00:04:47,671 All right, let's launch the app from the terminal by running npm start. 63 00:04:47,671 --> 00:04:51,980 We're not seeing anything too exciting in the browser just yet. 64 00:04:51,980 --> 00:04:58,984 We're only seeing the course directory's container slash wrapper div, 65 00:04:58,984 --> 00:05:02,997 which lives here inside the file App.js. 66 00:05:02,997 --> 00:05:08,314 As I showed you earlier in the project demo, we're going to use React Router 67 00:05:08,314 --> 00:05:13,310 to dynamically load and unload components inside this app component. 68 00:05:13,310 --> 00:05:18,068 React Router will pay attention to the browser's address bar for 69 00:05:18,068 --> 00:05:23,450 changes in the URL, then render the components for that URL. 70 00:05:23,450 --> 00:05:27,273 Coming up in the next video, you'll install React Router and 71 00:05:27,273 --> 00:05:28,901 create your first route. 72 00:05:28,901 --> 00:05:29,840 See you there.