Défilement fluide en action avec React : un tutoriel

Preslav Dobrev2022-10-05 · 11 min read

Défilement fluide en action avec React : un tutoriel

React est une bibliothèque JavaScript open-source utilisée pour créer des conceptions de sites Web futuristes et améliorer les interfaces utilisateur. En raison de sa robustesse, de sa flexibilité et de son efficacité, elle a surpassé ses bibliothèques et frameworks front-end concurrents. React offre d'excellentes fonctionnalités et des caractéristiques exceptionnelles qui facilitent la personnalisation et l'animation dynamique.

Dans la liste des collections d'animations, le défilement fluide dans React aide à augmenter l'interactivité des applications web et à rationaliser l'animation. Le défilement fluide est une fonctionnalité qui permet aux utilisateurs d'accéder à différentes sections de la page à l'aide d'une barre de navigation. Cela signifie que, plutôt que d'appuyer sur un bouton et d'être immédiatement redirigé vers une autre section d'une page similaire, l'utilisateur est dirigé vers une cible via une animation de défilement.

Dans ce guide, nous allons vous guider à travers les étapes de mise en œuvre du défilement fluide avec React.

Commençons !

Prérequis

Pour suivre ce tutoriel, vous aurez besoin de ce qui suit :

Git installé sur votre système.
- Suivez les étapes pour installer et configurer Git sur Ubuntu 18.04
La dernière version de Node.js doit être installée.
- Utilisez ce tutoriel pour installer Node.js sur Ubuntu 18.04

La configuration de base : Installer react-scroll

Dans ce guide adapté aux débutants, nous allons concevoir une application simple en utilisant react-scroll. Si vous êtes à l'aise avec les bases de React et que vous souhaitez approfondir vos connaissances sur react-scroll fonctions, reportez-vous à ces étapes résumées.

Tout d'abord, installez react-scroll en utilisant la commande suivante :

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Ensuite, importez le package react-scroll :

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

Après cela, insérez le composant <Link /> qui ciblera une section spécifique de l'application :

<Link to="section1">

1	<Link to="section1">

Allons plus loin et concevons une application React avec un défilement fluide.

Étape 1 : Cloner et exécuter l'application React

Dans notre guide, nous utiliserons le projet React de départ qui comprend une barre de navigation en haut. Vous y verrez cinq <sections> uniques disposées séquentiellement.

Actuellement, les liens de la barre de navigation sont des balises d'ancrage. Cependant, nous devrons bientôt les mettre à jour pour activer le défilement fluide. Suivez la page React With Smooth Scrolling pour accéder au dépôt du projet. Il est important de noter que le lien concerne la branche start . La branche master comprend toutes les modifications terminées. En ouvrant l'URL, vous verrez le dépôt :

Sur la page du dépôt, vous verrez le bouton Code en vert. CLIQUEZ SUR la flèche de déroulement :

En cliquant sur la flèche, vous verrez le lien HTTP lien:

Allez maintenant sur votre terminal git, et utilisez la commande suivante pour cloner le projet sur votre machine locale :

$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

1	$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

Dans le répertoire src/Components , vous trouverez un fichier Navbar.js qui inclut le <Navbar> avec des nav-items correspondant à cinq <Section>s disposées séquentiellement :

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
    render() {
    return (
    <nav className="nav" id="navbar">
        <div className="nav-content">
            <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
         />
        <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
        </ul>
    </div>
    </nav>
    );
  }
}

import React, { Component } from "react";

import logo from "../logo.svg";

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="Logo."

onClick={this.scrollToTop}

<li className="nav-item">Section 1</li>

<li className="nav-item">Section 2</li>

<li className="nav-item">Section 3</li>

<li className="nav-item">Section 4</li>

<li className="nav-item">Section 5</li>

</ul>

</div>

</nav>

);

}

Ensuite, accédez au fichier App.js dans le répertoire src. Là, vous verrez que le <Navbar> est placé avec les cinq <Section>s :

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";

class App extends Component {
    render() {
        return (
            <div className="App">
            <Navbar />
            
            <Section
            title="Section 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="Section 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="Section 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="Section 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="Section 5"
            subtitle={dummyText}
            dark={true}
            id="section5"
            />
        </div>
        );
        }
    }
export default App;

import React, { Component } from "react";

import logo from "./logo.svg";

import "./App.css";

import Navbar from "./Components/Navbar";

import Section from "./Components/Section";

import dummyText from "./DummyText";

class App extends Component {

render() {

return (

<Section

title="Section 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Section 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Section 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Section 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Section 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Par défaut, chaque <Section> composant inclura un titre et sous-titre.

DRY : le principe en action

Comme nous utilisons du texte de remplissage pour notre tutoriel, ajoutons un fichier dummyText.js pour gagner du temps et réduire les répétitions. Utilisez le fichier JavaScript nouvellement créé pour le passer dans chaque élément <Section> .

Installer React

Utilisez la commande suivante pour lancer l'application :

cd React-With-Smooth-Scrolling
npm install
npm start

cd React-With-Smooth-Scrolling

npm install

npm start

L'exécution de rpm démarrera votre application en mode développement. Allez sur localhost:3000 et vérifiez que l'application fonctionne sur votre système :

Maintenant que notre application fonctionne, passons à l'étape suivante et installons react-scroll à l'étape suivante.

Étape 2 : Installer et configurer React-Scroll

Tout d'abord, vous devez vous rendre sur le paquet sur Node Package Manager pour télécharger react-scroll . Au moment de la rédaction de ce guide, nous utilisons la version la plus récente de react-scroll , 1.8.7. Assurez-vous d'obtenir la dernière version s'il y a une mise à jour à l'avenir :

Exécutez la commande suivante pour installer react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Après cela, allez dans le fichier Navbar.js et importez Link et animateScroll depuis react-scroll. Pour plus de simplicité et de facilité d'utilisation, gardons animateScroll comme scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

Après cela, mettez à jour les éléments de-navigation pour utiliser le composant <Link> . Vous verrez de nombreuses propriétés répertoriées dans le <Link> composant qui est trivial pour notre tutoriel. Cependant, vous pouvez explorer ces propriétés en consultant la page de documentation.

Quelques propriétés essentielles qui méritent votre attention :

activeClass – La classe utilisée lorsqu'un élément est actif.
to – Informe la cible spécifiée vers laquelle faire défiler.
- La fonctionnalité to est cruciale car elle indique au composant vers quel élément faire défiler.
spy : Permet de sélectionner le Link lorsque le défilement est à la position cible.
smooth : Anime le défilement.
offset : Fait défiler des px supplémentaires, comme du padding, par exemple.
- Vous pouvez également utiliser offset pour définir une quantité supplémentaire de défilement pour atteindre un <Section>.
duration : Temps d'animation du défilement qui peut être un nombre ou une fonction.

Voici une illustration des fonctionnalités qui peuvent être utilisées pour chaque composant <Link>. La seule chose distinctive entre eux sera la fonctionnalité to car ils pointent tous vers des <Section>s :

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

Pensez à mettre à jour tous les éléments nav-éléments. Une fois tous les éléments ajoutés avec succès, retournez sur le navigateur pour voir le défilement fluide en direct.

Étape 3 : Styliser les liens actifs

Dans cette étape, nous utiliserons des CSS propriétés pour redessiner notre bloc de code et lui donner du style. La fonctionnalité activeClass vous permet de définir une classe et de l'appliquer au composant <Link> lorsque l'élément to est actif. Si le <Link> que vous utilisez a la vue de l'élément to en haut de la page, considérez le <Link> comme actif. Cliquez sur le <Link> ou faites défiler vers le bas la <Section> manuellement pour déclencher le <Link>.

Essayons de tester et de voir comment cela fonctionne. Ouvrez les Chrome DevTools et inspectez le cinquième <Link> comme mis en évidence ci-dessous. Cliquez sur le <Link> ou faites défiler manuellement la <Section> vers la partie inférieure de la page, et vous observerez que la classe active s'applique :

En guise d'étape supplémentaire, créez une classe active et soulignez le lien. Ensuite, ajoutez ce petit bloc de CSS dans le fichier App.css du répertoire src :

.nav-item > .active {
    border-bottom: 1px solid #333;
}

.nav-item > .active {

border-bottom: 1px solid #333;

}

Après cela, rafraîchissez votre navigateur. Faites défiler un peu et vous remarquerez que le <Link> spécifié est maintenant souligné :

Étape 4 : Ajouter plus de fonctions

En plus des propriétés utilisées ci-dessus, il existe d'autres fonctionnalités comme scrollToTop, scrollToBottom, pour n'en nommer que quelques-unes, que vous pouvez utiliser. Vous pouvez appeler ces fonctions directement et gérer leurs actions de manière explicite. En ce qui concerne ces fonctionnalités, naturellement, le logo de l'application dans une barre de navigation vous ramènera en haut de la page d'accueil.

En utilisant la fonction scrollToTop, ajoutez un gestionnaire de clic au nav-logo pour ramener l'utilisateur en haut de la page :

scrollToTop = () => {
    scroll.scrollToTop();
};

scrollToTop = () => {

scroll.scrollToTop();

};

En utilisant la fonction scrollToTop, ajoutez un gestionnaire de clic au nav-logo pour faire défiler l'utilisateur jusqu'au bas de la page :

scrollToTop = () => {
    scroll.scrollToBottom();
};

scrollToTop = () => {

scroll.scrollToBottom();

};

De retour dans le navigateur, vous pouvez maintenant faire défiler la page vers le bas, cliquer sur le logo dans la barre de navigation et être redirigé vers la partie supérieure de la page.

Conclusion

Le défilement fluide fait partie de ces fonctionnalités qui peuvent ajouter beaucoup de valeur visuelle à une application web. Le package react-scroll peut vous permettre de tirer parti de cette fonctionnalité sans surcharge importante.

Comme prochaine étape de votre apprentissage, jetez un œil aux autres tutoriels React et JavaScript que vous pouvez trouver sur notre blog:

Bonne programmation !

Preslav Dobrev

Auteur · CloudSigma

Preslav Dobrev est un designer créatif chez CloudSigma, axé sur une identité commerciale cohérente à travers des canaux marketing traditionnels et innovants. Il excelle à fusionner la vision artistique avec le marketing stratégique pour créer des récits de marque percutants.

Défilement fluide en action avec React : un tutoriel

Prérequis

La configuration de base : Installer react-scroll

Étape 1 : Cloner et exécuter l'application React

Étape 2 : Installer et configurer React-Scroll

Étape 3 : Styliser les liens actifs

Étape 4 : Ajouter plus de fonctions

Conclusion

Preslav Dobrev

Commentaires