React Hooks
En este taller aprenderás la nueva forma para controlar el estado en React sin necesidad de tener que...
Aprende los conceptos más importantes que debes conocer sobre el renderizado en React, lo que te ayudará a comprender mejor el funcionamiento de este framework a la hora de trabajar con el mismo.
Tabla de contenidos
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í:
Estos tres componentes van a ser la base de todo el desarrollo de interfaces con React.
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.
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).
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.
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.
También te puede interesar
En este taller aprenderás la nueva forma para controlar el estado en React sin necesidad de tener que...
Conoce qué herramientas se pueden utilizar con React Native, tanto propias como de terceros, para optimizar el flujo de trabajo y encontrar...
Aprender a crear aplicaciones web sencillas basadas en React desde cero y empieza a dominar una de las...