So we learned that we have these index.js file and I can tell you that this file in the end includes
the code which executes first when we start our app and that this renders this strange thing into the
place of this div here.
Now what is that strange app thing here?
We're importing app from this app file, in the end from the app.js file because extensions are added automatically
on the imports and
there what we have is in the end a Javascript function.
This is a regular function, an arrow function stored in this constant and then we export this constant and
therefore this function, pretty straightforward
but the thing inside of the function is not straightforward.
What we return here looks like HTML, just like this looks like HTML but it's in a Javascript
file, it can't be HTML right,
you can't add HTML in a Javascript file.
That's a special syntax invented by the React team,
it's called jsx and it allows us HTML looking code in Javascript files and under the hood,
this will be translated to instructions React understands. In detail,
this here is similar to React create element, a method provided on this React object here and then here
h1 and then here, null or an empty object
and then as a third argument, your text here, for example
Hi this is React, different text than before but it will render something similar on the screen.
This will yield the same result and I can prove that to you
if we simply start our development server and try to see this app in action. To start it, in the package.json
file, we find a script, the start script which already exists there and this will in the
end use that tooling I mentioned earlier to then transform our code and to start up a development server
which automatically reloads or injects changes when we change something.
So here, we can open up a new terminal integrated into this IDE and there, run
npm start to bring up that development server and you should keep that server up and running as long
as you are working on your code because when you close it, you can't preview your page anymore, your app
anymore.
Now when you start this server, when you run npm start, it should automatically open up a new tab in the
browser on localhost:3000,
if it doesn't, simply do so on your own and visit it and there you should see Hi this is React, which clearly
is the text I entered here.
So in the end, this here is React syntax and we could write our entire app with this syntax but this
gets very cumbersome, especially if we start nesting elements into each other,
that is why React gives us this alternative jsx syntax which in the end is just translated to React
create element and then what I just showed you.
That's also why we need to import React here, even though it looks like we're not using this React object
anywhere in this file,
right,
we have this React text here but that's something different.
So we're not using it anywhere in this file,
well it gets used implicitly because this is just syntactic sugar, in the end it is translated to that
other syntax
I showed you and that is what React is all about; we tell React which elements that should render and
under the hood, it then will translate this into commands that the DOM understands, that the browser understands
to render real DOM elements.
Now for example, if I add the title here which gives us this tooltip that's built into the browser basically,
this works and I save this, it automatically reloads,
you don't need to do so on your own and if you now hover over this,
you see this tooltip, this works, very small here but you can see it if you test this on your own system.
Now this works because that in the end is translated to React create element h1, then this object which
we previously left empty,
here we set the attributes or the properties we want to set on that DOM node which is created here, in
this case title too, this works and then thereafter, we have the text.
This is how this works and React will do everything it needs to do, it will create this element, it will
set all these properties or attributes here and it will render the last argument here inside of that
created element and that's also the part where this jsx code helps us because if in here, we have
let's say another HTML element, we would have to nest multiple React create element calls into each
other, which quickly becomes very hard to manage,
that's why this jsx syntax here is a great idea, a great invention.
So we will use the syntax and we also use it here in index.js, the difference is though that here we don't use
it with a normal HTML DOM element but instead here we use a custom function because we are using what
gets exported in the app.js file and what we export there is a normal Javascript function. Well that
is one of the most important concepts of React, components.