La compañía Facebook, antes de adquirir a WhatsApp, Instagram y cambiar su nombre a Meta, creó una librería de JavaScript para optimizar recursos y solucionar vulnerabilidades informáticas. Nos referimos a React, que ahora encabeza las encuestas como la biblioteca más usada por programadoras y programadores Full Stack.
React es la primera opción que usan las empresas y developers para desarrollar la parte visual (es decir, el frontend) de sus aplicaciones y páginas web. Con React se crean interfaces de usuario (conocido como “UI” por su nombre en inglés, user interface) basándose en dos conceptos: los componentes y el estado de los elementos escritos en el código.
¿Qué empresas usan React?
Así como muchas compañías de renombre usan Node, nos encontraremos con un amplio listado de empresas que usan React para crear la UI de sus productos y servicios digitales. Muchas de ellas son plataformas que seguro conoces por su amplio uso e influencia en diferentes industrias: Netflix, Airbnb, Dropbox, Yahoo, Atlassian, WordPress, eBay, IMDb, PayPal, Tesla… y así pudiésemos seguir, con el riesgo de dejar a alguna por fuera.
Este es el impacto, alcance y confiabilidad de React en la programación, así que hoy exploraremos los mejores ejemplos de plataformas web que cobraron vida con esta librería frontend.
Es imposible no empezar esta lista con la plataforma que lo empezó todo. Facebook, como producto, fue precursor de React para un desarrollo frontend mucho más ágil y gestionable.
Meta, como empresa, sigue usando React para el desarrollo y mantenimiento de la versión web de Facebook, como producto es enorme. No solo tenemos la versión de perfiles personales, también tenemos la versión de perfiles de empresas y las diferentes opciones de mensajería entre un tipo de perfil y otro, además de la publicidad. Los anuncios son la base del modelo de negocio de Meta, que les permite ser rentable y que, a su vez, permite a las compañías anunciantes llegar a más personas.
En el código la estructuración de todas estas funcionalidades se logra en buena parte con React. Meta usa esta librería en todos sus otros productos con una versión web, que serían en la actualidad: Instagram, WhatsApp y Threads.
X (antes conocido como Twitter)
React está basado en componentes y esto permite a los equipos de desarrollo reutilizar el código. Podemos imaginarlo como la creación de plantillas, que pueden ser rellenadas con información diferente, conservando el mismo estilo.
X es una de las aplicaciones web que usa React para la creación de sus componentes. Por ejemplo, el listado de Tendencias está compuesto por componentes. Cada uno incluye la sección en la que el hashtag, frase o palabra clave es popular, el nombre de este elemento particular (al que se le puede dar clic) y la cantidad de posts que le hace mención.
Gracias a React, este listado de temas en tendencia se actualiza cada cierto tiempo de cara al usuario y logra una mejor interactividad para informar sobre lo que ocurre al instante, pues tiene la funcionalidad de personalizarse según las cuentas a las que se sigue, los intereses y la ubicación de la persona usuaria.
Los componentes permite que, por ejemplo, a nivel de diseño y desarrollo frontend, si el texto se alinea a la izquierda dentro de un componente y aumenta el tamaño del margen en píxeles, estos cambios se reflejarán en todos los componentes del listado. Este es un ejemplo de cómo React agiliza la creación de interfaces de usuario.
IMDb
A simple vista, IMDb no pareciera requerir una actualización constante, pero es una plataforma que alcanzó 200 millones de visitantes únicos mensuales en 2022. En ella, no solo se ofrece la información estática sobre una producción audiovisual, también hay interactividad de usuarios, votaciones online, artículos de opinión y mucho más.
Por todas estas razones, el equipo de desarrollo de IMDb usa React para ofrecer una interfaz que no solo sea atractiva a la vista, sino que no se quede congelada por la alta cantidad de contenido multimedia que carga en la página.
¿Qué aplicaciones usan React Native?
Aprender programación frontend con React te da la ventaja si quieres orientar tu carrera al desarrollo móvil. React Native es un framework basado en JavaScript que se especializa en mobile development para sistemas operativos Android y iOS, recordando que React, en cambio, está diseñado para crear plataformas y aplicaciones web.
Así que si te preguntas qué lenguaje de programación deberías aprender, JavaScript te abrirá la puerta a oportunidades profesionales de gran proyección en el futuro. Es el primer paso que debes tomar para trabajar en desarrollo web con React o desarrollo móvil con React Native.
Mencionaremos los mejores ejemplos de algunas aplicaciones creadas con el marco de trabajo de React Native, según su documentación oficial.
Microsoft Outlook para móvil
Microsoft Inc. vio un gran potencial en React Native y desarrolló una API especializada para poder usar React Native en la creación de aplicaciones de escritorio en sistemas operativos. Ahora los equipos de desarrollo pueden usar React Native para Windows y macOS, teniendo la ventaja adicional de poder crear apps para otros dispositivos, como Xbox, tablets, e incluso laptops plegables.
Microsoft aprovecha la potencia de React Native para ofrecer la mejor experiencia de cliente en algunas de sus aplicaciones más conocidas, tanto en dispositivos mobile como apps de escritorio.
Outlook no es la única, Microsoft Office, Microsoft Teams, Xbox Game Pass e incluso Skype usan React para optimizar su mantenimiento y rendimiento.
Messenger para escritorios
En mayo del 2023, Meta confirmó la migración exitosa de su app de escritorio desde Electron a React Native de la versión de Messenger como aplicación de escritorio. Este fue un proceso de desarrollo de producto que duró dos años y que revitalizó el rendimiento de la aplicación.
El marco de trabajo con el que se desarrolle el frontend de una app es sumamente importante, por ejemplo, en este caso notaron que el tiempo de carga se redujo en un 50 por ciento para la gran mayoría de usuarios, mientras que los bloqueos de aplicaciones nativas se disminuyeron en un 15 por ciento en macOS y en un 67 por ciento en Windows.
Una buena interfaz de usuario está íntimamente relacionada con una buena experiencia de usuario, otra disciplina en desarrollo conocida como “UX”, siglas en inglés de User Experience.
Además, al adquirir Instagram, Meta integró la función de mensajería privada con la aplicación de Messenger, logrando toda la reestructuración visual con React Native.
Discord
En este punto, seguro te has dado cuenta de que la mensajería instantánea es un servicio que construye su UI con React o React Native casi como una norma. Discord es una plataforma orientada a comunidades digitales que usa las tecnologías de JavaScript para darle forma a un producto que funciona de manera sincronizada en diferentes dispositivos, desde una pestaña en el navegador hasta una aplicación de escritorio.
Discord es una app pionera en “VoIP”, o en otras palabras, en hacer llamadas de voz a través de la red; pero esto no es lo único que ofrece, también usa la mensajería abierta en espacios virtuales (conocidos como “servidores”), mensajería privada, intercambio de archivos, streaming de pantallas e incluso juegos multijugador integrados dentro de una llamada grupal.
Con 175 millones de personas usuarias activas mensuales en 2022. Discord es compatible con dispositivos macOS, Android, Windows, Linux, iPadOS y, por supuesto, navegadores (aunque en estos, el protagonista no es React Native, sino React). Al reunir todas estas condiciones, Discord optó por usar tecnologías de código abierto, que permite identificar fallas y vulnerabilidades con mayor rapidez.
React, la primera opción para las nuevas startups
Muchas de las compañías del listado de Fortune 500 y nuevas startups eligen React como tecnología para el desarrollo de sus interfaces de usuario. Todas ellas vienen de diferentes sectores, desde Puma, en zapatillas y accesorios, hasta Brex, en servicios financieros.
El número de descargas de React en NPM evidencia el constante uso de esta tecnología para el desarrollo de productos y servicios digitales, ¿a qué esperas para empezar a aprender React?
¿Cómo crear mi primer proyecto en React?
Existen muchas formas en las que puedes iniciar tu proyecto en React, puedes guiarte por la documentación oficial de la librería o apuntarte a un bootcamp de programación que te ofrezca la mentoría y orientación de un equipo docente cualificado para enseñarte las mejores prácticas y formas de construir cosas increíbles con código.
Esta vez, te enseñaremos cómo empezar usando Node y Next:
Primero que nada, instala desde cero o asegúrate de tener instalada la última versión de Node.js. Necesitamos este entorno de servidor para ejecutar JavaScript y la versión más reciente de React.
En la terminal de tu editor de código (o PowerShell, si lo prefieres), usa el comando "node -v" para verificar la versión de Node.js que tengas instalada.
Después, para darle vida a un nuevo proyecto, crea una carpeta en tu ordenador. Allí almacenarás tu idea de ahora en adelante. Posiciónate en esa carpeta y ábrela para instalar las subcarpetas que se crearán automáticamente para el proyecto.
Puedes abrir directamente con clic derecho y presionando “Abrir en terminal” o “abrir en Code”
Puedes usar la terminal de Visual Studio Code para buscar la ruta de la carpeta o la terminal del sistema operativo de tu ordenador. Una vez allí, deberás introducir el comando “npx create-next-app@latest”.
Next.js es otro framework que necesitamos para desarrollar aplicaciones web basadas en React. En un principio, pueden parecer demasiados programas por instalar, pero ten en cuenta que en desarrollo web se puede lograr lo mismo de muchas formas.
En esta ocasión, usaremos la terminal de Windows PowerShell.
Sigue las opciones marcadas; por ahora, no recomendamos instalar TypeScript, ESLint, Tailwind CSS o personalizar la importación de alias. Sigue el ejemplo anterior como guía. Siéntete libre de nombrar a tu proyecto como tú quieras, hemos elegido “my-bootcamp”.
Ahora puedes abrir el proyecto en tu editor de código. Verás la magia de todos los archivos que se instalarán dentro de tu nueva carpeta.
En el caso de Visual Studio Code, activa los NPM Scripts para poder ejecutar “build”.
Al terminar, te mostrará un mensaje como este.
Después podrás presionar “start”, lo que iniciará el servidor local en una pestaña de tu navegador predeterminado. Normalmente sigue la ruta http://localhost:3000
¡Et voilà! Habrás creado la carpeta que almacenará tu primer proyecto en React y lo tiene todo para soportar el código de tu proyecto.
¿Dónde aprender React?
El 42.87% de los perfiles especialista en programación que participaron en la encuesta de Stack Overflow usa React, encabezando la lista como la librería más popular. Ya has visto el número incalculable de negocios y profesionales que la eligen para desarrollo el diseño de interfaces de usuario en sus aplicaciones y portales web, ¿qué estás esperando para aprender React?
El mejor lugar para formarte como profesional del desarrollo web es el Bootcamp de Programación Web, en el que el crecimiento integral de nuestro alumnado es nuestra prioridad. En HACK A BOSS conseguirás habilidades técnicas y blandas que te diferenciarán en el sector tecnológico.
⤵️ ¡Completa el formulario debajo de este artículo para recibir más información!
