1 00:00:02,000 --> 00:00:03,000 [Maximilian Schwarzmuller] Now let's take care 2 00:00:03,000 --> 00:00:08,000 about adding such a navigation bar to our application. 3 00:00:08,000 --> 00:00:10,000 And for this I'll go to the components folder 4 00:00:10,000 --> 00:00:12,000 and add a new folder in there. 5 00:00:12,000 --> 00:00:15,000 And I'll name it layout, because it will hold 6 00:00:15,000 --> 00:00:17,000 some general layout components. 7 00:00:17,000 --> 00:00:20,000 So a sub-folder inside of components, 8 00:00:20,000 --> 00:00:24,000 and in there I'll add the main navigation.js file, 9 00:00:24,000 --> 00:00:26,000 which is the file that should hold 10 00:00:26,000 --> 00:00:29,000 this main navigation component. 11 00:00:29,000 --> 00:00:32,000 Now I added it here in the components folder 12 00:00:32,000 --> 00:00:34,000 and not in the pages folder 13 00:00:34,000 --> 00:00:36,000 because this component will not be loaded 14 00:00:36,000 --> 00:00:39,000 as a page with help of the router, 15 00:00:39,000 --> 00:00:41,000 but instead we will embed it 16 00:00:41,000 --> 00:00:46,000 in the content of our other code just as we did before. 17 00:00:46,000 --> 00:00:49,000 Totally unrelated to the router. 18 00:00:49,000 --> 00:00:51,000 Now in this main navigation component file, 19 00:00:51,000 --> 00:00:55,000 we can again define our component function, 20 00:00:55,000 --> 00:01:00,000 MainNavigation, and export it as we're used to. 21 00:01:00,000 --> 00:01:04,000 And then of course return some JSX content here. 22 00:01:04,000 --> 00:01:06,000 And here I wanna return a header, 23 00:01:06,000 --> 00:01:10,000 a header component which in the end will then wrap 24 00:01:10,000 --> 00:01:15,000 all the items that should go into this header. 25 00:01:15,000 --> 00:01:19,000 And here I actually wanna have a div first with my logo, 26 00:01:19,000 --> 00:01:21,000 which in this case will just be some text. 27 00:01:21,000 --> 00:01:24,000 I'll name it React Meetups. 28 00:01:24,000 --> 00:01:27,000 And then next to this div, inside of the header, 29 00:01:27,000 --> 00:01:30,000 I'll add a nav element, and here I'll then add 30 00:01:30,000 --> 00:01:33,000 an unordered list with a couple of list items 31 00:01:33,000 --> 00:01:37,000 where all those list items will be the different links 32 00:01:37,000 --> 00:01:39,000 which we have here. 33 00:01:39,000 --> 00:01:41,000 Now, when it comes to those links, 34 00:01:41,000 --> 00:01:45,000 we typically render links by using the anchor tag. 35 00:01:45,000 --> 00:01:47,000 That's how we do that in standard HTML. 36 00:01:48,000 --> 00:01:53,000 We could do this here as well but using that link component, 37 00:01:53,000 --> 00:01:57,000 that link element, has one big disadvantage. 38 00:01:57,000 --> 00:01:59,000 If we use a link like this, whenever we click it 39 00:01:59,000 --> 00:02:03,000 a new request will be sent to the server. 40 00:02:03,000 --> 00:02:06,000 The server here is the server hosting 41 00:02:06,000 --> 00:02:09,000 this React application, and indeed that server 42 00:02:09,000 --> 00:02:12,000 would then reply with our application, 43 00:02:12,000 --> 00:02:16,000 and there the router would figure out which page to load. 44 00:02:16,000 --> 00:02:20,000 So a link would work but, we send this request first, 45 00:02:20,000 --> 00:02:22,000 which is redundant. 46 00:02:22,000 --> 00:02:26,000 We already are in our running React application, 47 00:02:26,000 --> 00:02:28,000 and it would be great if we don't leave it 48 00:02:28,000 --> 00:02:31,000 just because we wanna navigate somewhere. 49 00:02:31,000 --> 00:02:33,000 Hence sending that extra request 50 00:02:33,000 --> 00:02:36,000 is not something we necessarily wanna do. 51 00:02:36,000 --> 00:02:39,000 That's why instead of this anchor tag, 52 00:02:39,000 --> 00:02:42,000 we instead use another component provided 53 00:02:42,000 --> 00:02:45,000 by the react-router-dom package. 54 00:02:45,000 --> 00:02:49,000 So we again import from react-router-dom, 55 00:02:49,000 --> 00:02:53,000 and we import the Link component here. 56 00:02:53,000 --> 00:02:57,000 The Link component can be wrapped around our link text 57 00:02:57,000 --> 00:03:01,000 just like the anchor tag, and it will render 58 00:03:01,000 --> 00:03:05,000 a anchor tag in the end but, internally, 59 00:03:05,000 --> 00:03:07,000 react-router-dom attaches a click listener 60 00:03:07,000 --> 00:03:10,000 to the anchor tag, and when you click on it, 61 00:03:10,000 --> 00:03:14,000 it will prevent that browser default of sending a request, 62 00:03:14,000 --> 00:03:19,000 and instead just parse the URL you want to go to, 63 00:03:19,000 --> 00:03:22,000 change it in the browser URL bar, 64 00:03:22,000 --> 00:03:24,000 but then not send the request, 65 00:03:24,000 --> 00:03:28,000 but instead load the appropriate component onto the screen 66 00:03:28,000 --> 00:03:30,000 just with React and JavaScript, 67 00:03:30,000 --> 00:03:33,000 so that we stay on this already loaded page, 68 00:03:33,000 --> 00:03:37,000 and we don't send this extra request. 69 00:03:37,000 --> 00:03:39,000 So that's why we add links like this. 70 00:03:40,000 --> 00:03:42,000 Now, of course, here that should not be some link 71 00:03:42,000 --> 00:03:45,000 but a link to all the meetups let's say. 72 00:03:45,000 --> 00:03:50,000 And to make Link aware of the URL it should navigate to, 73 00:03:50,000 --> 00:03:53,000 we have to set the to prop here. 74 00:03:53,000 --> 00:03:57,000 This is one of the expected props on the link component. 75 00:03:57,000 --> 00:04:02,000 And here we set a path in this case just slash nothing, 76 00:04:02,000 --> 00:04:06,000 because that is the path to the AllMeetupsPage. 77 00:04:08,000 --> 00:04:13,000 Now we can replicate this, and add two more list items, 78 00:04:14,000 --> 00:04:18,000 where the second one leads to /new-meetup 79 00:04:18,000 --> 00:04:22,000 and says new meetup or Add New Meetup, 80 00:04:22,000 --> 00:04:24,000 that's up to you, of course. 81 00:04:24,000 --> 00:04:27,000 And on the last link we go to /favorites 82 00:04:27,000 --> 00:04:32,000 and we say favorites, or My Favorites, something like this. 83 00:04:34,000 --> 00:04:36,000 Now we got those links in place 84 00:04:36,000 --> 00:04:39,000 and we got this main navigation component. 85 00:04:39,000 --> 00:04:42,000 We can now use this in the App.js file, 86 00:04:42,000 --> 00:04:45,000 and there we can now import main navigation 87 00:04:45,000 --> 00:04:50,000 from ./components/layout/MainNavigation 88 00:04:51,000 --> 00:04:54,000 and add this above that Switch statement. 89 00:04:54,000 --> 00:04:59,000 Here we can add MainNavigation as a self-closing tag still, 90 00:04:59,000 --> 00:05:00,000 if we want to. 91 00:05:01,000 --> 00:05:04,000 If we save this, we'll see some navigation here. 92 00:05:04,000 --> 00:05:06,000 And if you click those links, they work. 93 00:05:06,000 --> 00:05:10,000 The styling is missing, but we got working links. 94 00:05:10,000 --> 00:05:12,000 We got a working navigation. 95 00:05:12,000 --> 00:05:14,000 Now I want to add some styling, 96 00:05:14,000 --> 00:05:16,000 and for this, we're going to explore a different way 97 00:05:16,000 --> 00:05:18,000 of styling our components.