1 00:00:01,140 --> 00:00:02,430 ‫So now that we know 2 00:00:02,430 --> 00:00:06,060 ‫why we need a JavaScript framework in the first place, 3 00:00:06,060 --> 00:00:09,330 ‫let's start by learning about the most popular framework 4 00:00:09,330 --> 00:00:11,760 ‫out there, React. 5 00:00:11,760 --> 00:00:15,150 ‫So in this lecture, we will get a high-level overview 6 00:00:15,150 --> 00:00:18,930 ‫of what React actually is and how it works. 7 00:00:18,930 --> 00:00:20,820 ‫So it's gonna be a full packed 8 00:00:20,820 --> 00:00:22,950 ‫but super interesting lecture. 9 00:00:22,950 --> 00:00:24,873 ‫So let's quickly get started. 10 00:00:26,730 --> 00:00:30,270 ‫So according to the official React documentation, 11 00:00:30,270 --> 00:00:35,190 ‫React is a JavaScript library for building user interfaces. 12 00:00:35,190 --> 00:00:36,840 ‫Now, that's something 13 00:00:36,840 --> 00:00:39,780 ‫but it really isn't that helpful, is it? 14 00:00:39,780 --> 00:00:42,630 ‫So let's extend this definition by a bit 15 00:00:42,630 --> 00:00:44,850 ‫so that it becomes more helpful 16 00:00:44,850 --> 00:00:49,830 ‫or, should I say, a little bit more crazy like this. 17 00:00:49,830 --> 00:00:53,040 ‫So now, in this slightly modified definition, 18 00:00:53,040 --> 00:00:56,490 ‫React is an extremely popular, declarative, 19 00:00:56,490 --> 00:00:58,980 ‫component-based, state-driven, 20 00:00:58,980 --> 00:01:02,250 ‫JavaScript library for building user interfaces, 21 00:01:02,250 --> 00:01:04,620 ‫created by Facebook. 22 00:01:04,620 --> 00:01:07,500 ‫And this is actually a lot more helpful 23 00:01:07,500 --> 00:01:10,950 ‫because now, we can deconstruct this definition 24 00:01:10,950 --> 00:01:14,673 ‫and learn about what React actually is, step by step. 25 00:01:15,600 --> 00:01:18,840 ‫So starting with component-based design, 26 00:01:18,840 --> 00:01:22,590 ‫React is all about components such as buttons, 27 00:01:22,590 --> 00:01:26,400 ‫input fields, search bars, and so on. 28 00:01:26,400 --> 00:01:30,180 ‫So components are the building blocks of user interfaces 29 00:01:30,180 --> 00:01:31,680 ‫in React. 30 00:01:31,680 --> 00:01:34,590 ‫And in fact, basically all React does 31 00:01:34,590 --> 00:01:38,520 ‫is to take components and draw them on a webpage. 32 00:01:38,520 --> 00:01:39,630 ‫That's it. 33 00:01:39,630 --> 00:01:43,050 ‫And so we built complex UIs in React 34 00:01:43,050 --> 00:01:45,240 ‫by building multiple components 35 00:01:45,240 --> 00:01:49,080 ‫and then combining these components like LEGO pieces. 36 00:01:49,080 --> 00:01:53,880 ‫For example, to create a complex application like Airbnb. 37 00:01:53,880 --> 00:01:56,250 ‫So here we have exactly the same components 38 00:01:56,250 --> 00:02:00,780 ‫that we saw earlier, but all combined into a complex UI. 39 00:02:00,780 --> 00:02:03,360 ‫So the navbar, the search bar, 40 00:02:03,360 --> 00:02:06,150 ‫the results panel, and the map. 41 00:02:06,150 --> 00:02:08,430 ‫Now, another thing that we do with components 42 00:02:08,430 --> 00:02:10,050 ‫is to reuse them. 43 00:02:10,050 --> 00:02:12,360 ‫For example, here in the results panel, 44 00:02:12,360 --> 00:02:15,450 ‫there are multiple listing that look quite similar. 45 00:02:15,450 --> 00:02:17,820 ‫And so we can create a listing component 46 00:02:17,820 --> 00:02:20,100 ‫and then reuse it three times here, 47 00:02:20,100 --> 00:02:22,263 ‫simply adjusting the data a little bit. 48 00:02:23,700 --> 00:02:26,040 ‫Now, since we built complex UIs 49 00:02:26,040 --> 00:02:28,350 ‫by combining multiple components, 50 00:02:28,350 --> 00:02:31,140 ‫each component must have all the information 51 00:02:31,140 --> 00:02:33,990 ‫about what it looks like, right? 52 00:02:33,990 --> 00:02:37,470 ‫So in order to describe what each component looks like 53 00:02:37,470 --> 00:02:38,850 ‫and how it works, 54 00:02:38,850 --> 00:02:43,350 ‫we use a special declarative syntax called JSX. 55 00:02:43,350 --> 00:02:45,150 ‫And declarative simply means 56 00:02:45,150 --> 00:02:48,060 ‫that we tell React what a component 57 00:02:48,060 --> 00:02:51,330 ‫and ultimately the entire UI should look like 58 00:02:51,330 --> 00:02:53,580 ‫based on the current state. 59 00:02:53,580 --> 00:02:58,530 ‫So React is basically a huge abstraction away from the DOM 60 00:02:58,530 --> 00:03:01,470 ‫so that we never have to work with a DOM directly 61 00:03:01,470 --> 00:03:04,140 ‫as we would with vanilla JavaScript. 62 00:03:04,140 --> 00:03:06,840 ‫So we simply tell React what we want to happen 63 00:03:06,840 --> 00:03:10,560 ‫when some data changes, but not how to do it. 64 00:03:10,560 --> 00:03:13,770 ‫And again, we do that using JSX. 65 00:03:13,770 --> 00:03:18,770 ‫So JSX is basically a syntax that combines parts of HTML, 66 00:03:19,230 --> 00:03:22,380 ‫CSS, JavaScript, and it even allows us 67 00:03:22,380 --> 00:03:25,320 ‫to reference other React components. 68 00:03:25,320 --> 00:03:27,690 ‫And the declarative nature of React 69 00:03:27,690 --> 00:03:30,600 ‫is an essential concept that, of course, 70 00:03:30,600 --> 00:03:32,823 ‫we will really dive into later. 71 00:03:34,230 --> 00:03:37,650 ‫But now you might wonder, if we never touch the DOM, 72 00:03:37,650 --> 00:03:40,680 ‫then how does React update the UI? 73 00:03:40,680 --> 00:03:44,820 ‫Well, that's where the concept of state comes into play. 74 00:03:44,820 --> 00:03:47,520 ‫So remember that the main goal of React 75 00:03:47,520 --> 00:03:51,090 ‫is to always keep the UI in sync with data. 76 00:03:51,090 --> 00:03:54,750 ‫And from now on, let's actually call that data, state. 77 00:03:54,750 --> 00:03:58,740 ‫For example, an array of apartments on Airbnb. 78 00:03:58,740 --> 00:04:00,960 ‫So based on our initial state, 79 00:04:00,960 --> 00:04:03,480 ‫React will render a user interface 80 00:04:03,480 --> 00:04:07,410 ‫using the components that we wrote using JSX. 81 00:04:07,410 --> 00:04:10,620 ‫Then based on some event like a button click, 82 00:04:10,620 --> 00:04:12,360 ‫the state might change. 83 00:04:12,360 --> 00:04:15,030 ‫For example, more data about apartments 84 00:04:15,030 --> 00:04:17,190 ‫might be loaded from an API. 85 00:04:17,190 --> 00:04:19,980 ‫And so here comes the interesting part. 86 00:04:19,980 --> 00:04:21,870 ‫Whenever the state changes, 87 00:04:21,870 --> 00:04:24,450 ‫we manually update the state in our app 88 00:04:24,450 --> 00:04:26,400 ‫and React will then automatically 89 00:04:26,400 --> 00:04:30,780 ‫re-render the user interface to reflect that latest state, 90 00:04:30,780 --> 00:04:32,280 ‫or in other words, 91 00:04:32,280 --> 00:04:37,280 ‫React react to state changes by re-rendering the UI. 92 00:04:37,680 --> 00:04:40,590 ‫And that is in fact the whole reason 93 00:04:40,590 --> 00:04:44,043 ‫why React is called React in the first place. 94 00:04:45,540 --> 00:04:47,760 ‫Now, there's always been some debate 95 00:04:47,760 --> 00:04:51,000 ‫over whether React is actually a framework 96 00:04:51,000 --> 00:04:53,070 ‫or just a library. 97 00:04:53,070 --> 00:04:55,530 ‫Well, the short answer is that React 98 00:04:55,530 --> 00:04:57,840 ‫is actually just a library, 99 00:04:57,840 --> 00:05:00,570 ‫even though I keep calling it a framework. 100 00:05:00,570 --> 00:05:03,900 ‫And the reason for that is that React itself 101 00:05:03,900 --> 00:05:07,380 ‫is really only the so-called view layer. 102 00:05:07,380 --> 00:05:11,100 ‫So if we want to build a complete real world application, 103 00:05:11,100 --> 00:05:13,680 ‫we need to choose multiple external libraries 104 00:05:13,680 --> 00:05:15,360 ‫to add to our project. 105 00:05:15,360 --> 00:05:19,200 ‫For example, for routing or for data fetching. 106 00:05:19,200 --> 00:05:22,680 ‫Now to address this, there are actually multiple frameworks 107 00:05:22,680 --> 00:05:25,470 ‫that have been built on top of React. 108 00:05:25,470 --> 00:05:28,230 ‫So frameworks that include all these functionalities 109 00:05:28,230 --> 00:05:31,050 ‫that React is missing out of the box, 110 00:05:31,050 --> 00:05:35,340 ‫and the most popular ones are called Next.js and Remix. 111 00:05:35,340 --> 00:05:38,673 ‫But again, more about all that later in the course. 112 00:05:39,870 --> 00:05:40,950 ‫Now, moving on. 113 00:05:40,950 --> 00:05:42,810 ‫Besides all the great features 114 00:05:42,810 --> 00:05:44,430 ‫that we've been talking about, 115 00:05:44,430 --> 00:05:46,710 ‫maybe the biggest reason to choose React 116 00:05:46,710 --> 00:05:50,010 ‫over all the other frameworks that are similar 117 00:05:50,010 --> 00:05:53,850 ‫is because React is extremely popular. 118 00:05:53,850 --> 00:05:57,630 ‫So according to the weekly download numbers from npm, 119 00:05:57,630 --> 00:06:01,380 ‫React is by far the most used framework. 120 00:06:01,380 --> 00:06:04,230 ‫And the difference between React and the other ones 121 00:06:04,230 --> 00:06:06,210 ‫only seems to be growing. 122 00:06:06,210 --> 00:06:09,960 ‫So React really isn't going anywhere. 123 00:06:09,960 --> 00:06:13,050 ‫A big reason for that is that many large companies 124 00:06:13,050 --> 00:06:15,960 ‫have adopted React a long time ago. 125 00:06:15,960 --> 00:06:18,510 ‫And so now, more and more smaller companies 126 00:06:18,510 --> 00:06:22,260 ‫all over the world are following in their footsteps. 127 00:06:22,260 --> 00:06:24,120 ‫This means that all these companies 128 00:06:24,120 --> 00:06:27,120 ‫now need React developers for their teams, 129 00:06:27,120 --> 00:06:31,140 ‫which, of course, has created a huge worldwide job market 130 00:06:31,140 --> 00:06:34,830 ‫with a high demand for qualified React developers. 131 00:06:34,830 --> 00:06:36,750 ‫And these are not just any jobs. 132 00:06:36,750 --> 00:06:39,480 ‫They're usually well-paying jobs. 133 00:06:39,480 --> 00:06:42,060 ‫Now, even another positive outcome 134 00:06:42,060 --> 00:06:45,210 ‫of React's huge popularity is that now, 135 00:06:45,210 --> 00:06:49,530 ‫there is a very large and active React developer community, 136 00:06:49,530 --> 00:06:51,780 ‫which means that there are always gonna be 137 00:06:51,780 --> 00:06:55,890 ‫lots of tutorials, Stack Overflow questions and answers, 138 00:06:55,890 --> 00:07:00,570 ‫and also lots of support given to other React developers. 139 00:07:00,570 --> 00:07:02,070 ‫And if you ask me, 140 00:07:02,070 --> 00:07:04,770 ‫this is actually one of the strongest benefits 141 00:07:04,770 --> 00:07:07,080 ‫of using React right now. 142 00:07:07,080 --> 00:07:10,260 ‫Also because this huge community has grown 143 00:07:10,260 --> 00:07:15,260 ‫a truly gigantic third-party library ecosystem around React. 144 00:07:15,690 --> 00:07:19,500 ‫And so now, you can integrate countless useful libraries 145 00:07:19,500 --> 00:07:22,803 ‫and tools into your own React applications. 146 00:07:24,150 --> 00:07:25,740 ‫And now, our last topic 147 00:07:25,740 --> 00:07:28,860 ‫is that React was created by Facebook. 148 00:07:28,860 --> 00:07:30,420 ‫Well, more specifically, 149 00:07:30,420 --> 00:07:33,930 ‫React was created in 2011 by Jordan Walke, 150 00:07:33,930 --> 00:07:38,250 ‫who is an engineer who was working at Facebook at the time. 151 00:07:38,250 --> 00:07:42,120 ‫So that's why we say that React is backed by Facebook 152 00:07:42,120 --> 00:07:44,250 ‫or now, by Meta. 153 00:07:44,250 --> 00:07:47,940 ‫So there, React was first used on the newsfeed 154 00:07:47,940 --> 00:07:49,710 ‫and also the chat app. 155 00:07:49,710 --> 00:07:52,740 ‫And from there, it spread out to the entire Facebook 156 00:07:52,740 --> 00:07:55,890 ‫and also the Instagram applications. 157 00:07:55,890 --> 00:08:00,890 ‫Then in 2013, React was open-sourced for everyone to use it 158 00:08:01,170 --> 00:08:03,870 ‫and the rest is history 159 00:08:03,870 --> 00:08:07,920 ‫because React has truly and completely transformed 160 00:08:07,920 --> 00:08:09,900 ‫front-end web development, 161 00:08:09,900 --> 00:08:13,920 ‫not only by developers that are using React itself, 162 00:08:13,920 --> 00:08:16,620 ‫but because many other modern frameworks 163 00:08:16,620 --> 00:08:18,690 ‫were created as a response, 164 00:08:18,690 --> 00:08:21,423 ‫which really changed the industry forever. 165 00:08:22,980 --> 00:08:27,980 ‫Okay, so to summarize, React is really good at two things. 166 00:08:28,800 --> 00:08:31,530 ‫First, rendering components on a webpage 167 00:08:31,530 --> 00:08:35,610 ‫as a user interface based on their current state. 168 00:08:35,610 --> 00:08:38,580 ‫And second, React is really good 169 00:08:38,580 --> 00:08:41,850 ‫at keeping the user interface in sync with state 170 00:08:41,850 --> 00:08:46,350 ‫by re-rendering, or in other words, by reacting 171 00:08:46,350 --> 00:08:49,830 ‫when the state of one of the component changes. 172 00:08:49,830 --> 00:08:53,070 ‫And as you will see later, React does all this 173 00:08:53,070 --> 00:08:55,800 ‫by employing something called a virtual DOM, 174 00:08:55,800 --> 00:08:58,620 ‫a Fiber tree, one-way data flow, 175 00:08:58,620 --> 00:09:01,080 ‫and many other techniques that we will study 176 00:09:01,080 --> 00:09:02,820 ‫throughout this course. 177 00:09:02,820 --> 00:09:03,653 ‫All right. 178 00:09:03,653 --> 00:09:06,360 ‫And so now that you have a rough overview 179 00:09:06,360 --> 00:09:08,370 ‫of what React actually is, 180 00:09:08,370 --> 00:09:10,920 ‫let's set up our development environment 181 00:09:10,920 --> 00:09:14,313 ‫so that we can start writing some serious code finally.