Descubrir el JSX

Introducción a JSX

JSX (JavaScript XML) es una extensión de sintaxis utilizada en React para describir la interfaz de usuario en forma de código JavaScript. Permite mezclar código JavaScript con etiquetas HTML, lo que hace que la creación de interfaces de usuario en React sea más legible. Es importante sentirse cómodo con esta sintaxis lo antes posible.

Cuando utilizas JSX, puedes escribir elementos de React como si estuvieras escribiendo HTML, pero en realidad, el JSX se transpila en código JavaScript puro antes de ser interpretado por el navegador.

He aquí un ejemplo sencillo de como se ve JSX:

import React from 'react';  
const MiComponente = () => {  
 return <h1>¡Bienvenido a mi aplicación React!</h1>;  
};

En este ejemplo, hemos utilizado JSX para crear un elemento h1 que contiene el mensaje de bienvenida. Esto permite escribir código de interfaz de usuario de forma declarativa y sin llamar a React.createElement cada vez.

Ventajas de JSX

Claridad y legibilidad del código

Al utilizar el JSX nos acercamos al lenguaje natural utilizado para estructurar una página web. El JSX facilita la comunicación entre desarrolladores y mejora la mantenibilidad del código, porque es más fácil entender la estructura de la interfaz de usuario.

Composición de componentes facilitada...

Sintaxis y elementos JSX

En JSX, puedes utilizar una sintaxis similar a HTML para describir la interfaz de usuario de tu aplicación React. Sin embargo, hay algunas diferencias clave a tener en cuenta.

1. Elementos JSX

En JSX, usted puede utilizar etiquetas para crear elementos React. Las etiquetas deben corresponder a componentes React definidos o a etiquetas HTML nativas. Los elementos JSX pueden ser anidados unos dentro de otros, al igual que en HTML.

Ejemplo de etiquetas JSX

const miElemento = <div> 
   <h1>Título</h1> 
   <p>Contenido del párrafo</p>  
</div>;

Los elementos JSX son los bloques de construcción básicos para crear la interfaz de usuario. Parecen etiquetas HTML, pero en realidad son objetos JavaScript que representan componentes React o elementos DOM.

La sintaxis es similar a la de HTML, lo que las hace más familiares para los desarrolladores web.

Ejemplos de elementos JSX

const element1 = <div>Contenido div</div>;  
const element2 = <h1>Título</h1>;  
const element3 = <MiComponente />;

En este ejemplo, la variable element1 contiene un elemento JSX que representa una etiqueta div, element2 contiene una etiqueta h1 y element3 contiene un componente React llamado MiComponente.

También puede utilizar atributos en las etiquetas JSX, igual que en HTML.

2. Atributos JSX

En JSX, usted puede utilizar atributos para configurar los elementos de la interfaz de usuario de manera similar a HTML. Los atributos permiten personalizar el comportamiento y la apariencia de los elementos React. A continuación le explicamos cómo puede utilizar los atributos JSX en sus componentes:

Ejemplo de atributos JSX

const miElemento = <input type="text" placeholder="Introduce tu nombre" />; 
const nombre = "Juan"; 
const miElemento2 = <h1>Bienvenido, {nombre} !</h1>;

En este ejemplo, miElemento es un elemento JSX que representa una etiqueta...

Construir una interfaz con componentes

Dominar React implica el arte de ensamblar componentes reutilizables para crear componentes más grandes y complejos, con el fin de orquestar una aplicación completa. Este método se destaca por su sencillez y eficiencia, promoviendo un código limpio y mantenible.

Es imposible tener una regla precisa sobre el tamaño que deben tener los componentes. Lo que hay que tener en cuenta es que un componente debe ser responsable de una tarea. Una vez más, esta regla difiere de un proyecto a otro.

1. Composición

La composición es la idea de construir componentes utilizando otros componentes como bloques de construcción. Esto permite descomponer una interfaz de usuario compleja en componentes más pequeños e independientes.

Para ilustrarlo, pongamos un ejemplo sencillo:

function BlockDeContenido({ contenido }) {  
  return <p>{ contenido }</p>;  
}  
  
function Articulo() {  
  return (  
    <div>  
      <BlockDeContenido contenido="Primer párrafo" />  
      <BlockDeContenido contenido="Segundo párrafo" />  
    </div>  
  );  
}  
  
function App() {  
  return (  
    < Articulo />  
  );  
}

En este ejemplo, el componente Artículo está formado por varios componentes BlockDeContenido, creando una estructura coherente. Cada componente BlockDeContenido acepta una propiedad de contenido, que se utiliza para mostrar texto en un párrafo. Este enfoque favorece una arquitectura clara y modular, en la que cada componente tiene una función específica.

Al utilizar la composición puede crear componentes independientes centrados en tareas específicas. Estos componentes pueden reutilizarse en distintas partes de la aplicación, evitando así la duplicación de código. También permite separar las preocupaciones y seguir el principio de responsabilidad única.

Supongamos que tenemos dos componentes, Header...

Los fragmentos JSX

Cuando cree componentes React, debe envolverlos en un único elemento raíz. Esto significa que no puede devolver varios elementos de nivel superior directamente en una función de componente sin encapsularlos dentro de un contenedor, como un div. Sin embargo, puede haber situaciones en las que no quieras introducir un elemento adicional para encapsular tus elementos.

Es ahi donde entran en juego los fragmentos de JSX.

1. Utilización de fragmentos JSX

Los fragmentos JSX son una funcionalidad de React que permite agrupar varios elementos de nivel superior sin introducir un nodo adicional en el DOM. Esto mejora la legibilidad del código y permite, por ejemplo, presentar una lista de elementos de manera ordenada sin agregar un contenedor adicional a su alrededor de ellos.

Renderizar (render en ingles) un componente es el proceso por el cual React crea una representación visual de un componente en la pantalla. Es como si React dibujara el componente por primera vez, basándose en los datos y la estructura definidos inicialmente por el desarrollador.

Después, cuando los datos o el estado del componente cambian, React necesita actualizar esta representación visual. Aquí es donde entra el concepto de re-renderización(re-render en inglés). Se trata principalmente de una actualización, React actualiza las partes del componente que realmente han cambiado. Esta habilidad de renderizar...

Expresiones condicionales

Las expresiones condicionales en React permiten mostrar elementos JSX basados en función de una condición. Esto significa que puede controlar la visualización de elementos en función de un valor booleano u otra evaluación condicional.

Hay dos formas corrientes de utilizar expresiones condicionales en React.

1. El operador ternario

El operador ternario (condition ? expresiónIfTrue : expresiónIfFalse) es una forma concisa de crear una expresión condicional en JavaScript.

He aquí un ejemplo de su uso en un componente React:

import React from 'react';  
  
const MyComponent = ({ isLoggedIn }) => {  
  return (  
    <div>  
      {isLoggedIn ? <p> ¡Bienvenido, usuario conectado!</p> :  
<p>Por favor, inicia sesión.</p>}  
    </div>  
  );  
};  
  
export default MyComponent;

En este ejemplo, MyComponent recibe isLoggedIn como entrada, que indica si el usuario ha iniciado sesión o no. Dependiendo del valor de isLoggedIn, el componente mostrará un párrafo diferente: Bienvenido, usuario conectado si isLoggedIn es true, o Por favor, conéctese si isLoggedIn...

Utilizar listas y claves

Cuando se trabaja con datos dinámicos en React, a menudo es necesario renderizar listas de elementos. Las listas permiten mostrar varios elementos con la misma estructura, basados en un conjunto de datos.

Sin embargo, al renderizar listas dinámicas en React, es necesario asignar una clave (key) única a cada elemento de la lista. Las claves ayudan a React a identificar eficazmente los elementos que se han añadido, modificado o eliminado, lo que mejora el rendimiento y la gestión de las actualizaciones.

1. Las claves de los elementos de la lista

Las claves se utilizan para identificar de forma única cada elemento de la lista durante el proceso de renderizado, lo que permite a React detectar los cambios, adiciones o eliminaciones de elementos de manera eficiente.

a. ¿Por qué son importantes las claves?

Cuando se tiene una lista dinámica con elementos que se pueden añadir, eliminar o modificar, React debe realizar una comparación entre los datos nuevos y los antiguos para averiguar qué elementos se han modificado. Las claves permiten a React evitar volver a re-renderizar todos los elementos de la lista.

Las claves ayudan a React a mantener un seguimiento de la identidad de cada elemento de la lista. Esto significa que si un elemento se mueve dentro de la lista, React podrá identificarlo por su clave y actualizar su ubicación sin tener que volver a renderizarlo...