عرض مصدر React/create a new react app

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

== مصادر ==
* [https://reactjs.org/docs/add-react-to-a-new-app.html صفحة إضافة React إلى تطبيق جديد في توثيق React الرسمي].
[[تصنيف:React]]