الفرق بين المراجعتين لصفحة: «React/create a new react app»
Kinan-mawed (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق جديد}}</noinclude>' |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق جديد}}</noinclude> | <noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق جديد}}</noinclude> | ||
أسهل طريقة للبدء بمشروع React جديد هي استخدام عدّة البدء. | |||
'''ملاحظة:''' تشرح هذه الصّفحة إعداد تطبيق صفحة واحدة (single-page application) مع كل شيء تحتاجه من أجل سير عمل التطوير بسلاسة، بما في ذلك اكتشاف الأخطاء (linting)، والاختبار، وتحسينات الإنتاج، والمزيد من ذلك. تتطلّب هذه الأدوات كاملة المواصفات بعض الوقت ومساحة من القرص لتثبيتها. | |||
إن كنت تبحث عن بيئة خفيفة لتجربة React، فاذهب إلى صفحة [[React/try react|تجربة React]] بدلًا من ذلك. فقد يكون [https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html ملف HTML الوحيد] المذكور في تلك الصّفحة كافيًا لكي تبدأ. | |||
أخيرًا، إن لم تكن تبني تطبيق صفحة واحدة، فبإمكانك [[React/add react to an existing app|إضافة React إلى تطبيقك الحالي]] أو استخدامها عبر [[React/cdn links|شبكة توزيع المحتوى (اختصارًا CDN)]] و<nowiki/>[[React/react without jsx|بدون إنجاز خطوة البناء]]. | |||
== إنشاء تطبيق React == | |||
إنّ أفضل طريقة للبدء ببناء تطبيق صفحة واحدة في React هي استخدام الأمر <code>[http://github.com/facebookincubator/create-react-app create-react-app]</code>، فهو يُعدُّ لك بيئة التطوير بحيث تتمكّن من استخدام آخر ميّزات JavaScript، ويُزوِّدك بتجربة تطوير جميلة، ويُحسِّن تطبيقك من أجل الإنتاج. يجب أن تمتلك إصدار <code>NodeJs 6</code> فما فوق لديك:<syntaxhighlight lang="text"> | |||
npm install -g create-react-app | |||
create-react-app my-app | |||
cd my-app | |||
npm start | |||
</syntaxhighlight>إن كنت تمتلك إصدار <code>npm 5.2.0</code> فما فوق فبإمكانك استخدام الأمر <code>[https://www.npmjs.com/package/npx npx]</code> بدلًا من ذلك:<syntaxhighlight lang="text"> | |||
npx create-react-app my-app | |||
cd my-app | |||
npm start | |||
</syntaxhighlight>لا يتعامل الأمر <code>create-react-app</code> مع منطق الخلفيّة (backend logic) أو قواعد البيانات، فهو يُنشِئ خط بناء للواجهة الأماميّة (frontend) بحيث يُمكنِك استخدامها مع أي خلفيّة تريد، ويستخدم أدوات بناء مثل [http://babeljs.io/ Babel] و [https://webpack.js.org/ webpack] خفيةً، ولكنّها تعمل بدون الحاجة لأي إعدادات. | |||
عندما تكون جاهزًا لتوزيع إنتاجك، فسيُنشِئ لك الأمر <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/starter kits|قائمة بمعدّات البدء المُقدَّمة من قبل طرف ثالث (third-party)]] والتي نوصي بها رسميًّا. | |||
تختلف هذه المعدّات قليلًا في توجهها ولكنّها جاهزة للإنتاج، ومُصانة بشكل جيّد، ولا تتطلّب إعدادًا للبدء. | |||
يُمكنك التحقّق أيضًا من [[React/starter kits|قائمة معدّات البدء الأخرى]] التي يُساهِم بها مجتمع React. | |||
== المستوى المتقدم == | |||
إن كنت ترغب بإعداد مشروعك يدويًّا فانظر إلى فقرة تثبيت React من صفحة [[React/add react to an existing app|إضافة React إلى تطبيق موجود]]. | |||
== مصادر == | |||
* [https://reactjs.org/docs/add-react-to-a-new-app.html صفحة إضافة React إلى تطبيق جديد في توثيق React الرسمي]. | |||
[[تصنيف:React]] | |||
مراجعة 12:08، 9 يوليو 2018
أسهل طريقة للبدء بمشروع React جديد هي استخدام عدّة البدء.
ملاحظة: تشرح هذه الصّفحة إعداد تطبيق صفحة واحدة (single-page application) مع كل شيء تحتاجه من أجل سير عمل التطوير بسلاسة، بما في ذلك اكتشاف الأخطاء (linting)، والاختبار، وتحسينات الإنتاج، والمزيد من ذلك. تتطلّب هذه الأدوات كاملة المواصفات بعض الوقت ومساحة من القرص لتثبيتها.
إن كنت تبحث عن بيئة خفيفة لتجربة React، فاذهب إلى صفحة تجربة React بدلًا من ذلك. فقد يكون ملف HTML الوحيد المذكور في تلك الصّفحة كافيًا لكي تبدأ.
أخيرًا، إن لم تكن تبني تطبيق صفحة واحدة، فبإمكانك إضافة React إلى تطبيقك الحالي أو استخدامها عبر شبكة توزيع المحتوى (اختصارًا CDN) وبدون إنجاز خطوة البناء.
إنشاء تطبيق React
إنّ أفضل طريقة للبدء ببناء تطبيق صفحة واحدة في React هي استخدام الأمر create-react-app، فهو يُعدُّ لك بيئة التطوير بحيث تتمكّن من استخدام آخر ميّزات JavaScript، ويُزوِّدك بتجربة تطوير جميلة، ويُحسِّن تطبيقك من أجل الإنتاج. يجب أن تمتلك إصدار NodeJs 6 فما فوق لديك:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
إن كنت تمتلك إصدار npm 5.2.0 فما فوق فبإمكانك استخدام الأمر npx بدلًا من ذلك:
npx create-react-app my-app
cd my-app
npm start
لا يتعامل الأمر create-react-app مع منطق الخلفيّة (backend logic) أو قواعد البيانات، فهو يُنشِئ خط بناء للواجهة الأماميّة (frontend) بحيث يُمكنِك استخدامها مع أي خلفيّة تريد، ويستخدم أدوات بناء مثل Babel و webpack خفيةً، ولكنّها تعمل بدون الحاجة لأي إعدادات.
عندما تكون جاهزًا لتوزيع إنتاجك، فسيُنشِئ لك الأمر npm run build نسخة مُحسَّنة من تطبيقك في المجلّد build. بإمكانك أن تتعلّم المزيد حول الأمر create-react-app من خلال الملف التمهيدي له في github ودليل المستخدم.
معدات أخرى للبدء
لقد أنشأنا قائمة بمعدّات البدء المُقدَّمة من قبل طرف ثالث (third-party) والتي نوصي بها رسميًّا.
تختلف هذه المعدّات قليلًا في توجهها ولكنّها جاهزة للإنتاج، ومُصانة بشكل جيّد، ولا تتطلّب إعدادًا للبدء.
يُمكنك التحقّق أيضًا من قائمة معدّات البدء الأخرى التي يُساهِم بها مجتمع React.
المستوى المتقدم
إن كنت ترغب بإعداد مشروعك يدويًّا فانظر إلى فقرة تثبيت React من صفحة إضافة React إلى تطبيق موجود.