从头开始理解 react
React 是一个用于构建用户界面的 JavaScript 框架。它可用于通过动态操作页面内容来创建 JavaScript 应用程序。浏览器已经提供了在页面中创建元素的 api，即 dom，所以新手可能想知道 React 带来了什么以及它与 DOM 的关系。

原生 JavaScript 和 DOM
在 JavaScript 中，就像在大多数编程语言中一样，您将可以访问具有各种对象和函数的全局范围，您可以操纵这些对象和函数来构建您的应用程序。在 Web 环境中运行的 JavaScript 应用程序中，您将有权访问文档对象模型 (DOM) API。如果您在基于节点的应用程序中使用 JavaScript，蓝狮注册您将无法访问 DOM，但您可以导入替代实现，例如JSDOM。

DOM 是一个简单的 API，可让您以几乎任何您想要的方式操作页面的 html 文档。由于全局document 对象，您可以开始使用它。

从 document 这里开始，您可以轻松地创建新元素、修改它们的属性，甚至将它们添加为其他元素的子元素。多亏了 DOM，您可以通过编程方式创建任何 HTML 文档，即使这样做会非常冗长。

在下面的示例中，我们将以编程方式在 HTML 文档中创建一个简单的标题。

为此，我们将创建一个h1元素，该元素将插入到 HTML 页面的正文中。

// The document object is accessible since it is in the global scope
const h1Element = document.createElement(‘h1’);
h1Element.setAttribute(‘class’, ‘title’);
const textElement = document.createTextNode(‘I am Groot’);
h1Element.appendChild(textElement);

// document.getElementById(‘app’) will retrieve the div with the identifier app
document.getElementById(‘app’).appendChild(element);
上面的代码首先创建一个新属性，然后向该元素h1添加一个class带有值为title的新属性。 它还创建一个简单的文本节点并将文本 ‘I am Groot’ 添加为元素h1的子元素。最后，它使用 HTML 文档将 h1 的标签添加到 div 中。app 执行此代码后，生成的 HTML 文档将如下所示：

I am Groot

借助 DOM，我们还可以通过 className 属性直接操作元素的类属性（因为名称 class 是 JavaScript 中的保留关键字）。因此，以下代码将产生完全相同的结果。

const h1Element = document.createElement(‘h1’);
// h1Element.setAttribute(‘class’, ‘title’);
h1Element.className = ‘title’;
const textElement = document.createTextNode(‘I am Groot’);
h1Element.appendChild(textElement);

document.getElementById(‘app’).appendChild(element);
React 的基础
大多数 React 教程会让你从直接使用 React 的所有奇迹开始。蓝狮注册开户我们将采用另一种方法，因为我们将从编写一些你可能永远不会再编写的 React 代码开始，以便更好地理解 React 的工作方式。

React 的创建考虑了 Web 应用场景，因此，在其核心，它的一些 API 感觉就像 DOM。为了说明这一点，我们将看一下最重要的 React API 之一，React.createElement.

要使用 React 操作 DOM，您将需要两个依赖项 React 和 ReactDOM. React.createElement将让您创建一个廉价且快速的数据结构，称为虚拟 DOM，代表您的用户界面的结构。ReactDOM将在您的 Web 应用程序的真实 DOM 中呈现这个虚拟 DOM。

React.createElement将需要三个参数来创建虚拟 DOM 的元素：

要创建的元素的名称
它的属性
它的孩子
import React from ‘react’;

const name = ‘h1’;
const props = { className: ‘title’ };
const children = ‘I am Groot’;
const element = React.createElement(name, props, children);
React.createElement 也可以接受包含要创建的元素的所有子元素的数组。