Пошук уроків, статей та іншого контенту
Ознайомитеся з файлами та папками React-проєкту й зрозумієте призначення його основних частин.
React-проєкт складається з файлів і папок, кожна з яких має своє призначення. На початку важливо розуміти не кожен файл окремо, а загальний напрямок роботи застосунку:
браузер відкриває HTML-файл;
HTML-файл підключає JavaScript;
JavaScript запускає React;
React створює інтерфейс і вставляє його в HTML-сторінку.
Один із поширених варіантів структури проєкту на React:
my-react-app/
├── node_modules/
├── public/
├── src/
│ ├── App.jsx
│ ├── App.css
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
└── vite.config.jsНазви та склад файлів можуть відрізнятися залежно від інструменту, яким створено проєкт. Наприклад, проєкти, створені за допомогою Vite, зазвичай мають саме таку структуру.
srcПапка src містить основний код застосунку. Її назва походить від слова source — «вихідний код».
Саме тут зазвичай зберігають:
React-компоненти;
стилі;
зображення та інші ресурси, які імпортуються в код;
логіку взаємодії користувача із застосунком;
допоміжні функції.
Під час розробки найчастіше працюють саме з файлами всередині src.
main.jsxФайл main.jsx є початковою точкою React-застосунку. Він:
імпортує React;
імпортує кореневий компонент застосунку;
знаходить HTML-елемент, у який потрібно вставити React;
запускає рендеринг.
Приклад:
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';
const rootElement = document.getElementById('root');
createRoot(rootElement).render(
<StrictMode>
<App />
</StrictMode>,
);Розглянемо цей код по частинах:
StrictMode допомагає виявляти потенційні проблеми під час розробки;
createRoot створює корінь React-застосунку;
App — головний компонент;
document.getElementById('root') знаходить HTML-елемент із id="root";
render вставляє компонент App у цей елемент.
App.jsxApp.jsx зазвичай містить головний компонент застосунку.
import './App.css';
function App() {
return (
<main className="app">
<h1>Мій React-застосунок</h1>
<p>Цей інтерфейс створено за допомогою React.</p>
</main>
);
}
export default App;Компонент App повертає JSX — синтаксис, який дає змогу описувати структуру інтерфейсу за допомогою JavaScript.
Рядок:
export default App;робить компонент доступним для імпорту в іншому файлі. Саме тому main.jsx може підключити його так:
import App from './App.jsx';Стилі можуть зберігатися в окремих CSS-файлах.
Файл App.css може містити стилі конкретно для компонента App:
.app {
max-width: 640px;
margin: 0 auto;
padding: 48px 24px;
font-family: sans-serif;
}
.app h1 {
color: #2563eb;
}Файл index.css зазвичай містить глобальні стилі, наприклад скидання стандартних відступів:
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #f8fafc;
color: #0f172a;
}Щоб стилі застосувалися, їх потрібно імпортувати:
import './index.css';або:
import './App.css';Імпорт CSS-файлу не повертає значення. Він підключає стилі до застосунку.
index.htmlФайл index.html є HTML-сторінкою, яку браузер завантажує першою.
Спрощений приклад:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React-застосунок</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>Найважливішим тут є елемент:
<div id="root"></div>React використовує його як контейнер для всього інтерфейсу.
Також важливий цей рядок:
<script type="module" src="/src/main.jsx"></script>Він підключає початковий JavaScript-файл застосунку.
React не замінює всю HTML-сторінку. Він вставляє свій інтерфейс у конкретний елемент, зазвичай у <div id="root"></div>.
publicПапка public призначена для статичних файлів, які потрібно використовувати без обробки JavaScript-збірником.
Там можуть зберігатися:
favicon;
статичні файли;
зображення;
файли, адреса яких має бути доступною без імпорту в компонент.
Наприклад:
public/
└── logo.svgФайл із папки public можна використовувати за адресою від кореня сайту:
function App() {
return <img src="/logo.svg" alt="Логотип" />;
}
export default App;Для файлів із public не потрібно писати шлях на кшталт ./public/logo.svg. Папка public не входить до URL-адреси.
package.jsonФайл package.json містить основну інформацію про проєкт:
назву проєкту;
версію;
команди для запуску;
залежності;
інші налаштування Node.js-проєкту.
Приклад:
{
"name": "my-react-app",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"vite": "^5.4.0"
}
}scriptsУ секції scripts зберігаються команди проєкту:
npm run dev — запускає сервер для розробки;
npm run build — створює готову для розгортання версію;
npm run preview — дає змогу переглянути результат збірки локально.
Запустити застосунок у режимі розробки можна командою:
npm run devdependencies і devDependenciesУ dependencies зберігаються пакети, необхідні застосунку під час роботи.
Наприклад:
react — бібліотека React;
react-dom — інструменти для використання React у браузері.
У devDependencies зберігаються інструменти, потрібні під час розробки або збірки проєкту.
package-lock.jsonpackage-lock.json зберігає точні версії встановлених пакетів та їхніх залежностей.
Це допомагає різним розробникам отримувати однакове середовище під час встановлення залежностей.
Якщо файл package-lock.json створився автоматично, його зазвичай додають до системи контролю версій разом із package.json.
node_modulesПапка node_modules містить встановлені пакети, перелічені в package.json.
Після виконання команди:
npm installпакетний менеджер завантажує залежності в цю папку.
Вручну редагувати файли в node_modules не потрібно. Також цю папку зазвичай не додають до Git-репозиторію, оскільки її можна відновити за допомогою npm install.
.gitignoreФайл .gitignore містить список файлів і папок, які Git не повинен додавати до репозиторію.
Для React-проєкту там часто є:
node_modules
dist
.envnode_modules можна відновити з package.json;
dist — це результат збірки;
.env може містити локальні змінні середовища.
vite.config.jsУ проєктах, створених за допомогою Vite, файл vite.config.js містить налаштування Vite.
Найпростіший варіант може мати такий вигляд:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});Для початку цей файл можна не змінювати. Він потрібен інструменту Vite, щоб правильно обробляти React-код.
Розглянемо невеликий проєкт із такою структурою:
src/
├── App.jsx
├── App.css
├── index.css
└── main.jsxmain.jsx запускає застосунок:
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
);App.jsx описує інтерфейс:
import './App.css';
function App() {
return (
<main className="app">
<h1>Список завдань</h1>
<ul>
<li>Вивчити структуру React-проєкту</li>
<li>Створити перший компонент</li>
<li>Запустити застосунок</li>
</ul>
</main>
);
}
export default App;App.css відповідає за стилі головного компонента:
.app {
max-width: 640px;
margin: 0 auto;
padding: 32px;
font-family: sans-serif;
}
.app h1 {
color: #1d4ed8;
}
.app li {
margin-bottom: 8px;
}index.css містить глобальні стилі:
body {
margin: 0;
background: #f1f5f9;
color: #0f172a;
}Після запуску команди:
npm run devVite запустить сервер розробки, а браузер покаже інтерфейс із компонента App.
src у більших проєктахКоли застосунок збільшується, усі файли стає незручно зберігати безпосередньо в src. Тоді код групують за призначенням.
Наприклад:
src/
├── components/
│ ├── Header.jsx
│ └── TodoItem.jsx
├── pages/
│ └── HomePage.jsx
├── App.jsx
├── App.css
├── index.css
└── main.jsxcomponents — повторно використовувані компоненти;
pages — компоненти окремих сторінок;
App.jsx — основна структура застосунку;
main.jsx — точка запуску.
На початку достатньо мати кілька файлів у src. Нові папки варто створювати тоді, коли це справді полегшує пошук і підтримку коду.
Повний шлях від HTML до React-компонента можна описати так:
Браузер відкриває index.html.
У цьому файлі знаходиться <div id="root"></div>.
index.html підключає src/main.jsx.
main.jsx імпортує компонент App.
createRoot створює React-корінь.
React рендерить App усередині елемента root.
App повертає JSX, який стає частиною сторінки.
Цей процес пояснює, чому main.jsx і App.jsx мають різні ролі:
main.jsx запускає React;
App.jsx описує основний інтерфейс.
node_modulesНе потрібно змінювати код у node_modules. Після повторного встановлення залежностей ці зміни можуть зникнути.
Зміни вносять у файли проєкту, а не у встановлені пакети.
publicЯкщо зображення розташоване тут:
public/images/avatar.pngйого використовують так:
<img src="/images/avatar.png" alt="Аватар" />А не так:
<img src="/public/images/avatar.png" alt="Аватар" />rootЯкщо в index.html немає елемента:
<div id="root"></div>код із main.jsx не зможе знайти контейнер для React-застосунку.
Значення id в HTML має збігатися з ідентифікатором у JavaScript:
document.getElementById('root');Якщо компонент імпортується в іншому файлі, його потрібно експортувати:
export default App;Без експорту імпорт компонента завершиться помилкою.
Не потрібно одразу створювати складну структуру з багатьма рівнями вкладеності. Почніть із простих папок і додавайте нові, коли проєкт справді цього потребує.
src містить основний вихідний код React-застосунку.
main.jsx є точкою запуску React.
App.jsx зазвичай містить головний компонент застосунку.
index.html містить HTML-контейнер root, у який React вставляє інтерфейс.
public призначена для статичних файлів.
package.json описує залежності та команди проєкту.
node_modules містить встановлені пакети й не редагується вручну.
vite.config.js містить налаштування Vite.
Файли та папки в src можна організовувати відповідно до розміру проєкту.
Основний потік роботи має вигляд: index.html → main.jsx → App.jsx → інтерфейс у браузері.