Андрей Антропов

Формально получается что у вас один уровень вложенности функций лишний, есть есть ожидание что при вызове hire(5) должно что-то упасть в консоль, то
(id) => {console.log('and here ' + id)
либо

this.handleColor(); 
hire(5)(); 
console.log('function');

Нужно использовать

Нет такого события вот и не срабатывает. А управлять состоянием можно и через хэндлер на клик https://facebook.github.io/jest/docs/tutorial-reac...

Имя компонента должно начинаться с заглавной буквы

Для того чтобы был смысл в получаемых компонентах, можно пойти например от дизайна, то есть взять и просто разделить дизайн страницы на логические блоки, это будут самые крупные контейнеры, затем в них начать выделять логически отделенные или повторяющиеся элементы.
Данный процесс можно повторять очень долго, но важно остановится в момент когда это уже не несет логической основы.
Также рекомендую посмотреть на подход атомарного дизайна,
Это статью с точки зрения дизайна sketchapp.me/verstka-sajta-s-pomoshhyu-sketch-i-at...
Это со стороны организации bradfrost.com/blog/post/atomic-web-design
Не привязано к реакту, но хорошо ложится на него.

Например для этого можно использовать https://www.npmjs.com/package/react-addons-linked-...
Просто передать как значение пустую строку, и react это обработает

Например

this.setState({
    dob: {
         ...this.state.dob,
         year: '1980'
    }
})

Хотя и это можно оптимизировать например используя ramdajs.com/0.18.0/docs/#lens

Например вот каркас для такого приложения, для ссылок используется historyApi

https://github.com/erikras/react-redux-universal-h...

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

Например это можно сделать с помощью www.reactnative.com/react-native-router
Как именно все организовать можно посмотреть в примерах использования.

Проверьте почему в запросе из хрома

authorization:Bearer c1e86a69-70ab-4bb2-88d8-5265b5e52f82

а в Лисице

Authorization: Bearer c1e86a69-70ab-4bb2-88d8-5265b5e52f82

Возможно бэк просто не может поднять авторизацию и поэтому все падает

Существует вот такой простой компонент для прелоада изображений https://github.com/hzdg/react-imageloader

Если с сервера получается готовый html, то достаточно просто

class MetricContainer extends Component {
  render() {
    return <div dangerouslySetInnerHTML={{__html: someHtmlStringFromServer}}/>
  }
}

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

var libraries = require('./libraries.json');
А также json-loader для webpack