ماهو إطار عمل 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.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 .

أنصحك بمشاهدة هذا الفيديو: