Módulo 2: Fundamentos de React

2.1 Componentes y JSX

Creación de componentes:

En React, los componentes son los bloques de construcción básicos de la interfaz de usuario. Pueden ser clases o funciones que retornan elementos de React. Los componentes permiten encapsular el código y la lógica para partes específicas de la interfaz de usuario.

import React from 'react';

class MiComponente extends React.Component {
  render() {
    return <h1>Hola desde MiComponente</h1>;
  }
}

export default MiComponente;
    

Sintaxis JSX y su importancia:

JSX (JavaScript XML) es una extensión de sintaxis que permite escribir HTML dentro del código JavaScript. JSX hace que la creación de elementos y componentes en React sea más legible y expresiva.

import React from 'react';

class MiComponente extends React.Component {
  render() {
    return (
      <div>
        <h1>Hola desde MiComponente</h1>
        <p>Esto es JSX en acción.</p>
      </div>
    );
  }
}

export default MiComponente;
    

Renderizado de componentes:

El método render() de un componente es responsable de definir qué elementos o componentes se mostrarán en la interfaz de usuario. React utiliza este método para generar una representación del Virtual DOM y actualizar el DOM real según sea necesario.

import React from 'react';

class MiComponente extends React.Component {
  render() {
    return (
      <div>
        <h1>Hola desde MiComponente</h1>
        <p>Renderizado de componentes en acción.</p>
      </div>
    );
  }
}

export default MiComponente;
    

2.2 Propiedades (Props) y Estado (State)

Pasar datos a través de props:

Las props son la forma principal de pasar datos de un componente padre a un componente hijo en React. Las props son inmutables y permiten que los componentes compartan información entre sí.

import React from 'react';

class Saludo extends React.Component {
  render() {
    return <p>Hola, {this.props.nombre}!</p>;
  }
}

// Uso del componente Saludo
<Saludo nombre="Juan" />;
    

Uso del estado interno en componentes:

El estado es una característica importante en React que permite que un componente mantenga y controle su propia información mutable. Para usar el estado, se debe definir en el constructor del componente y luego se accede a través de this.state.

import React from 'react';

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

  render() {
    return (
      <div>
        <p>Contador: {this.state.contador}</p>
        <button onClick={() => this.setState({ contador: this.state.contador + 1 })}>
          Incrementar
        </button>
      </div>
    );
  }
}

export default Contador;
    

Actualización del estado y su impacto en la interfaz:

Cuando se actualiza el estado de un componente mediante setState(), React realiza una comparación con el estado anterior y el nuevo estado para determinar qué cambios aplicar al Virtual DOM y al DOM real.

import React from 'react';

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

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

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

export default Contador;
    

Estos conceptos son fundamentales para trabajar con React. En los próximos módulos, exploraremos cómo manejar eventos, comunicación entre componentes y más avanzado en el desarrollo de aplicaciones React.