Що таке різниця між JS та JSX?

текст перекладу
Привіт усім!

У цьому пості я розгляну різницю між JS та JSX.

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

Що таке JavaScript?

JavaScript (JS) — одна з найпопулярніших і динамічних мов програмування у світі веб-розробки. Вона може працювати як на стороні клієнта (в браузері), так і на сервері (наприклад, через Node.js). Разом з HTML та CSS JavaScript створює динамічний і інтерактивний контент для сучасних веб-сторінок.

Основні особливості JavaScript:

• Мова програмування загального призначення.
• Підтримує браузери та може виконуватися без додаткових інструментів.
• Використовується для маніпуляцій з DOM та інтеграції з API.

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

const message = "Привіт, світ!";  
function sayHello() {   
 console.log(message);  
}  
sayHello();

У цьому прикладі створюється змінна повідомлення та через функцію це повідомлення виводиться в консоль.

Що таке JSX?

JSX (“JavaScript XML”) — це розширення JavaScript, яке використовується в сучасних бібліотеках JavaScript, таких як React. JSX має синтаксис, схожий на HTML, і використовується для визначення структури компонентів у React. JSX забезпечує більш читабельний код і спрощує процес розробки компонентів.

Основні особливості JSX:

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

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

const element = 
  <h1>Привіт, Світ!</h1>;   
function App() {     
  return (    
    <div>    
      {element}        
    </div>
  );    
}

У цьому прикладі створюється компонент React за допомогою синтаксису, схожого на HTML.

Різниця між JavaScript і JSX

Використання React без JSX

React можна використовувати й без JSX, але це знижує читабельність та розширюваність коду. Як виглядатиме створення тієї ж структури без JSX:

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

 // Без JSX  
 const element = React.createElement('h1', null, 'Привіт, Світ!');

Висновок

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

Сподіваюсь, це буде корисно!

Перекладено з: JS ve JSX Arasındaki Fark Nedir?