WEBVTT 00:01.460 --> 00:02.030 Okay. 00:02.060 --> 00:07.520 Our application has a fully functional code so we can get the records from database. 00:07.520 --> 00:12.110 We can update them, we can create new and we can remove them as well. 00:12.110 --> 00:17.000 So what we will do now is we need to introduce some authentication. 00:17.000 --> 00:23.750 So because what we have in our code if you go back to API services we have that token. 00:23.750 --> 00:26.300 At the moment we have that hardcoded token. 00:26.330 --> 00:27.980 This is not really acceptable. 00:27.980 --> 00:29.870 So we want to secure our API. 00:29.900 --> 00:31.970 That means we need to enable login. 00:31.970 --> 00:39.290 So in this video what we will do is we will take what we have and we protect whatever we have with the 00:39.320 --> 00:39.740 login. 00:39.740 --> 00:43.790 So we will need to start working on the way our application is rendered. 00:43.790 --> 00:46.160 So I will go to app.js. 00:46.160 --> 00:48.740 And this is our main component here. 00:48.740 --> 00:53.900 And actually this component app is loaded in here inside index.js. 00:53.930 --> 00:56.150 So you can see here index.js. 00:56.180 --> 00:58.130 This is what we have. 00:58.160 --> 01:02.330 So we have a route and then route will render this app. 01:02.330 --> 01:05.310 So this is our component and our component will be here. 01:05.340 --> 01:09.630 So in this video what we will do is we will introduce our router. 01:09.630 --> 01:15.750 So basically based on the route in the browser we will load one component or another. 01:15.750 --> 01:19.500 And to do that we will need to install React Router Dom. 01:19.500 --> 01:20.490 And that's a package. 01:20.490 --> 01:21.450 We can go here. 01:21.450 --> 01:23.070 That's a package here. 01:23.070 --> 01:25.290 So we can go with react Router comm. 01:25.710 --> 01:26.190 And here. 01:26.190 --> 01:28.290 And the newest version at the moment is six. 01:28.290 --> 01:30.390 So we will do that here. 01:30.390 --> 01:34.140 We can actually click tutorial and it will have a little tutorial here. 01:34.140 --> 01:39.990 We're not going to do all of what it is here but we'll need to install React Router Dom. 01:39.990 --> 01:41.550 This is what we need to do. 01:41.550 --> 01:46.080 So basically I can copy that and we can go to our code. 01:46.080 --> 01:50.310 And then I will close my server and I will just paste it here. 01:50.310 --> 01:55.380 So React Router Dom needs to be installed. 01:57.240 --> 01:59.310 And then we'll run the server again. 01:59.310 --> 02:01.470 So what else will need to do. 02:01.470 --> 02:04.770 There's a few ways we can actually use that router. 02:04.770 --> 02:10.930 I will show you one way but feel free to to come to this website and see different examples and what 02:10.930 --> 02:11.590 we can do. 02:11.620 --> 02:16.090 We'll actually use a few handy features from that router from here. 02:16.120 --> 02:19.990 So basically what we need to do is we need to do something like this. 02:19.990 --> 02:23.710 So we need to import a create router and a browser router. 02:23.710 --> 02:24.550 And this. 02:24.550 --> 02:26.530 So I will also copy that. 02:28.870 --> 02:31.180 And we can import that here. 02:31.210 --> 02:38.260 So what we are doing is we have that create browser router and also router provider. 02:38.260 --> 02:41.950 So two things that we import from that library here. 02:42.550 --> 02:45.790 And that's in the tutorial we need to do two things. 02:45.790 --> 02:48.310 We need to create a browser router. 02:48.310 --> 02:51.010 And also in the provider we need to provide it. 02:51.010 --> 02:54.700 So we can actually do that here in our code. 02:54.730 --> 02:57.100 Actually I can copy that to be faster. 02:57.100 --> 03:02.740 So if I will go here then we will have our create browser router. 03:02.740 --> 03:06.910 And that router provider will go instead of our app. 03:06.910 --> 03:09.350 So we will have router provider here. 03:09.350 --> 03:11.720 We need to provide a router. 03:11.720 --> 03:14.420 And this is the router we are getting here. 03:14.420 --> 03:16.130 So I will have it like this. 03:16.130 --> 03:17.540 And I can close this. 03:17.690 --> 03:19.490 So basically we had app. 03:19.490 --> 03:21.530 So we render app inside. 03:21.530 --> 03:25.700 Instead of that what we will do is we have that router provider. 03:25.730 --> 03:28.730 This is something that we import here from that library. 03:28.730 --> 03:33.200 And we provide the router which is basically the one that we've created here. 03:33.200 --> 03:35.120 We could name it whatever you like. 03:35.150 --> 03:39.830 So you can say our writer our router router and put it here. 03:39.830 --> 03:40.940 It doesn't really matter. 03:40.940 --> 03:44.660 So this is an object that we can create. 03:44.660 --> 03:49.850 So we can tell what part will what elements that will render. 03:49.850 --> 03:54.740 So let's say when we have a path like this so we don't have anything in the URL. 03:54.740 --> 03:57.110 We want to have a login page. 03:57.110 --> 03:59.030 So I will create a new component. 03:59.060 --> 04:04.340 Right click new file and I will do alt s x. 04:04.340 --> 04:07.010 So here I will do. 04:09.200 --> 04:16.550 Import React from react and then we can have export. 04:16.580 --> 04:17.540 Default. 04:19.580 --> 04:20.390 Function. 04:22.160 --> 04:23.360 Export. 04:27.440 --> 04:28.070 Out. 04:31.790 --> 04:34.850 And what we will do is we will return. 04:36.980 --> 04:44.150 Let's say we will return H1 and let's say out component here. 04:45.170 --> 04:48.440 So we have that new component here out. 04:48.440 --> 04:51.710 And what we can do is we can go to our index.js. 04:51.710 --> 04:58.220 And in the same way as we imported app, we can also import out. 04:58.220 --> 05:02.540 And if I will click enter it will import that from component out. 05:02.540 --> 05:06.020 So this is my new component that I have just created. 05:06.020 --> 05:12.110 So if we have that part and I will show you how it works in a second, what I want to do is I want to 05:12.110 --> 05:13.520 render that element. 05:13.530 --> 05:17.790 So I basically need to tell this is the out component. 05:17.790 --> 05:22.020 I have it, I want to have it there and we can actually put it in one line. 05:22.020 --> 05:28.050 So if maybe that will make a little bit more sense as it will be kind of compact. 05:28.050 --> 05:31.830 So we have that part and that element will render. 05:31.830 --> 05:35.220 But we can also do is we can duplicate this. 05:35.220 --> 05:43.710 And if I will have a part movies then I want to have the old application render there. 05:43.710 --> 05:55.080 So if I will save it now and we have some errors here and so we have this not found error can't resolve 05:55.080 --> 05:56.370 components out. 05:56.910 --> 05:59.910 So if I will grab this out. 06:02.640 --> 06:04.620 Oh I know what I've done. 06:04.620 --> 06:05.130 Sorry. 06:05.160 --> 06:06.780 Probably you spotted that before. 06:06.810 --> 06:09.810 I name it TSX which is a TypeScript. 06:09.810 --> 06:14.250 And I will need to rename this. 06:14.430 --> 06:17.320 And it's supposed to be JSX, which is JavaScript. 06:17.320 --> 06:18.610 So that would work. 06:18.610 --> 06:21.400 So if I we save it and you can see here it's working fine. 06:21.400 --> 06:22.990 So sorry for that. 06:23.080 --> 06:26.830 And so we can go to our application here. 06:26.830 --> 06:29.410 And you see our component here. 06:29.410 --> 06:37.000 So when we don't have anything here in the URL then authentication would be a out component will be 06:37.000 --> 06:37.480 rendered. 06:37.480 --> 06:41.290 If I will have slash movies like this. 06:41.290 --> 06:42.610 This is my application. 06:42.610 --> 06:45.310 So this is what we actually have done here. 06:45.310 --> 06:52.780 So if I will go back to here I created that create browser router and I can decide what part will render 06:52.780 --> 06:53.530 what element. 06:53.530 --> 06:56.800 So if we don't have anything there the out will be. 06:56.800 --> 06:58.780 If we have movies the app will be. 06:58.780 --> 06:59.530 So whatever. 06:59.530 --> 07:03.220 We had that before and then we render that as a in a route. 07:03.220 --> 07:04.990 So that's how it works. 07:04.990 --> 07:10.930 We have that movies and then our application if I will go to localhost 3000 nothing is actually in the 07:10.930 --> 07:11.470 URL. 07:11.470 --> 07:13.180 The authentication is here. 07:13.210 --> 07:15.220 And that's how we set up our router. 07:15.220 --> 07:18.550 And we can switch in between different components that we would like to render.