WEBVTT 0 00:00.890 --> 00:01.260 All right. 1 00:01.280 --> 00:09.270 So here's the starting file for the React components practice. And the aim of the game is to separate 2 00:09.360 --> 00:16.130 out all of this code into a separate component. By the end 3 00:16.140 --> 00:21.850 you should have a single component which is called App inside your index 4 00:21.890 --> 00:33.160 .js. And then you should have two separate JSX files, a App.jsx and a heading.js 5 00:33.180 --> 00:39.330 x. And you should be able to use what you learnt from the previous lessons to separate out a lot of this 6 00:39.330 --> 00:42.870 logic into different components. 7 00:42.930 --> 00:47.300 Pause the video, fork the sandbox and see how you get on. 8 00:53.380 --> 00:53.870 All right. 9 00:53.900 --> 01:01.880 So here I've got the original code and we're rendering a single h1 element which is the heading which 10 01:01.880 --> 01:09.210 is showing up right here. And what we want to do is we want to clear out all of the code from our index. 11 01:09.330 --> 01:14.550 js so that it's only rendering a App component. 12 01:14.540 --> 01:23.360 So let's go ahead and cut this h1 element and move it over to our heading.jsx. And also 13 01:23.390 --> 01:26.330 the code that's required to render the heading, 14 01:26.390 --> 01:29.760 so all of this logic we're going to cut it out of our index. 15 01:29.780 --> 01:33.650 jsx and move it over here as well. 16 01:33.680 --> 01:41.240 Now remember we need our React module in order to render JSX. So let's go ahead and import React 17 01:41.510 --> 01:43.550 from "react". 18 01:43.850 --> 01:50.460 And now we're going to create a function that is going to be called heading. 19 01:50.690 --> 01:54.840 And this function is going to enclose all of this code. 20 01:54.920 --> 01:59.360 So I'm going to cut this part out and then move it to the bottom here. 21 01:59.540 --> 02:05.390 The final thing we need to do is we need to give our function an output, so tell it what it needs to 22 02:05.390 --> 02:06.080 return 23 02:06.560 --> 02:13.040 and it's of course going to be this h1 with class name of heading with style that's dynamically 24 02:13.040 --> 02:20.030 determined by a code above and the greeting is also determined by the time of day using our Javascript 25 02:20.030 --> 02:29.040 code inside this adding component. The final thing we need to do with our heading component is to export 26 02:29.280 --> 02:39.530 this heading function. So let's go ahead and export default heading and now we can save it and use it 27 02:39.650 --> 02:43.460 inside our App.js. So our App. 28 02:43.460 --> 02:49.240 js is going to be the starting point of our component tree. 29 02:49.340 --> 02:56.060 So it's going to import from React and then it's simply going to have a function called App and we're 30 02:56.060 --> 02:59.510 just going to return one component in this case. 31 02:59.510 --> 03:03.990 So normally you would probably have a div with multiple components. 32 03:04.160 --> 03:09.890 In our case we could have the div or we could simply leave it out because all we want to return is just 33 03:09.890 --> 03:15.590 that custom heading component which of course comes from the heading.jsx file which we'll need 34 03:15.590 --> 03:21.650 to import if we actually want to use it. 35 03:21.940 --> 03:29.230 Finally we're going to export our app as the default export from this file and then we're going to go 36 03:29.230 --> 03:36.640 back over into our index.js and we're going to try and use that app element inside the ReactDOM render 37 03:36.640 --> 03:37.220 method. 38 03:37.270 --> 03:38.110 So let's go ahead to 39 03:38.110 --> 03:43.660 import App from ./App. 40 03:43.840 --> 03:50.650 And remember what I said in the last lesson that normally you would have a directory called components 41 03:51.040 --> 03:54.430 to store all of these JSX components 42 03:54.430 --> 04:03.260 and in that case then instead of ./App, it would be ./components/App and we get 43 04:03.260 --> 04:09.200 back exactly the same website that we had in the beginning, but now we've got a starting point for our 44 04:09.200 --> 04:15.060 app which is the App.jsx component and then inside that App.jsx 45 04:15.110 --> 04:21.040 we've got a child component which is the heading that is worked out from the custom code right here. 46 04:21.680 --> 04:23.410 So did you manage to get it right? 47 04:23.480 --> 04:26.820 If not be sure to have a review of the last lesson. 48 04:26.930 --> 04:34.280 But in the next lesson, we're going to do a deep dive on this import and export keyword that we've been 49 04:34.280 --> 04:36.770 seeing a lot in the last few lessons. 50 04:36.980 --> 04:40.470 And this is something that comes from ES6. 51 04:40.610 --> 04:47.180 If you're interested in learning more about how imports and exports and how modules work in ES6, then 52 04:47.180 --> 04:48.800 head over to the next lesson. 53 04:48.920 --> 04:53.000 But if you're already really familiar with this and you've already used it and you're comfortable with 54 04:53.000 --> 04:57.550 it, then feel free to skip the next lesson and continue in the curriculum. 55 04:58.010 --> 04:59.480 So whichever way you choose, 56 04:59.600 --> 05:01.040 I'll see you on the next lesson.