Glatko pomicanje na djelu uz pomoć Reacta: Vodič

Preslav Dobrev2022-10-05 · 10 min read

Glatko pomicanje na djelu uz pomoć Reacta: Vodič

React je open-source JavaScript knjižnica koja se koristi za izgradnju futurističkih dizajna web stranica i poboljšanje korisničkih sučelja. Zbog svoje robusnosti, fleksibilnosti i učinkovitosti, nadmašila je svoje konkurentske front-end knjižnice i okvire. React pruža izvrsne značajke i istaknute funkcionalnosti koje olakšavaju prilagodbu i dinamičnu animaciju.

U popisu kolekcija animacija, glatko pomicanje u Reactu pomaže u povećanju interaktivnosti web aplikacije i pojednostavljivanju animacije. Glatko pomicanje je značajka koja korisnicima omogućuje odlazak na različite odjeljke stranice pomoću navigacijske trake. To znači da, umjesto da pritisne gumb i odmah bude prebačen na drugi odjeljak slične stranice, korisnik se usmjerava do cilja putem animacije pomicanja.

U ovom vodiču ćemo vas provesti kroz korake implementacije glatkog pomicanja pomoću Reacta.

Započnimo!

Preduvjeti

Kako biste pratili ovaj vodič, trebat će vam sljedeće:

Git instaliran na vašem sustavu.
- Pratite korake za instalaciju i konfiguraciju Gita na Ubuntu 18.04
Najnovija verzija Node.js mora biti postavljena.
- Koristite ovaj vodič za instalaciju Node.js-a na Ubuntu 18.04

Osnovno postavljanje: Instalirajte react-scroll

U ovom vodiču prilagođenom početnicima, dizajnirat ćemo jednostavnu aplikaciju koristeći react-scroll Ako ste upoznati s osnovama Reacta i radujete se nadogradnji svog znanja o react-scroll funkcijama, pogledajte ove sažete korake.

Prvo, instalirajte react-scroll pomoću sljedeće naredbe:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Zatim uvezite react-scroll paket:

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

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

Nakon toga umetnite <Link /> komponentu koja će ciljati određeni odjeljak aplikacije:

<Link to="section1">

1	<Link to="section1">

Krenimo dalje i dizajnirajmo React aplikaciju s glatkim pomicanjem.

Korak 1: Klonirajte i pokrenite React aplikaciju

U našem vodiču koristit ćemo početni React projekt koji uključuje navigacijsku traku na vrhu. Tamo ćete vidjeti pet jedinstvenih <sections> poredanih uzastopno.

Trenutno su poveznice u navigacijskoj traci sidrene oznake. Međutim, uskoro ćemo ih morati ažurirati kako bismo omogućili glatko pomicanje. Pratite stranicu React With Smooth Scrolling kako biste otišli na repozitorij projekta. Važno je napomenuti da je poveznica za start granu. master grana uključuje sve dovršene izmjene. Otvaranjem URL-a vidjet ćete repozitorij:

Na stranici repozitorija vidjet ćete gumb Code u zelenoj boji. PRITISNITE padajuću strelicu:

Klikom na strelicu vidjet ćete HTTP poveznicu:

Sada idite u svoj git terminal i upotrijebite sljedeću naredbu za kloniranje projekta na svoje lokalno računalo:

$ 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

U direktoriju src/Components pronaći ćete datoteku Navbar.js koja uključuje <Navbar> s nav-items koji odgovaraju pet jedinstvenih <Section> poredanih uzastopno:

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

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

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

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

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

</ul>

</div>

</nav>

);

}

Zatim idite na App.js datoteku u src direktoriju. Tamo ćete vidjeti da je <Navbar> postavljen zajedno s pet <Section>a:

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

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

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

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

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

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Sekcija 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Sekcija 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Sekcija 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Sekcija 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Prema zadanim postavkama, svaka <Section> komponenta će uključivati title i subtitle.

DRY princip na djelu

Budući da koristimo lažni tekst za naš vodič, dodajmo dummyText.js datoteku kako bismo uštedjeli vrijeme i smanjili ponavljanje. Upotrijebite novostvorenu JavaScript datoteku za prosljeđivanje u svaki <Section> element.

Instalirajte React

Upotrijebite sljedeću naredbu za POKRETANJE aplikacije:

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

cd React-With-Smooth-Scrolling

npm install

npm start

Pokretanje rpm će pokrenuti vašu aplikaciju u razvojnom načinu rada. Otvorite localhost:3000 i provjerite radi li aplikacija na vašem sustavu:

Sada kada naša aplikacija radi, krenimo dalje i instalirajmo react-scroll u sljedećem koraku.

Korak 2: Instalirajte i konfigurirajte React-Scroll

Prvo morate posjetiti paket na Node Package Manageru kako biste preuzeli react-scroll . U vrijeme pisanja ovog vodiča koristimo najnovije izdanje react-scroll , 1.8.7. Svakako nabavite najnoviju verziju ako u budućnosti bude ažuriranja:

POKRENITE sljedeću naredbu za instalaciju react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Nakon toga idite na Navbar.js datoteku i uvezite Link i animateScroll iz react-scroll. Radi jednostavnosti i lakšeg korištenja, zadržimo animateScroll kao scroll:

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

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

Nakon toga ažurirajte nav-stavke kako biste koristili <Link> komponentu. Vidjet ćete mnogo svojstava navedenih u <Link> komponenta koja je trivijalna za naš vodič. Međutim, ova svojstva možete istražiti provjerom stranice s dokumentacijom.

Neka bitna svojstva koja zaslužuju vašu pažnju:

activeClass – Klasa koja se koristi kada je element aktivan.
to – Obavještava navedeni cilj na koji treba skrolati.
- Značajka to je ključna jer usmjerava komponentu na koji element treba skrolati.
spy: Označava odabir Link kada je skrolanje na ciljnoj poziciji.
smooth: Animira skrolanje.
offset: Skrola dodatnih px poput paddinga, na primjer.
- Također možete koristiti offset za definiranje dodatne količine skrolanja kako biste došli do pojedinačnog <Section>.
duration: Vrijeme animacije skrolanja koje može biti broj ili funkcija.

Evo ilustracije značajki koje se mogu koristiti za svaku <Link> komponentu. Jedina prepoznatljiva stvar među njima bit će značajka to jer sve upućuju na različite <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}

Razmislite o ažuriranju svih nav-stavki. Nakon što su sve stavke uspješno dodane, vratite se u preglednik i pogledajte glatko skrolanje uživo.

Step 3: Style Active Links

U ovom koraku koristit ćemo CSS svojstva kako bismo redizajnirali naš blok koda i učinili ga elegantnim. Značajka activeClass omogućuje vam da definirate klasu i primijenite je na <Link> komponentu kada je to element aktivan. Ako <Link> koji koristite ima prikaz to elementa na vrhu stranice, smatrajte <Link> aktivnim. Kliknite na <Link> ili skrolajte dolje niz <Section> ručno kako biste aktivirali <Link>.

Pokušajmo testirati i vidjeti kako radi. Otvorite Chrome DevTools i pregledajte peti <Link> kao što je istaknuto u nastavku. Kliknite na <Link> ili ručno skrolajte <Section> na donji dio stranice i primijetit ćete da se primjenjuje aktivna klasa:

Kao dodatni korak, kreirajte aktivnu klasu i podcrtajte poveznicu. Zatim dodajte ovaj mali blok CSS koda u App.css datoteku u src direktoriju:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

Nakon toga osvježite svoj preglednik. Skrolajte malo uokolo i primijetit ćete da je navedeni <Link> sada podcrtan:

Korak 4: Dodajte više funkcija

Uz gore korištena svojstva, postoje i druge funkcionalnosti poput scrollToTop, scrollToBottom, da spomenemo samo neke, koje možete koristiti. Možete pozvati ove funkcije izravno i eksplicitno upravljati njihovim radnjama. S obzirom na ove funkcionalnosti, prirodno je da će vas logotip aplikacije u navigacijskoj traci odvesti na vrh početne stranice.

Koristeći funkciju scrollToTop, dodajte rukovatelj klikom na nav-logo kako biste korisnika vratili na vrh stranice:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Koristeći funkciju scrollToTop, dodajte rukovatelj klikom na nav-logo kako biste korisnika skrolali na dno stranice:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Natrag u pregledniku, sada možete skrolati prema dolje na stranici, kliknuti logotip u navigacijskoj traci i vratiti se na gornji dio stranice.

Zaključak

Glatko skrolanje je među onim funkcionalnostima koje mogu dodati obilje vizualne vrijednosti web aplikaciji. Paket react-scroll može vam omogućiti da iskoristite ovu značajku bez velikog opterećenja.

Kao sljedeći korak u vašem iskustvu učenja, pogledajte više React i JavaScript vodiča koje možete pronaći na našem blogu:

Sretno programiranje!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreativni dizajner u CloudSigma, usredotočen na dosljedan poslovni identitet korištenjem tradicionalnih i inovativnih marketinških kanala. Vješt je u spajanju umjetničke vizije sa strateškim marketingom kako bi stvorio dojmljive brendirane priče.

Glatko pomicanje na djelu uz pomoć Reacta: Vodič

Preduvjeti

Osnovno postavljanje: Instalirajte react-scroll

Korak 1: Klonirajte i pokrenite React aplikaciju

Korak 2: Instalirajte i konfigurirajte React-Scroll

Step 3: Style Active Links

Korak 4: Dodajte više funkcija

Zaključak

Preslav Dobrev

Komentari