React

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 →

Despliege de aplicaciones React y/o Angular

En este post veremos como se puede desplegar una aplicación React o Angular en distintos tipos de servidor. Se enseñara como configurar el servidor correctamente para que el sistema de enrutado de las aplicaciones funcione correctamente. React y Angular tienen la particularidad que son webs de una sola página, cualquier simulación de enrutado se hace en cliente y no en servidor como una página web tradicional. Esta caracteristica requiere una configuración especial en el servidor que defina que cuando se hace una petición a quela url del servidor responda devolviendo un solo archivo…continue reading →