Александр

$('.some_class .just_child').first().find('li');

По сути - да, однако, Вы можете собирать свои стили с разным названием файла. Ещё иногда можно встретить запись на подобии <link rel="stylesheet" href="file.css?v=N">. Почитайте.

1. React.StrictMode отсутствует.
2. Не понятно, для чего Вы в App подписываетесь на изменения store и обновляете состояние им.
3. Все файлы компонентов названы с маленькой буквы, а лучше бы с заглавной.
4. Все стили описаны в файле src/style.css, а надо бы для каждого компонента их разделять. Я бы разбивал на модули.
5. Расширение .jsx используйте только для компонентов. У Вас есть файлы с логикой, которые имеют такое расширение.
6. Чтобы не передавать Redux-хранилище по цепочке в другие компоненты используется функция connect.
7. Значение о том, какой тип сущностей и фильтр по ним (important или не important; filter), лучше вынести в Redux, или композицией в родительский компонент.
8. В sirch-panel.jsx (а еще лучше бы SearchPanel.jsx) лучше хранить состоянием только значение поля для новой сущности.
9. События Redux - считаю, что лучше константы вынести в отдельный файл (action types), а сами события оформить без store.dispatch. Диспатчинг событий можно перенести в тот же connect (можно даже bindActionCreators использовать).
10. Reducer - даже если событие не данного reducer'а, то Вы возвращаете новое состояния. Лучше перенести код по модификации состояния в сам switch. Для удаления можете воспользоваться методом массива .filter. Для пометки important можете воспользоваться методом массива .map. И вообще его вынести в отдельную директорию, т. к. он не является компонентом (как и action creators).
11. Чтобы не писать такие конструкции:

className={important ? "important list-item" : "list-item"}

можете воспользоваться classnames или clsx.
12. Почитайте про useCallback. Некоторые обработчики различных события можно улучшить при помощи данного хука.
13. Вы используете разные способы экспорта компонентов: default export и named export. Наверное, чтобы в дальнейшем не путаться, следует использовать какой-то один вариант.
14. Нет сохранения данных между сессиями. Воспользуйтесь для начала localStorage.
15. Если будете использовать сохранение данных, то у Вас появится проблема с ID сущностей. id: idCounter можно будет заменить на Date.now().

Если речь идёт о том, что в realtime надо менять на уже существующей странице, то так:

const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
const expression = /[-–—]/g;

while (walker.nextNode()) {
  const node = walker.currentNode;

  if (expression.test(node.textContent)) {
    node.textContent = node.textContent.replace(expression, '-');
  }
}

Потому что это не метод, а класс (прототип). Также существуют: String, Boolean, Object, Array. При вызове классов Number, String, Boolean без оператора new они постараются привести переданное значение к примитиву (например String(true) // "true". В том случае, если их вызвать с оператором new, то они вернут новый объект (не путать с Object), значением в котором будет переданное значение. Лучше так не создавать переменные данных классов, а использовать примитивы (об этом можете почитать в книге Стоян Стефанов - JavaScript Шаблоны). У Object особое поведение при его вызове без new - он постарается понять тип переменной и впоследствии вернет экземпляр класса определенного примитива:

Object(100) // Number { 100 }
typeof Object(100) // "object"
typeof 100 // "number"
Object(100) instanceof Number // true
100 instanceof Number // false

Вызов класса Array без ключевого слова new или с ним:
с 1 аргументом - вернет пустой массив, длиной равной переданному аргументу;
с 2 и более аргументами - вернет массив значений.

Вы можете переименовывать переменные при деструкторизации.

const person = {
  name: 'John',
  age: 23
};

const { name } = person;
const { name: personName } = person;
console.log(name); // John
console.log(personName); // John

export const ModalBlock: React.FC<ModalBlockProps> = ({
  title,
  onClose,
  isOpen = false,
  children,
}: ModalBlockProps): React.ReactElement | null => {
  const [closing, setClosing] = useState(false);
  const handleClose = () => setClosing(true);
  
  useEffect(() => {
    if (isOpen) {
      setClosing(false);
    }
  }, [isOpen]);

  if (!isOpen) {
    return null;
  }

  return (
    <Dialog TransitionComponent={Transition} open={!closing && isOpen} onExited={onClose} aria-labelledby='form-dialog-title'>
      <DialogTitle id='form-dialog-title'>
        <IconButton onClick={handleClose} color='secondary' aria-label='close'>
          <CloseIcon style={{ fontSize: 26 }} color='secondary' />
        </IconButton>
        {title}
      </DialogTitle>
      <DialogContent>{children}</DialogContent>
    </Dialog>
  );
};

white-space: pre-line;

- if $(this).hasClass("catalog-button_active") {
+ if ($(this).hasClass("catalog-button_active")) {

const ThemedInput = withStyles((theme) => ({
  root: {
    "&:hover": {
      "&$underline": {
        "&::before": {
          borderColor: theme.palette.primary.dark
        }
      }
    }
  },
  input: {
    fontWeight: 700,
    color: theme.palette.primary.main
  },
  underline: {
    "&::before": {
      borderColor: theme.palette.primary.main
    }
  }
}))(Input);

const ThemedSelect = withStyles((theme) => ({
  select: {
    "&:hover": {
      "& ~ $icon": {
        color: theme.palette.primary.dark
      }
    }
  },
  icon: {}
}))(Select);

<ThemedSelect input={<ThemedInput />}></ThemedSelect>

let numbers = [1, 2, 3, 0, 4, 5, 6];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 0) {
    sum += numbers[i];
  } else {
    break;
  }
}
console.log(sum);

Первая ошибка - куда будете сохранять результат суммы? В индекс массива не пойдет.
Вторая ошибка - <=. Как только проитерируется весь массив - цикл не будет завершен, а при попытке достать элемент (а мы уже всё проитерировали) Вы рискуете получить NaN.
Третья ошибка - условие i < 0. Тут сразу две ошибки: не i а b[i]; и не <, а ===. Если оставить меньше нуля, то даже при достижении элемента равному нулю цикл не будет остановлен.

Посмотрите список самозакрывающихся тэгов.

Надо отслеживать изменения в input'е.

- let val = document.querySelector('#changer').value;
+ let val = document.querySelector('#changer');

let el = document.createElement('h3');
let cont = document.querySelector('#box');
t.addEventListener('input', () => {
    el.textContent = t.value;
});
el.textContent = t.value;
cont.append(el);

Если Вы хотите сделать что-то похожее на SPA (Single Page Application), то для начала Вам надо научить сервер отдавать всегда index.html. Следующий шаг - History API, это пригодится для подмены URL и генерации Ваших ссылок. А для того чтобы загрузить необходимое содержимое необходимо будет проанализировать location.pathname и отобразить необходимую информацию (как будто Вы нажали на элемент меню).
Второй вариант попроще - использовать location.hash для хранения уникального URL, загружать будете также как в первом варианте.

useEffect(() => {
    let intervalId = setInterval(async () => {
        const response = await fetch('http://127.0.0.1:8000/api/timecalculate', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'include',
        });
        const content = await response.json();
        const now = new Date();

        console.log(content + now);
    }, 10000)

    return () => {
        clearInterval(intervalId);
    };
}, []);

UPD: https://codesandbox.io/s/qna-q969499-m7b1n