Has trabajado y ahora tienes un conocimiento sólido de la biblioteca React.
Además de eso, tiene un buen conocimiento de JavaScript y está poniendo sus características más útiles para usar dentro de su código React.
Has progresado mucho ... pero ahora, ¿qué haces?
¿Cómo se cierra la brecha entre conocer los fundamentos de React y convertirse en un desarrollador profesional?
Muchos desarrolladores se encuentran con este problema cuando alcanzan esta etapa intermedia de aprendizaje de React o cualquier otra biblioteca de JavaScript. Conocen la mayor parte de la biblioteca en sí, así como el JavaScript para usarla de manera efectiva, pero no saben cuál es el siguiente paso a dar.
Por qué debería crear aplicaciones
Una vez que haya aprendido los conceptos básicos de React, debe sentirse cómodo creando aplicaciones con las habilidades que ha adquirido. Esta práctica es fundamental para ser un desarrollador de React eficaz: saber cómo crear aplicaciones por su cuenta y utilizar las herramientas adecuadas en el ecosistema de React para hacerlo.
Pero, ¿qué aplicaciones deberías crear con React para mejorar tu habilidad como desarrollador?
En este artículo, veremos 5 tipos diferentes de aplicaciones que debería considerar crear después de la aplicación básica de tareas pendientes. El gran beneficio de crear aplicaciones es que, una vez implementadas, pueden vincularse a su cartera como una forma poderosa e inmediata de mostrar a los empleadores su experiencia.
Para cada tipo de aplicación, cubriré ejemplos populares que puede usar como inspiración, las herramientas que recomendaría para crear cada función, junto con una breve demostración de dicha aplicación que he creado personalmente con React.
Cómo comenzar a crear aplicaciones con React
A diferencia del aprendizaje de React, donde puedes encontrar docenas de artículos para profundizar en cualquier concepto relacionado, el proceso de construcción de una aplicación es en gran medida una actividad autodirigida sin mucha orientación.
Si está comenzando a crear aplicaciones por su cuenta, le recomendaría buscar artículos que le enseñen los conceptos básicos de la creación de una aplicación y profundizar en el código fuente de la aplicación que proporcionan. Incluso el proceso de leer el código en sí lo convertirá en un mejor desarrollador.
Si estos ejemplos parecen demasiado desalentadores para que los construya usted mismo, recuerde lo que sabe como desarrollador de React: dividir las aplicaciones en componentes componibles. Cada aplicación debe construirse pieza por pieza, componente por componente. Concéntrese en desarrollar una característica a la vez. Con la práctica, obtendrá una mejor idea de qué herramientas necesitará para cada función, así como los patrones comunes detrás de la creación de aplicaciones en general.
Nota: Una idea errónea que tuve cuando comencé a construir aplicaciones reales como estas fue que tenía que construir un backend / API completo con Node o Python para obtener la funcionalidad que necesitaba. No es necesario que lo haga. Busque potentes tecnologías sin servidor como Firebase, AWS Amplify o Hasura que le brindan un backend completo listo para usar sin la necesidad de crear e implementar uno usted mismo. Invierta en herramientas que lo hagan más productivo y le ahorren tiempo.Cree una aplicación de redes sociales
Si tuviera que recomendar solo una aplicación para que la agregue a su cartera, sería una aplicación de redes sociales. Twitter, Facebook e Instagram son bastante sofisticados e incluyen un número cada vez mayor de funciones para mantener a los usuarios interesados. Además de eso, es el tipo de aplicación que probablemente conozca mejor sobre cómo debería funcionar.
Hay una serie de características comunes entre casi todas las aplicaciones de redes sociales:
- la capacidad de los usuarios para realizar publicaciones con texto y / o archivos multimedia,
- una transmisión en vivo de esas publicaciones,
- permitir a otros usuarios dar me gusta y comentar publicaciones,
- así como la autenticación de usuarios.
Y una vez que lo haya hecho, puede agregar perfiles para cada uno de sus usuarios, donde pueden personalizar su cuenta y administrar los usuarios que siguen.
Ejemplos de aplicaciones: Instagram, Twitter, Snapchat, Reddit
Tecnologías a utilizar:
- Cree la aplicación React o Next.js para crear una interfaz de usuario dinámica de publicaciones, me gusta y mensajes
- Firebase, AWS Amplify o Hasura (usando GraphQL con suscripciones) para datos en tiempo real
- Funciones sin servidor como AWS Lambda o Firebase Functions para notificaciones
- Almacenamiento en Cloudinary o Firebase para cargar imágenes o videos
Cree una aplicación de comercio electrónico
Elija algunos de sus sitios favoritos y le garantizo que al menos uno de ellos tiene una aplicación de comercio electrónico incorporada, incluso si es solo una pequeña tienda. Las aplicaciones de comercio electrónico son omnipresentes y apuesto a que se le pedirá que cree una en algún momento de su carrera como desarrollador.
Es tentador construir una plataforma de comercio electrónico impresionante y a gran escala como Amazon, pero recomendaría trabajar en algo más pequeño y más enfocado.
En lugar de un mercado que ofrezca todo a todas las personas, opte por una industria que le interese. Por ejemplo, si le gustan los artículos para el hogar, puede echar un vistazo a lo que Crate & Barrel o Williams-Sonoma han construido para sus sitios.
Aparte de los productos, las aplicaciones de comercio electrónico pueden proporcionar un servicio a los consumidores. Si se trata de un servicio que se proporciona localmente, se podría agregar un mapa interactivo a la aplicación para que el proveedor de servicios y el cliente conozcan la ubicación de los demás. Me vienen a la mente aplicaciones de entrega de alimentos como UberEats y Doordash, que requieren la ubicación de la persona que ordena la comida.
Independientemente de lo que se venda, ya sea físico o virtual, cada aplicación de comercio electrónico consistirá en un escaparate con los detalles del producto o servicio. Si los usuarios pueden comprar varios productos a la vez, debe tener un carrito de compras donde los usuarios puedan administrar los productos que desean comprar.
Finalmente, cada aplicación de comercio electrónico necesita un proceso de pago en el que los usuarios pueden comprar sus productos de forma anónima o una vez que están autenticados.
Ejemplos populares: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy
Tecnologías a utilizar:
- Cree la aplicación React o Gatsby para el escaparate y exhiba productos
- Stripe con el paquete react-stripe-elements para manejar el procesamiento de pagos
- Función sin servidor como Netlify / AWS Lambda para manejar el proceso de pago
- Algolia para la búsqueda de productos ultrarrápida
- Snipcart para crear fácilmente un carrito y administrar los productos del carrito
Cree una aplicación de entretenimiento
Esta es la más amplia de todas las categorías. ¿Qué quiero decir con entretenimiento? Una aplicación que se centra en un determinado tipo de medios. Esto podría ser películas, podcasts o música, por nombrar algunos.
Algunos buenos ejemplos de esto, respectivamente, serían Netflix, Audible y Soundcloud o Spotify. Si incluye arte o diseño en esta categoría, podríamos agregar sitios como Behance o Dribbble a la lista.
Lo interesante de esta categoría es que muchas aplicaciones de entretenimiento bordean las aplicaciones de redes sociales. Por ejemplo, una aplicación como Tiktok, que presenta videos cortos e imaginativos, está impulsada por una alta participación del usuario. Otra aplicación como YouTube se centra en las interacciones del usuario a través de me gusta, comentarios y suscripciones.
Piense en qué tipo de medio o entretenimiento le interesa más y vea si puede construir una plataforma simple a su alrededor, donde los usuarios puedan iniciar sesión y guardar el contenido que les gusta. Después de eso, busque agregar elementos sociales que permitan agregar comentarios, me gusta y compartir contenido con otros usuarios en la plataforma.
Ejemplos populares: YouTube, Netflix, Audible, Spotify, Tiktok
Tecnologías a utilizar:
- Cree la aplicación React, Next.js o Gatsby para crear la interfaz de usuario de la aplicación
- npm package react-player para reproducir medios
- Almacenamiento en Cloudinary o Firebase para carga de medios
- Algolia para buscar medios por nombre (es decir, pista de audio, video, película, etc.)
Cree una aplicación de mensajería
Las aplicaciones de mensajería son enormes. Es probable que tenga un servicio de mensajería gratuito como WhatsApp o Viber en su teléfono, o uno integrado en su plataforma de redes sociales como Facebook Messenger. Los servicios como Intercom con mensajería instantánea también están disponibles como aplicaciones web para que las empresas puedan brindar soporte al cliente inmediato a sus usuarios.
Cualquier aplicación de mensajería va a consistir en una conversación con dos o más personas donde los mensajes se envían en tiempo real. Similar a la aplicación de redes sociales, recomendaría un servicio como Firebase o Hasura que transporta datos a través de WebSockets para que los mensajes se muestren inmediatamente en la conversación.
La mayoría de las aplicaciones de mensajería se encuentran en dispositivos móviles o tabletas. Si este no es su primer clon de aplicación, esta es una gran oportunidad para ir más allá de la web y crear una aplicación móvil con React Native. Mejor aún, podría crear una aplicación de mensajería web y móvil simultáneamente con un paquete como React Native Web.
Ejemplos populares: WhatsApp, Viber, Discord, Messenger, Slack
Tecnologías a utilizar:
- React Native o React Native Web para crear una aplicación móvil o una aplicación híbrida (web + móvil)
- Firebase, AWS Amplify o Hasura (mediante suscripciones GraphQL) para enviar mensajes en tiempo real
- Almacenamiento en la nube o Firebase para enviar mensajes con contenido de imagen o video
- npm package emoji-mart para un elegante selector de emoji similar a Slack para que los usuarios lo incluyan en sus mensajes
Cree una aplicación de productividad
Este es probablemente el tipo de aplicación más fácil para comenzar, considerando que existen muchos tutoriales de aplicaciones básicas de productividad. Cuando hablo de aplicaciones de productividad, me refiero a aplicaciones para tomar notas, aplicaciones para administrar equipos y listas de tareas. En términos generales, cualquier cosa que le ayude a realizar una determinada tarea oa ser más productivo.
Lo bueno de crear una aplicación de productividad en primer lugar es que proporciona una buena introducción a la creación de aplicaciones debido a la relativa simplicidad de muchas de sus funciones.
Puede comenzar con algo simple, como un editor de texto para escribir texto formateado con rebajas fácilmente y luego expandirlo. Luego agregue la capacidad de guardar texto como archivos individuales en su computadora. Después de eso, una función para exportar esa rebaja como HTML para escribir correos electrónicos formateados.
Para comenzar a crear una aplicación de productividad, pregunte qué funciones podría tener una aplicación para facilitar su programación diaria y continúe desde allí.
Ejemplos populares: Todoist, Notion, Things, etc.
Tecnologías a utilizar:
- Cree la aplicación React para web o React Native para dispositivos móviles
- npm package react-markdown para mostrar el descuento en la interfaz de usuario de su aplicación
- npm paquete react-codemirror2 para escribir código en sus notas
- npm package react-draggable para reordenar el contenido de la lista haciendo clic y arrastrando
Buena suerte con su viaje de creación de aplicaciones y nos vemos en el próximo artículo.
¿Quieres convertirte en un maestro de JS? Únase al JS Bootcamp 2020
Seguir + decir hola! ? Twitter • codeartistry.io