Вступний посібник з React: Створіть свій перший інтерфейс користувача з нуля
2/19/2026
6 min read
# Вступний посібник з React: Створіть свій перший інтерфейс користувача з нуля
React — це JavaScript-бібліотека для створення інтерфейсів користувача. Вона розроблена та підтримується Facebook і стала одним із найпопулярніших інструментів у фронтенд-розробці. Цей посібник проведе вас з нуля, крок за кроком, через основні концепції React і допоможе створити простий інтерфейс користувача.
## Чому варто обрати React?
React має такі переваги:
* **Компонентність:** React розбиває інтерфейс користувача на незалежні, багаторазові компоненти. Це полегшує підтримку та розуміння коду.
* **Декларативність:** React використовує декларативний стиль програмування, що означає, що вам потрібно лише описати, що ви хочете відобразити, а React автоматично оброблятиме оновлення та рендеринг.
* **Ефективність:** React використовує віртуальний DOM та інтелектуальний алгоритм diff, що дозволяє ефективно оновлювати інтерфейс користувача, зменшуючи непотрібний рендеринг.
* **Величезна підтримка спільноти:** React має велику спільноту та багату екосистему, де ви можете знайти безліч навчальних посібників, бібліотек та інструментів, які допоможуть вам у розробці.
* **Кросплатформність:** React Native дозволяє використовувати React для розробки нативних мобільних додатків (iOS та Android).
## Підготовка
Перш ніж почати, переконайтеся, що на вашому комп'ютері встановлено наступні інструменти:
* **Node.js:** Node.js — це середовище виконання JavaScript, яке використовується для запуску інструментів розробки React. Ви можете завантажити та встановити його з [https://nodejs.org/](https://nodejs.org/).
* **npm або yarn:** npm (Node Package Manager) і yarn — це менеджери пакетів JavaScript, які використовуються для встановлення та керування залежностями React. Зазвичай npm встановлюється разом з Node.js. yarn можна встановити з [https://yarnpkg.com/](https://yarnpkg.com/).
## Створення вашого першого React-додатку
Ми будемо використовувати `create-react-app` для швидкого створення React-проєкту.
1. **Створення за допомогою npm:**
```bash
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
-
Створення за допомогою yarn:
yarn create react-app my-first-react-app cd my-first-react-app yarn start
Після виконання наведених вище команд create-react-app автоматично створить каталог під назвою my-first-react-app і ініціалізує в ньому React-проєкт. Команда npm start або yarn start запустить сервер розробки, і ви зможете переглянути свій React-додаток у браузері за адресою http://localhost:3000.
Структура каталогу
Структура каталогу проєкту, створеного create-react-app, виглядає наступним чином:
my-first-react-app/
├── node_modules/ # Бібліотеки, від яких залежить проєкт
├── public/ # Статичні ресурси (наприклад, HTML файли)
│ ├── index.html # Вхідний HTML файл застосунку
│ └── ...
├── src/ # Вихідний код React
│ ├── App.css # CSS стилі компонента App
│ ├── App.js # Компонент App
│ ├── App.test.js # Файл тестування компонента App
│ ├── index.css # Глобальні CSS стилі
│ ├── index.js # Вхідний JavaScript файл застосунку
│ ├── logo.svg # Логотип React
│ └── ...
├── .gitignore # Файл ігнорування Git
├── package.json # Метадані та залежності проєкту
├── README.md # Документація проєкту
└── yarn.lock # Файл фіксації версій залежностей (якщо використовується yarn)
```
## Розуміння React Компонентів
React застосунки складаються з компонентів. Компоненти - це незалежні, багаторазові блоки коду, які використовуються для рендерингу певних частин інтерфейсу користувача.
У файлі `src/App.js` ви можете побачити компонент `App` за замовчуванням:
```javascript
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
Edit `src/App.js` and save to reload.
[
Learn React
](https://reactjs.org)
);
}
export default App;
```
**Пояснення коду:**
* `import React from 'react';` імпортує бібліотеку React.
* `function App() { ... }` визначає функціональний компонент під назвою `App`.
* `return ( ... )` повертає JSX вираз, який описує, що компонент повинен рендерити.
* `export default App;` експортує компонент `App`, щоб його можна було використовувати в інших файлах.
**JSX (JavaScript XML)**
JSX - це розширення синтаксису JavaScript, яке дозволяє писати код, схожий на HTML, у вашому JavaScript коді. У наведеному вище прикладі `...` є JSX виразом. JSX код буде перетворено Babel у стандартний JavaScript код, щоб браузер міг його зрозуміти.
## Зміна компонента App
Давайте змінимо компонент `App`, щоб створити простий лічильник.
```javascript
import React, { useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
``` const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
# Лічильник
Поточний лічильник: {count}
+
-
);
}
export default App;
```
**Пояснення змін:**
* `import React, { useState } from 'react';` Імпортує `useState` Hook. `useState` - це React Hook, який використовується для додавання стану у функціональні компоненти.
* `const [count, setCount] = useState(0);` Використовує `useState` Hook для створення змінної стану з назвою `count` та ініціалізує її значенням `0`. `setCount` - це функція для оновлення стану `count`.
* `const increment = () => { setCount(count + 1); };` Визначає функцію з назвою `increment`, яка використовується для збільшення стану `count` на 1.
* `const decrement = () => { setCount(count - 1); };` Визначає функцію з назвою `decrement`, яка використовується для зменшення стану `count` на 1.
* `Поточний лічильник: {count}
` Відображає значення стану `count` на сторінці. `{count}` - це JSX вираз, який використовується для вставки JavaScript змінних у JSX код.
* `+` та `-` Створює дві кнопки, які відповідно прив'язані до функцій `increment` та `decrement`. `onClick` - це обробник подій, який використовується для виконання вказаної функції при натисканні кнопки.
Після збереження файлу `src/App.js`, браузер автоматично оновиться, і ви побачите простий лічильник. Натискання на кнопку "+" збільшить лічильник, а натискання на кнопку "-" зменшить лічильник.
## Використання CSS стилів
Ви можете використовувати CSS для покращення зовнішнього вигляду вашого React додатку. `create-react-app` підтримує CSS Modules та звичайні CSS файли.
**Використання CSS Modules:**
CSS Modules дозволяють створювати незалежні CSS стилі для кожного компонента, уникаючи конфліктів стилів. Щоб використовувати CSS Modules у компоненті, вам потрібно створити файл, що закінчується на `.module.css`.
Наприклад, створіть файл з назвою `App.module.css` та додайте до нього наступні CSS стилі:
```css
.App {
text-align: center;
}
.App h1 {
color: blue;
}
.App button {
padding: 10px 20px;
font-size: 16px;
background-color: lightgreen;
border: none;
cursor: pointer;
}
```
Потім імпортуйте CSS Modules у файлі `src/App.js`:
```javascript
import React, { useState } from 'react';
import styles from './App.module.css'; // Імпорт CSS Modules
function App() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
{/* Використовуйте об'єкт styles для посилання на CSS класи */}
# Лічильник
Поточний лічильник: {count}
+
-
);
}
export default App;
```
**Використання звичайного CSS файлу:**
Ви також можете використовувати звичайний CSS файл для визначення глобальних стилів. У файлі `src/index.css` ви можете визначити глобальні стилі.
Наприклад, додайте наступний CSS стиль:
```css
body {
font-family: sans-serif;
}
```
Цей стиль буде застосовано до всього елементу `body` вашого застосунку.
## Наступні кроки
Вітаю, ви завершили свій перший React застосунок! Далі ви можете вивчати більше про React, наприклад:
* **Комунікація між компонентами:** Дізнайтеся, як дозволити різним компонентам спілкуватися між собою.
* **Обробка форм:** Дізнайтеся, як створювати та обробляти форми.
* **Маршрутизація:** Дізнайтеся, як використовувати React Router для створення багатосторінкових застосунків.
* **Redux або Context API:** Дізнайтеся, як керувати станом застосунку.
* **Hooks:** Поглиблено вивчіть React Hooks, наприклад `useEffect`, `useContext` тощо.
Пам'ятайте, React - це технологія, яка потребує постійної практики та навчання. Бажаю вам приємного навчання!
Published in Technology
