React로 맵을 만들고 싶었을 때의 비망록

소개

이제 React를 사용하여 Map 앱을 만들려고합니다.
분명히 React에는 Uber가 만든 React-map-gl이라는 라이브러리가 있다는 것이므로 그것을 사용하고 있습니다.

여기가 React-map-gl입니다.
공식 문서

이 기사는 라이브러리를 사용하여 Map 샘플을 열 때까지를 비망록적으로 작성한 메모입니다.
기본적으로, 여러가지 기사를 그대로 따라가면 되었기 때문에, 신규성 제로입니다.

흐름

이번의 거친 흐름은 이쪽의 기사대로 진행되었습니다.
[React.js] REACT-MAP-GL 입문 (링크)

절차

「React는 어떤 것인가」를 잡는다

우선, React가 어떤 것인지의 감각을 잡아 갑니다.

이것은 공식 문서를 이해하기 쉽습니다.
공식 문서 (링크)

Webpack 환경 구축

JS의 모듈 핸들러인 Webpack을 사용해 간다고 합니다.
환경 구축은 이쪽을 바탕으로 실시했습니다.
React와 webpack2로 환경 구축

이때 ".babelrc"는 파일의 의미를 모르기 때문에 여기에서 배웠습니다.
Babel의 기본 사용법 (링크)

Mapbox 계정을 만들고 토큰 받기

젠린이 만드는 Mapbox 토큰이 필요하므로 준비합니다.
Mapbox 사이트 (링크)

기사의 순서를 바탕으로 복제한다.

마지막으로 복제합니다.
↓의 기사의 후반의 순서대로 진행하면 되었습니다!
[React.js] REACT-MAP-GL 입문 (링크)

결과 확인

결과는 이런 느낌
정말 예쁘다! ! ! !