---
title: "Get Started with React JS and MapLibre GL JS | React | Maplibre gl js"
description: "Display maps in React JS with MapLibre GL JS."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Get Started with React JS and MapLibre GL JS

In this tutorial, you’ll learn how to display a map in React JS using MapLibre GL JS. Together we will make a simple full-screen map application as an example of how to use MapTiler maps together with React and MapLibre GL JS for your own React app.

## Installation and setting up

1.  Clone the [Get Started with React JS and MapLibre GL JS](https://github.com/maptiler/get-started-react-maplibre-gl-js) repo

```sh
git clone https://github.com/maptiler/get-started-react-maplibre-gl-js.git my-react-map
```

1.  Navigate to the newly created project folder **my-react-map**

```sh
cd my-react-map
```

1.  Install dependencies

```sh
npm install
```

1.  Now navigate to the `src` folder and open the `App.js` file. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
    
    ```html
    <Map mapLib={maplibregl}
        initialViewState={{
          longitude: 16.62662018,
          latitude: 49.2125578,
          zoom: 14
        }}
        style={{width: "100%", height: "100vh"}}
        mapStyle="https://api.maptiler.com/maps/{{site.map-styles.streets}}/style.json?key=YOUR_MAPTILER_API_KEY_HERE"
      >
    ```
    
2.  Start your local environment
    

```sh
npm start
```

1.  You will find your app on the address `http://localhost:3000`. Now you should see the map in your browser.

## Learn more

If you want to learn how to create a React component to render a map using MapLibre GL JS see the [How to display a map in React using MapLibre GL JS](https://docs.maptiler.com/react/maplibre-gl-js/how-to-use-maplibre-gl-js/) tutorial.

### React JS with MapTiler maps

If you’re looking to develop React applications with MapTiler SDK JS, check out our tutorial titled [React JS with MapTiler maps](https://docs.maptiler.com/react/). This step-by-step tutorial will provide you with the necessary guidance and examples to create a React JS component that leverages the power of MapTiler SDK JS mapping library to render maps.

### Get Started With MapLibre GL JS for React Native

You can also develop your applications using React Native. Check out the tutorial [Get started with React Native and MapLibre GL JS](https://docs.maptiler.com/react-native/)