‫So now that we know
‫why we need a JavaScript framework in the first place,
‫let's start by learning about the most popular framework
‫out there, React.
‫So in this lecture, we will get a high-level overview
‫of what React actually is and how it works.
‫So it's gonna be a full packed
‫but super interesting lecture.
‫So let's quickly get started.
‫So according to the official React documentation,
‫React is a JavaScript library for building user interfaces.
‫Now, that's something
‫but it really isn't that helpful, is it?
‫So let's extend this definition by a bit
‫so that it becomes more helpful
‫or, should I say, a little bit more crazy like this.
‫So now, in this slightly modified definition,
‫React is an extremely popular, declarative,
‫component-based, state-driven,
‫JavaScript library for building user interfaces,
‫created by Facebook.
‫And this is actually a lot more helpful
‫because now, we can deconstruct this definition
‫and learn about what React actually is, step by step.
‫So starting with component-based design,
‫React is all about components such as buttons,
‫input fields, search bars, and so on.
‫So components are the building blocks of user interfaces
‫in React.
‫And in fact, basically all React does
‫is to take components and draw them on a webpage.
‫That's it.
‫And so we built complex UIs in React
‫by building multiple components
‫and then combining these components like LEGO pieces.
‫For example, to create a complex application like Airbnb.
‫So here we have exactly the same components
‫that we saw earlier, but all combined into a complex UI.
‫So the navbar, the search bar,
‫the results panel, and the map.
‫Now, another thing that we do with components
‫is to reuse them.
‫For example, here in the results panel,
‫there are multiple listing that look quite similar.
‫And so we can create a listing component
‫and then reuse it three times here,
‫simply adjusting the data a little bit.
‫Now, since we built complex UIs
‫by combining multiple components,
‫each component must have all the information
‫about what it looks like, right?
‫So in order to describe what each component looks like
‫and how it works,
‫we use a special declarative syntax called JSX.
‫And declarative simply means
‫that we tell React what a component
‫and ultimately the entire UI should look like
‫based on the current state.
‫So React is basically a huge abstraction away from the DOM
‫so that we never have to work with a DOM directly
‫as we would with vanilla JavaScript.
‫So we simply tell React what we want to happen
‫when some data changes, but not how to do it.
‫And again, we do that using JSX.
‫So JSX is basically a syntax that combines parts of HTML,
‫CSS, JavaScript, and it even allows us
‫to reference other React components.
‫And the declarative nature of React
‫is an essential concept that, of course,
‫we will really dive into later.
‫But now you might wonder, if we never touch the DOM,
‫then how does React update the UI?
‫Well, that's where the concept of state comes into play.
‫So remember that the main goal of React
‫is to always keep the UI in sync with data.
‫And from now on, let's actually call that data, state.
‫For example, an array of apartments on Airbnb.
‫So based on our initial state,
‫React will render a user interface
‫using the components that we wrote using JSX.
‫Then based on some event like a button click,
‫the state might change.
‫For example, more data about apartments
‫might be loaded from an API.
‫And so here comes the interesting part.
‫Whenever the state changes,
‫we manually update the state in our app
‫and React will then automatically
‫re-render the user interface to reflect that latest state,
‫or in other words,
‫React react to state changes by re-rendering the UI.
‫And that is in fact the whole reason
‫why React is called React in the first place.
‫Now, there's always been some debate
‫over whether React is actually a framework
‫or just a library.
‫Well, the short answer is that React
‫is actually just a library,
‫even though I keep calling it a framework.
‫And the reason for that is that React itself
‫is really only the so-called view layer.
‫So if we want to build a complete real world application,
‫we need to choose multiple external libraries
‫to add to our project.
‫For example, for routing or for data fetching.
‫Now to address this, there are actually multiple frameworks
‫that have been built on top of React.
‫So frameworks that include all these functionalities
‫that React is missing out of the box,
‫and the most popular ones are called Next.js and Remix.
‫But again, more about all that later in the course.
‫Now, moving on.
‫Besides all the great features
‫that we've been talking about,
‫maybe the biggest reason to choose React
‫over all the other frameworks that are similar
‫is because React is extremely popular.
‫So according to the weekly download numbers from npm,
‫React is by far the most used framework.
‫And the difference between React and the other ones
‫only seems to be growing.
‫So React really isn't going anywhere.
‫A big reason for that is that many large companies
‫have adopted React a long time ago.
‫And so now, more and more smaller companies
‫all over the world are following in their footsteps.
‫This means that all these companies
‫now need React developers for their teams,
‫which, of course, has created a huge worldwide job market
‫with a high demand for qualified React developers.
‫And these are not just any jobs.
‫They're usually well-paying jobs.
‫Now, even another positive outcome
‫of React's huge popularity is that now,
‫there is a very large and active React developer community,
‫which means that there are always gonna be
‫lots of tutorials, Stack Overflow questions and answers,
‫and also lots of support given to other React developers.
‫And if you ask me,
‫this is actually one of the strongest benefits
‫of using React right now.
‫Also because this huge community has grown
‫a truly gigantic third-party library ecosystem around React.
‫And so now, you can integrate countless useful libraries
‫and tools into your own React applications.
‫And now, our last topic
‫is that React was created by Facebook.
‫Well, more specifically,
‫React was created in 2011 by Jordan Walke,
‫who is an engineer who was working at Facebook at the time.
‫So that's why we say that React is backed by Facebook
‫or now, by Meta.
‫So there, React was first used on the newsfeed
‫and also the chat app.
‫And from there, it spread out to the entire Facebook
‫and also the Instagram applications.
‫Then in 2013, React was open-sourced for everyone to use it
‫and the rest is history
‫because React has truly and completely transformed
‫front-end web development,
‫not only by developers that are using React itself,
‫but because many other modern frameworks
‫were created as a response,
‫which really changed the industry forever.
‫Okay, so to summarize, React is really good at two things.
‫First, rendering components on a webpage
‫as a user interface based on their current state.
‫And second, React is really good
‫at keeping the user interface in sync with state
‫by re-rendering, or in other words, by reacting
‫when the state of one of the component changes.
‫And as you will see later, React does all this
‫by employing something called a virtual DOM,
‫a Fiber tree, one-way data flow,
‫and many other techniques that we will study
‫throughout this course.
‫All right.
‫And so now that you have a rough overview
‫of what React actually is,
‫let's set up our development environment
‫so that we can start writing some serious code finally.