Før vi går videre med stilene, må vi vurdere strukturering av filmapper og organisering av kode. I forrige kapittel var vi så vidt innom dette emnet. Vi vet allerede at vi trenger følgende:

• Opprette en egen mappe for hver komponent;
• Opprette en jsx-fil for denne komponenten;
• Opprette en module.css-fil for denne komponenten;
• Koble dem sammen slik at jsx-filen får tilgang til stilene.

Hva er neste steg? For å sikre oversiktlighet, skal vi utvikle en enkel app for å forstå organiseringen.

Merk

Fullstendig prosjektkode og live-side finnes på slutten av dette kapittelet.

Komponentene som utgjør appen vår inkluderer:

• Bar-komponenten representerer appens navigasjonslinje, bestående av en logo og ulike lenker;
• Information-komponenten viser et bilde og tilhørende tekstinnhold;
• Footer-komponenten representerer opphavsrett og alle rettigheter reservert;
• Section-komponenten fungerer som et bakgrunnselement. Den fungerer som en wrapper og sentrerer alt innholdet ved hjelp av CSS;
• App-komponenten representerer hele appen. Vi bygger hele prosjektet i App.jsx-filen og importerer den i hovedfilen index.js.

Organisering

Når vi organiserer filene våre, følger vi en struktur der hver komponent har sin egen mappe. Vi oppretter en jsx-fil i hver mappe og en tilhørende module.css-fil. Denne tilnærmingen gir følgende struktur:

Hvordan vet index.js om alle komponentene?

Som tidligere nevnt, bygger vi hele prosjektet i App.jsx-filen, og deretter importerer og renderer vi denne komponenten (App-komponenten) i index.js-filen.

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

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

root.render(<App />);

Vi importerer en fil ved hjelp av import-setningen og riktig filsti.

import <file_name> from "<file_path>";

La oss opprette noen komponenter for å sjekke syntaksen.

App-komponent

App.jsx -filen er inngangspunktet der vi importerer og setter sammen alle andre komponenter for å bygge prosjektet. Dette innebærer å importere alle nødvendige komponenter i App.jsx-filen og strukturere appen deretter.

// 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;

Du har kanskje lagt merke til at fil-eksport også er avgjørende i tillegg til fil-import. Korrekt eksport gjør det mulig å importere en komponent i en annen fil. Derfor er det viktig å inkludere linje 17 spesielt for App-komponenten for å eksportere den. Dette sikrer at App-komponenten er tilgjengelig for andre deler av kodebasen å importere og bruke i applikasjonen. Syntaksen er:

export default <component_name>;

Section-komponent

Fungerer som innpakning for appen. Den mottar children-prop og renderer dem i et div-element. div-elementet har noen stiler som er lagt til ved hjelp av Section.module.css-filen.

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 gjengir en spesifikk markup og anvender tilhørende stiler. Den overordnede organiseringen av denne prosessen forblir konsekvent. Vi starter med å importere CSS-filen som er tilknyttet komponenten, deretter oppretter vi selve komponenten, hvor vi gjengir nødvendig markup og legger til klassenavn for å oppnå ønsket stil. Til slutt eksporterer vi komponenten, slik at den er tilgjengelig i andre deler av 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;
}

Merk

For å unngå å overvelde kapitlet, vil vi ikke gå inn på en detaljert analyse av de andre komponentene. Dette er fordi prosessen som følges for hver komponent er nøyaktig den samme. I stedet oppfordres du til å undersøke det komplette prosjektet som er gitt nedenfor grundig. Ta deg tid til å inspisere hver mappe og åpne hver komponent for å forstå organiseringen. Dette er avgjørende fordi det vil bli lagt til flere komponenter etter hvert. Det er viktig at vi ikke overser noen detaljer på dette stadiet.

Full app-kode:

Merk

For å undersøke prosjektroten, klikk på glidebryteren på venstre side av grensesnittet for å utvide den, og øverst til venstre finner du en burgerknapp (representert med tre horisontale linjer). Ved å klikke på burgerknappen får du tilgang til prosjektroten, slik at du kan utforske filer og mapper i prosjektet.