Антон Спирин

Вариантов решения много. У ссылки есть onClick, у компонента componentDidMount. Еще есть готовые решения вроде react-router-hash-link

.header {
  white-space: pre-line;
}

Демо.

Или лучше так

Почему так делать не стоит:
1. Страдает изоляция. Любая сторонняя библиотека с ccs может поломать ваш код в самых неожиданных местах.
2. Возможные проблемы при изменении структуры.
3. Возможные проблемы при добавлении свойств состояния, от которых будет зависеть верстка. Придется по-старинке плодить селекторы состояния или прокидывать свойства через родителя.

Если больше нравится второй подход, то стоит посмотреть в сторону css модулей.

Рендерите два изображения и используйте opacity. Скрытому меняйте url на следующее в списке.

В чем проблема заюзать что-нибудь вроде svg-sprite-loader и забыть о проблеме? Сегодня вам надо добавить одну иконку, а завтра их может быть 10.

font-weight

Для подобного рода задач существует @keyframes

Для стилей - медиа-запросы.
Для рендера разных версий древа компонентов - user agent.

1. Вам надо либо остановить всплытие события:

onMarkClick = (e) => {
    e.stopPropagation();
    this.setState({
      important: true,
    });
  };

либо изменить структуру:

return (
  <span>
    <span
      className={classNames} 
      onClick={this.onLabelClick}
    >
      {label}
    </span>
    <button type="button"  onClick= {this.onMarkClick}>
      <i className="fa fa-exclamation"/>
    </button>        
  </span> 
);

2.

.todo-list-item.done {
  text-decoration : line-through;
}

Как вариант:

const mainSelector = '.header-block';

const styles = {
  '@global': {
    [mainSelector]: {
      '&&_open': {

        [`& ${mainSelector}__menu`]: {
        },

        [`& ${mainSelector}__btn`]: {
        },
      },
    },
  },
};

1. Невозможно изменить объект, изменяя примитив, который был использован при его создании, так как значение примитива просто копируется.
Демо
Копирование по значению

2. Нельзя изменять объект свойств компонента, только передавать обновленный объект при перерисовке.

В вашем случае проще всего изменять свойство через состояние родителя, передав в компонент колбек на изменение:

<SliderGallery imgLeft={this.state.imgLeft} changeImgLeft={this.changeImgLeft} />

Много букв

Junior Frontend Developer на минималках:
1. Хорошие знания JavaScript
2. Хорошие знания CSS/HTML
3. Знакомство с любым современным фреймворком

Junior Frontend Developer здорового человека(конкурентоспособный):
1. Хорошие знания JavaScript
2. Хорошие знания CSS/HTML
3. Хорошие знания API любимого фреймворка
4. Умеет работать с git на базовом уровне
5. Умеет работать с npm пакетами
6. Знает как написать простой конфиг webpack
7. Умеет TypeScript/Flow на базовом уровне
8. На github лежит типовой TodoList/WeatherApp
9. Английский язык на уровне достаточном для чтения технической литературы
10. Умеет находить решения типовых задач на stackoverflow и проблем в issues на github

Frontend roadmap

const Article = styled.div`
  &:before {
    background-image: url(${props => props.beforeImage});
  }
  &:after {
    background-image: url(${props => props.afterImage});
  }
`;

<Article beforeImage={beforeImage} afterImage={afterImage}>
  {/* ... */}
</Article>

Потому что css свойства бывают наследуемые и нет.
Информация о том наследуемое свойство или нет есть в справочниках.
Например: font-family, margin. Обратите внимание на табличку в разделе Краткая информация.