Fundamentos de React

Los conocimientos previos necesarios para poder utilizar React los vamos a dividir en diferentes apartados.

Sistemas de diseño

Es interesante conocer los sistemas de diseño básicos, quizás empezando con algunos más tradicionales y acabando en con concreto los que se utilizan para el desarrollo de React.

Aquí vamos a ver una clara evolución desde unos sistemas de diseño más basados en páginas, que es al final como la web se comportaba y se estructuraba en el pasado, hasta el concepto de componentes.

Estos componentes acaban siendo en las aplicaciones actuales y basadas en casi cualquier framework que existe actualmente, la pieza fundamental que forma las interfaces.

Los componentes los vamos a encontrar siempre con una parte estructural, una parte de estilos y una parte de comportamiento, y al final van a ser cápsulas que se comportarán como una unidad independiente y se comunicarán con las otras cápsulas o componentes que tienen a su alrededor.

Referente a estos sistemas de diseño, encontramos un caso concreto de estudio algo más detallado, cómo es el Atomic Design, que es capaz de diferenciar en categorías estos componentes según como se agrupan entre ellos y la entidad que forma. Así acabamos teniendo átomos, moléculas, etcétera, para acabar conformando las páginas finales.

Un conocimiento básico de estos sistemas de diseño siempre nos va a ayudar a entender cómo funcionan estos frameworks modernos de desarrollo frontend.

JavaScript moderno

Como segundo apartado de estos fundamentos para comenzar a desarrollar con React, nos encontramos con que hay funcionalidades de JavaScript moderno que realmente nos van a ayudar de una manera muy importante cuando nos encontremos en situaciones concretas en el desarrollo.

Entre estas características podemos encontrar:

• Nuevas formas de sintaxis, cómo pueden ser las Arrow Functions.
• Estructuras como las clases, que se han introducido en React recientemente.
• Nuevas notaciones para las variables y las funciones como constantes.

Tenemos una serie de características que, aunque no pertenecen al JavaScript moderno, gracias a ellas el desarrollo en React es más viable y no se convierte en algo tan tedioso como podría llegar a ser.

Anatomía de React

Una vez tenemos estas bases más generales, podemos entrar a conocer la anatomía de React, para saber cómo se comporta por dentro y entender, a la hora de desarrollar, qué sucesos ocurren en el flujo y que nos sorprendan comportamientos extraños.

Al final el conocimiento de la anatomía y de qué partes componen React nos permiten saber cómo acaba pintando lo que vemos por pantalla y cómo actualiza esa información para que los cambios sean rápidos.

React tiene unas funcionalidades bastante interesantes, que son las que le han dado la principal popularidad, y conocerlas nos va a ayudar mucho a empezar a desarrollar de una manera más sencilla.

Ecosistema de React

Para acabar con estos fundamentos, nunca está de más, sobre todo en el caso de React, conocer el ecosistema que engloba a la propia librería.

React es una librería bastante concreta, bastante pequeña y muy focalizada en su objetivo principal, que es, el renderizado en pantalla. Por este motivo necesita la ayuda o el complemento de otras muchas librerías que ofrecen funcionalidades también necesarias para cualquier aplicación, como por ejemplo el enrutado o la gestión del estado de la aplicación.

Conociendo este ecosistema vamos a ser capaces de entregar una aplicación completa, robusta y con todas las capacidades cubiertas, aprovechando esta variedad de librerías que nos ofrece el ecosistema de React.