Jotai Starter

A template with Jotai + React + TypeScript

by Daishi Kato

HTML

<script type="module">
  import React from "https://esm.sh/[email protected]";
  import ReactDOMClient from "https://esm.sh/[email protected]/client";
  import * as Jotai from "https://esm.sh/[email protected]";
  import * as JotaiUtils from "https://esm.sh/[email protected]/utils";
  run(React, React, ReactDOMClient, Jotai, JotaiUtils);
</script>
<div id="root"></div>

CSS

.App {
  font-family: sans-serif;
  text-align: center;
}

Babel + JSX

function run(
  React, // from 'react'
  { StrictMode, Suspense }, // from 'react'
  { createRoot }, // from 'react-dom/client'
  { atom, useAtom }, // from 'jotai'
 ) {

const countAtom = atom(0);

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  const inc = () => setCount((c) => c + 1);
  return (
    <>
      {count} <button onClick={inc}>+1</button>
    </>
  );
};

const App = () => (
  <Suspense fallback="Loading...">
    <div className="App">
      <h1>Hello Jotai</h1>
      <h2>Enjoy coding!</h2>
      <Counter />
    </div>
  </Suspense>
);

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

}