Антон Спирин

componentDidMount() {
        document.addEventListener('click', this.close);
    }
    
    componentWillUnmount() {
        document.removeEventListener('click', this.close);
    }
    
    close = (event) => {
        const domNode = ReactDOM.findDOMNode(this);
        if (!domNode || !domNode.contains(event.target)) {
            this.setState({ isOpened: false });
        }
    }

я у себя так делаю закрытие чего-либо по клику в любом месте

<Switch>
    <div id="main" className="site__main">

Дочерними элементами Switch могут быть только Route или Redirect. Поменяйте их местами, что ли - пусть Switch будет внутри этого main'а.

добавьте файл .gitignore в проект и перечислите в нем исключения.
node_modules не нужен в репозитории. Вот тут перечислены основные исключения.

Тоже впервые вижу упоминание, что RR4 устарел, работает исправно :)

Для реализации этого функционала можно воспользоваться "Подъемом состояния". Для этого обработчик закрытия toggleMenuHandler нужно передать в пропсах
<MobileMenu onClose={this.toggleMenuHandler}/>
А внутри MobileMenu поставить обработчик onClick (у вас почему то onClose) props.onClose

Правильно заданный вопрос уже содержит половину ответа.

достаточно ли его в качестве архитектуры?

Достаточно ли хорошо решает поставленные перед ней, а так же бизнес-задачи данная архитектура?

Что ещё следует учесть при разработке чтобы архитектура была действительно true?

Удовлетворяет ли данная архитектура на 100% бизнес-требованиям к ней и на сколько качественно? И если нет, то почему именно?

Что посоветуете изучить, почитать, (подсмотреть :) )по этой теме ?

Разработка ПО и его архитектуры, жизненные циклы ПО.

{
routes.map(item => (
 <Route
  key={item.path}
   exact={item.exact}
   path={item.path}
   component={item.component}
  />
))
}

Используйте библиотеку react-router-dom

как-то так должно сработать

<Route 
  path='/publishedArticlePage' 
  render={ (props) => <PublishedArticlePage {...props} article={article} } 
/>

https://tylermcginnis.com/react-router-pass-props-...

передаете через пропсы метод который будет производить необходимые манипуляции у родителя

https://reactjs.org/docs/lifting-state-up.html

У тебя установлено значение isLoading по дефолту, удали его из defaultProps или установи значение false и получишь то что хочешь)

делаешь на гитхубе новый репозиторий, и гитхуб тебе даст список комманд, которые надо писать в консоли

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

Используйте сторонние process managers, например PM2.
У них хорошая документация, с которой просто разобраться.

const ItemComponent = props => (
  <div>
    <p>{props.title}</p>
  </div>
);

...

<Carousel
  items={items}
  ItemComponent={ItemComponent}
/>

UPD. https://codesandbox.io/s/42p1q66589

Если есть некий фирменный стиль, то компонент кнопка однозначно отражает дизайн этого стиля: фиксированные размеры, допустимые цвета. А если этого стиля нет, то такой компонент в дальнейшем позволит его легко поддержать.

Смысл может быть а может и не быть.
Если у вас компонент состоит только из одного тега и все - то конечно нет смысла.
Если есть хотя бы две вещи связанные друг с другом, например тег+стиль, или тег+код - то уже есть смысл.

Не понял в чем вопрос, кнопку можно/нужно вынести в отдельный компонент, чтобы переиспользовать её в нескольких местах без дубликации кода. Всё.

Все зависит от кода. Если стандартный react + redux, то достаточно подтянуть навигацию и переписать компоненты на rn.
Есть статьи на подобную тему, но суть в переписывание View слоя в своей архитектуре. Обычно это можно сделать добавив ещё один entry point