Introducción a React

Conceptos básicos

• React: Es una biblioteca de JavaScript para construir interfaces de usuario. Con React, puedes crear componentes reutilizables que se combinan para construir aplicaciones web.
• JSX: Es una extensión de JavaScript que te permite escribir código HTML dentro de tu código JavaScript. Con JSX, puedes crear componentes de React más fácilmente.
• Componentes: Son bloques de código reutilizable en React. Un componente puede ser una pieza de UI como un botón o una caja de texto, o una sección completa de la página.
• Estado (State): Es un objeto que contiene información sobre el componente y puede cambiar con el tiempo. Cuando el estado cambia, React vuelve a renderizar el componente.
• Props (Propiedades): Son argumentos que se pasan a un componente. Las props son inmutables y se utilizan para transmitir información de un componente a otro.
• React Router: Es una biblioteca que te permite crear rutas en tu aplicación para manejar la navegación. Con React Router, puedes crear URLs que muestren diferentes componentes de React.
• Babel: Es una herramienta de compilación que convierte código JavaScript moderno en código que los navegadores pueden entender. Babel se utiliza con frecuencia con React para hacer que el código sea compatible con una amplia gama de navegadores.
• Webpack: Es una herramienta de construcción que empaqueta el código de tu aplicación en un solo archivo JavaScript. Webpack también puede hacer otras tareas, como optimizar imágenes y compilar CSS.
• Hooks: son una característica de React que se introdujo en la versión 16.8 y permiten a los desarrolladores utilizar el estado y otras características de React en componentes funcionales.

Antes de la introducción de los Hooks, solo era posible utilizar características avanzadas de React como el estado o el ciclo de vida en componentes de clase.

Los componentes funcionales solo se utilizaban para renderizar elementos de la interfaz de usuario, y no podían almacenar estado ni utilizar el ciclo de vida de React. Con la introducción de los Hooks, ahora es posible utilizar características avanzadas de React en componentes funcionales, lo que ha simplificado mucho el proceso de escribir componentes en React.

Existen diferentes tipos de Hooks, pero los más utilizados son useState y useEffect.

• useState permite a los componentes funcionales tener un estado interno, al igual que los componentes de clase. Aquí te muestro un ejemplo:

import React, { useState } from 'react';

function Contador() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

export default Contador;        

En este ejemplo, useState se utiliza para definir un estado interno count con un valor inicial de cero. El método setCount se utiliza para actualizar el estado cada vez que se hace clic en el botón "Incrementar".

• useEffect permite a los componentes funcionales utilizar el ciclo de vida de React. Aquí te muestro un ejemplo:

import React, { useState, useEffect } from 'react';

function Titulo(props) {
  const [title, setTitle] = useState('');

  useEffect(() => {
    document.title = title;
  });

  return (
    <div>
      <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
    </div>
  );
}


export default Titulo;        

En este ejemplo, useEffect se utiliza para actualizar el título de la página cada vez que el valor del estado title cambia. El método useEffect se ejecuta después de que se actualiza el estado y se utiliza para actualizar el título de la página.

Los Hooks son una herramienta poderosa que permiten a los desarrolladores utilizar todas las características avanzadas de React en componentes funcionales. Si deseas profundizar más en los Hooks, te recomiendo revisar la documentación oficial de React.

Espero que esta pequeña introducción os de curiosidad para aprender un poco más sobre REACT y empezar a utilizarlo en pequeños proyectos, ¡espero que os sirva!