Før vi fortsætter med stilarterne, skal vi overveje fil- og mappestruktur samt kodeorganisering. I det forrige kapitel berørte vi dette emne. Vi ved allerede, at vi har brug for følgende:

• Opret en separat mappe til hver komponent;
• Opret en jsx-fil til denne komponent;
• Opret en module.css-fil til denne komponent;
• Kombinér dem, så jsx-filen kan kende til stilarterne.

Hvad er det næste? For at sikre klarhed vil vi udvikle en simpel app for at forstå dens organisering.

Bemærk

Fuld projektkode og live-side kan findes i slutningen af dette kapitel.

De komponenter, der udgør vores app, omfatter:

• Bar-komponenten repræsenterer appens navigationsbjælke, bestående af et logo og forskellige links;
• Information-komponenten viser et billede og tilhørende tekstindhold;
• Footer-komponenten repræsenterer ophavsret og alle rettigheder forbeholdes;
• Section-komponenten fungerer som et bagvedliggende element. Den fungerer som en wrapper, der centrerer alt indholdet ved hjælp af CSS;
• App-komponenten repræsenterer hele appen. Vi konstruerer hele projektet i App.jsx-filen og importerer den i hovedfilen index.js.

Organisering

Når vi organiserer vores filer, følger vi en struktur, hvor hver komponent har sin dedikerede mappe. Vi opretter en jsx-fil i hver mappe og en tilsvarende module.css-fil. Denne tilgang fører til følgende struktur:

Hvordan ved index.js besked om alle komponenterne?

Som tidligere nævnt konstrueres hele projektet i App.jsx-filen, hvorefter denne komponent (App-komponenten) importeres og renderes i index.js-filen.

import { createRoot } from "react-dom/client";
import App from "./App/App";

const root = createRoot(document.getElementById("root"));

root.render(<App />);

En fil importeres ved hjælp af import-sætningen og den korrekte sti til filen.

import <file_name> from "<file_path>";

Opret nogle komponenter for at kontrollere syntaksen.

App-komponent

App.jsx -filen fungerer som indgangspunkt, hvor alle andre komponenter importeres og samles for at opbygge projektet. Dette indebærer import af alle nødvendige komponenter i App.jsx-filen og strukturering af appen derefter.

// Import of all components
import Section from "../Section/Section";
import Bar from "../Bar/Bar";
import Footer from "../Footer/Footer";
import Information from "../Information/Information";

// Creation of the whole app
const App = () => (
  <Section>
    <Bar />
    <Information />
    <Footer />
  </Section>
);

// Component export
export default App;

Det kan observeres, at fil-eksport er lige så vigtig som fil-import. Korrekt eksport gør det muligt at importere en komponent i en anden fil. Derfor er linje 17 inkluderet specifikt for App-komponenten for at eksportere den. Dette sikrer, at App-komponenten er tilgængelig for andre dele af kodebasen til import og brug i applikationen. Syntaksen er:

export default <component_name>;

Section-komponent

Fungerer som app-wrapper. Modtager children-prop og renderer dem i et div-element. div-elementet har nogle stilarter, som er tilføjet ved hjælp af filen Section.module.css.

Section.jsx kode:

// Import of the file with styles
import s from "./Section.module.css";

// Component
const Section = (props) => (
  <div className={s.container}>{props.children}</div>
);

// Export the component
export default Section;

Section.module.css kode:

.container {
  width: 800px;
  margin: 0 auto;
  padding-left: 15px;
}

Bar-komponent

Bar-komponenten gengiver en specifik markup og anvender tilsvarende stilarter. Den overordnede organisering af denne proces forbliver ensartet. Vi starter med at importere CSS-filen, der er tilknyttet komponenten, og fortsætter derefter med at oprette selve komponenten, hvor vi gengiver den nødvendige markup og tildeler klassenavne for at opnå den ønskede styling. Til sidst eksporterer vi komponenten, så den er tilgængelig i andre dele af kodebasen.

Bar.jsx kode:

// Import the file with styles
import s from "./Bar.module.css";

// Component
const Bar = () => (
  <div className={s.container}>
    <a href="###" className={s.logo}>
      Logo
    </a>
    <ul className={s.list}>
      <li className={s.item}>
        <a href="###" className={s.link}>
          Home
        </a>
      </li>
      <li className={s.item}>
        <a href="###" className={s.link}>
          About
        </a>
      </li>
      <li className={s.item}>
        <a href="###" className={s.link}>
          Contact
        </a>
      </li>
    </ul>
  </div>
);

// Export the component
export default Bar;

Bar.module.css kode:

.container {
  background-color: lightcoral;
  padding: 0px 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo {
  text-decoration: none;
  font-size: 28px;
  color: lightcyan;
  padding-top: 30px;
  padding-bottom: 30px;
  display: block;
}

.logo:hover,
.logo:focus {
  color: lightsteelblue;
}

.list {
  list-style: none;
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.item:not(:last-child) {
  margin-right: 50px;
}

.link {
  text-decoration: none;
  font-size: 20px;
  color: lightblue;
  padding-top: 30px;
  padding-bottom: 30px;
  display: block;
}

Bemærk

For at undgå at overbelaste kapitlet vil vi ikke gå i dybden med en detaljeret analyse af de øvrige komponenter. Dette skyldes, at processen for hver komponent er nøjagtig den samme. I stedet opfordres du til grundigt at undersøge det komplette projekt, der er angivet nedenfor. Tag dig tid til at inspicere hver mappe og åbne hver komponent for at forstå dens organisering. Dette er afgørende, da der vil blive tilføjet flere komponenter, efterhånden som vi skrider frem. Det er vigtigt, at vi ikke overser nogen detaljer på dette tidspunkt.

Fuld app-kode:

Bemærk

For at undersøge projektets rodmappe skal du klikke på skyderen i venstre side af grænsefladen for at udvide den, og i øverste venstre hjørne finder du en burger-knap (repræsenteret ved tre vandrette linjer). Ved at klikke på burger-knappen får du adgang til projektets rodmappe, hvilket giver dig mulighed for at udforske filer og mapper i projektet.