Антон Спирин

localStorage

Хотя бы так

if (!modal.contains(event.target)) {
  this.props.closeModal();
}

Элемент по-хорошему получать через ref.

Можно использовать метод жизненного цикла componentDidMount:

class CalendarDay extends Component {
  state = { data: [] };

  comonentDidMount() {
    // тут делаем запрос к БД и передаем данные в состояние
  }
  // ...
}

Консоль отображает массив по состоянию на текущий момент. Во время вызова конструктора данных там еще нет. Чтобы в этом убедиться достаточно изменить вызов на:
console.log(JSON.stringify(db));

Используйте методы жизненного цикла:
componentDidMount для инициализации,
componentDidUpdate для повторной инициализации,
shouldComponentUpdate для препятствия ненужным перерисовкам.

Вопрос в том - при каждом вызове будет создаваться новая функция t?

Нет хук useTranslation возвращает одну и ту же функцию t при перерисовках.

если сделать так то это исправит ситуацию?

Получите ошибку. Хуки так не работают. Их надо определять в теле функциональных компонентов.

На примере использования токенов.

Авторизация:
1. Отправляем пару логин/пароль, в случае успеха получаем в ответе токен и данные пользователя.
2. Пишем данные пользователя в состояние главного компонента, из него прокидываем в контекст.
3. Токен пишем в cookie и в заголовки по-умолчанию библиотеки для http запросов.
4. Колбеки авторизации и логаута можно так-же прокинуть в форму логина и кнопку логаута через контекст.

Инициализация приложения:
1. Проверяем cookie на наличие токена.
2. Если он есть запрашиваем пользователя и пишем в главный компонент.
3. Пишем токен в заголовки по-умолчанию библиотеки для http запросов.

Логаут:
1. Удаляем токен из cookie и заголовков по-умолчанию библиотеки для http запросов.
2. Удаляем данные пользователя из состояния главного компонента.
3. Делаем редирект с защищенной страницы.

react-helmet
<Helmet title="My site" />

Развивайте алгоритмическое мышление.

function isValid(value) {
  return !isNaN(value) && value >= 0 && value <= 255;
}

function getColorNumberValue(message) {
  let value = +prompt(message, 255);
  
  while(!isValid(value)) {
    value = +prompt('Вы ввели некорректное значение. ' + message, 255);
  }
  
  return value;
}

const red = getColorNumberValue('Введите насыщенность красного в виде числа от 0 до 255');
const green = getColorNumberValue('Введите насыщенность зеленого в виде числа от 0 до 255');
const blue = getColorNumberValue('Введите насыщенность синего в виде числа от 0 до 255');

alert(`Результат: rgb(${red}, ${green}, ${blue})`);

import React, { useState, useCallback } from 'react';
import { Icon, Hint } from '../some-place';

const Example = () => {
  const [shouldShowHint, setShouldShowHint] = useState(false);

  const onMouseEnter = () => useCallback({
    setShouldShowHint(true);
  }, []);
  
  const onMouseLeave = useCallback(() => {
    setShouldShowHint(false);
  }, []);

  return (
    <div
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <Icon />
      {shouldShowHint && <Hint />}
    </div>
  );
};

<Switch>
  <Route exact path="/(route1|route2|route3)" component={RoutesWithoutHeaderAhdFooter} />
  <Route component={RoutesWithHeaderAndFooter} />
</Switch>

Странный вопрос, но:

const ROOT_ID = 'root';

ReactDOM.render(<App />, document.getElementById(ROOT_ID));

Переменную можете хоть экспортировать, хоть передавать свойством в App.

const res = a1.filter(i => a2.some(j => j.id === i.id));

setVal = (propName, value) => {
  this.setState(state => ({
    formInfo: {
      ...state.formInfo,
      [propName]: value,
    }
  }));
};

Так же переименовал getval в setVal. Так как глагол get используют в функциях возвращающих значение, а set в устанавливающих значение.

1. У вас не "React просто не видит переменную $", а выпадает исключение ESLint.

2. Модули следует экспортировать и импортировать в явном виде:

param.js

export default selector => document.querySelector(selector);

Nav_btn.js

import React, { Component } from 'react';
import $ from './param';

import './style.css';


// ...

3. Подобные подходы в React разработке не используют. Советую изучить возможности библиотеки и решать подобные задачи средствами React.

Простой пример:

const Example = () => {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <div className={isActive ? 'active' : ''}>Example</div>
      <button onClick={handleClick}>Toggle active</button>
    </div>
  );
};

При загрузке приложения, скрипты из "what" выполняются сразу, чего быть не должно.

Вы сами вызываете tt во время отрисовки компонента Home:

<Button className="def_btn" size="xl" level="2" onClick={tt("dsdd")}>

правильно так:

<Button className="def_btn" size="xl" level="2" onClick={() => tt("dsdd")}>

еще лучше написать хандлер обертку и передавать в кнопку его:

handler = () => {
  tt("dsdd");
};

<Button className="def_btn" size="xl" level="2" onClick={this.handler}>

По-хорошему, вообще не использовать jQuery в React разработке.

Свойством description надо передавать строку, а вы передаете объект.
Пример правильного использования компонента:

<Alert title="Title string" description="Description string" showIcon />;