One place for hosting & domains

      Cara Mengimplementasikan Guliran Halus di React


      Pengantar

      Bergulir halus adalah pengganti mengklik tombol dan langsung dibawa ke bagian berbeda dari halaman yang sama dan pengguna diarahkan ke sana melalui animasi bergulir. Inilah salah satu fitur antarmuka tak kentara di situs yang menghasilkan perbedaan estetika.

      Dalam artikel ini, Anda akan menggunakan paket react-scroll di npm untuk mengimplementasikan guliran halus.

      Prasyarat

      Anda akan memerlukan yang berikut untuk menyelesaikan tutorial ini:

      Tutorial ini telah diverifikasi dengan Node v13.14.0, npm v6.14.5, react v16.13.1, dan react-scroll v.1.7.16.

      Anda akan membangun aplikasi sederhana dalam tutorial ini, tetapi jika Anda ingin ringkasan cepat tentang cara kerja react-scroll, silakan merujuk langkah-langkah yang telah diringkas ini:

      Instal react-scroll:

      npm i -S react-scroll
      

      Impor paket react-scroll:

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

      Tambahkan komponen tautan. Komponen <Link /> akan mengarahkan ke area tertentu dari aplikasi Anda:

      <Link to="section1">
      

      Mari kita mendalami lebih jauh dan membangun aplikasi React kecil dengan guliran halus.

      Langkah 1 — Instal dan Jalankan Aplikasi React

      Untuk kepraktisan, tutorial ini akan menggunakan proyek React pemula (menggunakan Create React App 2.0) yang memiliki bilah navigasi (atau navbar) di bagian atas bersama lima bagian konten berbeda.

      Saat ini, tautan di bilah navigasi hanya tag jangkar, tetapi Anda akan memperbaruinya sebentar lagi untuk memungkinkan guliran halus.

      Anda dapat menemukan proyek ini di React dengan Guliran Halus. Perhatikan bahwa tautan ini untuk cabang start. Cabang master menyertakan semua perubahan yang telah selesai.

      Tangkapan Layar Repo GitHub

      Untuk mengkloning proyek, Anda dapat menggunakan perintah berikut:

      git clone https://github.com/do-community/React-With-Smooth-Scrolling.git
      

      Jika mengamati direktori src/Components, Anda akan menemukan berkas Navbar.js yang berisi <Navbar> dengan nav-items yang terkait dengan lima <Section> berbeda.

      src/Components/Navbar.js

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

      Kemudian, jika Anda membuka berkas App.js dalam direktori src, Anda akan melihat bahwa <Navbar> disertakan bersama lima <Section> sebenarnya”

      src/Components/App.js

      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="Section 1"
                subtitle={dummyText}
                dark={true}
                id="section1"
              />
              <Section
                title="Section 2"
                subtitle={dummyText}
                dark={false}
                id="section2"
              />
              <Section
                title="Section 3"
                subtitle={dummyText}
                dark={true}
                id="section3"
              />
              <Section
                title="Section 4"
                subtitle={dummyText}
                dark={false}
                id="section4"
              />
              <Section
                title="Section 5"
                subtitle={dummyText}
                dark={true}
                id="section5"
              />
            </div>
          );
        }
      }
      
      export default App;
      

      Masing-masing komponen <Section> menerima title dan subtitle.

      Karena proyek ini menggunakan teks semu di bagian berbeda, untuk mengurangi pengulangan kode, teks ini telah ditambahkan ke berkas DummyText.js diimpor, dan diberikan ke setiap komponen <Section>.

      Untuk menjalankan aplikasi, Anda dapat menggunakan perintah berikut.

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

      Ini akan memulai aplikasi dalam mode pengembangan dan secara otomatis memperbarui aplikasi saat Anda menyimpan berkas. Anda dapat melihatnya dalam peramban di localhost:3000.

      Tangkapan layar aplikasi dalam peramban

      Sekarang saatnya menginstal paket react-scroll dan menambahkan fungsionalitas itu. Anda dapat menemukan informasi paket di npm.

      paket react-scroll di npm

      Untuk menginstal paket, jalankan perintah berikut:

      Selanjutnya, buka cadangan berkas Navbar.js dan tambahkan import untuk dua impor yang diberi nama, Link dan animateScroll.

      src/Components/Navbar.js

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

      Perhatikan bahwa saya telah memberi alias animatedScroll pada scroll agar mudah digunakan.

      Dengan semua impor yang didefinisikan, kini Anda dapat memperbarui nav-items agar menggunakan komponen <Link>. Komponen ini membutuhkan beberapa properti. Anda dapat membaca tentang semuanya di halaman dokumentasi.

      Untuk saat ini, berikan perhatian khusus pada activeClass, to, spy, smooth, offset, dan duration.

      • activeClass - Kelas yang diterapkan bila elemen tercapai.
      • to - Target untuk menggulir.
      • spy - Untuk membuat Link yang dipilih saat scroll berada di posisi yang ditargetkan.
      • smooth - Untuk menganimasikan guliran.
      • offset - Untuk menggulir px tambahan (seperti lapisan).
      • duration - Waktu animasi guliran. Bisa berupa angka atau fungsi.

      Properti to adalah bagian terpenting karena memberi tahu komponen agar menggulir ke elemen mana. Dalam hal ini, properti ini akan menjadi setiap <Section>.

      Dengan properti offset, Anda dapat mendefinisikan jumlah guliran tambahan yang harus dilakukan untuk sampai ke setiap <Section>.

      Berikut ini contoh properti yang Anda akan gunakan untuk setiap komponen <Link>. Satu-satunya perbedaannya adalah properti to, karena mengarahkan setiap titik ke <Section> yang berbeda:

      <Link
          activeClass="active"
          to="section1"
          spy={true}
          smooth={true}
          offset={-70}
          duration={500}
      >
      

      Anda akan perlu memperbarui setiap nav-items sebagaimana mestinya. Dengan menambahkannya, Anda dapat kembali ke peramban (aplikasi Anda akan dimulai ulang secara otomatis) dan melihat guliran halus beraksi.

      Langkah 3 — Menata Gaya Tautan Aktif

      Properti activeClass memungkinkan Anda mendefinisikan kelas yang akan diterapkan ke komponen <Link> bila elemen to aktif. <Link> dianggap aktif jika elemen to ditampilkan dekat bagian atas halaman. Ini dapat dipicu dengan mengklik <Link> itu sendiri atau dengan menggulir bawah ke <Section> secara manual.

      Untuk membuktikannya, saya membuka Chrome DevTools dan memeriksa <Link> kelima seperti yang ditunjukkan di bawah. Bila saya mengklik <Link> itu atau secara manual menggulir ke bagian bawah halaman, saya akan melihat bahwa kelas aktif memang benar diterapkan.

      Tampilan peramban dari aplikasi React

      Untuk memanfaatkannya, Anda dapat membuat kelas aktif dan menambahkan garis bawah pada tautan. Anda dapat menambahkan sedikit CSS ini dalam berkas App.cs di direktori src:

      src/App.css

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

      Sekarang, jika Anda kembali ke peramban dan menggulir sedikit ke sekitar, Anda akan melihat <Link> yang sesuai telah digarisbawahi.

      Tampilan peramban yang diperbarui dari aplikasi React

      Langkah 4 — Memberikan Fungsi Tambahan

      Untuk bagian konten terakhir, paket ini juga menyediakan beberapa fungsi yang dapat dipanggil langsung seperti scrollToTop, scrollToBottom, dll. serta berbagai kejadian yang Anda dapat tangani.

      Merujuk fungsi ini, biasanya, logo aplikasi di bilah navigasi akan membawa pengguna ke halaman beranda atau bagian atas halaman saat ini.

      Sebagai contoh sederhana tentang cara memanggil salah satu fungsi yang disediakan, saya menambahkan pengatur klik ke nav-logo untuk mengembalikan pengguna ke bagian atas halaman, seperti ini:

      src/Components/Navbar.js

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

      Kembali ke peramban, Anda seharusnya dapat menggulir bawah di halaman itu, mengklik logo di bilah navigasi, dan akan dibawa kembali ke bagian atas halaman.

      Kesimpulan

      Guliran halus adalah salah satu fitur yang dapat menambahkan banyak nilai estetika ke aplikasi Anda. Paket react-scroll memungkinkan Anda memanfaatkan fitur ini tanpa pengeluaran tambahan yang signifikan.

      Dalam tutorial ini, Anda menambahkan guliran halus ke aplikasi dan bereksperimen dengan berbagai pengaturan. Jika Anda ingin tahu, luangkan waktu untuk menjelajahi fungsi dan kejadian lainnya yang ditawarkan paket ini.



      Source link