React لجافا سكريبت (Node.js): دليل شامل مع أمثلة

ما هو React ولماذا هو مطلوب؟

React هي مكتبة جافا سكريبت تصريحية وفعالة ومرنة مفتوحة المصدر لإنشاء واجهات المستخدم (UI). تم تطويرها بواسطة مهندسي فيسبوك (المعروفة الآن باسم Meta) في عام 2013، ومنذ ذلك الحين أصبحت واحدة من أشهر تقنيات الواجهة الأمامية في العالم. تسمح React للمطورين بإنشاء تطبيقات ويب معقدة وتفاعلية وقابلة للتوسع، من خلال تقسيم الواجهة إلى مكونات مستقلة وقابلة لإعادة الاستخدام.

لماذا نحتاج React؟

\n
• النهج القائم على المكونات: تبني React واجهة المستخدم من كتل معزولة (مكونات)، يدير كل منها حالته الخاصة. هذا يبسط تطوير الكود واختباره وصيانته.
\n
• التصريحية: تصف كيف يجب أن تبدو واجهة المستخدم لكل حالة من حالات التطبيق، وتقوم React بتحديث وعرض المكونات التي تغيرت فقط بكفاءة. هذا يجعل الكود أكثر قابلية للتنبؤ وأسهل في التصحيح.
\n
• DOM الافتراضي (Virtual DOM): تستخدم React نسخة خفيفة من DOM الحقيقي (نموذج كائن المستند). عند تغيير حالة التطبيق، تقوم React أولاً بتحديث DOM الافتراضي، ثم تقارنه بالإصدار السابق (diffing) وتطبق الحد الأدنى من التغييرات على DOM الحقيقي. هذا يحسن الأداء بشكل كبير، خاصة في التطبيقات ذات التحديثات المتكررة.
\n
• مجتمع ونظام بيئي ضخم: تمتلك React واحدًا من أكبر مجتمعات المطورين، مما يعني وفرة من الحلول الجاهزة والمكتبات والأدوات (React Router، Redux، Next.js، Gatsby) والمواد التعليمية.
\n
• التعددية: يمكن استخدام React ليس فقط لتطبيقات الويب، ولكن أيضًا للتطبيقات المحمولة (React Native) وسطح المكتب (Electron) وحتى تطبيقات الواقع الافتراضي (React 360).
\n

React مناسبة للمشاريع من أي حجم: من تطبيقات الصفحة الواحدة البسيطة (SPA) إلى الأنظمة المؤسسية المعقدة وشبكات التواصل الاجتماعي.

تثبيت React (npm)

للعمل مع React، ستحتاج إلى Node.js (الإصدار 14 أو أحدث) ومدير الحزم npm (أو yarn). أسهل طريقة لبدء مشروع جديد هي استخدام الأداة الرسمية Create React App.

# تثبيت Create React App بشكل عام (اختياري)\nnpm install -g create-react-app\n\n# إنشاء مشروع جديد باسم my-app\nnpx create-react-app my-app\n\n# الانتقال إلى دليل المشروع\ncd my-app\n\n# تشغيل خادم التطوير\nnpm start

بعد تنفيذ هذه الأوامر، سيفتح متصفحك تلقائيًا على العنوان http://localhost:3000 مع تطبيق React قيد التشغيل.

هام: npx هي أداة تقوم بتشغيل الحزم دون تثبيتها بشكل عام. إذا كان لديك إصدار قديم من npm (< 5.2)، استخدم npm install -g create-react-app ثم create-react-app my-app.

طريقة بديلة (التثبيت اليدوي):

# أنشئ مجلد المشروع وقم بتهيئة npm\nmkdir my-react-app && cd my-react-app\nnpm init -y\n\n# قم بتثبيت React و ReactDOM\nnpm install react react-dom\n\n# قم بتثبيت Babel لترجمة JSX و Webpack للتجميع (سيتطلب إعدادًا)\nnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin

ومع ذلك، يُوصى بشدة للمبتدئين باستخدام Create React App، لأنه يتولى جميع الإعدادات المعقدة لأداة التجميع (Webpack، Babel).

بداية سريعة مع مثال كود

بعد إنشاء المشروع باستخدام Create React App، افتح الملف src/App.js. هذا هو المكون الرئيسي لتطبيقك. دعنا ننشئ تطبيقًا بسيطًا "Hello, World!" مع زر يغير العنوان.

// src/App.js\nimport React, { useState } from 'react';\nimport './App.css';\n\nfunction App() {