React JS сайт с нуля - Адаптивное меню с bootstrap
HTML-код
- Опубликовано: 1 фев 2020
- Мы продолжаем уроки практики React js и созданию сайта с нуля. В этом видео мы сделаем первый шаг по созданию сайта и верстки сайта. Мы сделаем адаптивное меню на React js с использованием фреймворка Bootstrap. React js позволяет строить сайт из компонентов и мы сделаем адаптивное меню отдельным компонентом, который мы подключим к каждой странице нашего сайта.
Хостинг HandyHost: handyhost.ru/hosting/?from=31...
Уже в комментах писали, но я подытожу:
Поскольку в уроке бутстрап 4, а сейчас актуальная версия 5, то могут быть проблемы.
1.
Марджины справа и слева:
- в четвертой было `mr-auto` и `ml-auto` что означало `margin-left:auto` и `margin-right:auto`,
- в пятой сделали `ms-auto` и `me-auto`, где `ms` и me означает `margin start` и `margin end`
- То же самое касается и `className="me-sm-2"` в FormControl меняем `r` на `e`
2.
`inline` в пятой больше не поддерживается, но в нашем случае вместо него можно использовать ``, результат будет тот же.
в топ эту подсказку
пальцы вверх
красава! спасибо!)
Спасибо! Никак не получалось разобраться с поиском и кнопкой.
Если у кого поиск и кнопка не на одном уровне , чтобы решить проблему, я предлагаю заменить на , так как это установит отображение этой секции на flex.
дай Бог тебе здоровья
Если же у вас в Навбар всё в центре лепит поменяйте в
mr на me, поле ввода с кнопкой уйдут в право остальное в лево
спасибо!
Чтобы кнопка стояла подальше от поля ввода нужно в css накинуть класс и в нём margin-right: 10px;
@@kolobmobile дай бог тебе здоровья )))
чувак ты меня спас. Я работаю над новым проектом. Это первый проект на react и я не мог подобрать что мне импортировать. Именно это было нужно. Огромное спасибо и привет из Армении
Хотел спросить, можете ли вы использовать только функций вместо классов. Это практика больше используется в производстве как мне известно, думаю будет удобно для многих
Спасибо огромное! Не юзал раньше бутстрап, думаю для небольших проектов подойдет
а почему классовые компоненты используете? вроде как идет тенденция, и сами разработчики реакта говорили что лучше использовать функциональные компоненты.
спасибо за уроки, скинь название плагинов которые ты используешь на момент записи ролика, у меня VS работает немного не так... у тебя на канале 2 или 3 ролика по плагинам, какие под react использовать лучше ?
Братан, ты впечатлил! Продолжай! Даже детям понравилось!
Каким детям? :)
@@SuprunAlexey У меня два сына увлекаются веб программированием.
@@user-eu6dh3vp9j К-к-комбо!)
При создании меню не срабатывает. форма и кнопка принимают вертикальный вид
измени Nav className вот так...мне помогло
@@istra-plit3812 Мне не помогло
@@vancheshigh859 +
Search
@@reshenie1 долгих лет жизни)
взаимно огромной огромной удачи! и спасибо) хоть в реакте разбираюсь, а с бутстрапом внутри него не работал никогда). Интересненько)
не могу понять.. у меня почему то, линки Home, About, Contact и тд вертикально встали, а не горизонтально
А что за расширение для автозавершения кода нужно установить, если я Adobe Brackets использую? Все получилось у меня, только все вручную пришлось писать
Привет, скажи пожалуйста если делать дропдавн меню. Однако так чтобы этот дроп занимал всю ширину экрана, а не только ширину кнопки, его нужно делать отдельным компонентом мли можно как-то это настроить? Спасибо
Есть где адекватная дока по Bootstrap? Не понятно какой класс прописать чтобы расстояние вертикальное от Search до кнопки Search при малом размере выставлялось
А как сделать чтобы раскрытый мобильный навбар после нажатия по ссылке закрывался?В случает если SPA перехода ведь не будет и он остаётся открытый.
Шел второй урок, я так и не понял к чему вся эта херня... Парень, ну не дано тебе таким заниматься, ты просто показываешь что знаешь React и все, ты ничего не обясняешь, добавим это, добавим то, еще то но для чего ты не говоришь. Менял бы название видео на "ЗА 11 МИНУТ Я ДОКАЖУ ВАМ ЧТО ЗНАЮ REACT JS НО ВЫ НИЧЕГО НЕ ПОЙМЕТЕ"
Что не понятно? Давайте тут отвечу
@@SuprunAlexey частично согласен с Gevorg, хотелось бы чуть подробнее, например почему responcive-navbar-nav в id во втором случае или почему
@@SuprunAlexey скажу честно, посмотрел из интереса, все понял, но смысл в том, что тот кто уже все знает ничего нового не почерпнет, а тот кто пришел чему-то научиться, ничего не поймет. Ты реально ничему не научил, а только показал факт, что ты умеешь реакт.
Очень крутое видео, помогло, но у меня один вопрос. Как сделать так, что бы кнопки нав линк показывались сразу на шапке, а не только после нажатия на меню бургер. Другими словами у меня с любого разрешения в шапке показывается меню-бургер. Что можно сделать ?
Upd: Проблема в том что нужно было писать "md" вместо "nd" в навбаре.
Здравствуйте, а почему вы не показали наличие файла App.css ?
Большое спасибо за видео. Добавьте пожалуйста их в плейлист
Добавил
Круто, дорогой автор!
Спасибо за труды.
у меня вот ошибка, не могу понять в чем дело..
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 (
);
}
Было бы круто, если дублировал код в репозитории на Git. Очень удобно + можно быстро сравнивать код
Так его никто писать не будет, все будут копировать и смысл видео тогда?)
@@SuprunAlexey мне кажется тут уже от человека зависит) Кто не хочет учить - будет копировать. А кому интеренесно - тот напишет сам, и если не будет получаться долго, то посмотрит git и найдёт ошибку. Я с этой стороны смотрел. Собственно у меня такая ситуация))
Однозначно лайк, подписка и репост. Перешел по твоей ссылке бро! Надеюсь хоть чем-то поддержал твой проект! Пили дальше) Удачи
Спасибо, пилю!
Miles Play, WarfaCe-Nik правы. Не понятно откуда все эти свойства взялись. А можно к этому видосику дописать кусочек, где будет показано как ты ищешь те или иные свойства в бутстрап документации ?!
Вопрос, для почему добавил открытые и закрытые теги?
Вопрос: У меня не работает свойство inline для Form. Посмотрел, по коду ошибок нет. Попробовал даже через css но не выходит. И кстати className="mr-sm-2" тоже не работает. В чем может быть ошибка?
Привет, если проблема ещё актуальна, то я посидел и разобрался немного. Там проблема в Bootstrap. Вот код в котором всё ок. Успехов.
render() {
return (
React site
Home
About us
Contacts
Blog
Search
);
}
}
@@Dmitry_Sotnikov спасибо большое
@@Dmitry_Sotnikov Спасибі, читав коменти чисто заради рішення цього питання. Хоть хтось нормально пояснив)
@@Dmitry_Sotnikov спасибо, жаль что без объяснения... скопировал, работает - и ладно
@@valentinspivak5999 Привет, библиотека Bootstrap постоянно обновляется. Когда выходят некоторые апдейты то имена классов соответственно претерпевают изменения. Здесь лучше читать официальную документацию чтобы понимать что изменилось и что добавилось. А так для сравнения можешь посмотреть код из видео и мой код, и увидишь что изменилось.
у меня прилипла кнопка поиска под полем ввода текста, подскажите пожалуйста что делать
Элементы navbar, container и прочие являются придуманными для данного примера или они взяти из bootstrap? Если взяты, как узнать какие элементы и где надо вписывать? Пока что для меня это выглядит как "я вызубрил 500 компонентов и показал вам 8 штук, с остальными разбирайтесь сами". То есть, что именно в данном уроке придумано от себя для примера, а что взято из документации как официальное правило написания приложения?
Откройте документацию тогда и посмотрите
@@SuprunAlexey документацию чего??? bootstrap-а, react-а, или какую?
@@Briz231 react-bootstrap
@@SuprunAlexey документация все же написана не для новичков а уже готовых разработчиков, те, кто почитает документацию и поймет, ему не нужно это видео
кнопка снизу строки поиска, как сделать её справа от поиска?
Спасибо за курс, жду некст урок
Сейчас выйдет
Непонял насчет редактора, Visual Stusio не дает таких подсказок кода и автовставо как с Header не делает (( нужен адддон или я торможу просто?
скорее всего ты уже разобрался, но если нет- в ВС код магазине есть расширение- в поиске пишешь react, тебе нужно будет установаить второе расширение ES7+ ...... Snippets
./src/Header.js
Module not found: Can't resolve 'react bootstrap' in 'C:\Users\HP
eact\my-app\src'
как добраться , в чем проблема .
Скорее всего должно быть react-bootstrap
Спасибо !
Покажи еще как прикрутить graphQL к React
Спасибо. Поставил тысячный лайк! Кому надо код, ниже, в нём всё ровно.
супер спасибо
такие теги как: Container, Navbar.bar это произвольные имена?
Bootstrap
Подскажите почему у меня кнопка поиск под полем ввода текста а не сбоку как на видео?
bootstrap обновился до 5-й версии теперь все немного по другому делать нужно)
Я понимаю что видосу уже год, но может автор или кто-нибудь подскажет. строчка import logo from "./logo.png" выдает ошибку: модуль не найден, не разрешено
покопайся в файлах, там в ошибке полный адрес указывается обычно, туда и запихни. оттуда и импортируется
благодарю
Почему не отображается логотип? Все сделала как у него)
Вылезла вот такая ошибка. Что с этим можно сделать?
./src/Components/Header.js
Line 8:7: 'React' must be in scope when using JSX react/react-in-jsx-scope
А что там у тебя написано? Закинь код куда нить на кодпен я скажу в чем ошибка
Какой плагин добавляет автоматом импорт, мне все вручную прописывать нужно?
в ВС код магазине есть расширение- в поиске пишешь react, тебе нужно будет установаить второе расширение ES7+ ...... Snippets
а что за плагин делает из Navbar через таб сразу с импортом?
Если найдешь плагин, напиши плиз)
это круто, зашло как по маслу, иногда не успевал за мыслью и больше бы объяснений, а то я не понял откуда эта куча зеленых классов, мы сами их придумали или они уже есть готовые в реакте?
Vitaly skor они уже есть готовые в бутстрапе
Подскажите, почему когда прописываешь rcc и кликаешь enter, то оно не прописывает код как на видео?
в ВС код магазине есть расширение- в поиске пишешь react, тебе нужно будет установаить второе расширение ES7+ ...... Snippets. Расширение нативно дописывает то, что ты предполагал
1:06 rcc чтоб отображалось, какой нужно установить плагин в VSC ?
В этом видео все рассказывал Лучшие JavaScript плагины для VS Code ruclips.net/video/R1tRDrTYoGA/видео.html
ES7 React/Redux/GraphQL/React-Native snippets
@@user-ed2ui2dv7z это не она, а если и она то почему не работает как показано в видео? у меня не срабатывает, я ввожу Nav и оно не предлагает варианты как показано видео
Привет!
А как можно исправить такую ошибку
TypeError: class constructors must be invoked with 'new'
Нашел. Неправильный импорт Button был.
А есть видео про расширения под ВКС для разработке на react?
в ВС код магазине есть расширение- в поиске пишешь react, тебе нужно будет установаить второе расширение ES7+ ...... Snippets. Мне кажется больше и не нужно
Когда делаю наву fixed="top" текст снизу залазит под меню. Шо делать?
Убери fixed="top"...
Не работает,выводит только белый экран, 100 раз проверил, написал все как показано на видео,но ничего не работает(
Сейчас дока react-bootstrap обновилась, можете от туда вставить пример header
да так и есть. Если посмотреть в девтулзы то видно что надписи прячутся под навбаром.
@@user-zi4fk2vl2y Привет. Как это обойти/решить?
Ибо в видео куча ошибок
повторял за вами но все время вот такое сообщение , не могу найти ошибку либо не понимаю , помогите пожалуйста.
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.
Комп в ремонт, заберу напишу
Где-то в Header ошибка ?
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`.
▶ 22 stack frames were collapsed.
Module.
C:/2/javascript/react/new/src/index.js:7
Блин ничего не отображает! с первого урока как кнопку добавил надпись Hello World пропала, и с меню та же беда... как решить???
import React, {Component} from 'react';
import {Navbar, Nav, FormControl, Container, Form, Button } from 'react-bootstrap';
import logo from './logo192.png';
export default class Header extends Component {
render() {
return (
Home
About
Contact
Blog
Search
)
}
}
Почему у автора нормально отобразилось а у меня не сработало и элементы - поле ввода и кнопка приклеились к списку ссылок? да еще и разместились в столбик а не в линию. Я все прописал как в видео, почему не работает?
Привет, если проблема ещё актуальна, то я посидел и разобрался немного. Там проблема в Bootstrap. Вот код в котором всё ок. Успехов.
render() {
return (
React site
Home
About us
Contacts
Blog
Search
);
}
}
Всем привет.
Подскажи, почему появляется такая вот ошибка?
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.Collapse написал Navbar.Collagse, весь вечер убил на это. Попробуй поискать, может у тебя тоже где-то ошибка в коде. Если ты за два года не нашёл еще)...
во-первых нужно указать import React, { Component } from 'react';
а во-вторых, в extends Components, надо писать Component
Где посмотреть все эти классы ?
В документации разве что
зачем href если в реакте есть Navlink ?
href это атрибут, а navlink это тег. вроде. я тоже новичок. не судите строго
@@erlanerlan7739 href делает полностью перезагрузку страници Navlink с атрибутом to="" будет просто отображать другую компоненту без перезагрузки
className="form-control mr-sm-2"
а что такое rcc пояснить не нужно? И каким чудом так все добавилось само. Кто не понял, это расширение для vs code - reactjs code snippets
У вас цель наплодить "мамкиных кодеров" или все таки дать базу людям?
Не имею жизненной цели дать базу людям, кто хочет учится, кто не хочет - нет. Я даю этот материал бесплатно)
@@SuprunAlexey спасибо большое. Наверное я грубо выразился. Просто многие вещи пропускаете, хоть бы словечко об этом. Чтобы люди не думали что у них что-то не так, а дело в расширении.
@@rumpelstilzchen6366 у данного блога уже есть выпуск, а именно в прошлом плейлисте, о rrc, rfc, и прочее
выпускался именно для начинающих, а данный ролик что сейчас, уже для тех, кто чуточку разбирается.
Смотрю сейчас с кайфом, и поражаюсь насколько все понятно и доступно.
Помогите пожалуйста не могу понять в чем ошибка отображается не так как на видео. У меня поле ввода и кнопка находяться друг под другом и рядом с меню, а не так как надо в строку и в правом краю. Если form вытащить из navbar.collapse наружу то отображается как надо, но между полем ввода и кнопкой нет пробела вот код:
import React, {Component} from 'react';
import {Button, Container, Form, FormControl, Nav, Navbar} from "react-bootstrap";
import logo from './logo192.png'
export default class Header extends Component {
render() {
return (
React site
Home
About us
Contacts
Blog
Search
);
}
}
Привет, если проблема ещё актуальна, то я посидел и разобрался немного. Там проблема в Bootstrap. Вот код в котором всё ок. Успехов.
render() {
return (
React site
Home
About us
Contacts
Blog
Search
);
}
}
@@Dmitry_Sotnikov Спасибо большое!
поиск и кнопка не выравниваеться в одну линию Form inline - не работает
Search
Не могу понять одной вещи: как Javascript-функциям удаётся принимать аргументы формата (будто это html-элементы, и даже не в кавычках, чтобы обернуть в строку)? Это же ни не строка, ни не объект (если не ошибаюсь). Какой это тип данных? Изучая чистый Javascript уже несколько месяцев, не сталкивался с таким никогда.
P.S. Очень нравится данный плейлист - реально лучшее, с чего можно начать знакомство с React!
JSX
Выдает ошибку при компиляции:
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`.
Весь код проверял, такой же как на видео, не могу понять в чем проблема
замени из видео на . В терминале у тебя должна была вылезти ошибка типа "используйте PascalCase" или же импортируй дополнительно NavbarBrand и точно также используй и в рендере(слитно)
А как перетащить Form немного правее
в css
ERROR in ./src/components/Header.js что за?
Если ещё актуально, то в папке src и в файле App.js нужно прописать import Header from './Components/Header.js'
Почему не используете грид? Он же лучше бустрапа
Потому что у нас есть готовый компонент, который мы за 5 минут можем вставить.
@@SuprunAlexey если бы не одно но, эта библиотека весит 112 кб
@@user-sd5tt7ds4j Это же учебный проект по реакту, а не по верстке
У меня вообще не отображается, что делать. Помогите
import React, {Component} from 'react';
import {Navbar, Nav, FormControl, Container, Form, Button } from 'react-bootstrap';
import logo from './logo192.png';
export default class Header extends Component {
render() {
return (
Home
About
Contact
Blog
Search
)
}
}
у меня ошибка какая-то я не понимаю((
чтобы взлететь на самолете нажимаем эту кнопку, эту и еще эту.... и все я взлетел.... красавчик, что ты умеешь летать, было круто смотреть, как ты взлетел) но без объяснения толку мало и никто так летать не научится) будут смотреть просто под попкорн, те кто не вбивают код и не пытаются разобраться...
зато показал варианты стандартных цветов бутстрапа, это же так не понятно))) нужно было еще штук 5 перечислить)))))
Ура, я уже реактивщик
Круто
Зачем ты юзаешь классы вместо хуков?
Так сложилось
Посмотрите код на гитхабе, плиз,
github.com/AlexNazaroff/React/blob/main/Components/Header.js
Код Header.js or App.js где-то ошибка?
×
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`.
▶ 22 stack frames were collapsed.
Module.
C:/2/javascript/react/new/src/index.js:7
похоже на обычную общую ошибку для неправильно импортированных модулей
Получается за 7 мин ролика и лайв кодинга всего 1 раз открыл браузер, надо было все сверстать, а потом уже показывать(шутка).
Белый экран, ни один элемент не отображается. Переписал код, точь в точь. Перепроверил десять раз.
Разобрался. В файле app.js тег header был прописан с маленькой буквы. Из за этого, видимо были какие то проблемы с импортом...
Это не для начинающих!
Для них нужно объяснять все, например откуда берутся все эти свойства тегов и т. д.
Свойства этих тегов закреплены за Bootstrap. Вся информация на сайте
на даний момент все ця інфа не актуальна,нічого з цього коду не працює
еще было бы прикольно рассказывать какие плагины используешь (rcc)..ато реально, ощущение как будто "я вот как умею ", а вы е**сь как хотите ручками набирайте
пояснения бы не помешали. Не понятно для кого ролики. Неужели люди просто переписывают код и радуются?
Вообще ничего не понятно, просто рассказ делаем это делаем то, а зачем и почему именно так вообще никаких объяснений, смысл курса в чём?
Для того что б сделать определённый компонент, нужно использовать данные компоненты, теги, атрибуты, свойства. Там нечего рассказывать, нужно просто применить их и все)
Смысл в том чтобы добавить рекламу в видео
Тупо весь код спижженый с сайта документации бутстрапа для реакт
нашел ошибку , сорри
подскажи ты ошибся, у меня такая же хрень, не могу найти.
@@stepanugarov7551 я вспомнил я вместо Pane указал Pain.
Проверь синтаксис и правильное написание
@@arturshopengauer219 спасибо, нашел
слишком быстро.
А вы тогда на паузу ставьте
Плохое объяснение, спасибо!
Устарело
Надо удалять видел если оно не актуальное, зачем тратить время нормальных людей
А в смысле не актуально ?
Ненавижу ролики, где человек сам себе что-то пишет, не понятно, что он пише, вобщем толку ноль, научиться трудно, ищите что то другое
Если вы не понимаете, то это ваша проблема) Научиться можно легко, если выучить основы и только потом что-то верстать, а не пытаться сделать без знаний, и думать что это автор тупой.
Ну и зачем учить весь этот хлам для того, чтобы просто вывести навигацию? хтмл/цсс/джс это куда быстрее сделает, понапридумывали херни всякой, а теперь на работу устроиться нельзя без знаний этого бреда..
Вы просто не до конца понимаете пока что зачем нужны js библиотеки. Постарайтесь выполнить сложную задачу и понимание прийдет. На видео сейчас это песочница, ничего сложного.
@@SuprunAlexey ну, где бы взять эту сложную задачу и кто бы помог, вдруг что)
Нормального обяснения нет! Гоша Дударь обяснит лучше
если ты делал этот видеокурс для новичков, то скажу тебе сразу, никто и ничего не понял, стоило бы уделить немного внимания деталям, и лучше писать проще и понятнее