EsriJS con ReactJS (actualizado)

ReneRubalcava

<\/HEAD>

<\/P>

Hace no mucho tiempo, hice una entrada de blog<\/A> sobre el uso de la ArcGIS JavaScript API con ReactJS<\/A> para widgets. He estado hablando con algunas personas sobre React últimamente, así que pensé que podría volver a tratar el tema aquí. La mayor pregunta que podrías hacer es ¿por qué usar React?<\/A> Personalmente, creo que React tiene una API realmente elegante. Cuando comienzas a usarlo y empiezas a descubrir lo fácil que es componer tus componentes que conforman la interfaz de usuario, creo que es entonces cuando React realmente brilla<\/EM>. Una característica interesante de React es el uso de un DOM virtual<\/A>. Básicamente, si actualizas el estado de tu aplicación en la raíz, volverá a renderizar todo el DOM de la aplicación. Parece que sería lento, pero realmente no lo es. Puede serlo<\/EM>, si haces algo tonto como intentar crear un editor JSON muy grande<\/STRONG> **ejem**<\/EM>. Puedes leer más sobre cómo ocurren las actualizaciones aquí<\/A>.<\/P>

<\/P>

Todo es solo DOM<\/H2>Si estás familiarizado con trabajar con Dijits y el ciclo de vida de Dijit<\/A>, los componentes React tienen un ciclo de vida similar<\/A>. En ambos casos es beneficioso conocerlos. React usa una sintaxis opcional llamada JSX<\/A>. Es importante recordar que JSX es totalmente opcional<\/EM>. Algunas personas se alteran mucho por mezclar DOM con JavaScript, pero ese no es el caso. JSX se usa simplemente para ayudarte a definir la estructura de tu DOM. Aún tiene que ser compilado a JavaScript puro para funcionar en el navegador y hay herramientas<\/A> para eso<\/A>.<\/P>

<\/P>

Widgets para las masas<\/H2>El código fuente de la aplicación de ejemplo está disponible aquí<\/A>. No voy a repasar toda la aplicación en detalle, pero sí quiero destacar los widgets.<\/P>

<\/P>

Primero hay un widget llamado Locator que simplemente muestra las coordenadas del mapa del cursor.<\/P>

\/** @jsx React.DOM *\/
define([
  'react',
  'dojo/topic',
  'helpers/NumFormatter'
], function(
  React,
  topic,
  format
) {
  var fixed = format(3);
  var LocatorWidget = React.createClass({
    getInitialState: function() {
      return {
        x: 0,
        y: 0
      };
    },
    componentDidMount: function() {
      this.handler = this.props.map.on('mouse-move', function(e) {
        this.update(e.mapPoint);
      }.bind(this));
    },
    componentWillUnMount: function() {
      this.handler.remove();
    },
    update: function(data) {
      this.setState(data);
      topic.publish('map-mouse-move', data);
    },
    render: function() {
      return (
        <div className='well'>
          <label>x: {fixed(this.state.x)}<\/?label>
          <br\/?>
&nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp: <label>y: {fixed(this.state.y)}<\/?label>
&nbsp:& nbsp:& nbsp:& nbsp: <\/?div>
&nbsp: );
  }
 });
 return LocatorWidget;
});

Así que este componente es bastante simple. Solo mostrará coordenadas y usa

dojo/topic para publicar esas coordenadas a la aplicación. He hablado sobre dojo/topic antes. El siguiente componente es un poco más interesante. Tiene un botón que activará una herramienta draw y una etiqueta que mostrará la distancia que se está dibujando.< / P >< P >< / P >< PRE class= "lia-code-sample line-numbers language-none"> \/** @jsx React.DOM * \/ define([
& nb sp ; 'react',
& nb sp ; 'esri/toolbars/draw',
& nb sp ; 'esri/geometry/geometryEngine',
& nb sp ; 'dojo/topic',
& nb sp ; 'dojo/on',
& nb sp ; 'helpers/NumFormatter'
], function(
& nb sp ; React,
& nb sp ; Draw, geomEngine,
& nb sp ; topic, on,
& nb sp ; format
) {
& nb sp ; var fixed = format(3);
& nb sp ; var DrawToolWidget = React.createClass({
& nb sp ; & nb sp ; getInitialState: function() {
& nb sp ; & nb sp ; & nb sp ; return {
& nb sp ; & nb sp ; & nb sp ; & nb sp ; startPoint: null,
& nb sp ; & nb sp ; & nb sp ; & nb sp ; btnText: 'Dibujar línea',
& nb sp ; & nb sp ; & nb sp ; & nb sp ; distance: 0,
& nb sp ; & nb sp ; & nb sp ; & nb sp ; x: 0,
& nb sp ; & nb sp ; & nb sp ; & nb sp ; y: 0
& nb sp ; & nb sp ; & nb sp ; };
& nb sp ; },
& nb sp ; componentDidMount: function() {
& nb sp ; & nb sp ; this.draw = new Draw(this.props.map);
& nb sp ; & nb sp ; this.handler = this.draw.on('draw-end', this.onDrawEnd);
& nb sp ; & nb sp ; this.subscriber = topic.subscribe(
& nb sp ; & nb sp ; & nb sp ; 'map-mouse-move', this.mapCoordsUpdate
& nb sp ; & nb sp );
},
componentWillUnMount: function() {
this.handler.remove();
this.subscriber.remove();
},
onDrawEnd: function(e) {
this.draw.deactivate();
this.setState({
startPoint: null,
bt nText : 'Dibujar línea' }); }, mapCoordsUpdate : function(data) { this.setState(data); // no estoy seguro si me gusta esta comprobación condicional if (this.state.startPoint) { this.updateDistance(data); } }, updateDistance : function(endPoint) { var distance = geomEngine.distance(this.state.startPoint, endPoint); this.setState({ distance : distance }); }, drawLine : function() { this.setState({ btnText : 'Dibujando...' }); this.draw.activate(Draw.POLYLINE); on.once(this.props.map, 'click', function(e) { this.setState({ startPoint : e.mapPoint }); // muy hacky, pero la interacción Draw.LINE es extraña de usar on.once(this.props.map, 'click', function() { this.onDrawEnd(); }.bind(this)); }.bind(this)) }, render : function() { return ( {this.state.btnText} Distancia: {fixed(this.state.distance)} ); } }); return DrawToolWidget; });Este componente es un poco más complejo, pero usará el geometryEngine para calcular la distancia entre el punto de inicio y el punto final en línea recta. Hago un poco de hacky-ness feo para detener la interacción de dibujo después de un solo segmento de línea, porque dibujar una sola línea con la herramienta Draw es un comportamiento un poco extraño (en mi opinión). Si quisieras rastrear la distancia total de los segmentos de la polilínea mientras se dibujan, es un poco más complicado y necesitarías actualizar el punto de inicio con el último punto final y acumular las distancias a medida que avanzas. Suena como una buena función reduce. Dejaré ese ejercicio para ti. Si dedicara más tiempo a esto, podría separar parte de la lógica que ocurre aquí en métodos auxiliares y tal vez limpiar algunos listeners, pero tal como está, funciona bastante bien.<\/P><\/P>Lo último que necesitas hacer es realmente renderizar estos componentes en la página.<\/P><\/P>\/\** @jsx React.DOM *\/\ndefine([\n  'react',\n  'dojo\/query',\n  'dojo\/dom',\n  'dojo\/dom-construct',\n  '.\/components\/Locator',\n  '.\/components\/DrawTools'\n], function(\n  React,\n  query, dom, domConstruct,\n  Locator, DrawTools\n) {\n  var createContainer = function() {\n    var c = query('.widget-container');\n    if (c.length) {\n      return c.shift();\n    }\n    var container = domConstruct.create('div', {\n      className: 'widget-container'\n    }, dom.byId('map_root'), 'first');\n    return container;\n  };\n  var addContainer = function(map) {\n    React.render(\n      <div>\n        <Locator map={map} \/>\n        <DrawTools map={map} \/>\n      <\/div>,\n      createContainer());\n  };\n  return {\n    addContainer: addContainer\n  };\n});<\/PRE>Aquí es donde React renderizará los componentes en el elemento DOM definido en la página y puedo pasar el mapa a mis widgets como propiedades. Realmente no hablé sobre props o propTypes, pero puedes leer más sobre cómo funcionan aquí. También aquí hay un buen artículo sobre Propiedades vs Estado.<\/P><\/P>Empieza a hackear<\/H2>Puedes ver una demo de esta aplicación en acción aquí. En caso de que te lo hayas perdido, el código fuente está aquí.<\/P>Como puedes ver, este es solo otro ejemplo de poder integrar cualquier biblioteca o framework de tu elección en tus aplicaciones ArcGIS API for JavaScript. Hay ciertas partes de Dojo que necesitas usar (y algunas son muy útiles, como dojo/topic), pero más allá de eso no es tan difícil mezclar tus bibliotecas JavaScript. React no es un framework completo, y los desarrolladores de FB serán los primeros en decirte eso, pero hace muy bien la V en MVC. Así que ¡a hackear amigos y sobre todo disfrútenlo!<\/P><\/P>Para más consejos y trucos geodev, visita mi blog.<\/P><\/BODY><\/HTML>