React

Вас цікавить, як створювати сучасні вебзастосунки з плавною роботою інтерфейсу без перезавантаження сторінки?

React – це JavaScript-бібліотека для побудови інтерфейсів користувача, яка дозволяє створювати динамічні, реактивні та компонентно орієнтовані вебзастосунки.

У цій статті ми розглянемо, як працює React, що таке компоненти, стани й властивості, і чому він став стандартом де-факто у фронтенд-розробці. Якщо стажист або зовсім зелений джун попросять вас пояснити, що таке React.js, – просто покажіть їм цю статтю.

React.js для новачків у програмуванні

В інтернеті повно посібників із React.js із назвами на кшталт for dummies, for idiots – начебто для чайників. Але вони здебільшого негуманні й доволі складні – людині без знання JavaScript користі не буде, тільки сильніше заплутається і відчує себе тим самим dummy.

Тому ми вирішили максимально просто пояснити, що таке React.js і для чого він потрібен, і навіть показати, як на ньому написати невелику онлайн-гру.

Що таке React.js

React.js – це JavaScript-бібліотека від «Фейсбуку» для зручного розроблення інтерфейсів, тобто зовнішньої частини сайтів і застосунків, з якою взаємодіє користувач.

Головна фішка React.js – компоненти і стани.

• Компонент – це шматочок коду, який відповідає за зовнішній вигляд одного з елементів сайту або застосунку. Причому такі шматочки-компоненти можуть бути вкладеними.
• Стан – це вся інформація про елемент, зокрема про його відображення. Наприклад, стан об’єкта «термометр» може описуватися властивостями current_temperature, min і max.

Компоненти і стани

Поки звучить трохи абстрактно і складно, але на ділі все набагато простіше. Потренуємося на Цукерберзі: зрештою, це його витвір – йому й відповідати.

На скріншоті три великі компоненти – пост у стрічці «Фейсбуку», блок стислої інформації та блок із виведенням фотографій. До кожного з них входять дрібніші компоненти.

Наприклад, усередині поста є текст, зображення, аватарка, ім’я автора, лайки, коментарі, різні інформаційні елементи. Усередині блоку з фотографіями – окремі фото, а всередині блоку з короткою інформацією – власне та сама коротка інформація.

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

Адже зміст поста – це теж його стан. Саме в цьому проявляється гнучкість і сила React.js: ви пишете компонент один раз, а потім просто передаєте йому різні стани.

У React.js є власні засоби для управління станами, але на практиці в середніх і великих проєктах частіше використовують Redux – сторонній менеджер станів. Він зручніший і краще масштабується.

Навіщо потрібен React.js, якщо є HTML, JavaScript і CSS

React.js – це всього лише спосіб у зручному вигляді представити код JavaScript і HTML, зробити його повторюваним і наочним. Компоненти React.js пишуть особливою мовою – JSX, яка має вигляд суміші JavaScript і HTML.

Код JSX досить наочний, і, до речі, те, що схоже на HTML, – зовсім не HTML 🙂 Звучить галюциногенно, але це просто синтаксис JSX.

Браузеру розуміти JSX не потрібно – код React.js транслюється в JavaScript, з яким знайомий будь-який браузер, що поважає себе. Для цього написаний на React.js застосунок проганяють, наприклад, через Babel – спеціальну програму-транспайлер, що перекладає різні уявлення (тобто мови на кшталт JSX) у JavaScript-код.

У React.js є три потужні переваги:

• JSX набагато простіше читати і розуміти, ніж JavaScript, а отже, на підтримку і налагодження коду витрачається набагато менше часу розробників (а це зарплати і швидкість нових релізів).
• У ньому зручно реалізовано систему компонентів – повторюваних частин коду, які використовуються в різних умовах і обставинах і змінюються залежно від контексту.
• Кожен компонент залежить тільки від свого стану – а отже, набагато легше усувати помилки в коді, якщо щось не працює або працює не так, як очікувалося. Тобто помилки стають очевидними: компонент, який працює коректно сам по собі, завжди працюватиме коректно – якщо тільки йому не передати якийсь неправильний стан.

У підсумку React.js допомагає заощадити час, робить код більш зрозумілим і структурованим, дає можливість перевикористовувати великі блоки. Усе це допомагає значно знизити вартість розробки, підтримки, оновлення та налагодження застосунків, а також робити їх значно швидшими.

До того ж, знаючи JavaScript і HTML, вивчити його досить просто – для основ вистачить кількох днів. React.js ефективний тільки на проєктах із великою кількістю динамічних сторінок. Робити на React.js сайт-візитку – це перебір.

Конкуренти React.js

У React.js є і свої конкуренти. Наприклад, бібліотеки Vue.js і Angular. На них теж пишуть користувацькі інтерфейси, у кожного є свої плюси і мінуси. Поки що роботодавці частіше чекають від розробників знання React.js . Він зустрічався у вимогах 3300 разів, Vue.js – 1782 рази, а Angular – 1282 рази.

Згідно з дослідженням Stack Overflow, React.js був другим за популярністю веб-фреймворком у 2022 році, поступаючись лише Node.js.

Він навіть обігнав динозавра jQuery, який розробники вже кілька років ненавидять (за даними того ж дослідження), але масово продовжують використовувати. Раніше ця бібліотека застосовувалася в багатьох сайтах і веб-додатках – не переписувати ж їхній код. Четверте місце посів фреймворк для Node.js – Express. А конкуренти React.js – Angular і Vue.js – п’яте і шосте місце відповідно.

А ще існує React Native – теж розробка «Фейсбуку», яку не слід плутати зі звичайним React.js. У якийсь момент компанія зрозуміла, що на React.js пишуть застосунки не тільки для браузерів, а й для різних операційних систем. Щоправда, працювали такі додатки досить повільно. Щоб вирішити цю проблему, у «Фейсбуці» і створили нативну версію бібліотеки.

Синтаксис React Native схожий на JSX, але перекладається зрозумілою і звичною для Windows, macOS, Android та інших операційних систем мовою.

Тобто застосунок стає нативним – використовує стандартні для різних платформ можливості та протоколи, а не запускається в браузері. Мало того, на платформі React Native можна використовувати й інші мови програмування – наприклад, Java, Swift, Objective-C.

Де завантажити React.js

Отримати доступ до React.js можна двома способами.

Онлайн-редактори коду

Це найпростіший спосіб. Можна погратися з бібліотекою в онлайн-пісочницях CodePen і CodeSandBox або завантажити HTML-файл із шаблоном із GitHub. Після цього свій код можна прогнати через Babel – теж онлайн, щоб не встановлювати зайві додатки.

React.js на комп’ютері

Інсталяція та налаштування повноцінного оточення React.js вимагає більше часу і підходить для більш просунутих користувачів.

Для цього попередньо потрібно встановити Node.js – це середовище, яке дає змогу запускати JS-код як серверний додаток.

Розробка React-додатку

Напишемо на React.js веб-версію безсмертного хіта – гри «хрестики-нулики». Весь код, за винятком стилів, писатимемо у файлі App.js у папці src.

Спочатку імпортуємо модуль React, вебхук із неї та бібліотеку ReactDOM для рендерингу компонентів:

• import React, { useState } from «react»;
• import ReactDOM from «react-dom»;

Логіку гри писатимемо в компоненті App, який уже містить код. Можете його повністю видалити – він нам не знадобиться:

function App() {

/*Тут буде логіка додатка*/

};
За допомогою useState створимо хук, який повертає масив squares, – він зберігатиме клітинки ігрового поля:

function App() {

const [squares, setSquares] = useState(Array(9).fill(null));

};

squares буде ініціалізуватися на початку гри як масив із дев’яти порожніх елементів, а його стан за необхідності змінюватиме функція setSquares.

Створимо другий хук для зберігання черги (хто ходить наступним: X або 0):

function App() {

const [squares, setSquares] = useState(Array(9).fill(null));

const [xIsNext, setXIsNext] = useState(true);

};

За замовчуванням стан встановлюється в true – це означає, що першими ходитимуть хрестики. Функція setXIsNext перемикає черги гравців.

На кожному ході треба перевіряти, чи не визначився переможець. Для цього напишемо функцію calculateWinner:

const calculateWinner = (squares) => {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
}
return null;
};

У calculateWinner передається масив із поточними значеннями клітин ігрового поля. У внутрішньому масиві lines містяться виграшні комбінації полів. Функція перебирає їх, підставляючи на місце індексів вхідного масиву, і, якщо всі три значення співпадуть, повертає переможця (X або 0) або null, якщо переможця немає.

Значення calculateWinner зберігається у змінній winner:

function App() {
const [squares, setSquares] = useState(Array(9).fill(null));
const [xIsNext, setXIsNext] = useState(true);
const winner = calculateWinner(squares);
};

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

function App() {
{
/* Решта коду */

const handleClick = (i) => {
const squaresCopy = […squares];
if (winner || squaresCopy[i]) return;
squaresCopy[i] = xIsNext ? “X” : “O”;
setSquares(squaresCopy);
setXIsNext(!xIsNext);
};

Наступна функція буде малювати клітини поля, які насправді є звичайними HTML-кнопками. renderSquare приймає номер квадрата і повертає кнопку, на яку можна натиснути і зробити хід:

const renderSquare = (i) => {
return (
<button className=”square” onClick={() => handleClick(i)}>
{squares[i]}
</button>
);
};

Нехай програма виводить статус гри над полем. Якщо є переможець, то статус буде «Переможець: X» або «Переможець: 0». Якщо ж переможця немає – «Наступний гравець: X» або «Наступний гравець: 0».

const status = winner
? `Winner: ${winner}`
: `Next player: ${xIsNext ? “X” : “O”}`;

Тепер пропишемо JSX-елементи, які повертатиме функція App, – вони й відображатимуться на сторінці:

<div className=”game-field”>
<div className=”status”>{status}</div>
<div className=”board-row”>
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</div>
<div className=”board-row”>
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</div>
<div className=”board-row”>
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</div>
</div>

Спочатку виводиться статус гри, потім за допомогою renderSquare малюється кожна клітинка ігрового поля.

Щоб ігровий інтерфейс мав гарний вигляд і клітинки під час натискання на них не вилазили за межі своїх рядів, потрібно налаштувати стилі сторінки. Збережіть у файлі styles.css такий код:

html, body {
height: 100%;
font-size: 30px;
}

#root {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.flex {
display: flex;
}

button {
width: 100px;
height: 100px;
font-size: 30px;
color: red;
}

Підключіть файл директивою import:

import «./styles.css»;
І додайте в кожен ряд (елементи div з атрибутом className=«board-row») клас flex.

Зверніть увагу: слово class у JavaScript зарезервовано для інших цілей, тому ім’я класу елемента в ньому вказують за допомогою аналога – className.

Весь код проєкту:

import React, { useState } from “react”;
import ReactDOM from “react-dom”;
import “./styles.css”;

function App() {
const [squares, setSquares] = useState(Array(9).fill(null));
const [xIsNext, setXIsNext] = useState(true);
const winner = calculateWinner(squares);

const handleClick = (i) => {
const squaresCopy = […squares];
if (winner || squaresCopy[i]) return;
squaresCopy[i] = xIsNext ? “X” : “O”;
setSquares(squaresCopy);
setXIsNext(!xIsNext);
};

const renderSquare = (i) => {
return (
<button className=”square” onClick={() => handleClick(i)}>
{squares[i]}
</button>
);
};

const status = winner
? `Winner: ${winner}`
: `Next player: ${xIsNext ? “X” : “O”}`;

return (
<div className=”game-field”>
<div className=”status”>{status}</div>
<div className=”board-row flex”>
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</div>
<div className=”board-row flex”>
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</div>
<div className=”board-row flex”>
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</div>
</div>
);
};

const calculateWinner = (squares) => {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
}
return null;
};

Потім скачайте пакет create-react-app за допомогою npm:

npm i -g create-react-app

Коли модуль встановиться, створіть шаблон програми, виконавши таку команду:

create-react-app my-first-app

Якщо все буде ОК, Node.js наприкінці повідомлення виведе Happy hacking!

Запустіть додаток:

cd my-first-app
npm start

За допомогою команди cd ми перейшли в папку проєкту, а командою start запустили локальний сервер розробки http://localhost:3000/.

Підсумок

React.js – досить проста бібліотека, хоча, як і в будь-якій справі, тут є нюанси. Наприклад, вебхуки, односпрямована передача даних, callback-функції, віртуальний DOM, методи життєвого циклу. Написати новий “Фейсбук” або “Інстаграм” на React.js не так-то просто, але все одно це дуже дружня бібліотека.

Обов’язково ознайомтеся з документацією проекту та підручником із синтаксису JSX на офіційному сайті React.js. Почніть з Hello, World! і сміливо експериментуйте в CodePen – так радять автори гайда.

Як завжди, найлегше освоювати технологію на реальних завданнях – наприклад, поставте собі за мету скопіювати частину інтерфейсу “Фейсбук” або “Інстаграм”. Чому б і ні?