Qué es React?

React nos ayuda a crear interfaces mediante el uso de componentes reutilizables que gestionan su propio estado. Basándonos en componentes simples podemos crear interfaces complejas.

Creada por Jordan Walke, en 2010 con el fin de solucionar los problemas que tenía la empresa para poder generar código de fácil mantenimiento, cosa que el PHP que utilizaban en ese momento no les podía brindar

React es una de las librerías de Javascript más usadas para crear interfaces.

 

Pero... ¿qué es un componente?

Podemos ver a un componente como una porción de código independiente, reutilizable y con un comportamiento específico para la función que cumple.

 

JSX, la simplicidad de React

JSX es la sintaxis amigable con la que React ha conquistado a los desarrolladores web.

Sabemos que React se basa en la creación de componentes para armar interfaces, pero la manera nativa de crearlos usa una sintaxis algo compleja.

Ante ese problema, nace JSX, una extensión de JavaScript, la cual nos facilita la creación de los componentes mediante una sintaxis basada en etiquetas muy similar a HTML/XML.

El hecho de reemplazar funciones (React.createElement) con etiquetas similares a HTML (<button>) es uno de los motivos del porque React tiene una curva baja de aprendizaje.

 

Creemos un componente como ejemplo:

 

¿Por qué aprender React?

 

Herramientas Web más usadas

Es una de las herramientas más solicitadas por el mercado del desarrollo web y por quienes la usan.

Basándonos en los datos de la encuesta StackOverflow Developer Survey 2020, la cual es realizada a más de 65.000 desarrolladores alrededor del mundo, nos dice:

Herramientas web más usadas:

 

Segundo en la categoría de más usados del mercado, solo por detrás del que alguna vez fue el rey indiscutido de JavaScript en la web entre 2006 y 2012, jQuery.

Tecnología que lleva al menos unos 5 años en decadencia, pero aún sobreviven sus proyectos “legacy”. Se espera que cuando esos proyectos se actualicen, React finalmente supere a jQuery.

React es una de las herramientas basadas en JavaScript más utilizadas, teniendo en cuenta que ASP.NET está basado en C#.

Si esto no es suficiente, veamos sus puntos fuertes:

  • Es fácil de aprender, tiene una curva de aprendizaje baja
  • Cuenta con una sintaxis amigable
  • La respaldan una gran comunidad y el equipo de desarrollo de una empresa como Facebook
  • Cuenta con una excelente documentación
  • Genera código de fácil mantenimiento
  • Tiene una amplia cantidad de librerías que complementan a React y cubren sus falencias.

 

Complementos de React

React, al ser una librería, no cuenta con una gran cantidad de librerías o herramientas preinstaladas para crear páginas web como lo pueden tener los frameworks como Angular, Django, ASP.NET, etc.

Por eso, React necesita que se le instalen otras herramientas o librerías para cumplir ciertas tareas.

La ventaja de esto es que podemos reducir el tamaño de nuestro proyecto al solo instalar lo que necesitamos, a diferencia de los frameworks.

 

React Router

Cuando alguien empieza a aprender React, por excelencia esta es la primera librería que aprende a sumarle a sus proyectos.

React Router sirve para poder crear Single Page Applications, que resumidamente son páginas web de “una sola página” que tienen el objetivo de dar una experiencia de usuario más fluida.

 

Redux

Un estándar del mercado, Redux es la librería con la que se suele gestionar el estado de las aplicaciones en React.

El estado de una aplicación es la información mutable que almacena la misma en cualquier momento de ejecución.

Esa información suele verse reflejada en la interfaz. El usuario, al interactuar con la misma (por ejemplo, al tocar un botón), cambia el estado y como resultado la interfaz también lo hace.

Si bien React ya viene con herramientas para gestionar el estado de las apps, estas no son del todo escalables dado que cuando la aplicación empieza a crecer, se empieza a perder control del estado y el código se hace difícil de mantener.

Ante esta problemática, aparece Redux. Nos ayuda a crear código de fácil mantenimiento y a manejar el estado de una manera más transparente.

 

Next.js

Next.js, el framework de React.

El framework de orgullo argentino, creado por Vercel, que recientemente rompió el mercado y está siendo usado por grandes empresas alrededor del mundo como (Netflix o Github).

Next.js tiene mucho apoyo de la comunidad, de grandes empresas y de referentes del mundo React, como lo es Jordan Walke, el creador de React. Next.js apunta a ser el futuro del desarrollo React.

El framework que hizo que React dejara de ser una librería para ahora tener todo un entorno de desarrollo (Router, Babel, Webpack, etc) que nos facilita aún más la creación de potentes aplicaciones dinámicas orientas al Server Side Rendering en React.

 

Gatsby

Una herramienta basada en React y GraphQL que ayuda a generar fácilmente sitios web estáticos y optimizados.

 

Styled Components

Una librería que nos permite declarar los estilos CSS de los componentes al mismo tiempo que los creamos.

 

¿Qué empresas usan React?

 ¿Tenés una idea y necesitas un equipo de IT para desarrollarlo?

En CDA te asesoramos y preparamos un equipo de profesionales TI de acuerdo a tus necesidades. ¡Contactanos!