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

时间 2019-11-05

原文原文链接

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

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

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

咱们的30天冒险中的每一天都将创建在前一天的材料上，因此在系列结束以后，您不只能够了解框架如何工做的术语，概念和基础，并且能够在您的下一个Web应用程序github

让咱们开始吧。咱们将从在零开始由于它是一个很是好的开始的地方。ajax

什么是React？

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

全部React应用程序的核心是组件(components)。组件是一个自包含的模块，它提供一些输出。咱们能够将相似按钮或输入字段的接口元素做为React组件。组件是可组合的。组件能够在其输出中包括一个或多个其余组件。浏览器

通常来讲，为了编写React应用程序，咱们编写了对应于各类接口元素的React组件。而后，咱们将这些组件组织在定义应用程序结构的更高级组件中。babel

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

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

好吧，那么咱们如何使用呢？

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并编写咱们的第一个真正组件意味着什么。