ما هي React؟ شرح مكتبة JavaScript لبناء الواجهات

React مكتبة JavaScript لبناء واجهات المستخدم من مكوّنات. تصف كيف يجب أن تبدو الشاشة للبيانات الحالية، وعندما تتغير البيانات تحدّث React الصفحة لتطابقها. React وReact JS وReactJS شيء واحد: مكتبة مفتوحة المصدر أُنشئت في Facebook (Meta حاليًا).

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

انقر الزرين. كل Counter يحتفظ برقمه الخاص، لأن كل واحد نسخة منفصلة من المكوّن ولها حالتها الخاصة. أضف سطرًا ثالثًا، <Counter label="Plums" />، فيظهر عدّاد جديد مستقل.

هذا المثال القصير يُظهر بالفعل الأفكار الثلاث التي بُنيت عليها React: المكوّنات (Counter وApp دوال تُرجع واجهة)، وJSX (الصيغة الشبيهة بـ HTML داخل return)، والحالة (count، قيمة تجعل React تعيد رسم المكوّن عندما تتغير).

المشكلة التي تحلها React

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

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

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

function Declarative() {
    const [count, setCount] = useState(0);

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

يسلّم ByHand فقرته إلى كود DOM عادي (التأثير لا يشغّل ذلك الكود إلا بعد أن تنشئ React الفقرة). يحتفظ بالرقم في متغير، ويجد كل عنصر بـ querySelector ويضبط نصه يدويًا. أما Declarative فيقول فقط «اعرض العدد، واعرض هل هو زوجي». احذف السطر في handleClick الذي يضبط .parity وانقر بضع مرات: الصف الأول يزعم الآن أن 3 عدد زوجي، بينما لا يمكن للصف الثاني أن يفقد التزامن، لأن النص يُحسب من count في كل عرض.

كيف تحدّث React الصفحة

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

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

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

المكوّنات وJSX والحالة في لمحة

المكوّنات دوال JavaScript تبدأ أسماؤها بحرف كبير. تُرجع ما يجب أن يظهر على الشاشة، وتستخدمها مثل وسوم HTML: <Counter />. الصفحة شجرة من المكوّنات، من صغيرة مثل زر إلى كبيرة مثل شاشة إعدادات كاملة. راجع المكوّنات.

JSX هي الصيغة التي تتيح لك كتابة الترميز داخل JavaScript. الأقواس المعقوصة تعيدك إلى JavaScript، فيعرض {count} قيمة ويحوّل {items.map(...)} مصفوفة إلى قائمة. تحوّل أداة بناء JSX إلى استدعاءات دوال عادية قبل أن يشغّلها المتصفح.

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

يستخدم هذا المثال كل ذلك: قائمة تُعرض من مصفوفة في الحالة، ونموذج يضيف إليها.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

أضف مهمة فيتغير شيئان معًا: القائمة والعدد أسفلها. لم تطلب قط من العدد أن يتحدث. كلاهما يقرأ من tasks، فكلاهما يتبعها. غيّر المصفوفة الابتدائية إلى [] فتعرض القائمة "Nothing to do." بدلًا من ذلك.

ما ليست React

React مكتبة وليست إطار عمل كاملًا. تغطي المكوّنات والحالة وتحويلهما إلى واجهة، وتترك عمدًا عدة أشياء يحتاجها التطبيق الكامل:

• التوجيه. لا توجد طريقة مدمجة لربط عناوين URL بالصفحات. React Router وموجّهات أطر العمل تسد هذه الفجوة.
• جلب البيانات والعرض على الخادم. تمنحك React أدوات مثل التأثيرات وSuspense، لكنها لا تفرض رأيًا في مصدر البيانات ولا في كيفية عرض الصفحات على الخادم.
• إعداد للبناء. المتصفحات لا تفهم JSX، لذا تحتاج إلى أداة مثل Vite لتحويلها.

تُبنى أطر العمل فوق React لتوفير هذه الأجزاء. يضيف Next.js ووضع إطار العمل في React Router التوجيه والعرض على الخادم وتحميل البيانات، ويوصي فريق React ببدء أي تطبيق كامل بأحدهما. أما لتطبيق يعمل في المتصفح أو للتعلم، فإن Vite مع React العادية نقطة بداية صغيرة وسريعة؛ راجع كيفية تثبيت React.

React مقابل React Native

React نفسها لا تصف إلا المكوّنات وكيف تتغير. ويحوّلها مُصيِّر منفصل إلى شيء يمكنك رؤيته. React DOM تعرض في صفحات الويب، وهي ما تستخدمه كل الأمثلة في هذا الموقع. React Native تعرض النوع نفسه من المكوّنات كعناصر عرض أصلية في iOS وAndroid، فتكتب <View> و<Text> بدلًا من <div> و<p>، ولا يوجد ملف HTML أو CSS. المكوّنات وprops والحالة والخطافات تعمل بالطريقة نفسها في الاثنتين، لذا ينتقل ما تتعلمه هنا مباشرة.

متى تتعلم React

تعلّم React بعد أساسيات JavaScript، لأن كل شيء في React هو JavaScript. قبل أن تبدأ ينبغي أن تكون مرتاحًا مع:

• المتغيرات والدوال والدوال السهمية
• المصفوفات وتابعيها map وfilter
• الكائنات والتفكيك وصيغة النشر (...)
• import وexport
• الوعود وasync/await، لتحميل البيانات

إن بدت لك هذه مألوفة، فابدأ بـ JSX والمكوّنات، ثم props والحالة. تأتي التأثيرات والمراجع والسياق وأدوات الأداء لاحقًا، عندما يصبح بناء مكوّنات تفاعلية صغيرة أمرًا طبيعيًا.