JSX, el lenguaje de React (con EJEMPLOS)

Sebastian Pardo — Mon, 02 Nov 2020 14:00:23 +0000

⚛ React o ReactJS

React o ReactJS, es una de las tecnologías de JavaScript mas populares del momento. Desarrollada y mantenida principalmente por Facebook desde el año 2013, React se define como una librería open-source enfocada en construir interfaces de usuario para el front end.

🔳 Componentes

Uno de los conceptos principales de React son los componentes, estos son funciones (o clases) que almacenan una cierta lógica y una interfaz de usuario que puede ser renderizada al DOM.

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada. - react.org

JavaScript XML (JSX)

Para describir la interfaz de usuario a ser representada en un componente se utiliza la sintaxis JSX (JavaScript XML). Esta es una extensión a JS que nos permite escribir HTML dentro de nuestro código sin necesidad de representarlo como un string (encerrándolo entre comillas).

⌨ Ejemplo:

function App() {
  return <h1>Hola Mundo</h1>;
}

Esta extensión en realidad es azúcar sintáctica para llamar a la función React.createElement(type, [props], [...children]), de modo que el ejemplo anterior transformado a ECMAScript estándar por un preprocesador (como Babel.js) se transforma en:

⌨

function App(){
  return React.createElement("h1", null, "Hola Mundo");
}

El parámetro type puede ser tanto un string con el nombre de una etiqueta HTML o un componente de React (ya sea de clase o función). El parámetro props es un objeto que contiene los atributos del parámetro type y finalmente children son todos los componentes o tags HTML que están dentro del elemento que estamos creando.

Recuerda que para utilizar la función React.createElement la libreria React debe estar en el scope.
Esto mediante:
import React from 'react'

Entonces... ¿Como se transforma un componente con una UI mas compleja?

JSX con etiquetas HTML anidadas

⌨JSX

function App() {
  return (
    <div>
      <h1>Bienvenido a Dev.to</h1>
      <button>Unirse a la comunidad</button>
    </div>
  );
}

⌨ECMAScript

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "Bienvenido a Dev.to"),
    React.createElement("button", null, "Unirse a la comunidad")
  );
}

Mira como las etiquetas <h1> y <button> también son transformadas a una llamada a la función React.createElement(...) y son pasados como parámetros distintos en la llamada a la función que crea el <div> que los contiene.

JSX con componentes de React

Hasta ahora solo hemos utilizado etiquetas HTML, pero también podemos utilizar componentes de React para describir nuestra interfaz de usuario.
⌨JSX

function Saludo() {
    return (
        <h1>Bienvenido a DEV Community</h1>
    );
}

function App() {
  return (
    <Saludo />
  );
}

⌨ECMAScript

function App() {
  return React.createElement(Saludo, null);
}

Es importante tener en cuenta que los componentes de React deben empezar con una mayúscula. De esta forma es como se diferencian los elementos nativos de HTML de los componentes.

Veamos que sucede si declaramos un componente que no comienza con una letra mayúscula.

⌨JSX

function saludo() {
    return (
        <h1>Bienvenido a DEV Community</h1>
    );
}

function App() {
  return (
    <saludo />
  );
}

⌨ECMAScript

function App() {
  return React.createElement("saludo", null);
}

Mira como el componente saludo se pasa a la función React.createElement como si fuese un string y no como si fuese una función, como en el caso anterior.
Cuando se le pasa un objeto de tipo string, React lo interpretará como si fuese una etiqueta nativa de HTML y no lo renderizará de la manera esperada.

Expresiones JS dentro de JSX

Puedes incrustar expresiones dentro de JSX encerrándolas en paréntesis de llaves.

⌨JSX

const nombre = 'Sebastian Pardo';
const despedida = <h1>Hasta la proxima, {nombre}!</h1>;

⌨ECMAScript

const despedida = React.createElement("h1", null, "Hasta la proxima, ", nombre, "!");

Y esto al renderizarlo en HTML sera: ⌨

<h1>Hasta la proxima, Sebastian Pardo!</h1>

Por supuesto puedes hacer uso de otras expresiones como llamadas a la función Array.map() para iterar sobre un arreglo, expresiones matemáticas o concatenación de strings.

Renderizado condicional

Otra expresión bastante útil que puedes utilizar es la que te permite renderizar una sección de tu UI dependiendo de una condición.

Este funcionalidad consiste en lo siguiente:

Declarar la condición.
Utilizar el operador lógico &&.
Declarar la parte de tu UI que esta sujeta a la condición previa. (puedes utilizar JSX)

A continuación un ejemplo: ⌨

let esViernes = true;
const inicio = <div>
    <h1> Bienvenido </h1> 
    { esViernes && <h2> "Feliz Viernes" </h2>}
</div>;

// OUTPUT
<div>
  <h1> Bienvenido </h1>
  <h2>Feliz Viernes</h2>
</div>

Esta funcionalidad se debe a que en JavaScript una expresión del tipo true && expresion siempre devuelve expresion, mientras que en el caso de false && expresion siempre devuelve false.

Un problema con este tipo de expresiones es que no nos permiten implementar una lógica de tipo if/else.
En el caso de que necesitemos implementar este tipo de lógicas podemos utilizar el operador ternario.
⌨ Ejemplo:

let esViernes = false;
const inicio = <h1>{esViernes ? "ES VIERNES!!" : "Otro dia mas..."}</h1>

// OUTPUT
<h1>Otro dia mas...</h1>

Valores Ignorados

Las etiquetas que contengan valores booleanos true/false, null y undefined serán renderizadas sin ningún contenido dentro.

⌨ Ejemplo:

<p>{true}</p>
<p>{false}</p>
<p>{true && true}</p>
<p>{null}</p>
<p>{undefined}</p>
<p></p>

Todos los ejemplos anteriores compilan a:
⌨

<p></p>

Conclusión 📚

Si bien es posible escribir aplicaciones en React sin utilizar JSX, la verdad es que no es una opción viable en ningún caso (exagero).
Las mejoras que nos ofrece el utilizarlo no solo se quedan en la simplicidad y claridad del código, también nos permite ser mas productivos y rápidos escribiendo código React.
Aun cuando es una extensión de JS bastante simple de entender, tiene particularidades (algunas las revisamos en el post, no todas) que es importante conocer para evitar incurrir en posteriores bugs en nuestros códigos.

Referencias 🌐

Stack Overflow Survey 2020
JS Apps at Facebook
Introducing JSX
JSX in Depth

Etiquetas semánticas de HTML5

Sebastian Pardo — Mon, 26 Oct 2020 22:27:55 +0000

Nota: Este post esta pensado como difusión de información, no debiese ser tomado como fuente única de referencia.

La quinta versión del lenguaje de marcado HTML fue publicada hace ya 6 años (29 de octubre de 2014) a manos del World Wide Web Consortium (W3C).

Aparte de los importantes cambios en las etiquetas ya existentes (como <input />) y la eliminación de otras (como <xmp>), uno de los cambios mas importante es la adición de nuevas etiquetas. Si bien varias de estas vinieron a solucionar nuestra vida como programadores, otras tienen una funcionalidad idéntica a la mítica etiqueta <div>. Estas son las etiquetas semánticas.

Las etiquetas semánticas ayudan a la implementación de los estándares de la Web Semántica, cuya finalidad es hacer el contenido de internet legible para aplicaciones informáticas.
Uno de los usos mas importantes de este tipo de etiquetas es la de marcar la información de la pagina para ser indexada por los buscadores web como Google.

Etiquetas

Tag	Descripción
<header>	Representa un grupo de ayudas introductorias o de navegación. También puede contener logos, formulario de búsqueda o tabla de contenidos
<nav>	Sección de una página que enlaza a otras páginas o partes de la misma. Una sección con links de navegación.
<aside>	Sección de una pagina que contiene contenido relacionado tangencialmente al de su alrededor. Por lo general se utilizan como barras laterales.
<main>	Representa el contenido predominante de la página. Una página debe tener solo un tag `<main>`. Solo debe estar contenida por tags de tipo `<html>`, `<body>`, `<div>` o `<form>`.
<article>	Representa una sección de contenido que puede ser distribuido de forma independiente. Puede ser un post en un foro, un articulo de periódico, una entrada de un blog, un comentario, etc.
<section>	Representa a una sección genérica de una pagina. Agrupa contenidos que tienen una relación temática entre si.
<footer>	Representa un pie de página para el elemento que lo contiene. Generalmente contiene información acerca de quién lo escribió, enlaces a documentos relacionados, datos de derechos de autor o similares.

Ejemplos

Ejemplo 1

Ejemplo 2

Repositorio con el código de los ejemplos:

sa-pardo / html5-semantic-tags

Use of html5 semantic tags

Semantic tags of HTML5

This example uses the following tags:

<header>
<nav>
<aside>
<main>
<article>
<section>
<footer>

Display 1

Display 2

View on GitHub

Recuerda que esto es solo un recopilatorio de algunas de las etiquetas introducidas en HTML5 y no son necesariamente las únicas que existen

Links de interés

Estándar HTML
HTML Semantic Elements

DEV Community: Sebastian Pardo

JSX, el lenguaje de React (con EJEMPLOS)

⚛ React o ReactJS

🔳 Componentes

JavaScript XML (JSX)

JSX con etiquetas HTML anidadas

JSX con componentes de React

Expresiones JS dentro de JSX

Renderizado condicional

Valores Ignorados

Conclusión 📚

Referencias 🌐

Etiquetas semánticas de HTML5

Etiquetas

Ejemplos

sa-pardo / html5-semantic-tags

Use of html5 semantic tags

Semantic tags of HTML5

Display 1

Display 2

Links de interés