React.js (Introducción y funcionamiento)

Introducción a ReactJS: Entendamos esto con un ejemplo práctico.

Digamos que uno de tus amigos publicó una fotografía en Facebook. Ahora vas y le das me gusta a la imagen y luego comenzaste a revisar los comentarios también. Ahora, mientras navega por los comentarios, ve que el número de Me gusta ha aumentado en 100, desde que le gustó la imagen, incluso sin recargar la página. Este cambio de conteo mágico se debe a ReactJS. 
React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. ‘V’ denota la vista en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.
React utiliza un paradigma declarativo que facilita el razonamiento sobre su aplicación y pretende ser eficiente y flexible. Diseña vistas simples para cada estado en su aplicación, y React actualizará y renderizará de manera eficiente el componente correcto cuando cambien sus datos. La vista declarativa hace que su código sea más predecible y más fácil de depurar.
Una aplicación React está compuesta por múltiples componentes, cada uno de los cuales es responsable de representar una pequeña pieza de HTML reutilizable. Los componentes se pueden anidar dentro de otros componentes para permitir que se construyan aplicaciones complejas a partir de bloques de construcción simples. Un componente también puede mantener un estado interno; por ejemplo, un componente TabList puede almacenar una variable correspondiente a la pestaña abierta actualmente.

Nota: React no es un marco. Es solo una biblioteca desarrollada por Facebook para resolver algunos problemas que enfrentamos anteriormente.
Requisitos previos : Descargue los paquetes de Node con su última versión.

Ejemplo:  Cree un nuevo proyecto de React usando el siguiente comando:

npx create-react-app myapp

Nombre de archivo App.js: ahora cambie el archivo App.js con el siguiente código:

import React,{ Component }  from 'react';
 
class App extends Component {
 
  render() {
    return (    
       <div>
         <h1>Hello, Learner.Welcome to GeeksforGeeks.</h1>
       </div>
 
    );
  }
}
    
export default App;

Producción: 

Cómo funciona:  mientras creaba aplicaciones del lado del cliente, un equipo de desarrolladores de Facebook se dio cuenta de que el DOM es lento (el Modelo de objetos de documento (DOM) es una interfaz de programación de aplicaciones (API) para documentos HTML y XML. Define la estructura lógica de documentos y la forma en que se accede a un documento y se manipula). Entonces, para hacerlo más rápido, React implementa un DOM virtual que es básicamente una representación de árbol DOM en JavaScript. Entonces, cuando necesite leer o escribir en el DOM, utilizará la representación virtual de este. Luego, el DOM virtual intentará encontrar la forma más eficiente de actualizar el DOM del navegador.
A diferencia de los elementos DOM del navegador, los elementos React son objetos simples y son baratos de crear. React DOM se encarga de actualizar el DOM para que coincida con los elementos de React. La razón de esto es que JavaScript es muy rápido y vale la pena mantener un árbol DOM para acelerar su manipulación.
Si bien React fue concebido para ser utilizado en el navegador, por su diseño también puede ser utilizado en el servidor con Node.js.