Основи React

Цей документ надає базове розуміння бібліотеки JavaScript React.

Що таке React?

React — це JavaScript-бібліотека для побудови користувацьких інтерфейсів (UI). Її розробила компанія Facebook. React використовується для розробки односторінкових веб-застосунків (SPA) та мобільних застосунків.

Основні характеристики React:

• Компонентний підхід: UI розбивається на незалежні багаторазові компоненти.
• Декларативний синтаксис: Розробник описує бажаний UI, а React ефективно оновлює DOM.
• Віртуальний DOM: React використовує віртуальну копію DOM, що дозволяє оптимізувати оновлення реального DOM, підвищуючи продуктивність.
• JSX: Синтаксичне розширення JavaScript, що дозволяє писати HTML-подібний код у JavaScript.
• Однонаправлений потік даних: Дані зазвичай передаються від батьківських компонентів до дочірніх, що спрощує керування станом застосунку.

Налаштування середовища

Для початку роботи з React вам знадобиться Node.js та npm (або yarn).

1. Встановіть Node.js: Завантажте та встановіть з офіційного сайту: https://nodejs.org/
2. Перевірте встановлення npm: Відкрийте термінал або командний рядок та виконайте:

   npm -v

   Якщо Node.js встановлено, npm має бути доступним.

Створення нового React-проєкту

Найпростіший спосіб створити новий React-проєкт — скористатися інструментом Create React App:

npx create-react-app my-first-app
cd my-first-app
npm start

• npx create-react-app my-first-app: Створює новий React-проєкт з назвою my-first-app.
• cd my-first-app: Переходить до каталогу проєкту.
• npm start: Запускає сервер розробки. Ваш застосунок буде доступний зазвичай на http://localhost:3000.

Компоненти

Компоненти є будівельними блоками UI в React. Існує два основних типи компонентів:

Функціональні компоненти

Це прості JavaScript-функції, які приймають об'єкт props (властивості) як аргумент і повертають JSX.

function Welcome(props) {
  return <h1>Привіт, {props.name}!</h1>;
}

Класові компоненти

Це класи ES6, які розширюють React.Component та мають метод render(), що повертає JSX. Класові компоненти також можуть мати власний стан (state) та методи життєвого циклу.

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Привіт, {this.props.name}!</h1>;
  }
}

У сучасному React функціональні компоненти з хуками (Hooks) є більш поширеними для керування станом та побічними ефектами.

JSX

JSX — це синтаксичне розширення JavaScript, яке дозволяє писати HTML-подібний код безпосередньо в JavaScript.

const element = <h1>Привіт, світ!</h1>;

JSX-теги можуть містити JavaScript-вирази, обернені у фігурні дужки {}:

const name = 'Іван';
const element = <h1>Привіт, {name}!</h1>;

JSX компілюється в звичайний JavaScript, а саме у виклики React.createElement().

Props (Властивості)

Props — це спосіб передачі даних від батьківських компонентів до дочірніх. Вони є незмінними (read-only) з точки зору дочірнього компонента.

function App() {
  return (
    <div>
      <Welcome name="Олена" />
      <Welcome name="Петро" />
    </div>
  );
}

У компоненті Welcome, props буде об'єктом з ключем name.

State (Стан)

Стан — це дані, які можуть змінюватися протягом життєвого циклу компонента. Стан керується всередині самого компонента (зазвичай у класових компонентах або за допомогою хука useState у функціональних компонентах). Зміна стану викликає перерендер компонента.

Приклад використання useState у функціональному компоненті:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Ви натиснули кнопку {count} разів</p>
      <button onClick={() => setCount(count + 1)}>Натисни мене</button>
    </div>
  );
}

Обробка подій

В React обробка подій схожа на обробку подій у DOM, але є деякі синтаксичні відмінності. Наприклад, події пишуться в camelCase (onClick замість onclick).

function MyButton() {
  function handleClick() {
    alert('Кнопку натиснуто!');
  }

  return <button onClick={handleClick}>Натисни</button>;
}

Умовний рендеринг

React дозволяє відображати різні елементи залежно від певних умов. Це можна зробити за допомогою операторів if/else, тернарного оператора або логічних операторів && та ||.

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Ласкаво просимо назад!</h1>;
  }
  return <h1>Будь ласка, увійдіть.</h1>;
}

Списки та ключі

При рендерингу списків елементів у React кожен елемент повинен мати унікальний атрибут key. Ключі допомагають React ефективно оновлювати, додавати та видаляти елементи списку.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return <ul>{listItems}</ul>;
}

function App() {
  const numbers = [1, 2, 3, 4, 5];
  return <NumberList numbers={numbers} />;
}

Хуки (Hooks)

Хуки — це функції, які дозволяють використовувати стан та інші можливості React у функціональних компонентах. Деякі основні хуки:

• useState: Для додавання стану до функціональних компонентів.
• useEffect: Для виконання побічних ефектів (наприклад, завантаження даних, підписки).
• useContext: Для доступу до контексту.

Висновок

Це лише базовий огляд React. Для глибшого розуміння рекомендується ознайомитися з офіційною документацією React: https://react.dev/ та практично застосовувати отримані знання у власних проєктах.