Now this project, which was created for us
has a couple of starting files which we don't need here
for example, a file for automated tests
that is something which I covered
in my complete guide course but we don't need it here.
So, I'll get rid of that file and also of the logo.svg,
reportWebVitals.js, setupTests.js and App.css.
If you got more files you can get rid of those as well
you should be left with an index.js, App.js
and the index.css file thereafter.
Now in index.js I will get rid of that
import of reportWebVitals and I'll explain these imports
in greater detail in a second
for the moment let's just focus on cleaning up
and I'll get rid of that code down there
and I'll get rid of React.StrictMode because for the moment
for getting started it is simpler
if we just get started like this.
In index.css I'll get rid of all that code as well
we're going to add different CSS code soon.
And then App.js they're all getting rid of
these two imports at the top
and then of all the content here in this return statement
all this HTML code.
For the moment, we can just add a simple div here
where we say hello.
Now we can save that and that's now the starting set up
with which I wanna get started.
You'll also find this starting project snapshot attached
to this video so that you can also download it from there
and get started with that.
If you do download my attached snapshot though,
there's one important step you must not miss
and you have to go through.
You have to install third party dependencies of this project
because since it is a bit of a more complex project setup
working with third party packages like the React project
works a little bit differently here.
We got this package.json file
which lists all the dependencies of this project.
And there we for example, see the React library
and another package which is part of the react library
which are listed as dependencies.
Now, these dependencies are managed
and installed automatically for us and the big code bundle
with our code and that third-party library code
will be generated automatically behind the scenes
by those build steps which exist in this project as well
those are brought in by that react-scripts package.
Now I am aware that this silence fairly overwhelming
and complex right now,
especially if you've never worked
with anything like React before
and you're used to standard setups
where you have an HTML file
and a bunch of JavaScript imports
but we can ignore all of that for the moment.
We just add dependencies here
and we can then import them into our JavaScript files
that's what you see here with those
strange import statements
and then this build step
which is part of this project set up which is started
when we run one of these scripts like npm start
which we did before.
These scripts will then in the end combine
and transform all the code and combine
the third party package code with our code
and make sure that the result is an output
which the browser understands.
Now, because we have that setup,
if you download my attachment
you need to run one extra command
before everything here will work for you.
And for this it's best if you open the terminal
or command prompt which is integrated
into Visual Studio Code with new terminal
which is your standard operating system terminal
or command prompt just already integrated into this IDE
and any commands we run here
are then automatically executed in this project folder.
And here you need to run the npm install command
which will simply download all those dependencies
this project has and store them in this node_modules folder
which we have here.
That's a folder in which we will never work
because that holds all these third party dependencies
and they are dependencies which our project needs.
So, that's a folder which is here
but which was not part of the attached code
because it's a fairly large folder
and hence the attachment would be unnecessarily big
and you can simply recreate it by running npm install
in that folder that has this package.json file
so that's why we need to do that then.
And there after you can run npm start again
to bring up that's development server.
And I will do that here again and for this I'll go to the
Albert terminal where I run it npm start before
and I'll quit this process with controlled C now.
Now, as long as you don't quit that process
the development server is up and running
and listening to code changes
to then displayed them in the browser.
You can quit this server whenever you're done
with development for today and then you simply restart it
with npm start again if you wanna pick up development again
but now I'm not restarting it in this standalone terminal
but instead in this integrated terminal
which has already navigated into my project folder
and the advantage of starting it here
is that I will always immediately see any errors
that might occur if I have an error in my code for example.
And that's well started here zoom out a bit
make this a bit smaller and keep that up and running
as long as I'm developing.
So don't close the terminal, don't run control C here,
keep it up and running.
And if you do that and you go back to localhost 3000
and reload, you should just see hello there
because of our cleanup process.
Now that was a lot of work just to get started
but I am a big fan of having a clean start
and explaining what's going on here
instead of just throwing code at you
and leaving it up to you to figure out what's happening.
That's the project set up we're dealing with
that's my ID and that's the cleaned up project
which you all to find attached.
and therefore now, let's start writing our own code
and let's understand these different React features
and this strange syntax here step-by-step.