Який і коли вибрати

Знайомство з JavaScript та React: порівняння та вибір

На початку мого шляху в розробці веб-інтерфейсів, я часто стикався з такими термінами, як JavaScript, React, HTML та CSS. Якщо HTML та CSS здавалися досить зрозумілими, то JavaScript і React вимагали значно глибшого вивчення.

Дискусії про те, що краще – React чи JavaScript, не вщухають серед розробників інтерфейсів. Яка ж різниця між ними? Коли доцільніше використовувати React, а коли JavaScript? Можливо, ці питання виникають і у вас.

У цій статті я представлю вам JavaScript та React – дві провідні технології веб-розробки, порівняю їхні можливості та дам поради щодо вибору інструменту для створення ваших веб-проектів.

Що таке JavaScript?

JavaScript – це мова програмування, яка використовується для створення інтерактивних та динамічних веб-сторінок. Її також називають Vanilla JavaScript або Plain JavaScript. Більшість фронтенд-розробників використовують JavaScript у поєднанні з HTML та CSS для розробки інтерфейсів користувача.

JavaScript є досить гнучкою мовою, що дозволяє створювати різноманітні додатки – від веб-програм до ігор та мобільних застосунків. Її популярність, зумовлена простотою використання та універсальністю, підтверджується результатами опитування StackOverflow 2023, де JavaScript визнано однією з найпопулярніших мов програмування.

Джерело зображення: stackoverflow.co

Ключові характеристики JavaScript

JavaScript вже давно завоював статус найбільш поширеної мови програмування. Його популярність обумовлена наступними особливостями:

Скриптова мова з підтримкою асинхронного програмування

JavaScript дає можливість писати сценарії, які виконуються в середовищі виконання. Це робить її ідеальною для створення швидких прототипів, веб-додатків та автоматизації рутинних задач.

JavaScript не блокує основний потік виконання та використовує такі механізми, як callbacks, Promises та async/await для реалізації асинхронного програмування. Це значно спрощує отримання даних з сервера без затримки основних процесів.

Приклад коду:

    function fetchData() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("Дані успішно отримано!");
            }, 2000);
        });
    }

    fetchData().then(data => {
        console.log(data);  // Виведе: Дані успішно отримано!
    });
   

Функція fetchData повертає обіцянку (Promise). Параметри resolve та reject визначають успішне виконання або невдачу асинхронної операції.

Маніпуляції з DOM

Об’єктна модель документа (DOM) дозволяє легко взаємодіяти зі структурою HTML-документа на основі дій користувача.

Наприклад:

        var heading = document.getElementById('myHeading');

        document.getElementById('changeTextButton').addEventListener('click', function() {
            heading.textContent="Текст змінено!";
        });

        document.getElementById('highlightButton').addEventListener('click', function() {
            heading.classList.add('highlight');
        });
    

Тут представлено обробник подій, який відстежує взаємодію користувача. При натисканні на кнопку текст заголовка змінюється.

Динамічна типізація

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

Приклад:

            let variable1 = 42;  // variable1 має тип number
            console.log(variable1);  // Виведе: 42

            variable1 = "Вітаємо на techukraine.net!";  // Тепер variable1 має тип string
            console.log(variable1);  // Виведе: Вітаємо на techukraine.net!
        

Як бачите, спочатку ми присвоїли змінній1 число 42, а потім без проблем замінили його на рядок “Вітаємо на techukraine.net!”.

Розширюваність

Функціональність JavaScript можна розширити за допомогою різноманітних бібліотек та фреймворків. Angular є прикладом фреймворка, а React – прикладом бібліотеки JavaScript.

Що таке React?

React – це популярна бібліотека JavaScript для створення користувацьких інтерфейсів веб- та мобільних додатків. Її розробила компанія Meta (раніше Facebook) для внутрішнього використання, а потім зробила її доступною для всіх як бібліотеку з відкритим вихідним кодом. Основна мета React – зменшити кількість помилок, що виникають у процесі розробки інтерфейсів користувача. Бібліотека дає змогу створювати багаторазово використовувані компоненти – невеликі блоки коду.

React відомий своїм синтаксисом JSX, який поєднує HTML та JavaScript. Це дозволяє розробникам писати HTML-код у файлах JavaScript. React також можна використовувати зі сторонніми фреймворками, наприклад, Bootstrap, для стилізації додатків.

Ключові особливості React

React є однією з найвідоміших технологій серед веб-розробників, що підтверджується опитуванням Stackoverflow 2023.

Джерело зображення: stackoverflow.co

Популярність React пояснюється його особливостями:

Компонентний підхід

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

В структурі React-додатку компоненти зазвичай знаходяться в папці ‘src’.

Декларативний стиль

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

Приклад:

            const numbers = [1, 2, 3, 4];

            const DoubledNumbersList = () => {
              return (
                <ul>
                  {numbers.map(number => (
                    <li key={number}>{number * 2}</li>
                  ))}
                </ul>
              );
            };

            // Відобразити компонент
            ReactDOM.render(<DoubledNumbersList />, document.getElementById('root'));
        

Масив “numbers” і компонент “DoubledNumbersList” описують, як має виглядати інтерфейс. Ми оголошуємо, що кожне число має бути подвоєне та представлене у вигляді списку.

Одностороння прив’язка даних

React використовує односпрямований потік даних. Дані передаються від батьківського компонента до дочірнього. Якщо змінюється стан батьківського компонента, то відповідні зміни автоматично відображаються в дочірніх. Однак зміни в дочірньому компоненті не впливають на батьківський. Це робить управління станом додатку більш передбачуваним.

            import React, { useState } from 'react';

            // Дочірній компонент
            const ChildComponent = ({ data }) => {
              return (
                <div>
                  <p>Дані від батьківського компонента: {data}</p>
                </div>
              );
            };

            // Батьківський компонент
            const ParentComponent = () => {
              const [parentData, setParentData] = useState('Початкові дані');

              const handleDataChange = () => {
                // Змінюємо стан у батьківському компоненті
                setParentData('Оновлені дані');
              };

              return (
                <div>
                  <button onClick={handleDataChange}>Змінити дані</button>
                  <ChildComponent data={parentData} />
                </div>
              );
            };

            // Основний компонент
            const App = () => {
              return (
                <div>
                  <h1>Приклад односторонньої прив'язки даних у React</h1>
                  <ParentComponent />
                </div>
              );
            };

            export default App;
        

ParentComponent використовує useState для управління станом parentData. Функція handleDataChange змінює його значення. ChildComponent отримує дані як проп і відображає їх.

Віртуальний DOM

React створює віртуальну копію DOM кожного разу, коли змінюється стан компонента. Потім бібліотека порівнює зміни у віртуальному DOM з фактичним і оновлює лише необхідні елементи. Це підвищує продуктивність додатку.

Приклад:

            import React, { useState } from 'react';

            const App = () => {
              // Стан для лічильника
              const [counter, setCounter] = useState(0);

              // Обробник подій для збільшення лічильника
              const incrementCounter = () => {
                setCounter(counter + 1);
              };

              return (
                <div>
                  <h1>Лічильник: {counter}</h1>
                  <button onClick={incrementCounter}>Збільшити</button>
                </div>
              );
            };

            export default App;
        

У прикладі оголошено змінну-лічильник та кнопку. При натисканні на кнопку лічильник збільшується. React не оновлює весь DOM, а лише порівнює зміни з віртуальним DOM, і оновлює лише елементи, які змінилися.

React проти JavaScript

Характеристика	React	JavaScript
Використання/тип	React – це бібліотека JavaScript для створення інтерфейсів користувача.	JavaScript – це мова програмування, що використовується у веб-розробці. Найчастіше використовується у фронтенді, але також застосовується в бекенді з Node.js.
Простота вивчення	Крива навчання React є досить крутою через синтаксис JSX і компонентну архітектуру. Знання JavaScript необхідні для швидкого освоєння React.	Vanilla JavaScript легше вивчити, ніж React. Потрібне знання HTML та CSS.
Популярність	React з’явився в 2013 році. Є популярною бібліотекою, але її популярність поступається JavaScript.	JavaScript існує з 1995 року. За багато років став найпопулярнішою мовою програмування.
Підтримка	React дозволяє створювати компоненти, які можна повторно використовувати. Це спрощує підтримку коду.	Підтримка великих програм на чистому JavaScript може бути складною. Велика кількість коду в одному файлі погіршує читабельність.
Продуктивність	React використовує віртуальний DOM для створення та управління складними інтерфейсами. Це дозволяє організувати код у невеликі частини, що робить оновлення DOM швидшим.	Vanilla JavaScript потребує ручного втручання для досягнення потрібної продуктивності.
Безпека	React створено з врахуванням сумісності, що робить його вразливим до атак. Безпеку можна підвищити за допомогою сторонніх інструментів.	У JavaScript є різні вбудовані функції безпеки. API JavaScript не надає тимчасових маркерів безпеки, що робить його більш безпечним.
Екосистема	React має велику колекцію сторонніх бібліотек та фреймворків, але його екосистема менша, ніж у JavaScript.	JavaScript має безліч бібліотек та фреймворків, таких як React, Vue та Angular. Деякі можна використовувати в різних екосистемах.

Обмеження React

Попри всі переваги, у React є деякі обмеження:

• Не підтримує старі браузери: React розроблений для сучасних браузерів. Старіші браузери можуть не підтримувати всі його можливості.
• Орієнтований на інтерфейс: React розроблений для створення інтерфейсів. Для повноцінного стеку розробки потрібно використовувати додаткові фреймворки, наприклад, ExpressJS у Node.js.
• Крива навчання: React може бути важким для вивчення новачкам у програмуванні.

Обмеження JavaScript

JavaScript є дуже потужною мовою. За даними Statista, понад 63% розробників використовують JavaScript.

Але, як і будь-яка технологія, JavaScript має свої недоліки:

• Час розробки: Розробникам потрібно писати код з нуля, якщо використовується чистий JavaScript.
• Не підходить для великих програм: Підтримка великих JavaScript-програм може бути складною задачею.
• Однопотоковість: JavaScript обробляє одну операцію за раз. Це може бути обмеженням для завдань, що потребують великої обчислювальної потужності.

React проти JavaScript: що вибрати?

React і JavaScript не є прямими конкурентами. React – це одна з багатьох бібліотек JavaScript для створення інтерфейсів.

В деяких ситуаціях вибір між JavaScript та React буде очевидним. Коли React підходить більше, а коли JavaScript, залежить від вимог проекту. Нижче наведено декілька рекомендацій:

Коли обрати React замість JavaScript?

• Швидка розробка: React надає готові шаблони коду, що прискорює розробку. Він добре працює з різними фреймворками та бібліотеками.
• Великі програми: Модульна архітектура React спрощує розробку та підтримку великих проектів. Можна легко оновлювати, видаляти та додавати нові компоненти, не змінюючи основний код.
• Динамічний контент: React дозволяє використовувати сторонні бібліотеки, наприклад, Redux, для управління станом програми. Також віртуальний DOM оновлює лише необхідні частини інтерфейсу, коли користувачі взаємодіють з додатком.

Коли обрати JavaScript замість React?

• Невеликі додатки: JavaScript добре підходить для невеликих програм, які не потребують складної взаємодії з користувачем.
• Навчання: Vanilla JavaScript дозволяє налаштувати більшість аспектів програми з нуля. Тому, якщо потрібно глибше зрозуміти JavaScript, використання чистої мови є хорошим варіантом.

Висновок

Сподіваємось, тепер ви краще розумієте відмінності між React та JavaScript, їхні можливості та області застосування. Загалом, JavaScript ідеальний для невеликих проектів, особливо якщо ви хочете вивчити, як працює мова на глибинному рівні.

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

Якщо ви хочете порівняти React з іншою технологією, зверніть увагу на нашу статтю про React проти Angular.