ایجاد یک نوار ناوبری پاسخگو با React

ساختن نوار ناوبری پاسخگو با React هرگز آسان نبوده است! با جدیدترین فناوری‌ها و به‌روزرسانی‌ها، می‌توانید یک نوار ناوبری شیک و واکنش‌گرا ایجاد کنید که تجربه کاربری وب‌سایت شما را بهبود می‌بخشد. این مقاله شما را در مراحل ایجاد یک نوار ناوبری پاسخگو با React، از جمله نمونه کد و جدیدترین تکنیک ها، راهنمایی می کند.

چرا به یک نوار ناوبری پاسخگو نیاز دارید؟

برای وب سایت های مدرن، یک نوار ناوبری پاسخگو مورد نیاز است. با افزایش تعداد کاربرانی که در حال مرور وب در دستگاه های تلفن همراه هستند، ایجاد یک نوار ناوبری که به اندازه های مختلف صفحه نمایش پاسخگو باشد بسیار مهم است. نوار ناوبری پاسخگو به کاربران این امکان را می دهد تا بدون توجه به دستگاهی که استفاده می کنند، به راحتی وب سایت شما را هدایت کنند. همچنین یک جزء مهم از رابط کاربری یک وب سایت است و می تواند تأثیر قابل توجهی بر تجربه کاربر داشته باشد.

شروع شدن

برای شروع با ایجاد یک نوار ناوبری پاسخگو با React، ابتدا باید React و JavaScript را بدانید. همچنین به یک ویرایشگر کد مانند Visual Studio، Replit یا Codesandbox روی رایانه خود نیاز دارید.

مرحله 1: پروژه خود را ایجاد کنید.

اولین قدم این است که پروژه خود را راه اندازی کنید. به دایرکتوری که می خواهید پروژه خود را در ترمینال خود ایجاد کنید بروید. برای ایجاد یک برنامه React جدید، از دستور زیر استفاده کنید:

npx create-react-app my-app

این یک برنامه جدید React با نام ایجاد می کند my-app. پس از اتمام نصب، از دستور زیر برای رفتن به فهرست پروژه استفاده کنید:

cd my-app

مرحله 2: وابستگی ها را تنظیم کنید

اکنون که پروژه شما راه اندازی شده است، باید وابستگی های مورد نیاز برای نوار ناوبری را نصب کنید. برای نصب وابستگی های مورد نیاز، دستور زیر را اجرا کنید:

npm install react-bootstrap bootstrap

با این کار React Bootstrap و همچنین Bootstrap نصب می شود که برای ساخت نوار ناوبری استفاده می شود.

مرحله 3: کامپوننت نوار ناوبری را ایجاد کنید.

بعد، یک کامپوننت نوار ناوبری جدید ایجاد کنید. یک فایل جدید در دایرکتوری “src” به نام “Navbar.js” در ویرایشگر کد خود ایجاد کنید. کد زیر را در فایل وارد کنید:

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function NavigationBar() {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#">Brand Name</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
          <Nav.Link href="#">Home</Nav.Link>
          <Nav.Link href="#">About</Nav.Link>
          <Nav.Link href="#">Contact</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default NavigationBar;

این کد یک نوار ناوبری اصلی در سمت چپ با نام تجاری و پیوندهایی به Home، About و Contact در سمت راست ایجاد می کند.

مرحله 4: شامل پاسخگویی.

باید چند کلاس به کامپوننت نوار ناوبری اضافه کنید تا پاسخگو شود. در عنصر Navbar، کد زیر را قرار دهید:

<Navbar bg="light" expand="lg" className="navbar-custom">

این navbar-custom کلاس به عنصر Navbar اضافه می شود، که برای استایل دادن به نوار ناوبری استفاده می شود.

سپس، در شما index.css فایل، شامل CSS زیر باشد:

@media (max-width: 767px) {
  .navbar-custom .navbar-nav .nav-link {
    color: #fff !important;
  }
}

هنگامی که اندازه صفحه نمایش کمتر از 768 پیکسل است، این کد پیوندهای نوار ناوبری را سفید می کند.

مرحله 5: نوار ناوبری را تست کنید.

کد زیر را به خود اضافه کنید App.js فایل برای تست نوار ناوبری:

import React from 'react';
import NavigationBar from './Navbar';

function App() {
  return (
   <div className="App">
    <NavigationBar />
    <h1>Hello World!</h1>
  </div>
  );
}
export default App;

مولفه NavigationBar به همراه یک ساده وارد و ارائه می شود Hello World پیام

برای راه اندازی سرور توسعه React، فایل را ذخیره کنید و دستور زیر را در ترمینال خود اجرا کنید:

npm start

اکنون نوار ناوبری باید در بالای صفحه شما قابل مشاهده باشد.

نتیجه

استفاده از React برای ایجاد یک نوار ناوبری پاسخگو یک راه ساده و موثر برای بهبود تجربه کاربری وب سایت شما است. می‌توانید یک نوار ناوبری شیک و مدرن ایجاد کنید که در همه دستگاه‌ها با استفاده از جدیدترین فناوری‌ها و به‌روزرسانی‌ها کار می‌کند. با دنبال کردن مراحل ذکر شده در این مقاله می توانید به سرعت یک نوار ناوبری پاسخگو اولیه ایجاد کنید.