So, what's happening in these two JSX files?
Sure, we have this HTML code in there, which is called JSX,
as you learned, but what exactly is this code doing here?
Well, let's start with main.jsx.
I can tell you that this is the main entry file
of the entire application.
The code in this file is executed first
when this website is being loaded in the browser.
But what's this code doing?
Well, we're importing some things from React libraries.
This is, in the end, the modern JavaScript import syntax
which is also supported by this React project
we created here.
And we are importing some features from the React library
and from the React DOM Library.
Now these libraries are installed in this project
with help of this package.json file.
If you take a look at this package.json file
under dependencies you find React and React DOM.
Now package.json is a file that's used by Node.js
for managing the dependencies of your project,
the third-party packages you want to use in your project.
And it's also commonly used by front-end projects
where you don't build Node.js applications,
for managing the packages of those projects as well.
So therefore, this project, which we have here,
which I created with help of Vite but it would be the same
with Create React App, uses the package.json file
to define external dependencies, to define which
third-party packages will be used in your code.
And here we're using React and React DOM,
which are simply two separate libraries
created by the same team.
And these two libraries together form React,
the React Library you could say.
It's simply a combination of two packages.
Now in main.jsx, it all starts with this React DOM thing
because there we call the createRoot method.
This method takes a pointer at an element in our HTML code.
And this is indeed regular, vanilla JavaScript code here.
Document get element by ID is not React specific.
And what this code does is it reaches out
to this element here, which has the ID root
in this single HTML file that we have in this project.
It's the only HTML file in the entire project.
So this code here, in main.jsx, reaches out to that root,
to this DIV with ID root and then it calls the render
method, in the end, on this object returned by createRoot.
It calls the render method, which is a method
provided by React, by that React DOM part of React,
to be precise.
And we then do this.
We then pass some JSX code to render.
And in the end this simply tells React that inside this DIV
with ID root, or in general the element with ID root,
this React code should be rendered.
So, should be displayed on the screen.
Now this strict mode thing here is a special feature
offered by React, which is simply enabled some extra
checks warning us of potentially suboptimal code
we could be writing.
Also in regards to future changes that might be added
by React where it wants to warn us if we write
slightly outdated code or anything like that.
The more important part is this app thing here,
because this is actually also being imported.
This import, where we import app from ./app,
that in the end gives us an app thing, an app element
as it seems, which is then rendered here
with help of this JSX feature.
So, by using it like a HTML element in our JavaScript file.
Now, ./app simply refers to the app.jsx file.
For JavaScript and JSX files you can and should
omit the file extension here in your import statements
and therefore this refers to app.jsx.
And in there we are exporting a function called app.
That function is a very simple function.
All it does is it returns more JSX code, it returns the
H1 HTML element with a text of "Hello World" inside of it.
Now this is a so-called React component.
And React is all about components.
When you build React apps you, in the end, build components
and components are simply functions that return JSX code.
That's not entirely true.
Theoretically there are a few other things they could return
as well, but typically they return JSX code.
So functions that return JSX code are React components.
And React components can be used in other JSX code.
That's why this app Function, as we just learned,
which is imported in main.jsx, can be used
like a HTML element in this JSX code,
which is passed to render.
Because render wants, in the end, some HTML code,
some JSX code to be precise, that it should output
on the screen, and we can use our own component,
the app component, as part of that JSX code.
Now, our own component, the app component,
returns this H1 element, and therefore ultimately
it's basically this H1 element which is passed to render,
between those strict mode tags, which we can ignore.
And that's why we see "Hello World" on the screen here.
The content of this app component, which we have here.
And I am aware that these are a couple of new concepts,
JSX components, definitely some new stuff here,
but they are also amongst the most important concepts
React has to offer.
Because React is all about you writing your own components,
so your own functions that return HTML code in the end,
and using these different components for then composing
a more complex user interface.
Because components are a key building block
when working with React.
Ultimately, any website you think of can be split up into
different building blocks that make up the website,
like a header at the top, a sidebar on the left, and so on.
And with React you simply build these
individual building blocks as functions
that return JSX code.
And by combining these building blocks
and potentially nesting them into each other
you can build complex user interfaces in a granular,
easy to manage way.
Now, it's not the only important feature added by React,
but it's a key feature nonetheless,
and they offer as a next step
we'll start building our first custom component together,
instead of just working with these predefined ones.