lnked

setState выполняет лишь поверхностное слияние, если вам требуется обновлять вложенные объекты - следует копировать все их свойства:

this.setState({
  productToCart: {
    ...this.state.productToCart,
    color,
  },
});

itemScope
itemType
Ну, ты понял

В стейте должно быть два свойства - значение инпута и его копия. В обработчике onChange инпута обновляете значение инпута; в обработчиках onClick кнопки и onMouseLeave формы копируете во второе свойство значение инпута, а само его сбрасываете.

Или можете попробовать обойтись одним свойством в стейте, но тогда потребуется добавить ref на инпут. Обрабатывать change в этом случае не надо.

Это называется named export. Изюминка в том, что у React есть только default export.
Вопрос - как оно тогда работает, если это named export, а у React только default?

Ответ в том, что React поставляется как CommonJS версия, а не ESModule.
Можно увидеть в исходниках, что везде в конце пишется "module.exports = React"
https://unpkg.com/react@16.8.6/index.js
https://unpkg.com/react@16.8.6/cjs/react.development.js
https://unpkg.com/react@16.8.6/cjs/react.productio...

Дальше происходит магия (вероятно, вебпака), и получается, что default export дополнительно продублирован named export'ами.

Смотрите пример: https://codesandbox.io/embed/charming-wilbur-b6fwo

Я везде пишу React и всем советую.
И по поводу "меньше символов":

// 70 chars
import React from 'react';
export class Foo extends React.Component {};

// 79 chars
import React, { Component } from 'react';
export class Foo extends Component {};

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

1

С версии React 15.5 PropTypes вынесены в отдельный пакет.

import React from 'react';
import PropTypes from 'prop-types';

// ...

Slider.propTypes = {
  slidePerView: PropTypes.string,
  slidesPerGroup: PropTypes.string,
  loop: PropTypes.string,
};

// ...

.disabled {
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
}

C помощью класса можно сделать неактивным любой элемент, например, стилизованные под кнопки ссылки.

prop-types должен устанавливаться в dependencies потому что он подключается в исполняемых файлах. Это не важно что он отключен в продакшене.

Собственно, документация тоже говорит устанавливать prop-types в dependencies https://github.com/facebook/prop-types#installation

УПД

Немного проясню разницу между devDependencies и dependencies. В devDependencies подключается инфраструктура проекта, например, библиотеки для юнит тестирования, билдеры, всевозможные вебпаки.

Если какая-то библиотека импортится в исполняемых файлах проекта (читай, тех файлах, которые в каком-то переработанном виде попадают к пользователю), то она подключается только в dependencies.

Сохраняй в локальное хранилище
Redux Persist тебе поможет
Есть еще redux-offline , но она менее популярная штука

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;
}

Все, что находится в теле функции Example будет выполняться каждый render. Отличие второго способа лишь в том, что он содержит дополнительные операции. Причем, создание хандлера через билдер, в данном случае, абсолютно бессмысленная операция. Подобные приемы уместны если этот билдер где-то переиспользуется и определен за пределами компонента.
Если хандлер передается в другой React компонент, то имеет смысл использовать хук useCallback. В вашем случае в этом нет смысла, так как хандлер передается в нативный элемент.

const articleElements = articles.map(article => (
  <li key={article.id}><Article article={article} /></li>
));

Забыли return. Или фигурные скобки лишние. В articles.map.

export default props => (
  <ul>
    {props.articles.map(n => (
      <li key={n.id}><Article article={n} /></li>
    ))}
  </ul>
);

Объясняю популярно, эта штука делает серверный рендеринг SSR. То есть позволяет вам работать с поисковыми роботами, например (SEO). В частности, имеет свой роутер, может генерировать статичные страницы, может интегрироваться с Express.js или другим сервером на ноде.
Именно бекендом для реакта может быть едва ли не что угодно, но бекенд не даст вам просто так серверный рендеринг.

По-хорошему компонент 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>

<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>
);