For this, attached you find a starting project.
This starting project was created with create-react-app, a tool created by the React team
in the end which makes it easy to spin up new React projects and give us a project structure like this.
I adjusted it a little bit but generally, it's exactly the same you would get from this tool.
Now why do we need such a tool, why don't we just import a script in a HTML file and get started?
Because React is a bit more complex than vanilla Javascript.
In the end we ship vanilla Javascript code but the way we write the code is a bit more convenient to
us as a developer.
We can use certain features which wouldn't run in the browser and therefore this project setup here
has a couple of tools included which take the code we write as a developer and actually convert it to
code that runs in the browser
so that we have normal code that is executed in the browser
but we have an easier time writing that code as a developer.
In addition we get a development server, which is a simple server that serves our frontend application,
so which has no backend, only serves that frontend application and which automatically reloads or injects
changes whenever we change and save something in one of our source code files.
In addition here with React, we're building a single page application, that's not a must do but it's a
common choice. In a single page application,
you only have one HTML file which in the end is returned by the server serving that application,
in this case this HTML file, which itself is relatively empty but this file will then later include script
imports,
they will be added automatically by these tools I mentioned earlier, which in the end host and run our
React application which we in turn write here in the source folder with our files we got there, so that
in the end we have a web application, a frontend which consists of one HTML file, where then Javascript
is used to render something on the screen and re-render that something on the screen when it's needed
and that allows us to build highly reactive modern user interfaces, where everything happens instantly
because Javascript runs the browser,
things happen instantly.
We don't need to wait for a new HTML file to be downloaded from a server,
instead everything is already there.
So when a user clicks a button and we want to show a box on the screen in response to that click, boom
it happens instantly
because of Javascript. That's the feeling we want to provide and
we can do that with React. Now
enough talking about the theory,
let's write some code.
As I mentioned, we do that here in the source folder where we find an index.js file and an app.js
file,
both very simple files.
Now let's have a look at the index.js file,
there you see we have a couple of imports at the top.
This is by the way how you import code on the frontend, import something from and then either a relative
path to your own file or if it's a third-party package, just a package name
and then here, we have imports from our own files with a relative path
as I mentioned and then here we are executing one command in the end, React DOM render.
Now this is coming from the React DOM object here at the end which we're importing from the React DOM
library and that renders this strange thing which is not regular Javascript
into this place on our HTML page.
This is regular Javascript and here we are selecting the element with an ID of root
if we have a look at our single HTML file, that is this div here,
so that is in the end where our React single page application will be hosted to and thereafter React
will take over and render everything in that place.
So that's what we're doing here
but what is this strange thing? Now for that
we need to understand what components are and how React works.