Перш ніж перейти до стилів, необхідно врахувати структуру папок і організацію коду. У попередньому розділі ми вже торкалися цієї теми. Ми вже знаємо, що потрібно виконати наступне:

• Створити окрему папку для кожного компонента;
• Створити файл jsx для цього компонента;
• Створити файл module.css для цього компонента;
• Об'єднати їх так, щоб файл jsx мав доступ до стилів.

Що далі? Для кращого розуміння ми розробимо простий застосунок, щоб зрозуміти його організацію.

Примітка

Повний код проєкту та жива сторінка доступні наприкінці цього розділу.

Компоненти, з яких складається наш застосунок:

• Компонент Bar — навігаційна панель застосунку, що містить логотип і різні посилання;
• Компонент Information — відображає зображення та супровідний текстовий контент;
• Компонент Footer — містить авторські права та всі права захищені;
• Компонент Section — допоміжний елемент. Використовується як обгортка, що центрує весь контент за допомогою CSS;
• Компонент App — представляє весь застосунок. У файлі App.jsx буде зібрано весь проєкт, а потім імпортовано до основного файлу index.js.

Організація

Під час організації файлів ми дотримуємося структури, де кожен компонент має власну папку. У кожній папці створюється файл jsx та відповідний файл module.css. Такий підхід призводить до наступної структури:

Як index.js знає про всі компоненти?

Як вже згадувалося раніше, весь проєкт будується у файлі App.jsx, після чого цей компонент (App) імпортується та рендериться у файлі index.js.

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

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

root.render(<App />);

Імпорт файлу здійснюється за допомогою оператора import та правильного шляху до файлу.

import <file_name> from "<file_path>";

Створення декількох компонентів для перевірки синтаксису.

Компонент App

Файл App.jsx є точкою входу, де імпортуються та збираються всі інші компоненти для побудови проєкту. Це означає, що всі необхідні компоненти імпортуються у файл App.jsx та відповідно структурують застосунок.

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

Можна помітити, що для файлів важливі не лише імпорти, а й експорти. Коректний експорт дозволяє імпортувати компонент в інший файл. Тому додавання рядка 17 саме для компонента App необхідне для його експорту. Це забезпечує доступність компонента App для імпорту та використання в інших частинах застосунку. Синтаксис:

export default <component_name>;

Компонент Section

Виконує роль обгортки застосунку. Приймає проп children та рендерить його у елементі div. Для елемента div застосовуються стилі, додані за допомогою файлу Section.module.css.

Код Section.jsx:

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

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

Компонент Bar

Компонент Bar відображає певну розмітку та застосовує відповідні стилі. Загальна організація цього процесу залишається незмінною. Спочатку імпортується CSS-файл, пов'язаний із компонентом, далі створюється сам компонент, у якому відображається необхідна розмітка та застосовуються імена класів для досягнення бажаного стилю. Нарешті, компонент експортується, що забезпечує його доступність в інших частинах кодової бази.

Код Bar.jsx:

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

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

Примітка

Щоб не перевантажувати цей розділ, ми не будемо детально аналізувати інші компоненти. Це пов'язано з тим, що процес для кожного компонента є абсолютно однаковим. Натомість рекомендую уважно ознайомитися з повним проєктом, наведеним нижче. Приділіть час перегляду кожної папки та відкрийте кожен компонент, щоб зрозуміти його організацію. Це важливо, оскільки надалі будуть додаватися нові компоненти. На цьому етапі важливо не пропустити жодної деталі.

Повний код застосунку:

Примітка

Щоб переглянути корінь проєкту, натисніть на слайдер з лівого боку інтерфейсу для його розгортання, а у верхньому лівому куті ви знайдете кнопку-бургер (яка позначена трьома горизонтальними лініями). Натиснувши на цю кнопку, ви отримаєте доступ до кореня проєкту, що дозволить вам дослідити файли та папки всередині проєкту.