1
00:00:02,140 --> 00:00:04,680
So we now want to set up our project

2
00:00:04,750 --> 00:00:08,350
and first of all I'll set up the project structure I want to work with.

3
00:00:08,470 --> 00:00:15,670
Now I won't recreate the exact structure of create react app but a fairly similar one, I'll create a source

4
00:00:15,670 --> 00:00:22,010
folder in our root folder and in that source folder, I'll add my index.html file

5
00:00:22,030 --> 00:00:27,700
so this single page which gets served in the end. In that file we can run

6
00:00:27,730 --> 00:00:30,370
html and in visual studio code,

7
00:00:30,400 --> 00:00:37,020
I now get this snippet I can use by choosing this HTML5 snippet and hitting enter,

8
00:00:37,180 --> 00:00:40,230
I get a HTML5 boilerplate out of the box,

9
00:00:40,300 --> 00:00:42,670
you can of course write this manually.

10
00:00:42,760 --> 00:00:46,760
So this should be the starting html file we work with,

11
00:00:46,960 --> 00:00:55,470
if you got any imports from CDNs of fonts or styles you can add that in the head section, the scripts

12
00:00:55,540 --> 00:01:03,160
and any other imports generated by the workflow will be injected into this file automatically though, we'll

13
00:01:03,250 --> 00:01:07,120
add a configuration which does this to our set up.

14
00:01:07,450 --> 00:01:14,710
With that I'll now add a div to this body which should get a specific ID root,

15
00:01:15,010 --> 00:01:19,550
this will be the div where we'll later mount our react application to.

16
00:01:19,630 --> 00:01:22,690
With that the index.html file is done,

17
00:01:22,690 --> 00:01:26,840
now let's set up the other parts of this project. In the source folder,

18
00:01:26,860 --> 00:01:32,140
I want to have the assets folder where we could store images or anything like that we use,

19
00:01:32,230 --> 00:01:38,120
I also want to set up a components folder and a container folder

20
00:01:38,230 --> 00:01:43,540
so basically the same setup I used in my other project in the project

21
00:01:43,540 --> 00:01:51,450
in this course. Now I also want to create a react application, for that I'll create an index.js file

22
00:01:51,490 --> 00:01:59,130
in the source folder and the index.css file which I want to use for some global styling,

23
00:01:59,260 --> 00:02:06,990
so this will be imported in the index.js file, there I'll import that index.css file

24
00:02:07,210 --> 00:02:14,180
where I then can set up the body rules to remove the margin of the body, any padding we might have

25
00:02:14,380 --> 00:02:20,020
and also to set the font family, let's simply set it to sans-serif here.

26
00:02:20,050 --> 00:02:22,200
So this is a basic set up there,

27
00:02:22,210 --> 00:02:28,480
now I also want to add an app.js file which should be my root component and then so that we

28
00:02:28,480 --> 00:02:30,820
can really see that all of that works,

29
00:02:30,850 --> 00:02:37,090
I want to set up a basic react project which isn't super amazing but which uses routing and lazy loading

30
00:02:37,090 --> 00:02:43,540
so that we can see if that works and which just simulates a lot of features we might use in a typical

31
00:02:43,540 --> 00:02:44,800
react application,

32
00:02:44,830 --> 00:02:51,770
for example it should also incorporate an image. Now I'll set up this demo react project in the next lecture,

33
00:02:51,910 --> 00:02:57,760
you can also skip this if you just want to see the workflow set up, I'll provide the finished project

34
00:02:57,760 --> 00:03:00,940
at the end of last lecture or attached to next lecture

35
00:03:01,120 --> 00:03:07,640
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

36
00:03:07,800 --> 00:03:09,970
Let's do that in the next lecture.