لقد درست مادة تصميم الويب واخذنا لغات البرمجة للتصميم مثل css css3 html html5 و bootstrap و Jquery واخذنا ايضا react ولكن اشياء بيسطة ولم نتعمق فيه لضيق الوقت في الفصل الدراسي فأنا اريد أن اعرف المزيد عنه اذا سمعت بأنه الشئ الرائج في التصميم هذه الايام.
ماهو إطار عمل React وفيما يستخدم ؟؟
تُعد الرياكت او react.js مكتبة تم بناؤها على لغة جافاسكربت و تعتمد على مفهوم المُكونات و تُستخدم في بناء واجهات تفاعلية تعتمد على virtual dom في تحديث مُكونات الصفحة يُمكن إستخدامها لإنشاء تطبيقات من صفحة واحدة (spa) تم بناء هذه المكتبة من طرف فيسبوك ، هناك من يعتبر react إطار عمل لكنها في الحقيقة مكتبة. هناك بدائل أخرى للرياكت أشهرها vue.js التي تُعتبر أيضاً مكتبة و بإستخدام أدوات أخرى و مكاتب أخرى يُمكن أن تُصبح إطار عمل بالإضافة إلى Angular التي تم إنشاؤها من google و تُعد إطار عمل مُتكامل لإنشاء تطبيقات الصفحة الواحدة
يُمكنك الإطلاع على هذا الدليل المُقدم من أكاديمية حسوب لمعرفة مفاهيم أكثر حول react:
و ستجدين على موسوعة حسوب توثيق كامل باللغة العربية لهذه المكتبة من هنا:
كما تُقدم أكاديمية حسوب دليل كامل يضم مجموعة من المقالات حول vue.js يُمكنك الإطلاع عليه من هنا:
بالتوفيق.
صحيح يعد الرياكت اليوم من أهم العناصر في عملية تصميم الفرونت اند لانه يتعامل مع المتصفح بطريقة مختلفة عن الامر المعهود حيث يقوم بانشاء متصفح وهمي مهمته مراقبته كل التغيرات التي تحدث في المتصفح الحقيقي ويقوم بتحديثها فقط من دون ان تتأثر باقي الصفحات ..
هذا المقال رائع وفي كثير من النقاط المثيرة للاهتمام فيه الرياكت تسطيعين مراجعتها
..
ال react هي مكتبة مبنية للبرمجة بلغة JavaScript تم بناؤها من قبل شركة فيسبوك والهدف منها فقط تقديم طريقة سهلة وسلسلة وقوية في الوقت ذاته لبناء الواجهات حيث تخفف العبء عن المبرمجين أثناء بناء أي واجهة، وهي مبنية على أساس مفهوم الـ Component أما من ناحية أنها رائجة فذلك صحيح لكن شخصيا أحب استخدام ال VueJS بسبب إستعمالي الكثير لإطار laravel.
React هي مكتبة مكتوبة بلغة الجافاسكريت , تخدم مفهوم SPA Single Page Application , وهو أن ننتقل بين كل صفحات الموقع بدون الحاجة لعمل Refresh للصفحة مما يعطي تجربة أداء ممتازة للمستخدم و سرعة كبيرة للموقع
كما أنها تتيح أيضاً برمجة تطبيقات الجوال باستخدام React Native بدون الحاجة لكتابة أكواد Java أو Swift فقط باستخدام الجافاسكربت و هي مطلوبة جداً في السوق العربي والعالمي .
وأخيراً من المهم ذكر أنه لا يجب فقط تعلم أساسيات الجافاسكربت للدخول إلى React بل يجب التعمق قليلاً , ومن أهم الأمور التي يجب التركيز عليها برأيي :
ES6
OOP js
Promises
DOM
BOM
NPM
وهناك قنوات عربية تشرح هذه الأمور أفضلها (حسب رأيي)
وكقناة أجنبية
React لوحدها لا تكفي , لكن بالطبع يمكن دوماً تحميل مكاتب مساعدة لل React حتى يصبح عملها كاملاً
من أهم المكاتب مثلاً :
وكل واحدة قد تكون بسيطة أو تحتاج تعلماً حتى تتقنيها , ولا يمكن القول أنها تغني عن لغة برمجة لأنها أصلاً ليست لغة برمجة إنما مكتبة فقط مكتوبة بلغة البرمجة جافاسكريت ويتم استخدامها في ال Front End فقط .
نأتي لشق آخر قد يطرح .....
هل ال React تغنيني عن تعلم ال Jquery أو غيرها من المكاتب مثلاً ؟؟
فالجواب أيضاً لا , ال React كوظائف يمكنها أن تغني عن ال Jquery ولكن هناك آلاف المواقع المبرمجة بال Jquery ومعتمدة عليها بشكل كلي , فعدم استخدامها أو تعلمها قد يجعل الشخص يفقد الكثير من فرص العمل .
وقيسي على ذلك المكاتب الأخرى
react.js مكتبة جافا سكربت لتصميم و برمجة الواجهات الأمامية لمواقع الويب FrontEnd
تعمل على تقسيم مكونات الصفحة إلى مكونات أصغير تدعى Component ومن ثم استدعاء هذه المكونات و بنائها بالبيانات الممرة لها (يعطينا أفضلية لاستدعاء المكونات عدة مرات ببيانات مختلفة و بعدة صفحات مختلفة).
تعريف Headr - navBar - Footer .. تعليق - منشور - رسالة و أي فصيل يمكننا اعتباره مكون برمجي مستقل.
تعتمد على مفاهيم HTML _ CSS _ JS و تعريف Tags خاصة حسب كل Component.
تطور عنها إطار عمل FrameWork يدعى React Native يستخدم في برمجة تطبيقات الهاتف المحمول android - ios
التي يمكن تعلمها بسرعة لأن لها نفس الأساس المشترك مع React.JS حيث تطلب بعض المهارات الإضافية
و فهم في عمل android - ios و بعض الإعدادات و سيكون المبرمج على عتبة فرص عمل أكثر
مرحبًا آمال
react.js هي إحدى مكتبات لغة JavaScript . تُستخدم هذه المكتبة في بناء واجهات المستخدم. تعتمد هذه اللغة على المكونات القابلة لإعادة الاستخدام reusable components في بناء الواجهات تمامًا مثل مكعبات ال lego. حيث يمكنك كتابة كود لمكون مرة واحدة فقط و استخدامه و أكثر من مرة في نفس التطبيق أو في تطبيقات أخرى.
يمكنك قراءة المزيد عن هذه المكتبة من خلال:
- مقالات موجودة في أكاديمية حسوب من هنا:
*موسوعة حسوب من هنا:
- التوثيق الرسمي للمكتبة من هنا:
*يمكنك قراءة هذين المنشورين أيضًا لمزيد من المعلومات عن أهمية React و ما هي المشاكل التي جاءت لتحلها:
react و vuejs و angular
هما framewrks تم بنائها بواسطة javascript توفر الكثير من الوقت والمجهود وتستخدم في بناء واجهات المستخدم بطرق احترافية وطورت في مجال web كثيراً .
من أهم مميزاتهم :
في القديم كان كل الأعمال على مطور backend داخل السيرفر الأن الأعمال شبه منقسمة بين front-end وال backend وهذا بسبب وجود framworks جعلت تقسم الأعمال بينهم مثل خاصية one Page Applection وهي تحميل الموقع بالكامل وعند الضغط على الذهاب إلى صفحة أخرى لا تحمل ولكن تذهب إليها تلقائياً في القديم كان يذهب الأمر إلى backend ثم تعيد هيكلة صفحة جديدة بالأمر المطلوب ومن ثم عرضها .
الأن عند الضغط على صفحة في النافبار يذهب بدون إعادة التحميل الملفات بالداتا الجديد وكل هذا .
هذا مثال بسيط فقط من framwork .
أنصحك بمشاهدة هذا الفيديو:
التعليقات