React. Как подключить css


Подключаем Bootstrap
Проходим по адресу https://www.bootstrapcdn.com/
Копируем ссылку Complete CSS: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
Заходим в папку publiс проекта, файл index.html и добавляем в блок head такой код
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Подключаем Font Awesome
Проходим по адресу: https://www.bootstrapcdn.com/fontawesome/
Копируем ссылку Font Awesome CSS https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Заходим в папку publiс проекта, файл index.html и добавляем в блок head такой код
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Теперь мы можем в JSX добавлять элементам классы, которые присутствуют в Bootstrap, и элемент будет стилизоваться так, как это предполагают стили Bootstrap. Важно не забывать, что вместо class в куфле используется свойство className.

Но что, если мы хотим изменить классы Bootstrap и добавить элементам собственные стили?
Можно в папке publiс проекта создать файл main.css, подключить его в  index.html и там писать стили, но если проект большой и стилей много, этот подход не самый оптимальный.
Предпочтительнее для каждого компонента добавить собственные стили, поместив их в папку components и дав точно такое же название, как и файлу с кодом компонента, только с расширением .css.

Эти файлы мы импортируем в js:
import './TodoList.css';

Такой импорт возможен только благодаря тому, что для сборки проекта используется вебпак, который умеет обрабатывать не только js, но и css.