1
00:00:00,270 --> 00:00:00,660
All right.

2
00:00:00,750 --> 00:00:06,750
And once we're done with general set up now, let's start coding, and the first thing that I want to

3
00:00:06,750 --> 00:00:08,610
create is the landing page.

4
00:00:09,220 --> 00:00:17,310
And essentially, that is going to be the page that the user sees if he or she is not logged in.

5
00:00:17,850 --> 00:00:23,640
So we have the URL and then forward slash landing a man we navigate to register.

6
00:00:24,450 --> 00:00:31,050
And let me just go back and cover a few things before we start going first, which you will see over

7
00:00:31,050 --> 00:00:34,590
here is the Zoom level of 175 in my browser.

8
00:00:34,990 --> 00:00:36,270
And the reason why I'm telling you that.

9
00:00:37,250 --> 00:00:44,750
Is because sometimes my result might look a little bit different than yours, and again, that is because

10
00:00:44,750 --> 00:00:45,740
of the zoom level.

11
00:00:46,080 --> 00:00:51,290
And I can easily control it and usually it's between 150 and 175.

12
00:00:51,930 --> 00:00:57,890
Now also starting from this video, there's going to be way more code examples.

13
00:00:58,370 --> 00:01:04,010
And when it comes to markdown, for some people, it might be hard to read like this.

14
00:01:04,489 --> 00:01:12,500
So in order to make it easier, there's actually an extension of previous a markdown on the name of

15
00:01:12,500 --> 00:01:13,970
the extension is following.

16
00:01:14,540 --> 00:01:17,810
So you're looking for markdown preview?

17
00:01:18,320 --> 00:01:22,130
Once you install this extension, what you can do is just right click.

18
00:01:23,000 --> 00:01:25,580
And the notice we have marked down preview.

19
00:01:26,600 --> 00:01:29,390
Option, I'm lying, I'm just going to move it over here.

20
00:01:29,890 --> 00:01:31,070
This is going to be my file.

21
00:01:31,700 --> 00:01:38,240
So essentially, you can take your read me and run it through the extension and you'll see this result

22
00:01:38,840 --> 00:01:43,520
or basically the code examples just are easier to read.

23
00:01:43,760 --> 00:01:46,160
Now again, this is optional if you don't want to do that.

24
00:01:46,370 --> 00:01:51,560
You can keep on reading the read me as it is, but in my case, I'm going to use this extension.

25
00:01:51,560 --> 00:01:55,190
I'm just showing you where you can get one run.

26
00:01:55,550 --> 00:02:02,270
I also want to mention that, of course, we will set up React router because we have single page application

27
00:02:02,660 --> 00:02:04,670
as well as stored components.

28
00:02:05,060 --> 00:02:08,419
So this initial landing page is going to be pretty ugly.

29
00:02:08,880 --> 00:02:10,669
This is just to get something on screen.

30
00:02:10,669 --> 00:02:14,750
Otherwise we can talk about the general setup for another hour.

31
00:02:15,350 --> 00:02:20,900
And basically, I want you to create a page directory in the source.

32
00:02:21,260 --> 00:02:26,840
For now, just set up one page landing jabs, even though we will change this around a little bit.

33
00:02:27,710 --> 00:02:35,390
And then I want you to set up the component and I'll show you what extension I'm using to create components

34
00:02:35,390 --> 00:02:36,320
very, very quickly.

35
00:02:37,580 --> 00:02:43,760
Add some kind of basic return, in my case, I'm going to go with heading for weird landing page and

36
00:02:43,760 --> 00:02:47,910
as you can see here, I have a small typo where a should be heading for.

37
00:02:47,930 --> 00:02:52,010
I can say with the notice right away, I can see the correct one in my preview.

38
00:02:52,430 --> 00:02:55,610
One import logo, SPG and manage surgery.

39
00:02:55,940 --> 00:03:00,020
So this is going to be the logo in the assets, in the images more specifically.

40
00:03:00,410 --> 00:03:07,550
And then this is going to be the main one and then just import landing in an address and render it and

41
00:03:07,550 --> 00:03:12,560
then resume the video and I'll show you how I placed everything in my page.

42
00:03:12,830 --> 00:03:14,810
So let's get cracking.

43
00:03:15,500 --> 00:03:16,580
We're effectively.

44
00:03:17,370 --> 00:03:23,510
First, I guess I just want to go to our source and then create Pages Directory.

45
00:03:23,930 --> 00:03:32,000
So pages, I'm like, I said, Let's start with just simple landing crash landing, Andreas now inside

46
00:03:32,000 --> 00:03:32,300
of it.

47
00:03:33,360 --> 00:03:40,710
In order to create a component, a very, very nifty extension is this one, the snippets one, so yes,

48
00:03:40,710 --> 00:03:43,200
seven React Redux, blah blah, blah, blah blah.

49
00:03:43,710 --> 00:03:50,910
And I'm not going to cover all the snippets that I offer because of course, there's way too many.

50
00:03:51,180 --> 00:03:57,720
But the idea is that basically, if I want to have a component, I just type such and such and I get

51
00:03:57,720 --> 00:03:58,980
the full blown component.

52
00:03:59,400 --> 00:04:01,470
So let me go back to a landing.

53
00:04:01,950 --> 00:04:10,260
And prior to React 18, usually what I did is something like this where you go with RF C, which just

54
00:04:10,260 --> 00:04:13,200
creates a functional component.

55
00:04:13,890 --> 00:04:19,290
As a sign out, you can also create with a narrow function so that one was RF.

56
00:04:19,589 --> 00:04:24,530
And I believe it was a or I'm sorry or a f c e so.

57
00:04:24,870 --> 00:04:31,920
So this is going to be the same component, same as the file name, but in this case, it is a natural

58
00:04:31,920 --> 00:04:32,400
function.

59
00:04:32,970 --> 00:04:38,290
Now, starting with the React 17, or I'm sorry, I said before react that think when I'm talking about

60
00:04:38,290 --> 00:04:42,030
the React 17, starting with React 17, we actually.

61
00:04:43,080 --> 00:04:46,420
Don't need to import react anymore in the components.

62
00:04:46,990 --> 00:04:52,270
So if you want to omit this import, what you can do with this extension is just go with underscore.

63
00:04:53,110 --> 00:04:56,560
And by the way, it's not what I wanted, so we want to go with underscore.

64
00:04:56,710 --> 00:05:00,500
And then we go with r a f c.

65
00:05:00,940 --> 00:05:03,730
So essentially what this does, it creates the component.

66
00:05:03,730 --> 00:05:09,010
It doesn't import react and we right away exported this as the default.

67
00:05:09,430 --> 00:05:14,770
And this definitely has been the extension that saves a lot of time on typing out the boilerplate.

68
00:05:15,040 --> 00:05:22,300
A quick side note in the latest extension version, the underscore option is not support anymore.

69
00:05:23,080 --> 00:05:30,640
So if you don't want to have react import at the top, you'll need to go to settings instead.

70
00:05:31,150 --> 00:05:34,020
And you can get there by clicking on a cog.

71
00:05:34,750 --> 00:05:37,180
And more specifically, you're looking for the settings.

72
00:05:37,180 --> 00:05:44,650
Or of course, you can use the shortcut run type, react snippets and look for this checkbox.

73
00:05:45,550 --> 00:05:53,140
So it says here import react on top and make sure that it is uncheck once you knew that the result is

74
00:05:53,140 --> 00:06:01,620
going to be the same where you won't have that react import at the top, when we want to import our

75
00:06:01,630 --> 00:06:02,740
two images like I said.

76
00:06:03,340 --> 00:06:05,470
So both of them are sitting right here.

77
00:06:06,450 --> 00:06:13,500
So we have the assets then more specifically images, and we're looking for logos, 3G and 4G.

78
00:06:13,710 --> 00:06:16,620
So those are two things that we need to import.

79
00:06:16,980 --> 00:06:21,870
So let's go up here on top and let's start our imports.

80
00:06:22,870 --> 00:06:24,370
We'll just go with import.

81
00:06:24,820 --> 00:06:26,260
I'm going to call this logo.

82
00:06:27,080 --> 00:06:30,200
From online, let's go to assets here.

83
00:06:31,160 --> 00:06:31,760
Images.

84
00:06:32,160 --> 00:06:37,100
And then we're looking for logo a SLG logo, dot astrology.

85
00:06:37,490 --> 00:06:38,840
Then let's copy and paste.

86
00:06:39,740 --> 00:06:43,220
And I'm just going to say here, Maine, that's going to be my main image.

87
00:06:44,090 --> 00:06:46,290
And the name of the file is Manus.

88
00:06:46,940 --> 00:06:53,960
And like I said, let's start with very basic return where we're going to go with heading for, let's

89
00:06:53,960 --> 00:06:55,490
just say, a landing page.

90
00:06:56,120 --> 00:07:00,710
And once all of this in place, then we want to navigate to jazz.

91
00:07:01,830 --> 00:07:04,740
And then essentially set up our landing page.

92
00:07:05,400 --> 00:07:07,740
So let's go here, let's import.

93
00:07:07,920 --> 00:07:13,920
We're looking for a landing from the landing pages and let's just set it up as a there so we can still

94
00:07:13,920 --> 00:07:17,400
have that having one because there's going to be some changes here anyway.

95
00:07:17,410 --> 00:07:19,080
So let's go here.

96
00:07:19,110 --> 00:07:20,340
Let's leave for now.

97
00:07:20,340 --> 00:07:22,830
I guess the heading one before we have done anything.

98
00:07:23,190 --> 00:07:25,200
And then let's render the landing one.

99
00:07:25,620 --> 00:07:33,300
Now I want to set up a proper return when we should see the job of offer as well as the landing page.