1 00:00:00,910 --> 00:00:05,700 In the last video we had a very long discussion about the browser router with re-act Rotterdam. 2 00:00:05,710 --> 00:00:08,560 Now in this video we're going to start to drive our application forward. 3 00:00:08,560 --> 00:00:12,370 We're still going to have a couple of discussions about re-act router but in order to do so we need 4 00:00:12,370 --> 00:00:15,100 to progress our application a lot more than it currently is. 5 00:00:15,250 --> 00:00:19,600 So to get started we're going to start to scaffold out a bunch of different components for application 6 00:00:19,870 --> 00:00:24,850 and then hook them all up to our react Roger instance with individual route components. 7 00:00:24,850 --> 00:00:26,110 So let's get to it. 8 00:00:26,140 --> 00:00:30,880 The first thing we need to do is decide what different components we need to create inside of our application. 9 00:00:30,880 --> 00:00:32,700 Now I took all of our different mockups right here. 10 00:00:32,700 --> 00:00:38,190 I've got six different pages and I put down a proposed name for each of these different components. 11 00:00:38,260 --> 00:00:40,960 That's going to form each individual screen. 12 00:00:40,960 --> 00:00:45,870 So I think that this screen right here that shows a list of streams to the user should be called the 13 00:00:45,870 --> 00:00:47,640 stream list component. 14 00:00:47,680 --> 00:00:51,350 And I think that a user should be able to see that screen and anytime time that they go to the route 15 00:00:51,400 --> 00:00:52,610 route of our application. 16 00:00:53,710 --> 00:00:58,350 And each time user looks at a very particular stream I think we should show a component called stream 17 00:00:58,350 --> 00:01:03,710 show anytime that a user tries to create a NEWS STREAM I think we should show a component called stream 18 00:01:03,710 --> 00:01:08,930 create for editing which then stream edit and for deleting a stream we should have a component called 19 00:01:08,990 --> 00:01:10,430 stream delete. 20 00:01:10,460 --> 00:01:12,900 So I want to create all these separate components. 21 00:01:12,900 --> 00:01:17,990 I don't want to just kind of scaffold them out for right now and then hook them all up to individual 22 00:01:18,050 --> 00:01:20,390 route calls or route elements. 23 00:01:20,390 --> 00:01:24,530 This is going to mean that we only have to go through all this routing stuff one time and then we will 24 00:01:24,620 --> 00:01:26,510 have to revisit the topic of routing. 25 00:01:26,510 --> 00:01:30,890 Like you know five or six times as we work through this application it's just going to save us a little 26 00:01:30,890 --> 00:01:31,610 bit of time. 27 00:01:32,500 --> 00:01:38,650 All right so for each of these different components we need to decide on a path to use when to show 28 00:01:38,680 --> 00:01:40,150 each individual component. 29 00:01:40,270 --> 00:01:43,790 So right now I came up with a couple of early guesses. 30 00:01:44,050 --> 00:01:50,320 I think that when we show our route route so like local 3000 we should show a stream list when a user 31 00:01:50,320 --> 00:01:55,900 goes to the route of streams slash knew we should show string create and so on for the other ones as 32 00:01:55,900 --> 00:01:56,680 well. 33 00:01:56,680 --> 00:02:00,550 So these are the different paths that we're going to use to hook up these different components to our 34 00:02:00,550 --> 00:02:01,400 application. 35 00:02:02,600 --> 00:02:07,370 All right so now we're going to continue by creating separate component files for each of these five 36 00:02:07,430 --> 00:02:08,580 different components. 37 00:02:08,580 --> 00:02:13,430 Again right now we're just going to throw in a little bit of quick scaffolding to each one just to get 38 00:02:13,430 --> 00:02:17,330 them to appear on the screen and make sure that we can hook up a little bit of routing between each 39 00:02:17,330 --> 00:02:19,190 one. 40 00:02:19,190 --> 00:02:24,260 All right so I'm going to flip back over to my code editor now if we created those five separate component 41 00:02:24,260 --> 00:02:30,110 files directly inside of our components directory we would kind of have a mess of component files inside 42 00:02:30,110 --> 00:02:30,650 there. 43 00:02:30,710 --> 00:02:35,540 And so because these five different components are all related to streams I think that we should place 44 00:02:35,570 --> 00:02:39,760 all five of them inside of a new directory inside of our components folder. 45 00:02:39,980 --> 00:02:45,320 So in some of my components folder I'm going to make a new folder called streams and then I will put 46 00:02:45,350 --> 00:02:50,630 all of my components related to handling and showing streams inside of that new folder. 47 00:02:50,630 --> 00:02:55,810 So now inside of here we're going to create a new file for each of these different five components. 48 00:02:55,820 --> 00:02:57,450 So five files in total. 49 00:02:57,470 --> 00:02:58,630 Let's do it right now. 50 00:02:59,880 --> 00:03:00,130 OK. 51 00:03:00,210 --> 00:03:06,560 So inside of streams I'm going to make a new file called stream list datcha us. 52 00:03:06,650 --> 00:03:10,470 I will do a new file called stream create J us. 53 00:03:10,590 --> 00:03:17,440 I will do stream show I will do stream at it. 54 00:03:17,680 --> 00:03:22,420 And finally I will do stream delete. 55 00:03:22,560 --> 00:03:24,640 OK so five files in total. 56 00:03:24,990 --> 00:03:28,760 So now we're going to write out a quick little bit of boilerplate into each one so that we can just 57 00:03:28,790 --> 00:03:32,700 show them on the screen for right now and then after we can show them on the screen we'll come back 58 00:03:32,700 --> 00:03:35,500 and add in a ton of functionality to each one. 59 00:03:35,580 --> 00:03:41,290 So I'm going to start off inside of my stream create file. 60 00:03:41,540 --> 00:03:45,410 So inside of here I'll put together a little bit of the plate and we're going to essentially just copy 61 00:03:45,410 --> 00:03:49,580 paste it to the other files so it will be a pretty quick process. 62 00:03:49,580 --> 00:03:56,380 So inside of stream create I'm going to import re-act from re-act and then I will make a functional 63 00:03:56,380 --> 00:03:58,030 component called stream creates 64 00:04:00,700 --> 00:04:05,870 I will return a div with the text stream create. 65 00:04:05,960 --> 00:04:08,710 Notice how I did not use a space in there. 66 00:04:08,750 --> 00:04:16,070 There's a good reason for that you'll see in just a second and they'll say export default default stream 67 00:04:16,160 --> 00:04:16,580 create 68 00:04:20,230 --> 00:04:22,090 OK it's not going to take this right here. 69 00:04:22,140 --> 00:04:23,580 I'm going to copy it. 70 00:04:23,640 --> 00:04:28,470 I'm going to close string create and I'm going to move to my next file down stream delete. 71 00:04:28,470 --> 00:04:32,910 I'm going to paste that boilerplate in and then I'm going to very quickly just change the names inside 72 00:04:32,910 --> 00:04:34,010 of your. 73 00:04:34,170 --> 00:04:40,500 Now as a quick shortcut if you are using Adom or vs code as your code editor you can double click to 74 00:04:40,500 --> 00:04:43,900 select the text string create and then press either command. 75 00:04:43,920 --> 00:04:51,450 If you're on Mac OS or control d if you are on Windows when you hit command or control D you can multi-select 76 00:04:51,510 --> 00:04:54,480 the different instances of stream create inside this file. 77 00:04:54,510 --> 00:04:59,580 And so we could change all three of them at the same time just as a quick time saver Zoll do stream 78 00:04:59,830 --> 00:05:01,620 delete. 79 00:05:01,690 --> 00:05:06,970 So I should say delete delete delete in here three times or then save this file and close it all then 80 00:05:06,970 --> 00:05:08,860 go over to stream edit all. 81 00:05:08,860 --> 00:05:20,200 Paste this again I'll edit it to be stream edit so edit edit or save it or go to list wildest dream 82 00:05:20,380 --> 00:05:21,900 lists and safe. 83 00:05:22,320 --> 00:05:26,750 Well do finally stream show and stream show and save. 84 00:05:26,750 --> 00:05:31,150 So show show show three times and then I'm going to do a quick double check here so I see. 85 00:05:31,220 --> 00:05:35,010 Show list edit delete and create. 86 00:05:35,020 --> 00:05:36,600 Like so perfect. 87 00:05:36,650 --> 00:05:39,950 All right so that's it for creating these kind of scaffolding components. 88 00:05:39,950 --> 00:05:41,780 Now let's take a quick pause right here. 89 00:05:41,780 --> 00:05:45,320 When we come back to the next section we're going to start to set up some different paths for each of 90 00:05:45,320 --> 00:05:49,130 these different components and make sure that we can visit them inside of our browser so quick puzzles 91 00:05:49,160 --> 00:05:50,290 see you in just a minute.