Updating HTML babel example to valid HTML (W3C) and new react syntax

joseeloren · joseeloren · commit 8f4a11017074 · 2024-08-20T09:18:06.000+01:00
diff --git a/public/html/single-file-example.html b/public/html/single-file-example.html
@@ -1,36 +1,36 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8">
     <title>Hello World</title>
-    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
 
-    <!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project -->
-    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   </head>
   <body>
     <div id="root"></div>
     <script type="text/babel">
 
-      ReactDOM.render(
-        <h1>Hello, world!</h1>,
-        document.getElementById('root')
-      );
+      function MyApp() {
+        return <h1>Hello, world!</h1>;
+      }
+
+      const container = document.getElementById('root');
+      const root = ReactDOM.createRoot(container);
+      root.render(<MyApp />);
 
     </script>
     <!--
       Note: this page is a great way to try React but it's not suitable for production.
       It slowly compiles JSX with Babel in the browser and uses a large development build of React.
 
-      Read this section for a production-ready setup with JSX:
-      https://reactjs.org/docs/docs/add-react-to-a-website#try-react-with-jsx
-
-      In a larger project, you can use an integrated toolchain that includes JSX instead:
-      https://reactjs.org/docs/start-a-new-react-project
+      Read this page for starting a new React project with JSX:
+      https://react.dev/learn/start-a-new-react-project
 
-      You can also use React without JSX, in which case you can remove Babel:
-      https://reactjs.org/docs/add-react-to-a-website#add-react-in-one-minute
+      Read this page for adding React with JSX to an existing project:
+      https://react.dev/learn/add-react-to-an-existing-project
     -->
   </body>
 </html>
