Proyectos desarrollados con #React

APP Contador de Calorías con ReactJS y TypeScript APP Contador de Calorías con ReactJS y TypeScript

Una aplicación desarrollada con React, TypeScript y Tailwind CSS, junto con varios hooks como useState, useEffect, useMemo, custom hooks y useReducer. El objetivo principal de esta aplicación es proporcionar un control detallado sobre las calorías consumidas y quemadas a lo largo del día.

👉 Código Aquí:   


APP Generador de contraseñas con ReactJS APP Generador de contraseñas con ReactJS

Aplicación desarrollada con React que te permite crear contraseñas seguras de hasta 32 caracteres de longitud. Utilizando tecnologías como useRef, useState, useEffect y react-toastify, esta herramienta te ofrece una forma fácil y segura de generar contraseñas que incluyen una combinación de letras minúsculas, mayúsculas, símbolos y números.

👉 Código Aquí:   


APP Gestión de Pacientes con ReactJS - TypeScript y Zustand APP Gestión de Pacientes con ReactJS - TypeScript y Zustand

Una aplicación desarrollada con React, TypeScript, react-toastify, React Hook Form, Zustand y Tailwind, que ofrece una gestión ágil de información de pacientes mediante formularios. Permite visualizar, editar y eliminar pacientes con facilidad, mientras notifica al usuario sobre cada acción realizada mediante alertas de react-toastify.

👉 Código Aquí:   


Aplicación Full Stack: CRUD con ReactJS, Laravel 10, MySQL y Bootstrap 5 🚀 Aplicación Full Stack: CRUD con ReactJS, Laravel 10, MySQL y Bootstrap 5 🚀

CRUD Full Stack con ReactJS, Laravel 10 y MySQL es un proyecto web completo que combina tecnologías modernas en el frontend y backend. Utiliza ReactJS para una interfaz dinámica, Laravel 10 para la lógica de negocio robusta, y MySQL para la persistencia de datos confiable.

👉 Código Aquí:   


Aplicación de Gestión de Contactos CRUD Full Stack con ReactJS, PHP y MySQL 🥇 Aplicación de Gestión de Contactos CRUD Full Stack con ReactJS, PHP y MySQL 🥇

La aplicación de Gestión de Contactos CRUD Full Stack con React, PHP y MySQL es un sistema completo para administrar contactos de manera eficiente. Permite realizar operaciones CRUD (Crear, Leer, Actualizar y Eliminar) sobre una base de datos MySQL utilizando un backend desarrollado en PHP.

👉 Código Aquí:   


Aprende a Dominar el Método map en ReactJS Aprende a Dominar el Método map en ReactJS

Este proyecto es una introducción práctica al uso del método map en React.js. A través de este ejemplo, aprenderás cómo utilizar el método map para iterar sobre arrays y renderizar listas de elementos en tus componentes de React.

👉 Código Aquí:   


Aprendiendo a consumir una API con ReactJS y Fetch 🔥 Aprendiendo a consumir una API con ReactJS y Fetch 🔥

Proyecto de ReactJS se enfoca en el aprendizaje de consumo de API mediante la implementación de prácticas avanzadas de React. Exploramos técnicas de solicitud, manejo de datos y renderizado dinámico para crear una experiencia interactiva y fluida con datos externos.

👉 Código Aquí:   


Buscador de Clima con ReactJS yTypeScript Buscador de Clima con ReactJS yTypeScript

Esta herramienta utiliza API's para obtener datos meteorológicos actualizados y presenta una interfaz intuitiva para que los usuarios puedan buscar el clima de cualquier ubicación. Además, se implementan Custom Hooks para optimizar la gestión de estados y la reutilización de lógica en la aplicación.

👉 Código Aquí:   


CRUD Full Stack con NodeJS, Express, MySQL API REST y ReactJS 🚀 CRUD Full Stack con NodeJS, Express, MySQL API REST y ReactJS 🚀

Es una aplicación web completa (full stack) que emplea tecnologías de punta en el desarrollo web. Utiliza Node.js y Express para construir una API RESTful que se comunica con una base de datos MySQL.

👉 Código Aquí:   


CRUD Full Stack con ReactJS - TypeScript(TS) - PHP - MySQL y Bootstrap 5 CRUD Full Stack con ReactJS - TypeScript(TS) - PHP - MySQL y Bootstrap 5

Proyecto que combina ReactJS y TypeScript para crear un formulario que se comunica con un servidor PHP y una base de datos MySQL. Proporciona operaciones CRUD (Crear, Leer, Actualizar, Borrar) para una gestión eficiente y segura de los datos del usuario.

👉 Código Aquí:   


Calculadora de Propinas con ReactJS y TypeScript(TS) Calculadora de Propinas con ReactJS y TypeScript(TS)

Utilizando Tailwind para un diseño moderno. Maneja estados con useState y optimiza el rendimiento con useMemo y useCallback. Incluye un custom hook para mejorar la eficiencia. Permite agregar nuevas órdenes, ajustar cantidades, agregar propinas y calcular el subtotal y total. Con TypeScript, se asegura la integridad del código. Ofrece una solución completa y robusta para gestionar transacciones eficientemente.

👉 Código Aquí:   


Cambiar de modo Claro/Oscuro en ReactJS Cambiar de modo Claro/Oscuro en ReactJS

Implementación en ReactJS para alternar entre modos claro y oscuro, permitiendo a los usuarios personalizar la apariencia de la aplicación según sus preferencias lumínicas. Se utilizarán estados globales, componentes dinámicos y gestión de estilos CSS para lograr la funcionalidad deseada.

👉 Código Aquí:   


Contador de caracteres en un área de texto utilizando React Contador de caracteres en un área de texto utilizando React

Consiste en desarrollar un contador de caracteres que monitorea y muestra en tiempo real la cantidad de caracteres ingresados en un área de texto. Utilizando componentes de React, se crea una interfaz dinámica que actualiza el recuento de caracteres a medida que el usuario escribe.

👉 Código Aquí:   


Control de Checkbox en ReactJS (multicheckbox) Control de Checkbox en ReactJS (multicheckbox)

La aplicación React maneja el estado de las frutas y las seleccionadas con useState. Define funciones para cambiar estados de checkboxes, seleccionar/deseleccionar todas las frutas y obtener un resumen. Renderiza una lista de frutas con checkboxes y muestra las seleccionadas con un resumen. Incluye un botón para marcar/desmarcar todas las frutas.

👉 Código Aquí:   


Cotizador de Préstamos en ReactJS 😱 Cotizador de Préstamos en ReactJS 😱

Desarrollando un cotizador de préstamos en ReactJS, inspirado en el curso 'JavaScript Moderno: Guía Definitiva - Construye +20 Proyectos' impartido por el profesor Juan Pablo De la Torre Valdez. Este curso es altamente recomendado para aquellos que deseen dominar las últimas tecnologías de desarrollo web.

👉 Código Aquí:   


Creando un Cronómetro en ReactJS Creando un Cronómetro en ReactJS

El proyecto consiste en desarrollar una aplicación web que utiliza React para crear un cronómetro funcional. Utiliza componentes, estado y eventos de React para mostrar y controlar el tiempo transcurrido, permitiendo iniciar, detener y reiniciar el cronómetro de manera interactiva.

👉 Código Aquí:   


Crear - Listar y Eliminar Tareas con ReactJS 🤯 Crear - Listar y Eliminar Tareas con ReactJS 🤯

Crear una aplicación de gestión de tareas con ReactJS que permita a los usuarios agregar nuevas tareas, listar las tareas y poder eliminar cualquier tarea.

👉 Código Aquí:   


Crear un Buscador en tiempo real en ReactJS 🥇 Crear un Buscador en tiempo real en ReactJS 🥇

Desarrollar un buscador en tiempo real utilizando ReactJS para buscar y filtrar contenido dinámicamente en una aplicación web, simplificando la gestión de búsqueda y la búsqueda avanzada.

👉 Código Aquí:   


Crear un Contador con Zustand en ReactJS Crear un Contador con Zustand en ReactJS

Este proyecto es un ejemplo de cómo crear un contador con Zustand en React, manipulado el estado de ciertas variables, como contador, y mostrarlo en pantalla.

👉 Código Aquí:   


Cómo Consumir una API en ReactJS y TypeScript Cómo Consumir una API en ReactJS y TypeScript

Guía práctica para aprender a consumir APIs en aplicaciones web utilizando ReactJS y TypeScript. Proporciona ejemplos claros y concisos de cómo realizar solicitudes HTTP, manejar respuestas y mostrar datos en la interfaz de usuario utilizando estas tecnologías modernas.

👉 Código Aquí:   


Cómo Consumir una API usando Zustand en ReactJS Cómo Consumir una API usando Zustand en ReactJS

Este proyecto demuestra cómo utilizar Zustand en React para consumir un servicio de API REST. Zustand es una biblioteca que facilita el manejo de estados globales en React, permitiendo acceder y gestionar variables de estado globales de manera eficiente en cualquier parte de la aplicación.

👉 Código Aquí:   


Cómo Enviar Formularios desde ReactJS hacia PHP y de PHP a MySQL Cómo Enviar Formularios desde ReactJS hacia PHP y de PHP a MySQL

Proyecto que se centra en la creación de un formulario en ReactJS que permita a los usuarios enviar datos a un servidor PHP y de PHP a MySQL. A través de esta integración, se busca facilitar la comunicación entre el front-end y el back-end, permitiendo el procesamiento y almacenamiento de la información proporcionada por los usuarios de manera eficiente y segura.

👉 Código Aquí:   


Cómo Enviar Formularios en ReactJS sin Reenvíos Indeseados 👩‍💻 Cómo Enviar Formularios en ReactJS sin Reenvíos Indeseados 👩‍💻

Desarrolla un componente en React que posibilita el envío de formularios sin recargar la página, evitando reenvíos no deseados. Implementa técnicas de manejo de estado y eventos asíncronos para mantener una interfaz fluida mientras los datos se envían al servidor de forma eficiente y sin interrupciones.

👉 Código Aquí:   


Cómo Marcar la opción de un menu en ReactJS Cómo Marcar la opción de un menu en ReactJS

Proyecto en ReactJS busca permitir a los usuarios marcar opciones de menú de forma interactiva. Implementa eventos de selección para resaltar visualmente la opción elegida, mejorando la usabilidad y la experiencia del usuario en la navegación del menú de la aplicación.

👉 Código Aquí:   


Cómo Subir múltiples imagenes desde un formulario de React hacia PHP 🚀 Cómo Subir múltiples imagenes desde un formulario de React hacia PHP 🚀

Descubre cómo enviar múltiples imágenes de forma eficiente desde tu aplicación React a un servidor PHP con este tutorial completo! Aprende los pasos clave para implementar la carga de imágenes desde un formulario React, aprovechando la potencia de PHP para procesar y almacenar tus archivos visualmente atractivos.

👉 Código Aquí:   


Cómo capturar el valor de un select option en ReactJS Cómo capturar el valor de un select option en ReactJS

Capturar y gestionar dinámicamente las selecciones de opciones dentro de un elemento 'select' en una aplicación ReactJS, empleando eventos onChange para actualizar el valor seleccionado y ofrecer una experiencia de usuario interactiva y receptiva.

👉 Código Aquí:   


Cómo funciona el hook useRef en ReactJS Cómo funciona el hook useRef en ReactJS

En términos simples, useRef se utiliza para acceder y manipular directamente elementos del DOM desde un componente de React, sin tener que recurrir a consultas o manipulaciones directas del DOM.

👉 Código Aquí:   


Cómo obtener valor de multiples CheckBox seleccionados en ReactJS Cómo obtener valor de multiples CheckBox seleccionados en ReactJS

El proyecto se enfoca en la implementación de una interfaz en React.js que permite a los usuarios seleccionar múltiples opciones a través de CheckBox. Se destaca cómo capturar y gestionar el estado de estas selecciones, almacenando los valores seleccionados y actualizando dinámicamente la interfaz en respuesta a las interacciones del usuario.

👉 Código Aquí:   


Cómo subir imagenes desde un formulario de ReactJS a PHP 🚀 Cómo subir imagenes desde un formulario de ReactJS a PHP 🚀

Proyecto permite a los usuarios cargar imágenes desde un formulario creado en React y enviarlas a un servidor PHP para su procesamiento. Se enfoca en la integración entre la interfaz de usuario de React y el backend PHP para la gestión de archivos, facilitando la carga y manipulación de imágenes en aplicaciones web.

👉 Código Aquí:   


Cómo usar el Hook useFetch en ReactJS Cómo usar el Hook useFetch en ReactJS

useFetch es un hook personalizado en React que se utiliza para manejar la lógica de la obtención de datos desde una API. Este hook simplifica el proceso de realizar solicitudes HTTP y gestionar el estado de los datos, como los datos recibidos, los errores y el estado de carga. Al encapsular esta lógica en un hook, se promueve la reutilización del código y se mantiene el código de los componentes más limpio y manejable.

👉 Código Aquí:   


Desarrollando una Alarma Interactiva con ReactJS Desarrollando una Alarma Interactiva con ReactJS

El enfoque principal de este desarrollo radica en la comprensión y aplicación de los hooks de React para administrar estados. La implementación de estos estados y eventos en React permite al usuario configurar, activar y desactivar la alarma, proporcionando así una experiencia interactiva y práctica en la gestión del tiempo.

👉 Código Aquí:   


Domina el Hook useEffect en ReactJS Domina el Hook useEffect en ReactJS

Este proyecto es una guía práctica para entender y dominar el hook useEffect en React. A través de un ejemplo funcional, aprenderás cómo utilizar useEffect para manejar efectos secundarios en componentes funcionales.

👉 Código Aquí:   


Domina el Método Filter en ReactJS Domina el Método Filter en ReactJS

Este proyecto es una demostración práctica del uso de hooks en React para crear una lista filtrable. Permite a los usuarios buscar y filtrar una lista de frutas en tiempo real utilizando el hook useStat.

👉 Código Aquí:   


Domina la Implementación del Toggle-Switch con React 🤯 Domina la Implementación del Toggle-Switch con React 🤯

Descubre cómo implementar de manera efectiva un interruptor de alternancia (toggle switch) en React con este proyecto educativo. Aprende a utilizar el poderoso Hook useState para crear una interfaz dinámica e interactiva que responde a los cambios de estado en tiempo real.

👉 Código Aquí:   


Dominar el Hook useState en ReactJS Dominar el Hook useState en ReactJS

Este proyecto ofrece una serie de ejemplos prácticos para comprender y dominar el uso del hook useState. Desde ejemplos básicos hasta casos más avanzados, aquí encontrarás todo lo necesario para familiarizarte y aprovechar al máximo este hook.

👉 Código Aquí:   


Explorando Filtros Interactivos con Checkbox en ReactJS Explorando Filtros Interactivos con Checkbox en ReactJS

Proyecto desarrollado en React incorpora filtros de checkbox para productos, permitiendo a los usuarios seleccionar una o varias categorías. Utiliza hooks como useState y useEffect para gestionar el estado y la interacción con una API externa, ofreciendo una experiencia interactiva y dinámica al filtrar productos según las preferencias del usuario.

👉 Código Aquí:   


Explorando el Hook useState en React: Ejemplos de Encendido/Apagado y Activo/Inactivo ✅ Explorando el Hook useState en React: Ejemplos de Encendido/Apagado y Activo/Inactivo ✅

Explorando el uso del Hook useState con dos ejemplos distintos: encendido/apagado y activo/inactivo. A través de estos ejemplos, los usuarios pueden comprender cómo gestionar el estado local en componentes funcionales de React y controlar dinámicamente la interfaz de usuario según las acciones del usuario.

👉 Código Aquí:   


Full Stack CRUD con PHP MySQL API Rest y ReactJS 🤯 Full Stack CRUD con PHP MySQL API Rest y ReactJS 🤯

Desarrollar una aplicación web completa (full stack) que implemente las operaciones básicas CRUD (Crear, Leer, Actualizar y Eliminar) utilizando las siguientes tecnologías, (PHP, MySQL, API Rest, ReactJS).

👉 Código Aquí:   


Guía Completa para Integrar React-OTP-Input en Tus Proyectos de React 🚀 Guía Completa para Integrar React-OTP-Input en Tus Proyectos de React 🚀

La Guía Completa para Integrar React-OTP-Input ofrece una solución detallada y práctica para implementar la entrada de códigos OTP en proyectos de React. Desde su instalación hasta su integración.

👉 Código Aquí:   


Implementando Navegación en ReactJS con react-router-dom 🚀 Implementando Navegación en ReactJS con react-router-dom 🚀

El proyecto consiste en crear una aplicación web utilizando ReactJS y la librería 'react-router-dom' para la gestión de la navegación. Con 'react-router-dom', podemos crear rutas dinámicas en nuestra aplicación React, lo que nos permite cambiar entre diferentes componentes o páginas de forma fluida sin necesidad de recargar la página completa.

👉 Código Aquí:   


Integrando la API de Los Simpson con ReactJS: Paso a Paso 🚀 Integrando la API de Los Simpson con ReactJS: Paso a Paso 🚀

Proyecto que muestra cómo integrar la API de Los Simpson en una aplicación web utilizando ReactJS. En este repositorio encontrarás el código y una breve guía para comenzar a consumir la API y crear tu propia experiencia inspirada en Los Simpson. ¡Explora el mundo de Springfield con React!

👉 Código Aquí:   


Lista de Tareas con Reactjs y TypeScript Lista de Tareas con Reactjs y TypeScript

Aplicación desarrollada utilizando React.js y Typescript (TS) que permite a los usuarios gestionar sus tareas de manera eficiente. Con una interfaz intuitiva y funcionalidades avanzadas, como la capacidad de agregar, eliminar y marcar tareas como completadas.

👉 Código Aquí:   


Mi Custom Hook para consumir una API REST en ReactJS Mi Custom Hook para consumir una API REST en ReactJS

Optimiza tu desarrollo con Custom Hooks en React, dominando la creación de funciones independientes y reutilizables. Descubre cómo simplificar tu código al reutilizar lógica en varios componentes, aprovechando al máximo las capacidades de React Hooks para mejorar la eficiencia y mantenibilidad de tus aplicaciones.

👉 Código Aquí:   


Mi Primera Aplicación de TO DO List con ReactJS 🚀 Mi Primera Aplicación de TO DO List con ReactJS 🚀

Mi TO DO List con ReactJS es una aplicación que ofrece una manera intuitiva y eficiente de gestionar tus tareas diarias. Desarrollada utilizando ReactJS. Con una interfaz amigable y funcionalidades interactivas, puedes agregar, eliminar y actualizar tus tareas con facilidad.

👉 Código Aquí:   


Mi primer custom hook en ReactJS Mi primer custom hook en ReactJS

Este proyecto ofrece una forma para simplifica tu código con Custom Hooks, aprende a crear funciones independientes y reutilizables en React.

👉 Código Aquí:   


Peticiones con el método fetch en ReactJS ✅ Peticiones con el método fetch en ReactJS ✅

Peticiones con el método fetch en ReactJS se enfoca en la integración de solicitudes HTTP usando fetch en aplicaciones ReactJS. Permite obtener y enviar datos de manera asíncrona, facilitando la interacción con servidores remotos para actualizar y mostrar contenido dinámico en las aplicaciones.

👉 Código Aquí:   


Resaltado de Código con Syntax Highlighting en ReactJS Resaltado de Código con Syntax Highlighting en ReactJS

Aplicación simple construida con Vite y React que muestra cómo resaltar bloques de código utilizando el paquete react-syntax-highlighter. Incluye un botón para copiar el código al portapapeles y un indicador visual de que el código ha sido copiado.

👉 Código Aquí:   


Sistema de Likes y Dislikes con ReactJS 🚀 Sistema de Likes y Dislikes con ReactJS 🚀

Sistema de Likes y Dislikes con ReactJS es una aplicación web interactiva que permite a los usuarios expresar sus preferencias mediante votos positivos y negativos. Utilizando la tecnología ReactJS, los usuarios pueden interactuar con contenido y visualizar la popularidad relativa de cada elemento a través de un diseño intuitivo y dinámico.

👉 Código Aquí:   


TODO List App en ReactJS con Circular Progressbar TODO List App en ReactJS con Circular Progressbar

Aplicación de lista de tareas desarrollada en React que permite a los usuarios agregar nuevas tareas, marcarlas como completadas o incompletas y visualizar el progreso general a través de un gráfico circular.

👉 Código Aquí:   


TODO List App en ReactJS con useReducer 🚀 TODO List App en ReactJS con useReducer 🚀

Con funcionalidades como la capacidad de agregar nuevas tareas, marcar tareas como completadas y eliminar tareas existentes, la TODO List App proporciona una solución práctica y escalable para la gestión de tareas en el entorno digital.

👉 Código Aquí:   


Tienda Online - Ecommerce con ReactJS y TypeScript(TS) Tienda Online - Ecommerce con ReactJS y TypeScript(TS)

La tienda online simula la venta de guitarras, utilizando los hooks useState, useEffect y useMemo de React. La funcionalidad incluye la visualización de una lista de productos, la capacidad de agregar productos al carrito de compra, la gestión de la cantidad de productos en el carrito, la opción de vaciar el carrito y la persistencia de los productos en el carrito mediante el uso de localStorage.

👉 Código Aquí:   


Vinculando Controles de Formulario con Variables de Estado en ReactJS Vinculando Controles de Formulario con Variables de Estado en ReactJS

Se centra en vincular los controles de formulario, como campos de entrada y selectores, con variables de estado en ReactJS. A través de este enfoque, los cambios en los formularios se reflejan dinámicamente en las variables de estado, manteniendo la coherencia entre la interfaz de usuario y la lógica del componente.

👉 Código Aquí:   


¿Cómo utilizar la Librería React Toastify en tu proyecto de React js? ¿Cómo utilizar la Librería React Toastify en tu proyecto de React js?

React Toastify para mejorar la experiencia de usuario mediante notificaciones dinámicas y altamente personalizables. Integrando fácilmente alertas, el sistema proporciona una forma eficiente de comunicar información importante en la aplicación, mejorando la interactividad y la usabilidad del usuario.

👉 Código Aquí:   


Urian Viera

👋 Ingeniero de Sistemas y Desarrollador Full Stack apasionado por el mundo del desarrollo de aplicaciones Web y Móviles. Mi experiencia abarca el Front-end y Back-end, encontrando equilibrio entre creatividad y eficiencia técnica.

Disfruto crear y compartir mis conocimientos de manera clara y directa para facilitar el aprendizaje rápido y efectivo.

Experiencias
Urian Viera full stack developer - Edumedia Tech
Edumedia Tech

Coordinador de Desarrollo

Urian Viera full stack developer - Dugotex S.A
Dugotex S.A

Desarrollador full stack

Urian Viera full stack developer - AECSA
AECSA

Desarrollador Sénior

Urian Viera full stack developer - Bull Marketing S.A.S
Bull Marketing S.A.S

Programador Web

Urian Viera full stack developer - Permutasalcuadrado
Permutasalcuadrado

Desarrollador de aplicaciones Web

Urian Viera full stack developer - Apure Tv (Canal de televisión)
Apure Tv (Canal de televisión)

Coordinador de sistemas

😲 Mi Primer Paquete NPM

Loading Request es un paquete npm diseñado para ofrecer un indicador de carga visual durante cualquier solicitud o proceso asíncrono en JavaScript. Su objetivo es mejorar la experiencia del usuario al proporcionar una integración sencilla y una personalización completa.

Échale un vistazo a este paquete npm ¡sin duda te encantará!

🔥 Mi Segundo Paquete NPM

Nextjs Toast Notify es un paquete npm imprescindible para agregar notificaciones emergentes (toasts) a tus aplicaciones web con Next.js. Ideal para proporcionar retroalimentación visual clara y efectiva sin interrumpir la experiencia del usuario.

Échale un vistazo a este paquete npm ¡sin duda te encantará!