Использование Context API в React для создания адаптивного дизайна приложения

Спасибо за комментарий. Сожалею, что статья показалась Вам неинтересной.

Не возьмусь утверждать, какой метод лучше или хуже. Но вот Вам пример из личного опыта, где я и команда решили использовать адаптивный метод. Архитектор приложения в своем решении указал, что юзер должен получать бандл только с тем кодом, который необходим ему для сессии — js, css и html, т.е. не давать клиенту код для десктопа, если он зашел с телефона.

Использование Context API в React для создания глобальной темы приложения

1) Смена темы на данный момент является базовой функциональностью не только вебсайтов (твиттер, ютуб), но и различных приложений, например, вы наверняка используйте темную тему в своем VS Code. Про % ничего сказать не могу, но уверен, что смена темы — популярная фича.

2) Наверное, в первую очередь надо уменьшить число тем, так как наличие 100500 тем, если речь идет о вебсайте, по моему мнению не обоснованно. На работе, CSS UI-Kit выполнен в Emotion, тем самым используя компонент, мы берем только его стили, никаких общих стилей не импортируются.

Вот быстрый пример компонента с несколькими темами, выполненный в эмоушн:

const colors = theme => ({
  blue: css`
    border-color: ${blue};
  `,
  'light-blue': css`
    border-color: ${lightBlue};
  `,
  green: css`
    border-color: ${green};
  `,
  orange: css`
    border-color: ${orange};
  `,
  red: css`
    border-color: ${red};
  `,
  yellow: css`
    border-color: ${theme === 'dark' ? darkYellow : lightYellow};
  `,
  white: css`
    border-color: ${white};
  `,
});

export default ({ color, theme }) => css`
  ${textColor[theme]};
  ${colors(theme)[color]};
  display: block;
  padding: 10px;
  text-align: center;
`;

Использование Context API в React для создания глобальной темы приложения

Спасибо за комментарий. Возможно, данное применение контекста попробует юзер с низкой версией реакта. Данный пост — только базовая имплантация, но которая может быть применена в большинстве проектов (React.JS).