Організація Структури Файлів та Папок

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

• створити окрему папку для кожного компонента
• створити файл 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 та правильного шляху до файлу.

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

Компонент App

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

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

Компонент Section

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

Код файлу Section.jsx:

Код css Section.module.css:

Компонент Bar

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

Код Bar.jsx:

Код css Bar.module.css:

Примітка

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

Повний код програми:

Примітка

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