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.
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.
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 !
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é.
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.
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>
</header>
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.
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
? "absolute top-14 left-0 w-full bg-white shadow-md p-4 md:relative md:top-0 md:w-auto md:bg-transparent md:shadow-none"
: "hidden md:flex gap-6"
}`}
></div>
Maintenant, définissons nos éléments de menu dans une liste non ordonnée :
<ul className="flex flex-col md:flex-row md:gap-8 gap-0">
<li>
<a
href="#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded md:bg-transparent md:text-primary-700 md:p-0 dark:text-white"
aria-current="page"
>
Home
</a>
</li>
<li>
<a
href="#"
className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Pricing
</a>
</li>
<li>
<a
href="#"
className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Contact Us
</a>
</li>
<li>
<a
href="#"
className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Sign In
</a>
</li>
</ul>
Chaque élément de la liste (
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.
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é.
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.
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 (
);
}
export default Header;
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.
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!
Atas ialah kandungan terperinci Panduan Terbaik untuk Mencipta Pengepala Responsif dengan CSS React dan Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
