WEBVTT 00:00.000 --> 00:05.370 Okay, we made it to the end of section three, and we've now got our client application up and running. 00:05.370 --> 00:07.590 And in this section we've taken a look at react. 00:07.590 --> 00:10.260 And we've created our react project using vite. 00:10.260 --> 00:14.400 And we've implemented and added material UI. 00:14.430 --> 00:19.620 Now of course we're going to continue building our application and get ourselves more and more familiar 00:19.620 --> 00:25.560 with using React and Material UI as we go about the process of building our full application. 00:25.560 --> 00:27.960 So don't worry about the newness of this. 00:27.990 --> 00:33.330 If this is your first time encountering react, then we're going to practice a lot in building this 00:33.330 --> 00:39.210 application, so there's plenty more opportunities to get to grips with react and what we implement 00:39.210 --> 00:41.340 inside react so frequently. 00:41.340 --> 00:43.590 Asked questions then do I have to use TypeScript? 00:43.590 --> 00:44.790 Well, in this training course? 00:44.790 --> 00:48.900 It is what I've used to write the code for this, and I appreciate it. 00:48.900 --> 00:52.860 Can add a bit extra to our code, but it is incredibly useful. 00:52.860 --> 00:55.470 It helps us with avoiding simple mistakes. 00:55.470 --> 00:56.130 Typos. 00:56.130 --> 01:00.420 It's especially good at catching them, of course, and at some point whilst you're developing this 01:00.420 --> 01:06.540 app, it's going to catch a mistake that you make as we all make them, and it's going to stop you from 01:06.540 --> 01:08.790 moving forward until you've corrected that mistake. 01:08.790 --> 01:13.260 In JavaScript world, it would forgive that mistake and you wouldn't notice it until a lot later on, 01:13.260 --> 01:15.780 but at that point it would be much harder to troubleshoot. 01:15.780 --> 01:21.560 But when you're new to TypeScript, it can be annoying, especially when you're using third party Utilities 01:21.560 --> 01:23.390 that also have their own types. 01:23.390 --> 01:27.980 So you can always turn off the strictness of TypeScript. 01:27.980 --> 01:32.180 You can set strict to false, and you can set no implicit any to false. 01:32.180 --> 01:36.140 And that will stop the annoying warnings appearing in your code editor. 01:36.170 --> 01:41.480 Now, I'm not saying that's a great thing to do long term, but if we think back to what Martin Fowler 01:41.480 --> 01:43.310 said, make it work. 01:43.310 --> 01:44.180 Make it right. 01:44.180 --> 01:45.320 Make it fast. 01:45.320 --> 01:50.360 If you do use that approach, then you can make it work without using strict types, and you can always 01:50.360 --> 01:53.570 come back later and then make it right. 01:53.570 --> 01:58.190 And what I'm suggesting here, if you come across code that you're struggling to get the TypeScript 01:58.220 --> 02:01.610 types correct for it, don't worry about it straight away. 02:01.640 --> 02:05.780 Get the feature that you're trying to implement working, and then come back and see if you can correct 02:05.780 --> 02:10.550 the types that are being in use and throughout this training course, even though, as we do introduce 02:10.550 --> 02:16.070 third party packages into our app and they do come with their own types and it can seem a bit tricky, 02:16.070 --> 02:20.450 I'll demonstrate the not cheating approach, but you will see on occasions during this training course 02:20.450 --> 02:26.060 some tricky TypeScript shenanigans as we go further into building this application. 02:26.060 --> 02:30.860 But for projects that are not this one, then you do always have that option to fall back on. 02:30.890 --> 02:36.170 So coming up next, we currently have a single page application with effectively a single page. 02:36.170 --> 02:37.790 And we need to correct that. 02:37.790 --> 02:42.500 And next we're going to do so by looking at routing in our application.