Now to get started, let's start by diving
into the most important question first.
What exactly is React.js?
Well, the official website tells us,
React is a JavaScript library for building user interfaces.
And that's a nice sentence, but what exactly does it mean?
Well, obviously it's a JavaScript library
so we will write JavaScript code.
We use React in conjunction with our own JavaScript code,
but it is a library that's there
to help us build user interfaces.
And I might add that it's there to help us build
highly interactive user interfaces.
You don't necessarily need React
if you build a simple webpage
on which not a lot of things are happening.
But if you're building a more interactive website
like the demo project we're about to build,
then React.js can be a huge help
vastly simplifying the code you have to write.
And to show you what I mean,
consider this very simple example here.
I get this user card where I have this Contact button.
And if I click this button, this modal overlay opens up
and there I can enter some address and submit it.
Now, this is not super fancy,
but we have a website with some interaction on it.
We have a website where I can open this modal
and enter data and submit it.
Now on this demo website,
nothing's happening to that submitted data.
But we do have a website that does support
some user interaction that must be interactive
and reactive because we must React to button clicks
and openness overlay.
And even though that's a pretty simple example
and a simple website here.
The JavaScript code,
we could write to make this website work this way
and to make the website behave that way
when not using React.js could look like this.
And whilst this is of course not too much code,
it's quite a bit of code for this simple interaction.
And it's probably easy to imagine
that if we had a more complex website
with more user interactions on it,
we would need to write a lot more code.
And of course, therefore we would introduce
more potential error sources.
Now, when building the exact same application with React.js,
the code suddenly looks like this combined with this.
And whilst this is still some code,
it's a bit more readable and easier to manage.
And as soon as you know React,
which you will do by the end of the video,
it's also much easier to read as you will see.
Because even though you don't know React yet,
you can clearly see
that we seem to be writing some JavaScript code
where we have some HTML code
blended into that JavaScript code.
And we then have clear instructions like setShowModal
which seems to do something
which then leads to that Modal being shown conditionally.
And again, I will teach you all that code
and React syntax and all these React features
step by step throughout this video.
You don't need to understand them yet,
but you can probably see
that we have some clear instructions here,
and some clean code, and most importantly,
some HTML code blended into the JavaScript code
which is a feature that's supported by React
and by the React projects we'll be working in,
as you will also learn in this video.
In case of the raw Vanilla JavaScript code,
we just had step by step instructions
where we tell the browser step by step
what should happen on the screen,
that we want to add an event listener,
that we wanna create a new HTML element,
how it should be configured,
where it should be added, and much more.
We have step by step instructions.
And indeed we call this approach of writing code
the imperative approach
where we have step by step instructions
simply describing step by step what the browser should do.
On the other hand, when using React.js,
a major benefit of doing so is
that we're able to write declarative code
where we write the code for the UI
that should be output on the screen,
and we blend some syntax like event listeners
or dynamic values into that HTML code,
and combine it with extra React features
where we can, for example, define different states
and under which circumstances these different states
should be active.
And React.js will then generate the appropriate instructions
for the browser under the hood
so that as a developer,
we don't have to write these step by step instructions.
And that is indeed one of the major benefits
highlighted on the React.js website as well,
the fact that you write the declarative code
when working with React.
Now again, this is just a simple example
with a lot of code we don't know yet,
but that's one of the major advantages of using React.
We often can write much simpler code
and therefore actually build
way more powerful user interfaces.