JSX — это синтаксический сахар над React.createElement(), который позволяет писать HTML-подобный код прямо в JavaScript. И как по мне я его очень люблю, а с приходом Next.js так вообще работать с React одно удовольствие.

Да: <div>Привет, JSX</div> — это валидный JS. Но не будем спешить радоваться: здесь есть свои подводные камни, особенно когда речь заходит о событиях и списках. Их разбирали уже много сотен раз, но я хочу поделиться своими мыслями и показать конкретные примеры.

В отличие от нативного HTML, где мы пишете onclick, в JSX события пишутся в camelCase и передаются как функции, а не строки. То есть не onClick="handleClick()", а onClick={handleClick}. Обратим внимание на фигурные скобки и отсутствие кавычек — это не HTML!

handleKeyUp

function handleKeyUp(e) {
  document.getElementById('title').innerText = e.target.value;
}

Что происходит: Каждый раз, когда вы отпускаете клавишу в инпуте, функция лезет в DOM через document.getElementById и меняет текст элемента с id="title".

Как применяется:

<input onKeyUp={handleKeyUp} type="text" />

Почему так делать НЕ НАДО:
В React никогда не трогайте DOM напрямую (ну, кроме крайних случаев). Это как писать var вместо const — технически работает, но коллеги будут плакать. В реальности вы бы использовали useState и обновляли состояние.

Но для примера сойдёт.

handleClick

function handleClick(e) {
  document.getElementById('title').innerText += ' ' + e.target.textContent;
}

Что происходит: При клике на кнопку к тексту заголовка добавляется пробел и текст самой кнопки (в нашем случае —: Строка).

Как применяется:

<button onClick={handleClick}>Строка</button>

Лайфхак: Обратите внимание, что e.target.textContent — это содержимое кнопки. Так что если мы напишем <button>Клик!</button>, в заголовок добавится “Клик!”.

handleMouseEnter / handleMouseLeave

function handleMouseEnter(e) {
  e.target.classList.add('hover');
}

function handleMouseLeave(e) {
  e.target.classList.remove('hover');
}

Что происходит: При наведении курсора на кнопку добавляется класс hover, при уходе — удаляется. В CSS вы бы прописали стили для .hover, чтобы кнопка светилась, как неоновая вывеска.

Как применяется:

<button 
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
>
  Кнопка
</button>

Для чего это нужно: Hover-эффекты — must-have для любого уважающего себя UI. Без них кнопки будут выглядеть как серые кирпичи.

handleMouseDown / handleMouseUp

function handleMouseDown(e) {
  e.target.classList.add('active');
}

function handleMouseUp(e) {
  e.target.classList.remove('active');
}

Что происходит: При нажатии кнопки (но не отпускании!) добавляется класс active. Это нужно, чтобы кнопка “проваливалась” при клике — стандартный паттерн для UX.

Как применяется:

<button
  onMouseDown={handleMouseDown}
  onMouseUp={handleMouseUp}
>
  Кнопка
</button>

Важно: Не путайте onClick и onMouseDown! onClick сработает при отпускании кнопки мыши, а onMouseDown — при нажатии. Если нужно имитировать нажатие, как в реальной жизни — юзайте onMouseDown/onMouseUp.

Списки в JSX: map() — ваш новый лучший друг

Ну что с событиями мы вроде разобрались теперь самое время перейти к спискам, хотя их бы стоило перенести в отдельную тему, но я все же напишу здесь.

Теперь про списки. В вашем коде три одинаковых кнопки с разными строками. Писать их вручную — как пилить воду топором. В React списки рендерятся через map(), а каждому элементу нужно задать ключ (key), чтобы React не тормозил.

const emojis = ['Строка', 'Строка1', 'Строка2'];

ReactDOM.render((
  <div>
    <input onKeyUp={handleKeyUp} type="text" />
    {emojis.map((emoji, index) => (
      <button
        key={index}
        onMouseEnter={handleMouseEnter}
        onClick={handleClick}
        onMouseLeave={handleMouseLeave}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
      >
        {emoji}
      </button>
    ))}
  </div>
), document.querySelector('#root'));

Что изменилось:

• Создали массив эмодзи.
• Проитерировались через map().
• Добавили key={index} — без этого React будет ругаться в консоли (и правильно делает).

Почему key обязателен?
React использует ключи для отслеживания изменений в списке. Если вы уберёте key, при обновлении списка React будет перерисовывать всё подряд, а не только изменённые элементы. Это как пытаться найти иголку в стоге сена без метки.

Частые ошибки новичков

1. Не трогайте DOM напрямую
   Вместо document.getElementById юзайте useState и рефы (useRef). Иначе вы превратите React-приложение в jQuery-халтуру.

2. Всегда задавайте key в списках
   И лучше не индекс (index), а уникальный ID из данных. Иначе при удалении элементов всё сломается.

3. События в JSX — это не HTML
   Помните: onClick, а не onclick, и передаём функцию, а не строку.

4. Не вешайте обработчики в render
   В вашем примере всё ок, но если вы напишете <button onClick={() => handleClick(e)}>, то при каждом рендере будет создаваться новая функция. Лучше привязывайте обработчики в конструкторе или через useCallback.

События и списки в JSX — базовые вещи, без которых никуда. Да, сначала кажется, что это куча магии, но как только поймёте, что JSX — это просто JS, станет намного проще.