#react react-bootstrap

риступаю к созданию проекта на Реакт. Набираем следующую команду: npx create-react-app название проекта

переходим в папку cd first-site-bs и запускаем проект npm start. Получается вот такая картинка:

Далее запускаем react-bootstrap следующей командой и ждем установки

npm  install react-bootstrap bootstrap.

Проверим файл package.json и увидим зависимости.

Перейдем в файл App.js:

и импортируем туда стили css которые будут работать с нашим проектом

Убираем предыдущую строку и вставляем вот так стили:

Далее импортируем какой-либо компонент, например, Button

Прописываем строку создания компонента и импортируем Button из react-bootstrap

Протестили и теперь все готово, чтобы начать. Создаем в папке src папку с названием Components

В папке Components создадим файл NaviBar.js сразу импортируем React

import React from 'react';

и создадим функцию NaviBar она будет являться нашим компонентом NavBara- адаптивного меню.)

Так как будет внутри функции много компонентов обернем их в такую фрагментацию

Далее перейдем к разработке NavBara, воспользуемся уже зарезервированными компонентами

свойство collapseOnSelect expand переключает на значение false при срабатывании OnSelect у компонета NavBar; bg variant- это стилизация navbara; lg-это точка останова при сворачивании navbara

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">

введем: <Navbar.Brand> </Navbar.Brand>

это будет логотип нашего сайта)сюда можно загрузить как изображения так и текст.

Импортируем NavBar

Создаем кнопку Navbar.Toggle со свойством будет сворачивать меню

Создаем блок Navbar.Collapse это то что будет разворачиваться-все наше меню, задаем идентификатор id т.е. данная кнопка будет раскрывать меню

Далее внутри Navbar.Collapse есть компонент Nav зададим ему className со значением margin right

Далее компонент NavLink т.е. ссылки, внутри создаем Link -это нужно для роутинга и пишем Home-переход на страницу Home

и здесь задаем параметр to -это к какому элементу будем переходить

Создадим еще один блок Nav и пропишем в нем кнопки

Добавим данный блок в нашу страницу-соответственно это будет компонент и его также нужно будет импортировать

Получается следующее адаптивное меню: