ما هي JSX؟ قواعد صيغة JSX في React مع أمثلة

JSX امتداد لصيغة JavaScript يتيح لك كتابة ترميز شبيه بـ HTML داخل الكود. تُرجع مكوّنات React كود JSX لتصف ما يجب أن يظهر على الشاشة، وتحوّله أداة بناء إلى استدعاءات دوال JavaScript عادية. تبدو مثل HTML، لكن بعض القواعد تختلف، والأقواس المعقوصة تتيح لك وضع أي قيمة JavaScript داخل الترميز.

export default function App() {
    const user = { name: 'Ada Lovelace', role: 'Engineer', skills: ['math', 'code'] };
    const initials = user.name.split(' ').map((part) => part[0]).join('');

    return (
        <div className="card">
            <h2>{user.name}</h2>
            <p>
                {initials} works as an {user.role.toLowerCase()} and knows{' '}
                {user.skills.length} skills.
            </p>
            <ul>
                {user.skills.map((skill) => (
                    <li key={skill}>{skill.toUpperCase()}</li>
                ))}
            </ul>
        </div>
    );
}

كل ما داخل {} هو JavaScript: خاصية، أو استدعاء تابع، بل حتى map الذي يحوّل مصفوفة إلى عناصر قائمة. أضف 'design' إلى المصفوفة skills فيتحدث العدد والقائمة معًا.

قواعد JSX

أرجع عنصر جذر واحدًا

يُرجع المكوّن قيمة واحدة، لذا تحتاج JSX الخاصة به إلى أب واحد. عنصران شقيقان في المستوى الأعلى خطأ في الصيغة. وعندما لا تريد عنصر <div> إضافيًا في الصفحة، ضعهما داخل جزء (fragment)، <>...</>:

// Error: Adjacent JSX elements must be wrapped in an enclosing tag
return (
    <h1>Title</h1>
    <p>Text</p>
);

// OK: a fragment groups them without adding a DOM element
return (
    <>
        <h1>Title</h1>
        <p>Text</p>
    </>
);

عندما تحتاج إلى key على المجموعة، استخدم الشكل الطويل <Fragment key={id}>؛ راجع الأجزاء.

أغلق كل وسم

تسمح لك HTML بترك بعض الوسوم مفتوحة. أما JSX فلا. العناصر التي لا أبناء لها تُغلق نفسها بـ />: <img /> و<br /> و<input />، ومكوّناتك الخاصة مثل <Avatar />.

استخدم className وhtmlFor والسمات بنمط camelCase

تصبح سمات JSX مفاتيح لكائن JavaScript، لذا تتبع تسمية JavaScript. class وfor كلمتان محجوزتان في JavaScript، ولهذا تستخدم JSX الاسمين className وhtmlFor. السمات المكوّنة من عدة كلمات وكل معالجات الأحداث تُكتب بنمط camelCase: tabIndex وmaxLength وautoFocus وonClick وonChange. ويُستثنى أمران يحتفظان بالشرطة الواصلة: سمات aria-* وdata-* تُكتب تمامًا كما في HTML.

export default function App() {
    return (
        <form onSubmit={(e) => e.preventDefault()}>
            <style>{`
                .field { display: block; margin-bottom: 8px; }
                .hint { color: #777; font-size: 13px; }
            `}</style>
            <label htmlFor="email" className="field">
                Email
            </label>
            <input id="email" type="email" maxLength={40} autoComplete="off" />
            <p className="hint" data-testid="hint" aria-live="polite">
                Clicking the label focuses the input, because htmlFor matches its id.
            </p>
            <button type="submit" disabled={false}>
                Send
            </button>
        </form>
    );
}

غيّر className="field" إلى class="field". تحتفظ التسمية بتنسيقها، لأن React تضبط السمة على أي حال، لكن بناء التطوير يسجّل "Invalid DOM property class. Did you mean className?" تعمل المعاينة مثل بناء الإنتاج، فلن ترى هذا التحذير هنا؛ استخدم className. السمة النصية تستخدم علامتي التنصيص (type="email")؛ وأي قيمة أخرى تستخدم الأقواس المعقوصة (maxLength={40} وdisabled={false}).

الأقواس المعقوصة تأخذ تعابير لا عبارات

داخل {} يمكنك كتابة أي شيء ينتج قيمة: متغير، أو عملية حسابية، أو استدعاء دالة، أو معامل ثلاثي، أو &&، أو قالب نصي. العبارات مثل if وfor وconst لا تنتج قيمة، لذا لا يمكن وضعها هناك. أنجز العمل قبل return، أو استخدم صيغة تعبير:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    let message;
    if (count === 0) {
        message = 'No messages';
    } else {
        message = `${count} new message${count === 1 ? '' : 's'}`;
    }

    return (
        <div>
            <p>{message}</p>
            <p>{count > 5 ? 'Inbox is busy' : 'Inbox is calm'}</p>
            {count && <p>You have mail.</p>}
            <button onClick={() => setCount(count + 1)}>New message</button>
            <button onClick={() => setCount(0)}>Clear</button>
        </div>
    );
}

انظر جيدًا قبل أن تنقر: تعرض الصفحة 0 شاردًا. يُقيَّم count && <p>...</p> إلى 0 عندما يكون العدد صفرًا، وReact تعرض الأرقام، حتى الصفر. غيّره إلى count > 0 && <p>You have mail.</p> فيختفي 0. القيم false وnull وundefined وtrue لا تعرض شيئًا، ولهذا تكون القيمة المنطقية قبل && آمنة. تتناول صفحة العرض الشرطي هذه الأنماط.

الأنماط المضمّنة تستخدم كائنًا

تأخذ السمة style كائن JavaScript، لا نصًا من CSS. ومن هنا يأتي شكل «الأقواس المزدوجة»: الزوج الخارجي يعني «هنا JavaScript»، والزوج الداخلي هو الكائن نفسه. أسماء الخصائص بنمط camelCase (backgroundColor وfontSize)، والرقم المجرد يعني البكسل في معظم خصائص الحجم.

import { useState } from 'react';

export default function App() {
    const [big, setBig] = useState(false);
    const boxStyle = {
        padding: 12,
        borderRadius: 8,
        backgroundColor: big ? '#dbeafe' : '#f3f4f6',
        fontSize: big ? 24 : 16,
    };

    return (
        <div>
            <div style={boxStyle}>Styled with a JavaScript object</div>
            <p style={{ color: '#555', marginTop: 8 }}>Double braces: an object literal.</p>
            <button onClick={() => setBig(!big)}>Toggle size</button>
        </div>
    );
}

لأن النمط كائن، يمكن حسابه من الحالة مثل أي قيمة أخرى. جرّب تغيير fontSize: big ? 24 : 16 إلى fontSize: big ? '2em' : '1em': النصوص تُمرَّر كما هي بوحدتها.

التعليقات

التعليق داخل JSX يوضع بين أقواس معقوصة: {/* this is a comment */}. تعليقات HTML (<!-- -->) خطأ في الصيغة. أما خارج الترميز، في جسم الدالة، فتعليقات // العادية تعمل كالمعتاد.

return (
    <div>
        {/* The header is hidden on small screens */}
        <Header />
    </div>
);

تحويل HTML إلى JSX

لصق HTML داخل مكوّن خطوة أولى شائعة، ومعظمه يعمل. هذه هي التغييرات التي تحتاج عادة إلى إجرائها:

• تصبح class هي className، وتصبح for هي htmlFor.
• الوسوم الفارغة تُغلق نفسها: يصبح <br> هو <br />، ويصبح <img src="a.png"> هو <img src="a.png" />.
• يصبح style="color: red; font-size: 14px" هو style={{ color: 'red', fontSize: 14 }}.
• سمات الأحداث تأخذ دالة لا نصًا: يصبح onclick="save()" هو onClick={save}.
• تصبح أسماء السمات بنمط camelCase: يصبح tabindex هو tabIndex، ويصبح stroke-width في SVG هو strokeWidth.
• تصبح <!-- comments --> هي {/* comments */}.
• العناصر المتعددة في المستوى الأعلى تحتاج إلى أب واحد أو جزء.

تجري أدوات تحويل HTML إلى JSX على الإنترنت هذه الخطوات لك، لكن معرفتها تجعل رسائل الخطأ سهلة القراءة عندما تفوتك إحداها.

ما تتحول إليه JSX

لا تستطيع المتصفحات تشغيل JSX. يحوّل مترجم (مثل Babel أو SWC أو Oxc، التي يشغّلها Vite وأطر العمل لك) كل وسم إلى استدعاء دالة من react/jsx-runtime:

// What you write
const element = <h1 className="title">Hello, {name}</h1>;
const button = <Button size="small">OK</Button>;

// What the compiler produces (roughly)
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

const element = _jsxs('h1', { className: 'title', children: ['Hello, ', name] });
const button = _jsx(Button, { size: 'small', children: 'OK' });

الوسم بحرف صغير يصبح نصًا ('h1'، عنصر HTML)، والوسم بحرف كبير يصبح مرجعًا إلى دالتك (Button)، والسمات تصبح كائن props، والمحتوى يصبح children. كانت الإعدادات الأقدم تحوّلها إلى React.createElement(type, props, ...children) بدلًا من ذلك، ولهذا تبدأ الملفات القديمة بـ import React from 'react' حتى عندما لا تذكر React أبدًا. يُرجع الاستدعاء كائنًا عاديًا يُسمى عنصر React. يمكنك تسجيل واحد:

function Badge({ label }) {
    return <span style={{ border: '1px solid', padding: '0 6px' }}>{label}</span>;
}

export default function App() {
    const heading = <h3 className="title">Hello</h3>;
    const badge = <Badge label="new" />;

    console.log('heading type:', heading.type, 'props:', heading.props);
    console.log('badge type is the Badge function:', badge.type === Badge);

    return (
        <div>
            {heading}
            {badge}
        </div>
    );
}

تُظهر وحدة التحكم أن heading مجرد بيانات: نوع 'h3' وكائن props. ولهذا أيضًا يمكن تخزين JSX في متغيرات، وتمريرها إلى دوال، وإرجاعها منها.

JSX تهرّب النص نيابة عنك

أي نص تضعه بين الأقواس المعقوصة يُعرض كنص، لا كـ HTML أبدًا. إذا كتب مستخدم <img src=x onerror=alert(1)> في مربع تعليق، تعرض React تلك المحارف على الشاشة بدلًا من إنشاء وسم صورة. هذا يمنع افتراضيًا أشيع أشكال هجمات البرمجة عبر المواقع (XSS).

export default function App() {
    const comment = 'Nice post! <b>bold?</b> <img src="x" onerror="alert(1)">';
    const trustedHtml = 'This came from <b>our own</b> markdown renderer.';

    return (
        <div>
            <p>{comment}</p>
            <p dangerouslySetInnerHTML={{ __html: trustedHtml }} />
        </div>
    );
}

تطبع الفقرة الأولى الوسوم كمحارف عادية. أما الثانية فتستخدم dangerouslySetInnerHTML، التي تتخطى التهريب وتدرج النص كـ HTML حقيقي، فتظهر "our own" بخط عريض. الاسم الطويل تحذير: لا تمرر إلا HTML أنتجته بنفسك أو نظّفته بأداة تعقيم مثل DOMPurify. تمرير مدخلات المستخدم هناك يعيد فتح ثغرة XSS التي أغلقتها JSX.