1 00:00:00,390 --> 00:00:00,780 All right. 2 00:00:01,410 --> 00:00:08,010 And once we know when we're going to be building, let's start by setting up all the imports online. 3 00:00:08,460 --> 00:00:12,300 Slowly but surely, we will get to all the logic as well. 4 00:00:12,630 --> 00:00:16,290 And we're going to go here with import use state. 5 00:00:16,710 --> 00:00:18,360 Then I'm looking for years effect fact. 6 00:00:19,390 --> 00:00:25,120 And both of them are coming from React and also I want to set up my logo, correct? 7 00:00:25,270 --> 00:00:28,780 So let's start here from React and then we're going to go with logo. 8 00:00:29,720 --> 00:00:31,610 So important logo. 9 00:00:32,980 --> 00:00:37,900 Now, this one will be from the components, so we'll go one level up. 10 00:00:38,170 --> 00:00:39,430 We're looking in the components. 11 00:00:39,790 --> 00:00:43,750 And since we have the index one, we are pretty much in good shape. 12 00:00:44,170 --> 00:00:46,420 And after that, we want to go with our wrapper. 13 00:00:46,990 --> 00:00:49,150 Now this one will be a wrapper. 14 00:00:49,150 --> 00:00:49,960 So that's the name. 15 00:00:50,170 --> 00:00:51,880 And where is it located? 16 00:00:52,090 --> 00:00:56,280 Well, we're going to go with the assets that and more specifically wrappers. 17 00:00:56,290 --> 00:01:00,010 And then all the way there, we'll look for the page. 18 00:01:00,340 --> 00:01:05,770 So once we have these imports, then we want to set up that default state and essentially think of this 19 00:01:05,770 --> 00:01:08,740 default state as all our values. 20 00:01:09,430 --> 00:01:17,260 So where I want for a name or one for email, as well as the password and we'll toggle between. 21 00:01:17,800 --> 00:01:22,090 So not only will change here the values for the heading three. 22 00:01:23,060 --> 00:01:31,370 As well as toggle the input for the name, but will also change which function we invoke once we submit 23 00:01:31,970 --> 00:01:37,370 because there's going to be two requests one for register and one for logging. 24 00:01:37,730 --> 00:01:43,040 And if this doesn't make any sense at the moment, don't worry, it will be clear once we get there. 25 00:01:43,070 --> 00:01:45,350 So first, let's start with that initial state. 26 00:01:45,620 --> 00:01:46,970 I'll set it up as an object. 27 00:01:47,330 --> 00:01:50,210 Call this a state and land inside of it. 28 00:01:50,390 --> 00:01:56,420 We're going to go with name when we want to set up email as well and then password. 29 00:01:57,020 --> 00:01:59,120 So let's call this password here. 30 00:01:59,360 --> 00:02:00,710 Then empty string for now. 31 00:02:01,010 --> 00:02:04,400 And like I said, is member doesn't really matter what you set it up. 32 00:02:05,030 --> 00:02:06,800 In my case, I'm going to go with a true. 33 00:02:07,160 --> 00:02:13,010 Let's save it and let's move into the register function and side of it. 34 00:02:13,280 --> 00:02:14,930 We're going to go with constant values. 35 00:02:15,170 --> 00:02:18,260 So that's going to be my use state and set values. 36 00:02:18,770 --> 00:02:22,440 And then as far as the default value, I'll use my initial state. 37 00:02:22,490 --> 00:02:26,810 So use I'm state and let's set up the initial state. 38 00:02:27,410 --> 00:02:28,880 And as you can already guess. 39 00:02:29,970 --> 00:02:37,950 Now the values represent this object, and then I have set values function, which essentially will 40 00:02:37,950 --> 00:02:38,460 control it. 41 00:02:38,510 --> 00:02:42,660 Now since is that an object or have to do a little bit of magic there? 42 00:02:42,990 --> 00:02:44,220 It's not just one value. 43 00:02:44,700 --> 00:02:50,700 Now the reason why I went with this approach, where basically I have the object well, I have multiple 44 00:02:50,700 --> 00:02:54,360 values, so technically I can use multiple use states. 45 00:02:54,360 --> 00:02:57,000 But I thought that this is just going to be faster. 46 00:02:57,360 --> 00:03:02,610 And then I'll add a comment for my global state and use navigate because that's coming up so global 47 00:03:03,030 --> 00:03:06,480 state and use navigate. 48 00:03:07,520 --> 00:03:11,330 And after this one, we'll set up our handle change announcement. 49 00:03:11,720 --> 00:03:16,880 Again, those are just going to be technically dummy functions because at the moment we'll just be logging 50 00:03:16,880 --> 00:03:17,160 them. 51 00:03:17,180 --> 00:03:23,130 Just keep in mind that we will need them because we will be updating these inputs as well as meaning 52 00:03:23,130 --> 00:03:23,570 in the form. 53 00:03:23,870 --> 00:03:28,940 So those are the two functions that we'll need just for a moment. 54 00:03:29,270 --> 00:03:30,280 We'll set up logs. 55 00:03:30,290 --> 00:03:30,760 That's it. 56 00:03:30,770 --> 00:03:34,270 So council and I'll call this channel change. 57 00:03:34,700 --> 00:03:38,750 So this is going to fire every time or type something in one of the inputs. 58 00:03:39,980 --> 00:03:42,980 The way we'll access the wires is by using the event object. 59 00:03:43,340 --> 00:03:49,360 And then as far as the logic, well, for now, let's just go with, like I said, log on simply and 60 00:03:49,370 --> 00:03:50,610 by the way, it's set up. 61 00:03:51,260 --> 00:03:54,110 I simply need to go with event and target. 62 00:03:54,290 --> 00:03:55,280 So that way, we'll see. 63 00:03:55,280 --> 00:03:58,190 Well, which input are we working on? 64 00:03:58,280 --> 00:04:02,040 The same will be for annual submit or on submit. 65 00:04:02,060 --> 00:04:02,900 Doesn't really matter. 66 00:04:03,200 --> 00:04:06,380 In this case, I went with the same name, but of course you can change if you want. 67 00:04:06,380 --> 00:04:08,870 Again, we will be looking for the event object. 68 00:04:09,050 --> 00:04:10,790 We want to prevent the default right away. 69 00:04:11,000 --> 00:04:13,460 We want to prevent the default behavior. 70 00:04:13,760 --> 00:04:17,480 And we also want to log effectively when we're talking about Target. 71 00:04:17,490 --> 00:04:19,790 In this case, that is going to be our form. 72 00:04:20,360 --> 00:04:24,590 Let's say this, and now let's finally work on the actual return. 73 00:04:24,710 --> 00:04:26,930 So first, I want to grab my wrapper. 74 00:04:27,170 --> 00:04:31,190 So that's where I have all the styles since I have the global class. 75 00:04:31,190 --> 00:04:32,300 But then I'm a full page. 76 00:04:32,630 --> 00:04:33,620 I'm going to use this one. 77 00:04:33,830 --> 00:04:35,660 So say full page. 78 00:04:35,960 --> 00:04:37,040 Now let me save it. 79 00:04:37,310 --> 00:04:40,280 And now let's navigate to a register here in the browser. 80 00:04:40,880 --> 00:04:46,850 So let's say I register and notice how it has a full page, and that's why this one is sitting in the 81 00:04:46,850 --> 00:04:47,270 center. 82 00:04:47,540 --> 00:04:52,910 So full page essentially is just setting this up everything as far as 100 percent. 83 00:04:53,270 --> 00:04:59,180 And then when it comes to the wrapper, I have some styles that places this in the center. 84 00:04:59,540 --> 00:05:01,150 So now let me remove this. 85 00:05:01,160 --> 00:05:03,800 I mean comment and I actually want to go with the form. 86 00:05:04,040 --> 00:05:08,450 So that is going to be a form element now as part of the action while we'll handle that. 87 00:05:08,600 --> 00:05:16,320 So we're not going to use that one class nine will be form and pretty much all my form classes are sitting 88 00:05:16,340 --> 00:05:17,510 in the next SS. 89 00:05:17,810 --> 00:05:25,100 So if I save here, notice I have a right away form and that's the case because forms I use in pretty 90 00:05:25,100 --> 00:05:25,970 much every project. 91 00:05:26,360 --> 00:05:32,270 So it just kind of makes sense that I have all of them already sitting in global styles. 92 00:05:32,330 --> 00:05:38,510 Now, if there's something specific I want to change, then of course I use my wrapper to target it. 93 00:05:38,870 --> 00:05:39,950 Hopefully, that makes sense. 94 00:05:40,370 --> 00:05:43,730 And in this case, I also want to add that on submit right away. 95 00:05:44,120 --> 00:05:49,520 So once we submit the form we have here, the event and I want to fire on submit. 96 00:05:50,000 --> 00:05:55,130 That's the dummy function that we just created, then I want to display my logo. 97 00:05:55,880 --> 00:05:58,280 What's really cool that we have the component right now? 98 00:05:58,730 --> 00:06:00,470 So are we right or have it? 99 00:06:00,830 --> 00:06:07,340 And then we have the heading three, which eventually will have a value that will toggle. 100 00:06:07,700 --> 00:06:10,190 But at the moment, let just hardcore logo. 101 00:06:10,370 --> 00:06:17,180 Or, you know what, let's just say log y or Z logo, and then let's create that input field, the one 102 00:06:17,180 --> 00:06:21,260 that we will eventually set up as a separate component. 103 00:06:21,560 --> 00:06:23,030 So let's create this one. 104 00:06:23,510 --> 00:06:27,930 And I'll talk about why we want to set up as a separate component in next video. 105 00:06:28,070 --> 00:06:29,030 So let's create this one. 106 00:06:29,360 --> 00:06:31,130 And then also the button. 107 00:06:31,370 --> 00:06:36,560 So back in the register right after the login, I want a comment. 108 00:06:36,590 --> 00:06:38,350 I'll say name and put. 109 00:06:38,360 --> 00:06:40,730 And yes, eventually will actually toggle this one. 110 00:06:41,300 --> 00:06:47,060 But for timing, we just want to go with div and in here I'm going to go form row. 111 00:06:47,480 --> 00:06:48,230 That's there. 112 00:06:48,410 --> 00:06:50,750 And again, this is coming from global classes. 113 00:06:51,060 --> 00:06:53,780 And if you want to check them out, you know where to find them. 114 00:06:54,020 --> 00:06:54,670 I'm not in here. 115 00:06:54,680 --> 00:07:01,550 Let's go with label now for the label will need the for attribute or in React H, their mail for attribute 116 00:07:02,000 --> 00:07:05,690 of passing the name because that will be the name of my input. 117 00:07:06,930 --> 00:07:11,850 And I do want to add a little bit of styling, so I'll say here, former label. 118 00:07:12,240 --> 00:07:15,840 Now, as far as the text, in this case, I'm going to go with the name. 119 00:07:16,310 --> 00:07:19,410 Let's save up and actually see the label. 120 00:07:19,800 --> 00:07:26,420 We went right after enable or go with input and type will be taxed and value well. 121 00:07:26,610 --> 00:07:29,490 Value is actually sitting here in the initial state. 122 00:07:29,880 --> 00:07:34,170 More specifically, it's sitting in the values now since we use that correct. 123 00:07:34,530 --> 00:07:38,880 So I go here with the value and we're looking for values. 124 00:07:39,030 --> 00:07:39,930 And then that name. 125 00:07:40,680 --> 00:07:46,140 Now we also want to pass in the actual name because this is our access with our event object. 126 00:07:46,650 --> 00:07:50,820 So we have had handle change the moment we just have target great. 127 00:07:51,630 --> 00:07:57,120 But eventually we will access both the value as well as the name. 128 00:07:57,390 --> 00:08:00,510 So that's why it's important here for us to add the proper one. 129 00:08:00,840 --> 00:08:07,350 So this one will be name and then let's add two more things on change, so on change. 130 00:08:07,350 --> 00:08:14,130 So every time we do something with this input will fire down and we want to run our hand or change correct. 131 00:08:14,400 --> 00:08:16,380 And then also, I went out a little bit of styling. 132 00:08:16,380 --> 00:08:22,500 So we're going to go here with the class name and now will be equal to rate form input. 133 00:08:22,740 --> 00:08:23,790 Let's say that one. 134 00:08:24,180 --> 00:08:27,150 And then lastly, we want to also add the button. 135 00:08:27,570 --> 00:08:28,890 So let's go here with button. 136 00:08:29,220 --> 00:08:35,490 One type will be submit and just go here would submit and let's add two classes. 137 00:08:35,909 --> 00:08:38,070 So those will be global classes. 138 00:08:38,070 --> 00:08:41,950 So we're looking for between an unbeaten block. 139 00:08:42,030 --> 00:08:45,840 And as far as the name, we'll just go with supplement. 140 00:08:46,260 --> 00:08:47,160 Let's say that one. 141 00:08:48,110 --> 00:08:55,320 Analogies to start out with our logic works, so I'm going to navigate right now to the local host and 142 00:08:55,330 --> 00:08:58,300 then more specifically to reregister. 143 00:08:58,510 --> 00:09:01,520 That's the one I want to open up the council. 144 00:09:01,540 --> 00:09:08,980 I want to see whether all my logic works because essentially what should happen every time we type something, 145 00:09:09,310 --> 00:09:11,490 we should see the form, which is great start. 146 00:09:11,530 --> 00:09:18,370 Like I said, once we can access the target, then we can grab both things, we can grab the name and 147 00:09:18,370 --> 00:09:19,330 we can grab the value. 148 00:09:19,600 --> 00:09:23,020 And second, once we submit, we should see the form. 149 00:09:23,290 --> 00:09:23,920 And voila! 150 00:09:24,220 --> 00:09:24,790 Of course we do. 151 00:09:24,910 --> 00:09:27,700 So that's the target in this case once we submit. 152 00:09:28,180 --> 00:09:34,240 And with this in place now, we can start separating things into a separate components.