All language subtitles for 003 Why React__en

This is a very simple demo here.

I have some content on the page and when I click delete,

I get this overlay where I can confirm or cancel.

Now both buttons don't do anything

but close that overlay as (indistinct)

clicking that backdrop.

But what you see on this page here

or what happens when we click delete?

All of that is controlled with JavaScript.

I got a HTML file with some very basic HTML content,

some styling which we can ignore.

And then the magic happens in this app JS file.

In there I got some code that in the end adds a listener,

to this main button which we got on the screen.

So to this delete button here,

and when that button is clicked

I fired this showModalHandler function.

And in there we run a bunch

of JavaScript code to create various elements

divs, paragraphs and then the cancel

and confirm buttons to configure those elements,

and add text or CSS classes

and to add event listeners to those elements as well

to then fire that closeModalHandler function

which in the end removes the overlay

this modal as we call it.

And then still in the showModalHandler function,

I got some code that combines all those created elements

and brings them onto the screen.

This is the JavaScript code responsible

for opening this overlay here.

Now it works and it's not too bad

but it's quite some code for this simple action.

And here we only got one Todo in this demo application.

If we would add multiple Todos,

if we would repeat this HTML code

multiple times to render more Todos on the page

or to even render those Todos dynamically

after fetching them from a database, for example,

this code would become far more difficult, far more complex.

And for example I couldn't just select

a button on the page with that query selector,

because we would have multiple delete buttons

for multiple Todos.

And we would have to make sure

that for different Todos different overlays are opened.

And when we confirmed the deletion

the correct Todo is deleted.

We're not even doing that here in this demo

but that would be more complexity

which we have to add and handle

if we build a more realistic app here,

a more realistic website.

And therefore just the JavaScript works,

and can sometimes be a good choice

but it can also reach its limits.

And one of the reasons is that with just a JavaScript,

you have to write every single step that should be taken.

We want to create a element.

We want to set its content.

We want to add classes.

We want to add a click listener.

Then what should happen on that click listener?

Every single step needs to be described.

This way of programming and bringing something

onto the screen is called an imperative approach.

We simply describe action after action, step after step,

and that can reach its limits.

And in addition even if we don't reach any limits,

we as a developer have to take care

about all the nitty-gritty details.

We have to run the low level code

for creating a button, for setting its text content.

And therefore in the end we reinvent the wheel

over and over again doing repetitive tasks.

Now here is the same example with React.

This works in exactly the same way

but the code looks very different.

I got a React project here.

And as a side note you find both code repositories,

both code snapshots attached.

And here in React JS, this might look a bit more complex.

We got more files involved here

but that's something we're going to learn,

throughout the course.

Why we have multiple files.

But in the end this is the main code that's responsible

for bringing this Todo onto the screen.

And what's very interesting here

is that we have like a custom HTML component here.

A custom HTML element,

and indeed React is all about those components.

React is all about splitting your application

into small building blocks, small components

where every building block, every component

has a clear task and therefore your code stays maintainable

and manageable and React, the library

will do the heavy lifting of rendering something

on the screen and of combining all your code.

So for example if we look into the code

for this custom element which we built here,

which lives in this Todo.js file,

then we here again see that I have some HTML code

for rendering a Todo.

But that we have some kind of placeholder in here

and then some kind of AVRA code,

which we don't fully understand yet

but which we will understand

and learn about fraud discourse.

And in the end that's the code responsible

for rendering such a Todo

and for rendering the modal this overlay here as well

and for rendering it conditionally.

And what's interesting here is that even though

we don't understand this code yet,

and even though it's certainly strange

that we have HTML code in JavaScript files,

even though that's all weird,

we can definitely see that we don't have

a bunch of step by step instructions here.

Instead we kind of define what we wanna have

as an end result.

And then we have some placeholders,

some flexible elements there.

And then we have very simple instructions here

which in the end then will be processed by React to change

what's visible on the screen.

And all these low level instructions

for creating elements and setting text continents on,

those instructions are not written

by us when using React instead they will be written

or defined if you wanna call it like this

by the React library.

We as a React developer work on a higher level

which makes working with React

and which makes building complex user interfaces way easier.

And that is why we wanna use React.js.

It makes building modern,

rich complex user interfaces easier.

And it does so by giving us a higher level syntax

where we write code in a declarative way,

in a declarative component focused way.

We define what we wanna have on the screen,

what the end goal is.

We create these custom HTML elements

and React will do the rest.

And one side effect for example is

that if we wanted more than one Todo

we could just copy that custom element.

Change maybe that text, that configuration

and boom, we got a second Todo here.

And we got up button on that Todo which works as well.

And that is why we use technologies

or frameworks like React.