Oi pessoal neste breve tutorial que eu preparei para vocês vamos aprender como criar um boilerplate simples para utilizar a API JavaScript ArcGIS com React.js bem como vamos aprender como criar um widget simples de zoom. Vamos utilizar a biblioteca esri-loader que ajuda na utilização da API JavaScript ArcGIS com frameworks e bundlers e também vamos utilizar styled-components para criar os estilos.

Pré-requisitos

• Node.js;
• Visual Studio Code ou outro editor de sua preferência.

Criação do Boilerplate

Escolher uma pasta de sua preferência e executar o comando:

npx create-react-app boilerplate-esri-javascript-api-react

Este comando vai instalar todas as dependências de uma aplicação React.js. Quando a instalação terminar é preciso navegar até a pasta que foi criada (boilerplate-esri-javascript-api-react) e deletar os seguintes arquivos:

• src/logo.svg;
• src/setupTest.js;
• src/reportWebVitals.js;
• src/index.css;
• src/App.test.js.

Estes arquivos são padrão e não serão utilizados neste boilerplate. Após deletar os arquivos é preciso atualizar alguns arquivos:

• src/index.js

• src/App.js

• src/App.css

Para finalizar o boilerplate é preciso instalar a biblioteca esri-loader com o seguinte comando:

npm install –save esri-loader

Após estas etapas nosso boilerplate esta finalizado e pode ser utilizado para iniciar projetos que utilizem a API JavaScript ArcGIS com React.js.

Exemplo de Mapa e Widget Personalizado

Para iniciar nosso exemplo é preciso copiar o boilerplate para alguma pasta de seu interesse pois ele é um modelo inicial para começar uma aplicação, em seguida para este exemplo é preciso criar as seguintes pastas:

• src/components
• src/contexts

Dentro da pasta components vamos criar os componentes BaseMap e ZoomWidget e na pasta contexts vamos criar um contexto para que o objeto map e view fiquem disponíveis para toda a aplicação.

Como os estilos dos componentes serão criados com JavaScript precisamos instalar o styled-components com seguinte comando:

npm install –save styled-components

Para finalizar o exemplo por favor assistam ao vídeo onde é explicado o código que também pode ser baixado no seguinte link:

Repositório com os códigos do tutorial.