资讯专栏INFORMATION COLUMN

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

ralap / 2832人阅读

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

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

今天,我们从一开始就开始。让我们看看React是什么,是什么让React运转起来。我们将讨论为什么要使用它。

在接下来的30天内,您可以体验到React网页框架及其生态系统的各个部分。

我们的30天冒险中的每一天都将建立在前一天的材料上,所以在系列结束之后,您不仅可以了解框架如何工作的术语,概念和基础,而且可以在您的 下一个Web应用程序

让我们开始吧。 我们将从在零开始因为它是一个非常好的开始的地方。

什么是React?

React是一个用于构建用户界面的JavaScript库。它是Web应用程序的视图层。

所有React应用程序的核心是组件(components)。组件是一个自包含的模块,它提供一些输出。我们可以将类似按钮或输入字段的接口元素作为React组件。组件是可组合的。组件可以在其输出中包括一个或多个其他组件。

一般来说,为了编写React应用程序,我们编写了对应于各种接口元素的React组件。然后,我们将这些组件组织在定义应用程序结构的更高级组件中。

例如,拿到一个表单。表单可能包含许多界面元素,例如输入字段,标签或按钮。窗体中的每个元素都可以写为React组件。然后我们写一个更高级的组件,形式组件本身。表单组件将指定表单的结构,并在其中包括每个这些接口元素。

重要的是,React应用程序中的每个组件都遵守严格的数据管理原则。复杂的交互式用户界面通常涉及复杂的数据和应用程序状态。React的表面区域是有限的,目的是给我们提供工具,以便能够预测我们的应用程序在给定的情况下的外观。我们在后面的课程中探讨这些原则。

好吧,那么我们如何使用呢?

React是一个JavaScript框架。使用框架就像在我们的HTML中包含一个JavaScript文件一样简单,并在我们JavaScript的应用程序中使用React 导出。

例如,React网站的_Hello world_示例可以如下简单:



  
  Hello world
  
  
  
  



  

虽然它可能看起来有点可怕,JavaScript代码是一行动态添加_Hello world_的页面。注意,我们只需要包括一些JavaScript文件,以使一切工作。

它是如何工作的?

与许多其前身不同,React不是直接在浏览器的文档对象模型(DOM)上运行,而是在虚拟DOM(virtual DOM)上运行。也就是说,而不是document 在更改我们的数据之后在浏览器中操作(这可能很慢),它解决了其虚拟DOM中的更改。在更新虚拟DOM之后,React会智能地确定对实际DOM所做的更改。

虚拟DOM 完全存在于内存中,并且是网络浏览器的DOM的表示。因此,当我们写一个React组件时,我们不是直接写入DOM,而是写一个虚拟组件,React将变成DOM。

在下一篇文章中,我们将看看这对我们构建React组件和跳到JSX并编写我们的第一个真正组件意味着什么。

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

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

相关文章

  • 全栈ReactReact 30教程索引

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

    appetizerio 评论0 收藏0
  • 全栈React3: 我们的一个组件

    摘要:我们的应用由一个单一的元素组成。让我们通过构建我们的第一个组件来开始接触这个力量。我们将把组件写成类。让我们来看一个我们要调用的组件。然而,什么都不会在屏幕上呈现。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3799原文:https://www.fullstackreact.com/30-days-of-react/day-...

    KaltZK 评论0 收藏0
  • 全栈React13: 重复元素

    摘要:在我们的应用中添加太多的复杂度来加载外部数据之前今天我们将快速了解如何在应用中重复组件元素。出于性能原因使用虚拟尝试限制在重新视图时需要更新的元素的数量。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3826原文:https://www.fullstackreact.com/30-days-of-react/day-13/ 今...

    RaoMeng 评论0 收藏0
  • 全栈React2: 什么 JSX?

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

    Eirunye 评论0 收藏0
  • 全栈React24: 测试应用

    摘要:我们的第一个假设是非常简单的测试。我们正在测试以确保元素被包装在类中。在我们编写的每个测试中我们都需要将应用呈现在工作测试文档中。作为提醒我们可以使用命令或命令来运行测试。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3804原文:https://www.fullstackreact.com/30-days-of-react/...

    ziwenxie 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<