Антон Спирин

По-хорошему компонент breadcrumbs должен получать массив элементов вида:

const breadCrumbsItems = [
  {
    title: 'Home',
    path: '/',
  },
   {
    title: 'Products',
    path: '/products',
  },
  {
    title: 'Iphone 6s Black',
  },
];

и строить хлебыные крошки. Это все. Никаких деталей реализации вашего приложения этот компонент знать не должен. И уж тем более не должен инициировать никаких AJAX запросов.

Весь интерфейс:
<BreadCrumbs items={breadCrumbsItems} />
c отрисовкой массива элементов с помощью map:

<Wrapper>
  {items.map((item, i) => (
    <BreadCrumbsItem
      key={item.path}
      active={i === items.length - 1}
      path={item.path}
    >
      {item.title}
    </BreadCrumbsItem>
  )}
</Wrapper>

или:

<BreadCrumbs>
  <BreadCrumbs.Item path="/">Home</BreadCrumbs.Item>
  <BreadCrumbs.Item path="/products">Products</BreadCrumbs.Item>
  <BreadCrumbs.Item active>Iphone 6S Black</BreadCrumbs.Item>
</BreadCrumbs>

Любой. Если нужен SSR, то можно использовать отдельный backend на node.js.

React Router: Testing
Redux: Writing tests. Connected Components

У вас в browserlist в package.json поддержка только крайних версий chrome, ff и safari для development режима.
В production версии стрелочных функций не будет, но для поддержки IE надо дополнительно поставить полифилл.
Документация.

babel, babel-loader и пресеты удалите.

toggleClass = className => {
  this.setState(state => ({
    panelClassesActive: {
      ...state.panelClassesActive,
      [className]: !state.panelClassesActive[className],
    },
  }));
};

Композиция и инверсия зависимостей:

class SomePage extends React.Component {
  componentDidMound() {
    this.props.fetchSomeData();
  }

  handleSomeEvent = () => {
    doSomething();
  };

  render() {
    const { data } = this.props;

    return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
  }
}

class SomeOtherPage extends React.Component {
  componentDidMound() {
    this.props.fetchSomeOtherData();
  }

  handleSomeEvent = () => {
    doSomethingOther();
  };

  render() {
    const { data } = this.props;

    return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
  }
}

if (!modal.contains(event.target)) {
  this.props.closeModal();
}

Элемент по-хорошему получать через ref.

Можно использовать метод жизненного цикла componentDidMount:

class CalendarDay extends Component {
  state = { data: [] };

  comonentDidMount() {
    // тут делаем запрос к БД и передаем данные в состояние
  }
  // ...
}

Консоль отображает массив по состоянию на текущий момент. Во время вызова конструктора данных там еще нет. Чтобы в этом убедиться достаточно изменить вызов на:
console.log(JSON.stringify(db));

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

Проблема вообще не проблема. Изменить придется 3-4 строчки

подкладывать промисы в котрых ифить если есть отдать если нет, сходить туда то? тут я получиться скорее всего намешаю заные архитектурные слои в кучу

Можно использовать redux или mobX.

как рендерить в асинхронном режиме? в англяре был async pipe . как это сделать в рекате чтобы на неделю не улететь в оверинженирирг не знать.

Ключи состояния загрузки, условный рендерниг.
Простой пример:

class Example extends React.Component {
  state = { isFetching: false, error: null, data: [] };
  
  // ...
  
  render() {
    if (isFetching) return <Preloader />;
    if (error) return <Error error={error} />;
    
    return data.map(/ ... /); 
  }
}

Как правильно и корректно делать релейшены сущностей?

Можно передавать с бэкенда передавать все связанные данные с результатами запроса:

{
  posts: [],
  linked: {
    comments: {},
    users: {},
    tags: {}, 
  },
}

Вообще вам прежде чем приступать к разработке стоит изучить документацию React. Там же можно пройти tutorial. Почитать немного про экосистему, про state management библиотеки вроде redux и mobX.

export default reduxForm({ validate })(ChatForm);

<ChatForm form={name} />

Если хочется передавать имя свойством name, то можно обернуть компонент в connect:

const mapStateToProps = (state, ownProps) => ({
  form: ownProps.name,
});

export default compose(
  connect(mapStateToProps),
  reduxForm({ validate }),
)(ChatForm);

<ChatForm name={name} />

Вам хватит одного роута:

<Route path="/some-path/:color" component={SomeComponent} />

Параметр color можно получить в компоненте как this.props.match.params.color:

class SomeComponent extends React.Component {
  render() {
    const { match, elements } = this.props;
    const { color } = match.params;    

    const filteredElements = elements.filter(el => el.color === color);
    // ...    
  }
}

Используйте методы жизненного цикла:
componentDidMount для инициализации,
componentDidUpdate для повторной инициализации,
shouldComponentUpdate для препятствия ненужным перерисовкам.

let attachment, date, time;

if (hasAttachments) {
  const attachmentsList = attachments.filter(a => a.use_as_featured === 1 );
  attachment = attachmentsList[0];
  const dateTime = attachment['updated_at'].split(' ', 2);
  date = dateTime[0];
  time = dateTime[1];
}

<div>
  <Block color="red" />
  <Block color="green" />
  <Block color="blue" />
</div>

const colors = ['red', 'green', 'blue'];

return (
  <div>
    {colors.map((color, i) => <Block key={i} color={color} />}
  </div>
);

Вопрос в том - при каждом вызове будет создаваться новая функция t?

Нет хук useTranslation возвращает одну и ту же функцию t при перерисовках.

если сделать так то это исправит ситуацию?

Получите ошибку. Хуки так не работают. Их надо определять в теле функциональных компонентов.

Что тут можно порекомендовать.
При авторизации сохраняйте токен в cookie и хранилище приложения.
Если используете axios, то можно сохранить токен в заголовки по-умолчанию.
Пример с использованием redux, js-cookie и axios:

cookie.set('token', token);
dispatch(setToken(token)); // если не используете Redux, тут будет this.setState
axios.defaults.headers.common.Authorization = `Bearer ${token}`;

При инициализации проверяйте наличие токена:

const token = cookie.get('token');

if (token) {
  dispatch(setToken(token));
  axios.defaults.headers.common.Authorization = `Bearer ${token}`;
  // other actions
}

При логауте удаляйте токен:

dispatch(deleteToken());
cookie.erase('token');
delete axios.defaults.headers.common.Authorization;

store.dispatch(init());  // тут

const root = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

ReactDom.render(root, document.getElementById('root'));

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

1. Прямые обращения к DOM используются в очень редких исключениях. Например:

document.body.classList.add('someClass');

2. Метод submitText, следует переименовать в handleChange. Вы не делаете никаких submit по изменению input.
3. При передаче в input метод теряет контекст надо либо делать bind:

constructor(props) {
  super(props);
  this.state = {text: 'hello world'};
  this.handleChange = this.handleChange.bind(this);
}

либо использовать свойство класса:

class App extends React.Component {
  // ...
  hanldeCHange = e => {
    this.setState({
      text: e.target.value,
  });
  // ...
}

4. Исправленный код:
<input onChange={this.handleChange} />

class App extends React.Component {
  // ...
  hanldeCHange = e => {
    this.setState({
      text: e.target.value,
  });
  // ...
}

Просто я думаю если выполнить npm старт и скопировать build.js который вернется в index.html и запустить это в том же nginx с переадресацией маршрутов в index.html - то не получится то, что я планирую?

Вам надо настроить nginx чтобы он отдавал статику(шрифты, картинки, стили и прочее) и по всем не статическим маршрутам отдавал html с приложением.