CSS-фреймворк (вроде Bootstrap ) можно подключать в index.html CSS для компонентов удобно хранить в отдельных файлах: 1 компонент = 1 css файл webpack поддерживает импорт CSS файлов из JavaScript модулей.

<link rel="stylesheet" href="[https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">](https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css) 
 
<link rel="stylesheet" href="[https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">](https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css)

Как добавить CSS-классы в компоненты? §

Передайте в проп className строку:

render() {
  return <span className="menu navigation-menu">Меню</span>
}

Обычно CSS-классы зависят от пропсов или состояния:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Меню</span>
}

Совет Если вы часто пишете похожий код, то пакет classnames поможет упростить его.

Можно ли использовать встроенные стили? §

Конечно, прочитайте документацию об элементах DOM.

Встроенные стили — это плохо? §

CSS-классы, как правило, лучше для производительности, чем встроенные стили.

Что такое CSS-in-JS? §

«#CSS-in-JS » — это паттерн, в котором CSS-код создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах.

Обратите внимание, что данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками. React ничего не знает про то, как определяются стили. Если вы сомневаетесь, использовать указанный выше способ, то хорошим началом станет определение стилей в отдельном файле с расширением *.css, как вы ранее привыкли это делать, а затем указать нужные классы с помощью className.

Можно создавать анимации в React? §

React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки React Transition Group, React Motion, React Spring или Framer Motion.