Innan vi går vidare med stilarna måste vi ta hänsyn till fil- och mappstruktur samt kodorganisation. I föregående kapitel berörde vi detta ämne. Vi vet redan att vi behöver följande:

• Skapa en separat mapp för varje komponent;
• Skapa en jsx-fil för denna komponent;
• Skapa en module.css-fil för denna komponent;
• Kombinera dem så att jsx-filen kan känna till stilarna.

Vad är nästa steg? För att säkerställa tydlighet kommer vi att utveckla en enkel app för att förstå dess organisation.

Notera

Fullständig projektkod och live-sida finns i slutet av detta kapitel.

Komponenterna som utgör vår app inkluderar:

• Bar-komponenten representerar appens navigationsfält, bestående av en logotyp och olika länkar;
• Information-komponenten visar en bild och tillhörande textinnehåll;
• Footer-komponenten representerar upphovsrätt och alla rättigheter förbehållna;
• Section-komponenten fungerar som ett bakomliggande element. Den agerar som en omslutare och centrerar allt innehåll med hjälp av CSS;
• App-komponenten representerar hela appen. Vi kommer att bygga hela projektet i filen App.jsx och importera den i huvudfilen index.js.

Organisation

När vi organiserar våra filer följer vi en struktur där varje komponent har sin egen mapp. Vi skapar en jsx-fil i varje mapp och en motsvarande module.css-fil. Detta tillvägagångssätt leder till följande struktur:

Hur vet index.js om alla komponenter?

Som tidigare nämnts bygger vi hela projektet i filen App.jsx, och därefter importerar och renderar vi den komponenten (App-komponenten) i filen index.js.

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

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

root.render(<App />);

Vi importerar en fil med hjälp av import-satsen och den korrekta sökvägen till filen.

import <file_name> from "<file_path>";

Skapa några komponenter för att kontrollera syntaxen.

App-komponent

Filen App.jsx är ingångspunkten där vi importerar och sätter ihop alla andra komponenter för att bygga projektet. Detta innebär att alla nödvändiga komponenter importeras i filen App.jsx och att appen struktureras därefter.

// 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 kanske märkt att fil-exporter också är avgörande utöver fil-importer. Korrekt export gör det möjligt att importera en komponent i en annan fil. Därför finns rad 17 specifikt för App-komponenten för att exportera den. Detta säkerställer att App-komponenten är tillgänglig för andra delar av kodbasen att importera och använda i applikationen. Syntaxen är:

export default <component_name>;

Section-komponent

Fungerar som omslag för appen. Tar emot children-prop och renderar dem i ett div-element. div-elementet har vissa stilar som har lagts till med hjälp av filen Section.module.css.

Section.jsx-kod:

// 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-kod:

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

Bar-komponent

Bar-komponenten renderar en specifik markup och tillämpar motsvarande stilar. Den övergripande organisationen av denna process förblir konsekvent. Vi börjar med att importera CSS-filen som är kopplad till komponenten, därefter skapar vi själva komponenten där vi renderar nödvändig markup och tilldelar klassnamn för att uppnå önskad stil. Slutligen exporterar vi komponenten för att säkerställa dess tillgänglighet i andra delar av kodbasen.

Bar.jsx-kod:

// 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-kod:

.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;
}

Observera

För att undvika att överbelasta kapitlet kommer vi inte att gå in på en detaljerad analys av de andra komponenterna. Detta beror på att processen som följs för varje komponent är exakt densamma. Istället uppmuntras du att noggrant undersöka det kompletta projektet som tillhandahålls nedan. Ta dig tid att inspektera varje mapp och öppna varje komponent för att förstå dess struktur. Detta är avgörande eftersom fler komponenter kommer att läggas till när vi går vidare. Det är viktigt att vi inte missar några detaljer i detta skede.

Fullständig appkod:

Observera

För att undersöka projektroten, klicka på reglaget på vänster sida av gränssnittet för att expandera det, och i det övre vänstra hörnet hittar du en hamburgermenyn (representerad av tre horisontella linjer). Genom att klicka på hamburgermenyn får du tillgång till projektroten, vilket gör att du kan utforska filer och mappar i projektet.