React

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 →

Subir Archivos de Imagen en React

En este post se explica como se podría capturar una imagen con react, para posteriormente poder realizar con ella las acciones requeridas. Para ello empezaremos creándonos dos Componentes React: 1. FileUploader export default class FileUploader extends Component { render() { let state = this.state, props = this.props; return ( <form name="form" id="form"> </form> ); } } FileUploader.propTypes = propTypes; FileUploader.defaultProps = defaultProps; 2.Imágenes: import React, { Component } from "react"; import FileUploader from "./FileUploader"; import axios from "axios"; export default class Imagenes extends Component { uploader = React.createRef(); render() { return ( <div>…continue reading →

Material UI / Caching en React

¿Qué es Material UI? https://flic.kr/p/2iJdEXq Material-UI es una biblioteca de código abierto que implementa el lenguaje visual de "materiales" de Google en sus componentes React. Ofrece la capacidad de combinar su biblioteca de interfaz de usuario, con el marco front-end de React.js. Con Material UI se pueden crear diseños profesionales modernos con personalización completa para aplicaciones sin las limitaciones de tiempo de iniciar CSS completo desde cero. En el siguiente tutorial, veremos algunos elementos y componentes de Material como los cards, con React y Material-UI. La aplicación implementará React Hooks, React Context, y…continue reading →

Enviar Emails en React

¿Se pueden enviar emails de forma nativa? La respuesta es no, React.JS no incluye los paquetes necesarios para poder enviar emails. Aparte de que React es la parte cliente (el navegador Web), por lo que no hay un servidor que esté a la escucha para realizar los envíos. En este post vamos a ver una forma de poder realizar envíos de email usando una aplicación de React como cliente web y usando ciertos paquetes para poder tener un servidor a la escucha, así cuando un usuario mande un formulario desde el cliente web…continue reading →