الفرق بين المراجعتين ل"React/create a new react app"
< React
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) |
(تحديث) |
||
| (5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
| − | <noinclude>{{DISPLAYTITLE: | + | <noinclude>{{DISPLAYTITLE:إنشاء تطبيق React جديد}}</noinclude> |
''استعمل سلسلة الأدوات المدمجة (integrated toolchain) من أجل الحصول على أفضل تجربة استخدام وتطوير.'' | ''استعمل سلسلة الأدوات المدمجة (integrated toolchain) من أجل الحصول على أفضل تجربة استخدام وتطوير.'' | ||
| سطر 5: | سطر 5: | ||
* تغيير حجم العديد من الملفات والمكونات. | * تغيير حجم العديد من الملفات والمكونات. | ||
* استعمال مكتبات من طرف ثالث من npm. | * استعمال مكتبات من طرف ثالث من npm. | ||
| − | * الاكتشاف المبكر | + | * الاكتشاف المبكر عن الأخطاء الشائعة. |
* التعديل المباشر (Live-editing) على شيفرة [[CSS]] و [[JavaScript]] في البيئة التطويرية. | * التعديل المباشر (Live-editing) على شيفرة [[CSS]] و [[JavaScript]] في البيئة التطويرية. | ||
* تحسين المخرجات للبيئة الإنتاجية. | * تحسين المخرجات للبيئة الإنتاجية. | ||
| سطر 17: | سطر 17: | ||
== سلسلة الأدوات المقترحة == | == سلسلة الأدوات المقترحة == | ||
يوصي فريق [[React]] بشكل أساسي الحلول التالية: | يوصي فريق [[React]] بشكل أساسي الحلول التالية: | ||
| − | * إن كنت تتعلم [[React]] أو تريد إنشاء [[React/glossary#.D8.A7.D9.84.D8.AA.D8.B7.D8.A8.D9.8A.D9.82 .D9.88.D8.AD.D9.8A.D8.AF .D8.A7.D9.84.D8.B5.D9.81.D8.AD.D8.A9|تطبيق ذي صفحة واحدة]]، استعمل البيئة Create React App. | + | * إن كنت تتعلم [[React]] أو تريد إنشاء [[React/glossary#.D8.A7.D9.84.D8.AA.D8.B7.D8.A8.D9.8A.D9.82 .D9.88.D8.AD.D9.8A.D8.AF .D8.A7.D9.84.D8.B5.D9.81.D8.AD.D8.A9|تطبيق ذي صفحة واحدة]]، استعمل [[React/add react to a new app#.D8.A7.D9.84.D8.A8.D9.8A.D8.A6.D8.A9 Create React App|البيئة Create React App]]. |
| − | * إن كنت تبني موقعًا يصيَّر من طرف الخادم (server-rendered website) مع Node. | + | * إن كنت تبني موقعًا يصيَّر من طرف الخادم (server-rendered website) مع [[Node.js]]، جرب استعمال [[React/add react to a new app#Next.js|Next.js]]. |
| − | * إن كنت تبني موقعًا ثابتًا يركز على المحتوى (static content-oriented website)، جرب استعمال Gatsby. | + | * إن كنت تبني موقعًا ثابتًا يركز على المحتوى (static content-oriented website)، جرب استعمال [[React/add react to a new app#Gatsby|Gatsby]]. |
| − | * إن كنت تبني مكتبة لمكون ما أو تدمج مع شيفرة أساسية (codebase)، جرب سلاسل | + | * إن كنت تبني مكتبة لمكون ما أو تدمج مع شيفرة أساسية (codebase)، جرب استعمال [[React/add react to a new app#.D8.B3.D9.84.D8.A7.D8.B3.D9.84.D8.A9 .D8.A3.D8.AF.D9.88.D8.A7.D8.AA .D8.B0.D8.A7.D8.AA .D9.85.D8.B1.D9.88.D9.86.D8.A9 .D8.A3.D9.83.D8.A8.D8.B1|سلاسل أدوات ذات مرونة أكبر]]. |
=== البيئة Create React App === | === البيئة Create React App === | ||
| − | إنَّ Create React App هي بيئة مناسبة ومريحة لتعلم | + | إنَّ Create React App هي بيئة مناسبة ومريحة لتعلم [[React]]، وهي أفضل طريقة لبدء بناء تطبيق جديدة ذي صفحة وحيدة في [[React]]. |
| − | يضبط الأمر create-react-app البيئة التطويرية الخاصة بك، وبذلك تستطيع استعمال أحدث ميزات | + | يضبط الأمر <code>create-react-app</code> البيئة التطويرية الخاصة بك، وبذلك تستطيع استعمال أحدث ميزات [[JavaScript]]، والحصول على أفضل تجربة تطوير، بالإضافة إلى تحسين تطبيقك وتهيئته للإنتاج. ستحتاج إلى الإصدار 8.1 من [[Node.js]] أو ما بعده والإصدار 5.6 من npm أو ما بعده على جهازك. لإنشاء مشروع جديد، نفذ ما يلي:<syntaxhighlight lang="shell"> |
| − | |||
| − | |||
npx create-react-app my-app | npx create-react-app my-app | ||
cd my-app | cd my-app | ||
| سطر 33: | سطر 31: | ||
</syntaxhighlight>'''ملاحظة''': الأمر <code>npx</code> ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع [https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b الإصدار 5.2 وما بعده من npm]. | </syntaxhighlight>'''ملاحظة''': الأمر <code>npx</code> ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع [https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b الإصدار 5.2 وما بعده من npm]. | ||
| − | إنشاء تطبيق React لا يملئ فراغ الواجهة الخلفية أو قواعد البيانات. جلَّ ما يحدث هو إنشاء أنبوب بناء واجهة أمامية (frontend build pipeline)، لذا تستطيع استعماله مع أية واجهة خلفية تريد؛ | + | إنشاء تطبيق [[React]] لا يملئ فراغ الواجهة الخلفية أو قواعد البيانات. جلَّ ما يحدث هو إنشاء أنبوب بناء واجهة أمامية (frontend build pipeline)، لذا تستطيع استعماله مع أية واجهة خلفية تريد؛ فهو يستخدم في الخلفية [https://babeljs.io/ Babel] و [https://webpack.js.org/ webpack]، بيد أنّك لا تحتاج إلى معرفة أي شي عن الواجهات الخلفية. |
| − | عندما تصبح جاهزًا للنشر على البيئة | + | عندما تصبح جاهزًا للنشر على البيئة الإنتاجية، سينشئ تنفيذ الأمر <code>npm run build</code> نسخة مبنية محسَّنة من تطبيقك في المجلد build. تستطيع تعلم المزيد حول البيئة Create React App من ملف [https://github.com/facebook/create-react-app#create-react-app- اقرأني] (README) الخاص بها و[https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents دليل المستخدم]. |
=== Next.js === | === Next.js === | ||
| − | + | يعدُّ [[Next.js]] إطار عمل مشهور وخفيف لبناء التطبيقات الثابتة والمصيرة من طرف الخادم مع [[React]]. يتضمن حلولًا غير تقليدية للتنسيق والتوجيه، ويفترض أنَّك تستعمل [[Node.js]] بيئةً للخادك. | |
| − | تعلم المزيد حول Next.js من [https://nextjs.org/learn/ الدليل الرسمي] الموجود على [https://nextjs.org موقعه]. | + | تعلم المزيد حول [[Next.js]] من [https://nextjs.org/learn/ الدليل الرسمي] الموجود على [https://nextjs.org موقعه]. |
=== Gatsby === | === Gatsby === | ||
| − | الأداة Gatsby هي أفضل وسيلة | + | الأداة Gatsby هي أفضل وسيلة لإنشاء مواقع ويب ساكنة مع [[React]]، إذ تمكِّننا من استعمال مكونات [[React]] ولكن مع تصيير مخرجات [[HTML]] و [[CSS]] مسبقًا لضمان الحصول على أسرع زمن تحميل. |
يمكنك تعلم الأداة Gatsby من [https://www.gatsbyjs.org/docs/ الدليل الرسمي] لها و[https://www.gatsbyjs.org/docs/gatsby-starters/ معرض عدة البدء]. | يمكنك تعلم الأداة Gatsby من [https://www.gatsbyjs.org/docs/ الدليل الرسمي] لها و[https://www.gatsbyjs.org/docs/gatsby-starters/ معرض عدة البدء]. | ||
| سطر 50: | سطر 48: | ||
سلاسل الأدوات التالية توفر مرونةً أكبر وخيارات أكثر. ننصح المستخدمين ذوي الخبرة باستعمالها: | سلاسل الأدوات التالية توفر مرونةً أكبر وخيارات أكثر. ننصح المستخدمين ذوي الخبرة باستعمالها: | ||
* [https://neutrinojs.org/ Neutrino]: تدمج قوة [https://webpack.js.org/ webpack] مع بساطة الضبط المسبق الافتراضي (presets)، وتُضمِّن ضبطًا مسبقًا [https://neutrinojs.org/packages/react/ لتطبيقات React] و[https://neutrinojs.org/packages/react-components/ مكونات React]. | * [https://neutrinojs.org/ Neutrino]: تدمج قوة [https://webpack.js.org/ webpack] مع بساطة الضبط المسبق الافتراضي (presets)، وتُضمِّن ضبطًا مسبقًا [https://neutrinojs.org/packages/react/ لتطبيقات React] و[https://neutrinojs.org/packages/react-components/ مكونات React]. | ||
| − | * [https:// | + | * [https://nx.dev/react Nx]: أداة للتطوير على مجلد واحد ( full-stack monorepo development). تدعم [[React]] و [[Next.js]] و [https://expressjs.com/ Express] وغيرها. |
* [https://parceljs.org/ Paracel]: أداة سريعة لتحزيم تطبيقات الويب التي [https://parceljs.org/recipes.html#react تعمل مع React] دون أي ضبط. | * [https://parceljs.org/ Paracel]: أداة سريعة لتحزيم تطبيقات الويب التي [https://parceljs.org/recipes.html#react تعمل مع React] دون أي ضبط. | ||
* [https://github.com/jaredpalmer/razzle Razzle]: هو إطار عمل تصيير من طرف الخادم ولا يتطلب أي ضبط ولكن يتسم بالمرونة أكثر من إطار العمل [[Next.js]]. | * [https://github.com/jaredpalmer/razzle Razzle]: هو إطار عمل تصيير من طرف الخادم ولا يتطلب أي ضبط ولكن يتسم بالمرونة أكثر من إطار العمل [[Next.js]]. | ||
== إنشاء سلسلة أدوات (toolchain) من الصفر == | == إنشاء سلسلة أدوات (toolchain) من الصفر == | ||
| − | سلسلة أدوات بناء شيفرة | + | سلسلة أدوات بناء شيفرة [[JavaScript]] تتكون عادةً من: |
* '''مدير حزم''' مثل [https://yarnpkg.com/ Yarn] أو [https://www.npmjs.com/ npm]. يمكِّنك هذا المدير من الاستفادة قابلية اتساع بيئة العمل عبر تثبيت الحزم المتنوعة الموفرة من طرف ثالث وتحديثها بسهولة. | * '''مدير حزم''' مثل [https://yarnpkg.com/ Yarn] أو [https://www.npmjs.com/ npm]. يمكِّنك هذا المدير من الاستفادة قابلية اتساع بيئة العمل عبر تثبيت الحزم المتنوعة الموفرة من طرف ثالث وتحديثها بسهولة. | ||
| − | * '''محزِّم''' مثل [https://webpack.js.org/ webpack] أو [https://parceljs.org/ Paracel]. | + | * '''محزِّم''' مثل [https://webpack.js.org/ webpack] أو [https://parceljs.org/ Paracel]. يمكِّنك المحزِّم من كتابة شيفرة لوحدةٍ ما وتحزيمها في حُزَمٍ صغيرة لتحسين زمن التحميل. |
| − | * '''مفسر''' مثل [http://babeljs.io/ بابل] (Babel). | + | * '''مفسر''' مثل [http://babeljs.io/ بابل] (Babel). يمكِّنك المفسر من كتابة شيفرة [[JavaScript]] بأحدث إصدار وتعمل في الإصدارات القديمة من المتصفحات. |
| − | إن كنت | + | إن كنت تفضِّل إعداد سلسلة أدوات [[JavaScript]] الخاصة بك من الصفر، اطلع على [https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658 هذا الدليل] الذي يعيد إنشاء بعض وظائف [[React/add react to a new app#.D8.A7.D9.84.D8.A8.D9.8A.D8.A6.D8.A9 Create React App|البيئة Create React App]]. |
لا تنسَ التأكد من [[React/optimizing performance#.D8.A7.D8.B3.D8.AA.D8.AE.D8.AF.D8.A7.D9.85 .D9.86.D8.B3.D8.AE.D8.A9 .D8.A7.D9.84.D8.A5.D9.86.D8.AA.D8.A7.D8.AC|إعداد سلسلة أدواتك المخصصة من أجل الإنتاج بشكل جيد ومناسب]]. | لا تنسَ التأكد من [[React/optimizing performance#.D8.A7.D8.B3.D8.AA.D8.AE.D8.AF.D8.A7.D9.85 .D9.86.D8.B3.D8.AE.D8.A9 .D8.A7.D9.84.D8.A5.D9.86.D8.AA.D8.A7.D8.AC|إعداد سلسلة أدواتك المخصصة من أجل الإنتاج بشكل جيد ومناسب]]. | ||
| سطر 71: | سطر 69: | ||
* [https://reactjs.org/docs/create-a-new-react-app.html صفحة إنشاء تطبيق React جديد في توثيق React الرسمي]. | * [https://reactjs.org/docs/create-a-new-react-app.html صفحة إنشاء تطبيق React جديد في توثيق React الرسمي]. | ||
[[تصنيف:React]] | [[تصنيف:React]] | ||
| + | [[تصنيف:React Installation]] | ||
المراجعة الحالية بتاريخ 09:03، 31 أكتوبر 2020
استعمل سلسلة الأدوات المدمجة (integrated toolchain) من أجل الحصول على أفضل تجربة استخدام وتطوير.
تشرح هذه الصفحة بعض سلاسل الأدوات المشهورة في React التي تساعد في مهام مثل:
- تغيير حجم العديد من الملفات والمكونات.
- استعمال مكتبات من طرف ثالث من npm.
- الاكتشاف المبكر عن الأخطاء الشائعة.
- التعديل المباشر (Live-editing) على شيفرة CSS و JavaScript في البيئة التطويرية.
- تحسين المخرجات للبيئة الإنتاجية.
لا تتطلب سلسلة الأدوات التي سيوصى باستعمالها في هذه الصفحة أي ضبط مسبق لبدء استعمالها.
قد لا ترغب باستعمال سلسلة من الأدوات
إن لم تكن لك سابق خبرة بالمشكلات التي ذُكرت آنفًا، أو لم تشعر بالراحة عند استعمال أدوات JavaScript بعد، أضف React كوسوم <script> مجرَّدة في صفحة HTML وافترض أنَّ استعمال JSX أمر اختياري.
هذه الطريقة أيضًا هي أبسطة طريقة لدمج React مع صفحة ويب. يمكن في أي وقت استعمال أي سلسلة من الأدوات مهما كانت ضخمة إن وجدت أنها مفيدة.
سلسلة الأدوات المقترحة
يوصي فريق React بشكل أساسي الحلول التالية:
- إن كنت تتعلم React أو تريد إنشاء تطبيق ذي صفحة واحدة، استعمل البيئة Create React App.
- إن كنت تبني موقعًا يصيَّر من طرف الخادم (server-rendered website) مع Node.js، جرب استعمال Next.js.
- إن كنت تبني موقعًا ثابتًا يركز على المحتوى (static content-oriented website)، جرب استعمال Gatsby.
- إن كنت تبني مكتبة لمكون ما أو تدمج مع شيفرة أساسية (codebase)، جرب استعمال سلاسل أدوات ذات مرونة أكبر.
البيئة Create React App
إنَّ Create React App هي بيئة مناسبة ومريحة لتعلم React، وهي أفضل طريقة لبدء بناء تطبيق جديدة ذي صفحة وحيدة في React.
يضبط الأمر create-react-app البيئة التطويرية الخاصة بك، وبذلك تستطيع استعمال أحدث ميزات JavaScript، والحصول على أفضل تجربة تطوير، بالإضافة إلى تحسين تطبيقك وتهيئته للإنتاج. ستحتاج إلى الإصدار 8.1 من Node.js أو ما بعده والإصدار 5.6 من npm أو ما بعده على جهازك. لإنشاء مشروع جديد، نفذ ما يلي:
npx create-react-app my-app
cd my-app
npm start
ملاحظة: الأمر npx ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع الإصدار 5.2 وما بعده من npm.
إنشاء تطبيق React لا يملئ فراغ الواجهة الخلفية أو قواعد البيانات. جلَّ ما يحدث هو إنشاء أنبوب بناء واجهة أمامية (frontend build pipeline)، لذا تستطيع استعماله مع أية واجهة خلفية تريد؛ فهو يستخدم في الخلفية Babel و webpack، بيد أنّك لا تحتاج إلى معرفة أي شي عن الواجهات الخلفية.
عندما تصبح جاهزًا للنشر على البيئة الإنتاجية، سينشئ تنفيذ الأمر 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: أداة للتطوير على مجلد واحد ( full-stack monorepo development). تدعم React و Next.js و Express وغيرها.
- Paracel: أداة سريعة لتحزيم تطبيقات الويب التي تعمل مع React دون أي ضبط.
- Razzle: هو إطار عمل تصيير من طرف الخادم ولا يتطلب أي ضبط ولكن يتسم بالمرونة أكثر من إطار العمل Next.js.
إنشاء سلسلة أدوات (toolchain) من الصفر
سلسلة أدوات بناء شيفرة JavaScript تتكون عادةً من:
- مدير حزم مثل Yarn أو npm. يمكِّنك هذا المدير من الاستفادة قابلية اتساع بيئة العمل عبر تثبيت الحزم المتنوعة الموفرة من طرف ثالث وتحديثها بسهولة.
- محزِّم مثل webpack أو Paracel. يمكِّنك المحزِّم من كتابة شيفرة لوحدةٍ ما وتحزيمها في حُزَمٍ صغيرة لتحسين زمن التحميل.
- مفسر مثل بابل (Babel). يمكِّنك المفسر من كتابة شيفرة JavaScript بأحدث إصدار وتعمل في الإصدارات القديمة من المتصفحات.
إن كنت تفضِّل إعداد سلسلة أدوات JavaScript الخاصة بك من الصفر، اطلع على هذا الدليل الذي يعيد إنشاء بعض وظائف البيئة Create React App.
لا تنسَ التأكد من إعداد سلسلة أدواتك المخصصة من أجل الإنتاج بشكل جيد ومناسب.