Mapas com React

Neste post vamos desenvolver uma página web para demonstrar, na prática, a integração de Mapas em uma aplicação com React usando Leaflet.

Alguns pontos que vamos abordar:

• Geolocalização;
• Consumo de API;
• Input com Autocomplete usando React-Select;
• Integração com Mapas;
• Estilização do Mapa e Marcadores.

Leaflet é uma biblioteca JavaScript open-source para trabalhar com Mapas em aplicações web e mobile. Pode ser simplesmente integrada a um site usando apenas HTML, CSS e JavaScript.

Podemos também integrar a Leaflet ao React com a biblioteca React Leaflet, que tem suporte ao TypeScript sendo bastante simples de utilizar. Ambas serão utilizadas em nossa aplicação de demonstração.

Somando todas essas tecnologias e conceitos, no final deste post vamos ter desenvolvido o app Entregas. Vai ser assim:

Sempre queremos entregar a melhor experiência para nossa audiência.

Para uma melhor experiência com a leitura, você precisa entender o básico de:

• Como fazer requisições à API;
• React & TypeScript
• CSS
• NodeJS, Yarn ou Npm configurados e Create React App (CRA)

🔰 Iniciando o Projeto - CRA

Para criar um projeto React com TypeScript, execute o comando com Yarn:

yarn create react-app blog-react-maps-leaflet --template typescript

Ou com Npx (npm)

npx create-react-app blog-react-maps-leaflet --template typescript

Agora é só acessar o projeto para começar a codar:

cd blog-react-maps-Leaflet && code .

Construímos uma aplicação de pequeno porte, porém com um conteúdo rico em informações sobre integração de mapas no React em 2020, usando React Hooks.

A escolha do Leaflet é interessante, porque é bem fácil de utilizar, a integração com React é muito boa e o suporte ao TypeScript funciona bem;

A escolha do react-select para autocomplete foi devido a sua UI bem bonita, fácil de customizar e a DX (experiência de desenvolvimento) ser agradável com uma documentação excelente.

A documentação do react-select recomenda que seja utilizado CSS-in-JS como exemplo o styled-components, mas, para fins didáticos e práticos, usei o CSS; React-select é bem performática, pesquisei outras libs para fazer o autocomplete mas algumas tinham dependência com Google Places do Google Maps, por exemplo. Como react-select é agnóstica, serviu bem para esse propósito.

• Aprofundando no comando rename — em inglês
• Terminal com Oh My Zsh, Spaceship, Dracula e mais
• Ambiente de Desenvolvimento JavaScript
• Porque migramos para o Linux? - PR #15

E aí, o que achou desse post?

Espero que tenha curtido! 💜

O aprendizado é contínuo e sempre haverá um próximo nível! 🚀