Добавление Bootstrap
Для добавления стилей подключим Bootstrap. Запустив сервер (npm start), выполним в папке проекта команду:
npm install bootstrap
После установки, в папке node_modules/bootstrap/dist/css найдём файл bootstrap.min.css. Подключим его в index.js:
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
Сохраним изменения. При необходимости перезапустите сервер (npm start).
Добавление собственных стилей
Создадим файл App.css и добавим CSS-код. Этот код импортирует шрифты, стилизует весь текст и блок с классом wrapper (основной блок с градиентом). Градиент можно сгенерировать на сайте cssgradient.io. В index.js импортируем App.css:
import './App.css';
В App.js создадим div с классом wrapper:
<div className="wrapper">
{/* содержимое */}
</div>
Обратите внимание на использование className вместо class.
Структура и стилизация HTML
Добавим стили для блока <main> и создадим HTML-структуру с помощью Emmet:
<div className="container">
<div className="row">
<div className="col-5">
<div className="info"></div>
</div>
<div className="col-7">
<div className="form"></div>
</div>
</div>
</div>
Не забудьте добавить класс main в соответствующий блок.
Добавление изображения и стилизация элементов
Добавим изображение spoiler-polygon.jpeg (поместите его в папку src/img). В CSS добавим стили для полей формы, кнопки и информационного блока. Используем sm вместо устаревшего xs в стилях Bootstrap 4 и выше. Добавим стили для классов info, form, info-vs и error.
Завершение
Приложение готово: подключается к API, получает и отображает данные о погоде. Настройки отображения данных настраиваются по желанию.
Надеемся, что этот видеокурс был полезен.