Уроки React JS + Bootstrap на практике - Адаптивное меню, роутинг

Мы начинаем новый курс уроков React js на практике, в котором мы легко сделаем сайт react js для начинающих. В данном курсе мы применим react js в связке с Bootstrap и сверстаем с помощью уже готовых компонентов проект. Данный сайт будет иметь несколько компонентов, которые необходимо знать начинающим. Создание сайта на react js достаточно простое занятие, особенно если вы знаете основы react JS.

Nicepage - это сайт-билдер, с которым справится каждый.Размещайте элементы дизайна свободно, как в Figma и Photoshop, при этом получится работающий сайт и чистый HTML код.Nicepage автоматически адаптирует сайт для мобильных устройств.

[eldenhard]

У кого не сработает отступ между кнопками, пропишите не mr-2, а me-2
Такое правило работает и далее, так были изменения в синтаксисе bootstrap-react

[sasha]

У кого не отображается текст на страницах Home, About и т.д. то надо поменять "component" на "element", чтобы получилось --> <Route path="/" element={<Home />} />. Второй момент: "Switches" стали "Routes". Соответственно меняем везде и в import'е и дальше в тегах. Актуально на июнь 2022.

[urec]

У кого не выводятся компоненты Home, Users, About - поменяйте в роутинге component={Home} на element={<Home/>} и так далее

[oleksandrpoliukh]

К сожалению, видео достаточно устарело, т.к. уже обновился react-router-dom и bootstrap

[ЭлиасЦцц]

У кого кнопки регистрации не сдвигаются вправо и между собой. В bootstrap 5 было изменение "Renamed .ml-* and .mr-* to .ms-* and .me-*". У меня все равно отступ между кнопками не работал почему-то, так что я делал отступ слева на Log out.

[pavelnavrotskyi]

У кого ошибка из-за вложенности ссылок - вот решение <Nav.Link as={Link} to="/users">Users</Nav.Link>

[hellwolf]

у меня вот что выходит как с роутингом занимаюсь export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)

[tamiriskimbayeva]

Все круто, все работает. Только 1 вопрос, почему когда нажимаю на users, чтобы перейти на эту страницу я должна вручную перезагружаеть вкладку , иначе page users не откроется

[vls]

Неплохо, ща закончу с material UI и можно на бутстрапе что нибудь сделать)
Кстати, можешь сделать про реакт хуки видео, что как и для чего, думаю будет интересно, решение за тобой)

[idrisveliev]

привет. почему у меня не импортируется Switch?

[oleksandrmalishevskyi]

Огромное спасибо. Буду смотреть дальше!

[АленаФролова-кр]

Здравствуйте, мне выдает ошибку при попытке импорта Button из react-bootstrap:
SyntaxError: Identifier 'Button' has already been declared.
Не могу понять, в чем дело, подскажите пожалуйста

[rartk]

У меня било такую ошибку:
./src/App.js
Attempted import error: 'NaviBar' is not exported from './Components/Navibar'.

в строке "export default function NaviBar() { "
Убрал default и все заработало, вдруг у кого то же такая беда будет может поможет

[лизаскрипник-нъ]

Почему у меня невозможно писать "npm install react-bootstrap bootstrap" в PowerShell?
Просто у вас сразу ниже можно вставить, а у меня последняя строка "webpack compiled successfully" и писать дальше невозможно

[anuar]

Спасибо большое! Один из лучших каналов!

[musiquerelaxante]

Привет. Почему то настройки кнопок не подключаются

[insearchofyourself]

я теперь на всю жизнь видимо запомню что нужно в функции возвращать))

[Dyingmokhito]

./src/App.js
Line 24: 'NaviBar' is not defined react/jsx-no-undef

Search for the keywords to learn more about each error.
у меня выдал вот эту ошибку, хотя все строго как на ролике, не могу найти решение

[JuliaT-el]

Спасибо, информативно. Первый раз услышала о react-bootstrap )

[thegate]

- за устаревшее видео которое выдаешь за актуальное