Plynulé posúvanie v akcii s použitím Reactu: Tutoriál

Preslav Dobrev2022-10-05 · 10 min read

Plynulé posúvanie v akcii s použitím Reactu: Tutoriál

React je open-source JavaScript knižnica používaná na vytváranie futuristických dizajnov webových stránok a zlepšovanie používateľských rozhraní. Vďaka svojej robustnosti, flexibilite a efektívnosti prekonala svoje konkurenčné front-end knižnice a frameworky. React poskytuje vynikajúce funkcie a výnimočné vlastnosti, ktoré uľahčujú prispôsobenie a dynamickú animáciu.

V zozname kolekcií animácií pomáha plynulé posúvanie (smooth scrolling) v Reacte zvyšovať interaktivitu webových aplikácií a zefektívňovať animácie. Plynulé posúvanie je funkcia, ktorá používateľom umožňuje prechádzať do rôznych sekcií stránky pomocou navigačného panela. To znamená, že namiesto stlačenia tlačidla a okamžitého presunu na inú časť tej istej stránky je používateľ presmerovaný na cieľ pomocou animácie posúvania.

V tomto návode vás prevedieme krokmi implementácie plynulého posúvania pomocou Reactu.

Začnime!

Požiadavky

Na sledovanie tohto návodu budete potrebovať nasledovné:

Git nainštalovaný vo vašom systéme.
- Postupujte podľa tohto návodu na inštaláciu a konfiguráciu Git na Ubuntu 18.04
Najnovšia verzia Node.js musí byť nastavená.
- Použite tento návod na inštaláciu Node.js na Ubuntu 18.04

Základné nastavenie: Inštalácia react-scroll

V tomto návode pre začiatočníkov navrhneme jednoduchú aplikáciu pomocou react-scroll. Ak ovládate základy Reactu a tešíte sa na zvýšenie úrovne svojich znalostí o funkciách react-scroll, pozrite si tieto zhrnuté kroky.

Najprv nainštalujte react-scroll pomocou nasledujúceho príkazu:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Ďalej importujte react-scroll balík:

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

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

Potom vložte komponent <Link /> , ktorý bude odkazovať na konkrétnu sekciu aplikácie:

<Link to="section1">

1	<Link to="section1">

Poďme ďalej a navrhnime React aplikáciu s plynulým posúvaním.

Krok 1: Naklonovanie a spustenie React aplikácie

V našom návode budeme používať štartovací React projekt , ktorý obsahuje navigačný panel v hornej časti. Tam uvidíte päť jedinečných <sections> usporiadaných za sebou.

V súčasnosti sú odkazy v navigačnom paneli kotvy (anchor tags). Čoskoro ich však budeme musieť aktualizovať, aby sme povolili plynulé posúvanie. Prejdite na stránku React With Smooth Scrolling a prejdite do repozitára projektu. Je dôležité poznamenať, že odkaz je pre vetvu start. Vetva master obsahuje všetky dokončené zmeny. Po otvorení URL adresy uvidíte repozitár:

Na stránke repozitára uvidíte zelené tlačidlo Code. STLAČTE šípku rozbaľovacej ponuky:

Po kliknutí na šípku uvidíte HTTP odkaz:

Teraz prejdite do svojho git terminálu a pomocou nasledujúceho príkazu naklonujte projekt do svojho lokálneho počítača:

$ 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

V adresári src/Components nájdete súbor Navbar.js , ktorý obsahuje <Navbar> s nav-items zodpovedajúcimi piatim jedinečným <Section> usporiadaným za sebou:

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">Sekcia 1</li>

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

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

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

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

</ul>

</div>

</nav>

);

}

Ďalej prejdite do súboru App.js v src adresári. Tam uvidíte, že <Navbar> je umiestnený spolu s piatimi <Section>mi:

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="Sekcia 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

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

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

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

            <Section
            title="Sekcia 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="Sekcia 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Sekcia 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Sekcia 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Sekcia 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

V predvolenom nastavení každý <Section> komponent bude obsahovať title a subtitle.

DRY princíp v praxi

Keďže pre náš návod používame fiktívny text, pridajme dummyText.js súbor, aby sme ušetrili čas a obmedzili opakovanie. Použite novovytvorený JavaScript súbor na odovzdanie do každého <Section> elementu.

Nainštalujte React

Použite nasledujúci príkaz na SPUSTENIE aplikácie:

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

cd React-With-Smooth-Scrolling

npm install

npm start

Spustením rpm sa vaša aplikácia spustí vo vývojovom režime. Prejdite na localhost:3000 a overte, či aplikácia beží na vašom systéme:

Teraz, keď naša aplikácia beží, poďme ďalej a nainštalujme react-scroll v nasledujúcom kroku.

Krok 2: Inštalácia a konfigurácia React-Scroll

Najprv musíte navštíviť balík v Node Package Manager na stiahnutie react-scroll . V čase písania tohto návodu používame najnovšiu verziu react-scroll , 1.8.7. Uistite sa, že získate najnovšiu verziu, ak v budúcnosti dôjde k aktualizácii:

SPUSTITE nasledujúci príkaz na inštaláciu react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Potom prejdite do súboru Navbar.js a importujte Link a animateScroll z react-scroll. Pre jednoduchosť a uľahčenie používania ponechajme animateScroll ako scroll:

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

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

Potom aktualizujte nav-položky tak, aby používali <Link> komponent. Uvidíte množstvo vlastností uvedených v <Link> komponent, ktorý je pre náš návod nepodstatný. Tieto vlastnosti však môžete preskúmať v stránke s dokumentáciou.

Niekoľko dôležitých vlastností, ktoré si zaslúžia vašu pozornosť:

activeClass – Trieda, ktorá sa použije, keď je prvok aktívny.
to – Informuje o určenom cieli, na ktorý sa má prejsť.
- Vlastnosť to je kľúčová, pretože komponentu hovorí, na ktorý prvok má rolovať.
spy: Slúži na výber Link keď je rolovanie na cieľovej pozícii.
smooth: Animuje rolovanie.
offset: Roluje o dodatočných px napríklad ako odsadenie (padding).
- Môžete tiež použiť offset na definovanie dodatočnej vzdialenosti rolovania, aby ste sa dostali k jednotlivému <Section>.
duration: Čas animácie rolovania, ktorý môže byť číslo alebo funkcia.

Tu je ukážka vlastností, ktoré možno použiť pre každý komponent <Link>. Jedinou odlišnou vecou medzi nimi bude vlastnosť to, keďže všetky ukazujú na rôzne <Section>y:

<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}

Zvážte aktualizáciu všetkých položiek nav-položiek. Po úspešnom pridaní všetkých položiek sa vráťte do prehliadača a pozrite si plynulé rolovanie naživo.

Krok 3: Štýlovanie aktívnych odkazov

V tomto kroku použijeme vlastnosti CSS na úpravu dizajnu nášho bloku kódu, aby vyzeral štýlovo. Vlastnosť activeClass vám umožňuje definovať triedu a použiť ju na komponent <Link>, keď je prvok to aktívny. Ak má používaný <Link> zobrazený prvok to v hornej časti stránky, považujte <Link> za aktívny. Kliknite na <Link> alebo prejdite nadol na <Section> manuálne, aby ste aktivovali <Link>.

Skúsme to otestovať a pozrieť sa, ako to funguje. Otvorte Chrome DevTools a preskúmajte piaty <Link> ako je zvýraznené nižšie. Kliknite na <Link> alebo manuálne posuňte <Section> do spodnej časti stránky a uvidíte, že sa aplikuje aktívna trieda:

Ako dodatočný krok vytvorte aktívnu triedu a podčiarknite odkaz. Potom pridajte tento malý blok CSS do súboru App.css v adresári src directory:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

Potom obnovte prehliadač. Trochu rolujte a všimnete si, že určený <Link> je teraz podčiarknutý:

Krok 4: Pridanie ďalších funkcií

Okrem vyššie použitých vlastností existujú aj ďalšie funkcie ako scrollToTop, scrollToBottom, ktoré môžete použiť. Tieto funkcie môžete volať priamo a explicitne riadiť ich akcie. Pokiaľ ide o tieto funkcie, logo aplikácie v navigačnom paneli vás prirodzene prenesie na začiatok domovskej stránky.

Pomocou funkcie scrollToTop pridajte obsluhu kliknutia (click handler) na nav-logo na posunutie používateľa späť na začiatok stránky:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Pomocou funkcie scrollToTop pridajte obsluhu kliknutia (click handler) na nav-logo na posunutie používateľa na spodok stránky:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Keď sa vrátite do prehliadača, môžete teraz prejsť na stránke nadol, kliknúť na logo v navigačnom paneli a budete vrátení do hornej časti stránky.

Záver

Plynulé rolovanie patrí medzi funkcie, ktoré môžu webovej aplikácii pridať veľkú vizuálnu hodnotu. Balík react-scroll vám umožní využiť túto funkciu bez výraznej réžie.

Ako ďalší krok vo vašom vzdelávaní sa pozrite na ďalšie návody na React a JavaScript, ktoré nájdete na našom blogu:

Príjemnú prácu s počítačom!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreatívny dizajnér v spoločnosti CloudSigma, ktorý sa zameriava na konzistentnú firemnú identitu prostredníctvom tradičných a inovatívnych marketingových kanálov. Dokáže brilantne spájať umeleckú víziu so strategickým marketingom, čím vytvára pôsobivé príbehy značky.

Plynulé posúvanie v akcii s použitím Reactu: Tutoriál

Požiadavky

Základné nastavenie: Inštalácia react-scroll

Krok 1: Naklonovanie a spustenie React aplikácie

Krok 2: Inštalácia a konfigurácia React-Scroll

Krok 3: Štýlovanie aktívnych odkazov

Krok 4: Pridanie ďalších funkcií

Záver

Preslav Dobrev

Komentáre