Plynulé posouvání v akci pomocí Reactu: Tutoriál

Preslav Dobrev2022-10-05 · 10 min read

Plynulé posouvání v akci pomocí Reactu: Tutoriál

React je open-source JavaScriptová knihovna používaná pro tvorbu futuristických webových stránek a vylepšování uživatelských rozhraní. Díky své robustnosti, flexibilitě a efektivitě překonala své konkurenční front-endové knihovny a frameworky. React poskytuje vynikající funkce a výjimečné vlastnosti, které usnadňují přizpůsobení a dynamickou animaci.

V seznamu animačních kolekcí pomáhá plynulé posouvání v Reactu zvyšovat interaktivitu webových aplikací a zefektivňovat animace. Plynulé posouvání je funkce, která uživatelům umožňuje přecházet do různých částí stránky pomocí navigačního panelu. To znamená, že místo toho, aby uživatel klikl na tlačítko a byl okamžitě přesunut do jiné části stejné stránky, je k cíli naveden pomocí animace plynulého posunu.

V této příručce vás provedeme kroky k implementaci plynulého posouvání pomocí Reactu.

Začněme!

Požadavky

Chcete-li postupovat podle tohoto návodu, budete potřebovat následující:

Git nainstalovaný ve vašem systému.
- Postupujte podle návodu k instalaci a konfiguraci systému Git na Ubuntu 18.04
Nejnovější verze Node.js musí být nastavena.
- Použijte tento návod k nainstalovat Node.js na Ubuntu 18.04

Základní nastavení: Nainstalujte react-scroll

V tomto průvodci pro začátečníky navrhneme jednoduchou aplikaci pomocí react-scroll. Pokud dobře ovládáte základy Reactu a chcete posunout své znalosti o react-scroll funkcích, podívejte se na tyto shrnuté kroky.

Nejprve nainstalujte react-scroll pomocí následujícího příkazu:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Dále importujte react-scroll balíček:

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

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

Poté vložte <Link /> komponenta, která bude cílit na konkrétní sekci aplikace:

<Link to="section1">

1	<Link to="section1">

Pojďme se posunout dál a navrhnout React aplikaci s plynulým posouváním.

Krok 1: Naklonujte a spusťte React aplikaci

V našem průvodci budeme používat výchozí React projekt obsahující navigační panel nahoře. Tam uvidíte pět jedinečných <sekcí> uspořádaných za sebou.

V současné době jsou odkazy v navigačním panelu kotevní tagy. Brzy je však budeme muset aktualizovat, abychom umožnili plynulé posouvání. Postupujte podle React s plynulým posouváním stránku pro přechod do repozitáře projektu. Je důležité poznamenat, že odkaz je pro start větev. master větev obsahuje všechny dokončené úpravy. Po otevření URL uvidíte repozitář:

Na stránce repozitáře uvidíte Code tlačítko v zelené barvě. STISKNĚTE šipku rozbalovací nabídky:

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

Nyní přejděte do svého git terminálu a použijte následující příkaz ke klonování projektu ve vašem lokálním počítači:

$ 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áři src/Components najdete Navbar.js soubor, který obsahuje <Navbar> s nav-položkami odpovídajícími pěti jedinečným <Section> uspořádanými 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">Sekce 1</li>
            <li className="nav-item">Sekce 2</li>
            <li className="nav-item">Sekce 3</li>
            <li className="nav-item">Sekce 4</li>
            <li className="nav-item">Sekce 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">Sekce 1</li>

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

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

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

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

</ul>

</div>

</nav>

);

}

Dále přejděte do App.js souboru v src adresáři. Tam uvidíte, že <Navbar> je umístěn společně s pěti <Section>y:

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

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

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

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

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

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Sekce 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Sekce 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Sekce 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Sekce 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Ve výchozím nastavení bude každá <Section> komponenta obsahovat titulek a podtitulek.

DRY princip v praxi

Protože pro náš návod používáme výplňový text, přidejme dummyText.js soubor, abyste ušetřili čas a omezili opakování. Použijte nově vytvořený JavaScript soubor, který předáte do každého <Section> elementu.

Nainstalovat React

Použijte následující příkaz ke SPUŠTĚNÍ aplikace:

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

cd React-With-Smooth-Scrolling

npm install

npm start

Spuštěním rpm spustíte aplikaci ve vývojovém režimu. Přejděte na localhost:3000 a ověřte, že aplikace na vašem systému běží:

Nyní, když naše aplikace běží, pojďme dál a nainstalujme react-scroll v dalším kroku.

Krok 2: Instalace a konfigurace React-Scroll

Nejprve musíte navštívit balíček na Node Package Manager ke stažení react-scroll . V době psaní této příručky používáme nejnovější verzi react-scroll , 1.8.7. Ujistěte se, že získáte nejnovější verzi, pokud v budoucnu vyjde aktualizace:

SPUSŤTE následující příkaz pro instalaci react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Poté přejděte do Navbar.js souboru a importujte Link a animateScroll z react-scroll. Pro jednoduchost a snadné použití ponechme animateScroll jako scroll:

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

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

Poté aktualizujte nav-položky tak, aby používaly <Link> komponentu. Uvidíte spoustu vlastností uvedených v <Link> komponentě, které jsou pro náš návod nepodstatné. Tyto vlastnosti však můžete prozkoumat na stránce s dokumentací.

Některé klíčové vlastnosti, které si zaslouží vaši pozornost:

activeClass – Třída použitá v případě, že je prvek aktivní.
to – Informuje o určeném cíli, na který se má posunout.
- Vlastnost to je klíčová, protože komponentě určuje, na který prvek se má posunout.
spy: Slouží k výběru Link když je posun na cílové pozici.
smooth: Animuje posun.
offset: Posune o dalších px například jako padding.
- Můžete také použít offset pro definování dodatečné hodnoty posunu pro přechod na konkrétní <Section>.
duration: Doba animace posunu, která může být číslo nebo funkce.

Zde je ukázka vlastností, které lze použít pro každou <Link> komponentu. Jedinou odlišností mezi nimi bude vlastnost to , protože všechny odkazují na různé <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}

Zvažte aktualizaci všech navigačních-položek. Po úspěšném přidání všech položek se vraťte do prohlížeče a prohlédněte si plynulé posouvání v reálném čase.

Krok 3: Stylování aktivních odkazů

V tomto kroku budeme používat CSS vlastnosti pro redesign našeho bloku kódu, aby vypadal stylově. activeClass funkce vám umožňuje definovat třídu a aplikovat <Link> komponentu, když je to element aktivní. Pokud <Link>, který používáte, má to element zobrazený v horní části stránky, považujte <Link> za aktivní. Klikněte na <Link> nebo sjeďte dolů na <Section> ručně, abyste aktivovali <Link>.

Zkusme to otestovat a podívat se, jak to funguje. Otevřete Chrome DevTools a prozkoumejte pátý <Link> jak je zvýrazněno níže. Klikněte na <Link> nebo ručně posuňte <Sekce> do dolní části stránky a uvidíte, že se aplikuje aktivní třída:

Jako další krok vytvořte aktivní třídu a podtrhněte odkaz. Poté přidejte tento malý blok CSS v App.css souboru v src adresáři:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

Poté obnovte prohlížeč. Trochu posuňte stránku a všimnete si, že specifikovaný <Link> je nyní podtržený:

Krok 4: Přidání dalších funkcí

Kromě výše použitých vlastností existují i další funkce jako scrollToTop, scrollToBottom, abychom jmenovali alespoň některé, které můžete použít. Tyto funkce můžete volat přímo a explicitně spravovat jejich akce. Pokud jde o tyto funkce, logo aplikace v navigačním panelu vás samozřejmě přenese na začátek domovské stránky.

Pomocí scrollToTop funkce přidejte obsluhu kliknutí k nav-logu pro posunutí uživatele zpět na začátek stránky:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Pomocí scrollToTop funkce přidejte obsluhu kliknutí k nav-logo pro posunutí uživatele na spodní část stránky:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Zpět v prohlížeči nyní můžete na stránce sjet dolů, kliknout na logo v navigačním panelu a vrátit se do horní části stránky.

Závěr

Plynulé posouvání patří mezi funkce, které mohou webové aplikaci dodat velkou vizuální hodnotu. Knihovna react-scroll balíček vám může umožnit využít tuto funkci bez obrovské režie.

Jako další krok ve vašem učení se podívejte na další návody na React a JavaScript, které najdete na našem blogu:

Příjemnou práci!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreativní designér ve společnosti CloudSigma, který se zaměřuje na konzistentní firemní identitu prostřednictvím tradičních i inovativních marketingových kanálů. Je zdatný v propojování umělecké vize se strategickým marketingem za účelem vytváření působivých příběhů značky.

Plynulé posouvání v akci pomocí Reactu: Tutoriál

Požadavky

Základní nastavení: Nainstalujte react-scroll

Krok 1: Naklonujte a spusťte React aplikaci

Krok 2: Instalace a konfigurace React-Scroll

Krok 3: Stylování aktivních odkazů

Krok 4: Přidání dalších funkcí

Závěr

Preslav Dobrev

Komentáře