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:

...

Om du öppnar mappen 📁 components så ser du att det finns två filer i den mappen; Footer.js och Header.js. Om du öppnar dessa filer så ser du att koden för sidhuvud och sidfot är mer komplex än vad som syns i App.js. Av den anledningen är det smidigt att bryta ut kod till egna komponenter och hantera dem separat.

📋 Skapa en egen kopia

Nästa steg är att skapa en egen kopia, så att du kan spara den och arbeta vidare som det passar dig. Det man gör då är att skapa en fork, vilket innebär att man skapar en ny kopia av ett existerande repository.

...

Varje gång man sparar en ny version av sin kod kommer den nu att sparas “i ett nytt spår”, vilket gör att två parallella versioner kan existera samtidigt. Du kan helt enkelt arbeta vidare med en egen kopia.

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

   Image Added

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() {[Texten under uppdatering]

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.