Ennen kuin siirrymme tyyleihin, meidän on pohdittava tiedostojen ja kansioiden rakennetta sekä koodin organisointia. Käsittelimme tätä aihetta jo edellisessä luvussa. Tiedämme jo, että tarvitsemme seuraavat asiat:

• Luo jokaiselle komponentille oma kansio;
• Luo tälle komponentille jsx-tiedosto;
• Luo tälle komponentille module.css-tiedosto;
• Yhdistä nämä niin, että jsx-tiedosto tunnistaa tyylit.

Mitä seuraavaksi? Selkeyden varmistamiseksi kehitämme yksinkertaisen sovelluksen ymmärtääksemme sen rakennetta.

Huomio

Koko projektin koodi ja live-sivu löytyvät tämän luvun lopusta.

Sovelluksemme komponentit ovat:

• Bar-komponentti edustaa sovelluksen navigaatiopalkkia, joka sisältää logon ja erilaisia linkkejä;
• Information-komponentti näyttää kuvan ja siihen liittyvän tekstisisällön;
• Footer-komponentti edustaa tekijänoikeuksia ja kaikkia oikeuksia pidätetään -merkintää;
• Section-komponentti toimii taustalla olevana elementtinä. Se toimii kääreenä, joka keskittää kaiken sisällön CSS:n avulla;
• App-komponentti edustaa koko sovellusta. Rakennamme koko projektin App.jsx-tiedostoon ja tuomme sen pääasialliseen index.js-tiedostoon.

Organisointi

Kun järjestämme tiedostojamme, noudatamme rakennetta, jossa jokaisella komponentilla on oma kansionsa. Luomme jokaiseen kansioon jsx-tiedoston ja vastaavan module.css-tiedoston. Tämä lähestymistapa johtaa seuraavaan rakenteeseen:

Kuinka index.js tietää kaikista komponenteista?

Kuten aiemmin mainittiin, koko projekti rakennetaan App.jsx-tiedostossa, ja sen jälkeen kyseinen komponentti (App-komponentti) tuodaan ja renderöidään index.js-tiedostossa.

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

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

root.render(<App />);

Tiedosto tuodaan käyttöön import-lauseella ja oikealla tiedostopolulla.

import <file_name> from "<file_path>";

Luodaan joitakin komponentteja syntaksin tarkistamiseksi.

App-komponentti

App.jsx -tiedosto toimii lähtöpisteenä, jossa kaikki muut komponentit tuodaan ja kootaan projektin rakentamiseksi. Tämä tarkoittaa, että kaikki tarvittavat komponentit tuodaan App.jsx-tiedostoon ja sovellus rakennetaan niiden pohjalta.

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

Olet ehkä huomannut, että tiedostojen viennit ovat yhtä tärkeitä kuin tiedostojen tuonnit. Oikea vienti mahdollistaa komponentin tuonnin toiseen tiedostoon. Siksi rivi 17 on lisätty erityisesti App-komponentille sen viemiseksi. Tämä varmistaa, että App-komponentti on muiden koodin osien käytettävissä sovelluksessa. Syntaksi on:

export default <component_name>;

Section-komponentti

Toimii sovelluksen kääreenä. Saa children-propin ja renderöi ne div-elementtiin. div-elementillä on tyylejä, jotka on lisätty Section.module.css-tiedoston avulla.

Section.jsx-koodi:

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

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

Bar-komponentti

Bar-komponentti renderöi tietyn rakenteen ja lisää siihen vastaavat tyylit. Tämän prosessin yleinen organisointi pysyy johdonmukaisena. Aloitamme tuomalla komponenttiin liittyvän CSS-tiedoston, jonka jälkeen luomme itse komponentin, jossa renderöimme tarvittavan rakenteen ja lisäämme luokkanimet halutun ulkoasun saavuttamiseksi. Lopuksi viemme komponentin, jotta se on käytettävissä muualla koodipohjassa.

Bar.jsx-koodi:

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

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

Huomio

Jotta kappale ei kasvaisi liian laajaksi, emme käy tarkemmin läpi muiden komponenttien yksityiskohtaista analyysia. Tämä johtuu siitä, että jokaisessa komponentissa noudatetaan täsmälleen samaa prosessia. Sen sijaan kannustan sinua tutkimaan huolellisesti alla olevaa kokonaista projektia. Käy läpi jokainen kansio ja avaa jokainen komponentti ymmärtääksesi niiden rakenteen. Tämä on tärkeää, sillä edetessämme lisäämme uusia komponentteja. Tässä vaiheessa ei ole hyvä ohittaa mitään yksityiskohtia.

Koko sovelluksen koodi:

Huomio

Tutkiaksesi projektin juurihakemistoa, napsauta käyttöliittymän vasemmalla puolella olevaa liukusäädintä laajentaaksesi sen. Vasemmasta yläkulmasta löydät hampurilaispainikkeen (kolme vaakaviivaa). Napsauttamalla hampurilaispainiketta saat näkyviin projektin juuren ja pääset tutkimaan projektin tiedostoja ja kansioita.