La Navbar

Bonjour et bienvenue dans mon quatrième blog !!Dans le blog précédent, on a installé Node. Aujourd’hui, il est temps de faire notre premier composant.Tout d’abord,on va aller dans le dossier src et on va supprimer des fichiers qui ne sont pas nécessaires pour le projet :setupTest.js, logo.svg, app.test.js et index.css.Votre fichier App.js doit ressembler à ceci :

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>ALLO</h1>
    </div>
  );
}

export default App;

et votre fichier index.js à ceci :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

La raison pour laquelle on supprime tous ces fichiers, c’est afin d’avoir un projet vide et que l’on puisse ajouter ce que l’on veut.Une fois que vous avez fait toutes les modifications nécessaires démarrer l'application avec npm start. Dans votre écran d’accueil, il est supposé apparaître un “ALLO”. Si ça s’affiche, on peut commencer.

Qu'est-ce qu’un composant ?

En React, un composant est un élément réutilisable qui représente une partie de l'interface utilisateur. Un composant peut être une simple boîte contenant du texte, un bouton, un formulaire, ou même une navigation complète.L’avantage des composants, c’est qu’ils permettent de diviser notre application en plusieurs petites parties indépendantes et réutilisables.Le composant qu’on va faire aujourd’hui va être la navbar de notre projet, que l’on va utiliser pour toutes les pages.

Dans le dossier src, nous allons créer un dossier qui va s’appeler composants.Dans ce dossier composants, on va créer un fichier qui va s’appeler Navbar.js. Dans Navbar.js, ajoutez ceci :

import React from "react";

const Navbar = () => {
  return (
    <nav style={{ backgroundColor: "#333", padding: "10px", color: "white" }}>
      <h1>Mon Site</h1>
      <ul style={{ listStyle: "none", display: "flex", gap: "15px" }}>
        <li><a href="/" style={{ color: "white", textDecoration: "none" }}>Accueil</a></li>
        <li><a href="/about" style={{ color: "white", textDecoration: "none" }}>À propos</a></li>
        <li><a href="/contact" style={{ color: "white", textDecoration: "none" }}>Contact</a></li>
      </ul>
    </nav>
  );
};

export default Navbar;

Ceci est un navbar basique avec un peu de CSS intégré. Il contient un titre ainsi que des liens vers d’autres pages qui ne sont pas encore créées.

Pour implémenter ce composant, il faut aller dans le fichier App.js et modifiez-le comme ceci :

import React from "react";
import Navbar from "./composants/Navbar";

const App = () => {
  return (
    <div>
      <Navbar />
      <h2>Bienvenue sur mon site !</h2>
      <p>Ceci est la page d'accueil.</p>
    </div>
  );
};

export default App;

Dans ce code, on importe et initialise la Navbar pour l'afficher dans l'application principale.

Pour rendre l’interface plus esthétique, nous pouvons créer un fichier CSS dédié aux composants et l’importer.Voici un exemple d’une Navbar plus avancée et responsive, que j’utilise dans mon projet en parallèle:

import React, { useState } from "react";
import "./Navbar.css"; 

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="navbar">
      <h1 className="logo">INKStyle</h1>
      <ul className={`nav-links ${isOpen ? "open" : ""}`}>
        <li><a href="/">Accueil</a></li>
        <li><a href="/tattoos">Tatouages</a></li>
        <li><a href="/artists">Artistes</a></li>
        <li><a href="/booking">Réserver</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <button className="menu-btn" onClick={() => setIsOpen(!isOpen)}>☰</button>
    </nav>
  );
};

export default Navbar;

Cette navbar est responsive, ce qui signifie qu’elle s’adapte aussi aux écrans mobiles.

Dans ma navbar on peut voir j'utilise useState, isOpen et setIsOpen.

useState sa permet de gérer l’ouverture et la fermeture du menu de manière dynamique au début. isOpen c'est une variable d'état qui stocke un booléen true ou false. setIsOpen c'est une fonction qui permet de mettre à jour la valeur de isOpen.

Pour apprendre à créer une navbar responsive, voici une vidéo qui m’a inspiré : https://www.youtube.com/watch?v=I2UBjN5ER4s

Il y a aussi ces documentations qui peut aider avec la syntaxe et donne un example que vous pouvez essayer : https://react-bootstrap.netlify.app/docs/components/navbar/ ,

useState : https://legacy.reactjs.org/docs/hooks-state.html ,

isOpen : https://legacy.reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs