React.js（介绍和工作）

ReactJS 简介：让我们通过一个实际的例子来理解这一点。

假设您的一个朋友在 Facebook 上发布了一张照片。现在你去喜欢这张图片，然后你也开始查看评论。现在，当您浏览评论时，您会看到点赞数增加了 100，因为您喜欢这张图片，即使没有重新加载页面。这种神奇的计数变化是因为 Reactjs。
React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。
React 使用声明式范式，可以更轻松地推理您的应用程序，并旨在高效和灵活。它为应用程序中的每个状态设计简单的视图，当你的数据发生变化时，React 将有效地更新和呈现正确的组件。声明式视图使您的代码更可预测且更易于调试。
一个 React 应用程序由多个组件组成，每个组件负责渲染一小段可重用的 HTML。组件可以嵌套在其他组件中，以允许使用简单的构建块构建复杂的应用程序。一个组件也可以维护一个内部状态——例如，一个 TabList 组件可以存储一个与当前打开的选项卡相对应的变量。

注意： React 不是一个框架。它只是 Facebook 开发的一个库，用于解决我们之前面临的一些问题。
先决条件：下载最新版本的节点包。

示例：使用以下命令创建一个新的 React 项目：

npx create-react-app myapp

文件名 App.js：现在使用以下代码更改App.js文件：

javascript

import React,{ Component }  from 'react';
 
class App extends Component {
 
  render() {
    return (    
       

         
Hello, Learner.Welcome to GeeksforGeeks.
       
 
    );
  }
}
    
export default App;

输出：

它是如何工作的：在构建客户端应用程序时，Facebook 开发人员团队意识到 DOM 很慢（文档对象模型 (DOM) 是 HTML 和 XML 文档的应用程序编程接口 (API)。它定义了逻辑结构文档的数量以及访问和操作文档的方式。）。因此，为了使其更快，React 实现了一个虚拟 DOM，它基本上是 JavaScript 中的 DOM 树表示。所以当它需要读取或写入 DOM 时，它会使用它的虚拟表示。然后虚拟 DOM 会尝试找到最有效的方式来更新浏览器的 DOM。
与浏览器 DOM 元素不同，React 元素是普通对象，创建起来很便宜。 React DOM 负责更新 DOM 以匹配 React 元素。这样做的原因是 JavaScript 非常快，值得在其中保留 DOM 树以加快其操作速度。
尽管 React 被设想用于浏览器，但由于它的设计，它也可以在带有 Node.js 的服务器中使用。