JavaScript

Routing en React

En este tutorial vamos a mostrar paso a paso como configurar Routing en React y que será necesario instalar para hacerlo. Pero antes de ello vamos a meternos en contexto. ¿Qué es React? React es una tecnología JavaScript que se usa para crear aplicaciones web de una sola página. Para ello usa una plantilla que puede contener distintos componentes que se muestran como parte de la página. ¿Y si quiero que cambien? Sería necesario usar Routing. ¿Qué es el Routing? El Routing es una forma de navegar entre componentes como si fuesen páginas…continue reading →

Login red social React

Es este tutorial aprendrás a iniciar sesión mediante una red social. En este proyecto utilizaremos la herramienta Firebase que nos facilitará el desarrollo de nuestra aplicación. En su plataforma donde podremos anclar y pedir permisos a la aplicaicón de terceros para poder inciar sesión a partir de las redes sociales. Tutorial Primero abrimos el símbolo de sistema de Windows. Agregamos el comando create-react-app y a continuación creamos el nombre del proyecto. Ej: npx create-react-app tutorialenfirebase A continuación, instalaremos las librerías de Firebase: entramos a la carpeta de nuestro nuevo propyecto :np tutorialenfirebase. yarn…continue reading →

Internationalization (i18n) angular

En este tutorial de Angular 9/8 veremos cómo traducir una aplicación Angular usando la librería ngx-translate. Ngx-translate es una biblioteca de internacionalización para Angular que permite internacionalizar la aplicación en varios idiomas. Puede convertir fácilmente datos estáticos o dinámicos en varios idiomas.  Proporciona un servicio útil, una directiva y una tubería para manipular cualquier dato. ¿Qué es la internacionalización? La internacionalización es el proceso de diseño y preparación de su aplicación para poder utilizarla en diferentes idiomas. La localización es el proceso de traducir su aplicación internacionalizada a idiomas específicos para entornos locales particulares.angular.io…continue reading →

Paginación en React

En este post vamos a aprender a insertar pagination en nuestros proyectos de React. Veremos como funciona y trataremos las posibles modificaciones que se le pueden aplicar. Este ejercicio se realizará en Visual Studio Code 1.43.2 y con Node.js v.12.8.1 Requisitos previos Antes de comenzar debemos instalar el paquete que vamos a usar para la paginación. Hay varios, pero en este caso se ha decidido utilizar react-paginate en su versión 6.3.2. Para instalarlo simplemente ejecutamos en nuestra consola de comandos npm install react-paginate --save. Para más información acerca del paquete y sus características…continue reading →

Introducción a Material en Angular

Hola, bienvenidos a este nuevo post donde veremos una breve introducción a Material en Angular. ¿Qué es Material? Es un kit de componentes que nos permite incorporar elementos tales como botones, tablas, paginadores con un diseño, animaciones creados ya predeterminados. A continuación se empezará la explicación desde cero, necesitamos Visual Studio Code y la consola de Windows para poder trabajar. Empecemos! Para crear el proyecto debemos abrir la terminal de Windows e ir hacia la ruta que deseemos para guardar nuestro proyecto, nosotros lo haremos en una carpeta en el escritorio llamada Angular.…continue reading →

Introducción a React

¿Qué es React? React nació como una biblioteca de JavaScript para desarrollar interfaces de usuario. Fue creado y utilizado por Facebook hasta que en 2013 fue lanzado al público. Es un framework para la realización de aplicaciones Front. Utiliza el lenguaje jsx, que es una mezcla entre JavaScript y HTML. Es una Single Page Application (SPA). Esto quiere decir que es una aplicación de una sola página (por defecto index.html) en la que vas dibujando vistas y añadiendo funcionalidades a través de distintos componentes. No existe la navegación como tal, pero se crea…continue reading →

Lectura Servicios API en Angular

En esta ocasión lo que haremos es mostrar el paso a paso detalladamente para leer un servicio API que hemos creado en Azure, se trata de consultas de selección de todos los alumnos, por curso y por detalles de alumno.La URL que usaremos será: https://apialumnos.azurewebsites.net/ la cual contendrá todos las consultas de lectura del servicio. Las peticiones serán: Alumnos: URL + api/Alumnos Alumnos por Curso: URL + api/Alumnos/detallesAlumno/{codigo} Detalles Alumno: URL + api/Alumnos/getalumnosGrado/{grado} Bien, lo primero que haremos es ir a la ruta de la dirección donde queremos guardar nuestro proyecto, utilizaremos una…continue reading →

Filtrar contenido con pipe Angular

La tecnología de Pipe sirve para transformar visualmente los datos de nuestra web, en este ejemplo voy a enseñaros como filtrar serie de post en una tabla con un buscador. 1-Vamos a empezar creándonos un proyecto nuevo de angular 2-Creamos un nuevo component y una carpeta con el pipe Con el comando code . abrimos el proyecto en visual code y con ng serve lo iniciamos 3-Vamos a utilizar bootstrap para la apariencia de la web (opcional) //BOOTSTRAP 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"…continue reading →

Paginación en Angular

Vamos a aprender de una forma rápida y sencilla a realizar paginaciones en Angular. He creado una pequeña aplicación que muestra todos los empleados de un hospital, pero son demasiados y me gustaría poder paginarlos y que no se vean todos a la vez. https://www.flickr.com/photos/187087725@N06/49698124241/in/dateposted-public/ ¿Cómo se hace eso? Muy simple. Para empezar nos dirigimos a https://www.npmjs.com/package/ngx-pagination. Y como vemos para empezar a usar la paginación en nuestra aplicación tenemos que ejecutar el siguiente comando en el cmd de nuestro proyecto: npm install ngx-pagination --save. Una vez instalado, en el app.module.ts tenemos que…continue reading →

UNIT TESTING EN REACT

Introducción En este post aprenderás qué es el unit testing y diferentes herramientas que se pueden utilizar, así como su implementación en proyectos de React. ¿Qué son las pruebas unitarias o Unit testing? Con Unit Testing, nos referimos a programar tests que nos sirven para comprobar que un bloque con una funcionalidad específica de nuestro código funciona como esperamos. ¿Cuál es su estructura? El cuerpo de un test consta de tres partes: Arrange: Es el primer paso, donde se crean las variables y se preparan los recursos a utilizar (componentes, clases…). Act: Donde…continue reading →