كيف أبدأ في React؟

يوجد مبدأ عام لا يمكن التخلي عنه قبل تعلم أي لغة برمجة، وقبل أن نسأل كيف أبدأ في React، وهو أن تعلم لغة البرمجة لا سقف ولا حدود له. فيجب أن تكون مطلعًا عليها ولا تكف عن متابعة كل جديد فيها وتعلم واسترجاع ما تعلمته من قبل، لأن التعليمات البرمجية التي لا تستخدمها مدة طويلة معرضة للنسيان. 

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

اشترك الآن في كورس ريآكت

كيف أبدأ في React؟

أما إن كنت قد تعلمت لغة الجافا سكربت أو حتى لديك فكرة بسيطة عنها، فسيساعدك هذا بدرجة ملحوظة في تعلم لغة برمجة React.

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

تنزيل وتثبيت برنامج Node.js

على الرغم من اعتبار لغة React مكتبة مفتوحة المصدر، فإنها في النهاية مكونة من مجموعة من الأكواد، وهنا ستحتاج إلى محرر لهذه الأكواد، ولا يوجد أفضل من Node.js لك لتحميله وتثبيته على الجهاز.

 كما يحمل هذا البرنامج مسؤولية التعامل مع الجافا سكريبت، فإن لغة الرياكت هي في الأساس لغة منبثقة من الجافا سكريبت طورتها شركة فيسبوك، من أجل تصميم المكونات الخاصة بالواجهات الأمامية بصفحات الويب وتطبيقات الويب. 

عند تثبيت برنامج نود جي إس يتم تثبيت حزم لغة جافا سكريبت، وهي حزم npm، وتستخدم هذه الحزم في تثبيت مكتبة ReactJS تلقائيًّا. وبالتالي، يتعامل البرنامج مع لغتَي برمجة وليست لغة واحدة، ومن حسن الحظ توافر موقع رسمي من أجل تنزيل هذا البرنامج. 

إعداد أول مشروع ReactJS 

عند تثبيت برنامج نود جي إس المذكور في الفقرة السابقة سوف تكون قادرًا على إنشاء أول مشروع.

فكر في فكرة تطبيق إلكتروني على الهواتف الذكية لتبدأ في تصميم الواجهة الأمامية الخاصة به عن طريق الأمر create-react-app. 

عند كتابته تبدأ في التفكير في باقي التعليمات البرمجية التي سوف تكتبها، ويجب أن تهتم بالتعليمات البرمجية الأساسية، وهي المكونات، وتهتم بالتعليمات البرمجية الفرعية. 

لا يعني عملك على مشروع معين على برنامج نود جي إس أنك لن تتمكن من فتح برامج أو مشروعات أخرى، بل يمكنك عن طريق النقر على خيار Terminal أن تفعِّل إنشاء مشروع آخر باستخدام npx create-react-app my-app. 

تشغيل خادم التطوير

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

لكي تتمكن من تفعيل الخادم تتوجه إلى Terminal ثم تتوجه إلى الأيقونة الخاصة بالمشروع وبعد ذلك تفعِّل الأمر npm start.

كتابة أول مكون على مكتبة ReactJS

بعد الانتهاء من الخطوات السابقة، ستبدأ في كتابة أول تعليمات برمجية خاصة بالمكون الأول في المشروع. 

اقرأ أيضاً تعلم React من الصفر

مبادئ تعليم البرمجة بلغة React

يجب التركيز على كثير من الأمور قبل اتخاذ خطوة تعليم البرمجة بلغة React، ومنها ما يلي:

• يجب أن تكون على علم بأساسيات مكتبة ReactJS، وما علاقتها بلغة الجافا سكربت. 

• تتعرف على استخدام لغة رياكت، وهل من الممكن أن نستخدمها في تصميم واجهات المستخدم الأمامية المعقدة. 

• كما يجب التعرف على مميزات تلك اللغة، وهل هي سهلة أم صعبة، وهل تتطلب تعلم لغات برمجة أخرى معها أم يمكن الاكتفاء بها. 

• تتعرف على طريقة إنشاء المشروعات باستخدام هذه اللغة وتشغلها، ليظهر أمام عين المستخدم المنتج النهائي لكي تعمل على التعديل على تلك الرؤية قبل إصدار المشروع في شكله النهائي. 

• تتعرف على ما هو JSX، وما الأوامر والمكونات الملحقة به، وتستطيع التعديل على المشروع الذي تم تنفيذه عن طريقة لغة رياكت خطوة بخطوة. 

• التعرف على أنواع المكونات التي ستتعلمها في تعليم البرمجة بلغة React، وفي هذا الإطار سوف تتعرف على الـFunction Components والـClass Components. 

• شرح أهم المكونات المستخدمة في كل المشروعات والمواقع الإلكترونية وتطبيقات الويب التي تستخدمها من خلال لغة رياكت مثل الـReact Props والـEvents، وتتعلم استخدامها بطريقة صحيحة.