Original subtitles

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.