Enlace de datos de ReactJS

El enlace de datos es el proceso de conectar el elemento de vista o la interfaz de usuario con los datos que lo llenan.

En ReactJS , los componentes se representan en la interfaz de usuario y la lógica del componente contiene los datos que se mostrarán en la vista (IU). La conexión entre los datos que se mostrarán en la vista y la lógica del componente se denomina enlace de datos en ReactJS.

Enlace de datos unidireccional: ReactJS utiliza enlace de datos unidireccional. En el enlace de datos unidireccional se puede seguir una de las siguientes condiciones:

• Componente para ver: cualquier cambio en los datos del componente se reflejaría en la vista.
• Vista a componente: cualquier cambio en Vista se reflejaría en los datos del componente.

Para demostrar los ejemplos de código, debemos crear una aplicación React básica siguiendo los siguientes pasos.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Componente de implementación para ver el enlace de datos:

Escriba el siguiente código en el archivo App.js. Aquí, App es nuestro componente predeterminado donde hemos escrito código.

import React, { Component } from 'react';
  
class App extends Component {
    
  constructor() {
    super();
    this.state = {
      subject: "ReactJS"
    };
  }
  
  render() {
    return (
      <div style={{ textAlign: "center" }}>
        <h4 style={{ color: "#68cf48" }}>GeeksForGeeks</h4>
        <p><b>{this.state.subject}</b> Tutorial</p>
  
      </div>
    )
  }
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Salida después de iniciar la aplicación React

Explicación: el componente contiene un encabezado, un párrafo y un asunto de variable de estado . El valor de esta variable de estado está vinculado tanto al encabezado como al elemento de párrafo y cualquier cambio en la variable de estado, es decir, el asunto, se reflejará en la parte de la vista.

Implementación del enlace de datos de vista a componente:

No podemos aplicar directamente el enlace de datos Vista a Componente en ReactJS, para esto tenemos que agregar controladores de eventos al elemento de vista.

Escriba el siguiente código en el archivo App.js. Aquí, App es nuestro componente predeterminado donde hemos escrito código.

import React, { Component } from 'react';
  
class App extends Component {
  
  constructor() {
    super();
    this.state = {
      subject: ""
    };
  }
  
  handleChange = event => {
    this.setState({
      subject: event.target.value
    })
  }
  
  render() {
    return (
      <div>
        <h4 style={{ color: "#68cf48" }}>GeeksForGeeks</h4>
        <input placeholder="Enter Subject" 
        onChange={this.handleChange}></input>
        <p><b>{this.state.subject}</b> Tutorial</p>
  
      </div>
    )
  }
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación : el componente contiene un encabezado, un párrafo, un campo de entrada y un asunto de variable de estado . Aquí estamos usando el evento onChange cuando un usuario ingresa el valor en el campo de entrada, el cambio se refleja en el asunto de la variable de estado y podemos ver el valor modificado a la vista.