Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Renderizado en React

Alvaro YusteTorregrosa
  • Escrito por Alvaro YusteTorregrosa el 05 de Agosto de 2019
  • 2 min de lectura | Desarrollo Web
Renderizado en React
El reproductor de video será cargado en breves instantes.

Conoce 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.

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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 8 cursos:

  • Curso de Polymer
  • Curso de React JS
  • Optimización Web en el Navegador

y 5 cursos más!

Duración: 40 horas y 47 minutos

Herramientas de desarrollo para React Native

Herramientas de desarrollo para React Native

Desarrollo móvil

27 de Junio de 2019

Conoce qué herramientas se pueden utilizar con React Native, tanto propias como de terceros, para optimizar el flujo de trabajo y encontrar posibles errores.

Curso de React para principiantes

Curso de React para principiantes

curso

Con este curso aprenderás:

  • Conocer los fundamentos teóricos de React.
  • Empezar un proyecto con React desde cero.
  • Renderizar y estilizar componentes sencillos basados en JSX.

Duración: 5 horas y 44 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars