React JS + Bootstrap: Практическое руководство по стилизации

Добавление 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, получает и отображает данные о погоде. Настройки отображения данных настраиваются по желанию.

Надеемся, что этот видеокурс был полезен.

Что будем искать? Например,программа