30天入坑React ---------------day01 What is React?

最新推荐文章于 2025-04-01 18:45:29 发布

小李科技

最新推荐文章于 2025-04-01 18:45:29 发布

阅读量341

点赞数

分类专栏： React React入门30天

React 同时被 2 个专栏收录

68 篇文章

订阅专栏

React入门30天

30 篇文章

订阅专栏

这篇文章是30天React系列的一部分。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

30天的React Mini-Ebook

什么是React？

在Github上编辑此页面

今天，我们从一开始就开始了。让我们来看看React是什么以及它是什么让它打勾。我们将讨论为什么要使用它。

在接下来的30天内，您将对React Web框架及其生态系统的各个部分有一个良好的感觉。

我们30天冒险中的每一天都将以前一天的材料为基础，因此在本系列的最后，您不仅可以了解框架的工作条款，概念和基础，还可以在您的工作中使用React。下一个Web应用程序

让我们开始吧。我们将从一开始就开始，因为它是一个非常好的起点。

什么是React？

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

所有React应用程序的核心都是组件。组件是一个自包含的模块，可以呈现一些输出。我们可以将按钮或输入字段等界面元素编写为React组件。组件是可组合的。组件可能在其输出中包含一个或多个其他组件。

从广义上讲，要编写React应用程序，我们编写与各种界面元素相对应的React组件。然后，我们将这些组件组织在更高级别的组件中，这些组件定义了应用程序的结构

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

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

好的，我们如何使用它？

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

例如，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://unpkg.com/babel-standalone@6/babel.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世界添加到页面中。请注意，我们只需要包含一些JavaScript文件即可使所有内容正常运行。

它是如何工作的？

与其许多前辈不同，React不是直接在浏览器的文档对象模型（DOM）上运行，而是在虚拟DOM上运行。也就是说，它不是document在更改我们的数据（可能非常慢）之后在浏览器中操作它，而是解析在构建的DOM上的更改并完全在内存中运行。虚拟DOM更新后，React会智能地确定对实际浏览器的DOM进行哪些更改。

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

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