<\/HEAD>
<\/P>
Před nedávnem jsem napsal blogový příspěvek<\/A> o použití ArcGIS JavaScript API s ReactJS<\/A> pro widgety. V poslední době jsem mluvil s několika lidmi o Reactu, tak jsem si řekl, že téma zde znovu otevřu. Největší otázka, kterou si možná položíte, je proč používat React<\/A>? Osobně si myslím, že React má opravdu elegantní API. Když ho začnete používat a zjistíte, jak snadné je skládat komponenty, které tvoří uživatelské rozhraní, myslím, že právě tehdy React skutečně vyniká<\/EM>. Jednou z pěkných vlastností Reactu je použití virtuálního DOMu<\/A>. V podstatě, pokud aktualizujete stav vaší aplikace na kořenové úrovni, přerenderuje se celý DOM aplikace. Zní to, jako by to bylo pomalé, ale není. Může být<\/EM>, pokud uděláte něco hloupého, jako například pokus o vytvoření velmi velkého<\/STRONG> JSON editoru **ahem**<\/EM>. Více o tom, jak aktualizace probíhají, si můžete přečíst zde<\/A>.<\/P><\/P>
Je to všechno jen DOM<\/H2>Pokud jste obeznámeni s prací s Dijity a hacky-ness, abych zastavil interakci kreslení po jednom úseku čáry, protože jednorázové kreslení pomocí nástroje Draw je trochu zvláštní chování (podle mého názoru). Pokud byste chtěli sledovat celkovou vzdálenost segmentů polylinie během kreslení, je to trochu složitější a museli byste aktualizovat výchozí bod posledním koncovým bodem a kumulovat vzdálenosti postupně. Zní to jako pěkná reduce funkce. Ten úkol nechám na vás. Kdybych tomu věnoval více času, možná bych část logiky zde rozdělil do pomocných metod a možná vyčistil některé posluchače, ale tak jak to je, funguje to docela dobře.Poslední věc, kterou musíte udělat, je skutečně vykreslit tyto komponenty na stránce./** @jsx React.DOM */
define([
'react',
'dojo/query',
'dojo/dom',
'dojo/dom-construct',
'./components/Locator',
'./components/DrawTools'
], function(
React,
query, dom, domConstruct,
Locator, DrawTools
) {
var createContainer = function() {
var c = query('.widget-container');
if (c.length) {
return c.shift();
}
var container = domConstruct.create('div', {
className: 'widget-container'
}, dom.byId('map_root'), 'first');
return container;
};
var addContainer = function(map) {
React.render(
,
createContainer());
};
return {
addContainer: addContainer
};
});Tady React vykreslí komponenty do definovaného DOM prvku na stránce a já mohu předat mapu svým widgetům jako vlastnosti. O props nebo propTypes jsem moc nemluvil, ale můžete si přečíst více o tom, jak fungují zde. Také zde je pěkný článek o Properties vs State.Začněte hackovat
Můžete vidět demo této aplikace v akci zde. Pokud jste to přehlédli, zdrojový kód je zde.
Jak vidíte, toto je jen další příklad toho, jak můžete integrovat libovolnou knihovnu nebo framework dle vašeho výběru do vašich aplikací ArcGIS API for JavaScript. Existují určité části Dojo, které musíte použít (a některé jsou velmi užitečné, například dojo/topic), ale jinak není příliš těžké kombinovat vaše JavaScriptové knihovny. React není úplný framework a FB vývojáři vám to řeknou jako první, ale velmi dobře dělá V v MVC. Takže hackujte lidi a hlavně si to užijte!
Pro více tipů a triků z geodev světa navštivte můj blog.
