React

Animaciones y Sonidos con React

¿Te gustaría darle más vida a tu página web mediante animaciones y sonidos sencillos? Si tu respuestas es que si, te doy la bienvenida a mi post, donde aprenderás como con animaciones y sonidos sencillos pues hacer que tu pagina web sea mas atractiva. Para ello debemos tener previamente instalado Node.js y Yarn en el equipo. TECNOLOGÍAS REACT Es la base de este proyecto. Se trata de un framework/tecnología que trabaja en una sola pagina (Single Page App) y en sí, es una biblioteca Javascript, diseñada para facilitar la creación de interfaces de…continue reading →

Bases de datos en AWS con Amazon RDS

Para crear una base de datos en AWS se debe utilizar RDS. RDS son las siglas de Relational Database Service. En primer lugar, desde la consola principal de AWS se puede buscar en la caja de búsqueda o seleccionarlo desde "Servicios de AWS". https://flic.kr/p/2m1pdBS Servicios de AWS https://flic.kr/p/2m1tBnq Busqueda de RDS Una vez seleccionado, se redirigirá a la página del panel de RDS. https://flic.kr/p/2m1s9Pw Dashboard de RDS Ahora, se hace doble click sobre "Create Database": https://flic.kr/p/2m1s9Pb Detalle create Database Una vez se haga click se redirigirá a la creación de la base de…continue reading →

Consumir servicios en React con Axios – ejemplo práctico (Json-server)

En este post vamos a aprender cómo consumir servicios en React con axios de una API externa. También vamos a realizar un ejemplo práctico paso a paso. Mediante este ejemplo accederemos a una api para poder realizar un CRUD (Create, Read, Update, Delete) de Películas con React. Además en este caso usaremos el componente axios que nos proporciona React. Al final del post te dejo las indicaciones necesarias para instalar Router-Dom y Bootstrap, que son opcionales dependiendo del diseño deseado. Yo he usado navegación entre componentes y clases de bootstrap para tener un…continue reading →

React – Modal popup con React portals

¿Qué son los React Portals? Portals es una Api de React que nos permite renderizar cualquier componente o código html fuera de nuestro árbol de componentes Dom (por defecto <div id=”root”>  dentro de index.html). Para hacernos una idea, un portal sería como un agujero de gusano donde en un nodo tendríamos un <div id="otroDiv"> aislado en index.html y en otro nodo tendríamos un trozo de código html o un componente declarado en otro <div id="root"> . Este componente usaría métodos en el componente donde lo declaramos, pero a la hora de ser pintado,…continue reading →

Routing en React (react-router-dom)

¿PARA QUÉ SIRVE ROUTING? Routing sirve para navegar entre distintos componentes de un proyecto. En React, se utiliza la librería 'react-router-dom', la cual hay que instalar manualmente, ya que no está incluido por defecto. INSTALACIÓN Desde la línea de comandos, nos dirigimos a la ruta de nuestro proyecto, y escribimos el siguiente comando: npm install --save react-router-dom Ejemplo Para ver el funcionamiento y como implementarlo en un proyecto, usaremos un sencillo ejemplo, que contiene los siguientes componentes: HomeGallinasVacasCerdos Lo primero que debemos hacer es crear el componente 'Router.js', en el cual hay que…continue reading →