WEBVTT 0 00:00.330 --> 00:00.970 Hey guys. 1 00:00.970 --> 00:03.020 It's Angela from the App Brewery 2 00:03.030 --> 00:07.640 and today I have a really exciting module to share with you. 3 00:07.650 --> 00:14.910 We're going to be learning about React and in this gigantic 10 hour module, we're going to be teaching 4 00:14.910 --> 00:21.240 you the ins and out of this web framework and how you can use it to build beautiful user interfaces 5 00:21.330 --> 00:23.760 for your websites and web apps. 6 00:23.760 --> 00:30.570 Now I know that you guys have been clamoring to learn about this and it's no wonder because even according 7 00:30.570 --> 00:37.500 to Stack Overflow and the latest survey, React JS is both one of the most loved and the most wanted 8 00:37.500 --> 00:43.500 web frameworks out there beating out Angular, Vue and a lot of other great frameworks. 9 00:43.590 --> 00:46.380 But what exactly is React anyways? 10 00:46.380 --> 00:52.390 Well they define it on their website as a JavaScript library for building user interfaces. 11 00:52.410 --> 00:55.620 So it's a front end framework essentially. 12 00:55.620 --> 01:02.340 And the idea is to make it easier and faster to build beautiful user interfaces such as the ones on 13 01:02.390 --> 01:03.520 Airbnb. 14 01:03.820 --> 01:09.990 And then one of the best things about React is it makes it so easy to create these repetitive elements 15 01:10.050 --> 01:17.460 such as these tiles that you see on Airbnb. Each of these sections have different pieces of information, 16 01:17.730 --> 01:25.230 but each of them individually such as the rating or the superhost tag, these all worked very similarly 17 01:25.260 --> 01:26.770 from listing to listing. 18 01:27.300 --> 01:33.870 So if you have a whole bunch of these that you need to render then you can simply create a single component 19 01:34.260 --> 01:40.590 and customize it with different pieces of data to create an entire user interface like the one that 20 01:40.680 --> 01:49.410 Airbnb has. Effectively, you end up breaking down a very complex user interface structure into a component 21 01:49.410 --> 01:50.210 tree. 22 01:50.250 --> 01:57.360 So for example here, I've got the entire web app represented as a component inside that I've got a nav 23 01:57.360 --> 02:00.030 bar component which can be customized. 24 02:00.030 --> 02:06.870 I've got a ToDoList component and inside that I've got ListItem components and then I've got Checkbox 25 02:06.930 --> 02:13.620 and ItemText component each of which can be reused and customized so that you end up coding less but 26 02:13.620 --> 02:16.770 creating more beautiful user interfaces. 27 02:17.310 --> 02:21.690 And it also vastly simplifies the structure of your website. 28 02:22.140 --> 02:28.530 So if you think back to using Bootstrap just to create a simple Navbar like this, we have to write a 29 02:28.530 --> 02:31.020 whole bunch of HTML like this. 30 02:31.290 --> 02:36.810 And it makes it really hard to organize our code and make sense of what's actually going on when things 31 02:36.840 --> 02:37.950 go wrong. 32 02:37.980 --> 02:45.240 Now in React however, we have a whole bunch of different components represented each as if they were 33 02:45.240 --> 02:46.560 an HTML element. 34 02:46.860 --> 02:53.370 So it's effectively like we're creating our own custom HTML elements defining the styling and defining 35 02:53.370 --> 02:55.400 the functionality of each of them. 36 02:55.560 --> 03:01.830 And then we can slot them in, like HTML elements, inside an overall structure keeping the code for our 37 03:01.830 --> 03:06.520 web app incredibly clean and incredibly reusable and modular. 38 03:06.870 --> 03:13.890 So these are all great things for programming clean code and creating apps that scale really well even 39 03:13.890 --> 03:20.340 when it gets really big and complex. Effectively you can think of these components as different ingredients 40 03:20.370 --> 03:26.310 that go into a burger and depending on what it is that you need, you can chop and change these components 41 03:26.580 --> 03:30.680 and customize the components depending on what you need. 42 03:30.780 --> 03:36.020 And this is achieved partly through mixing of the different types of files. 43 03:36.180 --> 03:39.870 So I know that previously we've always tried to keep our HTML, 44 03:39.890 --> 03:40.380 CSS 45 03:40.410 --> 03:47.760 and JavaScript separate. But React does and what it really benefits from is actually combining small 46 03:47.760 --> 03:55.740 amounts of each of these types of files into a single component so that each component has its own styling, 47 03:55.770 --> 04:01.740 its own functionality that it controls, and you can create several of these components to each perform 48 04:01.770 --> 04:08.410 a different function and have a different appearance. For example this is what enables the Twitter web 49 04:08.410 --> 04:15.840 site to be able to load the feed screen without the rest of the page visibly updating at all. 50 04:15.840 --> 04:18.340 You can see that this page is not refreshing. 51 04:18.480 --> 04:24.180 It's only when you reach the bottom of the feed that it detects that you've reached the bottom and then 52 04:24.180 --> 04:31.320 it makes a request to the server to populate this feed component with more data while the rest of your 53 04:31.320 --> 04:35.600 app stays as it is without needing any changes. 54 04:35.610 --> 04:39.870 This is also what enables websites to be incredibly interactive. 55 04:39.990 --> 04:46.020 If you think back to the old days where we had Facebook and you had these requests, say friend requests 56 04:46.020 --> 04:51.680 or poke requests or whatever it may be, you had to refresh the page in order to see the updates. 57 04:51.960 --> 04:58.320 But these days it's all handled through notifications and we have each component listening for changes 58 04:58.320 --> 05:05.650 in the server and updating itself and its own appearance and data and being able to talk to the server 59 05:05.650 --> 05:07.030 independently. 60 05:07.030 --> 05:12.670 So imagine if every single part of this Facebook website was its own component. 61 05:12.970 --> 05:15.460 So the news feed is its own component, 62 05:15.460 --> 05:17.670 each of the posts are its own component. 63 05:17.770 --> 05:23.530 So if there's a new comment for example on a post, then that post will be have to update itself without 64 05:23.530 --> 05:26.230 affecting any of the rest of the website. 65 05:26.260 --> 05:30.290 And this really is one of the greatest things about the React framework. 66 05:30.490 --> 05:37.240 Now the other really awesome thing that it does is it's able to re-render these changes really efficiently 67 05:37.690 --> 05:40.590 and it does this by comparing changes, 68 05:40.600 --> 05:42.010 so what we might call diffing. 69 05:42.310 --> 05:48.400 So whenever a change happens, say a new piece of data comes in or the user does something, then it's going 70 05:48.400 --> 05:56.440 to compare the new version of the DOM tree that you want to be rendered with the old version that's 71 05:56.440 --> 06:01.320 already showing up and it will do this kind of spot-the-difference thing where it spots that 72 06:01.360 --> 06:01.870 'Oh OK. 73 06:01.870 --> 06:06.320 The only thing that's changed is that this input has gone from empty to checked. 74 06:06.460 --> 06:10.240 So this is the only component that I'm going to re render.' 75 06:10.240 --> 06:17.000 And this obviously is more efficient and will make your web app seem more interactive and much faster. 76 06:17.200 --> 06:23.700 Now of course React is not the only frontend framework out there. So, why am I talking about React? 77 06:23.950 --> 06:29.560 Well even if you look at this Google Trends chart which looks at how often people search for each of 78 06:29.560 --> 06:36.770 these things, you can see that React has clearly overtaken Angular and Vue over the past two years. 79 06:36.970 --> 06:43.540 And if you look at Stack Overflow surveys, the most popular web framework is currently React JS just 80 06:43.540 --> 06:50.560 below jQuery. But that's not all because React is being used at loads of places that you might want 81 06:50.560 --> 06:57.340 a job at, say Airbnb or Uber, Facebook, Netflix. And it's probably one of the fastest growing and most 82 06:57.550 --> 06:59.650 in demand skills out there. 83 06:59.650 --> 07:06.520 In fact if you look at indeed and you search for a job for full stack developer or frontend engineer, 84 07:06.970 --> 07:14.350 very frequently you will see a requirement for React and Node, both things that we cover in this course 85 07:14.710 --> 07:17.460 and is really important to know about. 86 07:17.500 --> 07:20.890 I hope I've gotten you excited to learn this technology. 87 07:20.890 --> 07:26.360 So without further ado, let's get started and see what it's all about and get stuck in 88 07:26.360 --> 07:28.030 using React JS.