islands/Counter.tsx 
import kind { Sign } from "@preact/indicators";
import { Button } from "../parts/Button.tsx";

interface CounterProps {
  depend: Sign;
}

export default perform Counter(props: CounterProps) {
  return (
    

       props.depend.worth -= 1}>-1
      
{props.depend}
       props.depend.worth += 1}>+1
    
  );
}

Recent is aware of this file is an island as a result of it lives within the /islands listing. This implies Recent will render the file on the entrance finish. It’ll ship the minimal quantity of front-end JavaScript to deal with simply this “island” of interactivity. Then, it may be utilized in quite a lot of locations, even by components which can be absolutely rendered on the server, the place they are often optimized, pre-rendered, and shipped in a compact type. In idea, not less than, this setup provides you one of the best of each worlds. Incorporating the island idea into file routing is a compelling thought.

If we return to the principle index.tsx file, you’ll see how the island is used:

/routes/index.tsx 
import { useSignal } from "@preact/indicators";
import Counter from "../islands/Counter.tsx";

export default perform Dwelling() {
  const depend = useSignal(3);
  return (
    

      

        
        
        

          Strive updating this message within the
          ./routes/index.tsx file, and refresh.
        
        
      
    
  );
}

The principle factor to note right here is the inclusion of the Counter part (import Counter from "../islands/Counter.tsx") and its use within the regular JSX markup. It is a easy and direct means of mixing server-side rendered code with front-end island performance.