React. JSX

Хоть JSX внешне похож на html-разметку, на самом деле это JS-код и он умеет всё то, что умеет обычный JS-код. Например, использовать переменные.
Переменные в JSX берутся в фигурные скобки.
Например.
Было:

const TodoList = () => {
  return (
    <ul>
      <li>Learn React</li>
      <li>Create Awesome App</li>
    </ul>
  );
};

Стало:

const TodoList = () => {
  const items = ['Learn React', 'Create Awesome App'];
  return (
    <ul>
      <li>{items[0]}</li>
      <li>{items[1]}</li>
    </ul>
  );
};

В JSX можно использовать функции. Например, если мы решили добавить в приложение отображение даты и времени, это может выглядеть так:

const App = () => {
  return (
    <div>
      <span>{(new Date()).toString()}</span>
      <AppHeader/>
      <SearchPanel/>
      <TodoList/>
    </div>
  );
};

Результат:

В фигурных скобках добавляем реакт-элементы

const App = () => {
  const login = <span>Log in please</span>
  return (
    <div>
      {login}
      <AppHeader/>
      <SearchPanel/>
      <TodoList/>
    </div>
  );
};

Реакт-компоненты, а также объекты (массивы, функции) в фигурные скобки в реакт добавлять нет смысла. Но можно добавлять результат вызова функции, об этом шла речь выше, а также примитивные типы данных - строки, числа, булевы значения.
Полезная особенность - если выражение в фигурных скобках null или undefined, ошибки не будет и выражение просто проигнорируется.

Благодаря этому свойству можно добавлять в JSX небольшие фрагменты логики. Предположим, мы хотим добавлять элемент login только если пользователь не залогинен.
Добавляем в код переменную isLog присваиваем ей значение false, меняем значение на true, если пользователь вошёл в систему и добавляем в JSX тернарный оператор: {isLog ? null : login}

const App = () => {
  let isLog = false;
  const login = <span>Log in please</span>
  return (
    <div>
      {isLog ? null : login}
      <AppHeader/>
      <SearchPanel/>
      <TodoList/>
    </div>
  );
};

Таким образом мы можем отображать или скрывать компоненты в зависимости от значения переменной.
Но это касается только небольших фрагментов логики, если речь о полноценном коде, ему место не в JSX, а в JS-файле.

В фигурных скобках можно передавать не только дочерние элементы, но и атрибуты.
Например, в строке

<input placeholder = 'search' />;

search является атрибутом
мы можем написать

const searchText = 'search, please'

И передать элемент searchText в фигурных скобках.

<input placeholder = {searchText} />;

Важно помнить. что кавычки при этом не требуются.
Значениями атрибутов могут быть любые переменные, в том числе объекты, массивы. Для обычных html тегов это не имеет смысла, так как тег в качестве значения атрибута ожидает строку, но для кастомных реакт-компонентов мы можем передать в качестве атрибута массив.
Например, так:

<TodoList items={['item1', 'item2']} />

Еще одна особенность атрибутов - их следует писать с маленькой буквы camel-case

Нужно запомнить два атрибута, которые в JSX пишутся не так, как в html
1. className вместо class
2. htmlFor вместо for (не очень частый атрибут, добавляется к тегу label)

В фигурных скобках можно передавать стили:

const AppHeader = () => {
  const headStyle = {
    fontSize: '40px'
  }
  return <h1 style={headStyle}>My Todo List</h1>;
};

Так мало кто делает, но так делать можно
Значение в фигурных скобках всегда true
И оно всегда превращается в строку, поэтому запуск код-иньекций невозможен