Этап 1. Создание react проекта по шагам
риступаю к созданию проекта на Реакт. Набираем следующую команду: 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 и пропишем в нем кнопки
Добавим данный блок в нашу страницу-соответственно это будет компонент и его также нужно будет импортировать
Получается следующее адаптивное меню:
