Дмитрий Pacification

Думаю какие-то фундаментальные знания Вам помогут: www.ooart.ru/uploads/book/arhitektura_korporativny...
https://www.quality-assurance-group.com/book/sover...

Ну про Axios уже ответили, по этому ссылок не предоставлю

Материал погугли

Мне кажется, что можно для такого случая использовать реакт роутер https://reacttraining.com/react-router/web/example...

Можно так же создать компоненту Breadcrumbs которая будет иметь свойство path, метод parseUrl который берет либо из текущего location, либо мы прокидываем руками (на ваш вкус и цвет), getPath будет возвращать значение и setPath будет принимать значение и предварительно его обрабатывать. И когда делаешь history.push дергать сеттер, который обновляет свойство (если все же выбрали прокидывать руками).

Я учил реакт на курсах. До того как я взялся за реат я уже знал как собирать фронтенд с помощью Gulp. Освойте сначала его. Как собирать стили и скрипты. Потом я сам по оф документации освоил webpack. Ну как освоил, могу подключить babel и настроить веб сервер (webpack-dev-server). Все вопросы и проблемы решаются путем гугления. How to build jsx with webpack. До работы с jsx я немного поковырял что такое ES6. Без этого сложно учить реакт.
TheMoth посоветовал хорошую книгу. Я соглсен с его ответом. Прочитайте её, разбиритесь как настраивать gulp и webpack (Можно конечно просто webpack, но для общего развития осилить оба не помешает)
https://webdesign-master.ru/blog/tools/2016-03-09-...

У меня была проблема с обычным js. Моя проблема оказалась в том, что я не правильно прописал gulp.src. Инструкция gulp-babel на npmjs работает отлично. Если у кого-то не работает, значит нужно внимательно проверить урлы и установленные пакеты