- This example is no longer recommended for use, though it does work. The pattern you're looking for in integrating Mapbox GL JS with React is explained in detail by Tom Macwright in his blog post and it uses style diffs to transition between map states in a reactive manner rather than using the more imperative Mapbox GL JS API as this code does. This library from Uber uses it. Good luck.
Simple React component for a Mapbox GLJS map (aka mapbox-gl-js)
A Mapbox GL map creates and manages its own DOM elements outside of React's virtual DOM. Not a problem, we can still encapsulate a map into a React component and keep things separate. This example borrows heavily from a blog post written by Nicolas Hery demonstrating a technique for incorporating D3 into a React app.
Checkout the code and cd into the root directory
Edit App.js and enter your own default center location, zoom level, API access key and your own style URL (or someone else's) created using Mapbox Studio. Now start up the dev server.
Browse to localhost:8080/#your-public-mapbox-token
Now continue to develop this example as you wish but note it is not well-suited for production use. For a more full-featured React app example written in ES6 using React, React Router, Redux, Material UI, Webpack etc. see my seed project
When ready you can make your demo map publicly available for free using Firebase's static hosting service. Signup and create a new app at firebase.com. Now go to the hosting tab for your new app for further instruction. In summary install firebase CLI too, authenticate against your account, initialize project synch, and push your code. That's all there is too it.
npm install firebase firebase init firebase deploy