Notas de la Clase de React

Introducción a React

• React es una biblioteca de JavaScript para construir interfaces de usuario.
• Importancia de aprender React:
  • Uso extensivo en aplicaciones web, móviles, y terminales.
  • Permite crear interfaces de usuario de manera más sencilla y eficiente.
  • Basado en componentes, lo que permite reutilización de código.

Conceptos Clave

• Declarativo: React permite construir interfaces sin tener que especificar cómo se deben hacer los cambios.
• Componentes: Elementos independientes que pueden ser reutilizados en diferentes partes de la aplicación.
• Virtual DOM: React utiliza un DOM virtual que optimiza la actualización del DOM real.

JSX

• JSX es una extensión de JavaScript que permite escribir código de forma similar a HTML.
• Los elementos en JSX deben ser representados como componentes React.
• Las reglas para escribir JSX:
  • Usa className en lugar de class.
  • Los atributos deben ser en camelCase (ej. tabIndex).

Componentes y Props

• Los componentes pueden recibir props, que son argumentos que se pasan a los componentes.
  • Ejemplo de uso: function NombreComponente(props) {}
• Asegúrate de que las props son inmutables y no se deben modificar.
• Las props pueden ser de tipo booleano, número, o string.
• Children: Las propiedades que se pasan como hijos a un componente se pueden acceder mediante props.children.

Manejo del Estado

• React introduce el concepto de estado a través de useState:
  const [estado, setEstado] = useState(valorInicial);
• El estado determina cómo se renderiza un componente. Cambios en el estado provocan actualizaciones en la interfaz de usuario.
• El estado se puede inicializar con props, pero debe ser único.

Renderizando Listas

• Para renderizar listas, usa map() para iterar sobre un array y devolver componentes.
• Asegúrate de proporcionar una key única para cada componente de la lista (usualmente un id o un valor único).

Ejemplo de un Proyecto

• Crear un componente que representa una tarjeta de Twitter:
  • Incluye nombre de usuario, botón seguir/dejar de seguir, etc.
• Implementar el manejo de eventos para interactuar con el estado del componente.
• Permitir que los usuarios sigan o dejen de seguir a otros, actualizando el estado y la interfaz de usuario de forma dinámica.

Buenas prácticas

• Evitar mutar directamente las props.
• Usar identificadores únicos para listas para evitar problemas de renderizado.
• Mantener un solo componente por archivo y usar funciones para mantener el código limpio y organizado.