react.json

{
  "title": "React demo",
  "activeEditor": "script",
  "markup": {
    "language": "html",
    "content": "<div id=\"root\"></div>"
  },
  "style": {
    "language": "css",
    "content": ".App {\n  font-family: sans-serif;\n  text-align: center;\n}\n"
  },
  "script": {
    "language": "jsx",
    "content": "import { StrictMode, Suspense } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n  const [count, setCount] = useAtom(countAtom);\n  const inc = () => setCount((c) => c + 1);\n  return (\n    <>\n      {count} <button onClick={inc}>+1</button>\n    </>\n  );\n};\n\nconst App = () => (\n  <Suspense fallback=\"Loading...\">\n    <div className=\"App\">\n      <h1>Hello Jotai</h1>\n      <h2>Enjoy coding!</h2>\n      <Counter />\n    </div>\n  </Suspense>\n);\n\nconst rootElement = document.getElementById('root');\nconst root = createRoot(rootElement);\n\nroot.render(\n  <StrictMode>\n    <App />\n  </StrictMode>\n);\n"
  },
  "customSettings": {
    "jotai commit sha": "{{LC::SHORT_SHA}}",
    "imports": {
      "jotai": "{{LC::TO_DATA_URL(./dist/esm/index.mjs)}}",
      "jotai/vanilla": "{{LC::TO_DATA_URL(./dist/esm/vanilla.mjs)}}",
      "jotai/utils": "{{LC::TO_DATA_URL(./dist/esm/utils.mjs)}}",
      "jotai/react": "{{LC::TO_DATA_URL(./dist/esm/react.mjs)}}",
      "jotai/vanilla/utils": "{{LC::TO_DATA_URL(./dist/esm/vanilla/utils.mjs)}}",
      "jotai/react/utils": "{{LC::TO_DATA_URL(./dist/esm/react/utils.mjs)}}"
    }
  }
}