entrada y cambio de título

Author: sigdeletras

geoapp/src/App.js

@@ -51,7 +51,8 @@ export default class App extends React.Component {
         {/* Title */}
         <div className="row m-3">
           <div className="col-12">
-            <h1 className="text-center">GeoApp</h1>
+            <h2 className="text-center">GeoApp :: React</h2>
+            <h4 className="text-center">Sanitary Facilities (Cordoba, Spain)</h4>
           </div>
         </div>
 

img/04_sprint4.gif

@@ -16,15 +16,15 @@ Con la siguiente entrada cierro este *side proyect* que me ha servido para [cono
 
 A modo de **conclusión**, comentar que **estoy contento con la experiecia**. He cumplido con el **objetivo principal** que me marqué que no era otro que el de **introducirme en el uso de React** y he desarrollado la aplicación cubriendo las funcionalidades definidas al principio del proyecto.  
 
-También me gusta la **metodología** que que seguido y que creo que aplicaré a aprendizajes futuros.Como en cualquier proyecto de desarrollo real, y con real me refiero proyecto para un cliente, ha sido básico definir correctamente el alcance de las tareas a realizar y marcarme un tiempo. Esto me ha ayudado a no desviarmente, organizar el tiempo y sobre todo a saber cúando darlo por terminado. 
+También me gusta la **metodología** que seguido y que creo que aplicaré a aprendizajes futuros. Como en cualquier proyecto de desarrollo real, y con real me refiero proyecto para un cliente, ha sido básico definir correctamente el alcance de las tareas a realizar y marcar un tiempo de ejecución. Esto me ha ayudado a no desviarmente, organizar el tiempo y sobre todo a saber cuándo darlo por terminado. 
 
-Al final, como es normal y conociendo basicamente la librería, me han surgido posibles mejoras, nuevas funcionalidades o ampliaciones, pero como no estaban definidas en mi pila, las dejaré para otro proyecto.
+Al final, como es normal y conociendo basicamente la librería, me han surgido posibles mejoras, nuevas funcionalidades o ampliaciones, pero como no estaban definidas en mi pila, las dejaré para otro momento.
 
 Quisiera también comentar que **este sistema de autoaprendizaje tiene también su aspecto negativo**. No contar con alguien que te revise el código, que te aporte comentarios o que simplemente te muestre otras vías para mejorar lo aprendido, me deja la sensación en algunas ocasiones de **no saber si he usado la forma más óptima de usar la librería**, aunque el código funcione correctamente.
 
 ![react.png](/img/react.png)
 
-Este es el listado de Las tareas que quedaban por hacer:
+Este es el listado de las tareas que quedaban por hacer:
 - 06 crear componente TableList
 - 14 Datos WFS en tabla
 - 17 consulta datos en tabla
@@ -36,9 +36,9 @@ Los temas aprendidos sobre React a partir del desarrollo de estas tareas son los
 
 # Componente TableList
 
-En este último componente vamos a **presentar en formato tabla los resultados obtenidos desde el servicio WFS** de la Junta de Andalucía con datos sobre servicios sanitarios. Son los mismos datos que usamos para [añadir el GeoJSON al mapa](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/).
+En este último componente vamos a **presentar en formato tabla los resultados obtenidos desde el servicio WFS** de la Junta de Andalucía con datos sobre [equipamintos sanitarios](https://www.juntadeandalucia.es/institutodeestadisticaycartografia/DERA/servicios.htm). Son los mismos datos que usamos para [añadir el GeoJSON al mapa](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/).
 
-Para el componente usamos los datos que nos vienen desde sus propiedades y montamos una tabla con cabecera y cuerpo de datos que devuelve la información usando la función map(). El componente *TableList* quedará así.
+Usamos los datos que nos vienen desde sus propiedades y montamos una tabla con cabecera y cuerpo de datos que devuelve la información mediante la función *map()*. El componente *TableList* quedará así.
 
 ```javascript
 //TablaList
@@ -83,30 +83,28 @@ export default class TableList extends Component {
     }
   }
 }
-
-Para futuras mejoras, se debería refactorizar el código y que pudiera servir para cualquier tipo de datos temáticos que se consultaran. Ahora mismos está desarrollado pensando en el modelo de datos de servicios sanitarios.
-
+...
 ```
 
-# Implementando un botón de zum con el patrón de diseño Pub-Sub.
+Para futuras mejoras, se debería refactorizar el código y que pudiera servir para cualquier tipo de datos temáticos que se consultaran. 
 
-Es interesante añadir un **bótón que permita hacer zum al elemento dentro desde la tabla**. Para obtener una comunicación directa entre componentes, y que ejecute el método *flyTo()* de Leaflet en el compomente *MapView*, he usado el [**patrón de diseño **Observador**](https://es.wikipedia.org/wiki/Observer_(patr%C3%B3n_de_dise%C3%B1o))
+# Implementando un botón de zum con el patrón de diseño Pub-Sub.
 
-Este patrón define una dependencia de uno a muchos entre objetos, de forma que cuando un objeto (sujeto) cambie de estado, se notifique y se actualicen automáticamente todos los objetos (observadores) que depende de él. Esta notificación se realiza normalmente a través de uno de sus métodos. 
+Es interesante añadir un **bótón que permita hacer zum al elemento desde la tabla**. Para obtener una comunicación directa entre componentes, y que ejecute el método *flyTo()* de Leaflet en el compomente *MapView*, he usado el [**patrón de diseño **Observador**](https://es.wikipedia.org/wiki/Observer_(patr%C3%B3n_de_dise%C3%B1o)). Este patrón define una dependencia de uno a muchos entre objetos, de forma que cuando un objeto (sujeto) cambie de estado, se notifique y se actualicen automáticamente todos los objetos (observadores) que depende de él. Esta notificación se realiza normalmente a través de uno de sus métodos. 
 
 El patrón se ha usado para comunicar dos componentes hijos, en este caso *ButtonZoom* que obtiene las coordenadas desde las propiedades de cada fila y *MapView* que es donde se encuentra el evento del zum a las coordenadas pasadas.
 
 Para ser más específicos se ha usado el **patrón Pub-Sub(Publisher-Subscriber)** que añade un evento intermedio. La implementación de este patrón se a realizado gracias a la librería [PubSub](https://www.npmjs.com/package/pubsub-js). En esta [entrada](https://medium.com/@Aida_Pro_/observer-vs-eventbus-patrones-de-dise%C3%B1o-cd8178f48c7d) es donde he obtenido la parte teórica sobre el usos de ambos patrones.
 
-Lo primero que se ha realizado es la instalación de la librería pubsub-js  con npm y añadir la importación en los componentes donde los vamos a usar.
+Lo primero que se ha realizado es la instalación de la librería *pubsub-js*  con npm y añadir la importación en los componentes donde los vamos a usar.
 
 ```javascript
 //TableList.js
 import React, { Component } from "react";
 import PubSub from "pubsub-js";
+...
 ```
-
-Creamos el la función que vamos publicar. La función se denominará *zoomFeature()* y estará dentro del componente de clase *ButtonZoom()*. Este compomente devuelve un botón en cada fila de la tabla con un evento *onClick* que llama a nuestra función. 
+Creamos la función que vamos publicar. La función se denominará *zoomFeature()* y estará dentro del componente de clase *ButtonZoom()*. Este compomente devuelve un botón en cada fila de la tabla con un evento *onClick* que llama a nuestra función. 
 
 ```javascript
 //TableList.js
@@ -132,7 +130,7 @@ class ButtonZoom extends Component {
 
 ![04_button.png](img/04_button.png)
 
-Vamos a definir los observadores/suscriptores de nuetro evento. En la aplicación será el compomente MapView que es donde podemos usar los métodos de Leaflet gracias al [uso de referencias en React como comentamos en el artículo anterior](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/). La suscripción la hacemos dentro del cliclo de vida *componentDidMount()*. Es importante también eliminar la suscripción ya puede ocurrir fugas de memoria. Esto lo haremos con el método *component WillUnmount()* mediante  *PubSub.unsubscribe*.
+Vamos a definir los observadores/suscriptores de nuetro evento. En la aplicación será el compomente *MapView* que es donde podemos usar los métodos de Leaflet gracias al [uso de referencias en React como comentamos en el artículo anterior](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/). La suscripción la hacemos dentro del cliclo de vida *componentDidMount()*. Es importante también eliminar la suscripción ya puede ocurrir fugas de memoria. Esto lo haremos con el método *component WillUnmount()* mediante  *PubSub.unsubscribe*.
 
 ```javascript
 import React from "react";
@@ -161,10 +159,9 @@ export default class MapView extends React.Component {
   }
 ...
 ```
-
 ## GeoApp Final
 
-
+![04_sprint4.gif](/img/04_sprint4.gif)
 
 ## Resumen de  tareas realizadas en el Sprint #3