Simple interactivity

├── src
`  `├── App.tsx `← we are here`
`  `├── index.css
`  `└── main.tsx

'use client';
import { useState } from 'react';

export default function Home() {
  const [cartCount, setCartCount] = useState(20);
  return (
    <button className='w-64 bg-blue-500 text-white px-4 py-2 rounded' onClick={() => setCartCount(cartCount + 1)}>
      Add to cart
      <span className='bg-white text-blue-700 ml-2 px-2 py-1 rounded-full'>{cartCount}</span>
    </button>
  );
}

const [cartCount, setCartCount] = 20;
<button onClick="setCartCount(cartCount + 1)">
  Add to cart
  <span>{cartCount}</span>
</button>

- `useState(20)` → A way to store and update data in React. In this case, we're storing the number of items in the cart. The initial value is `20`. It can be any number, including `0`.

- `import { useState }` → Bringing the `useState` function(ality) to our file.

- `const [cartCount, setCartCount]` → `useState` function(ality) gives us a data store, `cartCount` and a function(ality) to update the data store, `setCartCount`.

- `use client;` → Bringing `useState` requires this line to let the framework know we want this to be 'rendered' in the browser.

- `onClick` → onClick gives us a way to know when the button is clicked. Combined with `onClick={() => setCartCount(cartCount + 1)}` we are telling React to update the `cartCount` data store by adding `1` to it every time the button is clicked.