So what exactly is React.js?
It's a Javascript library for building user interfaces
and as such, it's all about running Javascript in the browser,
it's a Javascript library for browser side Javascript code,
it's not a Node.js library, it's a browser side Javascript library.
Now to be precise, React.js itself is referred to as a library because it's very focused on that
user interface thing but it actually started a huge ecosystem with other third-party packages that for
example help us with app wide state management or with routing, frontend routing and therefore effectively
you could also call it a framework
I would argue but these are semantics, not too important right now,
let's instead understand how React works and how we use it. React helps us build user interfaces that
are shown in the browser, that run in the browser and therefore we use it to build the frontend of web
applications, what the user sees, React does not run on a server, React does not communicate with databases,
we use it to build highly reactive modern user interfaces and we do so by following a declarative approach,
which means that in React we rather define the result and maybe different states of the result and under
which state we want to render what and want to show what on the screen instead of the steps that lead
to the result,
that would be an imperative approach which is basically what we have
if we use vanilla Javascript, where we have to define every step - add this element, add this CSS
class to an element, remove this element -
this is what we do in vanilla Javascript and
this can be very cumbersome and very complex user interfaces,
we typically don't want to do that if we're building bigger applications because managing and orchestrating
all these steps and ensuring that when something changes, we execute the right steps is very error prone
and takes a lot of effort and work away from our actual business logic and from building nice user interfaces
and instead forces us to spend a lot of work on Javascript primitives, on reinventing the wheel and so
on and we don't want to do that.
So in React.js, we instead focus on the result and we do so by using components. Components is a concept
introduced by React,
basically these are UI building blocks which we define and you will learn how you do that
in this module of course, which we define and then we compose our user interface from these components
and every component can also define what it should render, under which circumstance and React will then
magically wire up everything behind the scenes and implement all these steps in a gray box here for
us so that we don't have to write the steps, we just define the results.
This is React.js
in a nutshell,
now let's have a look at how it actually works when we write some code.