create first vanilla map test

src/App.css

@@ -1,38 +1,38 @@
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }

src/App.js

@@ -1,25 +1,31 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useRef, useEffect } from "react";
+import "./App.css";
+import Map from "@arcgis/core/Map";
+import MapView from "@arcgis/core/views/MapView";
+import esriConfig from "@arcgis/core/config"; // https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html
+
+//! Uncomment this for online api use
+/*esriConfig.apiKey =
+	"//! FREE_API_KEYS_ARE_AVAIABLE_HERE: https://developers.arcgis.com/api-keys/";*/
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+	const MapEl = useRef(null);
+	useEffect(() => {
+		const map = new Map({
+			basemap: "topo-vector", //"arcgis-topographic" for online api use
+		});
+
+		const view = new MapView({
+			container: MapEl.current,
+			map: map,
+		});
+	});
+	return <div style={{ height: 800 }} ref={MapEl}></div>;
 }
 
 export default App;
+
+/*
+https://developers.arcgis.com/javascript/latest/tooling-intro/
+https://developers.arcgis.com/javascript/latest/get-started/
+*/

src/Map.jsx

@@ -0,0 +1,36 @@
+import React, { useRef, useEffect } from "react";
+import { loadModules } from "esri-loader";
+import esriConfig from "@arcgis/core/config";
+esriConfig.apiKey =
+	"AAPK9928ede1767b45ac9580fcf5d81db099rEWnuzCXUeor-FPlge6bydprGlILUxdTVtlVLso0ngwUt2OnR0As2NeUJlXsmRD6";
+function Map() {
+	const MapEl = useRef(null);
+
+	useEffect(() => {
+		let view;
+		loadModules(["esri/views/MapView", "esri/Map"], {
+			css: true,
+		}).then(([MapView, Map]) => {
+			const map = new Map({
+				// Map
+				basemap: "arcgis-topographic",
+			});
+			view = new MapView({
+				// basically the div container
+				map: map,
+				center: [],
+				zoom: 8,
+				container: MapEl.current, // Connection to div element below
+			});
+		});
+		return () => {
+			if (!!view) {
+				view.destroy();
+				view = null;
+			}
+		};
+	});
+	return <div style={{ height: 800 }} ref={MapEl}></div>;
+}
+
+export default Map;

src/index.css

@@ -1,13 +1,14 @@
+@import "@arcgis/core/assets/esri/themes/light/main.css";
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+		monospace;
 }