> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/ja/llms.txt)

# React Quickstart

# Geocoding - React Quickstart

**Mapbox Geocoding** provides a convenient way to leverage the Mapbox [Geocoding API](https://docs.mapbox.com/api/search/geocoding-v6/) in a web or Node environment. Create interactive, powerful search sessions enabling users to search for address and places.

Easy-to-use UI components can be dropped into websites as standalone elements or as part of a comprehensive map experience.

![geocoding](https://docs.mapbox.com/mapbox-search-js/ja/assets/ideal-img/geocoding.f551a34.480.png)

This Quickstart Guide will help you get started with Geocoding using the [Mapbox Search JS React framework](https://docs.mapbox.com/mapbox-search-js/ja/guides/#search-js-react).

To use Geocoding in a website (without React), see the [Geocoding Web Quickstart](https://docs.mapbox.com/mapbox-search-js/ja/guides/geocoding/web/).

## Prerequisites

To use Mapbox Search JS, you need to have a Mapbox [access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/).

### Your default public token

You can use your *default public token* to get started with the code snippets in this guide.

To get your default public token, login to [account.mapbox.com](https://account.mapbox.com) and scroll down to the **Access Tokens** section.

This access token associates your search requests with a Mapbox account for billing. For more information on creating and using access tokens, see our [token management documentation](https://docs.mapbox.com/accounts/guides/tokens/).

## Installation

Install the NPM package.

```bash
npm install --save @mapbox/search-js-react
```

Once installed, the [`Geocoder`](https://docs.mapbox.com/mapbox-search-js/ja/api/react/geocoding/#geocoder) component will be available for import into your React app.

## Use the `Geocoder` component

Add the `Geocoder` component wherever you need an interactive geocoding input. Be sure to pass in your Mapbox access token as the prop `accessToken`, and any other configuration you may need. For the full list of props, see [`Geocoder` component](https://docs.mapbox.com/mapbox-search-js/ja/api/react/geocoding/#geocoder) in the React reference.

```jsx
import { Geocoder } from '@mapbox/search-js-react';

const MyComponent = () => {
  return (
    <div>
    <Geocoder
      accessToken='YOUR_MAPBOX_ACCESS_TOKEN'
      options={{
        language: 'en',
        country: 'US'
      }}
    />
    </div>
  )
}

export default MyComponent

```

> **Related content (example): [Autofill Checkout (React) example](https://docs.mapbox.com/mapbox-search-js/ja/example/autofill-checkout-react/)**
> 
> Try a full address autofill workflow in React, including address confirmation and minimap.

## Integration with a Mapbox GL JS Map

The `<Geocoder>` component can be used in a standalone fashion, but a common use case is to zoom to a location on a map and show a marker pin after the user chooses a result. `<Geocoder>` includes convenient configuration options for binding with a [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/) Map instance to achieve this functionality.

The `map` prop binds to the `Map` instance, and the props `mapboxgl` and `marker` are used to create the Marker.

```jsx
import { useRef, useEffect, useState } from "react";
import { Geocoder } from "@mapbox/search-js-react";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

const accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";

export default function MapWithGeocoder() {
  const mapContainerRef = useRef();
  const mapInstanceRef = useRef();
  const [, setMapLoaded] = useState(false);
  const [inputValue, setInputValue] = useState("");
  useEffect(() => {

    mapInstanceRef.current = new mapboxgl.Map({
      accessToken,
      container: mapContainerRef.current, // container ID
      center: [-74.5, 40], // starting position [lng, lat]
      zoom: 9, // starting zoom
    });

    mapInstanceRef.current.on("load", () => {
      setMapLoaded(true);
    });
  }, []);

  return (
    <>
      <Geocoder
        accessToken={accessToken}
        map={mapInstanceRef.current}
        mapboxgl={mapboxgl}
        value={inputValue}
        onChange={(d) => {
          setInputValue(d);
        }}
        marker
      />
      <div id="map-container" ref={mapContainerRef} style={{ height: 300 }} />
    </>
  );
}



```

## Additional Resources

Quickstart Guides are also available for the other main features of Mapbox Search JS:

-   Address Autofill - [Web](https://docs.mapbox.com/mapbox-search-js/ja/guides/autofill/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/ja/guides/autofill/react/)
-   Search Box - [Web](https://docs.mapbox.com/mapbox-search-js/ja/guides/search/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/ja/guides/search/react/)

Geocoding can also be implemented with a custom UI by using the [Mapbox Search JS Core Framework](https://docs.mapbox.com/mapbox-search-js/ja/guides/#search-js-core).