Для создания настраиваемого меню навигации в React.js важна функциональность. Если вы используете CSS-фреймворк Bootstrap, это просто. Просто скопируйте и вставьте код Navbar и включите CSS. Вот и все. Но в этом примере мы будем использовать Sass для стилизации компонентов React. Если вы не знаете, как использовать Sass в React, ознакомьтесь с руководством по Sass в React.
Как создать настраиваемое меню навигации в React
Мы будем использовать Bootstrap CSS Framework и модуль Node-sass для работы со стилями Sass. Как мы все знаем, Bootstrap предлагает нам готовую панель навигации, чтобы мы могли ее использовать, а затем мы изменим ее в соответствии с нашими потребностями, используя стили Sass.
Теперь наш первый шаг — это установите React.js с помощью create-response-app .
Шаг 1. Установите React и другие Модули CSS
Введите следующую команду в свой cmd или терминал.
npx create-react-app reactx
Имя нашего приложения должно быть reactx .
Теперь войдите в эту папку и откройте папку в Visual Studio Code.
Теперь откройте package.json , и вы увидите текущую версию React.js. На момент написания этого руководства текущая версия React: 16.3.1. ReactDom также имеет ту же версию.
Хорошо, теперь давайте установим следующие два модуля CSS.
yarn add bootstrap node-sass
Вы также можете использовать NPM для установки сторонних библиотек. Для этого вам нужно ввести следующую команду.
npm i bootstrap node-sass --save
Шаг 2: Создайте компонент заголовка
Создайте новую папку внутри папки src с именем shared и внутри этой папки создайте новый файл с именем Header.js .
Напишите следующий код внутри Header.js .
//Header.jsimport React from 'react'; функция экспорта Header () {return ( Header Component
)}
Этот компонент должен иметь дело только с элементами заголовка нашего приложения, такими как Navbar.
Если мы разделим наши компоненты React на небольшие компоненты, это будет легко для нашего приложения для управления данными между различными компонентами.
Теперь импортируйте компонент Header внутри файла src >> App.js .
//App.jsimport React from 'react'; import {Header} from './shared/Header';function App () {return (
Шаг 3. Создайте файл Sass или Scss
Как мы знаем, мы будем использовать стили Sass вместо стилей CSS.
Итак, создайте новый файл с именем App.scss внутри папки src и удалите файл App.css .
Или вы можете переименовать файл App.css в файл App.scss . Выбор за вами.
Теперь файл App.scss содержит весь код Sass, который будет использовать наш проект. Поэтому в ближайшем будущем мы импортируем файлы scss в файл App.scss.
Импорт — это функция, имеющая стиль Sass, который недоступен в простых файлах css.
Теперь внутри папки src создайте новую папку с именем styles, и внутри этой папки мы создадим следующие два новых файла scss.
- _variables.scss
Теперь, если имя файла начинается с _, это означает, что это частичный файл.
Внутри _variables.scss , мы определим переменные цвета.
//_variables.scss $ main-color: # df01d7; $ main-text-gray-color: # 484848; $ light-gray- color: # a9a9a9; $ main-black-color: # 20232a; $ main-white-color: #ededed;
Это некоторые из цветов, которые мы будем использовать в таких компонентах, как Navbar.
Мы переопределим некоторые цвета по умолчанию, предоставляемые компонентом Bootstrap Navbar, чтобы мы могли настраивать их в нашей программе. y.
Теперь внутри файла _main.scss напишите следующий код.
//_main.scss@import "переменные";. navbar {padding: 20px; нижнее поле: 40 пикселей; цвет фона: $ main-black-color; .nav-search {высота: 50 пикселей; ширина: 300 пикселей! важно; цвет границы: $ основной цвет; } .navbar-brand {маржа-право: 30 пикселей; размер шрифта: 27 пикселей; межбуквенный интервал: 1 пиксель; цвет: $ main-color! important; font-weight: 500; } .nav-item {размер шрифта: 14 пикселей; } .btn-nav-search {цвет границы: $ основной цвет; цвет: $ main-color; &: hover, &: focus, &: active {background-color: transparent! important; цвет границы: $ основной цвет! важно; цвет: $ main-color! important; тень коробки: нет; }} .nav-item {цвет: $ main-white-color; }}
В первой строке вы можете видеть, что мы импортировали файл _variables.scss для использования цветовых переменных в различных классах Bootstrap. Мы используем имена классов компонента Navbar, предоставленные Bootstrap.
Некоторые свойства класса Bootstrap необходимо переопределить; поэтому мы добавляем ! important , которое означает, что браузер применяет CSS-стили файла _main.scss вместо стандартного стиля Bootstrap. Если вы хотите переопределить какое-либо свойство элемента в CSS, вы можете использовать ! важный атрибут. Это означает, что браузеры должны применять этот стиль, а не стиль по умолчанию.
Теперь последний шаг — импортировать файл _main.scss внутри Файл App.scss .
//App.scss@import "styles/main";
Шаг 4 : Добавьте панель навигации в файл Header.js.
Мы успешно добавили файлы scss в наш проект React.
Теперь мы должны использовать эти классы внутри нашего компонента React. Поэтому добавьте следующий код в файл Header.js и сохраните этот файл.
//Header.jsimport React from 'react'; экспортная функция Header () {return ()}
Сохраните файл, перейдите в терминал и запустите сервер разработки React, используя следующую команду.
начало пряжи
Откроется браузер по этой ссылке:
То есть Это. Мы успешно создали настраиваемое меню навигации в React с таблицами стилей Sass.
Если вы вернетесь в терминал, вы увидите несколько предупреждений, подобных следующему.
Скомпилировано с предупреждениями ../src/shared/Header.js Строка 17:13: Атрибут href требует, чтобы было доступно действительное значение. Укажите действительный адрес для навигации в качестве значения href. Если вы не можете предоставить действительный href, но по-прежнему хотите, чтобы элемент напоминал ссылку, используйте кнопку и измените его соответствующими стилями. Подробнее: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid Строка 18:13: Атрибут href требует, чтобы было доступно действительное значение. Укажите действительный адрес для навигации в качестве значения href. Если вы не можете предоставить действительный href, но по-прежнему хотите, чтобы элемент напоминал ссылку, используйте кнопку и измените его соответствующими стилями. Подробнее: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid Найдите ключевые слова для изучения подробнее о каждом предупреждении. Чтобы игнорировать, добавьте//eslint-disable-next-line в строку перед.
Это потому, что мы не предоставили ссылки маршрутизации внутри элементов . Пока не обращайте на это внимания.
Если нам нужно добавить ссылки маршрутизации на панель навигации, мы должны использовать пакет под названием response-router-dom.
React Router — это набор навигационных компонентов , которые декларативно объединяются с вашим приложением. Независимо от того, нужны ли вам URL-адреса для закладок для вашего веб-приложения или составной способ навигации в React Native , React Router работает везде, где выполняется рендеринг React.
Заключение
В этом примере мы увидели, как создать настраиваемое меню навигации в React 16 с помощью таблицы стилей Sass.
Мы добавим маршрутизацию к нашему компоненту заголовка, но это мы увидим в следующем руководстве.
