Created
June 19, 2025 23:18
-
-
Save AlperRehaYAZGAN/df453528e0049e7dcc34fc9b3cb65939 to your computer and use it in GitHub Desktop.
https://code.esm.sh/ sample react testing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>React App</title> | |
| <link rel="stylesheet" href="./style.css"> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "react": "https://esm.sh/[email protected]", | |
| "react-dom/client": "https://esm.sh/[email protected]/client" | |
| } | |
| } | |
| </script> | |
| <script type="module" src="https://esm.sh/tsx"></script> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| import React from "react"; | |
| import ReactDOM from "https://esm.sh/[email protected]"; | |
| import { createRoot } from "react-dom/client"; | |
| import { | |
| QueryClient, | |
| QueryClientProvider, | |
| useQuery, | |
| } from "https://esm.sh/@tanstack/[email protected]"; | |
| const queryClient = new QueryClient(); | |
| function QuerySample() { | |
| const { data, isLoading, error } = useQuery({ | |
| queryKey: ["todos"], | |
| queryFn: async () => { | |
| return [ | |
| { id: 1, title: "Buy milk" }, | |
| { id: 2, title: "Write code" }, | |
| ]; | |
| }, | |
| }); | |
| return ( | |
| <ul> | |
| {data?.map((todo) => ( | |
| <li key={todo.id}>{todo.title}</li> | |
| ))} | |
| </ul> | |
| ); | |
| } | |
| function App() { | |
| return ( | |
| <QueryClientProvider client={queryClient}> | |
| <h1>React Query over ESM</h1> | |
| <QuerySample /> | |
| </QueryClientProvider> | |
| ); | |
| } | |
| createRoot(root).render(<App />); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment