React ile Pürüzsüz Kaydırma: Bir Eğitim

Preslav Dobrev2022-10-05 · 9 min read

React fütüristik web sitesi tasarımları oluşturmak ve kullanıcı arayüzlerini geliştirmek için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Sağlamlığı, esnekliği ve verimliliği sayesinde, rakip ön uç kütüphanelerini ve çerçevelerini geride bırakmıştır. React, özelleştirmeyi ve dinamik animasyonu kolaylaştıran mükemmel özellikler ve göze çarpan işlevsellikler sunar.

Animasyon koleksiyonları listesinde, React'te pürüzsüz kaydırma (smooth scrolling), web uygulaması etkileşimini artırmaya ve animasyonu kolaylaştırmaya yardımcı olur. Pürüzsüz kaydırma, kullanıcıların bir navigasyon çubuğu kullanarak sayfanın farklı bölümlerine gitmesini sağlayan bir özelliktir. Bu, kullanıcının bir düğmeye basıp benzer bir sayfanın farklı bir bölümüne anında çekilmesi yerine, bir kaydırma animasyonu aracılığıyla bir hedefe yönlendirilmesi anlamına gelir.

Bu kılavuzda, React kullanarak pürüzsüz kaydırmayı uygulama adımlarında size yol göstereceğiz.

Hadi Başlayalım!

Önkoşullar

Bu öğreticiyi takip etmek için aşağıdakilere ihtiyacınız olacak:

Git sisteminizde kurulu olmalıdır.
- Takip ederek Ubuntu 18.04 üzerinde Git kurulumunu yapın ve yapılandırın
En son sürümü Node.js kurulmuş olmalıdır.
- Bu öğreticiyi kullanarak Ubuntu 18.04 üzerine Node.js kurun

Temel Kurulum: react-scroll Kurulumu

Bu başlangıç dostu kılavuzda, react-scroll kullanarak basit bir uygulama tasarlayacağız. Eğer React temelleri konusunda rahatsanız ve react-scroll fonksiyonları üzerindeki bilginizi bir üst seviyeye taşımak istiyorsanız, bu özetlenmiş adımlara başvurun.

İlk olarak, aşağıdaki komutu kullanarak react-scroll kurulumunu yapın:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Ardından, react-scroll paketini içe aktarın:

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

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

Ondan sonra, uygulamanın belirli bir bölümünü hedefleyecek olan <Link /> bileşenini ekleyin:

<Link to="section1">

1	<Link to="section1">

Hadi devam edelim ve pürüzsüz kaydırma özelliğine sahip bir React uygulaması tasarlayalım.

Adım 1: React Uygulamasını Klonlayın ve Çalıştırın

Kılavuzumuzda, üst kısmında bir navigasyon çubuğu içeren başlangıç React projesini kullanacağız. Orada, ardışık olarak düzenlenmiş beş benzersiz <sections> göreceksiniz.

Şu anda navigasyon çubuğundaki bağlantılar çapa (anchor) etiketleridir. Ancak, pürüzsüz kaydırmayı etkinleştirmek için bunları yakında güncellememiz gerekecek. Proje deposuna gitmek için React With Smooth Scrolling sayfasını takip edin. Bağlantının start dalı (branch) için olduğunu belirtmek önemlidir. master dalı, tamamlanmış tüm değişiklikleri içerir. URL'yi açtığınızda depoyu göreceksiniz:

Depo sayfasında, yeşil renkli Code düğmesini göreceksiniz. BASIN açılır menü okuna:

Ok işaretine tıkladığınızda, HTTP bağlantısını göreceksiniz:

Şimdi git terminalinize gidin ve projeyi yerel makinenize klonlamak için aşağıdaki komutu kullanın:

$ 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 dizinde: src/Components dizini altında, bir Navbar.js dosyası bulacaksınız. Bu dosya, ardışık olarak düzenlenmiş beş benzersiz <Navbar> bileşenini ve nav-items değerlerine karşılık gelen beş benzersiz <Section> bileşenini içerir:

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">Bölüm 1</li>

<li className="nav-item">Bölüm 2</li>

<li className="nav-item">Bölüm 3</li>

<li className="nav-item">Bölüm 4</li>

<li className="nav-item">Bölüm 5</li>

</ul>

</div>

</nav>

);

}

Ardından, App.js dosyasına gidin. src dizininde, <Navbar> bileşeninin beş <Section> ile birlikte yerleştirildiğini göreceksiniz:

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="Bölüm 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="Bölüm 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="Bölüm 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="Bölüm 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="Bölüm 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="Bölüm 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Bölüm 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Bölüm 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Bölüm 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Bölüm 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Varsayılan olarak, her <Section> bileşeni bir title ve subtitle içerecektir..

DRY İlkesi İş Başında

Eğitimimiz için sahte metin kullandığımızdan, zamandan tasarruf etmek ve tekrarları azaltmak için bir dummyText.js dosyası ekleyelim. Yeni oluşturulan JavaScript dosyasını her <Section> öğesine aktarmak için kullanın.

React'i Kurun

Uygulamayı ÇALIŞTIRMAK için aşağıdaki komutu kullanın:

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

cd React-With-Smooth-Scrolling

npm install

npm start

Running the rpm komutunu çalıştırmak, uygulamanızı geliştirme modunda başlatacaktır. localhost:3000 adresine gidin ve uygulamanın sisteminizde çalıştığını doğrulayın:

Artık uygulamamız çalıştığına göre, bir sonraki adımda react-scroll kurulumuna geçelim.

Adım 2: React-Scroll Kurulumu ve Yapılandırması

İlk olarak, Node Paket Yöneticisi'ndeki paketi ziyaret ederek react-scroll indirmelisiniz. Bu kılavuzun yazıldığı sırada, react-scroll , 1.8.7 paketinin en son sürümünü kullanıyoruz. Gelecekte bir güncelleme olursa en son sürümü aldığınızdan emin olun:

Şu komutu ÇALIŞTIRIN: yüklemek için react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Bundan sonra, Navbar.js dosyasına gidin ve Link ve animateScroll bileşenlerini react-scroll kütüphanesinden içe aktarın. Basitlik ve kullanım kolaylığı açısından, animateScroll bileşenini scroll olarak tutalım:

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

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

Bundan sonra, nav- öğelerini to use the <Link> bileşenini kullanacak şekilde güncelleyin. bileşeni için listelenen birçok özellik göreceksiniz: <Link> bileşeni eğitimimiz için önemsizdir. Ancak, bu özellikleri şuradan kontrol ederek keşfedebilirsiniz: dokümantasyon sayfası.

Dikkatinizi çekmesi gereken bazı temel özellikler:

activeClass – Bir öğe aktif olduğunda kullanılan sınıf.
to – Belirtilen hedefe kaydırılmasını bildirir.
- The to özelliği çok önemlidir çünkü bileşeni hangi öğeye kaydıracağı konusunda yönlendirir.
spy: Kaydırma hedef konumdayken Link bileşenini seçmeyi işaret eder.
smooth: Kaydırmayı hareketlendirir.
offset: Örneğin dolgu (padding) gibi ek px kaydırır.
- Ayrıca, offset özelliğini, tek bir <Section>.
duration: Bir sayı veya fonksiyon olabilen animasyonlu kaydırma süresi.

İşte her bir <Link> bileşeni için kullanılabilecek özelliklerin bir gösterimi. Aralarındaki tek ayırt edici şey, hepsi farklı to özelliklerini işaret ettiği için <Section> yapılarını işaret eder:

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

Tüm nav- öğelerini güncellemeyi düşünün. Tüm öğeler başarıyla eklendikten sonra tarayıcıya dönün ve canlı pürüzsüz kaydırmayı görün.

Adım 3: Aktif Bağlantıları Stilize Edin

Bu adımda, kod bloğumuzu yeniden tasarlamak ve şık görünmesini sağlamak için CSS özelliklerini kullanacağız. activeClass özelliği, bir sınıf tanımlamanıza ve <Link> bileşenini, to öğesi aktif olduğunda uygulamanıza olanak tanır. Kullandığınız <Link> bileşeni, sayfanın üst kısmında to öğesi görünümüne sahipse, <Link> bileşenini aktif olarak kabul edin. <Link> bileşenine tıklayın veya <Section> öğesini manuel olarak aşağı kaydırarak <Link>.

Test etmeyi deneyelim ve nasıl çalıştığını görelim. Chrome DevTools aracını açın ve aşağıda vurgulandığı gibi beşinci <Link> bileşenini inceleyin. <Link> bileşenine tıklayın veya <Section> öğesini sayfanın alt kısmına manuel olarak kaydırın; aktif sınıfın uygulandığını göreceksiniz:

Ek bir adım olarak, aktif bir sınıf oluşturun ve bağlantının altını çizin. Ardından, bu küçük CSS kod bloğunu App.css dosyasına, src dizini altına ekleyin:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

Bundan sonra tarayıcınızı yenileyin. Biraz kaydırdığınızda, belirtilen <Link> bileşeninin artık altı çizili olduğunu fark edeceksiniz:

Adım 4: Daha Fazla Fonksiyon Ekleyin

Yukarıda kullanılan özelliklere ek olarak, kullanabileceğiniz scrollToTop, scrollToBottom, gibi başka işlevler de vardır. Bu fonksiyonları doğrudan çağırabilir ve eylemlerini açıkça yönetebilirsiniz. Bu işlevlerle ilgili olarak, doğal olarak, bir navigasyon çubuğundaki uygulama logosu sizi ana sayfanın en üstüne götürecektir.

Using the scrollToTop fonksiyonunu kullanarak, kullanıcıyı sayfanın en üstüne geri kaydırmak için nav-logo bileşenine bir tıklama işleyicisi ekleyin:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Using the scrollToTop fonksiyonunu kullanarak, kullanıcıyı sayfanın en altına kaydırmak için nav-logo bileşenine bir tıklama işleyicisi ekleyin:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Tarayıcıya geri döndüğünüzde, artık sayfada aşağı kaydırabilir, navigasyon çubuğundaki logoya tıklayabilir ve sayfanın üst kısmına geri dönebilirsiniz.

Sonuç

Pürüzsüz kaydırma, bir web uygulamasına bol miktarda görsel değer katabilecek işlevler arasındadır. react-scroll paketi, bu özellikten büyük bir yük altına girmeden yararlanmanızı sağlayabilir.

Öğrenme deneyiminizin bir sonraki adımı olarak, bulabileceğiniz daha fazla React ve JavaScript eğitimine göz atın: bizim blogumuzda:

Keyifli Kodlamalar!

Preslav Dobrev

Yazar · CloudSigma

Preslav Dobrev, CloudSigma'da Kreatif Tasarımcı olarak görev yapmakta olup geleneksel ve yenilikçi pazarlama kanallarını kullanarak tutarlı bir kurumsal kimlik oluşturmaya odaklanmaktadır. Sanatsal vizyonu stratejik pazarlamayla harmanlayarak etkili marka anlatıları oluşturma konusunda oldukça yeteneklidir.

React ile Pürüzsüz Kaydırma: Bir Eğitim

Önkoşullar

Temel Kurulum: react-scroll Kurulumu

Adım 1: React Uygulamasını Klonlayın ve Çalıştırın

Adım 2: React-Scroll Kurulumu ve Yapılandırması

Adım 3: Aktif Bağlantıları Stilize Edin

Adım 4: Daha Fazla Fonksiyon Ekleyin

Sonuç

Preslav Dobrev

Yorumlar