У мојим почецима у свету фронтенд развоја, термини попут JavaScript-a, React-a, HTML-a и CSS-a били су свеприсутни. Док су HTML и CSS били релативно лаки за разумевање, JavaScript и React су се чинили као изазовнији за савладавање.

Дискусија о томе да ли је бољи React или JavaScript је вечита тема у домену корисничких интерфејса. Која је заправо разлика између React-a и JavaScript-a? Када је боље употребити React уместо JavaScript-a, и обрнуто? Ова питања се вероватно мотају и вама по глави.

У овом тексту, представићу вам React и JavaScript као водеће технологије за веб развој, упоредити њихове кључне карактеристике и дати вам смернице када је најбоље користити сваку од њих приликом креирања апликација.

Шта је JavaScript?

JavaScript је скриптни језик који се користи за креирање интерактивних и динамичних веб страница. Често ћете чути да се за овај језик користе изрази „ванилла JavaScript“ или „plain JavaScript“. Већина програмера фронтенда користи JavaScript, HTML (хипертекст маркуп језик) и CSS (каскадне таблице стилова) за развој корисничких интерфејса.

JavaScript је веома прилагодљив, омогућавајући вам да креирате веб странице, игре, па чак и мобилне апликације. Његова једноставност употребе и флексибилност учинили су га једним од најпопуларнијих програмских језика, што је потврђено и анкетом StackOverflow за 2023. годину.

Извор слике: stackoverflow.co

JavaScript Функције

JavaScript је одавно учврстио своју позицију као најкоришћенији програмски језик. Следеће карактеристике објашњавају његову доминацију и широку употребу:

Скриптни језик који подржава асинхроно програмирање

JavaScript вам омогућава да пишете скрипте које се могу извршавати унутар окружења за извршавање. Скриптни језици попут JavaScript-a су веома погодни за брзу израду прототипа, развој веб апликација и аутоматизацију рутинских задатака.

JavaScript не блокира извршавање и користи функције попут callback функција, обећања (Promises) и async/await за подршку асинхроном програмирању. Ова функционалност омогућава преузимање података са сервера без блокирања главног нити процеса.

Погледајте следећи пример кода:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Подаци су успешно преузети!");
        }, 2000);
    });
}

fetchData().then(data => {
    console.log(data);  // Излаз: Подаци су успешно преузети!
});

Функција `fetchData` враћа обећање. Параметри `resolve` и `reject` служе за сигнализирање успешног или неуспешног завршетка асинхроне операције.

DOM Манипулација

Манипулација DOM-ом (Document Object Model) омогућава једноставну промену структуре 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-u се утврђују током извршавања. Ова карактеристика олакшава програмерима брзо писање кода, јер не морају експлицитно да дефинишу типове променљивих.

Погледајте овај пример кода:

let variable1 = 42;  // variable1 је типа број
console.log(variable1);  // Излаз: 42

variable1 = "Добродошли на techblog.co.rs!";  // Сада је variable1 типа стринг
console.log(variable1);  // Излаз: Добродошли на techblog.co.rs!

Као што видите, у првом примеру, променљивој `variable1` је додељена бројчана вредност 42. Међутим, у другом примеру, можемо јој доделити вредност у виду стринга „Добродошли на techblog.co.rs!“.

Проширивост

Функционалност JavaScript-a се може проширити путем разних библиотека и оквира независних произвођача. Angular је пример JavaScript оквира, док је React JavaScript библиотека.

Шта је React?

React је популарна JavaScript библиотека за развој мобилних и веб корисничких интерфејса. Развијен је од стране компаније Meta (раније Facebook) за интерну употребу, а касније је објављен као библиотека отвореног кода. React је дизајниран да смањи проблеме са којима се програмери суочавају током креирања корисничког интерфејса. Ова библиотека вам омогућава креирање компоненти за вишекратну употребу, које су мањи делови кода.

React је познат по својој JSX синтакси, која комбинује HTML и JavaScript. Ова синтакса омогућава програмерима да пишу HTML и JavaScript у истој датотеци. React можете користити и са фронтенд оквирима попут Bootstrap-а за стилизовање ваше апликације.

React Карактеристике

React је једна од најпознатијих веб технологија, што је потврђено и анкетом StackOverflow за 2023. годину.

Извор слике: stackoverflow.co

Ево неких карактеристика које објашњавају његову популарност:

Компонентни

React користи модуларну архитектуру која омогућава једноставно креирање мањих, вишекратно употребљивих делова кода. На тај начин, можете модификовати, уређивати, додавати или уклањати компоненте без потребе за преписивањем целог кода.

Ова библиотека има фасциклу ‘src’, у којој се чувају све компоненте. Ово је типична структура директоријума React апликације.

Декларативно

Ова библиотека омогућава програмерима да опишу стање апликације и кориснички интерфејс. React затим обрађује основне промене на основу програмерских описа. У суштини, програмер дефинише жељени исход, а React одлучује како га постићи.

Погледајте овај пример:

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

const DoubledNumbersList = () => {
  return (
    

      {numbers.map(number => (
        
{number * 2}
      ))}
    
  );
};

// Прикажи компоненту
ReactDOM.render(, document.getElementById('root'));

Имамо низ ‘numbers’ и компоненту ‘DoubledNumbersList’. Декларишемо да сваки број треба удвостручити и приказати као листу. Дакле, описали смо како кориснички интерфејс треба да изгледа.

Једносмерно Везивање Података

React користи једносмерни ток података. Ова карактеристика дефинише како подаци теку од родитељских ка подређеним компонентама. Ако се родитељска компонента промени, подређене компоненте аутоматски одражавају те промене.

Међутим, промене у подређеној компоненти не утичу на родитељску компоненту. Ова једносмерна функционалност олакшава предвиђиво управљање стањем апликације.

import React, { useState } from 'react';

// Подређена Компонента
const ChildComponent = ({ data }) => {
  return (
    

      
Подаци примљени од родитеља: {data}
    
  );
};

// Родитељска Компонента
const ParentComponent = () => {
  const [parentData, setParentData] = useState('Почетни Подаци');

  const handleDataChange = () => {
    // Модификовање стања у родитељској компоненти
    setParentData('Ажурирани Подаци');
  };

  return (
    

      Промени Податке
      {/* Прослеђивање података подређеној компоненти као пропс */}
      
    
  );
};

// Главна Компонента
const App = () => {
  return (
    

      
React Пример Једносмерног Везивања Података
      {/* Приказивање родитељске компоненте */}
      
    
  );
};

export default App;

`ParentComponent` користи `useState` за управљање стањем `parentData`. Функција `handleDataChange` мења стање компоненте.

Имамо и функционалну компоненту, `ChildComponent`, која приказује податке који су јој прослеђени кроз пропс.

Виртуелни DOM

React креира виртуелни DOM сваки пут када се промени стање React компоненте. Библиотека затим упоређује промене између виртуелног и стварног DOM-a и ажурира само неопходне делове.

Погледајте овај код:

import React, { useState } from 'react';

const App = () => {
  // Стање за праћење бројача
  const [counter, setCounter] = useState(0);

  // Руковалац догађајем за ажурирање бројача
  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    

      
Бројач: {counter}
      Повећај
    
  );
};

export default App;

Декларисали смо променљиву са дугметом које се повећава сваки пут када корисник кликне на дугме. React не мења цео DOM када корисник кликне на дугме. Већ само проверава промене, пореди их са стварним DOM-om и затим га ажурира.

React против JavaScript-a

Ограничења React-a

Иако React има бројне карактеристике и предности, и даље има одређена ограничења. Нека од њих су:

• Не подржава старије претраживаче: React је дизајниран да ради са модерним претраживачима попут Google Chrome, Opera, Mozilla Firefox, Apple Safari и Microsoft Edge. Можда ћете имати потешкоћа са покретањем React-a на старијим претраживачима.
• Намењен за фронтенд: React је креиран да помогне програмерима да креирају корисничке интерфејсе. Међутим, можете га користити са Node.js оквирима, попут ExpressJS-а, ако желите апликацију пуног стека.
• Стрмна крива учења: Учење React-a може бити захтевно, посебно ако сте почетник у програмирању.

Ограничења JavaScript-a

JavaScript је веома моћан програмски језик. Према Statista-и, више од 63% испитаника користи JavaScript.

Ипак, овај програмски језик има и своје недостатке:

• Захтева доста времена: Програмери морају писати код од нуле када користе ванилла JavaScript у апликацији.
• Није погодан за велике апликације: Одржавање великих JavaScript апликација може бити изазовно.
• Једнонитно: JavaScript обрађује једну операцију по једну. Ова карактеристика може бити ограничавајућа за задатке који захтевају пуно процесорске снаге.

React vs JavaScript: Који Изабрати?

Могу само да кажем да React и JavaScript нису директни конкуренти. React је само једна од многих JavaScript библиотека за развој корисничких интерфејса.

Међутим, постоје ситуације у којима можете бирати између JavaScript-a и React-a за креирање апликација. С друге стране, постоје случајеви у којима ће React бити прикладнији од JavaScript-a и обрнуто. Из моје анализе, можете користити било коју технологију када:

Када одабрати React уместо JavaScript-a

• Желите брзо да креирате апликације: React пружа шаблонски код који олакшава креирање апликације. Можете га користити и са разним оквирима и библиотекама како бисте убрзали ваш рад.
• Креирање великих апликација: Модуларна архитектура React-a олакшава креирање и одржавање великих апликација. Можете ажурирати, обрисати или додати нове компоненте како бисте скалирали вашу апликацију без промене изворног кода.
• Креирање апликација са динамичким садржајем: React можете користити са библиотекама независних произвођача, попут Redux-а, за управљање стањем ваше апликације. Ова библиотека креира и виртуелни DOM који ажурира само неопходне делове када корисници ажурирају апликацију.

Када изабрати JavaScript уместо React-a

• Мале апликације: JavaScript је погодан за мале апликације које не захтевају сложене корисничке интеракције.
• Када желите да научите како JavaScript функционише: Vanilla JavaScript вам омогућава да подешавате већину ствари од нуле. Због тога можете користити plain JavaScript ако желите дубље разумевање JavaScript-a.

Закључак

Надамо се да сада боље разумете разлике између React-a и JavaScript-a, њихове кључне карактеристике и када је најбоље користити сваку од њих. Из наше анализе, JavaScript је савршен за мале пројекте када желите да научите како JavaScript функционише у позадини.

С друге стране, можете користити React када имате велики пројекат и желите да се фокусирате на кориснички интерфејс. И React и JavaScript вам омогућавају да користите различите JavaScript оквире и библиотеке.

Ако тражите технологију која је директан конкурент React-a, погледајте наш чланак о React vs Angular.