Интересный вопрос!

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

Для начала, необходимо составить список технологий, которые потребуются изучить.

html(для разметки - как и что находится на странице)
css(для стилей - как все выглядит)

Если вы уже знакомы с данными технологиями, это хорошо.

JS

Первые 4 дня я бы уделил основам JS(синтаксис, типы данных, структуры данных, методы массивов, работа с dom, асинхронность)

Новым будет dom, остальное будет похоже на python.

dom - document object model - дерево тегов, которым можно манипулировать с помощью js. Это важная тема, которая является основной и без которой, грубо говоря, JS ничем не отличается от python, поможет, точнее будет необходимым для освоения фреймворков.

Если вам надо разрабатывать приложения, то

Остальное время фреймворк, чуть позже основ, сопутсвующие технологии(для управления состоянием, роутингом и т.п.), лучше использовать react, если есть выбор, т.к. он легче в освоении, чем angular

На счет фреймворков:
node.js - фреймворк, для написания бекенда на js
react, angular, vue - для фронтенда

angular - для серьезных приложений, enterprise, на сколько я понимаю
react - для менее серьезных приложений, но также можно использовать для серьезных

Фреймворки используются для написания web-приложений на JS. В основе лежит быстрота и минимальная стоимость операций с dom, переиспользуемые компоненты, в принципе компонентный подход к написанию приложений.

иначе можно дальше углубляться в js и работу с dom, асинхронность

Материалы:

Документация у react - хорошая
html : первые сайты в поиске
css : большая книга css
js : learnjs; видео на любой вкус, на все популярные технологии и основы js - https://www.youtube.com/channel/UCg8ss4xW9jASrqWGP...
Видео можно включать на двойную скорость, чтобы не тратить время, если будет удобно слушать, мне в принципе, нормально понимается.
На том же канале можете посмотреть любое видео, например, по react и понять вообще, что из себя представляет данная технология.

Вам надо создать два роута:
Для спсиска :

<Route path='/notifications' component={NotificationsList} />

Для конкретного элемента :

<Route path='/notifications/:typeId' component={ConcreteNotification} />

Внутри ConcreteNotification нужно извлечь параметр typeId и запросить определенный элемент по этому параметру, если надо запрашивать, если не надо, можете извлечь по typeId элемент из стора.

С помощью хуков делается так:
const { typeId } = useParams()

Если надо запрашивать данные:
useEffect(() => fetchNotification(typeId), [])

Если не надо:

const notification = useSelector(s => s.notifications.data.find(n => n.typeId === typeId))

Как я понимаю, no_text - логический параметр(true или false).

Можно сделать следующим образом:
<Page title='...' no_text={!!this.state.content}>

!!value - приводит value к логическому значению:

!!null === false
!!'' === false
!![] === true
!!'aaa' === true

Возможно это опечатка или не весь компонент, но пишется так
<Page /> или <Page></Page>, а у вас <Page>