mapbox · Countdown369 · Aug 25, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
diff --git a/basic/README.md b/basic/README.md
@@ -1,5 +1,4 @@
-Basic example
----
+## Basic example
 
 Initialize a map with coordinates set by React, update the state of coordinates on map movement, and display that data in an element provided by the render function.
 
@@ -15,4 +14,10 @@ Initialize a map with coordinates set by React, update the state of coordinates
 
     open http://localhost:3000/
 
+### Access token
+
+    mapboxgl.accessToken = // YOUR_API_KEY_HERE
+
+Replace the [API key](https://docs.mapbox.com/help/getting-started/access-tokens/) in `src/Map.js`.
+
 Runs the app from http://localhost:3000
diff --git a/basic/package-lock.json b/basic/package-lock.json
diff --git a/basic/package.json b/basic/package.json
@@ -2,15 +2,21 @@
   "name": "basic",
   "version": "0.1.0",
   "dependencies": {
-    "mapbox-gl": "^1.11.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.3"
+    "mapbox-gl": "^2.15.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/basic/public/index.html b/basic/public/index.html
@@ -2,14 +2,24 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link href='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.min.css' rel='stylesheet'>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css' rel='stylesheet' />
+    <link
+      href="https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css"
+      rel="stylesheet"
+    />
+    <script
+      async
+      defer
+      src="https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.js"
+    ></script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Basic</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script src='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js'></script>
   </body>
 </html>
diff --git a/basic/src/index.js b/basic/src/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
diff --git a/data-overlay/README.md b/data-overlay/README.md
@@ -1,5 +1,4 @@
-Data overlay example
----
+## Data overlay example
 
 Add a data overlay to a map via React and use controls to visualize it differently.
 
@@ -15,6 +14,12 @@ Add a data overlay to a map via React and use controls to visualize it different
 
     open http://localhost:3000/
 
+### Access token
+
+    mapboxgl.accessToken = // YOUR_API_KEY_HERE
+
+Replace the [API key](https://docs.mapbox.com/help/getting-started/access-tokens/) in `src/Map.js`.
+
 Runs the app from http://localhost:3000
 
 Data provided by [Natural Earth](http://www.naturalearthdata.com/).