So we now want to set up our project
and first of all I'll set up the project structure I want to work with.
Now I won't recreate the exact structure of create react app but a fairly similar one, I'll create a source
folder in our root folder and in that source folder, I'll add my index.html file
so this single page which gets served in the end. In that file we can run
html and in visual studio code,
I now get this snippet I can use by choosing this HTML5 snippet and hitting enter,
I get a HTML5 boilerplate out of the box,
you can of course write this manually.
So this should be the starting html file we work with,
if you got any imports from CDNs of fonts or styles you can add that in the head section, the scripts
and any other imports generated by the workflow will be injected into this file automatically though, we'll
add a configuration which does this to our set up.
With that I'll now add a div to this body which should get a specific ID root,
this will be the div where we'll later mount our react application to.
With that the index.html file is done,
now let's set up the other parts of this project. In the source folder,
I want to have the assets folder where we could store images or anything like that we use,
I also want to set up a components folder and a container folder
so basically the same setup I used in my other project in the project
in this course. Now I also want to create a react application, for that I'll create an index.js file
in the source folder and the index.css file which I want to use for some global styling,
so this will be imported in the index.js file, there I'll import that index.css file
where I then can set up the body rules to remove the margin of the body, any padding we might have
and also to set the font family, let's simply set it to sans-serif here.
So this is a basic set up there,
now I also want to add an app.js file which should be my root component and then so that we
can really see that all of that works,
I want to set up a basic react project which isn't super amazing but which uses routing and lazy loading
so that we can see if that works and which just simulates a lot of features we might use in a typical
react application,
for example it should also incorporate an image. Now I'll set up this demo react project in the next lecture,
you can also skip this if you just want to see the workflow set up, I'll provide the finished project
at the end of last lecture or attached to next lecture
but if you want to see it, I'll walk through it in full detail so that we set up a react app here from scratch
Let's do that in the next lecture.