Renderizado en React

Componentes

Para empezar, lo más importante es entender la figura constituyente de las interfaces en React, los componentes.

Un componente forma parte de la columna vertebral de las interfaces en React, y está conformado por tres piezas que se complementan entre sí:

• Tenemos la estructura del componente, que normalmente se crea mediante lenguaje JSX.
• Por otro lado tenemos los estilos del componente, que configuran esta apariencia, aunque también puede depender del dispositivo, y que es la parte más visual o más estética de este componente.
• Por último, tenemos la pieza del comportamiento, que es el que configura las interacciones, el estado del componente y le da un poco de inteligencia e interacción a esta fracción de la interfaz. Es el que habilita por ejemplo la comunicación del propio usuario con lo que está viendo, y configura también las consecuencias que va teniendo cada una de estas acciones que se realizan.

Estos tres componentes van a ser la base de todo el desarrollo de interfaces con React.

JSX

Una vez entendida esa entidad y cómo trabajar con ella en React, podemos ver un poco más a fondo los conceptos con los que podemos trabajar dentro de JSX.

JSX va a ser el lenguaje para estructurar nuestros componentes, para definir sus partes, qué partes están dentro de otras, al lado de otras, etcétera, y cómo se comunican entre ellas.

De esta forma vamos a tener una capacidad extra, además de instanciar y colocar estos esos componentes, de introducir lógicas de comportamiento, tipo condicionales, tipo bucles, si queremos que un componente se muestre o se deje de mostrar, si queremos que un componente o una fracción de la interfaz se muestre varias veces de manera iterativa, etc.

Aunque aparentemente JSX nos va a parecer muy similar a HTML, realmente no lo es, ya que presenta unas características más avanzadas que con HTML no se nos prestan.

Se puede decir que es como haber traído HTML al mundo JavaScript con todas las capacidades que este lenguaje de programación nos da para jugar con estas estructuras.

Estilizado

El siguiente punto a tener en cuenta en el renderizado en React es el estilizado, que ha sido desde casi el principio una de las cuestiones más ambiguas cuando se trataba del desarrollo de aplicaciones con React.

Al no haber una opción estándar a elegir, surgieron bastantes líneas paralelas muy heterogéneas que resolvían este problema del estilizado.

Finalmente nos debemos quedar con la idea de que la manera más básica de estilizar estas aplicaciones creadas con React, puede ser simplemente la inclusión de hojas de estilo CSS normales y el juego con las clases para conectar y estilizar estos elementos que hemos definido con JSX.

También se puede considerar el uso de estrategias de nombrado de clases, ya que si queremos conservar la encapsulación que nos dan los componentes en muchos aspectos a la hora de estilizar, hay que hacer artificios como por ejemplo la nomenclatura de clases con la estructura BEM (bloque-elemento-modificador).

Renderizado dinámico

Por último, para acabar de aprovechar todas las capacidades que nos ofrece el renderizado con React, podemos entrar a analizar cómo se comportan estos renderizados en JSX de manera dinámica.

Podemos ver cómo jugar con estos bucles, condicionales, las referencias a componentes para la manipulación de los elementos nativos de HTML con ellos, etcétera.

Conclusión

Al final, con todos estos puntos vistos en detalle, podemos entender al 100% el valor que nos aporta React a la hora de renderizar nuestras interfaces.