ArcGIS API for JavaScript — это мощная библиотека, которую вы можете использовать для создания приложений, использующих возможности Платформы ArcGIS. Хотя вы можете использовать ArcGIS API for JavaScript отдельно для создания привлекательных картографических веб-приложений, некоторые разработчики предпочитают интегрировать его с другими библиотеками и платформами JavaScript (в частности, с более крупными веб-приложениями).

React — это популярная библиотека JavaScript с открытым исходным кодом, которая используется для создания повторно используемых компонентов пользовательского интерфейса для веб-приложений. Это быстро и просто и очень хорошо сочетается с ArcGIS API for JavaScript, поэтому этот шаблон реализации становится популярным среди многих разработчиков.
Этот блог представляет собой краткий обзор того, как вы можете начать использовать React с ArcGIS. API для JavaScript. Вы также можете посетить страницу руководства в документации, чтобы узнать больше о работе с React, библиотеками и фреймворками.

Начиная

Вы можете просмотреть исходный код приложения, которое мы собираемся рассмотреть, на github. Для этого приложения мы собираемся использовать @arcgis/webpack-plugin, чтобы помочь нам интегрировать ArcGIS API for JavaScript в наше приложение.

Лучшей практикой является изолировать работу API от компонентов пользовательского интерфейса, которые вы собираетесь создавать. Это хороший способ сохранить разделение задач в вашем развитии.

В этом примере мы собираемся выполнить работу по созданию нашей карты в data/app.js.

Глядя на этот фрагмент кода, вы можете видеть, что именно здесь мы создаем нашу карту и представление, за исключением того, что мы не сразу прикрепляем наше представление к странице. Мы экспортируем функцию с именем initialize, которая принимает аргумент для контейнера, который является элементом DOM, в котором будет отображаться наш MapView. Этот элемент DOM будет получен из компонента React, который мы напишем.

Компонент

Для нашего компонента WebMap мы воспользуемся совершенно новой функцией React, которая называется хуки. Хуки по-прежнему являются предложением React, и их запланировано завершить в начале 2019 года, поэтому я бы не рекомендовал пока использовать их в продакшене, но я подумал, что было бы забавно использовать их для этого примера.

Существует множество хуков React, которые вы можете использовать, но для наших целей нас интересуют только два.

  • useEffect
  • useRef

Хук useEffect запускается после рендеринга компонента React. Это делает его идеально подходящим для динамической загрузки нашего модуля data/app.js и запуска функции initialize, которую мы создали ранее. Но как нам получить элемент для нашего компонента? Вот тут-то и появляется useRef!

Хук useRef создает объект, который существует, пока компонент смонтирован. В нашем случае мы хотим отслеживать элемент DOM, который будет создан нашим компонентом React. Мы можем увидеть, как это выглядит в components/WebMap.js.

Глядя на этот пример, вы можете видеть, что мы используем хук useEffect для ленивой загрузки модуля, который отвечает за обработку части сопоставления нашего приложения. Это полезный шаблон, который вы можете использовать в своих приложениях для динамической загрузки ArcGIS API for JavaScript в приложениях веб-пакетов.

Теперь мы можем визуализировать этот компонент, как и любой другой компонент React в нашем приложении.

Ваше готовое приложение должно выглядеть так: это компонент React, отображающий веб-карту.

Резюме

Мы рассмотрели, как вы можете изолировать работу ArcGIS API for JavaScript в отдельном модуле вашего приложения, а затем динамически загружать этот модуль в свои компоненты React. Мы также рассмотрели некоторые передовые способы использования хуков React, которые помогут вам создавать компоненты React с помощью API.

Мы едва коснулись использования ArcGIS API for JavaScript с React. Оставайтесь с нами, так как в настоящее время я работаю над большим приложением, которое использует React и некоторые другие интересные функции React, такие как Контекст для управления данными и Приостановка для ленивой загрузки компонентов React!

Первоначально опубликовано на www.esri.com.