Merge pull request #477 from Esri/update-custom-ui-sample

chore(jsapi-custom-ui): update to use component terminology and syntax

esm-samples/jsapi-custom-ui/README.md

@@ -1,6 +1,8 @@
 # Custom UI component with React and Vite
 
-This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). The component is created in React and then added to the Map as a DOM element using [View UI](https://developers.arcgis.com/javascript/latest/view-ui/). This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements.
+This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). You can also use any other major JavaScript framework. For more information about building custom UI with the ArcGIS JS SDK, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic.
+
+The component in this sample is created in [JSX](https://react.dev/learn/writing-markup-with-jsx) and then added to the Map as a DOM element using the ArcGIS JS SDK's [View UI](https://developers.arcgis.com/javascript/latest/view-ui/) interface. This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements.
 
 ## Get Started
 

esm-samples/jsapi-custom-ui/src/App.jsx

@@ -3,14 +3,14 @@ import Bookmarks from '@arcgis/core/widgets/Bookmarks.js';
 import Expand from '@arcgis/core/widgets/Expand.js';
 import MapView from "@arcgis/core/views/MapView.js";
 import WebMap from "@arcgis/core/WebMap.js";
-import CenterWidget from "./CenterWidget.jsx";
+import CenterComponent from "./CenterComponent.jsx";
 
 import "./App.css";
 
 function App() {
 
   const [viewState, setViewState] = useState(null);
-  const centerWidgetID = useRef("center-widget");
+  const centerComponentID = useRef("center-component");
   const mapDiv = useRef(null);
 
   useEffect(() => {
@@ -39,16 +39,16 @@ function App() {
 
       // Add the Expand and BookMarks widgets to the top-right corner of the view
       view.ui.add(bkExpand, "top-right");
-      // Add Center widget to the bottom-right corner of the view
-      view.ui.add(document.getElementById(centerWidgetID.current), "bottom-right");
+      // Add Center component to the bottom-right corner of the view
+      view.ui.add(document.getElementById(centerComponentID.current), "bottom-right");
 
       webmap.when(() => {
         setViewState({view});
       });
     }
   }, [mapDiv]);
 
-  return <div className="mapDiv" ref={mapDiv}><CenterWidget id={centerWidgetID.current} view={viewState}></CenterWidget></div>;
+  return <div className="mapDiv" ref={mapDiv}><CenterComponent id={centerComponentID.current} view={viewState}></CenterComponent></div>;
 }
 
 export default App;

esm-samples/jsapi-custom-ui/src/CenterWidget.jsx → esm-samples/jsapi-custom-ui/src/CenterComponent.jsx

@@ -1,15 +1,15 @@
 import { useState, useEffect } from 'react';
 import { watch } from '@arcgis/core/core/reactiveUtils';
-import './center-widget.css';
+import './center-component.css';
 
 /**
- * React component that can be used as an ArcGIS JS SDK widget. 
- * This widget dynamically displays the center of the map extent
+ * React component that can be used in an ArcGIS JS SDK application.
+ * This component dynamically displays the center of the map extent
  * @param {*} view an instance of a `Mapview` or `SceneView`
- * @param {string} id - The `id` of the widget's parent HTML div element
- * @returns The widget's HTML div
+ * @param {string} id - The `id` of the components's parent HTML div element
+ * @returns The components's HTML div
  */
-const CenterWidget = ({ view, id }) => {
+const CenterComponent = ({ view, id }) => {
   const [center, setCenter] = useState(null);
 
   useEffect(() => {
@@ -18,15 +18,15 @@ const CenterWidget = ({ view, id }) => {
       () => view?.view?.extent,
       (value) => {
         const { latitude, longitude } = value.center;
-        // Update the widget's display
+        // Update the component's display
         setCenter(`${longitude.toFixed(4)}, ${latitude.toFixed(4)}`);
     });
     // Clean up any handles or event listeners
     // created in useEffect method
     return () => handle.remove();
   }, [view]);
 
- return <div id={id} className="center-widget">Center: {center}</div>;
+ return <div id={id} className="center-component">Center: {center}</div>;
 };
 
-export default CenterWidget;
+export default CenterComponent;