Comment implémenter une barre de navigation en utilisant React

Question

Je suis en train d'essayer d'apprendre React par moi-même mais j'ai du mal à créer une barre de navigation simple pour ma page web. J'aimerais placer la barre de navigation dans le fichier index.jsx afin qu'elle apparaisse en haut de la page; ci-dessous ce que j'ai dans le fichier index.jsx.

import React from 'react'
import { render } from 'react-dom'
import App from './components/App';

const node = document.querySelector('#app')

render(, node);

Answer 1

En supposant que nous utilisions simplement React de base, vous devez d'abord définir ce qui se trouve dans votre barre de navigation. Sans tous les éléments superflus qui viennent avec le style ou d'autres éléments pour le rendre joli, la barre de navigation n'est vraiment qu'une liste.

Donc, cela étant dit, votre composant de barre de navigation ressemblera à ceci :

class Navbar extends React.Component{
    render() {
        return (

                Accueil
                À propos
                FAQ
                Contact

        );
    }
}

Maintenant... Vous voulez bien sûr une barre de navigation, pas juste une liste qui traîne sur votre site. Pour y parvenir, vous devrez jouer un peu avec du CSS.

Tout d'abord, faites-la horizontale :

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none; }
#nav li {
    float: left; }

Ensuite, espacez un peu les éléments et décorez-les :

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; }

#nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        font-weight: bold;
        color: #069;
        border-right: 1px solid #ccc; }

Source du CSS. Ainsi que des explications plus approfondies sur ce qui est fait

Voici l'application qui résultera en ceci :

class Navbar extends React.Component{
    render() {
        return (

                Accueil
                À propos
                FAQ
                Contact

        );
    }
}

class App extends React.Component {
  render () {
    return (

          [Contenu de la page ici]

    )
  }
}

ReactDOM.render(
    ,
    document.getElementById('app')
);

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none; }
#nav li {
    float: left; }

#nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        font-weight: bold;
        color: #069;
        border-right: 1px solid #ccc; }

#nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        font-weight: bold;
        color: #069;
        border-right: 1px solid #ccc; }

Dans votre cas, vous utilisez react-bootstrap qui fait une grande partie du travail. Vous n'aurez pas à vous soucier beaucoup du style ou de quoi que ce soit car il s'en occupera pour vous.

Si vous regardez ici dans la documentation de react-bootstrap, cela vous donne des composants prêts à l'emploi afin que vous n'ayez pas à faire tout ce travail de style.

class MyNavbar extends React.Component{
    render() {
        return (

                Mon Marque

                Accueil

                À propos

                FAQ

                Contactez-nous

        );
    }
}

Alors pour décomposer tout cela, le composant Navbar contiendra l'intégralité de votre barre de navigation, il sera l'enveloppe autour de celle-ci. Le NavbarHeader est la partie principale qui restera à gauche de la barre de navigation et aura généralement soit le nom de votre marque, soit une icône. Enfin, Nav est ce qui contiendra les différentes pages. Dans ce cas, vous n'avez pas à vous soucier du style ou de quoi que ce soit car tous les composants react-bootstrap se sont déjà occupés de cela pour vous.