1
00:00:00,180 --> 00:00:05,610
现在在终端中, 我们可以看到我们的reactor应用程序已成功初始化, 我们可以看到这个目录现在充满了许多不同的文件夹和东西,

2
00:00:05,610 --> 00:00:11,440
这里可以看到一些好东西

3
00:00:11,460 --> 00:00:13,620
所以现在我们不在那个目录里 

4
00:00:13,620 --> 00:00:21,890
所以让我们进入我的应用程序, 然后运行NPM start, 这将启动Web服务或Web应用程序

5
00:00:21,900 --> 00:00:25,740
在这里我们可以看到, 哇 

6
00:00:25,740 --> 00:00:31,950
你看, 我们有一个简单的React应用程序, 并且有一个指向React页面的超链接, 在那里你可以了解更多关于如何使用React的信息,

7
00:00:31,950 --> 00:00:36,900
这是一个非常流行的JavaScript框架

8
00:00:37,800 --> 00:00:42,990
是的, 所以让我们看看, 这个网站可能不是我们想要的 

9
00:00:42,990 --> 00:00:56,550
因此, 让我们实际上以创建React的方式使用React, 这类Web应用程序可以更新其DOM或文档对象模型以响应状态的更改

10
00:00:56,550 --> 00:01:00,750
你能帮我加个扣子吗？

11
00:01:01,540 --> 00:01:07,930
这显示了它在我的React应用程序中被按下的次数 

12
00:01:09,540 --> 00:01:12,900
让我们看看我能不能想出这样的东西 

13
00:01:12,900 --> 00:01:18,480
就像我们想要一个网站的功能, 就像我们知道我们想要什么, 但我们要问乍得帮助我们

14
00:01:18,480 --> 00:01:21,120
果然, 它说很乐意帮助我们 

15
00:01:21,120 --> 00:01:28,350
因此, 让我们打开React Apps APK文件并从React库导入使用状态挂钩 

16
00:01:28,350 --> 00:01:29,970
所以这很简单 

17
00:01:30,000 --> 00:01:34,170
如果你继续复制代码, 它有一个家庭写了 

18
00:01:34,170 --> 00:01:37,200
所以它基本上是说进入应用程序边缘的这里 

19
00:01:37,890 --> 00:01:41,670
它会要求我们添加一个额外的import语句 

20
00:01:42,300 --> 00:01:45,990
就在那里 

21
00:01:46,290 --> 00:01:51,990
然后我们要声明一个状态变量来记录按钮被按下的次数

22
00:01:51,990 --> 00:01:54,840
所以这是正确的 

23
00:01:56,180 --> 00:01:56,960
给你

24
00:02:00,600 --> 00:02:09,180
然后我们要把这个加到我们的网站上 

25
00:02:09,180 --> 00:02:17,510
因此, 在这里我们可以看到, 该文件的结构与我们在HTML中看到的结构非常相似 

26
00:02:17,520 --> 00:02:19,380
果然, 这就是事实 

27
00:02:19,380 --> 00:02:23,550
但是我们要继续在这里添加一些额外的东西 

28
00:02:23,550 --> 00:02:27,990
所以我们要复制粘贴那个div, 它是一个HTML元素 

29
00:02:28,770 --> 00:02:35,910
如果我们回到我们的页面, 我们可以看到这里有一个按钮, 这个文本说你按了零次按钮

30
00:02:35,910 --> 00:02:44,010
所以这个use state或者这个used state hook从react导入到这里, 实际上会给我们这两个常量,

31
00:02:44,010 --> 00:02:47,880
count和set count

32
00:02:47,880 --> 00:02:52,800
这是一个更新值的函数, 这是值本身 

33
00:02:52,800 --> 00:03:00,780
但是每次我们在click事件上按下那个按钮, 它基本上都会设置count来增加count的当前值

34
00:03:01,080 --> 00:03:08,580
所以如果我们点击这个按钮, 哇, 我们可以看到这里的计数器实际上每次我点击它都会上升

35
00:03:08,580 --> 00:03:11,700
我不知道你能不能听到我的声音, 但我没有骗你 

36
00:03:11,700 --> 00:03:15,750
但是, 是的, 所以我们可以看到这是非常有用的 

37
00:03:15,750 --> 00:03:21,690
这就像我们只是想出了一些随机的想法, 我们希望它出现在我们的网站上, 果然它做到了

38
00:03:21,690 --> 00:03:27,750
顺便说一下, 我们使用React的原因是, 之前我们只得到了一些基本的HTML 

39
00:03:28,140 --> 00:03:33,720
这个HTML, 就像我之前说的, 有点像你网站的骨架 

40
00:03:34,080 --> 00:03:38,010
正如他们所说, CSS有点像样式 

41
00:03:38,010 --> 00:03:40,050
那么, 如何让它看起来漂亮呢？

42
00:03:40,080 --> 00:03:40,680
对吧？

43
00:03:40,680 --> 00:03:44,610
最后, JavaScript就像是它背后的大脑 

44
00:03:44,610 --> 00:03:49,470
所以这才是真正让它移动和互动的东西, 诸如此类 

45
00:03:49,470 --> 00:03:55,800
所以这些东西都是用JavaScript写的, 它只是返回HTML元素和一些额外的功能 

46
00:03:55,800 --> 00:04:01,890
所以除了HTML和JavaScript, 我们现在唯一缺少的就是CSS 

47
00:04:02,220 --> 00:04:03,090
我们去问问查德 

48
00:04:04,080 --> 00:04:06,570
你能按下那个按钮吗？

49
00:04:07,370 --> 00:04:08,080
蓝色的

50
00:04:08,090 --> 00:04:08,390
走吧

51
00:04:08,390 --> 00:04:09,500
就说蓝色吧 

52
00:04:10,810 --> 00:04:15,070
当然, 您可以通过向button元素添加一个style属性来轻松更改按钮颜色 

53
00:04:15,100 --> 00:04:17,260
这里有一个例子, 你可以让这个按钮 

54
00:04:17,260 --> 00:04:20,170
它大概会得到一些代码 

55
00:04:21,040 --> 00:04:24,350
这就是我们在我们有这个应用程序功能之前所得到的 

56
00:04:24,370 --> 00:04:27,370
这是我们已经在我们的应用程序中引入的东西 

57
00:04:27,670 --> 00:04:31,930
这里我们可以看到他们之前告诉我们的不同之处, 对吧？

58
00:04:31,930 --> 00:04:37,990
前面我们有一个button元素, 它指定了一个onclick行为 

59
00:04:38,110 --> 00:04:41,800
在这里, 除了样式之外, 它还具有单击行为 

60
00:04:42,040 --> 00:04:43,810
如果我们真的复制它 

61
00:04:45,130 --> 00:04:46,780
并将其纳入我们的代码中 

62
00:04:47,500 --> 00:04:54,100
所以让我们实际上让它看起来就像它在它的响应上一样, 即使你真的不需要这样做

63
00:04:56,170 --> 00:04:57,730
我想我少了一个花括号 

64
00:04:57,730 --> 00:05:00,070
我没有抄我身上的花括号 

65
00:05:00,070 --> 00:05:03,750
但如果我们复制正确的话, 这就是它的样子 

66
00:05:03,760 --> 00:05:05,500
如果我走到这里 

67
00:05:05,500 --> 00:05:07,870
哦, 果然, 我的纽扣现在是蓝色的了 

68
00:05:07,900 --> 00:05:12,490
也许不是你见过的最漂亮的蓝色, 但我相信你可以继续与聊天GPT的对话,

69
00:05:12,490 --> 00:05:15,610
试图让它更多的你想要的

70
00:05:15,610 --> 00:05:21,040
所以也许我们可以问, 你能把它变成更淡的蓝色吗？

71
00:05:21,970 --> 00:05:35,110
所以, 是的, 它真的只是把聊天当作这种对话格式, 它会在整个对话中发展, 因为它积累了越来越多的关于你想要什么的背景

72
00:05:35,110 --> 00:05:40,840
在左边, 你可以看到你可以开始新的聊天, 它实际上不会在聊天之间保留内存

73
00:05:40,840 --> 00:05:45,320
所以如果你想掌握你之前告诉它的内容的上下文, 请确保它在同一个聊天中 

74
00:05:45,340 --> 00:05:49,240
让我们来看看这是什么有趣的东西

75
00:05:49,420 --> 00:05:52,480
让我们看看聊天极客认为什么是更浅的蓝色 

76
00:05:52,480 --> 00:05:56,830
所以如果我们继续复制它, 我们就能看到它的真实想法 

77
00:05:56,830 --> 00:05:58,770
就像它有多好奇, 对吧？

78
00:05:58,810 --> 00:06:00,760
比如, 它会轻多少？

79
00:06:00,760 --> 00:06:05,760
如果我们把它移到这里, 去掉其中一个角度突变, 它就在那里 

80
00:06:05,770 --> 00:06:07,990
但如果我们把它保存下来回到这里 

81
00:06:07,990 --> 00:06:08,530
哦 

82
00:06:09,160 --> 00:06:09,550
嗯 

83
00:06:10,540 --> 00:06:15,160
老实说, 我的意见是有点紫色, 但我会留给你来决定 

84
00:06:15,160 --> 00:06:18,340
但是, 是的, 所以你可以来回 

85
00:06:18,340 --> 00:06:25,000
就像一旦你有了一个想法, 对, 你只要问聊天你要怎么做, 它会给你一个答案

86
00:06:25,000 --> 00:06:27,430
也许不是我们在这里看到的最好的答案 

87
00:06:27,880 --> 00:06:33,160
我的意思是, 我肯定这在某些方面有点蓝, 但基本上我们从中得到的是,

88
00:06:33,160 --> 00:06:39,490
我们实际上可以使用一个值, 而不是蓝色本身的字符串表示, 对吧？

89
00:06:39,490 --> 00:06:44,440
所以我们实际上可以使用这种十六进制的颜色规格 

90
00:06:45,400 --> 00:06:50,890
如果你熟悉计算机的颜色表示, 有RGV, 红色, 绿色和蓝色,

91
00:06:50,890 --> 00:06:56,200
十六进制数字指定的强度, 每一个颜色通道

92
00:06:56,320 --> 00:07:01,660
所以我们可以带走的一件事是, 我们可以对颜色进行修补和调整, 直到我们得到我们想要的颜色,

93
00:07:01,660 --> 00:07:04,720
或者我们可以使用一些在线资源

94
00:07:05,710 --> 00:07:13,300
是的, 这个, 这个, 这个向我们展示了聊天为我们生成代码的力量