Módulo 4: Interacción y Eventos

4.1 Manipulación de Eventos

Manejo de eventos en React:

En React, los eventos se manejan de manera similar a cómo se manejan en el DOM tradicional. Sin embargo, en lugar de asignar manejadores directamente a los elementos del DOM, se utilizan funciones manejadoras en los componentes de React.

Sintaxis y uso de funciones manejadoras:

import React from 'react';

class BotonClic extends React.Component {
  handleClick = () => {
    alert('¡Botón clickeado!');
  };

  render() {
    return button onClick={this.handleClick}>Clic aquí /button;
  }
}

export default BotonClic;
  

Eventos comunes: onClick, onChange, etc.:

import React from 'react';

class Formulario extends React.Component {
  handleChange = (event) => {
    console.log('Texto ingresado:', event.target.value);
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
      </div>
    );
  }
}

export default Formulario;
  

4.2 Comunicación entre Componentes

Elevación de estados:

La elevación de estado es un patrón en React donde el estado se mantiene en un componente padre y se pasa como prop a los componentes hijos que lo necesitan. Esto permite que los componentes compartan y sincronicen información.

import React from 'react';

class Padre extends React.Component {
  constructor(props) {
    super(props);
    this.state = { contador: 0 };
  }

  incrementarContador = () => {
    this.setState({ contador: this.state.contador + 1 });
  };

  render() {
    return (
      <div>
        <Hijo contador={this.state.contador} />
        <button onClick={this.incrementarContador}>Incrementar</button>
      </div>
    );
  }
}

class Hijo extends React.Component {
  render() {
    return <p>Contador: {this.props.contador}</p>;
  }
}

export default Padre;
  

Uso de callbacks y props para pasar datos:

import React from 'react';

class Hijo extends React.Component {
  render() {
    return (
      <button onClick={this.props.onBotonClic}>Clic aquí</button>
    );
  }
}

class Padre extends React.Component {
  manejarBotonClic = () => {
    console.log('Botón clickeado en el padre');
  };

  render() {
    return (
      <div>
        <Hijo onBotonClic={this.manejarBotonClic} />
      </div>
    );
  }
}

export default Padre;
  

Patrones de comunicación:

Además de la elevación de estado y el uso de callbacks, existen otros patrones de comunicación entre componentes en React, como el uso de contextos y bibliotecas de gestión de estado como Redux. La comunicación efectiva entre componentes es crucial para construir aplicaciones React bien organizadas y mantenibles.

En los próximos módulos, exploraremos el enrutamiento y la gestión de estado en profundidad.