React

Creacion de Modales en React con SweetAlert2

Usos de SweetAlert2 A la hora de crear modales, popups y alertas con Javascript, pueden utilizarse diferentes bibliotecas u opciones. Una de esas bibliotecas es SweetAlert2. SweetAlert2 es una biblioteca que esta pensada para poder utilizarse junto a JavaScript Vanilla. Al estar pensado para usarse de esa manera, también funciona con React, Vue y Angular, aunque en este post se utilizara con React. Todo el código creado para esta explicación se puede encontrar en el siguiente repositorio de GitHub. Instalar y crear modales Instalando SweetAlert2 en React Para instalar SweetAlert2 y poder utilizarlo…continue reading →

Consumir servicios de una API Firebase con React

Introducción Firebase es una plataforma en la nube de Google para el desarrollo de aplicaciones web y móvil. Posee múltiples herramientas y funciones para facilitar el desarrollo de aplicaciones, procurando optimizarlas sin renunciar en ningún momento a la calidad. Firestore: Es una base de datos NoSQL flexible, escalable y en la nube con el fin de almacenar y sincronizar datos en tiempo real para la programación tanto en el lado del cliente como en el del servidor. Creación de la base de datos En primer lugar crearemos un nuevo proyecto Firebase desde  https://firebase.google.com/  …continue reading →

Traducción de Apps con i18next

Al momento de ofrecer el contenido de tu aplicación en varios idiomas, existen varias opciones. Por ejemplo, Chrome ofrece la posibilidad de traducir el contenido de una página siempre que el idioma declarado en el atributo lang del fichero HTML sea distinto del navegador del usuario. En ocasiones el idioma de la página coincide con el del navegador pero el contenido está en otro idioma, por lo que no es un método muy eficiente. Existen varias librerías para este cometido en distintos lenguajes. Vamos a usar una librería que tiene soporte con varias…continue reading →

Tu primer REACT en 10 minutos

INDICE Requisitos.Que es y para que sirve React.Instalación de React.Estructura de proyecto.Que es y como funciona un Componente.Creacion de un Componente simple. 1º)Requisitos -Tener un editor de código: Visual Studio Code o similar. -OPCIONAL: gestor de paquetes yarn https://classic.yarnpkg.com/en/docs/install/#windows-stable Si no lo tenéis os dejo el link de descarga https://code.visualstudio.com 2º)¿Qué es y para que sirve React? Es una Librería desarrollada por Facebook. https://reactjs.org/ Lo podemos implementar en un proyecto clásico, es decir, en una web que tengamos completamente hecha con Java, con PHP y un framework como Laravel para tener ciertas funcionalidades…continue reading →

Pop ups con Dialog de Material UI en React

¿Qué es Material UI? Material UI es un framework de react que nos ayuda a construir nuestra página de forma rápida y sencilla. En este post explicaremos como instalarlo y como utilizar la herramienta Dialog ¿Cómo utilizar Material UI? Lo primero que debemos hacer para trabajar con Material UI es instalarlo por linea de comando con CMD, CMDER o el propio terminar de visual studio code. Podemos utilizar o bien si usamos npm npm install @material-ui/core o si queremos utilizar yarn yarn add @material-ui/core ¿Qué es Dialog? La herramienta Dialog de Material UI…continue reading →

Consumir API en un componente React utilizando Ajax JQuery

Queremos consumir un servicio API en un componente React, para ello, voy a utilizar Ajax con JQuery para poder hacer las operaciones CRUD y, por tanto, consumir el servicio. Debéis tener instalado el programa node.js para que el terminal nos pueda reconocer los comandos que vamos a utilizar en los siguientes apartados. https://nodejs.org/es/ Lo primero que vamos a necesitar para poder hacerlo es crearnos un proyecto React. Lo haremos utilizando el siguiente comando: https://flic.kr/p/2k6aN2J En este caso yo he llamado a mi proyecto crudjquery. He utilizado el programa Cmder que es un terminal…continue reading →