Original subtitles

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.