WEBVTT 0 00:00.210 --> 00:01.740 This is an exciting moment. 1 00:01.740 --> 00:07.840 We're finally ready to apply everything that we've learned so far to get started building 2 00:07.920 --> 00:10.570 our final project, the keeper app. 3 00:10.620 --> 00:17.160 So in this lesson I've got a challenge for you that is going to get as part of the way towards our final 4 00:17.160 --> 00:18.180 product. 5 00:18.180 --> 00:20.090 So this is what we're aiming for. 6 00:20.100 --> 00:22.770 We've got a header component, 7 00:22.770 --> 00:28.150 we've got a note component and we've got a footer down here as well. 8 00:28.230 --> 00:33.990 Now in the index.js file, I've got all the steps that you need to go through in order to complete 9 00:33.990 --> 00:35.400 this challenge. 10 00:35.400 --> 00:42.600 If you want to work on this project locally instead of on code sandbox, then the simplest way is to go 11 00:42.600 --> 00:50.040 to the link that is listed in the course resources for the starting project and then once you're here, 12 00:50.070 --> 00:59.040 go ahead and click on this button to export this project as a zip file and then unzip that file and 13 00:59.100 --> 01:02.480 you should end up with a project folder. 14 01:02.490 --> 01:08.400 Now once you've got your project folder, you can click and drag it into your VS code and add it to 15 01:08.400 --> 01:14.070 your workspace. And then you can remove any previous folders that you've been working on. 16 01:14.250 --> 01:19.440 And if you expand all the files, you end up with the same starting files. 17 01:19.440 --> 01:27.300 So in this case the files that we've got are a index.html which is kept very simple. It's got a title, 18 01:27.690 --> 01:30.840 it's got a link to google fonts. 19 01:30.990 --> 01:36.330 So if you remember from previously we can simply select the fonts we want from Google and then embed 20 01:36.330 --> 01:43.090 the fonts as a style sheet link. And then we've got a link to the style sheet inside styles. 21 01:43.090 --> 01:43.980 CSS, 22 01:43.980 --> 01:51.180 and finally we've got a link to our index.js as a JSX file. And of course as always we've got 23 01:51.180 --> 01:54.650 that prerequisite div with the idof root. 24 01:54.720 --> 02:00.960 So the other files to take a look at is the styles.css file because in here I've already added a 25 02:01.020 --> 02:08.700 bunch of styles and classes which you're going to be applying to the code that you're writing with React. 26 02:08.700 --> 02:14.460 It's up to you whether if you want to work on this in code sandbox or on your local environment that 27 02:14.460 --> 02:16.760 you've set up in the last lesson. 28 02:16.800 --> 02:20.870 Now if you do decide to go down this route, I recommend the first thing to do 29 02:20.880 --> 02:28.110 once you've downloaded it is to open up your hyperterminal and cd over to the location of your project. 30 02:28.440 --> 02:37.440 So in my case it's in download/keeper-app-part-1 and then go ahead and run npm install. This 31 02:37.440 --> 02:43.980 way you'll install the react, the react-dom module and the react-scripta module that's included with 32 02:43.980 --> 02:45.050 the package. 33 02:45.180 --> 02:52.200 And once that's done, then you can go ahead and run npm start for it to run the server to be able to 34 02:52.200 --> 02:55.480 view it inside your browser under localhost 3000. 35 02:55.980 --> 03:02.190 So it's up to you if you want to complete this challenge using code sandbox or if you want to do it 36 03:02.190 --> 03:05.180 locally using your editor of choice. 37 03:05.790 --> 03:12.420 But either way, the goals are going to be the same. You're going to be creating a new React app that includes 38 03:12.450 --> 03:19.010 a app component. Inside that app component, you can have three components: a header component, a 39 03:19.010 --> 03:26.820 footer component and a note component. The header is going to look something like this showing the keeper 40 03:26.880 --> 03:32.880 app title or whatever it is that you decide to call it, and then the footer is going to look like this 41 03:33.000 --> 03:41.580 with a dynamically rendered year so not a statically typed number. You're going to use what you've learnt 42 03:41.580 --> 03:47.700 about Javascript dates to try and get the actual current year showing up here. And then finally you've 43 03:47.700 --> 03:52.930 got this note component which is going to show a title and some content. 44 03:53.190 --> 03:59.040 And the final step is just to make sure that the styling is the same for the website that you've created 45 03:59.460 --> 04:06.030 and this sample completed app which you can access right here. In order to get the styling right 46 04:06.030 --> 04:12.300 you might have to take a look inside these styles.css and see which classes are being targeted 47 04:12.570 --> 04:19.310 and which HMTL elements are being targeted in order to render the same style as you see here. 48 04:19.320 --> 04:22.940 So the goal is to test everything that you've learnt so far. 49 04:23.400 --> 04:31.230 And if you want to, you can even update the styles.css to whichever style you want it to be to customize 50 04:31.230 --> 04:37.500 it if you wish. Or if you want to completely create the styles.css from scratch then you can also 51 04:37.500 --> 04:41.270 just delete that and try to create your own style if you wish. 52 04:42.690 --> 04:48.240 But what I recommend is to go through each of these points in the index.js and try to complete 53 04:48.240 --> 04:48.360 it. 54 04:48.960 --> 04:53.640 And once you're done with the challenge, head over to the next lesson and I'll go through the solution 55 04:53.640 --> 04:57.150 with you. Pause the video now and try to complete the challenge.