ReactJS 的特点是什么？

React 是 Facebook 创建的一个 JavaScript 库，用于创建动态和交互式应用程序，并为 Web 和移动应用程序构建更好的 UI/UX 设计。 React 是一个开源和基于组件的前端库。 React 负责 UI 设计。 React 通过将代码划分为组件使代码更易于调试。

反应的特点：

• JSX（JavaScript 语法扩展）
• 虚拟 DOM
• 单向数据绑定
• 表现
• 扩展
• 条件语句
• 成分
• 简单

让我们详细了解它们中的每一个。

1. JSX(JavaScript Syntax Extension)： JSX是HTML和JavaScript的结合。您可以在 HTML 元素中嵌入 JavaScript 对象。浏览器不支持 JSX，因此 Babel 编译器将代码转编译为 JavaScript 代码。 JSX 使代码简单易懂。如果您了解 HTML 和 JavaScript，则很容易学习。

const name="GeekforGeeks";
const ele = 
Welcome to {name}
;

2 、虚拟DOM： DOM代表文档对象模型。它是网络中最重要的部分，因为它分为模块并执行代码。通常，JavaScript 框架会一次更新整个 DOM，这会使 Web 应用程序变慢。但是 react 使用虚拟 DOM，它是真实 DOM 的精确副本。每当 Web 应用程序发生修改时，首先更新整个虚拟 DOM，并找出真实 DOM 和虚拟 DOM 的区别。一旦发现差异，DOM 只更新最近更改的部分，一切都保持不变。

在上图中，当整个虚拟 DOM 更新时，子组件发生了变化。所以，现在 DOM 发现了差异并只更新了变化的部分。

3、单向数据绑定：单向数据绑定，顾名思义就是单向流。 react中的数据只在一个方向流动，即数据从上到下传输，即从父组件到子组件。子组件中的属性（props）无法将数据返回给其父组件，但它可以与父组件通信以根据提供的输入修改状态。这就是单向数据绑定的工作过程。这使一切都模块化且快速。

单向数据绑定

如上图所示，数据只能从上到下流动。

4.性能：正如我们前面所讨论的，react 使用虚拟 DOM 并且只更新修改的部分。所以，这使得 DOM 运行得更快。 DOM 在内存中执行，因此我们可以创建单独的组件，从而使 DOM 运行得更快。

5. 扩展： React 有许多扩展，我们可以使用它们来创建成熟的 UI 应用程序。它支持移动应用程序开发并提供服务器端渲染。 React 扩展了 Flux、Redux、React Native 等，帮助我们创建好看的 UI。

6. 条件语句： JSX 允许我们编写条件语句。浏览器中的数据根据 JSX 内部提供的条件显示。

句法：

const age = 12;
if (age >= 10)
{ 
    
 Greater than { age } 
;
} 
else 
{ 
    
 { age } 
;
}

7. 组件： React.js 将网页分为多个组件，因为它是基于组件的。每个组件都是 UI 设计的一部分，它有自己的逻辑和设计，如下图所示。因此，用 JavaScript 编写的组件逻辑使其变得简单，运行速度更快，并且可以重用。

多个组件

8. 简单： React.js 是基于组件的，它使代码可重用，React.js 使用 JSX，它是 HTML 和 JavaScript 的组合。这使代码易于理解和调试，并且代码更少。

让我们通过创建应用程序来看看 react.js 是如何工作的。

按照以下步骤创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：将您的目录更改为新创建的文件夹。

cd foldername

项目结构：创建一个项目结构，如下图所示：

第 3 步：现在在src文件夹中创建一个新文件为PassMessage.js并添加以下代码。

Javascript

import React from 'react'
import App from './App';
  
function PassMessage() {
    return ( 
        

             
 Congratulations!!!You passed the test. 
  
        
    )
}
  
export default PassMessage

第 4 步：现在在src文件夹中创建另一个文件FailMessage.js并添加以下代码。

Javascript

import React from 'react'
import App from './App'
  
function FailMessage() {
    return ( 
        

            
 You failed the test.Better luck next time..!! 
 
        
    )
}
  
export default FailMessage

第 5 步：现在在App.js中添加以下代码。

Javascript

import PassMessage from './PassMessage';
import FailMessage from './FailMessage';
  
  
function App(props) {
    const isPass = props.isPass;
        if (isPass) {
            return  ;
        }
    return  ;
};
  
export default App;

第 6 步：在index.js中添加以下代码。

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import FailMessage from './FailMessage';
import PassMessage from './PassMessage';
  
  
ReactDOM.render( , 
              document.getElementById('root'));

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：

如果你在index.js中给出isPass={true}的值，那么它将给出以下输出：

如果index.js中isPass={false}的值，则显示以下输出。