So here I am now in my brand new project
which I created
using that starting snapshot,
which was also attached to the last lecture.
So that you can simply
download that starting snapshot
which was created with help of Vite,
and which I simply cleaned up a little bit
so that we only have a few files in there.
And this is now
the starting snapshot we'll use to
dive into React and learn about
these React essentials.
Now to briefly get you started with
the project we have here.
A project created with Vite in this case.
In the end, what I do have here is
an index HTML file which isn't too important for us here
because we won't add any code to that.
Instead, we will work in the source folder
where we have some
.jsx files.
And in the end these are JavaScript files
that also support
HTML code inside of them.
This special syntax,
which I mentioned
which is not supported by browsers,
but which is transformed
under the hood
by the project setup we have here
into code
that is supported by browsers.
This syntax
of having HTML
in JavaScript is called
JSX,
and that's why these files have these
special JSX extensions.
But again, this is not supported by the browser,
this is transformed under the hood instead.
What's also worth noting,
is that I have a CSS file here
with some basic
CSS styles
and this file is also being imported here
into a JavaScript
file in the end.
Normally this would also not work in the browser
but this is a never feature supported by this project
which is then transformed under the hood.
And you can kind of see
what it's being transformed to
by opening up the developer tools
in
your browser
for this starting snapshot website.
And there in the head section you, for example,
see that a bunch of scripts and styles were injected.
For example, the styles
that were defined
in this extra CSS file.
So this project setup and some tools that were installed
as part of this project setup
simply detected this
CSS import,
and therefore included this
CSS code
in the final website
that's being loaded.
You also see that,
a JavaScript file is being loaded here
which if you take a look at it
upon loading this website,
in the end
contains the transformed
JavaScript code
where you no longer see
HTML code
as part of the application,
but where
you instead have some raw optimized JavaScript code,
which in the end is responsible
for outputting on the screen
what we see here.
So that's what we got.
That's what we'll start with.
That's this special
JSS syntax
which will become important
when working with React.
And with all of that out of the way,
let's now take a closer look at
the code we have
in these two JSX files,
because there
we have some strange code
which clearly seems
to be responsible for outputting
Hello World,
but it probably makes sense to understand how
these different code pieces work together
and what's happening here.