Now with the project cleaned up, let's explore React
and let's write our own React code.
Currently, we got two Java script files here,
index JS and app JS.
The index JS file will be the starting point
of our React application.
The code written in here
will be the first code
that will be executed in the browser
when we load our project in the browser.
So what we see here in the browser is the result
of this code line here, executing in the end.
Now we don't fully understand this code line yet
but what we do in this file
is we're importing a couple of things.
That is how in modern JavaScript
support that by that build setup we have here
supported by the NPM start script
and what it does behind the scenes
how we combine multiple files and how we import features
like objects or functions from file A into file B.
And here we are, for example
importing the React Dom object from the React Dom library.
So that's not object we created.
That is an object created by the React team
exposed in that React Dom library,
which is part of our project
because it's part of our dependencies here.
Now on that object
we call a render method
and queued at render method.
we pass this strange HTML code.
Now this HTML in Java script syntax here
only works because of that build step,
as mentioned before
and it's actually called JSX.
This kind of code is called a J S X code.
This HTML in Java script code.
JSX is a special syntax
which is not understood by the browser
and which the offer is converted behind the scenes.
But which is more convenient for us as a developer to write
because working with React
will be about building custom HTML elements,
these components
and combining them together.
And that is way easier.
If we can just write HTML code
kind of in our JavaScript files
to describe the desired output.
So here we kind of create
or we use our own HTML element, the app element
which is actually imported from that app file.
The file extension is missing here
because for JavaScript files, it can be omitted.
And the second argument to the render method
in the end just tells React where this element
should be rendered into real Dom.
Now, here we are selecting an element by ID
with an ID route
and we can find this
on the single page that is part of this project.
We find it in the public folder.
There we got a couple of images, but also one HTML file.
That is the single HTML file
that makes up this React application.
Because I mentioned before
you typically build
these single page applications with React
where only one HTML file is fetched from a server
and then React takes over and controls the Dom
and what's visible on the screen.
Now in this index HTML file in the body section
we got a div with an ID route.
And that ID route should be look familiar.
That is the div,
which we in the end
select with this document,
get element by ID code snippet here.
And therefore, in the end
what we tell React with that line
is that we want to render our app HTML element
our custom HTML element,
which is defined
in this app JS file into this place
into the place of this element with this route ID.
So into the place of that div here in the end.
That's what we're telling React.
That's why if we visit our page and we inspect it.
So we don't view the page source
but we inspected with the Dev tools here.
When we have a look at the rendered Dom here
we see embodied that there is this div
with an ID of a root.
And in there we see our div with hello
which is the content we defined an app JS,
and that should make sense
because it is the app thing,
which we import from the app JS file,
which we rendered here.
Now let's take a closer look at this app thing.
Then that is a function,
a function which we export
to make it available outside of this file.
But in the end, just a standard function
a standard JavaScript function.
The only special thing
about that function is that it returns such JSX code.
So there's HTML in JavaScript code.
That's the only special thing.
Other than that it's a regular JavaScript function.
And that is super important.
What we have here is a so-called React component.
We can use it like an HTML element
as we're doing it here in, in index JS
but it's of course not an HTML element.
the browser would know,
but one defined by us
the developers of this project.
Now this component, as it's called in Reacts world
this custom HTML element,
is in the end just a function.
A function
which is to defined and exported
and specifically a function that returns JSX.
That's important.
A component.
so a function that should act
as a component and be usable as a component by React
must return something
that can be rendered in the browser.
That could be text.
It could be a couple of other things,
but it can and most typically will be HTML code as well.
So this JSX code.
And what's interesting
is that in the browser,
if we have a look at the Dom again
we don't see our app element anywhere here.
We don't see an HTML tag called app.
Instead, we just see the content of our component here
this div with hello as a text,
because these custom elements,
these are not known by the browser.
We just write this code in our React application.
And then when it runs in the browser,
React will not render these custom elements,
which wouldn't tell the browser anything,
but instead it will render the content
returned by these custom elements.
And that's how these React components work
in a nutshell.
That is already one very important
first piece of knowledge here
that we have these React components
which are functions returning JSX,
which we can use to well tell, React,
and therefore in the browser
what should appear here on the screen.
But of course, we typically don't do that
with just one simple component
that just returns a div of hello.
Instead I mentioned before
that I want to rebuild this basic first example
with this delete button.
And then there after
dive into a little bit of a more complex project
in a second step
and therefore let's now work towards that first example
with that delete button
and that modal overlay.