React教程: 第1天什么是 React?

最新推荐文章于 2023-10-26 08:39:06 发布

Jim~LoveQ

最新推荐文章于 2023-10-26 08:39:06 发布

阅读量173

点赞数

分类专栏：前端 # 全栈React 文章标签： reactjs 前端

本文链接：https://blog.csdn.net/jim_LoveQ/article/details/106666011

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

全栈React

16 篇文章 0 订阅

订阅专栏

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

原著PDF版本下载：下载超过300页的 PDF

今天，我们从一开始就开始。让我们看看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示例可以如下简单：

<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  `<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js">`</script>
  `<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js">`</script>
  `<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">`</script>

</head>
<body>
  <div id="app"></div>
  `<script type="text/babel">`
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.querySelector('#app')
    );
  </script>
</body>
</html>

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

它是如何工作的？

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

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

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

下一章：什么是 JSX?

本教程系列的完整源代码可以在 GitHub repo, 上找到，其中包含所有样式和代码示例。
如果在任何时候你感到困扰，有进一步的问题，请随时通过以下方式与我们联系：
在原文文章末尾评论这篇文章
发送电子邮件至 [email protected]
加入我们的 gitter room
发推文给我们 @fullstackreact
REACT.JS DOM 应用移动 JAVASCRIPT
版权声明本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。
原文链接：全栈React: React 30天

如果有疑问可以直接留言评论，如果觉得对你有帮助，可以小小的赞赏一杯奶茶钱，谢谢！！

在这里插入图片描述

Jim~LoveQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React教程: 第1天什么是 React?

今天，我们从一开始就开始。让我们看看React是什么，是什么让React运转起来。我们将讨论为什么要使用它。在接下来的30天内，您可以体验到React网页框架及其生态系统的各个部分。我们的30天冒险中的每一天都将建立在前一天的材料上，所以在系列结束之后，您不仅可以了解框架如何工作的术语，概念和基础，而且可以在您的下一个Web应用程序让我们开始吧。我们将从在零开始因为它是一个非常好的开始的地方。
复制链接

扫一扫