Как сделать адаптивный заголовок для вашего сайта React с помощью Antd

Перед началом работы с этим учебным пособием у вас должен быть установлен React и вы должны иметь базовые знания о библиотеке компонентов Antd. Вы также должны убедиться, что в вашей системе установлена ​​последняя версия Node.js.

2. Настройка

Чтобы начать работу, вы должны создать новое приложение React, выполнив следующую команду в своем терминале:

npx create-react-app my-app

После того, как ваше приложение будет создано, вы должны перейти в каталог и установить библиотеку Antd, выполнив команду:

npm install antd

3. Создайте компонент меню

После того, как вы установили библиотеку Antd, вы можете приступить к созданию компонента меню, создав новый файл с именем Menu.js в вашем каталоге src. В этом файле мы импортируем компонент Menu из Antd и определим наши пункты меню.

import React from 'react'; 
import { Menu } from 'antd'; 

const MenuItems = [
  { name: 'Home', link: '/home' }, 
  { name: 'About', link: '/about' }, 
  { name: 'Contact', link: '/contact' }  
]; 

 const MyMenu = () => { 

  return ( 
    <Menu mode="horizontal"> 

      {MenuItems.map(item => (  

        <Menu.Item key={item.name}>  

          <a href={item.link}>{item.name}</a>  

        </Menu.Item>  

      ))}  

    </Menu>  

  ); 

 }; 

 export default MyMenu;

В этом фрагменте кода мы импортируем компонент Menu из Antd и создаем массив пунктов меню, которые мы хотим отобразить в нашем меню. Затем мы определяем наш компонент MyMenu, который использует компонент Menu из Antd для отображения пунктов меню. Мы также устанавливаем свойство mode компонента Menu на horizontal, что обеспечит горизонтальное отображение нашего меню на странице. Наконец, мы экспортируем наш компонент MyMenu, чтобы его можно было использовать в других частях нашего приложения.

4. Добавьте компонент меню в App.js

Теперь, когда мы определили наш компонент MyMenu, нам нужно добавить его к нашему основному компоненту приложения, чтобы он отображался на нашей странице. Для этого откройте файл App.js и импортируйте компонент MyMenu вверху файла:

import MyMenu from './components/menu';

Затем нам нужно добавить компонент MyMenu в метод рендеринга нашего компонента приложения, как показано ниже:

class App extends Component {  

  render() {  

    return (  

      <div className="App">  

        <MyMenu />  

        {/* Other components here */}  

      </div>  

    );  

  }  
}

Теперь, если вы сохраните изменения и запустите приложение, вы должны увидеть только что созданное горизонтальное меню на своей странице! Поздравляем! Теперь вы успешно создали отзывчивое горизонтальное меню, используя библиотеку компонентов Antd!

💡 Примечание. После того, как вы создали адаптивное горизонтальное меню, было бы неплохо изолировать и извлечь этот компонент в пакеты, чтобы вы могли использовать цепочку инструментов с открытым исходным кодом, например Bit для публикации, версии и повторного использования во всех ваших проектах с помощью простого npm i @bit/your-username/MyMenu. Узнайте больше здесь и здесь.

Спасибо за чтение. Если вам понравился этот блог, рассмотрите возможность подписаться на мою учетную запись Medium для ежедневных блогов на темы разработки программного обеспечения и технологий!

Создавайте приложения React с повторно используемыми компонентами, как Lego

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:

→ Микро-интерфейсы

→ Система дизайна

→ Совместное использование кода и повторное использование

→ Монорепо

Узнать больше