الفرق بين المراجعتين لصفحة: «React/create a new react app»

من موسوعة حسوب
→ التعديل السابقالتعديل اللاحق ←
مرئينص الويكي
تحديث محتوى الصفحة.
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق جديد}}</noinclude>
<noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق جديد}}</noinclude>
أسهل طريقة للبدء بمشروع React جديد هي استخدام عدّة البدء.
''استعمل سلسلة الأدوات المدمجة (integrated toolchain) من أجل الحصول على أفضل تجربة استخدام وتطوير.''


'''ملاحظة:''' تشرح هذه الصّفحة إعداد تطبيق صفحة واحدة (single-page application) مع كل شيء تحتاجه من أجل سير عمل التطوير بسلاسة، بما في ذلك اكتشاف الأخطاء (linting)، والاختبار، وتحسينات الإنتاج، والمزيد من ذلك. تتطلّب هذه الأدوات كاملة المواصفات بعض الوقت ومساحة من القرص لتثبيتها.
تشرح هذه الصفحة بعض سلاسل الأدوات المشهورة في React التي تساعد في مهام مثل:
* تغيير حجم العديد من الملفات والمكونات.
* استعمال مكتبات من طرف ثالث من npm.
* الاكتشاف المبكر للأخطاء الشائعة.
* التعديل المباشر (Live-editing) على شيفرة [[CSS]] و [[JavaScript]] في البيئة التطويرية.
* تحسين المخرجات للبيئة الإنتاجية.
لا تتطلب سلسلة الأدوات التي سيوصى باستعمالها في هذه الصفحة أي ضبط لبدء استعمالها.


إن كنت تبحث عن بيئة خفيفة لتجربة React، فاذهب إلى صفحة [[React/try react|تجربة React]] بدلًا من ذلك. فقد يكون [https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html ملف HTML الوحيد] المذكور في تلك الصّفحة كافيًا لكي تبدأ.
== لما قد ترغب باستعمال سلسلة من الأدوات؟ ==
إن لم تكن لك سابق خبرة بالمشكلات التي ذُكرت آنفًا، أو لم تشعر بالراحة عند استعمال أدوات JavaScript بعد، [[React/add react to a website|أضف React كوسوم <code><script></code> مجرَّدة في صفحة HTML]] وافترض أنَّ [[React/add react to a website#.D8.A7.D8.AE.D8.AA.D9.8A.D8.A7.D8.B1.D9.8A: .D8.AC.D8.B1.D8.A8 React .D9.85.D8.B9 JSX|استعمال JSX]] أمر اختياري.


أخيرًا، إن لم تكن تبني تطبيق صفحة واحدة، فبإمكانك [[React/add react to an existing app|إضافة React إلى تطبيقك الحالي]] أو استخدامها عبر [[React/cdn links|شبكة توزيع المحتوى (اختصارًا CDN)]] و<nowiki/>[[React/react without jsx|بدون إنجاز خطوة البناء]].
هذه الطريقة أيضًا هي أبسطة طريقة لدمج React مع صفحة ويب. يمكن في أي وقت استعمال أي سلسلة من الأدوات مهما كانت ضخمة إن وجدت أنها مفيدة.


== إنشاء تطبيق React ==
== سلسلة الأدوات المقترحة ==
إنّ أفضل طريقة للبدء ببناء تطبيق صفحة واحدة في React هي استخدام الأمر <code>[http://github.com/facebookincubator/create-react-app create-react-app]</code>، فهو يُعدُّ لك بيئة التطوير بحيث تتمكّن من استخدام آخر ميّزات JavaScript، ويُزوِّدك بتجربة تطوير جميلة، ويُحسِّن تطبيقك من أجل الإنتاج. يجب أن تمتلك إصدار <code>NodeJs 6</code> فما فوق لديك:<syntaxhighlight lang="text">
يوصي فريق React بشكل أساسي الحلول التالية:
npm install -g create-react-app
* إن كنت تتعلم React أو تريد إنشاء تطبيق بصفحة واحدة، استعمل البيئة Create React App.
create-react-app my-app
* إن كنت تبني موقعًا يصيَّر من طرف الخادم (server-rendered website) مع Node.js، جرب استعمال Next.js.
* إن كنت تبني موقعًا ثابتًا يركز على المحتوى (static content-oriented website)، جرب استعمال Gatsby.
* إن كنت تبني مكتبة لمكون ما أو تدمج مع شيفرة أساسية (codebase)، جرب سلاسل من الأدوات الأكثر.


cd my-app
=== البيئة Create React App ===
npm start
إنَّ Create React App هي بيئة مناسبة ومريحة لتعلم React، وهي أفضل طريقة لبدء بناء تطبيق جديدة ذي صفحة واحدة في React.
 
يضبط الأمر create-react-app البيئة التطويرية الخاصة بك، وبذلك تستطيع استعمال أحدث ميزات JavaScript، والحصول على أفضل تجربة تطوير، بالإضافة إلى تحسين تطبيقك وتهيئته للإنتاج. ستحتاج إلى الإصدار 6 من Node.js أو ما بعده والإصدار 5.2 من npm أو ما بعده على جهازك. لإنشاء مشروع جديد، نفذ ما يلي:


</syntaxhighlight>إن كنت تمتلك إصدار <code>npm 5.2.0</code> فما فوق فبإمكانك استخدام الأمر <code>[https://www.npmjs.com/package/npx npx]</code> بدلًا من ذلك:<syntaxhighlight lang="text">
s<syntaxhighlight lang="shell">
npx create-react-app my-app
npx create-react-app my-app
cd my-app
cd my-app
npm start
npm start
</syntaxhighlight>لا يتعامل الأمر <code>create-react-app</code> مع منطق الخلفيّة (backend logic) أو قواعد البيانات، فهو يُنشِئ خط بناء للواجهة الأماميّة (frontend) بحيث يُمكنِك استخدامها مع أي خلفيّة تريد، ويستخدم أدوات بناء مثل [http://babeljs.io/ Babel] و [https://webpack.js.org/ webpack] خفيةً، ولكنّها تعمل بدون الحاجة لأي إعدادات.
</syntaxhighlight>'''ملاحظة''': الأمر <code>npx</code> ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع [https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b الإصدار 5.2 وما بعده من npm].


عندما تكون جاهزًا لتوزيع إنتاجك، فسيُنشِئ لك الأمر <code>npm run build</code> نسخة مُحسَّنة من تطبيقك في المجلّد <code>build</code>. بإمكانك أن تتعلّم المزيد حول الأمر <code>create-react-app</code> من خلال [https://github.com/facebookincubator/create-react-app#create-react-app- الملف التمهيدي له في github] و[https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents دليل المستخدم].
إنشاء تطبيق React لا يملئ فراغ الواجهة الخلفية أو قواعد البيانات. جلَّ ما يحدث هو إنشاء أنبوب بناء واجهة أمامية (frontend build pipeline)، لذا تستطيع استعماله مع أية واجهة خلفية تريد؛ على أي حال، لا تحتاج الآن إلى معرفة أي شي عن الواجهات الخلفية.


== معدات أخرى للبدء ==
عندما تصبح جاهزًا للنشر على البيئة الإناجية، سينئ تنفيذ الأمر npm run build نسخة مبنية محسَّنة من تطبيقك في المجلد 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 دليل المستخدم].
لقد أنشأنا [[React/starter kits|قائمة بمعدّات البدء المُقدَّمة من قبل طرف ثالث (third-party)]] والتي نوصي بها رسميًّا.


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


يُمكنك التحقّق أيضًا من [[React/starter kits|قائمة معدّات البدء الأخرى]] التي يُساهِم بها مجتمع React.
تعلم المزيد حول Next.js من [https://nextjs.org/learn/ الدليل الرسمي] الموجود على [https://nextjs.org موقعه].


== المستوى المتقدم ==
إن كنت ترغب بإعداد مشروعك يدويًّا فانظر إلى فقرة تثبيت React من صفحة [[React/add react to an existing app|إضافة React إلى تطبيق موجود]]..
==انظر أيضًا==
==انظر أيضًا==
*[[React/try react|تجربة React]]
*[[React/try react|تجربة React]]
*إضافة React إلى تطبيق جديد (الصفحة الحالية)
*[[React/add react to an existing app|إضافة React إلى تطبيق موجود]]
*[[React/add react to an existing app|إضافة React إلى تطبيق موجود]]
*[[React/cdn links|روابط شبكة توزيع المحتوى CDN]]
*[[React/cdn links|روابط شبكة توزيع المحتوى CDN]]

مراجعة 16:01، 20 فبراير 2019

استعمل سلسلة الأدوات المدمجة (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، والحصول على أفضل تجربة تطوير، بالإضافة إلى تحسين تطبيقك وتهيئته للإنتاج. ستحتاج إلى الإصدار 6 من Node.js أو ما بعده والإصدار 5.2 من npm أو ما بعده على جهازك. لإنشاء مشروع جديد، نفذ ما يلي:

s

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

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

إنشاء تطبيق React لا يملئ فراغ الواجهة الخلفية أو قواعد البيانات. جلَّ ما يحدث هو إنشاء أنبوب بناء واجهة أمامية (frontend build pipeline)، لذا تستطيع استعماله مع أية واجهة خلفية تريد؛ على أي حال، لا تحتاج الآن إلى معرفة أي شي عن الواجهات الخلفية.

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

Next.js

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

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

انظر أيضًا

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=React/create_a_new_react_app&oldid=27817»