Как можно использовать JavaScript код в рамках JSX?

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

Основные способы:

• Вставка переменных и выражений:

  // Переменная
  const name = 'React';
  const element = <h1>Привет, {name}!</h1>;
  
  // Выражение
  const sum = 2 + 2;
  const result = <p>Результат сложения: {sum}</p>;
  

• Вызов функций:

  function formatName(user) {
    return user.firstName + ' ' + user.lastName;
  }
  
  const user = { firstName: 'Иван', lastName: 'Петров' };
  const greeting = <h1>Привет, {formatName(user)}!</h1>;
  

• Условное отображение (тернарный оператор):

  const isLoggedIn = true;
  const userStatus = isLoggedIn ? <p>Вы вошли в систему.</p> : <p>Пожалуйста, войдите в систему.</p>;
  

• Использование циклов для рендеринга списков (обычно с map):

  const items = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
  const listItems = items.map((item, index) =>
    <li key={index}>{item}</li>
  );
  
  const list = <ul>{listItems}</ul>;
  

• Передача пропсов (значений свойств) компонентам:

  // Передача строки
  <MyComponent title="Hello" />
  
  // Передача числа
  <MyOtherComponent count={10} />
  
  // Передача объекта
  const data = { id: 1, value: 'test' };
  <AnotherComponent data={data} />
  
  // Передача функции
  <Button onClick={() => console.log('Кнопка нажата')} />
  

• Использование логических операторов (&&) для условного рендеринга:

  const showMessage = true;
  const message = showMessage && <pНайдено новое сообщение.</p>;
  

Важно помнить, что внутри {} могут быть только выражения, которые возвращают значение (строка, число, элемент JSX, массив элементов, null, undefined). Операторы (if, for, while) нельзя использовать напрямую, но их функциональность можно реализовать с помощью тернарных операторов, циклов map или выноса логики в отдельные функции.