Scorrimento fluido in azione utilizzando React: un tutorial

Preslav Dobrev2022-10-05 · 10 min read

Scorrimento fluido in azione utilizzando React: un tutorial

React è una libreria JavaScript open-source utilizzata per creare design di siti web futuristici e migliorare le interfacce utente. Grazie alla sua robustezza, flessibilità ed efficienza, ha superato le librerie e i framework front-end concorrenti. React offre funzionalità eccellenti e caratteristiche distintive che facilitano la personalizzazione e l'animazione dinamica.

Nell'elenco delle raccolte di animazioni, lo scorrimento fluido in React aiuta ad aumentare l'interattività delle app web e a snellire l'animazione. Lo scorrimento fluido è una funzionalità che consente agli utenti di passare a diverse sezioni della pagina utilizzando una barra di navigazione. Ciò significa che, anziché premere su un pulsante ed essere immediatamente indirizzati a una sezione diversa di una pagina simile, l'utente viene guidato verso una destinazione tramite un'animazione di scorrimento.

In questa guida, ti guideremo attraverso i passaggi per implementare lo scorrimento fluido utilizzando React.

Iniziamo!

Prerequisiti

Per seguire questo tutorial, avrai bisogno di quanto segue:

Git installato sul tuo sistema.
- Segui i passaggi per installare e configurare Git su Ubuntu 18.04
L'ultima versione di Node.js deve essere installata.
- Usa questo tutorial per installare Node.js su Ubuntu 18.04

La configurazione di base: installare react-scroll

In questa guida adatta ai principianti, progetteremo una semplice applicazione utilizzando react-scroll. Se hai familiarità con le basi di React e desideri migliorare le tue conoscenze sulle funzioni di react-scroll, fai riferimento a questi passaggi riassuntivi.

Per prima cosa, installa react-scroll utilizzando il seguente comando:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Successivamente, importa il pacchetto react-scroll:

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

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

Dopodiché, inserisci il componente <Link /> che punterà a una sezione specifica dell'app:

<Link to="section1">

1	<Link to="section1">

Andiamo avanti e progettiamo un'applicazione React con scorrimento fluido.

Passaggio 1: Clona ed esegui l'app React

Nella nostra guida, utilizzeremo il progetto React di partenza che include una barra di navigazione in alto. Lì vedrai cinque <sezioni> uniche disposte in sequenza.

Attualmente, i collegamenti nella barra di navigazione sono tag di ancoraggio. Tuttavia, dovremo aggiornarli a breve per abilitare lo scorrimento fluido. Segui la pagina React With Smooth Scrolling per navigare nel repository del progetto. È importante notare che il collegamento fa riferimento al branch start. Il branch master include tutte le modifiche completate. Aprendo l'URL, vedrai il repository:

Nella pagina del repository, vedrai il pulsante Code in verde. PREMI la freccia del menu a discesa:

Cliccando sulla freccia, vedrai il HTTP link:

Ora vai sul tuo terminale git e usa il seguente comando per clonare il progetto sulla tua macchina 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

Nella directory src/Components, troverai un file Navbar.js che include il componente <Navbar> con gli elementi di navigazione nav-items corrispondenti a cinque <Section> sezioni uniche disposte in sequenza:

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">Sezione 1</li>
            <li className="nav-item">Sezione 2</li>
            <li className="nav-item">Sezione 3</li>
            <li className="nav-item">Sezione 4</li>
            <li className="nav-item">Sezione 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">Sezione 1</li>

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

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

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

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

</ul>

</div>

</nav>

);

}

Successivamente, naviga verso il App.js file nella directory src. Lì vedrai che il <Navbar> è posizionato insieme alle cinque <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="Sezione 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

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

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

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

            <Section
            title="Sezione 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="Sezione 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Sezione 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Sezione 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Sezione 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Sezione 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Per impostazione predefinita, ogni <Section> componente includerà un title e subtitle.

DRY Principio in Azione

Poiché stiamo usando del testo fittizio per il nostro tutorial, aggiungiamo un dummyText.js file per risparmiare tempo e ridurre le ripetizioni. Usa il file JavaScript appena creato da passare in ogni <Section> elemento.

Installa React

Usa il seguente comando per AVVIARE l'app:

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

cd React-With-Smooth-Scrolling

npm install

npm start

L'esecuzione di rpm avvierà la tua applicazione in modalità di sviluppo. Vai su localhost:3000 e verifica l'app in esecuzione sul tuo sistema:

Ora che la nostra app è avviata, andiamo avanti e installiamo react-scroll nel passaggio successivo.

Passaggio 2: Installa e configura React-Scroll

Prima di tutto, devi visitare il pacchetto su Node Package Manager per scaricare react-scroll . Al momento della scrittura di questa guida, stiamo utilizzando la versione più recente di react-scroll , 1.8.7. Assicurati di ottenere l'ultima versione, se ci sarà un aggiornamento in futuro:

ESEGUI il seguente comando per installare react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Dopodiché, vai al file Navbar.js e importa Link e animateScroll da react-scroll. Per semplicità e facilità d'uso, manteniamo animateScroll come scroll:

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

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

Dopodiché, aggiorna i nav-items per utilizzare il componente <Link> . Vedrai molte proprietà elencate nel <Link> componente che è banale per il nostro tutorial. Tuttavia, puoi esplorare queste proprietà controllando la pagina della documentazione.

Alcune proprietà essenziali che meritano la tua attenzione:

activeClass – La classe in uso quando un elemento è attivo.
to – Informa la destinazione specificata verso cui scorrere.
- La funzionalità to è cruciale perché indica al componente verso quale elemento scorrere.
spy: Consente di selezionare il Link quando lo scorrimento si trova nella posizione di destinazione.
smooth: Anima lo scorrimento.
offset: Scorre di ulteriori px come il padding, ad esempio.
- Puoi anche utilizzare offset per definire una quantità extra di scorrimento per raggiungere un singolo <Section>.
duration: Tempo di scorrimento dell'animazione che può essere un numero o una funzione.

Ecco un'illustrazione delle funzionalità che possono essere utilizzate per ogni componente <Link>. L'unica cosa distintiva tra loro sarà la funzionalità to poiché puntano tutti a diversi <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}

Considera di aggiornare tutti gli elementi nav-items. Dopo che tutti gli elementi sono stati aggiunti con successo, torna al browser e osserva lo scorrimento fluido in tempo reale.

Step 3: Style Active Links

In questo passaggio, utilizzeremo le proprietà CSS per riprogettare il nostro blocco di codice e renderlo elegante. La funzionalità activeClass ti consente di delineare una classe e applicare il componente <Link> quando l'elemento to è attivo. Se il <Link> che stai utilizzando ha la visualizzazione dell'elemento to nella parte superiore della pagina, considera il <Link> come attivo. Fai clic sul <Link> o scorri verso il basso la <Section> manualmente per attivare il <Link>.

Proviamo a testare e vedere come funziona. Apri Chrome DevTools e ispeziona il quinto <Link> come evidenziato di seguito. Fai clic sul <Link> o scorri manualmente la <Section> verso la parte inferiore della pagina, e noterai che la classe attiva viene applicata:

Come passaggio aggiuntivo, crea una classe attiva e sottolinea il link. Quindi, aggiungi questo piccolo blocco di CSS nel file App.css nella directory src directory:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

Dopodiché, aggiorna il browser. Scorri un po' e noterai che il <Link> specificato è ora sottolineato:

Step 4: Add More Functions

Oltre alle proprietà utilizzate sopra, ci sono altre funzionalità come scrollToTop, scrollToBottom, solo per citarne alcune, che puoi utilizzare. Puoi chiamare queste funzioni direttamente e gestire le loro azioni in modo esplicito. Rispetto a queste funzionalità, naturalmente, il logo dell'app in una barra di navigazione ti porterà all'inizio della home page.

Utilizzando la funzione scrollToTop, aggiungi un gestore di clic al nav-logo per riportare l'utente all'inizio della pagina:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Utilizzando la funzione scrollToTop, aggiungi un gestore di clic al nav-logo per scorrere l'utente fino in fondo alla pagina:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Tornando al browser, ora puoi scorrere verso il basso sulla pagina, fare clic sul logo nella barra di navigazione e tornare alla parte superiore della pagina.

Conclusion

Lo scorrimento fluido è tra quelle funzionalità che possono aggiungere molto valore visivo a un'app web. Il pacchetto react-scroll ti consente di sfruttare questa funzionalità senza un sovraccarico significativo.

Come passo successivo nella tua esperienza di apprendimento, dai un'occhiata ad altri tutorial su React e JavaScript che puoi trovare sul nostro blog:

Buon computing!

Preslav Dobrev

Autore · CloudSigma

Preslav Dobrev è un designer creativo presso CloudSigma, con un focus su un'identità aziendale coerente attraverso l'uso di canali di marketing tradizionali e innovativi. È abile nel fondere la visione artistica con il marketing strategico per creare narrazioni di brand di grande impatto.

Scorrimento fluido in azione utilizzando React: un tutorial

Prerequisiti

La configurazione di base: installare react-scroll

Passaggio 1: Clona ed esegui l'app React

Passaggio 2: Installa e configura React-Scroll

Step 3: Style Active Links

Step 4: Add More Functions

Conclusion

Preslav Dobrev

Commenti