Le guide ultime pour créer un en-tête réactif avec React et Tailwind CSS

Création d'un en-tête réactif à l'aide de React et Tailwind CSS

La création d'un en-tête réactif est un aspect fondamental du développement Web moderne. Dans cet article, nous vous guiderons dans la création d'un composant d'en-tête réactif à l'aide de React et Tailwind CSS. Ce guide est conçu pour les débutants, donc même si vous êtes nouveau dans ces technologies, vous le trouverez facile à suivre. Nous décomposerons le code fourni étape par étape, expliquant comment il fonctionne et comment vous pouvez implémenter des fonctionnalités similaires dans vos projets.

Introduction

Un en-tête sert de zone de navigation pour un site Web, fournissant des liens vers différentes sections et des actions importantes telles que la connexion ou l'inscription. Dans le monde actuel axé sur le mobile, il est essentiel que les en-têtes soient réactifs, ce qui signifie qu'ils s'adaptent gracieusement aux différentes tailles d'écran. Nous utiliserons React pour créer notre composant et Tailwind CSS pour le styliser, garantissant ainsi un look élégant et moderne.

Commencer

Avant de plonger dans le code, assurez-vous d'avoir configuré un environnement React. Vous pouvez créer une nouvelle application React à l'aide de Create React App en exécutant la commande suivante :

npx create-react-app responsive-header
cd responsive-header

Une fois votre application configurée, vous devrez installer Tailwind CSS. Vous pouvez le faire en suivant le guide d'installation officiel de Tailwind CSS.

Après avoir configuré Tailwind, vous êtes prêt à commencer à créer notre composant d'en-tête !

Répartition étape par étape du code

Importation des bibliothèques requises

Dans votre dossier src, créez un nouveau fichier appelé Header.js. La première étape consiste à importer React et le hook useState :

import React, { useState } from "react";

Le hook useState nous permet de gérer l'état de notre menu de navigation, notamment s'il est ouvert ou fermé.

Création du composant d'en-tête

Maintenant, définissons notre composant Header.

function Header() {
  const [nav, setNav] = useState(false);
}

Ici, nous initialisons une variable d'état appelée nav pour savoir si le menu de navigation est ouvert ou fermé. La fonction setNav nous permettra de basculer cet état.

Rendu de l'en-tête

Ensuite, nous renverrons le JSX pour notre en-tête :

return (
  <header>
    <nav classname="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800 shadow">
      <div classname="flex flex-wrap justify-between items-center mx-auto max-w-screen-lg"></div>
</nav></header>

• element
   : ceci enveloppe nos liens de navigation et est stylisé à l'aide des classes CSS Tailwind. Nous définissons une couleur d'arrière-plan, un remplissage et une ombre pour créer un aspect épuré.
• avec les propriétés flex : cela utilise Flexbox pour disposer les éléments dans la navigation. La classe max-w-screen-lg limite la largeur maximale de l'en-tête, garantissant ainsi qu'il s'affiche bien sur des écrans plus grands.

  Ajout du logo

  Maintenant, ajoutons un logo à notre en-tête :
  

  <a href="#" classname="flex items-center">
    <span classname="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
      Logo
    </span>
  </a>
  

  Cette section contient une balise d'ancrage renvoyant vers la page d'accueil, ainsi qu'un élément span pour le texte du logo. Les classes appliquées garantissent que le logo est correctement stylé, y compris les éléments de conception réactifs pour le mode sombre.

  Ajout du menu de navigation

  Ensuite, nous ajouterons les éléments de navigation proprement dits. Cette section changera selon que l'état de navigation est vrai ou faux :
  

  <div classname="{`flex-col" md:flex md:flex-row items-center w-full md:w-auto md:order-2 transition-all duration-300 nav top-14 left-0 bg-white shadow-md p-4 md:relative md:top-0 md:bg-transparent md:shadow-none : gap-6></div>
  

  • Noms de classe dynamiques : nous utilisons des littéraux de modèle pour appliquer conditionnellement des classes en fonction de l'état de navigation. Lorsque nav est vrai, le menu est visible ; sinon, il est masqué sur les écrans moyens et grands.
  • Transition : Les classes transition-all et durée-300 offrent un effet de transition en douceur lorsque le menu s'ouvre ou se ferme.

  Création des éléments de menu

  Maintenant, définissons nos éléments de menu dans une liste non ordonnée :
  

  • Home
  • Pricing
  • Contact Us
  • Sign In

  Chaque élément de la liste (

• ) contient une balise d'ancrage () qui sert de lien. Les classes CSS Tailwind sont largement utilisées ici pour le style, y compris les effets de survol et la compatibilité du mode sombre.

  Ajout d'un bouton d'inscription

  Après les éléments de menu, nous ajouterons un bouton d'inscription :
  

  <button classname="mt-4 md:mt-0 rounded-full bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
    Sign Up Now
  </button>
  

  Ce bouton est conçu pour se démarquer et fournit un appel à l'action clair aux utilisateurs. Nous avons ajouté des états de survol et de focus pour une meilleure expérience utilisateur.

  Ajout de l'icône Hamburger pour les appareils mobiles

  Pour rendre l'en-tête réactif, nous inclurons une icône de menu hamburger pour les utilisateurs mobiles :
  

  <div classname="md:hidden flex items-center lg:order-1">
    <button type="button" classname="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="{nav}" onclick="{()"> setNav(!nav)}
    >
      <span classname="sr-only">Open main menu</span>
  </button>
  </div>
  

  Ce code crée un bouton qui, lorsque vous cliquez dessus, bascule la visibilité du menu de navigation. Les attributs aria-controls et aria-expanded améliorent l'accessibilité.

  Gestion des changements d'icône

  Selon que le menu de navigation est ouvert ou fermé, nous pouvons afficher différentes icônes :
  

  {nav ? (
    <svg close icon></svg>
  ) : (
    <svg open icon></svg>
  )}
  

  Ce rendu conditionnel nous permet de fournir un repère visuel aux utilisateurs sur l'état du menu.

  Complete Component Code

  Now that we've gone through each part, here’s the complete code for the Header component:
  

  import React, { useState } from "react";
  
  function Header() {
    const [nav, setNav] = useState(false);
  
    return (
      
  
        
  
          
  
            
              
                Logo
              
            
  
            
  
              
  
                
  
                  
                    Home
                  
                
                
  
                  
                    Pricing
                  
                
                
  
                  
                    Contact Us
                  
                
                
  
                  
                    Sign In
                  
                
              
              
                Sign Up Now
              
            
  
            
  
               setNav(!nav)}
              >
                Open main menu
                {nav ? (
                  
                ) : (
                  
                )}
              
            
          
        
      
    );
  }
  
  export default Header;
  

  Conclusion

  Congratulations! You have successfully built a responsive header using React and Tailwind CSS. This component features a logo, navigation links, a sign-up button, and a hamburger icon for mobile devices. With this foundation, you can customize the header further by adding more links, changing styles, or integrating it into a larger application.

  FAQs

  Q1: What is Tailwind CSS?

  Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs quickly. Unlike traditional CSS frameworks, Tailwind promotes a more component-based approach to styling.

  Q2: Why use React for the header component?

  React is a powerful JavaScript library for building user interfaces. Using React allows us to create reusable components, manage state efficiently, and improve the overall performance of our applications.

  Q3: How can I customize the header further?

  You can customize the header by adding more links, changing colors, or even adding dropdown menus. Tailwind CSS makes it easy to change styles directly in the JSX.

  Q4: Is it necessary to use Tailwind CSS with React?

  No, it’s not necessary to use Tailwind CSS with React. You can use any CSS framework or custom CSS styles. However, Tailwind provides a fast and efficient way to style components without writing custom CSS.

  By following this guide, you should now feel confident in creating responsive headers for your own projects. Happy coding!