| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <title>Component Stacks</title> |
| 6 | <style> |
| 7 | html, body { |
| 8 | margin: 20px; |
| 9 | } |
| 10 | pre { |
| 11 | background: #eee; |
| 12 | border: 1px solid #ccc; |
| 13 | padding: 2px; |
| 14 | } |
| 15 | </style> |
| 16 | </head> |
| 17 | <body> |
| 18 | <div id="container"> |
| 19 | <p> |
| 20 | To install React, follow the instructions on |
| 21 | <a href="https://github.com/facebook/react/">GitHub</a>. |
| 22 | </p> |
| 23 | <p> |
| 24 | If you can see this, React is <strong>not</strong> working right. |
| 25 | If you checked out the source from GitHub make sure to run <code>npm run build</code>. |
| 26 | </p> |
| 27 | </div> |
| 28 | <script type="module"> |
| 29 | import React from 'https://esm.sh/react@canary/?dev'; |
| 30 | import ReactDOMClient from 'https://esm.sh/react-dom@canary/client?dev'; |
| 31 | |
| 32 | window.React = React; |
| 33 | window.ReactDOMClient = ReactDOMClient; |
| 34 | |
| 35 | import("./Example.js").then(({ default: Example }) => { |
| 36 | console.log("Example", Example) |
| 37 | const container = document.getElementById("container"); |
| 38 | const root = ReactDOMClient.createRoot(container); |
| 39 | root.render(React.createElement(Example)); |
| 40 | }); |
| 41 | </script> |
| 42 | <h3>The above stack should look something like this:</h3> |
| 43 | <pre> |
| 44 | at Lazy |
| 45 | at Component (/stacks/Component.js:7:1) |
| 46 | at div |
| 47 | at Suspense |
| 48 | at BabelClassWithFields (/stacks/BabelClasses-compiled.js:31:31) |
| 49 | at BabelClass (/stacks/BabelClass-compiled.js:13:29) |
| 50 | at FrozenClass (/stacks/Components.js:22:1) |
| 51 | at NativeClass (/stacks/Component.js:16:1) |
| 52 | at Custom Name (/stacks/Component.js:11:1) |
| 53 | at ErrorBoundary (/stacks/Example.js:5:1) |
| 54 | at Example (/stacks/Example.js:32:1)</pre> |
| 55 | </body> |
| 56 | </html> |