reactjs

Introducción a React.js

React.js, comúnmente conocido como React, es una biblioteca de JavaScript de código abierto para construir interfaces de usuario. Fue desarrollado por Facebook y ahora es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

React es conocido por su arquitectura basada en componentes, que permite a los desarrolladores construir componentes de IU reutilizables. Estos componentes se combinan para crear interfaces de usuario complejas. React sigue un enfoque declarativo, donde los desarrolladores describen cómo debería lucir la interfaz de usuario, y React se encarga de actualizarla cuando los datos subyacentes cambian.

Historia de React.js

React fue creado por primera vez por Jordan Walke, un ingeniero de software de Facebook, en 2011 para abordar la necesidad de una forma más eficiente de actualizar las interfaces de usuario de las aplicaciones web de Facebook. Luego se convirtió en un proyecto de código abierto en 2013.

Desde su lanzamiento, React ha ganado una gran popularidad y se ha convertido en una de las bibliotecas de JavaScript más utilizadas para construir interfaces de usuario. Tiene una comunidad grande y activa, que contribuye a su desarrollo y mejora continua.

Características de React.js

1. DOM Virtual

React utiliza un DOM virtual (Modelo de Objeto de Documento), que es una copia ligera del DOM real. El DOM virtual permite que React actualice eficientemente solo las partes de la interfaz de usuario que han cambiado, en lugar de volver a renderizar toda la interfaz de usuario. Esto resulta en un rendimiento más rápido y una experiencia de usuario más fluida.

Aquí tienes un ejemplo de cómo funciona el DOM virtual de React:

// Renderización inicial
const elemento = <h1>Hola, React!</h1>;
ReactDOM.render(elemento, document.getElementById('root'));

// Actualización del DOM
const elementoActualizado = <h1>Hola, React!</h1>;
ReactDOM.render(elementoActualizado, document.getElementById('root'));

En el código anterior, React compara el elementoActualizado con la renderización inicial y solo actualiza los cambios necesarios en el DOM real.

2. Arquitectura Basada en Componentes

React sigue una arquitectura basada en componentes, donde las interfaces de usuario se construyen combinando componentes reutilizables. Cada componente encapsula su propia lógica y estado, lo que facilita su gestión y prueba.

Aquí tienes un ejemplo de un componente React simple:

class Boton extends React.Component {
  render() {
    return <button>{this.props.etiqueta}</button>;
  }
}

ReactDOM.render(<Boton etiqueta="Haz clic en mí" />, document.getElementById('root'));

En este código, se define y renderiza el componente Boton con una propiedad etiqueta. El método render devuelve un elemento de botón con la etiqueta pasada como propiedad.

3. Sintaxis JSX

React utiliza JSX (JavaScript XML), una extensión de JavaScript que te permite escribir código similar a HTML dentro de JavaScript. JSX facilita la definición de componentes y su estructura.

Aquí tienes un ejemplo de la sintaxis JSX:

class Mensaje extends React.Component {
  render() {
    return <div>
      <h2>{this.props.titulo}</h2>
      <p>{this.props.contenido}</p>
    </div>;
  }
}

ReactDOM.render(
  <Mensaje titulo="Bienvenido" contenido="Hola, React!" />,
  document.getElementById('root')
);

En este código, se define el componente Mensaje utilizando la sintaxis JSX, con una propiedad titulo y contenido. El método render devuelve un elemento div que contiene un elemento h2 y p.

Ejemplos de React.js

Ejemplo 1: Contador

Comencemos con un componente de contador simple que incrementa un valor cuando se hace clic en un botón.

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

  incrementarContador() {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

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

ReactDOM.render(<Contador />, document.getElementById('root'));

En este código, el componente Contador mantiene un estado count y lo actualiza cuando se hace clic en el botón. El método incrementarContador utiliza setState para actualizar el estado y provocar una nueva renderización del componente.

Ejemplo 2: Lista de Tareas

Construyamos una lista de tareas simple en la que los usuarios puedan agregar y eliminar elementos.

class ListaDeTareas extends React.Component {
  constructor(props) {
    super(props);
    this.state = { tareas: [], nuevaTarea: '' };
  }

  agregarTarea() {
    this.setState(prevState => ({
      tareas: [...prevState.tareas, prevState.nuevaTarea],
      nuevaTarea: ''
    }));
  }

  eliminarTarea(indice) {
    this.setState(prevState => ({
      tareas: prevState.tareas.filter((_, i) => i !== indice)
    }));
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.nuevaTarea}
          onChange={evento => this.setState({ nuevaTarea: evento.target.value })}
        />
        <button onClick={() => this.agregarTarea()}>Agregar</button>
        <ul>
          {this.state.tareas.map((tarea, indice) => (
            <li key={indice}>
              {tarea}
              <button onClick={() => this.eliminarTarea(indice)}>Eliminar</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<ListaDeTareas />, document.getElementById('root'));

En este código, el componente ListaDeTareas mantiene un estado tareas que es un array de elementos de tarea, y nuevaTarea que almacena la nueva tarea ingresada por el usuario. El método agregarTarea agrega la nueva tarea al array de tareas, y el método eliminarTarea elimina una tarea del array.

Para obtener más información sobre React, puedes visitar el sitio web oficial.

Espero que este tutorial te haya dado una buena comprensión de React.js y sus características.