To start integrating Mapbox into your React application, the first task is to install Mapbox GL JS, which is the library you will use to render interactive vector maps. You can add it to your project by running the following command in your project directory:

npm install mapbox-gl

Once installed, you will need to import Mapbox GL JS into your React component where you want to display the map. At the top of your React file, add:

import mapboxgl from "mapbox-gl";

This import statement makes the Mapbox GL JS library available in your component, allowing you to create and control maps within your React app.

To use Mapbox services, you must have a Mapbox access token. You can obtain an access token by signing up for a free account at Mapbox. After logging in, you will find your default public access token in your account dashboard.

For security, never hard-code your access token directly into your source files. Instead, store the token in an environment variable, such as in a .env file at your project root:

REACT_APP_MAPBOX_TOKEN=your_actual_mapbox_token_here

In your React code, you can then access the token securely using:

mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;

This approach keeps your token out of your codebase and version control, reducing the risk of accidental exposure or misuse.