-: Now in the terminal,
we can see that our React app is successfully initialized,
and we can see this directory is now very populated
with a lot of different folders
and things, goodies to see here.
So right now we're not in that directory.
So let's go into my app and then run NPM start.
And that's gonna boot up the web service
for, or the web app.
And here we can see that, wow, lo and behold,
we've got a simple React app going for us.
And there's a hyperlink to the React page
where you can learn more
about how one would go about using React,
which is a very popular JavaScript framework.
And yeah, so let's see.
This website is probably not what we want,
so let's actually use React
in the way that it was kind of created for,
which is that this sort of web app
can update its dom, or document object model,
in response to changes in state.
So "Could you help me add a button
"that shows the number of times it's pressed
"to my React app?"
So let's see if ChatGPT
can come up with something like that,
like, we wanna feature for a website,
like, we know what we want,
but we're gonna ask ChatGPT to help us out.
And sure enough, it does say it'd be happy to help us.
So let's open the React app's app.js file
and import the useState Hook from the React library.
So that's pretty straightforward.
If you go ahead and copy that code,
it's got a home right up,
so it was basically saying to go into app.js here,
and it's gonna ask us to add an extra import statement.
And that's going to be right there.
And then we're gonna wanna declare a state variable
to keep track of the number of times
the button has been pressed.
So that's gonna actually go right here.
And then we're going to want to add this to our website.
So here we can see that the file
has a sort of very similar structure
to what we saw in our HTML,
and sure enough that's actually what this is,
but we're gonna go ahead and add some extra stuff in here.
So we're gonna copy paste that div,
which is an HTML element.
And if we go back to our page,
we can actually see that there's a button here
and this text
that says "You've pressed the button 0 times."
So this useState or this useState Hook from React
that we imported up here
is actually going to give us these two constants
or count and set count.
This is gonna be a function that updates the value,
and this is gonna be the value itself,
but every time we press that button on the click event,
it's going to basically set count
to increment the current value of count.
So if we actually click this button,
whoa, we can see that that counter up here
is actually going up every single time that I click on it.
I don't know if you can hear me clicking,
but I am, I'm not lying to you.
But yeah, so we can see that this is pretty useful.
This is, like, we just came up with some random idea
and we wanted it to show up on our website,
and sure enough it did.
So the reason that we're on React, by the way,
is that earlier we were just given some bare bones HTML,
and this HTML, like I said earlier,
is kind of like the bones or skeleton of your website.
The CSS, as they said, is kind of like the styling.
So "How do I make it look beautiful," right?
And then finally the JavaScript
is like the brains behind it.
So it's what actually makes it move and be interactive,
things like that.
So this stuff is all on JavaScript.
It's just returning HTML elements
with a little bit of extra functionality.
So, hmm, the only thing now we're missing
other than HTML and JavaScript is actually CSS.
So let's ask ChatGPT, "Could you make that button blue?"
Let's just say blue.
"Sure! You can easily change the button color
"by adding a 'style' attribute to the button element.
"Here's an example of how you can make that button."
So it's going to presumably get me some code.
So this is exactly what we've got
before we've got this app function.
This is something we've already kind of
brought into our app,
and here we can see the difference
in what they told us before, right?
So, earlier we had a button element
that specified an on click behavior,
here it has an on click behavior in addition to a style.
So if we actually copy that and bring that into our code,
so let's actually make that look
just as it looked on its response,
even though you don't really have to,
oops, I think I am missing a curly brace there.
I didn't copy a curly brace here, that was on me,
but if we had copied that correctly,
that's what it would've looked like.
And if I go over here,
oh, sure enough, my button is now blue,
maybe not the prettiest blue you've ever seen,
but I'm sure you could continue the conversation
with ChatGPT to try to get it more of what you want.
So maybe we could even ask,
"Could you make that a lighter blue?"
So like, yeah, it's really,
just treat ChatGPT as this sort of conversational format.
And it'll kind of like evolve throughout the conversation
because it accumulates more and more context
about what you want.
So on the left here,
you can actually see that you can start new chats,
and it doesn't actually preserve memory between chats.
So if you want to kind of hold context
on what you told it before, make sure it's in the same chat.
So here, let's see what, this is kind of interesting, right?
Like, let's see what ChatGPT thinks is a lighter blue.
So if we go ahead and copy that,
we can see what it actually thinks,
how much, it's curious, right?
Like, how much lighter is it going to be?
So if we bring that in here,
accidentally remove one of those angle brackets, it's there.
But if we save that and come back here, oh, hmm.
It, honestly, in my opinion, that's a little more purple,
but I'll leave that up to you to decide.
But yeah, so you can kind of go back and forth,
like, once you've got an idea, right,
you just ask ChatGPT how you're gonna do that,
and it's gonna give you an answer,
maybe not the best answer as we saw here.
I mean, I'm sure that's a little blue in some ways,
but basically what we got from that
is that we can actually use a value
that's not a string representation
of the color blue itself, right?
So we can actually use
this sort of hexadecimal specification for a color,
if you're familiar
with the computer representation of color,
there's RGB, red, green, and blue,
and the hexadecimal digits specify the intensity
of each of those color channels.
So one thing we can take away with that
is we can kind of tinker around with that color
and tweak it until we get a color that we want,
or we can use some online resource.
And yeah, this kind of shows us the power of ChatGPT
to generate code for us.