Components: React Tutorial

好吧, 我会的 让我们详细讨论一下组件, 然后我们还将使用几个现有的组件, 并对它们进行操作, 调整一些值, 看看会发生什么｡ 正如我们所讨论的, 组件是React的主要构建块｡ Really React的存在是为了帮助您创建组件, 然后让这些组件相互通信､ 传递数据､ 传递信息和方法｡ 如果我们去看React文档, 有一个很好的小段落, 实际上只是一句话, 我喜欢组件让你把UI分成独立的可重用部分, 并孤立地考虑每一部分｡ 所以说实话, React最难的部分之一就是弄清楚要制作什么组件｡ 如果您处理一个大型应用程序, 您会将其分为多少部分？ 我们会详细讨论的｡ 我们将详细讨论模式｡ 但是, 我们的想法是将一些应用程序甚至只是一个功能片段, 并将其分解为单独的可重用片段｡ 把它们包起来, 打个漂亮的蝴蝶结, 给予它们起个名字, 让它成为一个组件｡ 所以它们通常会联合收割机一些东西｡ 您可以看到HTML､ CSS和一些JavaScript逻辑｡ 例如, 我们要看的第一个组件是评级组件, 即星星级组件｡ 我在另一个窗口打开了它｡ 这是一个星星评定组件｡ 这是第二个｡ 你可以看到这里显示了一些东西, HTML, CSS和一些信息｡ 你盘旋的星星, 它们改变了, 颜色也改变了｡ 但是当我点击的时候, 我们会触发一些代码｡ 在一个火的表情符号中, 显示固体和微笑的表情符号或奇妙的表情符号是有一定逻辑的｡ 可怕的和呕吐的表情｡ 因此, 我们可以看到HTML､ CSS和JavaScript组合成一个单独的打包组件｡ 我们一会儿再回到这个问题上｡ 但首先, 我想向你们展示我称之为伪组件的东西｡ 所以这不是真实的反应｡ 这只是一个用于dog组件的普通JavaScript｡ 这是一个愚蠢的例子, 但是我们有一个叫做dog的类, 每个dog组件, 每个实例都有一个名称和一个颜色, 它还知道如何将自己呈现为HTML｡ 它知道在调用render时要显示什么或返回什么｡ 在这个例子中, 很简单的一个段落标记就用这个名字, 所以用狗的名字加在里面｡ 所以我们可以有五只狗, 每只都有不同的名字, 不同的颜色｡ 我们现在没有使用颜色, 但是当我们将它们中的每一个呈现到页面上时, 我们会看到不同的段落标记｡ 这是一个非常简单的例子｡ 同样, 这不是真实的反应, 但它在某种程度上说明了这个想法｡ 我们获取一些数据､ 一些JavaScript信息和逻辑, 然后告诉组件应该呈现什么, 它在屏幕上应该是什么样子｡ 注意, 并非所有组件都基于类｡ 所以我在这里写的组件是知道如何将自己呈现为HTML的类｡ 我们还将学习函数组件｡ 我们在讨论钩子时会花很多时间讨论它们, 但在本节中, 我将制作一个单独的视频, 讨论这两种类型的组件之间的差异｡ 我不想让你在这一点上陷入语法的困境｡ 我只想谈谈围绕组件的主要思想｡ 所以如果你去看这个演示, 这是一个叫做代码沙盒的网站, 真的很棒的资源｡ 它类似于Code Pen, 但在某些方面更好｡ Code Pen非常适合发现前端的东西, HTML､ CSS､ JavaScript､ 动画或者我不知道, 布局等等｡ 代码沙盒是为了模拟您的本地环境而创建的, 因此它使用NPM｡ 您可以添加实际的软件包｡ 如果你以前从未见过它, 这一点并不重要, 但是这个链接包含在描述中, 你可以编辑它｡ 你可以玩一下, 只是调整一下, 看看会发生什么｡ 屏幕右侧是我们正在运行的网站｡ 这是一个React应用程序, 为了使它更简单, 我所做的是在这里单击, 它会弹出到自己的窗口｡ 这样我就可以关闭这里的窗口, 现在我可以放大｡ 所以如果你想沿着做, 如果你喜欢把它放在一个窗口里, 那也没关系｡ 我们有三个文件, 三个JavaScript文件, 一个叫Index, 一个叫星星｡ 这是它自己的组件, 然后是另一个称为评级的组件｡ 所以不要担心语法, 不要担心实际的代码, 只要担心这些部分是如何组合在一起的｡ 所以我们有了第一个最基本的组成部分, 叫做“星星”, 它代表了一个单独的恒星｡ 这是一个星星组件｡ 我现在要做的就是进入我的索引JS, 它就在这里, 这里有一个叫做APP的东西｡ 这实际上也是一个组件｡ 这里有一个应用程序组件, 它是整个页面｡ 然后是一个称为评级的组件, 它包含多个星星组件｡ 所以如果你想沿着玩, 我们可以把它注释掉｡ 或者删除它｡ 我们要做的是定义第一个星星组件｡ 它看起来星星像一个HTML标记｡ 把这个再放大一点, 然后我们要在结尾加上这个结束斜杠｡ 这看起来像HTML｡ 它不是HTML｡ 我们会学到很多关于它是什么的知识｡ 它被称为JSX｡ 整个下一节是关于JS X的｡ React最酷的地方之一是我们可以编写HTML外观的代码而不是JavaScript｡ 这是一个JS文件, 所以这会生成一个星星, 但是每个星都有一些需要了解的信息｡ 它需要有颜色｡ 那么我们的星星应该是什么颜色呢？ 如果你想把它传递进来, 它看起来像这样｡ 那就选粉红色吧｡ 我们走吧｡ 如果我们现在看一下, 你可以看到有一个粉红色的星星｡ 还有一种信息我们可以传递到我们的星星, 这就是被填充的信息｡ 这是一个真或假的布尔值｡ 所以我们可以就像这样加正补正｡ 我们不必将其设置为任何值｡ 你可以看到我们的星星现在被填满了｡ 所以我们已经做了这个小的我们没有做它, 但我们正在使用一个单一的, 小的, 可重复使用的信息｡ 我们可以做几颗不同的星星｡ 让我们做一个｡ 那是粉红色的｡ 让我们做一个洋红的, 一个紫色或靛蓝的｡ 让我们这样做, 我们会有他们都填补｡ 我们走吧｡ 三星｡ 让我们把中间的一个不填充, 这样我们就可以删除它, 确保我们仍然有斜线在那里｡ 现在我们有三个不同的组件, 每个组件都是星星组件的一个实例｡ 所以我们不必担心星星组件是什么样子, 代码是什么样子｡ 如果你想的话, 你可以看一看, 但现在不是重点｡ 此外, 还有一些幕后逻辑｡ 如果我单击, 就会收到警报｡ 这是一个非常基本的逻辑, 但当我点击一个星星时, 它是一些JavaScript运行｡ 现在让我们更进一步｡ 下一个组件是评级组件｡ 因此, 使用星星组件构建评级组件｡ 所以这就是反应小块的主要思想, 但它们并不是孤立存在的｡ 每一个片段通常都要渲染或使用其他更小的片段｡ 所以评级部分, 看起来像这样, 如果你想看一看, 不要被淹没｡ 我们还没谈过这些｡ 它不是很长, 但有一个很好的逻辑在这里｡ 你可以看到我们定义了不同的含义｡ 所以零星星星是没有评级的｡ 星星酒店太棒了｡ 我们有不同的颜色｡ 所以我们有我想这开始是红色的｡ 然后当你开始评价得越来越好的时候, 它就会上升到金色｡ 我们有一些关于评级值的信息｡ 我们有一些代码在您悬停时运行, 还有一些代码在您单击时运行｡ 但最重要的部分就在这里｡ 这里我们在评级文件中使用了一个星星组件｡ 评级部分我们依赖于星星部分, 我刚才给你们看过了｡ 我们传递了很多信息｡ 别担心这些. 但我希望你们能看到的是, 我们有这两个相互作用的组件｡ 我们有评级组件, 它使用的是星星组件｡ 让我们回到我们的索引｡ 在这三颗星星下面, 我们可以添加一些普通的HTML, 比如一个H 2标记, 上面写着评级组件｡ 在其下方, 我们可以添加一个评级组件｡ 就像这样｡ 然后每个评级都要有一个初始数字｡ 那么它从几颗星开始呢？ 两个吧｡ 你可能想知道, 这些花括号是什么？ 我们会讲到的｡ 但现在, 只要遵循这个｡ 这是J的一部分｡ X的语法｡ 让我们看看我们得到了什么｡ 你看看 这是我们的评级组件｡ 现在情况变了｡ 但是如果我回去, 我们把它改成四星, 然后看看我们得到什么｡ 你可以看到它被初始化为五颗星中的四颗星, 但是我可以改变它｡ 让我们去二星或五星｡ 所以这里的每星星都是一个独立的恒星组成部分｡ 他们有五个人｡ 而且评级组件不仅仅显示五星｡ 在某种程度上把他们联系起来了｡ 它计算出它们应该是什么颜色｡ 它计算出当你点击时会发生什么｡ 如果我点击这星星星, 它知道我的评级是两颗星, 但如果我点击这一颗星, 它知道我的评级是五星｡ 所以我不想在这里陷得太深｡ 但在这一点上, 我们已经看到了两个独立的组件｡ 如果你愿意, 你可以玩评级｡ 再加几个｡ 让我们从零星星星开始｡ 好了 我们这里有一个, 然后我们的零星级在这里｡ 好吧, 我会的 所以我现在就讲到这里｡ 我们在这里看到了很多东西, 但希望你至少能尝到反应是什么样的｡ 当然, 我们要讲的内容很多, 但我将在下一个视频中向大家展示一个更复杂､ 更大的示例｡ 我们不打算看代码｡ 我们只想了解一下它所包含的组件, 或者至少是其中的一些组件, 这样您就可以了解到在一个更大的应用程序中, 组件的粒度究竟有多大｡ 所以如果你真的想玩这个, 那就去做吧, 做你自己的小叉子, 调整一下｡ 但请记住, 这段代码是在这一点上, 如果你从来没有看过反应, 这应该是可怕的｡ 其实更多的是关系｡ 好吧, 我会的 我们继续