Sidjämförelse

Här följer en kortare guide för att börja utforska IDS och React och hur man skulle kunna bygga prototyper.

...

I den högra vyn finns en liten mappstruktur som ser ut ungefär såhär:

• 📁 public

• 📁 src

  • 📁 components

  • App.js

  • index.js

  • style.css

• package.json

Innehållet för vårt projekt finns i mappen 📁 src, där man kan hålla koll på två saker:

...

1. För att skapa en kopia tryck på knappen Fork uppe till höger i Code Sandbox.

   

2. Du kommer nu att uppmanas att skapa ett konto eller logga in. Om du vill så kan du hoppa över detta steg och klicka på knappen Continue without an account längst nere i rutan. Du kan då arbeta vidare med din kod, men inte spara den. Annars är det rekommenderat att skapa ett konto, exempelvis via Google-login.

3. Du kommer nu att ha registrerat dig för ett gratis-konto, med vissa begränsningar (men som funkar för ändamålet). Nu kan du fortsätta att redigera din kod.

4. Om du vill visa din kod i webbläsaren så kan du kopiera den adressen som visas ovanför förhandsgranskningen (den högra kolumnen i gränssnittet).

🧽 Ta bort knappen “Open Sandbox”

Som du säkert noterat så visas en svart knapp längst nere i det högra hörnet när du förhandsgranskar. Det är en länk till Code Sandbox och har etiketten Open Sandbox. För att ta bort den kan du lägga in ett litet kodhack i din App.js, precis under raden export default function App() {

const removeWatermark = () => {
  const ids = [];
  const iframes = document.body.querySelectorAll('iframe');
  for (const iframe of iframes) {
    if (iframe.id.startsWith('sb__open-sandbox')) ids.push(iframe.id);
  }
  for (const id of ids) {
    const node = document.createElement('div');
    node.style.setProperty('display', 'none', 'important');
    node.id = id;
    document.getElementById(id).remove();
    document.body.appendChild(node);
  }
};

setTimeout(removeWatermark, 1000);

Detta gör att knappen tas bort efter en sekund. Om man vill läsa mer om det så finns en diskussion (och detta lösningsförslag) på Github.