React JSX — Реакт JSX

JSX — это аббревиатура от JavaScript XML, специального синтаксиса, используемого в React для упрощения создания пользовательских интерфейсов. JSX позволяет писать код, похожий на HTML, прямо внутри JavaScript, что помогает создавать UI-компоненты быстрее и удобнее. Хотя JSX выглядит как обычный HTML, на самом деле это расширение синтаксиса JavaScript.

Что такое JSX?

JSX объединяет HTML и JavaScript в одном синтаксисе, что позволяет создавать UI-компоненты в React. Он упрощает рендеринг динамического содержимого за счёт встраивания выражений JavaScript внутрь тегов, похожих на HTML.

Синтаксис:

const element = <h1>Hello, world!</h1>;

<h1>Hello, world!</h1> — это JSX-элемент, аналогичный HTML-заголовку.
JSX преобразуется в JavaScript "за кулисами". React использует функцию React.createElement(), чтобы превратить JSX в реальные HTML-элементы, которые браузер понимает.

Как работает JSX

Когда React обрабатывает JSX-код, он преобразовывает его в JavaScript с помощью инструмента Babel. Этот JavaScript создаёт реальные HTML-элементы в DOM браузера, благодаря чему отображается ваша веб-страница.

Процесс преобразования JSX

Пишем JSX: Пишите JSX так же, как HTML, внутри JavaScript-файлов (React-компонентов).

const element = <h1>Hello, World!</h1>;

JSX преобразуется: Браузеры напрямую не понимают JSX, поэтому Babel преобразует JSX в вызовы React.createElement().

const element = React.createElement('h1', null, 'Hello, World!');

React создаёт элементы: React берёт сгенерированный JavaScript и создаёт реальные DOM-элементы, которые браузер отображает.

Как использовать JSX на практике

JSX можно внедрить в React-проект для создания динамичных и интерактивных UI-компонентов. Основные шаги:

Создайте React-приложение: Если у вас ещё нет React-приложения, создайте одно с помощью Create React App:

npx create-react-app jsx-example
cd jsx-example
npm start

Пишите JSX в компоненте: В файле src/App.js добавьте JSX для отображения сообщения:

import React from "react";

function App() {
    const message = "Hello, JSX works!";

    return <h1>{message}</h1>;
}

export default App;

Вывод:

JSX-код <h1>{message}</h1> преобразуется Babel в JavaScript. Затем React создаёт виртуальный DOM-элемент для <h1> с текстом внутри. Этот виртуальный DOM затем обновляет реальный DOM браузера, выводя на экран "Hello, JSX works!".
После обработки JSX React рендерит сообщение на странице.

Применения JSX

Ниже перечислены ключевые случаи использования JSX:

1. Встраивание выражений

JSX позволяет вставлять выражения JavaScript напрямую в HTML-подобный синтаксис, используя фигурные скобки {}.

const name = 'Jonny';
const greeting = <h1>Hello, {name}!</h1>;

В этом примере:

{name} динамически подставляет значение переменной name в рендер.
JSX позволяет вставлять JavaScript-выражения для вывода динамического контента в UI.

2. Использование атрибутов в JSX

В JSX атрибуты указываются так же, как в HTML, но с некоторыми отличиями. Поскольку JSX работает вместе с JavaScript, некоторые имена атрибутов пишутся в формате camelCase вместо традиционного lowercase из HTML.

const element = <img src="" alt="A description" />;

Основные нюансы:

Атрибуты в camelCase: например, class становится className, for — htmlFor, а style в JSX — это объект.
Это связано с тем, что class и for — зарезервированные слова в JavaScript.

3. Передача дочерних элементов (children) в JSX

В JSX компоненты и элементы принимают дочерние элементы, как и в HTML. Дочерние элементы — это вложенный контент, который передаётся внутрь компонента. Это делает компоненты гибкими и переиспользуемыми.

const Welcome = (props) => {
  return <div>{props.children}</div>;
};

const App = () => {
  return (
    <Welcome>
      <h1>Hello, World!</h1>
      <p>Welcome to React.</p>
    </Welcome>
  );
};

В данном примере:

Дочерние элементы передаются через props.children, благодаря чему компонент Welcome отображает любой вложенный контент.
Компонент App передаёт два дочерних элемента (<h1> и <p>) в Welcome, что повышает гибкость использования.

4. JSX представляет объекты

JSX напрямую не рендерится как HTML. Вместо этого он компилируется в объекты JavaScript, представляющие виртуальные DOM-элементы. Эти объекты затем используются React для эффективного обновления реального DOM.

const element = React.createElement(
  "button",
  {
    className: "btn",
    onClick: () => alert("Clicked!"),
  },
  "Click Me"
);

JSX преобразуется в объект JavaScript:

{
  type: 'button',
  props: {
    className: 'btn',
    onClick: () => alert('Clicked!'),
    children: ['Click Me']
  }
}

Объяснение:

type: 'button' — тип элемента (button).
props — атрибуты, включая:
- className: 'btn' для стилизации,
- onClick: () => alert('Clicked!') — обработчик события клика,
- children: ['Click Me'] — содержимое кнопки.
React превращает JSX в объект, чтобы эффективно управлять и отображать UI.

Зачем использовать JSX в React

JSX даёт несколько преимуществ в работе с React:

Декларативный UI: JSX позволяет писать HTML-подобный код прямо в JavaScript, что облегчает визуализацию рендера компонентов и упрощает разработку интерфейсов.
Чистый и компактный синтаксис: JSX аккуратнее и короче по сравнению с вызовами React.createElement() для каждого элемента. Это снижает объем стандартного кода и делает компоненты более читаемыми.
Динамическое содержимое: JSX позволяет легко встраивать динамический контент. Выражения JavaScript в фигурных скобках {} обеспечивают динамический рендеринг данных.

Заключение

JSX — мощная особенность React, которая позволяет писать HTML-подобный код внутри JavaScript. Он упрощает создание пользовательских интерфейсов, объединяя гибкость JavaScript со структурой HTML. JSX облегчает рендеринг динамического контента, встраивание выражений и управление обработкой событий. React эффективно преобразует JSX в объекты JavaScript, которые используются для обновления реального DOM.

🔑 Ключевые моменты:

JSX сочетает HTML-подобный синтаксис с выражениями JavaScript для удобного создания UI-компонентов в React.
Babel преобразует JSX в вызовы React.createElement(), которые создают виртуальные DOM-элементы.
В JSX дочерние элементы передаются через props.children, обеспечивая гибкость компонентов.
Некоторые атрибуты в JSX отличаются от HTML и используют camelCase (например, className вместо class).
JSX улучшает читаемость кода, снижает количество шаблонного кода и упрощает разработку динамических интерфейсов.

Если у вас возникнут вопросы по работе с JSX или React — обращайтесь, мы поможем разобраться.