8 رمل مدهش من التفاعل لتعزيز مهاراتك

React Sandbox هي بيئة / مساحة افتراضية حيث يمكن لمطوري React التدرب على الكود واختباره قبل نقله إلى المشروع النهائي.

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

باستخدام وضع الحماية ، يمكنك الهروب من جزء التثبيت وتشغيل كود React واختباره وتنفيذه في بيئة افتراضية.

يحتوي React sandbox على بيئة تطوير مُعدة مسبقًا مع أدوات مثل محرر الكود ونافذة المعاينة ونظام البناء.

أنت ستستفيد بالطرق التالية عند استخدام React sandbox ؛

• خطوه سهله؛ لا يتعين عليك تنزيل بيئة وقت تشغيل JavaScript على جهازك المحلي.
• يعزز التعاون ومشاركة التعليمات البرمجية.
• تنتج معظم صناديق الحماية كودًا مُحسَّنًا لأحجام مختلفة للشاشات.
• تحتوي React sandbox على معاينة مباشرة مع ميزة إعادة التحميل السريع ، مما يجعل من الممكن عرض التغييرات على الصفحة المعروضة أثناء كتابة التعليمات البرمجية الخاصة بك.

هذه بعض من أفضل صناديق رمل React التي يمكنك استخدامها اليوم ؛

ستاكبلتز

Stackblitz Af React Sandbox هو مشروع React مبتدئ يسمح لك بالتدرب على كتابة كود React. يحتوي المشروع على عدة ملفات محددة مسبقًا يمكنك تخصيصها لتناسب احتياجاتك.

دلائل الميزات:

• سهل الاستخدام: لا تحتاج إلى التسجيل أو تثبيت أي شيء لاستخدام هذا الصندوق الرمل.
• تخصيص ملف المشروع: بناءً على احتياجاتك ، يمكنك إضافة مجلدات وملفات جديدة أو إزالتها.
• الترميز في الوقت الفعلي والمعاينة المباشرة: يمكنك تغيير محتويات صفحتك ومعاينة التغييرات في الوقت الفعلي.
• التعاون: يتيح لك Af React Sandbox دعوة أعضاء فريقك للعمل في مشروع.
• التبعيات وإدارة الحزم: يتم تكوين آلية تحديد الوصول هذه تلقائيًا باستخدام React و React-DOM كاعتمادات أولية. ومع ذلك ، يمكنك إضافة المزيد من التبعيات من خلال مديرها.
• التكوين السهل: يمكنك تخصيص خادم التطوير الخاص بك ليناسب احتياجاتك. على سبيل المثال ، من علامة تبويب الإعدادات الخاصة به ، يمكنك اختيار آلية إعادة التحميل بين “إعادة التحميل السريع” و “إعادة تحميل الصفحة”.

React Sandbox مجاني إذا كنت فردًا. تبدأ الحزم المدفوعة على منصة Stackblitz من 8.25 دولارًا في الشهر.

Codesandbox.io

Codesandbox.io هو مشروع بدء تشغيل افتراضي يعتمد على بيئة تطبيق الإنشاء والتفاعل. يحتوي صندوق الحماية هذا على العديد من المجلدات والملفات التي يمكنك تخصيصها أثناء تجربة رمز React.

دلائل الميزات:

• استخدام مباشر: لست بحاجة إلى التسجيل للحصول على هذه الأداة. ومع ذلك ، يجب عليك التسجيل وتسجيل الدخول إذا كنت بحاجة إلى مشاركة التعليمات البرمجية الخاصة بك والتكامل مع GitHub و VS Code.
• الترميز المباشر والمعاينة المباشرة: تحتوي هذه الأداة على ميزة إعادة التحميل السريع التي تتيح لك رؤية التغييرات أثناء دمجها في التعليمات البرمجية الخاصة بك.
• إدارة سهلة للحزم والاعتماديات: يتصل Codesandbox بالحزم الخارجية من خلال npm. يمكنك بالتالي إضافة تبعيات وحزم جديدة إلى التعليمات البرمجية الخاصة بك.
• مصحح أخطاء مدمج: هذا الصندوق الرمل يلتقط جميع الأخطاء ويعرضها في وحدة التحكم لتصحيح الأخطاء بسهولة.
• سهولة إدارة الملفات: يمكنك إضافة مجلدات / ملفات جديدة إلى مشروعك أو حتى حذفها بسهولة لأنها تناسب احتياجاتك.
• يتكامل مع الأدوات الخارجية: يمكنك تصدير التعليمات البرمجية الخاصة بك من Codesandbox إلى GitHub الخاص بك وتتبع الالتزامات. يمكنك أيضًا تحويل Browser Sandbox إلى Cloud Sandbox والبدء في استخدام صندوق الحماية هذا مع VS Code.

يحتوي React-Codesandbox على حزمة “مجانية إلى الأبد” تسمح بثلاثة مستودعات عامة وتوفر ذاكرة وصول عشوائي (RAM) بسعة 2 جيجابايت ومساحة قرص تبلغ 6 جيجابايت. يمكنك أيضًا اختيار الحزمة الاحترافية التي تبدأ من 15 دولارًا شهريًا بميزات أفضل.

Uiwjs

Uiwjs React CodeSandbox هو مكون React يسمح لك بإنشاء مشاريع وضع الحماية لرمز React من عينات التعليمات البرمجية. عند التعامل مع هذه الأداة ، يمكنك البدء باستخدام React بسيط أو مشروع كامل.

دلائل الميزات:

• سهل الاستخدام: يمكنك البدء في استخدام هذه الأداة بشكل مجهول. ومع ذلك ، يجب عليك تسجيل الدخول للاستمتاع بميزات تكامل VsCode و GitHub.
• يوفر إدارة ملفات سهلة: تأتي هذه الأداة مع البنية الأساسية لتطبيق React. ومع ذلك ، يمكنك إضافة مجلدات / ملفات وإنشاء مكونات لجعل شفرتك قابلة للتكوين.
• إدارة التبعيات: يمكنك تحديد وإضافة التبعيات الخاصة بك إلى مشروعك من خلال مديري الحزم مثل الغزل و npm.
• يدعم المكتبات / الموارد الخارجية: يمكنك استخدام أطر عمل واجهة المستخدم مثل Bootstrap مع وضع الحماية هذا واستيراد الخطوط من منصات مثل Google.
• يدعم عمليات النشر: يمكنك تكوين مستودعات CodeSandbox الخاصة بك إما باستخدام Netlify أو Vercel لعمليات النشر السهلة.

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

Playcode.io

React Playground من Playcode.io عبارة عن صندوق حماية للكود يسمح لك بالتدرب على كتابة واختبار كود React. تأتي هذه الأداة مع ملفين أساسيين ، هما index.jsx و app.jsx لتبدأ.

دلائل الميزات:

• بسيط: ليست هناك حاجة للتسجيل أو تسجيل الدخول لاستخدام هذه الأداة. يُظهر React Playground المكونات المهمة فقط بينما يعمل الباقي تحت الغطاء.
• قابلة للمشاركة: يمكنك إنشاء رابط لمشاركة التعليمات البرمجية الخاصة بك مع فريقك.
• قابل للتنزيل: يمكنك تنزيل الكود الخاص بك بعد التخصيص ومتابعة استخدامه من جهازك المحلي.
• طرق عرض متعددة: يوفر React Playground “وحدة تحكم” و “عرض ويب”. تسهل طريقة عرض وحدة التحكم تصحيح أخطاء التعليمات البرمجية الخاصة بك ، بينما تُظهر طريقة عرض الويب الشفرة النهائية المعروضة أثناء تحرير ملفاتك.

يحتوي Playcode على خطة مجانية تتيح ما يصل إلى 8 أسطر من التعليمات البرمجية ، ومشاريع غير محدودة ، وما يصل إلى 4 ميغابايت من تخزين الأصول. تبدأ حزمة Personal Pro ذات الأسطر غير المحدودة من الكود من 4.99 دولارًا أمريكيًا في الشهر.

رد فعل المدرسة

React.school CodeSandbox هو برنامج تعليمي يعلمك كيفية استخدام وضع الحماية لتجربة تطبيق React. يتم استضافة وضع الحماية المقدم في هذا البرنامج التعليمي على codeandbox.io.

توجد قوالب مختلفة على النظام الأساسي ؛ يجب عليك تحديد نموذج “React” للبدء.

دلائل الميزات:

• سهل الاستخدام: يحتوي قالب React على كل ما تحتاجه لبدء مشروع React.
• قابلة للمشاركة: يمكنك تضمين كتل التعليمات البرمجية من وضع الحماية لـ React هذا في موقع الويب الخاص بك لسهولة الرجوع إليها.
• يتكامل مع أدوات التطوير المختلفة: قم بتوصيل صندوق حماية React هذا بـ GitHub أو حتى انشره على Vercel.
• إدارة التبعيات / الحزم: باستخدام npm ، يمكنك إضافة تبعيات ومكتبات خارجية إلى مشروعك.

يحتوي React CodeSandbox على حزم مجانية ومدفوعة. تقدم الحزمة المجانية ميزات أساسية. تبدأ خطة Pro المدفوعة من 15 دولارًا في الشهر.

codepen.io

يتيح React Sandbox الذي تم إنشاؤه بواسطة codepen.io للمطورين التدرب على كتابة التعليمات البرمجية في ملف JavaScript عادي. تتبع هذه الأداة قواعد ES6.

دلائل الميزات:

• المعاينة المباشرة وإعادة التحميل السريع: يمكنك رؤية التغييرات على التعليمات البرمجية الخاصة بك في علامة تبويب المعاينة أثناء التحرير.
• التبعيات وإدارة الحزم: تتيح لك هذه الأداة إضافة مكتبات خارجية عبر npm أو شبكات CDN.
• المصحح: يحتوي React Sandbox على وحدة تحكم متكاملة تعرض رسائل الخطأ في حالة وجود أخطاء في التعليمات البرمجية الخاصة بك.
• محرر قابل للتخصيص: يمكنك إضافة العديد من التكوينات إلى مشاريعك ، مثل التحميل المسبق المباشر ، والحفظ التلقائي ، والمسافة البادئة للرمز أثناء كتابة التعليمات البرمجية الخاصة بك.

React Sandbox on Codepen مجاني للاستخدام. ومع ذلك ، فقد دفعت CodePen خططًا بميزات إضافية تبدأ من 8 دولارات شهريًا.

خلل

React Sandbox Service from Glitch هي خدمة / أداة لتشغيل مكونات React المعزولة. تتيح لك الأداة إنشاء مشروع رد فعل ضئيل لممارسة كتابة التعليمات البرمجية واختبارها للوظائف.

دلائل الميزات:

• سهل الاستخدام: يمكنك البدء في استخدام خدمة React Sandbox بدون تسجيل. ومع ذلك ، يجب عليك إنشاء حساب إذا كنت تريد أن يقوم النظام الأساسي بتخزين تعديلات التعليمات البرمجية الخاصة بك للرجوع إليها في المستقبل.
• التحرير والمعاينة المباشرة: تحتوي خدمة React Sandbox Service من Glitch على محرر عبر الإنترنت يسمح لك بتحرير التعليمات البرمجية ومعاينة التغييرات في نافذة المتصفح المدمجة.
• المشاركة والتعاون: يمكنك إنشاء رابط قابل للمشاركة لمشاركة مشروعك مع مطورين آخرين. يمكنك أيضًا دعوة أعضاء الفريق للتعاون في مشروع.

تحتوي خدمة React Sandbox Service على حزمة مجانية حيث تكون جميع المشاريع عامة بشكل افتراضي. تبدأ الباقات المدفوعة مع المشاريع الخاصة والميزات الإضافية من 8 دولارات شهريًا.

اكسبو سناك

Expo Snack هو صندوق رمل React Native يسمح لك بكتابة واختبار رمز React عبر الإنترنت من أجل الوظائف. تحتوي الأداة على المكونات الأساسية لتشغيل تطبيق React Native.

دلائل الميزات:

• سهل الاستخدام: لا يتطلب استخدام Expo Snack عمليات تسجيل.
• وضع التحرير والمعاينة المباشر: يتيح لك المحرر عبر الإنترنت في هذه الأداة تحرير ومعاينة التغييرات على الصفحة المعروضة على الجانب الأيمن.
• مصحح أخطاء متكامل: تسجل هذه الأداة كل تغيير وتعرض الأخطاء على وحدة التحكم من أجل تصحيح الأخطاء بسهولة.
• عرض متعدد الأنظمة الأساسية: عند تجربة هذه الأداة ، يمكنك التبديل بين أنظمة التشغيل ، مثل Android و iOS. يمكنك أيضًا التحقق من كيفية ظهور الصفحة المعروضة على الويب أو مسح رمز الاستجابة السريعة ضوئيًا لمشاهدته على جهازك.
• إدارة المجلدات / الملفات: يمكنك تقديم مكونات جديدة لتطبيقك في وضع الحماية عن طريق إضافة / حذف المجلدات والملفات.

إكسبو سناك هو تطبيق مجاني للاستخدام.

أفضل الممارسات لاستخدام منصات React Sandbox

على الرغم من اختلاف ميزات وضع الحماية للكود ، فإن بعض الممارسات ستساعدك على تعلم وممارسة كتابة كود React بسهولة.

• الحفاظ على بنية معيارية: إذا كان وضع الحماية React الذي تم اختياره يسمح لك بإضافة مجلدات وملفات إلى مشروعك ، فقم بتقسيم مشروعك إلى مكونات صغيرة قابلة لإعادة الاستخدام.
• تنظيم ملفاتك: قد يكون لديك العديد من المجلدات والملفات مع زيادة حجم المشروع. قم بتجميع المجلدات والملفات الخاصة بك للرجوع إليها بسهولة.
• اختر أسلوب تصميم متسق: يمكن أن يؤدي تحديد حل CSS-in-JS إلى تسهيل تصميم مكوناتك أثناء إنشاء تطبيق React الخاص بك.

خاتمة

نحن على ثقة من أن لديك الآن مجموعة متنوعة من صناديق رمل React التي يمكنك استخدامها لصقل مهارات بناء تطبيقات React الخاصة بك.

سيختلف اختيار React Sandbox اعتمادًا على سهولة الاستخدام وميزات أداة معينة.

تقدم بعض منصات React Sandbox وظائف أساسية ، بينما يقدم البعض الآخر ميزات متقدمة مثل التكامل مع أدوات التحكم في المصدر والتعاون.

يمكنك أيضًا استكشاف بعض مكتبات وأدوات اختبار React الخاصة بمشروع التطوير التالي.