create react app
v5.0.1
قم بإنشاء تطبيقات React بدون تكوين البناء.
يعمل تطبيق Create React على أنظمة التشغيل macOS، وWindows، وLinux.
إذا لم ينجح شيء ما، يرجى تقديم مشكلة.
إذا كانت لديك أسئلة أو كنت بحاجة إلى مساعدة، فيرجى طرحها في مناقشات GitHub.
npx create-react-app my-app
cd my-app
npm start إذا كنت قد قمت مسبقًا بتثبيت create-react-app على مستوى العالم عبر npm install -g create-react-app ، فنوصيك بإلغاء تثبيت الحزمة باستخدام npm uninstall -g create-react-app أو yarn global remove create-react-app لضمان أن npx يستخدم دائمًا أحدث إصدار.
(يأتي npx مع npm 5.2+ والإصدارات الأحدث، راجع التعليمات الخاصة بإصدارات npm الأقدم)
ثم افتح http://localhost:3000/ لرؤية تطبيقك.
عندما تكون جاهزًا للنشر في الإنتاج، قم بإنشاء حزمة مصغرة باستخدام npm run build .
لا تحتاج إلى تثبيت أو تكوين أدوات مثل webpack أو Babel.
لقد تم تكوينها مسبقًا وإخفائها حتى تتمكن من التركيز على الكود.
قم بإنشاء مشروع، وأنت على ما يرام.
ستحتاج إلى Node 14.0.0 أو إصدار أحدث على جهاز التطوير المحلي الخاص بك (لكنه غير مطلوب على الخادم). نوصي باستخدام أحدث إصدار من LTS. يمكنك استخدام nvm (macOS/Linux) أو nvm-windows لتبديل إصدارات Node بين المشاريع المختلفة.
لإنشاء تطبيق جديد، يمكنك اختيار إحدى الطرق التالية:
npx create-react-app my-app(npx هي أداة تشغيل الحزم التي تأتي مع npm 5.2+ والإصدارات الأحدث، راجع التعليمات الخاصة بإصدارات npm الأقدم)
npm init react-app my-app npm init <initializer> متاح في npm 6+
yarn create react-app my-app yarn create <starter-kit-package> متاح في Yarn 0.25+
سيقوم بإنشاء دليل يسمى my-app داخل المجلد الحالي.
داخل هذا الدليل، سيتم إنشاء بنية المشروع الأولية وتثبيت التبعيات المتعدية:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
لا يوجد تكوين أو بنية مجلدات معقدة، فقط الملفات التي تحتاجها لإنشاء تطبيقك.
بمجرد الانتهاء من التثبيت، يمكنك فتح مجلد المشروع الخاص بك:
cd my-appداخل المشروع الذي تم إنشاؤه حديثًا، يمكنك تشغيل بعض الأوامر المضمنة:
npm start أو yarn start تشغيل التطبيق في وضع التطوير.
افتح http://localhost:3000 لمشاهدته في المتصفح.
سيتم إعادة تحميل الصفحة تلقائيًا إذا قمت بإجراء تغييرات على الكود.
سترى أخطاء البناء وتحذيرات الوبر في وحدة التحكم.
npm test أو yarn test يقوم بتشغيل مراقب الاختبار في الوضع التفاعلي.
افتراضيًا، يتم تشغيل الاختبارات المتعلقة بالملفات التي تم تغييرها منذ آخر التزام.
اقرأ المزيد عن الاختبار.
npm run build أو yarn build ينشئ التطبيق للإنتاج في مجلد build .
فهو يجمع React بشكل صحيح في وضع الإنتاج ويحسن البناء للحصول على أفضل أداء.
يتم تصغير البنية وتتضمن أسماء الملفات التجزئة.
تطبيقك جاهز للنشر.
يمكنك العثور على تعليمات تفصيلية حول استخدام تطبيق Create React والعديد من النصائح في الوثائق الخاصة به.
يرجى الرجوع إلى دليل المستخدم لهذه المعلومات وغيرها.
تبعية واحدة: هناك تبعية بناء واحدة فقط. يستخدم حزمة الويب، وBabel، وESLint، وغيرها من المشاريع الرائعة، ولكنه يوفر تجربة منظمة متماسكة فوقها.
لا يوجد تكوين مطلوب: لا تحتاج إلى تكوين أي شيء. يتم التعامل مع التكوين الجيد بشكل معقول لكل من إصدارات التطوير والإنتاج حتى تتمكن من التركيز على كتابة التعليمات البرمجية.
لا يوجد قفل: يمكنك "الإخراج" إلى إعداد مخصص في أي وقت. قم بتشغيل أمر واحد، وسيتم نقل جميع تبعيات التكوين والبناء مباشرة إلى مشروعك، حتى تتمكن من المتابعة من حيث توقفت.
ستحتوي بيئتك على كل ما تحتاجه لإنشاء تطبيق React حديث مكون من صفحة واحدة:
-webkit- أو بادئات أخرى.[email protected] والإصدارات الأحدث )راجع هذا الدليل للحصول على نظرة عامة حول كيفية توافق هذه الأدوات معًا.
وتتمثل المفاضلة في أن هذه الأدوات تم إعدادها مسبقًا للعمل بطريقة معينة . إذا كان مشروعك يحتاج إلى مزيد من التخصيص، فيمكنك "إخراجه" وتخصيصه، ولكن بعد ذلك ستحتاج إلى الحفاظ على هذا التكوين.
يعد إنشاء تطبيق React مناسبًا تمامًا لما يلي:
فيما يلي بعض الحالات الشائعة التي قد ترغب فيها في تجربة شيء آخر:
إذا كنت تريد تجربة React بدون المئات من تبعيات أدوات البناء المتعدية، ففكر في استخدام ملف HTML واحد أو وضع الحماية عبر الإنترنت بدلاً من ذلك.
إذا كنت بحاجة إلى دمج كود React مع إطار عمل قالب من جانب الخادم مثل Rails أو Django أو Symfony، أو إذا كنت لا تنشئ تطبيقًا من صفحة واحدة ، ففكر في استخدام nwb أو Neutrino الأكثر مرونة. بالنسبة لـ Rails على وجه التحديد، يمكنك استخدام Rails Webpacker. بالنسبة إلى Symfony، جرب حزمة الويب الخاصة بـ Symfony Encore.
إذا كنت بحاجة إلى نشر مكون React ، فيمكن لـ nwb أيضًا القيام بذلك، بالإضافة إلى الإعداد المسبق لمكونات تفاعل Neutrino.
إذا كنت تريد تنفيذ عرض الخادم باستخدام React وNode.js، فراجع Next.js أو Razzle. يعد تطبيق Create React App حياديًا للواجهة الخلفية، وينتج فقط حزم HTML/JS/CSS الثابتة.
إذا كان موقع الويب الخاص بك ثابتًا في الغالب (على سبيل المثال، محفظة أو مدونة)، فكر في استخدام Gatsby أو Next.js. على عكس تطبيق Create React، يقوم Gatsby بعرض موقع الويب مسبقًا إلى HTML في وقت الإنشاء. يدعم Next.js كلاً من عرض الخادم والعرض المسبق.
أخيرًا، إذا كنت بحاجة إلى المزيد من التخصيص ، فاطلع على النيوترينو وإعدادات React المسبقة الخاصة به.
يمكن لجميع الأدوات المذكورة أعلاه العمل بتكوين قليل أو بدون تكوين.
إذا كنت تفضل تكوين الإصدار بنفسك، فاتبع هذا الدليل.
هل تبحث عن شيء مشابه، ولكن عن React Native؟
تحقق من معرض CLI.
نود أن نساعدك في create-react-app ! راجع CONTRIBUTING.md لمزيد من المعلومات حول ما نبحث عنه وكيفية البدء.
إنشاء تطبيق React هو مشروع يديره المجتمع وجميع المساهمين متطوعين. إذا كنت ترغب في دعم التطوير المستقبلي لتطبيق Create React، فيرجى التفكير في التبرع لمجموعتنا المفتوحة.
هذا المشروع موجود بفضل جميع الأشخاص الذين ساهموا فيه.
شكرًا لـ Netlify على استضافة وثائقنا.
نحن ممتنون لمؤلفي المشاريع الحالية ذات الصلة لأفكارهم وتعاونهم:
إنشاء تطبيق React هو برنامج مفتوح المصدر مرخص باسم MIT. تم ترخيص شعار Create React App بموجب ترخيص Creative Commons Attribution 4.0 International.
