WEBVTT 00:00.020 --> 00:00.350 Okay. 00:00.350 --> 00:01.700 Welcome to section three. 00:01.700 --> 00:06.080 And in this section it's time to introduce our react application into the mix. 00:06.080 --> 00:10.250 And in this section we're going to take a look very briefly at some react basics. 00:10.700 --> 00:15.530 I just want to introduce some of the main concepts before we actually start getting our hands dirty. 00:15.560 --> 00:20.120 So coming up in this section of course we're going to talk about react some of the basics and just some 00:20.120 --> 00:22.190 of the main themes about react. 00:22.220 --> 00:24.050 Also we're going to take a look at vite. 00:24.050 --> 00:27.830 This is the tool that we're going to use to help us create our react projects. 00:27.860 --> 00:33.230 Now the makers of react used to have their own tool to do this, but they've discontinued making that. 00:33.260 --> 00:37.070 They've left it to others who, quite frankly, were doing a better job. 00:37.070 --> 00:39.290 And vite is one of those examples. 00:39.290 --> 00:41.660 This gives us some really cool features. 00:41.690 --> 00:45.350 Hot reloading is a thing and it works brilliantly. 00:45.350 --> 00:50.510 We're going to be able to make changes in our code and see it reflected instantly in our browser. 00:50.870 --> 00:57.800 And also we're going to take a look at adding a styling component framework to our application as well, 00:57.800 --> 01:03.300 the one that we'll use to provide the styling components that will integrate into our app is material 01:03.300 --> 01:03.990 UI. 01:04.020 --> 01:08.820 It's a react component library that uses material design components that we can easily use inside our 01:08.820 --> 01:13.170 application, and that really cuts down on the amount of CSS that we're going to need to write. 01:13.200 --> 01:17.940 So what we're creating here is a single page application using react. 01:17.940 --> 01:20.160 And what is a single page application. 01:20.160 --> 01:25.920 Well, in a traditional application web based application we might have multiple pages. 01:25.920 --> 01:29.490 And each page in our application has an HTML template. 01:29.490 --> 01:35.400 We'd have an index.html, we'd have an about.html, for example, and a contact HTML. 01:35.520 --> 01:41.580 And each time a new page is loaded, the whole page is loaded, including the navbar, which is shared 01:41.580 --> 01:45.960 across all of the different templates, including the sidebar in this example. 01:46.770 --> 01:51.990 And every time a new page is loaded, the old page is disposed of and the new page comes in to replace 01:51.990 --> 01:55.830 it, including all of the things that were already inside the browser. 01:55.830 --> 02:01.350 So it's not exactly efficient, and there would be a flicker sometimes between transitioning between 02:01.350 --> 02:06.340 one page and the next page has the same assets need to be loaded in all over again. 02:06.460 --> 02:12.070 When it comes to single page applications, we just have a single page the index.html. 02:12.160 --> 02:15.400 And what makes the page is components. 02:15.880 --> 02:22.120 So we create small reusable components and shared components such as the navbar and the sidebar. 02:22.120 --> 02:23.290 They don't need to be removed. 02:23.290 --> 02:28.570 When we replace a component in our page, they stay in place and we swap the stuff that needs to be 02:28.570 --> 02:30.640 replaced with the other component. 02:30.820 --> 02:35.710 So it's much more efficient and it feels much more responsive to the user as well. 02:35.800 --> 02:40.060 So when it comes to components, that's really what we're using to build our application. 02:40.060 --> 02:46.360 It's just going to be made up of many small components, small reusable components that contain all 02:46.360 --> 02:52.450 of the logic, the HTML and the CSS needed to load and run that particular component. 02:52.480 --> 02:55.060 And then our page is built using those. 02:55.060 --> 03:00.010 So it's really up to us how we design the structure of our application. 03:00.010 --> 03:06.340 But the typical goal is to have many small, reusable components that make up our page, rather than 03:06.340 --> 03:09.550 giant components for each page, if you like. 03:09.550 --> 03:10.990 But there's no laws around that. 03:10.990 --> 03:17.950 But how you'll typically approach this is you'll find yourself leaning towards small components and 03:17.950 --> 03:22.360 many of them, and as a component starts to feel a bit large, then you'll just end up breaking it up 03:22.360 --> 03:24.640 into smaller and smaller components. 03:24.640 --> 03:27.070 And that's how we'll approach it in this training course. 03:27.070 --> 03:29.290 So what is a component then when it comes to react? 03:29.290 --> 03:33.490 Well, it's just a function really a JavaScript function that returns something that looks a bit like 03:33.700 --> 03:38.260 HTML and it looks very much like HTML, in fact, but it isn't. 03:38.290 --> 03:47.980 It's something known as JSX, and JSX is JavaScript plus HTML, and we return what looks like HTML, 03:47.980 --> 03:50.890 which does make it feel quite easy to learn react. 03:50.890 --> 03:56.950 If we just start typing out HTML tags and hey, we've got a react component, but we can also add JavaScript 03:56.950 --> 03:59.140 into this as well, and we can add variables. 03:59.140 --> 04:05.180 And there are a few differences between normal HTML and JSX Jesus like we can see in this particular 04:05.180 --> 04:08.060 example, we use class name instead of class. 04:08.060 --> 04:11.210 The reason for that is class is a reserved word in JavaScript. 04:11.210 --> 04:15.170 We cannot use it in our code that we return from a JavaScript function. 04:15.170 --> 04:18.890 Also, when it comes to inline styles, we have to provide this as an object. 04:18.890 --> 04:25.220 We don't just provide it as strings, and then we can use JavaScript in any element inside our JSX. 04:25.640 --> 04:30.650 And anytime we do want to use JavaScript, we just open some curly brackets and boom, we can put our 04:30.650 --> 04:35.840 JavaScript code anywhere we feel like inside what we're returning inside our component. 04:35.840 --> 04:38.630 Also, react is going to provide events that we can use. 04:38.630 --> 04:44.360 So if we want to track if a button has been clicked, then we have an onClick event that react can effectively 04:44.360 --> 04:47.870 listen to and take a reaction on what just happened. 04:47.870 --> 04:52.370 And any time the user's interacting with the browser, they're moving their mouse, they're typing into 04:52.370 --> 04:53.360 an input field. 04:53.360 --> 05:01.160 Then that's generating events, and there's a number of them that we can use in react to listen and 05:01.160 --> 05:02.420 hook into those events. 05:02.450 --> 05:08.340 A couple of common ones that we'll use on this training course when they're changing text in an input, 05:08.340 --> 05:15.360 then we'll use the Onchange event, for example, and form submission we would make use of the Onsubmit 05:15.540 --> 05:16.890 event. 05:17.160 --> 05:22.800 Another thing our components can and will do is use state and states. 05:22.830 --> 05:24.360 Really is just a component's memory. 05:24.360 --> 05:28.320 Anything that we want to store inside a component, we can use component states. 05:28.320 --> 05:29.850 But JavaScript functions well. 05:29.850 --> 05:32.790 They don't have the ability to remember anything. 05:32.820 --> 05:36.510 They just take arguments as their parameters and they return something. 05:37.500 --> 05:40.590 They don't have any ability to remember something. 05:40.590 --> 05:44.400 So inside react, we also have the concept of react hooks. 05:44.400 --> 05:51.360 When we do want to do something like remember something inside a component, then we use a react hook 05:52.500 --> 05:54.810 and in this case we use the use state hook. 05:54.810 --> 05:58.560 Now this uses react functionality in the background. 05:58.740 --> 06:01.440 So we hook into react if you like. 06:01.440 --> 06:02.910 That's where the name comes from. 06:02.910 --> 06:06.530 And in this case we want to use states inside a component. 06:06.530 --> 06:08.660 So we use a react hook to do that. 06:08.810 --> 06:15.980 And the way that this particular example works is we create a variable using const and provide an array. 06:15.980 --> 06:18.800 And the first part of the array is the state value. 06:18.830 --> 06:20.660 What are we keeping track of? 06:20.690 --> 06:23.780 The second part is a function that allows us to set the value. 06:23.780 --> 06:30.440 And because react is aware of what this state is, anytime that state is updated, then that would cause 06:30.440 --> 06:34.550 our component to rerender and display the updated states in the user's browser. 06:34.580 --> 06:40.940 Another important concept in the world of react is the concept of the virtual Dom your browser. 06:40.970 --> 06:48.050 Our browser will keep track of the structure of any HTML page in what's referred to as a document object 06:48.050 --> 06:55.160 model, and any changes to that web page would need to be applied to the actual document object model. 06:55.160 --> 06:59.210 But making changes to this directly is not the most efficient way to do it. 06:59.210 --> 07:02.600 And certain libraries like jQuery, that's what they do. 07:02.630 --> 07:07.960 They manipulate the Dom to make changes to the user's browser, but it's not the most efficient place 07:07.960 --> 07:08.350 to do it. 07:08.350 --> 07:08.620 So what? 07:08.650 --> 07:13.570 React does is it creates a copy of this in memory called the virtual Dom. 07:13.570 --> 07:14.230 At any. 07:14.260 --> 07:20.050 Time something changes inside the virtual Dom, react will compute a difference between. 07:20.080 --> 07:24.970 The virtual Dom and the actual Dom, and it will apply that difference to the actual. 07:25.000 --> 07:25.600 Dom. 07:25.600 --> 07:28.000 So it only updates just what it needs to. 07:28.030 --> 07:32.020 Much more efficient than directly manipulating the actual Dom. 07:32.140 --> 07:35.110 So is react worth your time? 07:35.680 --> 07:43.120 Well, it continues to top the charts in the Stack Overflow developer surveys for professional developers, 07:43.120 --> 07:48.190 and many big companies use it for their user interfaces. 07:48.190 --> 07:49.660 So it's not going away. 07:49.660 --> 07:52.510 It's going to be around probably for a very long time. 07:52.510 --> 07:55.360 And also it's considered easy to learn. 07:55.360 --> 08:02.080 And there's an asterisks there because react itself is quite easy to learn if you know a bit of JavaScript, 08:02.080 --> 08:10.640 if you know a bit of CSS, if you know a bit of HTML, you pretty much already know about 90% of react, 08:11.270 --> 08:16.730 and then all you need to do is fill in the gaps with the very react specific things like hooks, and 08:16.730 --> 08:18.170 then you pretty much know react. 08:18.170 --> 08:20.690 So it can feel quite easy to learn. 08:20.690 --> 08:24.470 But there's a caveat to that because react is really just a library. 08:24.950 --> 08:26.120 It's not a framework. 08:26.120 --> 08:27.980 It doesn't come with things like routing. 08:27.980 --> 08:30.650 It doesn't come with forms. 08:30.710 --> 08:36.830 Well, we can use forms in react, but we typically don't for any significant forms because it gets 08:36.830 --> 08:39.500 quite verbose and quite tedious. 08:39.620 --> 08:45.410 And things like global state management, we would typically reach out for a third party thing to help 08:45.410 --> 08:46.220 us do that. 08:46.220 --> 08:52.580 And that's where react becomes a little bit more tricky, because then all of a sudden you need to start 08:52.580 --> 08:54.860 thinking about what do I use for this? 08:54.860 --> 09:00.620 And that comes with a bit of experience, but the react side of things, well, that part is pretty 09:00.620 --> 09:01.700 straightforward. 09:01.700 --> 09:07.640 So let's begin our journey and start to build our react application.