Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Introducción

Bienvenido al módulo de ReactJS. Vamos a apoyarnos fuertemente en esta documentación para entender cómo podemos interactuar con esta librería y como creamos y organizamos el HTML a través de JSX.

Principios de Diseño

Para entender qué es ReactJS comenzaremos poniendo en contexto bajo que principios fue construida la librería:

  • Composición de componentes: React utiliza la composición de componentes para construir interfaces de usuario. Cada componente tiene una función específica y se combina con otros componentes para formar una interfaz de usuario completa.

  • Declarativo: React se basa en la programación declarativa, lo que significa que los desarrolladores describen lo que quieren que se muestre en la interfaz de usuario, en lugar de describir cómo se debe mostrar.

  • Estado: React mantiene el estado de la aplicación en un solo lugar central, y solo se actualiza mediante acciones explícitas.

  • Virtual DOM: React utiliza un árbol virtual de documento (Virtual DOM) para representar la estructura de la interfaz de usuario, lo que permite una actualización más eficiente y eficaz de la misma.

Estos son los cuatro principios de diseño clave de React para interfaces de usuario.

Juntos, estos principios permiten a los desarrolladores crear aplicaciones de interfaz de usuario eficientes y flexibles.

¿Qué es React JS?

React JS es una librería de JavaScript desarrollada por Facebook que se utiliza para crear interfaces de usuario interactivas y de alta calidad. Es una de las bibliotecas de componentes más populares en el mundo del desarrollo web.

En términos de diseño web, React se basa en los principios de componentización y reutilización de componentes.

Cada componente React representa una pieza individual y reusable de la interfaz de usuario, como un botón, un formulario, una lista, etc. Estos componentes pueden ser combinados para crear componentes más complejos y, finalmente, una interfaz de usuario completa.

Cómo dato anecdótico dentro del equipo de Facebook se generaron 2 proyectos y se tuvo que elegir uno, y de entro esos el ganador fue React. Acá una imagen de ambos proyectos comparados: Javascript releases Puedes ver más sobre esta historia en este video

JSX

JSX es una sintaxis que permite incorporar código JavaScript en el HTML. Con JSX puedes escribir código HTML-like en un archivo de JavaScript y luego renderizarlo en el navegador.

Un código HTML tradicional:

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo HTML</title>
  </head>
  <body>
    <h1>Bienvenido a mi sitio web</h1>
    <p>Esta es una página de ejemplo</p>
  </body>
</html>

Y el código JSX equivalente:

function App() {
  return (
    <div>
      <h1>Bienvenido a mi sitio web</h1>
      <p>Esta es una página de ejemplo</p>
    </div>
  )
}

Como puedes ver, en el código JSX estamos utilizando la sintaxis de etiquetas HTML, pero dentro de una función de JavaScript. Además, estamos importando la biblioteca React para poder utilizar JSX.

En resumen, JSX te permite escribir código HTML dentro de un archivo JavaScript y utilizarlo para renderizar elementos en una página web.

Aunque su sintaxis parece similar al HTML, tiene algunas diferencias y es específico para React.

Principales diferencias de JSX con HTML

La sintaxis de JSX es muy similar al HTML, pero tiene algunas diferencias clave que es importante destacar. Algunos ejemplos que ilustran estas diferencias.

  • Atributos de las etiquetas: En HTML, los atributos se escriben en la etiqueta en forma de clave-valor, como attribute="value". En JSX, los atributos se escriben en forma de objeto, como attribute={value}.
// HTML
<img src="imagen.jpg" alt="Descripción de la imagen">

// JSX
<img src={'imagen.jpg'} alt={'Descripción de la imagen'} />
  • Expresiones JavaScript: En JSX, puedes insertar expresiones de JavaScript dentro de las etiquetas usando llaves {}.
// HTML
<p>El resultado es: 5</p>

// JSX
<p>El resultado es: {5}</p>
  • Eventos: En HTML, los eventos se definen con el atributo onEvent, como onclick. En JSX, los eventos se definen como propiedades de objeto, como onClick.
// HTML
<button onclick="alert('Hola mundo!')">Click aquí</button>

// JSX
<button onClick={() => alert('Hola mundo!')}>Click aquí</button>

Como puedes ver, la sintaxis de JSX es muy similar al HTML, pero tiene algunas diferencias importantes que es necesario conocer para utilizarlo correctamente. Además, es específico para React, lo que significa que no puedes usar JSX fuera de una aplicación React.

Ejemplo interactivo