التمرير السلس قيد التطبيق باستخدام React: دليل تعليمي

Preslav Dobrev2022-10-05 · 10 min read

التمرير السلس قيد التطبيق باستخدام React: دليل تعليمي

React هي مكتبة JavaScript مفتوحة المصدر تُستخدم لبناء تصميمات مواقع ويب مستقبلية وتحسين واجهات المستخدم. ونظرًا لقوتها ومرونتها وكفاءتها، فقد تفوقت على المكتبات وإطارات العمل المنافسة لها في الواجهة الأمامية. توفر React ميزات ممتازة ووظائف بارزة تسهل التخصيص والرسوم المتحركة الديناميكية.

في قائمة مجموعات الرسوم المتحركة، يساعد التمرير السلس في React على زيادة تفاعلية تطبيقات الويب وتبسيط الرسوم المتحركة. التمرير السلس هي ميزة تتيح للمستخدمين الانتقال إلى أقسام مختلفة من الصفحة باستخدام شريط التنقل. وهذا يعني أنه بدلاً من الضغط على زر والانتقال فورًا إلى قسم آخر في صفحة مماثلة، يتم توجيه المستخدم إلى الهدف من خلال حركة تمرير.

في هذا الدليل، سنقوم بـ إرشادك عبر خطوات تنفيذ التمرير السلس باستخدام React.

لنبدأ!

المتطلبات الأساسية

لمتابعة هذا البرنامج التعليمي، ستحتاج إلى ما يلي:

Git مثبتًا على نظامك.
- تابع معنا لـ تثبيت وإعداد Git على Ubuntu 18.04
أحدث إصدار من Node.js يجب أن يكون مثبتًا.
- استخدم هذا البرنامج التعليمي لـ تثبيت Node.js على Ubuntu 18.04

الإعداد الأساسي: تثبيت react-scroll

في هذا الدليل الموجه للمبتدئين، سنقوم بتصميم تطبيق بسيط باستخدام react-scroll. إذا كنت معتادًا على أساسيات React وتتطلع إلى ترقية معرفتك بـ react-scroll ، فارجع إلى هذه الخطوات الملخصة.

أولاً، قم بتثبيت react-scroll باستخدام الأمر التالي:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

بعد ذلك، قم باستيراد حزمة react-scroll :

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

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

بعد ذلك، أدخل مكون <Link /> الذي سيستهدف قسمًا معينًا من التطبيق:

<Link to="section1">

1	<Link to="section1">

دعنا ننتقل للأمام ونصمم تطبيق React مع ميزة التمرير السلس.

الخطوة 1: استنساخ وتشغيل تطبيق React

في دليلنا، سنستخدم مشروع React البدائي الذي يتضمن شريط تنقل في الأعلى. هناك سترى خمسة أقسام <sections> فريدة مرتبة بالتتابع.

في الوقت الحالي، الروابط في شريط التنقل هي علامات مرساة (anchor tags). ومع ذلك، سنحتاج إلى تحديثها قريبًا لتمكين التمرير السلس. اتبع صفحة React With Smooth Scrolling للانتقال إلى مستودع المشروع. من المهم ملاحظة أن الرابط مخصص للفرع start. أما الفرع master فيتضمن جميع التعديلات المكتملة. عند فتح عنوان URL، سترى المستودع:

في صفحة المستودع، سترى زر Code باللون الأخضر. اضغط على سهم القائمة المنسدلة:

عند النقر على السهم، سترى رابط HTTP الرابط:

الآن انتقل إلى مبدل أوامر git الخاص بك، واستخدم الأمر التالي لـ استنساخ المشروع في جهازك المحلي:

$ 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

في مجلد src/Components، ستجد ملف Navbar.js الذي يحتوي على <Navbar> مع nav-items المقابلة لخمسة أقسام <Section> مرتبة بالتتابع:

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="الشعار."

onClick={this.scrollToTop}

<li className="nav-item">القسم 1</li>

<li className="nav-item">القسم 2</li>

<li className="nav-item">القسم 3</li>

<li className="nav-item">القسم 4</li>

<li className="nav-item">القسم 5</li>

</ul>

</div>

</nav>

);

}

بعد ذلك، انتقل إلى ملف App.js في مجلد src. هناك، سترى أن <Navbar> قد تم وضعه مع خمسة من <Section>:

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="القسم 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="القسم 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="القسم 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="القسم 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="القسم 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="القسم 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="القسم 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="القسم 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="القسم 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="القسم 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

بشكل افتراضي، كل <Section> مكون سيتضمن عنوانًا و عنوانًا فرعيًا.

DRY مبدأ قيد التطبيق

بما أننا نستخدم نصًا عشوائيًا في هذا البرنامج التعليمي، فلنضف ملف dummyText.js لتوفير الوقت وتقليل التكرار. استخدم ملف JavaScript الذي تم إنشاؤه حديثًا لتمريره إلى كل عنصر <Section> .

تثبيت React

استخدم الأمر التالي لـ تشغيل التطبيق:

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

cd React-With-Smooth-Scrolling

npm install

npm start

تشغيل rpm سيبدأ تطبيقك في وضع التطوير. انتقل إلى localhost:3000 وتحقق من تشغيل التطبيق على نظامك:

الآن بعد أن أصبح تطبيقنا قيد التشغيل، فلنمضِ قدمًا ونثبت react-scroll في الخطوة التالية.

الخطوة 2: تثبيت وتهيئة React-Scroll

أولاً، تحتاج إلى زيارة الحزمة على Node Package Manager لتنزيل react-scroll . في وقت كتابة هذا الدليل، نستخدم أحدث إصدار من react-scroll , 1.8.7. تأكد من الحصول على أحدث إصدار، إذا كان هناك تحديث في المستقبل:

قم بتشغيل الأمر التالي لتثبيت react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

بعد ذلك، انتقل إلى ملف Navbar.js، واستورد Link و animateScroll من react-scroll. للتبسيط وسهولة الاستخدام، دعنا نحتفظ بـ animateScroll كـ scroll:

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

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

بعد ذلك، قم بتحديث nav-عناصر لاستخدام مكون <Link> . سترى الكثير من الخصائص المدرجة في <Link> وهو مكون غير ضروري لبرنامجنا التعليمي. ومع ذلك، يمكنك استكشاف هذه الخصائص من خلال التحقق من صفحة التوثيق.

بعض الخصائص الأساسية التي تستحق انتباهك:

activeClass – الفئة المستخدمة عندما يكون العنصر نشطًا.
to – يخبر الهدف المحدد بالتمرير إليه.
- إن ميزة to حاسمة لأنها توجه المكون إلى العنصر الذي يجب التمرير إليه.
spy: يشير لتحديد Link عندما يكون التمرير عند الموضع المستهدف.
smooth: يحرك عملية التمرير.
offset: يمرر بمقدار إضافي يبلغ px مثل الهامش الداخلي، على سبيل المثال.
- يمكنك أيضًا استخدام offset لتحديد مقدار إضافي من التمرير للوصول إلى <Section>.
duration: وقت حركة التمرير الذي يمكن أن يكون رقمًا أو دالة.

إليك توضيح للميزات التي يمكن استخدامها لكل مكون <Link> . الشيء المميز الوحيد بينها سيكون ميزة to لأنها تشير جميعًا إلى أقسام <Section> مختلفة:

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

ضع في اعتبارك تحديث جميع عناصر nav-الخاصة بك. بعد إضافة جميع العناصر بنجاح، عد إلى المتصفح وشاهد التمرير السلس المباشر.

الخطوة 3: تنسيق الروابط النشطة

في هذه الخطوة، سنستخدم خصائص CSS لإعادة تصميم كتلة البرمجية الخاصة بنا وجعلها تبدو أنيقة. تتيح لك ميزة activeClass تحديد فئة وتطبيق مكون <Link> عندما يكون عنصر to نشطًا. إذا كان مكون <Link> الذي تستخدمه يعرض عنصر to في الجزء العلوي من الصفحة، فاعتبر <Link> نشطًا. انقر فوق <Link> أو قم بالتمرير لأسفل الـ <Section> يدويًا لتنشيط الـ <Link>.

. دعنا نجرب الاختبار ونرى كيف يعمل. افتح Chrome DevTools وافحص عنصر <Link> الخامس كما هو موضح أدناه. انقر فوق <Link> أو قم بتمرير الـ <Section> يدويًا إلى الجزء السفلي من الصفحة، وستلاحظ تطبيق الفئة النشطة:

كخطوة إضافية، قم بإنشاء فئة نشطة وضع خطًا تحت الرابط. بعد ذلك، أضف هذه الكتلة الصغيرة من CSS في ملف App.css في دليل src :

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

بعد ذلك، قم بتحديث المتصفح الخاص بك. قم بالتمرير قليلاً وستلاحظ أن الـ <Link> المحدد أصبح تحته خط الآن:

الخطوة 4: إضافة المزيد من الوظائف

بالإضافة إلى الخصائص المستخدمة أعلاه، هناك وظائف أخرى مثل scrollToTop, scrollToBottom، على سبيل المثال لا الحصر، والتي يمكنك استخدامها. يمكنك استدعاء هذه الدوال مباشرة وإدارة إجراءاتها بشكل صريح. فيما يتعلق بهذه الوظائف، بطبيعة الحال، سينقلك شعار التطبيق في شريط التنقل إلى الجزء العلوي من الصفحة الرئيسية.

باستخدام دالة scrollToTop ، أضف معالج نقر إلى شعار nav-logo لإعادة تمرير المستخدم إلى الجزء العلوي من الصفحة:

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

scrollToTop = () => {

scroll.scrollToTop();

};

باستخدام دالة scrollToTop ، أضف معالج نقر إلى شعار nav-logo لتمرير المستخدم إلى الجزء السفلي من الصفحة:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

بالعودة إلى المتصفح، يمكنك الآن التمرير لأسفل في الصفحة، والنقر فوق الشعار في شريط التنقل، والعودة إلى الجزء العلوي من الصفحة.

الخاتمة

التمرير السلس هو من بين تلك الوظائف التي يمكن أن تضيف الكثير من القيمة المرئية لتطبيق الويب. يمكن لحزمة react-scroll تمكينك من الاستفادة من هذه الميزة دون أي أعباء إضافية كبيرة.

كخطوة تالية في تجربتك التعليمية، ألقِ نظرة على المزيد من دروس React و JavaScript التي يمكنك العثور عليها في المدونة الخاصة بنا:

حوسبة سعيدة!

Preslav Dobrev

المؤلف · CloudSigma

Preslav Dobrev هو مصمم إبداعي في CloudSigma، يركز على هوية أعمال متسقة باستخدام قنوات التسويق التقليدية والمبتكرة. هو بارع في دمج الرؤية الفنية مع التسويق الاستراتيجي لخلق سرد قصصي مؤثر للعلامة التجارية.

التمرير السلس قيد التطبيق باستخدام React: دليل تعليمي

المتطلبات الأساسية

الإعداد الأساسي: تثبيت react-scroll

الخطوة 1: استنساخ وتشغيل تطبيق React

الخطوة 2: تثبيت وتهيئة React-Scroll

الخطوة 3: تنسيق الروابط النشطة

الخطوة 4: إضافة المزيد من الوظائف

الخاتمة

Preslav Dobrev

التعليقات