Url dinámicas con react
Podemos parametrizar las urls en React. Esto nos va a permitir tener url dinámicas en función a unos parametros. Para ver su funcionamiento se muestra un ejemplo:
1 – Definición de parámetros en la url
Dado un route, podemos indicar los parámetros como en el ejemplo :category y :type
2 – Utilización de esos parámetros en el componente invocado
La forma de recoger luego esos párametros seria con useParams.
import { useParams } from "react-router-dom" ... const { category } = useParams() ...
Hooks de React: useState y useEffect
Para poder utilizar estos hooks lo primero es importarlos.
import React, { useState, useEffect } from 'react';
– useState: se trata de una función que crea una variable donde se puede almacenar el estado del componente. Acepta un valor inicial para esa variable y devuelve un array con dos elementos, el valor de la variable y la función para modificarla.
const [isLoading, setIsLoading] = useState(false);
– useEffect: se usa para la inicialización o modificación de variables, llamadas a APIs, etc. La llamada a useEffect acepta una función como argumento que se ejecuta por defecto cuando el componente se renderiza por primera vez, y después cada vez que el componente se actualice o cuando se modifique alguno de los argumentos pasados como parámetros (en el ejemplo category y type).
useEffect(() => { const fetchDataTxt = async () => { setIsLoading(true); try { const result = await axios("http://" + window.location.host + "/" + category + "/" + type + "/description.txt"); setData(result.data); }catch(err){ console.log("error http://" + window.location.host + "/" + category + "/" + type + "/description.txt"); } setIsLoading(false); }; fetchDataTxt(); }, [category, type]);
React tips and tricks
– React Developer Tools: Herramienta para depurar el código. Es un plugin que se instala en el navegador: Chrome, Firefox.
– Simple React Snippets: Plugin para el VSCode que te facilita mucho el desarrollo.
– Fragmentos: Es muy común que un componente devuelva múltiples elementos. La forma más cómoda de hacerlo es con los tag <> </>
class Columns extends React.Component { render() { return ( <> <td>Hello</td> <td>World</td> </> ); } }
– React Bootstrap: Framework de bootstrap adaptado a React. https://react-bootstrap.github.io/
npm install react-bootstrap bootstrap@5.1.3
– Axios: Axios es un cliente HTTP ligero basado en el servicio $http que se puede utilizar con react. Documentación 1 – Documentación 2
npm install axios
Enrutado dinámico en React: BrowserRouter vs HashRouter
En react para configurar las rutas tenemos la libreria react-router-dom. Podemos instalar con:
npm install react-router-dom
Esa librería tiene los componentes BrowserRouter y HashRouter. La principal diferencia entre ellos está en que con HashRouter se añade el # a las rutas url. Tal que así:
– HashRouter: https://gallery-react.disastercode.com.es/#/gallery/animales/gatos
En este caso el servidor ignora lo en la url lo que hay despues del #. Y el cliente es el que se encarga de interpretar esa parte de la ruta.
– BrowserRouter: https://gallery-react.disastercode.com.es/gallery/animales/gatos
En este otro caso el servidor intentará manejar la ruta completa. Por eso al recargar la página nos devolverá 404, al ser rutas que no existen en el lado del servidor.
Uso de dangerouslySetInnerHTML en React
Esta función te permite incrustar html directamente con React. Se utiliza en lugar de innerHTML.
const App = () => { const data = 'lorem ipsum'; return ( dangerouslysetinnerhtml={{__html: data}} ); } export default App;
Dynamic React Gallery
Aplicación web realizada en React que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.
El código se encuentra subido en el siguiente repositorio:
https://github.com/roberto-pf/DynamicReactGallery
Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicReactGallery/
Demo funcionando en este enlace: http://gallery-react.disastercode.com.es
Recopilación de recursos para desarrollo web. Año 2020. (Parte 3)
Videos de Fondo
BigVideo: http://dfcb.github.io/BigVideo.js/
VideoBG: http://syddev.com/jquery.videoBG/
Tubular: http://www.seanmccambridge.com/tubular/
Misceláneos
Color Thief: http://lokeshdhakar.com/projects/color-thief/
Colorzilla: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
Tippy.js: https://atomiks.github.io/tippyjs/
Plugin con Formularios
jqueryFlexdatalist: http://projects.sergiodinislopes.pt/flexdatalist/
Gráficas
MorrisJS: https://morrisjs.github.io/morris.js/
Mapas
Google Maps: https://developers.google.com/
Node y NPM
Lite Server: https://github.com/johnpapa/lite-server
Recopilación de recursos para desarrollo web. Año 2020. (Parte 2)
Pugins especiales
Metro Notification: https://codecanyon.net/item/metro-notifications/3903495
Yose Modal: https://codecanyon.net/item/yose-modal/8776097
Autumn: https://codecanyon.net/item/autumn-leaf/5244654
Metro Menu: https://codecanyon.net/item/metro-menu/4476162
Metro Modal: https://codecanyon.net/item/metro-modal/5337148
Generadores de Animaciones
Animate.css: https://daneden.github.io/animate.css/
Greensock: http://greensock.com/
Sliders
Super Simple Slider: http://supersimpleslider.com/
Better-simple-slideshow: http://leemark.github.io/better-simple-slideshow/
Galleria: http://galleria.io/
Supersized: http://buildinternet.com/project/supersized/
Swiper: http://idangero.us/swiper/
Especiales de jQuery
Masonry: http://masonry.desandro.com/
Detect mobile browsers: http://detectmobilebrowsers.com/
Lazy Load: https://github.com/tuupola/jquery_lazyload
Stickyjs: http://stickyjs.com/
Lightboxes
swipebox: http://brutaldesign.github.io/swipebox/
fancybox: http://fancyapps.com/fancybox/
frescojs: http://www.frescojs.com
lightbox2: http://lokeshdhakar.com/projects/lightbox2/
Recopilación de recursos para desarrollo web. Año 2020. (Parte 1)
Fuentes
Font-Awesome: https://fortawesome.github.io/Font-Awesome/
ionicons: http://ionicons.com/
Glyphicons: http://getbootstrap.com/components/
Weather-icons: https://erikflowers.github.io/weather-icons/
Google Fonts: https://www.google.com/fonts
Blokfont: http://blokkfont.com/
Iconos, letras e imágenes
Real Favicon Generator: http://realfavicongenerator.net/
Iconspedia: http://www.iconspedia.com/
CSSAuthor: http://www.cssauthor.com/free-mockup-templates-psd-designs/#iPhone
Freepik: http://www.freepik.com/
Skitch: https://evernote.com/intl/es/skitch/
ARCTEXT.JS: http://tympanus.net/Development/Arctext/
Shuffle Letters: http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
mThumb: https://github.com/mindsharelabs/mthumb
Generadores de código
JSON-Generator: http://www.json-generator.com/
HTML-Compressor: https://htmlcompressor.com/compressor/
CSS3-Generator: http://css3generator.com/
Generador de Color HTML: https://color.hailpixel.com/
Gradient-Editor: http://www.colorzilla.com/gradient-editor/
placehold.it: http://placehold.it/#
Servicios en Linea
Son Parser Online: http://json.parser.online.fr/
Pingdom: http://tools.pingdom.com/fpt/
Codepen.io: http://codepen.io/
Responsinator: http://www.responsinator.com/
Programas y aplicaciones
HTTP-Server: https://www.npmjs.com/package/http-server
Sweet Alert: http://t4t5.github.io/sweetalert/
Bootstrap Modals: http://getbootstrap.com/javascript/#modals
Date Picker: http://amsul.ca/pickadate.js/date/
Chosen: http://harvesthq.github.io/chosen/
Complexify: https://www.danpalmer.me/jquery-complexify/
Resumen generación de documentación con Compodoc para Angular 10
Compodoc facilita la generación de la documentación de tu proyecto de Angular. A continuación, voy a exponer un resumen de como utilizarlo.
1 – Instalación
npm install -g @compodoc/compodoc
2 – Añadir en package.json el comando que lo ejecuta.
"scripts": { "compodoc": "npx compodoc -p tsconfig.app.json" //En angular 10 tuve que poner tsconfig.base.json para //que me generase bien la documentación. }
3 – Ejecutar la creación de la documentacion
npm run compodoc
————————————————————————
Aunque hay muchas más, como se puede ver en la documentación que facilita la gente de Compodoc. Algunas de las opciones que se puede ir añadiendo al comando de ejecución son:
-d ---------> directorio destino -o ---------> abre automáticamente la documentación en el navegador -s ---------> levanta el servidor de node --theme -----> selecciona el tema --includes --> documentacion adicional. Se pone el directorio del summary.json. Se crean ficheros md. https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax -w ---------> detecta los cambios en el código y actualiza la documentación. --customFavicon -> cambia el favicon. --hideGenerator -> oculta el logotipo de compodoc. -y ----------> hoja de estilos propia para compodoc. Se le indica un directorio donde haya un style.css.
El comando de generación añadiendo todos esos flags quedaría así:
"compodoc": "npx compodoc -p tsconfig.base.json -d docs -o -s --theme vagrant --includes ./aditionaldoc -w --customFavicon ./src/favicon.ico --hideGenerator -y ./src/assets/cssCompodoc"
————————————————————————
Los comentarios deben añadirse así:
- Documentar un método, variable, componente,.... /** * */ - Documentar parámetro de un método /** * @param variable */ - Documentar retorno de un método /** * @returns */ - Ignorar en la documentacion para que no salga /** * @ignore */ - Ejemplo de uso de un componente u otro objeto. /** * @example * */
. Se puede comprobar el nivel de comentarios añadidos en la sección de cobertura de código que te genera.
– Excluir en el tsconfig.base.json los ficheros que no queremos que se revisen. Así no saldrán en la cobertura.
"exclude": [ "src/test.ts", "e2e/**" ]
Categorias
- adobe (2)
- agile (1)
- Alfresco (1)
- Android (26)
- Angular (6)
- angularjs (10)
- apache (1)
- axis (2)
- Bases de datos (14)
- Bootstrap (1)
- C# (3)
- Cámara (1)
- chrome (3)
- Codeigniter (2)
- Control de Versiones (2)
- CSS (25)
- CVS (1)
- Django (9)
- Django Rest Framework (1)
- DNS (1)
- Docker (3)
- dominio (1)
- eclipse (5)
- Entity Framework (2)
- ETL (1)
- Firefox (6)
- flash (1)
- freecad (1)
- Git (12)
- GitHub (4)
- gpg (2)
- Groovy (1)
- Handlebars (1)
- hibernate (4)
- hosting (1)
- HTML (50)
- HTML 5 (26)
- Impresión 3D (9)
- Inkscape (1)
- IOS (2)
- ireports (3)
- Java (44)
- Javascript (55)
- JBoss (5)
- JPA (2)
- JQuery (20)
- Json (7)
- JSP (6)
- Keycloak (1)
- Lamp (1)
- LDAP (2)
- lean (1)
- linkedin (1)
- LINQ (1)
- linux (13)
- Livecycle (1)
- log (1)
- microcontroladores (1)
- MongoDB (4)
- MySQL (8)
- Node.js (5)
- OC4J (1)
- Openshift (2)
- Oracle (6)
- Patrones de Diseño (1)
- Photoshop (2)
- php (20)
- PostgreSQL (1)
- python (19)
- rabbitmq (1)
- Raspberry PI (13)
- Raspherry PI (5)
- React (6)
- seguridad (3)
- Selenium (3)
- Sencha Touch (1)
- Sin categoría (29)
- Spring (17)
- spring-boot (3)
- SQL (7)
- SQLServer (1)
- SSO (1)
- struts (2)
- SVN (1)
- Talend (1)
- Tomcat (6)
- unity (3)
- Visual Studio Code (2)
- vmware (5)
- Web Services (11)
- windows (18)
- wordpress (10)
- Xiaomi (1)
- xml (2)
Trabajos Realizados
- App Android – Autoka Fr
- App Android – Cartelera Cántabra
- App Android – Gramática y Vocabulario Ingles
- App Android – Hoja de Gastos
- App Android – Hotel Torre Cristina
- App Android – OcioEnjoy
- App Android – Visor CardBoard
- App Firefox – Managapp
- DiamanteBomba – DisasterCode
- Generador de Partes de Trabajo
- GitHub – Android Web Generator
- GitHub – Dynamic Angular Gallery
- GitHub – Dynamic React Gallery
- GitHub – Sotilizator
- GitHub – SpringAngularJS
- GitHub – Swiper Dynamic Angular Gallery
- HazParejas – DisasterCode
- RompeCabezas – DisasterCode
- Unity Game – English Couple
- Unity Game – Kill Wasp
- WordPress – El Buen Apicultor
- WordPress – El Cajón de los Retales
- WordPress – El Vestidito Azul
- WordPress – Feuchas
- WordPress – Fragua de Navajas Ponce
- WordPress – Humor a las Tres
- WordPress – Photo Places