1
00:00:00,180 --> 00:00:00,660
Wonderful.

2
00:00:01,020 --> 00:00:06,150
And once we're done with a warm up now, let's start tackling the big beast.

3
00:00:06,330 --> 00:00:09,030
And the first one will be register page.

4
00:00:09,480 --> 00:00:16,290
As you can see, there's more to it, so there's going to be a form with some form input and we'll be

5
00:00:16,320 --> 00:00:23,640
able to toggle between register and login and for the register will need to have the name input.

6
00:00:23,970 --> 00:00:28,860
But then if the user is just logging and van is just email and password.

7
00:00:29,070 --> 00:00:30,900
Yes, there is going to be a logo there.

8
00:00:31,380 --> 00:00:37,950
There's also going to be a heading that will toggle when we're clicking on a button and all kinds of

9
00:00:37,950 --> 00:00:38,340
goodies.

10
00:00:38,880 --> 00:00:44,910
And also eventually we will perform a fetch request once we're sort of bringing the form.

11
00:00:45,180 --> 00:00:47,790
Now we're nowhere close to that yet.

12
00:00:48,270 --> 00:00:54,870
So first, we'll build out the component of the animal, set up the global state and then eventually

13
00:00:54,870 --> 00:00:59,460
we'll also, of course, set up our server and start making those requests.

14
00:01:00,270 --> 00:01:04,709
So again, if you have been following my tutorials, you know that I do everything step by step.

15
00:01:04,709 --> 00:01:09,360
And even though some people might find that annoying, I mean, I think that's the best way to learn.

16
00:01:09,810 --> 00:01:12,960
Now, before we continue, let me just mention something.

17
00:01:13,260 --> 00:01:16,710
You're probably noticing how the preview is different.

18
00:01:17,190 --> 00:01:22,110
So as I was thinking with this one around, I noticed that there's options to preview in the browser

19
00:01:22,620 --> 00:01:24,360
and we can also set up themes.

20
00:01:24,360 --> 00:01:29,010
And in my case, I switched to a dark theme because I think it's going to be more pleasant to your eyes.

21
00:01:29,070 --> 00:01:29,930
Now how you can do that?

22
00:01:29,940 --> 00:01:32,640
Well, you can right click and then you need to open.

23
00:01:32,640 --> 00:01:35,730
First of all, do you read me in the preview like show?

24
00:01:35,970 --> 00:01:36,960
So that's the first one.

25
00:01:37,320 --> 00:01:42,570
And then once you're already in the preview, then you can right click again and notice this one.

26
00:01:42,690 --> 00:01:47,160
So I can open this one in the browser like so sort of that's what you prefer.

27
00:01:47,190 --> 00:01:47,610
Awesome.

28
00:01:47,730 --> 00:01:54,150
Just keep in mind one thing where as you update your read me the preview, one will update, but not

29
00:01:54,150 --> 00:01:55,110
the one in the browser.

30
00:01:55,110 --> 00:02:00,330
So if I remove that, I'm becoming the first coming out of salvoes, one updated right away.

31
00:02:00,330 --> 00:02:02,820
But then the browser is not updating.

32
00:02:03,180 --> 00:02:04,590
So something to keep in mind.

33
00:02:04,590 --> 00:02:09,090
And then also, as far as the themes, just right click online, pick a theme.

34
00:02:09,690 --> 00:02:12,660
And in my case, I think I want to get them dark.

35
00:02:13,020 --> 00:02:17,130
But of course, you have all of these options that you can choose from.

36
00:02:17,910 --> 00:02:19,380
So that's as far as the look.

37
00:02:19,830 --> 00:02:24,780
Now let's start talking about the component, the register component, and here's what we want to do.

38
00:02:25,140 --> 00:02:28,950
We want to import the used state and years effect from React.

39
00:02:29,280 --> 00:02:32,220
Then we also want to get the logo from the components.

40
00:02:32,400 --> 00:02:36,720
We want to get the wrapper since we want to get the styling eventually later.

41
00:02:36,960 --> 00:02:40,800
We'll also get global context and use navigate.

42
00:02:41,040 --> 00:02:43,650
And of course, I will discuss it once we get there.

43
00:02:44,160 --> 00:02:51,360
Then there's going to be some initial state where I want to set up the name empty string email password.

44
00:02:51,390 --> 00:02:57,460
Also a member which is going to be a billion and it doesn't really matter what is your default value?

45
00:02:57,460 --> 00:02:59,400
In my case, I'm going to go with default.

46
00:03:00,360 --> 00:03:05,460
And it's always my preference to set up a local state if possible.

47
00:03:05,790 --> 00:03:11,520
And that is, if possible, there will be global state in this application, and I will discuss this

48
00:03:11,520 --> 00:03:13,440
once we set up the global context.

49
00:03:13,920 --> 00:03:18,000
Basically, what is my preference and what are your options for time being?

50
00:03:18,000 --> 00:03:24,720
Just remember that this is going to be initial state that we passed in the U.S. state and then I have

51
00:03:24,720 --> 00:03:28,260
the values, which basically is race object.

52
00:03:28,650 --> 00:03:34,650
And we also have set the values function, which will utilize as we set up the functionality.

53
00:03:35,280 --> 00:03:42,690
And here eventually again, there's going to be a global context as well as use navigate.

54
00:03:42,990 --> 00:03:50,160
So both of these things we will implement here and of course, also a little change because we'll have

55
00:03:50,160 --> 00:03:50,610
inputs.

56
00:03:51,060 --> 00:03:54,780
So every time we update that input, we want to fire off something.

57
00:03:55,080 --> 00:04:01,290
So this is what we're going to use, as well as on submit now for timing notice, how we're basically

58
00:04:01,290 --> 00:04:03,660
both of them are just console.log.

59
00:04:04,020 --> 00:04:06,030
So I'm just looking for the event object.

60
00:04:06,360 --> 00:04:14,670
And more specifically, I log the event at Target and the same goes for OMS Summit, where essentially

61
00:04:14,880 --> 00:04:17,550
we trigger this when we submit the form.

62
00:04:18,089 --> 00:04:21,120
And eventually, this is where we'll have all our logic.

63
00:04:21,510 --> 00:04:23,490
So this is where we'll check for the values.

64
00:04:23,490 --> 00:04:32,160
And then if the values are there, then we submit the user to our back in to our server far as their

65
00:04:32,160 --> 00:04:32,580
turn.

66
00:04:32,910 --> 00:04:36,120
It's going to be a rapper who set it up as full page.

67
00:04:36,570 --> 00:04:39,030
And as you can see here, we have a form.

68
00:04:39,300 --> 00:04:45,670
There's going to be a class here on submit on cement, then logo, the heading three and four time being.

69
00:04:45,690 --> 00:04:50,070
I'm just going to have one input the name, input and heart code, everything.

70
00:04:50,640 --> 00:04:56,550
And then in next video will set up a separate component, and I'll discuss that in a greater detail.

71
00:04:56,730 --> 00:04:59,640
Once we get there and all the way in the bottom, there's going to.

72
00:04:59,910 --> 00:05:01,900
A button with type.