资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/【全栈React】第3天: 我们的第一个组件

【全栈React】第3天: 我们的第一个组件

KaltZK / 947人阅读

摘要：我们的应用由一个单一的元素组成。让我们通过构建我们的第一个组件来开始接触这个力量。我们将把组件写成类。让我们来看一个我们要调用的组件。然而，什么都不会在屏幕上呈现。

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3799
原文：https://www.fullstackreact.com/30-days-of-react/day-3/

这个系列的前两篇文章是很重要的讨论。在今天的课程中，我们来看看一些代码，并写下我们的第一个React应用。

让我们重温第一天介绍的Hello world应用。这次，略有不同：




  
  Hello world
  
  ``
  ``
  ``


  

  ``
加载React库

我们在包含了React的来源作为 `` ``

``

然而，什么都不会在屏幕上呈现。你还记得为什么吗？

我们没有告诉React我们要在屏幕上渲染任何东西，或者在什么地方渲染它。我们需要再次使用ReactDOM.render() 函数来表达React我们想要呈现的内容和位置。

添加ReactDOM.render() 函数将在屏幕上呈现我们的应用：

var mount = document.querySelector("#app");
ReactDOM.render(, mount);

请注意，我们可以使用App类来渲染我们的React应用，就像它是一个内置的DOM组件类型（像

和
标签一样）。这里我们使用它，就像它是一个带尖括号的元素：。

我们的React组件的行为就像我们页面上的任何其他元素一样，我们可以像构建一个本地浏览器树一样构建一个组件树。

虽然我们现在渲染一个React组件，我们的应用仍然缺乏丰富性或交互性。很快，我们将看到如何使React组件数据驱动和动态。但首先，在本系列的下一期中，我们将探讨如何对图层组件进行分层。嵌套组件是丰富的React Web应用的基础。

混合云 超融合服务器 小白的第一本python 代表企业的第二级域名为 第一个数据 第一个顶级域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84574.html

相关文章

  • 【全栈React】React 30天教程索引

    摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法，称为体系结构。第天部署介绍今天，我们将探讨部署我们的应用所涉及的不同部分，以便外界可以使用我们的应用。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

    appetizerio 评论0 收藏0

  • 【全栈React】第4天: 复杂组件

    摘要：本文转载自众成翻译译者链接原文太棒了，我们已经构建了第一个组件。天前一章节，我们开始构建我们的第一个组件。内容部分内有个不同的项目组件。决定划分组件的深度比科学更显得艺术。子组件当组件嵌套在另一个组件中时，它被称为子组件。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3817原文：https://www.fullstackre...

    Mike617 评论0 收藏0

  • 【全栈React】第1天: 什么是 React?

    摘要：本文转载自众成翻译译者链接原文今天，我们从一开始就开始。让我们看看是什么，是什么让运转起来。什么是是一个用于构建用户界面的库。它是应用程序的视图层。所有应用程序的核心是组件。组件是可组合的。虚拟完全存在于内存中，并且是网络浏览器的的表示。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3765原文：https://www.ful...

    ralap 评论0 收藏0

  • 【全栈React】第2天: 什么是 JSX?

    摘要：代表基本上是常规。第次更新，在年完成。几乎完全支持所有主要的浏览器。但这将是一段时间，直到较旧版本的浏览器逐步停止使用。这意味着将转换为。在组件的情况下，写入的将如下所示在我们在第一个作出反应组件使用的语法是语法。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....

    Eirunye 评论0 收藏0

  • 【全栈React】第6天: 状态

    摘要：无论何时状态改变通过，组件将重新投递。在调用函数之后，我们可以将第二个参数传递给函数，该函数将在状态更新后保证被调用。今天，我们更新了我们的组件以使其处于状态状态，现在有必要处理如何使组件成为状态。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3824原文：https://www.fullstackreact.com/30-d...

    leo108 评论0 收藏0

发表评论

登陆后可评论

0条评论

KaltZK

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<