ما الفرق بين React.js و React Native
إذا كنت جديدًا في عالم تطوير الويب والهاتف المحمول، فقد تتساءل عن الفرق بين React.js و React Native فكلاهما يتضمن كلمة React لكنهما ليسا الأمر نفسه.
على الرغم من أن React.js و React Native يشتركان في الكثير من الأشياء المشتركة إلا أنهما يختلفان عن بعضهما البعض. في هذه المقالة سأوضح لكم أوجه التشابه والاختلاف بينهما.
قبل شرح الفرق بين React.js و React Native علينا بداية معرفة الطريقة التي يتم فيها عرض موقع الويب على متصفح الويب فعندما تكتب عنوان URL لموقع ويب في شريط عنوان المستعرض الخاص بك وتضغط على زر Enter يطلب المستعرض موقع الويب من الخادم البعيد ويرسل خادم الويب ملف HTML إلى المتصفح.
يحتوي ملف HTML على محتوى صفحة الويب والملفات المرتبطة بها مثل الصور ومقاطع الفيديو وأوراق الأنماط. ويقوم مستعرض الويب بتحليل ملف HTML وبناء نموذج كائن المستند DOM وهو هيكل يشبه الشجرة يحتوي على عناصر الصفحة كالأزرار والفقرات والروابط.. إلخ.
يجلب المستعرض كافة الملفات المرتبطة مثل ملفات CSS و JavaScript ويقوم بتنزيلها على الجهاز المحلي ثم يوزع الملفات المرتبطة ويطبق التنسيقات على المحتوى، بعد تنزيل جميع الملفات يعرض المتصفح المحتوى النهائي على الشاشة.
كما يقوم المتصفح أيضًا بتشغيل أي كود JavaScript لجعل الصفحة تفاعلية. على سبيل المثال. إذا قام المستخدم بتعبئة معلومات خاطئة في نموذج فيمكن استخدام JavaScript لإدراج عنصر <div> في الصفحة كي يعرض بداخلها رسالة خطأ للمستخدم.
ومع ذلك، فإن إحدى أكبر مشكلات إدراج العناصر في DOM باستخدام JavaScript هي أن الشيفرة غير قابلة لإعادة الاستخدام. على سبيل المثال، إذا كنت تريد إدراج نفس الزر في الصفحة ولكن بألوان خلفية مختلفة، فيجب عليك إنشاء العنصر مرتين في JavaScript كما يلي
// Insert blue and red button into the page
let blueBtn = document.createElement("button").style.backgroundColor("blue")
let redBtn = document.createElement("button").style.backgroundColor("red")
هذا مجرد مثال بسيط لكن لك أن تتخيل حجم الكود والوقت المستهلك في حال إنشاء واجهات مستخدم معقدة، لهذا السبب تم تطوير React فهي تحل هذه المشكلة عن طريق جعل عملية إنشاء تطبيقات الويب أكثر تنظيمًا وسهولة.
ما هو React.js؟
من الناحية الفنية ReactJS أو React DOM هي مكتبة جافا سكريبت مفتوحة المصدر تستخدم لبناء واجهات المستخدم أو مكونات واجهة المستخدم. هذا يعني أنه يمكنك استخدام React لبناء جميع أجزاء موقع الويب التي يمكن للمستخدم رؤيتها والتفاعل معها في نافذة المتصفح.
إذن ما الفرق بين استخدام JavaScript عادي و React؟ تجعل React عملية تصميم واجهة المستخدم أسهل بكثير وتسمح لك بإنشاء عناصر يمكنك إعادة استخدامها بسهولة في أجزاء أخرى من موقع الويب أو التطبيق وتغنيك عن كتابة نفس الكود مرارًا وتكرارًا لإنشاء نفس الأمر مما يخفف بشكل كبير من تعقيد في المشاريع الكبيرة.
فباستخدام React يمكنك تحديد جزء واحد من واجهة المستخدم. على سبيل المثال، زر ما كمكون كما يلي:
const Button (props) => {
return (
<div>
<button style={props.color}>Submit</button>
</div>
)
}
المكون في هذه الحالة هو دالة تقوم بإرجاع تنسيق JSX يشابه بنية HTML ليحدد من خلاله شكل ومظهر المكون على متصفح الويب.
الآن، لنفترض أنك تريد استخدام نفس الزر (ولكن بألوان مختلفة) في أماكن متعددة على موقع الويب الخاص بك. بدلاً من إنشاء كل زر من البداية بخصائص لونية مختلفة (كما تفعل مع JavaScript)، باستخدام React، يمكنك ببساطة استخدام نفس عنصر <Button> وتمرير لون مختلف لكل زر منها كدعائم، وإنشاء أشكال مختلفة من الزر نفسه.
هل ترى مدى سهولة هذه الطريقة في المحافظة على الكود بسيطًا ومنظمًا، وهذا هو جوهر مكتبة React.js بالكامل.
<Button color="green" />
<Button color="red" />
<Button color="blue" />
من فوائد استخدام React لتطوير واجهة المستخدم كذلك فصل الاهتمامات وهذا يعني أن البيانات المستخدمة في أحد المكونات موجودة بشكل منفصل عن المنطق الموجود بشكل منفصل عن طبقة العرض. على سبيل المثال:
const Button (props) => {
// component data
const [btnText, setBtnText] = useState("Submit")
// component logic
function onClick() {
setBtnText("Submitted!")
}
return (
// component view
<div>
<buttonstyle={props.color}>{btnText}</button>
</div>
)
}
كما ترى هنا، فإن الحالة والمنطق والعرض التقديمي للمكون منفصلة عن بعضها البعض مما يجعل مكونات React UI أسهل في الفهم والإعداد.
ما هي React Native؟
React Native هي نظام متكامل يستخدم لبناء تطبيقات تعمل على كل من أجهزة iOS و Android (أي تطبيقات الهاتف المحمول) عبر الأنظمة الأساسية حيث تستخدم React Native مكونات واجهة المستخدم الأصلية وواجهات برمجة التطبيقات لإنشاء تطبيقات الأجهزة المحمولة.
تتضمن React Native كل ما تحتاجه لإنشاء تطبيق كامل. بينما React JS مسؤولة فقط عن بناء الواجهة الأمامية للويب تستخدم React JS كل من HTML و CSS و JavaScript لإنشاء واجهات مستخدم تفاعلية. وستحتاج إلى تضمين أجزاء أخرى لإنشاء تطبيق ويب متكامل.
ورغم ذلك يشترك كل من React JS و React Native في نفس البنية، تم إنشاء React Native كطريقة للمطورين لبناء تطبيقات الهاتف المحمول عبر الأنظمة الأساسية باستخدام معرفتهم الحالية بأدوات تطوير الويب مثل HTML و CSS و JavaScript ومكتبة React الأساسية.
تحتوي بعض المكتبات المستخدمة بشكل شائع مع React لتطوير تطبيقات الويب أيضًا على إصدار محمول لإنشاء تطبيقات في React Native.على سبيل المثال Axios و Bootstrap CSS و Tailwind CSS.
إليك الأشياء المشتركة بين React DOM و React Native:
- كلاهما يستخدم نفس مكتبة React الأساسية.
- كلاهما يستخدم نفس البنية القائمة على المكونات مما يعني أنه يمكن للمطورين تقسيم تطبيقاتهم إلى أجزاء أصغر وأكثر قابلية للإدارة.
- كلاهما يستخدم JavaScript كلغة برمجة و JSX كلغة نمذجة.
- يستخدم كل من React DOM و React Native أيضًا تقنيات ومكونات التصميم نفسها لكن React Native تختلف قليلاً.
- يستخدم كل من React DOM و React Native أدوات Chrome DevTools لتصحيح أخطاء التطبيقات.
- يستخدم كل من React DOM و React Native نطاقات DOM افتراضية لعرض تطبيقاتهما.
- يستخدم كل من React DOM و React Native نفس واجهات برمجة تطبيقات JavaScript.
- كلاهما تم تطويره في Meta حيث تم تطوير React بواسطة مهندس البرمجيات Jordan Walke بينما تم تطوير React Native من هاكاثون برمجي.
باختصار سنلخص ما ذكرناه في المقال في خمس نقاط أساسية:
- تستخدم React JS بشكل أساسي لتطوير الويب بينما يتم استخدام React Native لتطوير الأجهزة المحمولة.
- React JS هي مكتبة JavaScript مصممة لتبسيط عملية بناء الواجهة الأمامية لتطبيقات الويب.
- تستخدم React JS لبناء واجهة مستخدم للتطبيقات التي تعمل على متصفح الويب كل من HTML و CSS و JS.
- React Native هي أداة متكاملة تستخدم لبناء تطبيقات تعمل على كل من أجهزة iOS و Android.
- نستخدم React Native مكونات واجهة المستخدم الأصلية وواجهات برمجة التطبيقات لإنشاء تطبيقات جوال متعددة الأنظمة.
