upgrade react version to 18; add comments;

Author: Cube-J

1.hello-world/13.read-video-react-ts/src/components/VideoDecode/VideoDecode.tsx

@@ -3,12 +3,16 @@ import React from 'react';
 import './VideoDecode.css'
 
 class VideoDecode extends React.Component {
-    pScanner: Promise<BarcodeScanner> = BarcodeScanner.createInstance();
+    pScanner: Promise<BarcodeScanner>|null = null;
     elRef: React.RefObject<HTMLDivElement> = React.createRef();
     async componentDidMount() {
         try {
-            const scanner = await this.pScanner;
+            const scanner = await (this.pScanner = BarcodeScanner.createInstance());
+            // Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'. 
+            if(scanner.isContextDestroyed()) return;
             await scanner.setUIElement(this.elRef.current!);
+            // Should judge if scanner is destroyed after 'await' in React 18 'StrictMode'. 
+            if(scanner.isContextDestroyed()) return;
             scanner.onFrameRead = results => {
                 for (let result of results) {
                     console.log(result.barcodeText);

1.hello-world/13.read-video-react-ts/src/index.tsx

@@ -2,7 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
 
-root.render(<App />);
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

1.hello-world/13.read-video-react-ts/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

1.hello-world/4.read-video-react/package.json

@@ -8,9 +8,9 @@
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "dynamsoft-javascript-barcode": "9.6.0",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1",
-        "react-scripts": "4.0.3",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-scripts": "^4.0.3",
         "web-vitals": "^1.0.1"
     },
     "scripts": {

1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.js

@@ -1,14 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

1.hello-world/4.read-video-react/src/index.js

@@ -81,7 +81,7 @@ export default {
           }
         };
         scanner.onUniqueRead = (txt, result) => {
-          alert(txt, result);
+          alert(txt);
         }
         await scanner.open();
       } catch (ex) {