D4mations.com

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

[ad_1]
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

d4mer

,
, , , , , , , , , , , , , ,

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

  2. повторял за вами но все время вот такое сообщение , не могу найти ошибку либо не понимаю , помогите пожалуйста.
    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.

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

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

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

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

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

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

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

    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`.

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

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

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

    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>

    );

    }

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

  24. Всем привет.
    Подскажи, почему появляется такая вот ошибка?
    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">

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply