1 00:00:00,240 --> 00:00:01,073 -: Now in the terminal, 2 00:00:01,073 --> 00:00:04,980 we can see that our React app is successfully initialized, 3 00:00:04,980 --> 00:00:07,680 and we can see this directory is now very populated 4 00:00:07,680 --> 00:00:09,060 with a lot of different folders 5 00:00:09,060 --> 00:00:11,433 and things, goodies to see here. 6 00:00:12,551 --> 00:00:13,590 So right now we're not in that directory. 7 00:00:13,590 --> 00:00:17,190 So let's go into my app and then run NPM start. 8 00:00:17,190 --> 00:00:20,040 And that's gonna boot up the web service 9 00:00:20,040 --> 00:00:22,020 for, or the web app. 10 00:00:22,020 --> 00:00:26,910 And here we can see that, wow, lo and behold, 11 00:00:26,910 --> 00:00:29,580 we've got a simple React app going for us. 12 00:00:29,580 --> 00:00:31,980 And there's a hyperlink to the React page 13 00:00:31,980 --> 00:00:33,640 where you can learn more 14 00:00:33,640 --> 00:00:34,950 about how one would go about using React, 15 00:00:34,950 --> 00:00:37,890 which is a very popular JavaScript framework. 16 00:00:37,890 --> 00:00:40,440 And yeah, so let's see. 17 00:00:40,440 --> 00:00:43,110 This website is probably not what we want, 18 00:00:43,110 --> 00:00:45,540 so let's actually use React 19 00:00:45,540 --> 00:00:47,610 in the way that it was kind of created for, 20 00:00:47,610 --> 00:00:50,700 which is that this sort of web app 21 00:00:50,700 --> 00:00:54,810 can update its dom, or document object model, 22 00:00:54,810 --> 00:00:56,640 in response to changes in state. 23 00:00:56,640 --> 00:01:01,417 So "Could you help me add a button 24 00:01:01,417 --> 00:01:06,037 "that shows the number of times it's pressed 25 00:01:06,037 --> 00:01:08,007 "to my React app?" 26 00:01:10,760 --> 00:01:11,593 So let's see if ChatGPT 27 00:01:11,593 --> 00:01:12,870 can come up with something like that, 28 00:01:12,870 --> 00:01:14,790 like, we wanna feature for a website, 29 00:01:14,790 --> 00:01:16,500 like, we know what we want, 30 00:01:16,500 --> 00:01:18,600 but we're gonna ask ChatGPT to help us out. 31 00:01:18,600 --> 00:01:21,943 And sure enough, it does say it'd be happy to help us. 32 00:01:21,943 --> 00:01:25,320 So let's open the React app's app.js file 33 00:01:25,320 --> 00:01:28,500 and import the useState Hook from the React library. 34 00:01:28,500 --> 00:01:30,090 So that's pretty straightforward. 35 00:01:30,090 --> 00:01:32,460 If you go ahead and copy that code, 36 00:01:32,460 --> 00:01:34,290 it's got a home right up, 37 00:01:34,290 --> 00:01:37,233 so it was basically saying to go into app.js here, 38 00:01:39,099 --> 00:01:41,849 and it's gonna ask us to add an extra import statement. 39 00:01:43,700 --> 00:01:46,440 And that's going to be right there. 40 00:01:46,440 --> 00:01:49,440 And then we're gonna wanna declare a state variable 41 00:01:49,440 --> 00:01:50,670 to keep track of the number of times 42 00:01:50,670 --> 00:01:52,110 the button has been pressed. 43 00:01:52,110 --> 00:01:57,003 So that's gonna actually go right here. 44 00:02:00,570 --> 00:02:05,570 And then we're going to want to add this to our website. 45 00:02:09,270 --> 00:02:12,210 So here we can see that the file 46 00:02:12,210 --> 00:02:15,555 has a sort of very similar structure 47 00:02:15,555 --> 00:02:17,550 to what we saw in our HTML, 48 00:02:17,550 --> 00:02:19,530 and sure enough that's actually what this is, 49 00:02:19,530 --> 00:02:23,520 but we're gonna go ahead and add some extra stuff in here. 50 00:02:23,520 --> 00:02:26,070 So we're gonna copy paste that div, 51 00:02:26,070 --> 00:02:28,083 which is an HTML element. 52 00:02:28,920 --> 00:02:30,750 And if we go back to our page, 53 00:02:30,750 --> 00:02:33,150 we can actually see that there's a button here 54 00:02:33,150 --> 00:02:34,050 and this text 55 00:02:34,050 --> 00:02:36,030 that says "You've pressed the button 0 times." 56 00:02:36,030 --> 00:02:40,800 So this useState or this useState Hook from React 57 00:02:40,800 --> 00:02:42,450 that we imported up here 58 00:02:42,450 --> 00:02:46,170 is actually going to give us these two constants 59 00:02:46,170 --> 00:02:47,940 or count and set count. 60 00:02:47,940 --> 00:02:50,610 This is gonna be a function that updates the value, 61 00:02:50,610 --> 00:02:52,890 and this is gonna be the value itself, 62 00:02:52,890 --> 00:02:56,280 but every time we press that button on the click event, 63 00:02:56,280 --> 00:02:58,560 it's going to basically set count 64 00:02:58,560 --> 00:03:01,230 to increment the current value of count. 65 00:03:01,230 --> 00:03:03,120 So if we actually click this button, 66 00:03:03,120 --> 00:03:06,480 whoa, we can see that that counter up here 67 00:03:06,480 --> 00:03:08,580 is actually going up every single time that I click on it. 68 00:03:08,580 --> 00:03:09,720 I don't know if you can hear me clicking, 69 00:03:09,720 --> 00:03:11,910 but I am, I'm not lying to you. 70 00:03:11,910 --> 00:03:15,720 But yeah, so we can see that this is pretty useful. 71 00:03:15,720 --> 00:03:18,060 This is, like, we just came up with some random idea 72 00:03:18,060 --> 00:03:20,220 and we wanted it to show up on our website, 73 00:03:20,220 --> 00:03:21,870 and sure enough it did. 74 00:03:21,870 --> 00:03:24,150 So the reason that we're on React, by the way, 75 00:03:24,150 --> 00:03:28,320 is that earlier we were just given some bare bones HTML, 76 00:03:28,320 --> 00:03:30,660 and this HTML, like I said earlier, 77 00:03:30,660 --> 00:03:34,170 is kind of like the bones or skeleton of your website. 78 00:03:34,170 --> 00:03:37,950 The CSS, as they said, is kind of like the styling. 79 00:03:37,950 --> 00:03:40,770 So "How do I make it look beautiful," right? 80 00:03:40,770 --> 00:03:42,390 And then finally the JavaScript 81 00:03:42,390 --> 00:03:44,610 is like the brains behind it. 82 00:03:44,610 --> 00:03:48,510 So it's what actually makes it move and be interactive, 83 00:03:48,510 --> 00:03:49,620 things like that. 84 00:03:49,620 --> 00:03:52,530 So this stuff is all on JavaScript. 85 00:03:52,530 --> 00:03:53,940 It's just returning HTML elements 86 00:03:53,940 --> 00:03:55,950 with a little bit of extra functionality. 87 00:03:55,950 --> 00:03:58,590 So, hmm, the only thing now we're missing 88 00:03:58,590 --> 00:04:02,280 other than HTML and JavaScript is actually CSS. 89 00:04:02,280 --> 00:04:07,043 So let's ask ChatGPT, "Could you make that button blue?" 90 00:04:08,070 --> 00:04:09,363 Let's just say blue. 91 00:04:10,717 --> 00:04:12,607 "Sure! You can easily change the button color 92 00:04:12,607 --> 00:04:14,977 "by adding a 'style' attribute to the button element. 93 00:04:14,977 --> 00:04:17,430 "Here's an example of how you can make that button." 94 00:04:17,430 --> 00:04:20,103 So it's going to presumably get me some code. 95 00:04:21,120 --> 00:04:22,230 So this is exactly what we've got 96 00:04:22,230 --> 00:04:24,420 before we've got this app function. 97 00:04:24,420 --> 00:04:26,070 This is something we've already kind of 98 00:04:26,070 --> 00:04:27,303 brought into our app, 99 00:04:28,689 --> 00:04:30,270 and here we can see the difference 100 00:04:30,270 --> 00:04:32,860 in what they told us before, right? 101 00:04:32,860 --> 00:04:34,690 So, earlier we had a button element 102 00:04:35,966 --> 00:04:38,190 that specified an on click behavior, 103 00:04:38,190 --> 00:04:42,150 here it has an on click behavior in addition to a style. 104 00:04:42,150 --> 00:04:47,150 So if we actually copy that and bring that into our code, 105 00:04:47,490 --> 00:04:49,440 so let's actually make that look 106 00:04:49,440 --> 00:04:52,650 just as it looked on its response, 107 00:04:52,650 --> 00:04:54,500 even though you don't really have to, 108 00:04:56,010 --> 00:04:57,750 oops, I think I am missing a curly brace there. 109 00:04:57,750 --> 00:05:00,200 I didn't copy a curly brace here, that was on me, 110 00:05:01,101 --> 00:05:02,430 but if we had copied that correctly, 111 00:05:02,430 --> 00:05:03,900 that's what it would've looked like. 112 00:05:03,900 --> 00:05:05,550 And if I go over here, 113 00:05:05,550 --> 00:05:07,980 oh, sure enough, my button is now blue, 114 00:05:07,980 --> 00:05:09,930 maybe not the prettiest blue you've ever seen, 115 00:05:09,930 --> 00:05:12,360 but I'm sure you could continue the conversation 116 00:05:12,360 --> 00:05:15,600 with ChatGPT to try to get it more of what you want. 117 00:05:15,600 --> 00:05:18,217 So maybe we could even ask, 118 00:05:18,217 --> 00:05:20,937 "Could you make that a lighter blue?" 119 00:05:22,110 --> 00:05:23,550 So like, yeah, it's really, 120 00:05:23,550 --> 00:05:27,093 just treat ChatGPT as this sort of conversational format. 121 00:05:28,755 --> 00:05:31,590 And it'll kind of like evolve throughout the conversation 122 00:05:31,590 --> 00:05:33,870 because it accumulates more and more context 123 00:05:33,870 --> 00:05:35,250 about what you want. 124 00:05:35,250 --> 00:05:36,083 So on the left here, 125 00:05:36,083 --> 00:05:38,130 you can actually see that you can start new chats, 126 00:05:38,130 --> 00:05:40,920 and it doesn't actually preserve memory between chats. 127 00:05:40,920 --> 00:05:42,990 So if you want to kind of hold context 128 00:05:42,990 --> 00:05:46,352 on what you told it before, make sure it's in the same chat. 129 00:05:46,352 --> 00:05:49,230 So here, let's see what, this is kind of interesting, right? 130 00:05:49,230 --> 00:05:52,620 Like, let's see what ChatGPT thinks is a lighter blue. 131 00:05:52,620 --> 00:05:55,110 So if we go ahead and copy that, 132 00:05:55,110 --> 00:05:56,910 we can see what it actually thinks, 133 00:05:56,910 --> 00:05:58,800 how much, it's curious, right? 134 00:05:58,800 --> 00:06:00,900 Like, how much lighter is it going to be? 135 00:06:00,900 --> 00:06:02,190 So if we bring that in here, 136 00:06:02,190 --> 00:06:05,940 accidentally remove one of those angle brackets, it's there. 137 00:06:05,940 --> 00:06:09,960 But if we save that and come back here, oh, hmm. 138 00:06:09,960 --> 00:06:12,813 It, honestly, in my opinion, that's a little more purple, 139 00:06:13,812 --> 00:06:15,300 but I'll leave that up to you to decide. 140 00:06:15,300 --> 00:06:18,300 But yeah, so you can kind of go back and forth, 141 00:06:18,300 --> 00:06:20,040 like, once you've got an idea, right, 142 00:06:20,040 --> 00:06:22,980 you just ask ChatGPT how you're gonna do that, 143 00:06:22,980 --> 00:06:24,960 and it's gonna give you an answer, 144 00:06:24,960 --> 00:06:27,960 maybe not the best answer as we saw here. 145 00:06:27,960 --> 00:06:30,450 I mean, I'm sure that's a little blue in some ways, 146 00:06:30,450 --> 00:06:32,730 but basically what we got from that 147 00:06:32,730 --> 00:06:34,800 is that we can actually use a value 148 00:06:34,800 --> 00:06:37,200 that's not a string representation 149 00:06:37,200 --> 00:06:39,540 of the color blue itself, right? 150 00:06:39,540 --> 00:06:40,440 So we can actually use 151 00:06:40,440 --> 00:06:44,523 this sort of hexadecimal specification for a color, 152 00:06:45,450 --> 00:06:46,283 if you're familiar 153 00:06:46,283 --> 00:06:48,450 with the computer representation of color, 154 00:06:48,450 --> 00:06:51,030 there's RGB, red, green, and blue, 155 00:06:51,030 --> 00:06:53,820 and the hexadecimal digits specify the intensity 156 00:06:53,820 --> 00:06:56,253 of each of those color channels. 157 00:06:57,354 --> 00:06:58,530 So one thing we can take away with that 158 00:06:58,530 --> 00:07:00,930 is we can kind of tinker around with that color 159 00:07:00,930 --> 00:07:02,850 and tweak it until we get a color that we want, 160 00:07:02,850 --> 00:07:04,713 or we can use some online resource. 161 00:07:05,820 --> 00:07:10,367 And yeah, this kind of shows us the power of ChatGPT 162 00:07:11,880 --> 00:07:13,413 to generate code for us.