现在在终端中, 我们可以看到我们的reactor应用程序已成功初始化, 我们可以看到这个目录现在充满了许多不同的文件夹和东西,
这里可以看到一些好东西
所以现在我们不在那个目录里
所以让我们进入我的应用程序, 然后运行NPM start, 这将启动Web服务或Web应用程序
在这里我们可以看到, 哇
你看, 我们有一个简单的React应用程序, 并且有一个指向React页面的超链接, 在那里你可以了解更多关于如何使用React的信息,
这是一个非常流行的JavaScript框架
是的, 所以让我们看看, 这个网站可能不是我们想要的
因此, 让我们实际上以创建React的方式使用React, 这类Web应用程序可以更新其DOM或文档对象模型以响应状态的更改
你能帮我加个扣子吗？
这显示了它在我的React应用程序中被按下的次数
让我们看看我能不能想出这样的东西
就像我们想要一个网站的功能, 就像我们知道我们想要什么, 但我们要问乍得帮助我们
果然, 它说很乐意帮助我们
因此, 让我们打开React Apps APK文件并从React库导入使用状态挂钩
所以这很简单
如果你继续复制代码, 它有一个家庭写了
所以它基本上是说进入应用程序边缘的这里
它会要求我们添加一个额外的import语句
就在那里
然后我们要声明一个状态变量来记录按钮被按下的次数
所以这是正确的
给你
然后我们要把这个加到我们的网站上
因此, 在这里我们可以看到, 该文件的结构与我们在HTML中看到的结构非常相似
果然, 这就是事实
但是我们要继续在这里添加一些额外的东西
所以我们要复制粘贴那个div, 它是一个HTML元素
如果我们回到我们的页面, 我们可以看到这里有一个按钮, 这个文本说你按了零次按钮
所以这个use state或者这个used state hook从react导入到这里, 实际上会给我们这两个常量,
count和set count
这是一个更新值的函数, 这是值本身
但是每次我们在click事件上按下那个按钮, 它基本上都会设置count来增加count的当前值
所以如果我们点击这个按钮, 哇, 我们可以看到这里的计数器实际上每次我点击它都会上升
我不知道你能不能听到我的声音, 但我没有骗你
但是, 是的, 所以我们可以看到这是非常有用的
这就像我们只是想出了一些随机的想法, 我们希望它出现在我们的网站上, 果然它做到了
顺便说一下, 我们使用React的原因是, 之前我们只得到了一些基本的HTML
这个HTML, 就像我之前说的, 有点像你网站的骨架
正如他们所说, CSS有点像样式
那么, 如何让它看起来漂亮呢？
对吧？
最后, JavaScript就像是它背后的大脑
所以这才是真正让它移动和互动的东西, 诸如此类
所以这些东西都是用JavaScript写的, 它只是返回HTML元素和一些额外的功能
所以除了HTML和JavaScript, 我们现在唯一缺少的就是CSS
我们去问问查德
你能按下那个按钮吗？
蓝色的
走吧
就说蓝色吧
当然, 您可以通过向button元素添加一个style属性来轻松更改按钮颜色
这里有一个例子, 你可以让这个按钮
它大概会得到一些代码
这就是我们在我们有这个应用程序功能之前所得到的
这是我们已经在我们的应用程序中引入的东西
这里我们可以看到他们之前告诉我们的不同之处, 对吧？
前面我们有一个button元素, 它指定了一个onclick行为
在这里, 除了样式之外, 它还具有单击行为
如果我们真的复制它
并将其纳入我们的代码中
所以让我们实际上让它看起来就像它在它的响应上一样, 即使你真的不需要这样做
我想我少了一个花括号
我没有抄我身上的花括号
但如果我们复制正确的话, 这就是它的样子
如果我走到这里
哦, 果然, 我的纽扣现在是蓝色的了
也许不是你见过的最漂亮的蓝色, 但我相信你可以继续与聊天GPT的对话,
试图让它更多的你想要的
所以也许我们可以问, 你能把它变成更淡的蓝色吗？
所以, 是的, 它真的只是把聊天当作这种对话格式, 它会在整个对话中发展, 因为它积累了越来越多的关于你想要什么的背景
在左边, 你可以看到你可以开始新的聊天, 它实际上不会在聊天之间保留内存
所以如果你想掌握你之前告诉它的内容的上下文, 请确保它在同一个聊天中
让我们来看看这是什么有趣的东西
让我们看看聊天极客认为什么是更浅的蓝色
所以如果我们继续复制它, 我们就能看到它的真实想法
就像它有多好奇, 对吧？
比如, 它会轻多少？
如果我们把它移到这里, 去掉其中一个角度突变, 它就在那里
但如果我们把它保存下来回到这里
哦
嗯
老实说, 我的意见是有点紫色, 但我会留给你来决定
但是, 是的, 所以你可以来回
就像一旦你有了一个想法, 对, 你只要问聊天你要怎么做, 它会给你一个答案
也许不是我们在这里看到的最好的答案
我的意思是, 我肯定这在某些方面有点蓝, 但基本上我们从中得到的是,
我们实际上可以使用一个值, 而不是蓝色本身的字符串表示, 对吧？
所以我们实际上可以使用这种十六进制的颜色规格
如果你熟悉计算机的颜色表示, 有RGV, 红色, 绿色和蓝色,
十六进制数字指定的强度, 每一个颜色通道
所以我们可以带走的一件事是, 我们可以对颜色进行修补和调整, 直到我们得到我们想要的颜色,
或者我们可以使用一些在线资源
是的, 这个, 这个, 这个向我们展示了聊天为我们生成代码的力量