Есть ли смысл делать SPA на ванильном JS?

Учи Webpack + Vanilla SPA для базовых понятий, потом берись за React для реальной боевой практики и работы.

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

Очень редко делают SPA без реакта/вью, поэтому можно ограничиться изучением, как это работает и написать простенькое приложение, но не погружаться глубоко в дебри. Далее переходить уже к подходящим инструментам

>Заниматься разбором WebPack

Не нужно этим заниматься и использовать Webpack, когда он не актуален уже много лет как. Есть Vite и прочие современные сборщики которые делают тоже самое в 10 раз быстрее и лаконичнее, без необходимости ковыряться в монструозных конфигах для типовых случаев сборки.

>и пробовать делать SPA на ванильке ИЛИ сразу начинать учиться React-у

Зачем что-то делать если в этом нет смысла? Смысл мучатся с ручным DOM если все равно ты это выкинешь и будешь использовать React? Чтобы разобраться с DOM API будет предостаточно возможностей и так - React не избавляет от работы с DOM полностью, все равно будут ситуации когда придется брать ref и заниматься этим.

Вот в начале твоего вопроса: разобрать что такое SPA и поделать на ванильном JS. Это 2 разные вещи. Не нужно делать SPA на чистом JavaScript'е -- это пустая затея!

Просто почитай, что такое SPA (если в 2-х словах, то просто генерация HTML-ки с помощью JavaScript в браузере вместо генерации HTML-ки на сервере на PHP или другом языке), поделай простые примеры на JavaScript: отправка запроса, изменение DOM, event'ы и promise, прототипы и наследования как реализуются, spread оператор (это три точки когда) как работает и т.д.

WebPack можешь просто почитать, что такое, в React'е он уже настроен и изучить уже на примере будет проще. Многие курсы по React объясняют, что это такое, если тебе попадется такой курс, то по ходу изучения React познакомишься. Не прям обязательно перед этим изучать.

Роутинг идет отдельной библиотекой к React, удивительно как ты с ним разобрался, если React не начинал)) После того как изучишь React, можешь дополнения к нему изучить такие как роутинг, redux, axios, стили как подключаются и т.д. Это все обычно с книгами и курсами по React объясняются дополнительные библиотеки.

Вебсокеты -- не думаю, что прям обязательно знать. Часто их и не спрашивают, да если и спросят, то можно сказать, что служит, чтобы получить сообщение с сервера, когда сервер является инициатором. Т.е. по HTTP ты можешь послать серверу запрос и сразу получить ответ, а когда хочешь получить ответ от сервера (например, тебе кто-то написал в ВК или в друзья добавился), то создаешь соединение через веб сокет и слушаешь, не отправит ли тебе сервер вдруг данные.