ما هو React؟

جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 1 من 42.

تُعدّ React المكتبة الأكثر شهرةً في العالم لبناء واجهات المستخدم. Facebook وNetflix وAirbnb: الأجزاء التفاعلية من الويب التي تستخدمها كل يوم مبنية باستخدامها.

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

المكوّن ليس شيئًا مخيفًا: إنه دالة JavaScript تُرجع ما ينبغي أن يظهر على الشاشة:

function App() {
    return <h1>Hello, React!</h1>;
}

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

في هذه الدورة، ستعدّل App.jsx، وهو المكوّن الرئيسي لتطبيق React صغير. تُظهر المعاينة على اليمين تطبيقك مباشرةً أثناء الكتابة. لنَبْنِ شيئًا ما.

التحدي

مبتدئ

هذا هو مكوّنك الأول React، already مكتوبًا من أجلك.

ما يجب فعله:

اقرأ App.jsx: إنه function التي returns JSX.
اضغط على زر Run.
شاهد المعاينة على اليمين وهي تنفّذ ما أعاده component.

that هو كامل حلقة React: يعيد component JSX، ويضعه React على الشاشة. بدءًا من الدرس التالي، ستكتب JSX بنفسك.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>