¿Cuáles son las características de ReactJS?

 React es una biblioteca de JavaScript creada por Facebook para crear aplicaciones dinámicas e interactivas y crear un mejor diseño de UI/UX para aplicaciones web y móviles. React es una biblioteca front-end de código abierto y basada en componentes. React es responsable del diseño de la interfaz de usuario. React hace que el código sea más fácil de depurar al dividirlo en componentes. 

Características de reaccionar:

• JSX (extensión de sintaxis de JavaScript)
• DOM virtual
• Enlace de datos unidireccional
• Actuación
• Extensiones
• Declaraciones condicionales
• Componentes
• Sencillez

Vamos a entender cada uno de ellos en detalle. 

1. JSX (extensión de sintaxis de JavaScript):  JSX es una combinación de HTML y JavaScript. Puede incrustar objetos JavaScript dentro de los elementos HTML. JSX no es compatible con los navegadores, por lo que Babel compila o transcompila el código en código JavaScript. JSX hace que los códigos sean fáciles y comprensibles. Es fácil de aprender si sabes HTML y JavaScript.

const name="GeekforGeeks";
const ele = <h1>Welcome to {name}</h1>;

2. DOM virtual: DOM significa Modelo de objeto de documento . Es la parte más importante de la web ya que se divide en módulos y ejecuta el código. Por lo general, JavaScript Frameworks actualiza todo el DOM a la vez, lo que hace que la aplicación web sea lenta. Pero reaccionar usa DOM virtual que es una copia exacta de DOM real. Cada vez que hay una modificación en la aplicación web, primero se actualiza todo el DOM virtual y se encuentra la diferencia entre el DOM real y el DOM virtual. Una vez que encuentra la diferencia, DOM actualiza solo la parte que ha cambiado recientemente y todo permanece igual. 

 En la figura que se muestra arriba, cuando todo el DOM virtual se ha actualizado, hay un cambio en los componentes secundarios. Entonces, ahora DOM encuentra la diferencia y actualiza solo la parte modificada.

3. Enlace de datos unidireccional: enlace de datos unidireccional, el propio nombre dice que es un flujo de una sola dirección. Los datos en reaccionar fluyen solo en una dirección, es decir, los datos se transfieren de arriba hacia abajo, es decir, de los componentes principales a los componentes secundarios. Las propiedades (accesorios) en el componente secundario no pueden devolver los datos a su componente principal, pero pueden tener comunicación con los componentes principales para modificar los estados de acuerdo con las entradas proporcionadas. Este es el proceso de trabajo del enlace de datos unidireccional. Esto mantiene todo modular y rápido.

Enlace de datos unidireccional

Como se muestra en el diagrama anterior, los datos solo pueden fluir de arriba hacia abajo.

4. Rendimiento: como discutimos anteriormente, reaccionar usa DOM virtual y actualiza solo las partes modificadas. Entonces, esto hace que el DOM se ejecute más rápido. DOM se ejecuta en la memoria para que podamos crear componentes separados que hacen que DOM se ejecute más rápido.

5. Extensión: React tiene muchas extensiones que podemos usar para crear aplicaciones de interfaz de usuario completas. Es compatible con el desarrollo de aplicaciones móviles y proporciona representación del lado del servidor. React se amplía con Flux, Redux, React Native, etc., lo que nos ayuda a crear una interfaz de usuario atractiva.

6. Declaraciones condicionales: JSX nos permite escribir declaraciones condicionales. Los datos en el navegador se muestran de acuerdo con las condiciones proporcionadas dentro del JSX.

Sintaxis:

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

7. Componentes: React.js divide la página web en múltiples componentes, ya que está basada en componentes. Cada componente es parte del diseño de la interfaz de usuario que tiene su propia lógica y diseño, como se muestra en la imagen a continuación. Por lo tanto, la lógica del componente, que está escrita en JavaScript, lo hace fácil, se ejecuta más rápido y se puede reutilizar.

Múltiples componentes

8. Simplicidad: React.js está basado en componentes, lo que hace que el código sea reutilizable y React.js usa JSX, que es una combinación de HTML y JavaScript. Esto hace que el código sea fácil de entender y fácil de depurar y tiene menos código.

Veamos cómo funciona react.js creando una aplicación.

Siga los pasos a continuación para crear una aplicación de reacción:

Paso 1: Cree una aplicación de reacción usando el siguiente comando:

npx create-react-app foldername

Paso 2: cambie su directorio a la carpeta recién creada.

cd foldername

Estructura del proyecto: se crea una estructura de proyecto como se muestra a continuación:

Paso 3:   ahora cree un nuevo archivo como PassMessage.js en la carpeta src y agregue el siguiente código.

import React from 'react'
import App from './App';
  
function PassMessage() {
    return ( 
        <div>
             <h1 style = {
              {
                textAlign: 'center',
                color: 'green'
              }
            }> Congratulations!!!You passed the test. </h1>  
        </div>
    )
}
  
export default PassMessage

Paso 4: ahora cree otro archivo como FailMessage.js en la carpeta src y agregue el siguiente código.

import React from 'react'
import App from './App'
  
function FailMessage() {
    return ( 
        <div >
            <h1 style = {
            { textAlign: 'center', 
            color: 'green' } 
            }> You failed the test.Better luck next time..!! </h1> 
        </div>
    )
}
  
export default FailMessage

Paso 5: ahora agregue el siguiente código en App.js.

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

Paso 6: Agregue el siguiente código en index.js .

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import FailMessage from './FailMessage';
import PassMessage from './PassMessage';
  
  
ReactDOM.render( <App isPass = { true }/>, 
              document.getElementById('root'));

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

inicio de npm

Producción:

Si proporciona el valor de isPass={true} en index.js , obtendrá el siguiente resultado:

Si el valor de isPass={false} en index.js , se muestra el siguiente resultado.