Привет всем, в этом учебном пособии по реактивным технологиям мы создадим отзывчивую панель навигации с помощью react js. Также мы узнаем, как использовать codesandbox.io в качестве онлайн-редактора кода. Мы создадим наш полный проект на codesandbox.io.
Получить бесплатный логотип
Также мы рассмотрим несколько сайтов с бесплатными логотипами, откуда вы можете получить бесплатные логотипы для использования в вашем проекте. Получите бесплатные логотипы отсюда, Logoipsum.com.
Развертывание проекта
После создания нашей профессионально выглядящей отзывчивой панели навигации мы бесплатно развернем ее на GitHub & Netlify.
Мы добавили метку «Уровень сложности: 0». Потому что мы собираемся создать отзывчивую панель навигации, используя базовый синтаксис react js. После этого урока мы создадим еще одну панель навигации, используя продвинутые методы react js. Мы узнаем, как работать с динамическими свойствами, как правильно использовать компоненты и т.д.
Но если вы новичок, то я советую вам сначала изучить этот учебник для начинающих.
Видеоурок:
Наша панель навигации будет хорошо реагировать на изменения. Мы можем использовать наш navbar на любых устройствах. Мы использовали css media queries, чтобы сделать наш navbar отзывчивым.
Чтобы начать,
Если вы используете codesandbox вместе со мной, то вам не нужно выполнять эти шаги. Но после завершения этого проекта, если вы хотите редактировать/модерировать этот проект в codesandbox, вы можете выполнить эти шаги.
- Посетите наш GitHub репозиторий и скачайте его. Это пустой стартовый шаблон.
- Откройте VS Code, если вы используете vs code вместо code sandbox. В противном случае вы можете следовать этому руководству.
- Перетащите проект в vs code.
- Откройте терминал и выполните эту команду.
npm i && npm start
Поддержите нас
Вы можете купить исходный код здесь.
- Исходный код 1(Карта): React Navbar
- Исходный код 2(PayPal): React Navbar
После покупки исходного кода выполните следующие действия.
- Перетащите проект в vs code.
- Откройте терминал & выполните эту команду.
npm i && npm start
Это установит все необходимые зависимости react & запустит ваш проект в браузере.
Уже создали навигационную панель? Тогда не останавливайтесь. Мы создадим еще одну отзывчивую панель навигации с помощью react js. На этот раз мы будем использовать расширенные возможности react для создания этого navbar.
Вот продвинутый Navbar Using React JS.
Не стесняйтесь посещать мой канал на YouTube:
@Tech2etc
Следуйте за мной на Instagram, где я делюсь множеством полезных ресурсов!
@fahimulkabir.chowdhury 😉
Другие полезные статьи:
11+ проектов на JavaScript для начинающих
Fahimul Kabir Chowdhury ・ Jun 11 ’21 ・ 3 min read