إنشاء تطبيق React جديد

استعمل سلسلة الأدوات المدمجة (integrated toolchain) من أجل الحصول على أفضل تجربة استخدام وتطوير.

تشرح هذه الصفحة بعض سلاسل الأدوات المشهورة في React التي تساعد في مهام مثل:

• تغيير حجم العديد من الملفات والمكونات.
• استعمال مكتبات من طرف ثالث من npm.
• الاكتشاف المبكر عن الأخطاء الشائعة.
• التعديل المباشر (Live-editing) على شيفرة CSS و JavaScript في البيئة التطويرية.
• تحسين المخرجات للبيئة الإنتاجية.

لا تتطلب سلسلة الأدوات التي سيوصى باستعمالها في هذه الصفحة أي ضبط مسبق لبدء استعمالها.

قد لا ترغب باستعمال سلسلة من الأدوات

إن لم تكن لك سابق خبرة بالمشكلات التي ذُكرت آنفًا، أو لم تشعر بالراحة عند استعمال أدوات JavaScript بعد، أضف React كوسوم <script> مجرَّدة في صفحة HTML, وافترض أنَّ استعمال JSX أمر اختياري.

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

سلسلة الأدوات المقترحة

يوصي فريق React بشكل أساسي الحلول التالية:

• إن كنت تتعلم React أو تريد إنشاء تطبيق ذي صفحة واحدة app, إستعمل البئية Create React App.
• إن كنت تبني موقعًا يصيَّر من طرف الخادم (server-rendered website) مع Node.js, جرب استعمال Next.js.
• إن كنت تبني موقعًا ثابتًا يركز على المحتوى (static content-oriented website), جرب استعمال Gatsby.
• إن كنت تبني مكتبة لمكون ما or دمج مع شيفرة أساسية (codebase), جرب استعمال سلاسل أدوات ذات مرونة أكبر.

البيئة Create React App

إنَّ Create React App هي بيئة مناسبة ومريحة لتعلم React, هي أفضل طريقة لبدء بناء تطبيق جديدة ذي صفحة وحيدة في React.

يضبط الأمر create-react-app البيئة التطويرية الخاصة بك، وبذلك تستطيع استعمال أحدث ميزات JavaScript، والحصول على أفضل تجربة تطوير، بالإضافة إلى تحسين تطبيقك وتهيئته للإنتاج. ستحتاج إلى الإصدار 10.16 من Node أو ما بعده والإصدار 5.6 من npm أو ما بعده على جهازك. لإنشاء مشروع جديد، نفذ ما يلي:

npx create-react-app my-app
cd my-app
npm start

ملاحظة

الأمر npx ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع الإصدار 5.2 وما بعده من npm.

إنشاء تطبيق React لا يملئ فراغ الواجهة الخلفية أو قواعد البيانات. جلَّ ما يحدث هو إنشاء أنبوب بناء واجهة أمامية (frontend build pipeline)، لذا تستطيع استعماله مع أية واجهة خلفية تريد؛ على أي حال، لا تحتاج الآن إلى معرفة أي شي عن الواجهات الخلفية. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

عندما تصبح جاهزًا للنشر على البيئة الإنتاجية، سينشئ تنفيذ الأمر npm run build نسخة مبنية محسَّنة من تطبيقك في المجلد build. ستطيع تعلم المزيد حول البيئة Create React App من ملف اقرأني (README) الخاص بها و دليل المستخدم.

Next.js

يعدُّ Next.js إطار عمل مشهور وخفيف لبناء التطبيقات الثابتة والمصيرة من طرف الخادم مع React. يتضمن حلولًا غير تقليدية للتنسيق والتوجيه, ويفترض أنَّك تستعمل Node.js بيئةً للخادم.

تعلم المزيد حول Next.js من الدليل الرسمي الموجود على موقعه.

Gatsby

الأداة Gatsby هي أفضل وسيلة لإنشاء مواقع ويب ساكنة مع React. إذ تمكِّننا من استعمال مكونات React ولكن مع تصيير مخرجات HTML و CSS مسبقًا لضمان الحصول على أسرع زمن تحميل.

يمكنك تعلم الأداة Gatsby من الدليل الرسمي لها و معرض عدة البدء.

سلاسلة أدوات ذات مرونة أكبر

سلاسل الأدوات التالية توفر مرونةً أكبر وخيارات أكثر. ننصح المستخدمين ذوي الخبرة باستعمالها:

• Neutrino تدمج قوة webpack مع بساطة الضبط المسبق الافتراضي (presets)، وتُضمِّن ضبطًا مسبقًا لتطبيقات React و مكونات React.
• Nx هي مجموعة أدوات لتطوير monorepo كامل الحزمة ، مع دعم مضمن لـ React و Next.js و [Express] (https://expressjs.com/) والمزيد.
• Parcel أداة سريعة لتحزيم تطبيقات الويب التي تعمل مع React دون أي ضبط.
• Razzle هو إطار عمل تصيير من طرف الخادم ولا يتطلب أي ضبط ولكن يتسم بالمرونة أكثر من إطار العمل Next.js.

إنشاء سلسلة أدوات (toolchain) من الصفر

سلسلة أدوات بناء شيفرة جافاسكريبت تتكون عادةً من:

• مدير حزم مثل Yarn أو npm.يمكِّنك هذا المدير من الاستفادة قابلية اتساع بيئة العمل عبر تثبيت الحزم المتنوعة الموفرة من طرف ثالث وتحديثها بسهولة.
• محزِّم مثل webpack أو Parcel. يمكِّنك المحزِّم من كتابة شيفرة لوحدةٍ ما وتحزيمها في حُزَمٍ صغيرة لتحسين زمن التحميل.
• مفسر مثل Babel. يمكِّنك المفسر من كتابة شيفرة جافاسكريبت بأحدث إصدار وتعمل في الإصدارات القديمة من المتصفحات.

إن كنت تفضِّل إعداد سلسلة أدوات جافاسكريبت الخاصة بك من الصفر، اطلع على هذا الدليل لذي يعيد إنشاء بعض وظائف البيئة Create React App.

لا تنسَ التأكد من إعداد سلسلة أدواتك المخصصة من أجل الإنتاج بشكل جيد ومناسب.