React-Select(SELECCION MULTIPLE)

https://flic.kr/p/2iHHbBg Es un control de entrada selectivo flexible para ReactJS con soporte de selección múltiple, autocompletado, asíncrono y creatable. Esta creado por Jed Watson React Select está financiado por Thinkmill y Atlassian. Característica Enfoque flexible de los datos, con funciones personalizables.API de estilo extensible con emociónAPI de inyección de componentes para un control completo sobre el comportamiento de la interfaz del usuarioAccesorios de estado controlables y arquitectura modularFunciones solicitadas durante mucho tiempo como grupos de opciones, soporte de portal, animación y más Props comunes autoFocus - enfoca el control cuando se montaclassName - aplicar un className al…continue reading →

Hooks React

¿QUÉ SON LOS HOOKS? Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde componentes funcionales. Los hooks no funcionan dentro de las clases — te permiten usar React sin clases. (No recomendamos reescribir tus componentes existentes de la noche a la mañana, pero puedes comenzar a usar Hooks en los nuevos si quieres.) React proporciona algunos Hooks incorporados como useState. Con respecto a las llamadas a los Hooks, hay que tener en cuenta que no debemos llamarlo dentro de ciclos, condicionales o funciones anidadas Hook…continue reading →

React Google Maps

¿Cómo utilizar Google Maps en React? Como ya es sabido por todos Google Maps es un servidor de aplicaciones de mapas en la web con infinitas posibilidades de uso, En este tutorial vamos a mostraros la manera más sencilla de tener un componente React capaz de mostrar un mapa de Google Maps con las cordenadas deseadas, muy útil para empresas y desarrolladores que deseen agregarlo sus proyectos. Tutorial. Lo primero que debemos hacer es instalar Node.js https://nodejs.org y comprobar su versión con el comando “ node -v “ una vez hecho esto comprobamos…continue reading →

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 →

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 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 →

React Firebase, Login y SignUp

En este post explicare como poder usar Firebase con React, así como un ejemplo de uso para poder iniciar sesión con un usuario-contraseña ya existentes o crear un nuevo usuario. https://flic.kr/p/2iHD8vh Antes de nada tenemos que hacer una pequeña introducción sobre que es FireBase. Firebase es una plataforma subida a la nube que nos permite desarrollar y crear apps de una manera más fácil. Entre sus funciones consta de una base de datos para la gestión se usuarios, así de esta forma con Firebase nosotros solo tendremos que seguir unos pasos con los…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 →

Semantic UI React

Buenas, en este post voy a explicar el uso básico de una herramienta de diseño de paginas web similar a Boostrap pero digamos que con un uso más básico que este. Antes de nada, decir que usaremos Visual Studio Code como intérprete del texto. Semantic UI es una librería de JQuery para la manipulación del DOM en la página y que será usado he interpretado por React.js. ¿Por qué Semantic es algo más simple que Bootstrap en cuanto a diseño?, porque este importa conjuntos de marcas que reciben su propio diseño a través…continue reading →