Вступний посібник з React: Створіть свій перший інтерфейс користувача з нуля

# Вступний посібник з 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

2. Створення за допомогою 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 - це технологія, яка потребує постійної практики та навчання. Бажаю вам приємного навчання!