Пример настройки интерфейса компонентов в ReactJS, с использованием иконок и стилей Bootsrap

Опубликовано: 02 Апрель 2026
на канале: learnprofi.online
55
3

В этом видео мы покажем, как стилизовать компоненты в React с использованием Bootstrap. Мы будем работать с компонентом React и добавим различные стили для вывода данных о контактах. Вот что вы узнаете в этом видео:
1.Стилизация основного блока:
Узнаем, как добавить стилизацию для основного блока div с использованием классов из Bootstrap.
2.Добавление аватара:
Научимся выводить стилизованный аватар для контакта, используя внешний API для генерации картинки по инициалам имени.
3. Вывод контактных данных:
Настроим вывод имени, адреса электронной почты и номера телефона контакта с использованием тега span и div.
4. Добавление иконок:
Перейдём на сайт Bootstrap, чтобы найти и использовать иконки для наших компонентов, таких как звёздочка для избранного контакта.
5. Создание кнопок:
Добавим кнопки для удаления и редактирования данных о каждом контакте, используя иконки карандаша и корзины.
Не забудьте подписаться на наш канал и поставить лайк, если вам понравилось это видео! Оставляйте комментарии и делитесь своими мыслями.

Расширенная поддержка при подписке по ссылке к первой части вводного курса React + Redux https://www.udemy.com/course/reactjs-...

Расширенная поддержка при подписке по ссылке ко второй части вводного курса React + Redux https://www.udemy.com/course/redux-re...

Расширенная поддержка при подписке по ссылке к первой части продвинутого курса по React, Redux, TypeScript и API на ASP.NET по ссылкеhttps://www.udemy.com/course/api-aspn...

Расширенная поддержка при подписке по ссылке ко второй части продвинутого курса по React, Redux, TypeScript и API на ASP.NET по ссылке https://www.udemy.com/course/react-re...

Расширенная поддержка при подписке по ссылке к третьей части продвинутого курса по React, Redux, TypeScript и API на ASP.NET по ссылке https://www.udemy.com/course/react-re...