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

Набирайте в интернете KeyboardEvents, вам нужно добавить обработчики событий на нажатие клавиш клавиатуры. И в зависимости от этого писать логику

Такая ошибка может появляться из-за того, что вы передаёте напрямую пропсы из одного компонента в другой. Например, в ваша функция handleAdd при вызове в дочернем компоненте обращается к пропсам родителя. React ругается на такую логику, так как пропсы относятся к внутреннему состоянию каждого компонента и не должны мутироваться извне.
Попробуйте воспользоваться деструктуризацией

Привет)) для веба однозначно нужно знать html, даже если ты пишешь только сервера. Учить его, к счастью, десятки часов не надо, он запоминается на ходу. По поводу CSS -- для фронтенд разработчика обязательно знать надо, причем на хорошем уровне. С этим языком разметки уже посложнее -- CSS по-моему вообще выучить нельзя, его надо прочувствовать.
А вообще для начала фронтенд-карьеры полезно просто сайтики поверстать.

JS -- это уже следующий уровень: сначала на уровне "оживления", анимации и динамики сайта, а уже потом на уровне полноценного фронтенда, фреймворков, логики, SPA, PWA, вплоть до 3d-рендеринга, онлайн-игр и разработки мобильных приложений типа discord или instagram