React JS сайт с нуля – Адаптивное меню с bootstrap


https://i.ytimg.com/vi/EeCmCB3tsas/hqdefault.jpg



Мы продолжаем уроки практики React js и созданию сайта с нуля. В этом видео мы сделаем первый шаг по созданию сайта и верстки сайта. Мы сделаем адаптивное меню на React js с использованием фреймворка Bootstrap. React js позволяет строить сайт из компонентов и мы сделаем адаптивное меню отдельным компонентом, который мы подключим к каждой странице нашего сайта.

Хостинг HandyHost: https://handyhost.ru/hosting/?from=31805&promocode=Cn5FHnPj

Original source

49 thoughts on “React JS сайт с нуля – Адаптивное меню с bootstrap

  • February 28, 2021 at 23:58
    Permalink

    повторял за вами но все время вот такое сообщение , не могу найти ошибку либо не понимаю , помогите пожалуйста.
    Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

  • February 28, 2021 at 23:58
    Permalink

    Добрый день. Сделал меню в реакт проекте по вашему видео. Но есть только одна проблемка – ссылки пишутся через "href" меню работает корректно и сворачивается при выборе страницы, но полностью перезагружается страница. А если спользовать "Link to="", то переход происходит без перезагрузки, но меню автоматически не сворачивается. Подскажите пожалуйста как решить. Заранее благодарен.

  • February 28, 2021 at 23:58
    Permalink

    Не могу понять одной вещи: как Javascript-функциям удаётся принимать аргументы формата <…> (будто это html-элементы, и даже не в кавычках, чтобы обернуть в строку)? Это же ни не строка, ни не объект (если не ошибаюсь). Какой это тип данных? Изучая чистый Javascript уже несколько месяцев, не сталкивался с таким никогда.
    P.S. Очень нравится данный плейлист – реально лучшее, с чего можно начать знакомство с React!

  • February 28, 2021 at 23:58
    Permalink

    взаимно огромной огромной удачи! и спасибо) хоть в реакте разбираюсь, а с бутстрапом внутри него не работал никогда). Интересненько)

  • February 28, 2021 at 23:58
    Permalink

    ./src/Header.js

    Module not found: Can't resolve 'react bootstrap' in 'C:UsersHPreactmy-appsrc'

    как добраться , в чем проблема .

  • February 28, 2021 at 23:58
    Permalink

    Miles Play, WarfaCe-Nik правы. Не понятно откуда все эти свойства взялись. А можно к этому видосику дописать кусочек, где будет показано как ты ищешь те или иные свойства в бутстрап документации ?!

  • February 28, 2021 at 23:58
    Permalink

    Элементы navbar, container и прочие являются придуманными для данного примера или они взяти из bootstrap? Если взяты, как узнать какие элементы и где надо вписывать? Пока что для меня это выглядит как "я вызубрил 500 компонентов и показал вам 8 штук, с остальными разбирайтесь сами". То есть, что именно в данном уроке придумано от себя для примера, а что взято из документации как официальное правило написания приложения?

  • February 28, 2021 at 23:58
    Permalink

    это круто, зашло как по маслу, иногда не успевал за мыслью и больше бы объяснений, а то я не понял откуда эта куча зеленых классов, мы сами их придумали или они уже есть готовые в реакте?

  • February 28, 2021 at 23:58
    Permalink

    Выдает ошибку при компиляции:

    Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check the render method of `Header`.

    Весь код проверял, такой же как на видео, не могу понять в чем проблема

  • February 28, 2021 at 23:58
    Permalink

    А что за расширение для автозавершения кода нужно установить, если я Adobe Brackets использую? Все получилось у меня, только все вручную пришлось писать

  • February 28, 2021 at 23:58
    Permalink

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

    Failed to compile

    ./src/App.js

    Attempted import error: './Components/Header.js' does not contain a default export (imported as 'Header').

    у меня прописано:
    import Header from "./Components/Header";

    function App() {

    return (

    <div>

    <Header />

    </div>

    );

    }

  • February 28, 2021 at 23:58
    Permalink

    Надо удалять видел если оно не актуальное, зачем тратить время нормальных людей

  • February 28, 2021 at 23:58
    Permalink

    Очень крутое видео, помогло, но у меня один вопрос. Как сделать так, что бы кнопки нав линк показывались сразу на шапке, а не только после нажатия на меню бургер. Другими словами у меня с любого разрешения в шапке показывается меню-бургер. Что можно сделать ?
    Upd: Проблема в том что нужно было писать "md" вместо "nd" в навбаре.

  • February 28, 2021 at 23:58
    Permalink

    Всем привет.
    Подскажи, почему появляется такая вот ошибка?
    import { Navbar, Nav, FormControl, Container, Form, Button } from 'react-bootstrap';
    3 | import logo from './logo192.png';
    4 |
    > 5 | export default class Header extends Components {
    6 | render() {
    7 | return (

    8 | <Navbar collapseOnSelect expand="md" bg="dark" variant="dark">

  • February 28, 2021 at 23:58
    Permalink

    Странно, но ты не закрыл тег "/" в этой строке, а ошибки нет:

    <NavbarCollapse id="responsive-navbar-nav" />
    А у меня есть ошибка.

  • February 28, 2021 at 23:58
    Permalink

    Не работает,выводит только белый экран, 100 раз проверил, написал все как показано на видео,но ничего не работает(

  • February 28, 2021 at 23:58
    Permalink

    если ты делал этот видеокурс для новичков, то скажу тебе сразу, никто и ничего не понял, стоило бы уделить немного внимания деталям, и лучше писать проще и понятнее

  • February 28, 2021 at 23:58
    Permalink

    Есть где адекватная дока по Bootstrap? Не понятно какой класс прописать чтобы расстояние вертикальное от Search до кнопки Search при малом размере выставлялось

  • February 28, 2021 at 23:58
    Permalink

    чтобы взлететь на самолете нажимаем эту кнопку, эту и еще эту…. и все я взлетел…. красавчик, что ты умеешь летать, было круто смотреть, как ты взлетел) но без объяснения толку мало и никто так летать не научится) будут смотреть просто под попкорн, те кто не вбивают код и не пытаются разобраться…
    зато показал варианты стандартных цветов бутстрапа, это же так не понятно))) нужно было еще штук 5 перечислить)))))

  • February 28, 2021 at 23:58
    Permalink

    Вообще ничего не понятно, просто рассказ делаем это делаем то, а зачем и почему именно так вообще никаких объяснений, смысл курса в чём?

  • February 28, 2021 at 23:58
    Permalink

    Однозначно лайк, подписка и репост. Перешел по твоей ссылке бро! Надеюсь хоть чем-то поддержал твой проект! Пили дальше) Удачи

  • February 28, 2021 at 23:58
    Permalink

    Вылезла вот такая ошибка. Что с этим можно сделать?
    ./src/Components/Header.js
    Line 8:7: 'React' must be in scope when using JSX react/react-in-jsx-scope

  • February 28, 2021 at 23:58
    Permalink

    Шел второй урок, я так и не понял к чему вся эта херня… Парень, ну не дано тебе таким заниматься, ты просто показываешь что знаешь React и все, ты ничего не обясняешь, добавим это, добавим то, еще то но для чего ты не говоришь. Менял бы название видео на "ЗА 11 МИНУТ Я ДОКАЖУ ВАМ ЧТО ЗНАЮ REACT JS НО ВЫ НИЧЕГО НЕ ПОЙМЕТЕ"

  • February 28, 2021 at 23:58
    Permalink

    спасибо за уроки, скинь название плагинов которые ты используешь на момент записи ролика, у меня VS работает немного не так… у тебя на канале 2 или 3 ролика по плагинам, какие под react использовать лучше ?

  • February 28, 2021 at 23:58
    Permalink

    а почему классовые компоненты используете? вроде как идет тенденция, и сами разработчики реакта говорили что лучше использовать функциональные компоненты.

  • February 28, 2021 at 23:58
    Permalink

    Ну и зачем учить весь этот хлам для того, чтобы просто вывести навигацию? хтмл/цсс/джс это куда быстрее сделает, понапридумывали херни всякой, а теперь на работу устроиться нельзя без знаний этого бреда..

  • February 28, 2021 at 23:58
    Permalink

    Привет, скажи пожалуйста если делать дропдавн меню. Однако так чтобы этот дроп занимал всю ширину экрана, а не только ширину кнопки, его нужно делать отдельным компонентом мли можно как-то это настроить? Спасибо

  • February 28, 2021 at 23:58
    Permalink

    А как сделать чтобы раскрытый мобильный навбар после нажатия по ссылке закрывался?В случает если SPA перехода ведь не будет и он остаётся открытый.

Leave a Reply