JSX - что это?

JSX (JavaScript XML) - это расширение языка JavaScript, которое позволяет описывать структуру компонентов пользовательского интерфейса, похожую на разметку XML или HTML.

JSX используется в фреймворках и библиотеках, таких как React, чтобы создавать компоненты. Синтаксис JSX выглядит как смесь JavaScript и разметки XML или HTML.

Пример кода:

import React from 'react';
// JSX компонент
const Button = () => {
  return (
    
      Click me
    
  );
}
// JSX компонент, включающий другой JSX компонент
const Card = () => {
  return (
    

      
Title
      
Content
      
    
  );
}
// Использование JSX компонента
const App = () => {
  return (
    

      
Hello, world!
      
    
  );
}

В приведенном выше примере мы используем JSX для создания компонентов Button и Card, а затем включаем их в компонент App. JSX позволяет нам описывать структуру и содержимое компонентов, используя знаки <> вместо обычных кавычек и скобок JavaScript. JSX также позволяет вставлять JavaScript выражения внутри разметки, например, для обработки событий или передачи данных. Например, в JSX компоненте Button мы использовали событие onClick и функцию handleClick.

Однако, браузер не может напрямую понимать JSX код, поэтому мы используем транспиляторы, такие как Babel, для преобразования JSX в JavaScript перед его выполнением.