So we need a project set up
that supports these requirements.
And a popular tool for creating such projects
that comes with all these features
and tools that we need built in
is Create React App.
This is a tool which you can use to,
well, as the name suggest,
create React apps
that give you this auto reloading
and that supports this HTML with JavaScript Syntax.
An alternative tool which you could use is Vite,
which can also be used to create new React projects.
And you can simply follow the instructions
shared on these websites of Create React App or Vite
to create valid new React projects.
Now, for both tools,
and also to successfully then run the projects
created by those tools
you must have Node.js installed on your system.
Now, you don't need to be able to write Node.js code.
You don't need to know Node.js,
but Node.js is used under the hood
by those tools that create the projects
and then also by the projects
and their built in-tools as well.
So make sure you have Node.js installed on your system.
You can typically download the latest version of Node.js
or use the latest LTS version,
the latest long-term stability version.
And once you got it installed
you can create those new projects
with "npx create-react-app"
to use that tool.
Or by running "npm create vite"
to use that Vite tool.
And I'll do that,
but you can use either of the two approaches.
Now, once you run these commands,
you are typically asked to choose a project name.
And here I'll just name it "react-crash-course",
but the name is up to you.
And then in Vite's case,
pick a template,
where I'll pick "React".
And then JavaScript.
And this now creates a new project.
Now, once that was done,
you can open that newly created project
with an editor of your choice.
In my case, I'm using Visual Studio Code.
And you can start working on that code there.
Now, if you use Vite, you also must open the terminal first
and navigate into this folder.
And for that here I'm using the built-in terminal
in VS code, which is already navigated
into that folder by default
And run "npm install"
to install any extra third party packages
that are needed to build and run and preview
your React application.
Once that's done, you can run "npm start"
when using a project created with Create React App.
And "npm run dev" when using Vite,
which I do here.
And then you can visit the website on this address,
which should be output in the terminal
to preview your React app.
And the exact output on this screen here
might change over time,
but you now have a basic React project
which we'll now use to learn React.
As a side note,
attached you also find a link to a project snapshot,
which I prepared,
which was created with help of Vite,
and which I also cleaned up a little bit
so that we can all start with the same starting state.
So feel free to also look into this starting snapshot
and use that starting snapshot to follow along.