react chat
1.0.0
تم تمهيد هذا المشروع باستخدام تطبيق Create React.
ستجد أدناه بعض المعلومات حول كيفية تنفيذ المهام الشائعة.
يمكنك العثور على أحدث نسخة من هذا الدليل هنا.
<title>publicpublic.env<meta> ديناميكية على الخادمnpm start التغييراتnpm test معلق على نظام التشغيل macOS Sierranpm run build مبكرًا جدًاnpm run build على Herokunpm run build في التصغيرينقسم إنشاء تطبيق React إلى حزمتين:
create-react-app هو أداة مساعدة عامة لسطر الأوامر تستخدمها لإنشاء مشاريع جديدة.react-scripts تبعية تطويرية في المشاريع التي تم إنشاؤها (بما في ذلك هذا المشروع). لا تحتاج أبدًا إلى تحديث create-react-app نفسه: فهو يفوض كل الإعدادات إلى react-scripts .
عندما تقوم بتشغيل create-react-app ، فإنه يقوم دائمًا بإنشاء المشروع باستخدام أحدث إصدار من react-scripts حتى تحصل على جميع الميزات والتحسينات الجديدة في التطبيقات التي تم إنشاؤها حديثًا تلقائيًا.
لتحديث مشروع موجود إلى إصدار جديد من react-scripts ، افتح سجل التغيير، وابحث عن الإصدار الذي تستخدمه حاليًا (راجع package.json في هذا المجلد إذا لم تكن متأكدًا)، وقم بتطبيق تعليمات الترحيل للإصدار الأحدث الإصدارات.
في معظم الحالات، يجب أن يكون رفع إصدار react-scripts في package.json وتشغيل npm install في هذا المجلد كافيًا، ولكن من الجيد الرجوع إلى سجل التغييرات لمعرفة التغييرات المحتملة.
نحن ملتزمون بالحفاظ على الحد الأدنى من التغييرات العاجلة حتى تتمكن من ترقية react-scripts دون عناء.
نحن دائما منفتحون على ملاحظاتك.
بعد الإنشاء، يجب أن يبدو مشروعك كما يلي:
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
لكي يتم إنشاء المشروع، يجب أن تكون هذه الملفات موجودة بأسماء ملفات محددة :
public/index.html هو قالب الصفحة؛src/index.js هي نقطة إدخال JavaScript.يمكنك حذف أو إعادة تسمية الملفات الأخرى.
يمكنك إنشاء أدلة فرعية داخل src . لإعادة البناء بشكل أسرع، تتم معالجة الملفات الموجودة داخل src فقط بواسطة Webpack.
تحتاج إلى وضع أي ملفات JS وCSS داخل src ، وإلا فلن يراها Webpack.
يمكن استخدام الملفات الموجودة داخل public فقط من public/index.html .
اقرأ التعليمات أدناه لاستخدام الأصول من JavaScript وHTML.
ومع ذلك، يمكنك إنشاء المزيد من أدلة المستوى الأعلى.
لن يتم تضمينها في بنية الإنتاج حتى تتمكن من استخدامها لأشياء مثل التوثيق.
في دليل المشروع، يمكنك تشغيل:
npm start تشغيل التطبيق في وضع التطوير.
افتح http://localhost:3000 لمشاهدته في المتصفح.
سيتم إعادة تحميل الصفحة إذا قمت بإجراء تعديلات.
سترى أيضًا أي أخطاء في الوبر في وحدة التحكم.
npm test يقوم بتشغيل عداء الاختبار في وضع المراقبة التفاعلية.
راجع القسم الخاص بإجراء الاختبارات لمزيد من المعلومات.
npm run build ينشئ التطبيق للإنتاج في مجلد build .
فهو يجمع React بشكل صحيح في وضع الإنتاج ويحسن البناء للحصول على أفضل أداء.
يتم تصغير البنية وتتضمن أسماء الملفات التجزئة.
تطبيقك جاهز للنشر!
راجع القسم الخاص بالنشر لمزيد من المعلومات.
npm run eject ملاحظة: هذه عملية في اتجاه واحد. بمجرد eject ، لا يمكنك العودة!
إذا لم تكن راضيًا عن أداة الإنشاء وخيارات التكوين، فيمكنك eject في أي وقت. سيؤدي هذا الأمر إلى إزالة تبعية البناء الفردي من مشروعك.
وبدلاً من ذلك، سيقوم بنسخ جميع ملفات التكوين والتبعيات المتعدية (Webpack، وBabel، وESLint، وما إلى ذلك) مباشرة إلى مشروعك بحيث يكون لديك التحكم الكامل فيها. ستظل كافة الأوامر باستثناء eject تعمل، لكنها ستشير إلى النصوص البرمجية المنسوخة حتى تتمكن من تعديلها. في هذه المرحلة أنت وحدك.
ليس عليك استخدام eject على الإطلاق. مجموعة الميزات المنسقة مناسبة لعمليات النشر الصغيرة والمتوسطة، ولا ينبغي أن تشعر بأنك ملزم باستخدام هذه الميزة. ومع ذلك، فإننا ندرك أن هذه الأداة لن تكون مفيدة إذا لم تتمكن من تخصيصها عندما تكون مستعدًا لها.
افتراضيًا، يستخدم المشروع المُنشأ أحدث إصدار من React.
يمكنك الرجوع إلى وثائق React لمزيد من المعلومات حول المتصفحات المدعومة.
يدعم هذا المشروع مجموعة شاملة من أحدث معايير JavaScript.
بالإضافة إلى ميزات بناء الجملة ES6، فهو يدعم أيضًا:
تعرف على المزيد حول مراحل الاقتراح المختلفة.
على الرغم من أننا نوصي باستخدام المقترحات التجريبية مع بعض الحذر، إلا أن فيسبوك يستخدم هذه الميزات بشكل كبير في كود المنتج، لذلك نعتزم توفير تعديلات برمجية في حالة تغيير أي من هذه المقترحات في المستقبل.
لاحظ أن المشروع يتضمن فقط عدد قليل من polyfills ES6 :
Object.assign() عبر object-assign .Promise عبر promise .fetch() عبر whatwg-fetch . إذا كنت تستخدم أي ميزات ES6+ أخرى تحتاج إلى دعم وقت التشغيل (مثل Array.from() أو Symbol )، فتأكد من تضمين polyfills المناسبة يدويًا، أو أن المتصفحات التي تستهدفها تدعمها بالفعل.
لاحظ أيضًا أن استخدام بعض ميزات بناء الجملة الأحدث مثل for...of أو [...nonArrayValue] يؤدي إلى قيام Babel بإصدار تعليمات برمجية تعتمد على ميزات وقت تشغيل ES6 وقد لا تعمل بدون تعبئة متعددة. عندما تكون في شك، استخدم Babel REPL لمعرفة ما يتم تجميعه من أي بناء جملة محدد.
لتكوين تمييز بناء الجملة في محرر النصوص المفضل لديك، توجه إلى صفحة وثائق Babel ذات الصلة واتبع التعليمات. يتم تغطية بعض المحررين الأكثر شعبية.
ملحوظة: هذه الميزة متاحة مع
[email protected]والإصدارات الأحدث.
كما أنه يعمل فقط مع npm 3 أو أعلى.
توفر بعض برامج التحرير، بما في ذلك Sublime Text وAtom وVisual Studio Code، مكونات إضافية لـ ESLint.
ليست مطلوبة للبطانة. من المفترض أن تشاهد مخرجات linter مباشرة في جهازك الطرفي بالإضافة إلى وحدة تحكم المتصفح. ومع ذلك، إذا كنت تفضل ظهور نتائج الوبر مباشرة في المحرر الخاص بك، فهناك بعض الخطوات الإضافية التي يمكنك القيام بها.
ستحتاج إلى تثبيت البرنامج الإضافي ESLint لمحررك أولاً. ثم قم بإضافة ملف يسمى .eslintrc إلى جذر المشروع:
{
"extends" : "react-app"
}الآن يجب على المحرر الخاص بك الإبلاغ عن تحذيرات الفحص.
لاحظ أنه حتى إذا قمت بتحرير ملف .eslintrc الخاص بك بشكل أكبر، فإن هذه التغييرات ستؤثر فقط على تكامل المحرر . ولن تؤثر على مخرجات الوبر الخاصة بالجهاز الطرفي والمتصفح. وذلك لأن إنشاء تطبيق React يوفر عمدًا الحد الأدنى من القواعد التي تكتشف الأخطاء الشائعة.
إذا كنت تريد فرض نمط ترميز لمشروعك، ففكر في استخدام قواعد Prettier بدلاً من قواعد نمط ESLint.
هذه الميزة مدعومة حاليًا فقط بواسطة Visual Studio Code وWebStorm.
يدعم Visual Studio Code وWebStorm تصحيح الأخطاء خارج الصندوق باستخدام تطبيق Create React. يمكّنك هذا كمطور من كتابة وتصحيح كود React الخاص بك دون مغادرة المحرر، والأهم من ذلك أنه يمكّنك من الحصول على سير عمل تطوير مستمر، حيث يكون تبديل السياق في حده الأدنى، حيث لا يتعين عليك التبديل بين الأدوات.
ستحتاج إلى تثبيت أحدث إصدار من VS Code وVS Code Chrome Debugger Extension.
ثم أضف الكتلة أدناه إلى ملف launch.json الخاص بك وضعها داخل المجلد .vscode في الدليل الجذر لتطبيقك.
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}ملاحظة: قد يختلف عنوان URL إذا قمت بإجراء تعديلات عبر متغيرات البيئة HOST أو PORT.
ابدأ تشغيل تطبيقك عن طريق تشغيل npm start ، وابدأ في تصحيح الأخطاء في VS Code بالضغط على F5 أو بالنقر فوق أيقونة التصحيح الخضراء. يمكنك الآن كتابة التعليمات البرمجية وتعيين نقاط التوقف وإجراء تغييرات على التعليمات البرمجية وتصحيح التعليمات البرمجية المعدلة حديثًا — كل ذلك من المحرر الخاص بك.
هل تواجه مشاكل مع تصحيح أخطاء VS Code؟ يرجى الاطلاع على دليل استكشاف الأخطاء وإصلاحها.
ستحتاج إلى تثبيت ملحق Chrome لدعم WebStorm وJetBrains IDE.
في قائمة WebStorm، حدد Run وحدد Edit Configurations... . ثم انقر فوق + وحدد JavaScript Debug . الصق http://localhost:3000 في حقل عنوان URL واحفظ التكوين.
ملاحظة: قد يختلف عنوان URL إذا قمت بإجراء تعديلات عبر متغيرات البيئة HOST أو PORT.
ابدأ تشغيل تطبيقك عن طريق تشغيل npm start ، ثم اضغط على ^D على نظام macOS أو F9 على نظامي التشغيل Windows وLinux أو انقر على أيقونة تصحيح الأخطاء الخضراء لبدء تصحيح الأخطاء في WebStorm.
بنفس الطريقة التي يمكنك من خلالها تصحيح أخطاء تطبيقك في IntelliJ IDEA Ultimate وPhpStorm وPyCharm Pro وRubyMine.
Prettier هو منسق أكواد برمجية يتمتع بآرائه ويدعم JavaScript وCSS وJSON. باستخدام Prettier، يمكنك تنسيق التعليمات البرمجية التي تكتبها تلقائيًا لضمان نمط التعليمات البرمجية داخل مشروعك. راجع صفحة Prettier's GitHub لمزيد من المعلومات، وانظر إلى هذه الصفحة لمشاهدتها أثناء العمل.
لتنسيق التعليمات البرمجية الخاصة بنا عندما نقوم بتنفيذ التزام في git، نحتاج إلى تثبيت التبعيات التالية:
npm install --save husky lint-staged prettier بدلا من ذلك يمكنك استخدام yarn :
yarn add husky lint-staged prettierhusky استخدام githooks كما لو كانت نصوصًا برمجية npm.lint-staged بتشغيل البرامج النصية على الملفات المرحلية في git. راجع منشور المدونة هذا حول تنظيم الوبر لمعرفة المزيد عنه.prettier هو منسق JavaScript الذي سنقوم بتشغيله قبل الالتزامات. يمكننا الآن التأكد من تنسيق كل ملف بشكل صحيح عن طريق إضافة بضعة أسطر إلى ملف package.json في جذر المشروع.
أضف السطر التالي إلى قسم scripts :
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build", بعد ذلك، نضيف حقل "lint-staged" إلى الحزمة package.json ، على سبيل المثال:
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": { الآن، كلما قمت بإجراء التزام، سيقوم Prettier بتنسيق الملفات التي تم تغييرها تلقائيًا. يمكنك أيضًا تشغيل ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" لتنسيق مشروعك بالكامل لأول مرة.
بعد ذلك قد ترغب في دمج Prettier في محررك المفضل. اقرأ القسم الخاص بتكامل المحرر على صفحة Prettier GitHub.
<title> يمكنك العثور على ملف HTML المصدر في المجلد public للمشروع الذي تم إنشاؤه. يمكنك تعديل علامة <title> فيه لتغيير العنوان من "React App" إلى أي شيء آخر.
لاحظ أنه عادةً لا تقوم بتحرير الملفات الموجودة في المجلد public كثيرًا. على سبيل المثال، تتم إضافة ورقة أنماط دون لمس HTML.
إذا كنت بحاجة إلى تحديث عنوان الصفحة ديناميكيًا استنادًا إلى المحتوى، فيمكنك استخدام واجهة برمجة التطبيقات document.title للمتصفح. بالنسبة للسيناريوهات الأكثر تعقيدًا عندما تريد تغيير العنوان من مكونات React، يمكنك استخدام React Helmet، وهي مكتبة خارجية.
إذا كنت تستخدم خادمًا مخصصًا لتطبيقك في مرحلة الإنتاج وترغب في تعديل العنوان قبل إرساله إلى المتصفح، فيمكنك اتباع النصائح الواردة في هذا القسم. وبدلاً من ذلك، يمكنك إنشاء كل صفحة مسبقًا كملف HTML ثابت والذي يقوم بعد ذلك بتحميل حزمة JavaScript، والتي يتم تناولها هنا.
يتضمن المشروع المُنشأ React وReactDOM كتبعيات. ويتضمن أيضًا مجموعة من البرامج النصية التي يستخدمها تطبيق Create React كتبعية تطوير. يمكنك تثبيت تبعيات أخرى (على سبيل المثال، React Router) باستخدام npm :
npm install --save react-router بدلا من ذلك يمكنك استخدام yarn :
yarn add react-router يعمل هذا مع أي مكتبة، وليس فقط react-router .
يدعم إعداد المشروع هذا وحدات ES6 بفضل Babel.
بينما لا يزال بإمكانك استخدام require() و module.exports ، إلا أننا نشجعك على استخدام import و export بدلاً من ذلك.
على سبيل المثال:
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;كن على دراية بالفرق بين الصادرات الافتراضية والمسمى. إنه مصدر شائع للأخطاء.
نقترح عليك الالتزام باستخدام عمليات الاستيراد والتصدير الافتراضية عندما تقوم الوحدة بتصدير شيء واحد فقط (على سبيل المثال، مكون). هذا ما تحصل عليه عند استخدام export default Button import Button from './Button' .
تعد عمليات التصدير المسماة مفيدة للوحدات المساعدة التي تقوم بتصدير العديد من الوظائف. يمكن أن تحتوي الوحدة على تصدير افتراضي واحد على الأكثر وعدد من عمليات التصدير المسماة حسب رغبتك.
تعرف على المزيد حول وحدات ES6:
بدلاً من تنزيل التطبيق بالكامل قبل أن يتمكن المستخدمون من استخدامه، يتيح لك تقسيم التعليمات البرمجية تقسيم التعليمات البرمجية الخاصة بك إلى أجزاء صغيرة يمكنك بعد ذلك تحميلها عند الطلب.
يدعم إعداد المشروع هذا تقسيم التعليمات البرمجية عبر import() . اقتراحها موجود في المرحلة 3. يأخذ النموذج الشبيه بالوظيفة import() اسم الوحدة كوسيطة ويعيد Promise الذي يتحول دائمًا إلى كائن مساحة الاسم للوحدة.
هنا مثال:
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ; سيؤدي هذا إلى جعل moduleA.js وجميع تبعياته الفريدة بمثابة قطعة منفصلة يتم تحميلها فقط بعد أن ينقر المستخدم على الزر "تحميل".
يمكنك أيضًا استخدامه مع بناء الجملة async / await إذا كنت تفضل ذلك.
إذا كنت تستخدم React Router، فاطلع على هذا البرنامج التعليمي حول كيفية استخدام تقسيم التعليمات البرمجية معه. يمكنك العثور على مستودع GitHub المصاحب هنا.
راجع أيضًا قسم تقسيم التعليمات البرمجية في وثائق React.
يستخدم إعداد المشروع هذا Webpack للتعامل مع جميع الأصول. يقدم Webpack طريقة مخصصة "لتوسيع" مفهوم import إلى ما هو أبعد من JavaScript. للتعبير عن أن ملف JavaScript يعتمد على ملف CSS، تحتاج إلى استيراد CSS من ملف JavaScript :
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}هذا ليس مطلوبًا لـ React لكن العديد من الأشخاص يجدون هذه الميزة ملائمة. يمكنك أن تقرأ عن فوائد هذا النهج هنا. ومع ذلك، يجب أن تدرك أن هذا يجعل التعليمات البرمجية الخاصة بك أقل قابلية للنقل إلى أدوات وبيئات البناء الأخرى من Webpack.
في التطوير، يسمح التعبير عن التبعيات بهذه الطريقة بإعادة تحميل أنماطك بسرعة أثناء تحريرها. في مرحلة الإنتاج، سيتم تجميع جميع ملفات CSS في ملف .css مصغر واحد في مخرجات البناء.
إذا كنت مهتمًا باستخدام دلالات خاصة بـ Webpack، فيمكنك وضع كل ملفات CSS الخاصة بك مباشرة في src/index.css . سيظل يتم استيراده من src/index.js ، ولكن يمكنك دائمًا إزالة هذا الاستيراد إذا قمت بالترحيل لاحقًا إلى أداة إنشاء مختلفة.
يعمل إعداد المشروع هذا على تصغير CSS الخاص بك وإضافة بادئات البائع إليه تلقائيًا من خلال Autoprefixer لذلك لا داعي للقلق بشأن ذلك.
على سبيل المثال، هذا:
. App {
display : flex;
flex-direction : row;
align-items : center;
}يصبح هذا:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}إذا كنت بحاجة إلى تعطيل البادئة التلقائية لسبب ما، فاتبع هذا القسم.
بشكل عام، نوصي بعدم إعادة استخدام نفس فئات CSS عبر مكونات مختلفة. على سبيل المثال، بدلاً من استخدام فئة .Button CSS في مكونات <AcceptButton> و <RejectButton> ، نوصي بإنشاء مكون <Button> بأنماط .Button الخاصة به، والتي يمكن لكل من <AcceptButton> و <RejectButton> عرضها (ولكن ليس يرث).
غالبًا ما يؤدي اتباع هذه القاعدة إلى جعل معالجات CSS الأولية أقل فائدة، حيث يتم استبدال ميزات مثل الخلط والتداخل بتركيب المكونات. ومع ذلك، يمكنك دمج معالج CSS الأولي إذا وجدت أنه ذو قيمة. في هذه الإرشادات، سنستخدم Sass، ولكن يمكنك أيضًا استخدام Less أو بديل آخر.
أولاً، لنقم بتثبيت واجهة سطر الأوامر لـ Sass:
npm install --save node-sass-chokidar بدلا من ذلك يمكنك استخدام yarn :
yarn add node-sass-chokidar ثم في package.json ، أضف الأسطر التالية إلى scripts :
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",ملاحظة: لاستخدام معالج مسبق مختلف، استبدل أوامر
build-cssوwatch-cssوفقًا لوثائق المعالج المسبق لديك.
يمكنك الآن إعادة تسمية src/App.css إلى src/App.scss وتشغيل npm run watch-css . سيجد المراقب كل ملف Sass في مجلدات src الفرعية، وينشئ ملف CSS مقابلًا بجواره، وفي حالتنا سنستبدل src/App.css . نظرًا لأن src/App.js لا يزال يستورد src/App.css ، تصبح الأنماط جزءًا من تطبيقك. يمكنك الآن تعديل src/App.scss ، وسيتم إعادة إنشاء src/App.css .
لمشاركة المتغيرات بين ملفات Sass، يمكنك استخدام عمليات استيراد Sass. على سبيل المثال، يمكن أن تتضمن src/App.scss وملفات أنماط المكونات الأخرى @import "./shared.scss"; مع تعريفات متغيرة.
لتمكين استيراد الملفات دون استخدام المسارات النسبية، يمكنك إضافة خيار --include-path إلى الأمر الموجود في package.json .
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
سيسمح لك هذا بالقيام بالاستيراد مثل
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module عند هذه النقطة قد ترغب في إزالة كافة ملفات CSS من التحكم المصدر، وإضافة src/**/*.css إلى ملف .gitignore الخاص بك. وهو بشكل عام ممارسة جيدة للاحتفاظ بمنتجات الإنشاء خارج التحكم بالمصدر.
كخطوة أخيرة، قد تجد أنه من المناسب تشغيل watch-css تلقائيًا باستخدام npm start ، وتشغيل build-css كجزء من npm run build . يمكنك استخدام عامل التشغيل && لتنفيذ نصين بالتتابع. ومع ذلك، لا توجد طريقة عبر الأنظمة الأساسية لتشغيل نصين بالتوازي، لذلك سنقوم بتثبيت حزمة لهذا:
npm install --save npm-run-all بدلا من ذلك يمكنك استخدام yarn :
yarn add npm-run-all بعد ذلك، يمكننا تغيير البرامج النصية start build لتشمل أوامر المعالج المسبق لـ CSS:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} يعمل الآن تشغيل npm start و npm run build أيضًا على إنشاء ملفات Sass.
لماذا node-sass-chokidar ؟
تم الإبلاغ عن أن node-sass لديها المشكلات التالية:
تم الإبلاغ عن وجود مشكلات في الأداء في node-sass --watch في ظروف معينة عند استخدامها في جهاز افتراضي أو مع عامل الإرساء.
تجميع الأنماط اللانهائية #1939
تم الإبلاغ عن وجود مشكلات في node-sass أثناء اكتشاف الملفات الجديدة في الدليل رقم 1891
يتم استخدام node-sass-chokidar هنا لأنه يعالج هذه المشكلات.
باستخدام Webpack، يعمل استخدام الأصول الثابتة مثل الصور والخطوط بشكل مشابه لـ CSS.
يمكنك import ملف مباشرة في وحدة JavaScript . هذا يخبر Webpack بتضمين هذا الملف في الحزمة. على عكس عمليات استيراد CSS، يمنحك استيراد ملف قيمة سلسلة. هذه القيمة هي المسار النهائي الذي يمكنك الرجوع إليه في التعليمات البرمجية الخاصة بك، على سبيل المثال، كسمة src لصورة أو href لرابط إلى ملف PDF.
لتقليل عدد الطلبات المقدمة إلى الخادم، يؤدي استيراد الصور التي يقل حجمها عن 10000 بايت إلى إرجاع معرف URI للبيانات بدلاً من المسار. ينطبق هذا على امتدادات الملفات التالية: bmp، وgif، وjpg، وjpeg، وpng. تم استبعاد ملفات SVG بسبب رقم 1153.
هنا مثال:
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;وهذا يضمن أنه عند إنشاء المشروع، سيقوم Webpack بنقل الصور بشكل صحيح إلى مجلد البناء، ويزودنا بالمسارات الصحيحة.
يعمل هذا في CSS أيضًا:
. Logo {
background-image : url (. / logo.png);
} يبحث Webpack عن جميع مراجع الوحدات النسبية في CSS (تبدأ بـ ./ ) ويستبدلها بالمسارات النهائية من الحزمة المترجمة. إذا ارتكبت خطأً مطبعيًا أو حذفت ملفًا مهمًا عن طريق الخطأ، فسترى خطأ في الترجمة، تمامًا كما هو الحال عند استيراد وحدة JavaScript غير موجودة. يتم إنشاء أسماء الملفات النهائية في الحزمة المترجمة بواسطة Webpack من تجزئات المحتوى. إذا تغير محتوى الملف في المستقبل، فسوف يمنحه Webpack اسمًا مختلفًا في الإنتاج، لذلك لا داعي للقلق بشأن التخزين المؤقت للأصول على المدى الطويل.
يرجى العلم أن هذه أيضًا ميزة مخصصة لـ Webpack.
إنه ليس مطلوبًا لـ React ولكن الكثير من الأشخاص يستمتعون به (ويستخدم React Native آلية مماثلة للصور).
يتم وصف طريقة بديلة للتعامل مع الأصول الثابتة في القسم التالي.
publicملحوظة: هذه الميزة متاحة مع
[email protected]والإصدارات الأحدث.
يحتوي المجلد public على ملف HTML حتى تتمكن من تعديله، على سبيل المثال، لتعيين عنوان الصفحة. ستتم إضافة علامة <script> مع الكود المترجم إليها تلقائيًا أثناء عملية الإنشاء.
يمكنك أيضًا إضافة أصول أخرى إلى المجلد public .
لاحظ أننا نشجعك عادةً على import الأصول في ملفات JavaScript بدلاً من ذلك. على سبيل المثال، راجع الأقسام المتعلقة بإضافة ورقة أنماط وإضافة الصور والخطوط. توفر هذه الآلية عددًا من الفوائد:
ومع ذلك، هناك فتحة هروب يمكنك استخدامها لإضافة أصل خارج نظام الوحدة.
إذا قمت بوضع ملف في المجلد public ، فلن تتم معالجته بواسطة Webpack. وبدلاً من ذلك سيتم نسخه إلى مجلد البناء دون تغيير. للإشارة إلى الأصول في المجلد public ، تحتاج إلى استخدام متغير خاص يسمى PUBLIC_URL .
داخل index.html ، يمكنك استخدامه على النحو التالي:
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > سيتم الوصول إلى الملفات الموجودة داخل المجلد public فقط من خلال البادئة %PUBLIC_URL% . إذا كنت بحاجة إلى استخدام ملف من src أو node_modules ، فسيتعين عليك نسخه هناك لتحديد نيتك بوضوح في جعل هذا الملف جزءًا من البناء.
عند تشغيل npm run build ، سيستبدل تطبيق Create React %PUBLIC_URL% بمسار مطلق صحيح حتى يعمل مشروعك حتى إذا كنت تستخدم التوجيه من جانب العميل أو تستضيفه على عنوان URL غير جذر.
في كود JavaScript، يمكنك استخدام process.env.PUBLIC_URL لأغراض مماثلة:
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}ضع في اعتبارك سلبيات هذا النهج:
public أو تصغيرها.public نوصي عادةً باستيراد أوراق الأنماط والصور والخطوط من JavaScript. يعد المجلد public مفيدًا كحل بديل لعدد من الحالات الأقل شيوعًا:
manifest.webmanifest .pace.js خارج التعليمات البرمجية المجمعة.<script> . لاحظ أنه إذا قمت بإضافة <script> الذي يعلن عن المتغيرات العامة، فستحتاج أيضًا إلى قراءة القسم التالي حول استخدامها.
عندما تقوم بتضمين برنامج نصي في ملف HTML يحدد المتغيرات العامة وتحاول استخدام أحد هذه المتغيرات في الكود، سوف يشكو Linter لأنه لا يستطيع رؤية تعريف المتغير.
يمكنك تجنب ذلك عن طريق قراءة المتغير العام بشكل صريح من كائن window ، على سبيل المثال:
const $ = window . $ ;وهذا يجعل من الواضح أنك تستخدم متغيرًا عامًا عن قصد وليس بسبب خطأ مطبعي.
وبدلاً من ذلك، يمكنك إجبار linter على تجاهل أي سطر عن طريق إضافة // eslint-disable-line بعده.
ليس عليك استخدام React Bootstrap مع React ولكنها مكتبة شائعة لدمج Bootstrap مع تطبيقات React. إذا كنت في حاجة إليها، يمكنك دمجها مع تطبيق Create React باتباع الخطوات التالية:
قم بتثبيت React Bootstrap وBootstrap من npm. لا يتضمن React Bootstrap Bootstrap CSS لذا يجب تثبيته أيضًا:
npm install --save react-bootstrap bootstrap@3 بدلا من ذلك يمكنك استخدام yarn :
yarn add react-bootstrap bootstrap@3 قم باستيراد Bootstrap CSS واختياريًا Bootstrap theme CSS في بداية ملف src/index.js الخاص بك:
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. قم باستيراد مكونات React Bootstrap المطلوبة داخل ملف src/App.js أو ملفات المكونات المخصصة لديك:
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ; أنت الآن جاهز لاستخدام مكونات React Bootstrap المستوردة ضمن التسلسل الهرمي للمكونات المحددة في طريقة العرض. فيما يلي مثال لإعادة إنشاء App.js باستخدام React Bootstrap.
في بعض الأحيان قد تحتاج إلى تعديل الأنماط المرئية لـ Bootstrap (أو الحزمة المكافئة).
ونقترح النهج التالي:
فيما يلي مثال على إضافة Bootstrap مخصص يتبع هذه الخطوات.
Flow عبارة عن مدقق للنوع الثابت يساعدك على كتابة التعليمات البرمجية بأخطاء أقل. راجع هذه المقدمة لاستخدام الأنواع الثابتة في JavaScript إذا كنت جديدًا على هذا المفهوم.
تعمل الإصدارات الأخيرة من Flow مع إنشاء مشاريع React App خارج الصندوق.
لإضافة تدفق إلى مشروع إنشاء تطبيق React، اتبع الخطوات التالية:
npm install --save flow-bin (أو yarn add flow-bin )."flow": "flow" إلى قسم scripts في package.json الخاص بك.npm run flow init (أو yarn flow init ) لإنشاء ملف .flowconfig في الدليل الجذر.// @flow إلى أي ملفات تريد كتابة التحقق منها (على سبيل المثال، إلى src/App.js ). يمكنك الآن تشغيل npm run flow (أو yarn flow ) للتحقق من وجود أخطاء في الكتابة في الملفات. يمكنك اختياريًا استخدام IDE مثل Nuclide للحصول على تجربة متكاملة أفضل. نخطط في المستقبل لدمجه في تطبيق Create React بشكل أوثق.
لمعرفة المزيد حول Flow، راجع الوثائق الخاصة به.
لا يصف إنشاء تطبيق React حلاً محددًا للتوجيه، لكن React Router هو الحل الأكثر شيوعًا.
لإضافته، قم بتشغيل:
npm install --save react-router-dom بدلا من ذلك يمكنك استخدام yarn :
yarn add react-router-dom لتجربته، احذف كل التعليمات البرمجية الموجودة في src/App.js واستبدلها بأي من الأمثلة الموجودة على موقعه على الويب. يعد المثال الأساسي مكانًا جيدًا للبدء.
لاحظ أنك قد تحتاج إلى تكوين خادم الإنتاج الخاص بك لدعم التوجيه من جانب العميل قبل نشر تطبيقك.
ملحوظة: هذه الميزة متاحة مع
[email protected]والإصدارات الأحدث.
يمكن لمشروعك أن يستهلك المتغيرات المعلنة في بيئتك كما لو تم الإعلان عنها محليًا في ملفات JS الخاصة بك. افتراضيًا، سيكون لديك NODE_ENV محددًا لك، وأي متغيرات بيئة أخرى تبدأ بـ REACT_APP_ .
يتم تضمين متغيرات البيئة أثناء وقت الإنشاء . نظرًا لأن إنشاء تطبيق React ينتج حزمة HTML/CSS/JS ثابتة، فمن غير الممكن قراءتها في وقت التشغيل. لقراءتها في وقت التشغيل، ستحتاج إلى تحميل HTML في الذاكرة على الخادم واستبدال العناصر النائبة في وقت التشغيل، تمامًا كما هو موضح هنا. وبدلاً من ذلك، يمكنك إعادة إنشاء التطبيق على الخادم في أي وقت تقوم فيه بتغييره.
ملاحظة: يجب عليك إنشاء متغيرات بيئة مخصصة تبدأ بـ
REACT_APP_. سيتم تجاهل أي متغيرات أخرى باستثناءNODE_ENVلتجنب الكشف عن طريق الخطأ عن مفتاح خاص على الجهاز قد يحمل نفس الاسم. سيتطلب تغيير أي متغيرات بيئة إعادة تشغيل خادم التطوير إذا كان قيد التشغيل.
سيتم تعريف متغيرات البيئة هذه لك على process.env . على سبيل المثال، وجود متغير بيئة باسم REACT_APP_SECRET_CODE سيتم عرضه في JS الخاص بك كـ process.env.REACT_APP_SECRET_CODE .
يوجد أيضًا متغير بيئة مدمج خاص يسمى NODE_ENV . يمكنك قراءتها من process.env.NODE_ENV . عند تشغيل npm start ، فهو دائمًا يساوي 'development' ، وعندما تقوم بتشغيل npm test فإنه يساوي دائمًا 'test' ، وعندما تقوم بتشغيل npm run build لإنشاء حزمة إنتاج، فهو دائمًا يساوي 'production' . لا يمكنك تجاوز NODE_ENV يدويًا. وهذا يمنع المطورين من نشر بنية التطوير البطيئة في الإنتاج عن طريق الخطأ.
يمكن أن تكون متغيرات البيئة هذه مفيدة لعرض المعلومات بشكل مشروط بناءً على مكان نشر المشروع أو استهلاك البيانات الحساسة التي تقع خارج التحكم في الإصدار.
أولاً، تحتاج إلى تحديد متغيرات البيئة. على سبيل المثال، لنفترض أنك تريد استهلاك سر محدد في البيئة داخل <form> :
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
} أثناء الإنشاء، سيتم استبدال process.env.REACT_APP_SECRET_CODE بالقيمة الحالية لمتغير البيئة REACT_APP_SECRET_CODE . تذكر أنه سيتم تعيين المتغير NODE_ENV لك تلقائيًا.
عندما تقوم بتحميل التطبيق في المتصفح وتفحص <input> ، سترى قيمته مضبوطة على abcdef ، وسيُظهر النص الغامق البيئة المتوفرة عند استخدام npm start :
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div > يبحث النموذج أعلاه عن متغير يسمى REACT_APP_SECRET_CODE من البيئة. من أجل استهلاك هذه القيمة، نحتاج إلى تعريفها في البيئة. يمكن القيام بذلك باستخدام طريقتين: إما في Shell الخاص بك أو في ملف .env . سيتم وصف كلتا الطريقتين في الأقسام القليلة التالية.
يعد الوصول إلى NODE_ENV مفيدًا أيضًا لتنفيذ الإجراءات بشكل مشروط:
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} عند تجميع التطبيق باستخدام npm run build ، ستزيل خطوة التصغير هذا الشرط، وستكون الحزمة الناتجة أصغر.
ملحوظة: هذه الميزة متاحة مع
[email protected]والإصدارات الأحدث.
يمكنك أيضًا الوصول إلى متغيرات البيئة بدءًا من REACT_APP_ في ملف public/index.html . على سبيل المثال:
< title > %REACT_APP_WEBSITE_NAME% </ title >لاحظ أن التحذيرات الواردة في القسم أعلاه تنطبق:
NODE_ENV و PUBLIC_URL )، يجب أن تبدأ أسماء المتغيرات بـ REACT_APP_ حتى تعمل.يمكن أن يختلف تعريف متغيرات البيئة بين أنظمة التشغيل. من المهم أيضًا معرفة أن هذه الطريقة مؤقتة طوال مدة جلسة الصدفة.
set " REACT_APP_SECRET_CODE = abcdef " && npm start(ملاحظة: علامات الاقتباس حول تعيين المتغير مطلوبة لتجنب وجود مسافة بيضاء زائدة.)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.envملاحظة: هذه الميزة متاحة مع
[email protected]والإصدارات الأحدث.
لتحديد متغيرات البيئة الدائمة، قم بإنشاء ملف يسمى .env في جذر مشروعك:
REACT_APP_SECRET_CODE=abcdef
ملاحظة: يجب عليك إنشاء متغيرات بيئة مخصصة تبدأ بـ
REACT_APP_. سيتم تجاهل أي متغيرات أخرى باستثناءNODE_ENVلتجنب الكشف عن طريق الخطأ عن مفتاح خاص على الجهاز قد يحمل نفس الاسم. سيتطلب تغيير أي متغيرات بيئة منك إعادة تشغيل خادم التطوير إذا كان قيد التشغيل.
يجب فحص ملفات .env في التحكم بالمصادر (باستثناء .env*.local ).
.env الأخرى التي يمكن استخدامها؟ملحوظة: هذه الميزة متاحة مع
[email protected]والإصدارات الأحدث .
.env : افتراضي..env.local : التجاوزات المحلية. يتم تحميل هذا الملف لجميع البيئات باستثناء الاختبار..env.development ، .env.test ، .env.production : إعدادات خاصة بالبيئة..env.development.local و .env.test.local و .env.production.local : التجاوزات المحلية للإعدادات الخاصة بالبيئة.الملفات الموجودة على اليسار لها أولوية أكبر من الملفات الموجودة على اليمين:
npm start : .env.development.local ، .env.development ، .env.local ، .envnpm run build : .env.production.local ، .env.production ، .env.local ، .envnpm test : .env.test.local ، .env.test ، .env (ملاحظة .env.local مفقودة) ستعمل هذه المتغيرات كإعدادات افتراضية إذا لم يضعها الجهاز بشكل صريح.
يرجى الرجوع إلى وثائق dotenv لمزيد من التفاصيل.
ملاحظة: إذا كنت تحدد متغيرات البيئة للتنمية ، فمن المرجح أن تحتاج CI و/أو منصة الاستضافة إلى هذه المحددة أيضًا. راجع وثائقهم كيفية القيام بذلك. على سبيل المثال ، راجع وثائق Travis CI أو Heroku.
.envملاحظة: تتوفر هذه الميزة مع
[email protected]وأعلى.
قم بتوسيع المتغيرات بالفعل على جهازك للاستخدام في ملف .env الخاص بك (باستخدام dotenv-expand).
على سبيل المثال ، للحصول على متغير البيئة npm_package_version :
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
أو توسيع المتغيرات المحلية إلى ملف .env الحالي:
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
تستخدم العديد من المكتبات الشعبية ديكورات في وثائقها.
إنشاء تطبيق React لا يدعم بناء جملة الديكور في الوقت الحالي لأن:
ولكن في كثير من الحالات ، يمكنك إعادة كتابة التعليمات البرمجية القائمة على الديكور بدون ديكورات على ما يرام.
يرجى الرجوع إلى هذين الموضوعين للرجوع إليه:
سيؤدي إنشاء تطبيق React إلى إضافة دعم الديكور عندما يتقدم المواصفات إلى مرحلة مستقرة.
لا يصف React طريقة محددة لجلب البيانات ، لكن الأشخاص يستخدمون عادة مكتبة مثل Axios أو API fetch() التي يوفرها المتصفح. مريح ، يتضمن إنشاء تطبيق React Polyfill لـ fetch() حتى تتمكن من استخدامه دون القلق بشأن دعم المتصفح.
تسمح وظيفة fetch العالمية بتقديم طلبات AJAX بسهولة. يستغرق عنوان URL كمدخلات ويعيد Promise يحل إلى كائن Response . يمكنك العثور على مزيد من المعلومات حول fetch هنا.
يتضمن هذا المشروع أيضًا Promise Polyfill الذي يوفر تنفيذًا كاملاً للوعود/A+. يمثل الوعد النتيجة النهائية لعملية غير متزامنة ، يمكنك العثور على مزيد من المعلومات حول الوعود هنا وهنا. كل من axios و fetch() استخدام الوعود تحت الغطاء. يمكنك أيضًا استخدام بناء جملة async / await لتقليل تعشيش رد الاتصال.
يمكنك معرفة المزيد حول تقديم طلبات AJAX من مكونات React في إدخال الأسئلة الشائعة على موقع React.
ستساعدك هذه البرامج التعليمية على دمج تطبيقك مع الواجهة الخلفية API التي تعمل على منفذ آخر ، باستخدام fetch() للوصول إليه.
تحقق من هذا البرنامج التعليمي. يمكنك العثور على مستودع GitHub Companion هنا.
تحقق من هذا البرنامج التعليمي. يمكنك العثور على مستودع GitHub Companion هنا.
ملاحظة: تتوفر هذه الميزة مع
[email protected]وأعلى.
غالبًا ما يخدم الأشخاص تطبيق React في الواجهة الأمامية من نفس المضيف والمنفذ مثل تنفيذ الواجهة الخلفية.
على سبيل المثال ، قد يبدو إعداد الإنتاج هكذا بعد نشر التطبيق:
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
مثل هذا الإعداد غير مطلوب. ومع ذلك ، إذا كان لديك إعداد مثل هذا ، فمن المناسب كتابة طلبات مثل fetch('/api/todos') دون القلق بشأن إعادة توجيهها إلى مضيف أو منفذ آخر أثناء التطوير.
لإخبار خادم التطوير بوكالة أي طلبات غير معروفة إلى خادم API الخاص بك في التطوير ، أضف حقل proxy إلى package.json ، على سبيل المثال:
"proxy" : "http://localhost:4000" , وبهذه الطريقة ، عندما fetch('/api/todos') في التطوير ، سيدرك خادم التطوير أنه ليس أحد الأصول الثابتة ، وسيقوم بتلبية طلبك إلى http://localhost:4000/api/todos كإعادة. سيحاول خادم التطوير فقط إرسال الطلبات بدون text/html في رأسه Accept إلى الوكيل.
مريح ، هذا يتجنب مشكلات الكورس ورسائل الخطأ مثل هذا في التطوير:
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
ضع في اعتبارك أن proxy له تأثير فقط في التطوير (مع npm start ) ، ويعود الأمر لك إلى التأكد من أن عناوين URL مثل /api/todos تشير إلى الشيء الصحيح في الإنتاج. ليس عليك استخدام بادئة /api . سيتم إعادة توجيه أي طلب غير معترف به بدون رأس قبول text/html إلى proxy المحدد.
يدعم خيار proxy اتصالات HTTP و HTTPS و WebSocket.
إذا لم يكن خيار proxy مرنًا بما يكفي لك ، فيمكنك بدلاً من ذلك:
عندما تقوم بتمكين خيار proxy ، يمكنك اختيار مجموعة أكثر صرامة من الشيكات المضيفة. هذا أمر ضروري لأن ترك الواجهة الخلفية مفتوحة للمضيفين عن بُعد يجعل جهاز الكمبيوتر الخاص بك عرضة لهجمات DNS. تم شرح القضية في هذه المقالة وهذه القضية.
لا ينبغي أن يؤثر هذا عليك عند التطوير على localhost ، ولكن إذا تطورت عن بُعد كما هو موضح هنا ، فسترى هذا الخطأ في المتصفح بعد تمكين خيار proxy :
رأس مضيف غير صالح
للعمل حوله ، يمكنك تحديد مضيف التطوير العام الخاص بك في ملف يسمى .env.development في جذر مشروعك:
HOST=mypublicdevhost.com
إذا قمت بإعادة تشغيل خادم التطوير الآن وقمت بتحميل التطبيق من المضيف المحدد ، فيجب أن يعمل.
إذا كنت لا تزال تواجه مشكلات أو إذا كنت تستخدم بيئة أكثر غرابة مثل محرر السحابة ، فيمكنك تجاوز فحص المضيف تمامًا عن طريق إضافة سطر إلى .env.development.local . لاحظ أن هذا أمر خطير ويعرض جهازك لتنفيذ الرمز البعيد من مواقع الويب الضارة:
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
لا نوصي بهذا النهج.
ملاحظة: تتوفر هذه الميزة مع
[email protected]وأعلى.
إذا لم يكن خيار proxy مرنًا بما يكفي لك ، فيمكنك تحديد كائن في النموذج التالي (في package.json ).
يمكنك أيضًا تحديد أي قيمة تكوين http-proxy-middleware أو دعم http-proxy .
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
} جميع الطلبات التي تطابق هذا المسار ستكون وكلاء ، لا استثناءات. يتضمن ذلك طلبات text/html ، والذي لا يتمتع خيار proxy القياسي بالوكالة.
إذا كنت بحاجة إلى تحديد وكلاء متعددة ، فيمكنك القيام بذلك عن طريق تحديد إدخالات إضافية. المباريات هي تعبيرات منتظمة ، بحيث يمكنك استخدام regexp لمطابقة مسارات متعددة.
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}عند إعداد وكيل WebSocket ، هناك بعض الاعتبارات الإضافية التي يجب أن تكون على دراية بها.
إذا كنت تستخدم محرك WebSocket مثل Socket.io ، فيجب أن يكون لديك خادم Socket.io الذي يمكنك استخدامه كهدف الوكيل. لن يعمل Socket.io مع خادم WebSocket قياسي. على وجه التحديد ، لا تتوقع أن تعمل Socket.io مع اختبار Echo WebSocket.org.
هناك بعض الوثائق الجيدة المتاحة لإعداد خادم Socket.io.
ستعمل WebSockets القياسي مع خادم WebSocket قياسي بالإضافة إلى اختبار WebSocket.org Echo. يمكنك استخدام مكتبات مثل WS للخادم ، مع WebSockets الأصلية في المتصفح.
في كلتا الحالتين ، يمكنك وكيل Websocket يدويًا في package.json :
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} ملاحظة: تتوفر هذه الميزة مع
[email protected]وأعلى.
قد تطلب من خادم DEV تقديم صفحات عبر HTTPS. إحدى الحالات المحددة التي يمكن أن تكون فيها ذلك مفيدة عند استخدام ميزة "الوكيل" لطلبات الوكيل إلى خادم API عندما يكون خادم API نفسه يخدم HTTPS.
للقيام بذلك ، قم بتعيين متغير بيئة HTTPS إلى true ، ثم ابدأ خادم DEV كالمعتاد مع npm start :
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(ملاحظة: عدم وجود مسافة بيضاء مقصودة.)
HTTPS=true npm startلاحظ أن الخادم سيستخدم شهادة موقعة ذاتيا ، لذلك سيعرض متصفح الويب الخاص بك بالتأكيد تحذيرًا عند الوصول إلى الصفحة.
<meta> على الخادم نظرًا لأن إنشاء تطبيق React لا يدعم تقديم الخادم ، فقد تتساءل عن كيفية جعل علامات <meta> ديناميكية وتعكس عنوان URL الحالي. لحل هذا ، نوصي بإضافة أصحاب نائبة إلى HTML ، مثل هذا:
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > بعد ذلك ، على الخادم ، بغض النظر عن الواجهة الخلفية التي تستخدمها ، يمكنك قراءة index.html في الذاكرة واستبدال __OG_TITLE__ ، __OG_DESCRIPTION__ ، وأي أصحاب مستثمرون آخرون مع قيم اعتمادًا على عنوان URL الحالي. فقط تأكد من تعقيم والهروب من القيم المحرف بحيث تكون آمنة للتضمين في HTML!
إذا كنت تستخدم خادم Node ، فيمكنك حتى مشاركة منطق مطابقة المسار بين العميل والخادم. ومع ذلك ، فإن التكرار يعمل بشكل جيد في الحالات البسيطة.
إذا كنت تستضيف build باستخدام مزود استضافة ثابت ، فيمكنك استخدام React-Snapshot أو React-SNAP لإنشاء صفحات HTML لكل مسار ، أو رابط نسبي ، في التطبيق الخاص بك. ستصبح هذه الصفحات نشطة بسلاسة ، أو "رطبة" ، عندما يتم تحميل حزمة JavaScript.
هناك أيضًا فرص لاستخدام هذا خارج الاستضافة الثابتة ، لإزالة الضغط من الخادم عند إنشاء طرق التخزين المؤقت.
تتمثل الفائدة الأساسية في الإدانات المسبقة في الحصول على المحتوى الأساسي لكل صفحة مع حمولة HTML-غير محددة حول تنزيل حزمة JavaScript الخاصة بك بنجاح أم لا. كما أنه يزيد من احتمال التقاط كل مسار للتطبيق بواسطة محركات البحث.
يمكنك قراءة المزيد حول إجراء التكوين الصفر قبل الإعادة (يسمى أيضًا Snapshotting) هنا.
على غرار القسم السابق ، يمكنك ترك بعض العناصر النائبة في HTML التي تضخ المتغيرات العالمية ، على سبيل المثال:
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script > بعد ذلك ، على الخادم ، يمكنك استبدال __SERVER_DATA__ بمجموعة من البيانات الحقيقية قبل إرسال الاستجابة. يمكن بعد ذلك قراءة رمز العميل إلى قراءة window.SERVER_DATA لاستخدامه. تأكد من تعقيم JSON قبل إرساله إلى العميل لأنه يجعل تطبيقك عرضة لهجمات XSS.
ملاحظة: تتوفر هذه الميزة مع
[email protected]وأعلى.
اقرأ دليل الترحيل لمعرفة كيفية تمكينه في المشاريع القديمة!
يستخدم Create React App Jest كعداء اختباره. للتحضير لهذا التكامل ، قمنا بتجديد كبير من Jest ، لذا إذا سمعت أشياء سيئة عنها منذ سنوات ، فحاول محاولة أخرى.
Jest هو عداء قائم على العقدة. هذا يعني أن الاختبارات تعمل دائمًا في بيئة عقدة وليس في متصفح حقيقي. هذا يتيح لنا تمكين سرعة التكرار السريع ومنع التقلب.
على الرغم من أن Jest يوفر كرات متصفح مثل window بفضل JSDOM ، إلا أنها مجرد تقريب لسلوك المتصفح الحقيقي. يهدف Jest إلى استخدام اختبارات الوحدة لمنطقك ومكوناتك بدلاً من المراوغات DOM.
نوصيك باستخدام أداة منفصلة للاختبارات الشاملة للمتصفح إذا كنت في حاجة إليها. فهي خارج نطاق إنشاء تطبيق React.
سيبحث Jest عن ملفات اختبار مع أي من اتفاقيات التسمية الشائعة التالية:
.js لاحقة في مجلدات __tests__ ..test.js لاحقة..spec.js لاحقة. يمكن أن تكون ملفات .test.js / .spec.js (أو مجلدات __tests__ ) في أي عمق تحت مجلد المستوى العلوي src .
نوصي بوضع ملفات الاختبار (أو مجلدات __tests__ ) بجانب الكود الذي يختبرونه بحيث تظهر الواردات النسبية أقصر. على سبيل المثال ، إذا كان App.test.js و App.js في نفس المجلد ، فإن الاختبار يحتاج فقط إلى import App from './App' بدلاً من مسار نسبي طويل. يساعد Colocation أيضًا في العثور على الاختبارات بسرعة أكبر في المشاريع الكبيرة.
عند تشغيل npm test ، سيتم إطلاق Jest في وضع الساعة. في كل مرة تقوم فيها بحفظ ملف ، سيتم إعادة تشغيل الاختبارات ، تمامًا مثل npm start الرمز.
يتضمن المراقب واجهة سطر الأوامر التفاعلية مع القدرة على إجراء جميع الاختبارات ، أو التركيز على نمط البحث. تم تصميمه بهذه الطريقة حتى تتمكن من إبقائه مفتوحًا والاستمتاع بإعادة تشغيل سريع. يمكنك تعلم الأوامر من "شاهد استخدام" لاحظ أن المراقب يطبع بعد كل تشغيل:
بشكل افتراضي ، عند تشغيل npm test ، ستقوم Jest بإجراء الاختبارات المتعلقة بالملفات فقط التي تم تغييرها منذ الالتزام الأخير. هذا هو التحسين المصمم لجعل اختباراتك تعمل بسرعة بغض النظر عن عدد الاختبارات لديك. ومع ذلك ، يفترض أنك لا ترتكب الرمز الذي لا يجتاز الاختبارات غالبًا.
سوف يذكر Jest دائمًا صراحة أنه إجراء اختبارات تتعلق بالملفات التي تم تغييرها منذ الالتزام الأخير. يمكنك أيضًا الضغط a وضع الساعة لإجبار Jest على إجراء جميع الاختبارات.
ستقوم Jest دائمًا بتشغيل جميع الاختبارات على خادم التكامل المستمر أو إذا لم يكن المشروع داخل مستودع GIT أو Mercurial.
لإنشاء اختبارات ، أضفه it() (أو test() ) كتل باسم الاختبار والرمز الخاص به. يمكنك اختياريًا لفها في كتل describe() للتجميع المنطقي ولكن هذا ليس مطلوبًا ولا موصى به.
يوفر Jest وظيفة عالمية expect() لتأكيد التأكيدات. يمكن أن يبدو الاختبار الأساسي هكذا:
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; يتم توثيق جميع expect() المطابقة المدعومة من Jest على نطاق واسع هنا.
يمكنك أيضًا استخدام jest.fn() expect(fn).toBeCalled() لإنشاء "جواسيس" أو وظائف وهمية.
هناك مجموعة واسعة من تقنيات اختبار المكونات. وهي تتراوح من "اختبار الدخان" الذي يتحقق من أن المكون يقدم دون رمي ، إلى تقديم واختبار بعض الإخراج ، إلى دورة حياة المكونات الكاملة واختبارها وتغييرات الحالة.
تختار المشاريع المختلفة مقايضات الاختبار المختلفة بناءً على عدد مرات تغيير المكونات ، ومقدار المنطق الذي تحتوي عليه. إذا لم تكن قد قررت استراتيجية اختبار حتى الآن ، فإننا نوصي بأن تبدأ بإنشاء اختبارات دخان بسيطة لمكوناتك:
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ; يتصاعد هذا الاختبار مكونًا ويتأكد من أنه لم يرمي أثناء التقديم. توفر اختبارات كهذه الكثير من القيمة مع القليل جدًا من الجهد ، لذا فهي رائعة كنقطة انطلاق ، وهذا هو الاختبار الذي ستجده في src/App.test.js .
عندما تواجه الأخطاء الناجمة عن تغيير المكونات ، سوف تكتسب نظرة أعمق على الأجزاء التي تستحق الاختبار في التطبيق الخاص بك. قد يكون هذا وقتًا مناسبًا لإدخال اختبارات أكثر تحديدًا تؤكد الإخراج أو السلوك المتوقع المحدد.
إذا كنت ترغب في اختبار المكونات بمعزل عن المكونات الفرعية التي يقدمونها ، فإننا نوصي باستخدام API shallow() من الإنزيم. لتثبيته ، قم بتشغيل:
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer بدلاً من ذلك ، يمكنك استخدام yarn :
yarn add enzyme enzyme-adapter-react-16 react-test-rendererاعتبارًا من الإنزيم 3 ، ستحتاج إلى تثبيت الإنزيم مع محول يتوافق مع إصدار React الذي تستخدمه. (الأمثلة أعلاه تستخدم المحول لـ React 16.)
ستحتاج المحول أيضًا إلى تكوينه في ملف الإعداد العالمي الخاص بك:
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;ملاحظة: ضع في اعتبارك أنه إذا قررت "الإخراج" قبل إنشاء
src/setupTests.js، فلن يحتوي ملفpackage.jsonالناتج على أي إشارة إليه. اقرأ هنا لمعرفة كيفية إضافة هذا بعد الإخراج.
الآن يمكنك كتابة اختبار الدخان معه:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; على عكس اختبار الدخان السابق باستخدام ReactDOM.render() ، فإن هذا الاختبار يجعل فقط <App> ولا يعمق. على سبيل المثال ، حتى لو كان <App> نفسه يجعل <Button> يرمي ، فسيتم مرور هذا الاختبار. يعد التقديم الضحل أمرًا رائعًا لاختبارات الوحدة المعزولة ، ولكن قد لا تزال ترغب في إنشاء بعض اختبارات العرض الكاملة لضمان دمج المكونات بشكل صحيح. يدعم الإنزيم التقديم الكامل مع mount() ، ويمكنك أيضًا استخدامه لاختبار تغييرات حالة ودورة حياة المكون.
يمكنك قراءة وثائق الإنزيم لمزيد من تقنيات الاختبار. تستخدم وثائق الإنزيم Chai و Sinon للتأكيدات ، لكنك لا يتعين عليك استخدامها لأن Jest يوفر expect() و jest.fn() للجواسيس.
فيما يلي مثال من وثائق الإنزيم التي تؤكد إخراجًا محددًا ، أعيد كتابته لاستخدام مطابقة Jest:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; يتم توثيق جميع المطاعم الدائرية على نطاق واسع هنا.
ومع ذلك ، يمكنك استخدام مكتبة تأكيد طرف ثالث مثل Chai إذا كنت ترغب في ذلك ، كما هو موضح أدناه.
بالإضافة إلى ذلك ، قد تجد أنزيم مزاح مفيد لتبسيط الاختبارات الخاصة بك مع المطاعم القابلة للقراءة. يمكن كتابة contains أعلاه أكثر ببساطة مع إنزيم مزاح.
expect ( wrapper ) . toContainReact ( welcome ) لتمكين هذا ، قم بتثبيت jest-enzyme :
npm install --save jest-enzyme بدلاً من ذلك ، يمكنك استخدام yarn :
yarn add jest-enzyme استيراده في src/setupTests.js لإتاحة المباراة في كل اختبار:
import 'jest-enzyme' ; نوصي باستخدام expect() للتأكيدات و jest.fn() للجواسيس. إذا كنت تواجه مشكلات معهم ، فيرجى تقديمها ضد Jest ، وسنصلحها. نعتزم الحفاظ على جعلها أفضل للرد ، ودعم ، على سبيل المثال ، عناصر رد الفعل الجميلة مثل JSX.
ومع ذلك ، إذا كنت معتادًا على مكتبات أخرى ، مثل Chai و Sinon ، أو إذا كان لديك رمز موجود باستخدامها ترغب في تنفيذها ، فيمكنك استيرادها عادةً مثل هذا:
import sinon from 'sinon' ;
import { expect } from 'chai' ;ثم استخدمها في اختباراتك كما تفعل عادة.
ملاحظة: تتوفر هذه الميزة مع
[email protected]وأعلى.
إذا كان تطبيقك يستخدم واجهة برمجة تطبيقات المتصفح تحتاج إلى السخرية في الاختبارات الخاصة بك أو إذا كنت بحاجة فقط إلى إعداد عالمي قبل إجراء اختباراتك ، فأضف src/setupTests.js إلى مشروعك. سيتم تنفيذها تلقائيًا قبل إجراء اختباراتك.
على سبيل المثال:
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMockملاحظة: ضع في اعتبارك أنه إذا قررت "الإخراج" قبل إنشاء
src/setupTests.jssetupTestFrameworkScriptFileفلن يحتوي ملفpackage.jsonالناتج شيء مثل ما يلي:
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
يمكنك استبداله it() بـ xit() لاستبعاد الاختبار مؤقتًا من التنفيذ.
وبالمثل ، يتيح لك fit() التركيز على اختبار معين دون إجراء أي اختبارات أخرى.
لدى Jest مراسل تغطية متكامل يعمل بشكل جيد مع ES6 ولا يتطلب أي تكوين.
قم بتشغيل npm test -- --coverage (ملاحظة إضافية -- الوسط) لتضمين تقرير تغطية مثل هذا:
لاحظ أن الاختبارات تعمل أبطأ بكثير مع التغطية ، لذا يوصى بتشغيلها بشكل منفصل عن سير العمل العادي.
يمكن تجاوز تكوين التغطية الافتراضية الدائرية عن طريق إضافة أي من المفاتيح المدعومة التالية إلى تكوين مزاح في الحزمة الخاصة بك.
التجاوزات المدعومة:
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializersمثال باقة. json:
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
} بشكل افتراضي ، يقوم npm test بتشغيل المراقب مع CLI التفاعلية. ومع ذلك ، يمكنك إجبارها على إجراء الاختبارات مرة واحدة وإنهاء العملية عن طريق تعيين متغير بيئة يسمى CI .
عند إنشاء بناء التطبيق الخاص بك مع تحذيرات npm run build لا يتم فحصها افتراضيًا. مثل npm test ، يمكنك إجبار البناء على إجراء فحص تحذير Linter عن طريق تعيين CI المتغير البيئي. إذا تمت مواجهة أي تحذيرات ، فإن البناء يفشل.
تضع خوادم CI الشهيرة بالفعل CI البيئة بشكل افتراضي ولكن يمكنك القيام بذلك بنفسك أيضًا:
.travis.yml إلى مستودع GIT الخاص بك. language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
اتبع هذه المقالة لإعداد Circleci مع مشروع Create React App.
set CI = true && npm test set CI = true && npm run build(ملاحظة: عدم وجود مسافة بيضاء مقصودة.)
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run buildسيجبر أمر الاختبار Jest على إجراء الاختبارات مرة واحدة بدلاً من إطلاق المراقب.
إذا وجدت نفسك تقوم بذلك في كثير من الأحيان قيد التطوير ، فيرجى تقديم مشكلة لتخبرنا عن حالة الاستخدام الخاصة بك لأننا نريد أن نجعل Watcher أفضل تجربة ونفتح لتغيير كيفية عملها لاستيعاب المزيد من سير العمل.
سيتحقق أمر Build من الحصول على تحذيرات Linter ويفشل إذا تم العثور على أي منها.
بشكل افتراضي ، يبدو أن package.json من المشروع الذي تم إنشاؤه يلي:
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom" إذا كنت تعلم أن أيا من اختباراتك تعتمد على JSDOM ، فيمكنك إزالة --env=jsdom ، وسيتم إجراء اختباراتك بشكل أسرع:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"لمساعدتك في اتخاذ قرار ، إليك قائمة من واجهات برمجة التطبيقات التي تحتاج إلى jsdom :
window documentReactDOM.render()TestUtils.renderIntoDocument() (اختصار لما سبق)mount() في الإنزيمفي المقابل ، ليست هناك حاجة إلى JSDOM لواجهة برمجة التطبيقات التالية:
TestUtils.createRenderer() (التقديم الضحل)shallow() في الإنزيمأخيرًا ، ليس هناك حاجة أيضًا إلى JSDOM لاختبار اللقطة.
يعد اختبار Snapshot ميزة Jest التي تقوم تلقائيًا بإنشاء لقطات نصية من مكوناتك وتنقذها على القرص ، لذا إذا تغير إخراج واجهة المستخدم ، فسيتم إخطارك دون كتابة أي تأكيدات على مخرج المكون يدويًا. اقرأ المزيد عن اختبار اللقطة.
إذا كنت تستخدم رمز Visual Studio ، فهناك امتداد مزاح يعمل مع إنشاء تطبيق React Out Out Out of the Box. يوفر هذا الكثير من الميزات التي تشبه IDE أثناء استخدام محرر نصية: إظهار حالة تشغيل الاختبار مع رسائل FAIL المحتملة مضمنة ، وبدء وإيقاف المراقب تلقائيًا ، وتقديم تحديثات لقطة بنقرة واحدة.
هناك طرق مختلفة لإعداد تصحيح الأخطاء للاختبارات الخاصة بك. نغطي تصحيح الأخطاء في رمز Chrome و Visual Studio.
ملاحظة: تتطلب اختبارات تصحيح الأخطاء العقدة 8 أو أعلى.
أضف ما يلي إلى قسم scripts في package.json مشروعك. json
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} مكان debugger; البيانات في أي اختبار وتشغيل:
$ npm run test:debugسيبدأ هذا في إجراء اختباراتك ، ولكن يتوقف قبل التنفيذ للسماح لتصحيح الأخطاء بالتعلق بالعملية.
افتح ما يلي في الكروم
about:inspect
بعد فتح هذا الرابط ، سيتم عرض أدوات مطور Chrome. حدد inspect في عمليتك وسيتم تعيين نقطة توقف في السطر الأول من البرنامج النصي React (يتم ذلك ببساطة لإعطائك وقتًا لفتح أدوات المطورين ومنع Jest من التنفيذ قبل أن يكون لديك وقت للقيام بذلك). انقر فوق الزر الذي يشبه زر "تشغيل" في الجانب الأيمن العلوي من الشاشة لمتابعة التنفيذ. عندما يقوم Jest بتنفيذ الاختبار الذي يحتوي على بيان التصحيح ، فإن التنفيذ سيتوقف مؤقتًا ويمكنك فحص النطاق الحالي ومكدس الاتصال.
ملاحظة: يتأكد خيار -RuninBand CLI من اختبار Jest في نفس العملية بدلاً من التفريخ لعمليات الاختبارات الفردية. عادةً ما يقوم اختبار Jest Parallely بتجهيز العمليات ولكن من الصعب تصحيح العديد من العمليات في نفس الوقت.
يتم دعم اختبارات التصحيح الدائرية خارج المربع لرمز Visual Studio.
استخدم ملف تكوين launch.json التالي:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
عادة ، في التطبيق ، لديك الكثير من مكونات واجهة المستخدم ، ولكل منها العديد من الحالات المختلفة. على سبيل المثال ، يمكن أن يكون مكون زر بسيط الحالات التالية:
عادة ، من الصعب رؤية هذه الحالات دون تشغيل تطبيق عينة أو بعض الأمثلة.
لا يتضمن إنشاء تطبيق React أي أدوات لهذا افتراضيًا ، ولكن يمكنك بسهولة إضافة كتاب Storybook لـ React (Source) أو React StyleGuidist (المصدر) إلى مشروعك. هذه أدوات طرف ثالث تتيح لك تطوير المكونات ورؤية جميع حالاتها بمعزل عن تطبيقك .
يمكنك أيضًا نشر دليل القصص أو دليل النمط كتطبيق ثابت. وبهذه الطريقة ، يمكن لكل شخص في فريقك عرض ومراجعة حالات مختلفة من مكونات واجهة المستخدم دون بدء تشغيل خادم خلفي أو إنشاء حساب في تطبيقك.
القصص القصيرة هي بيئة تطوير لمكونات واجهة المستخدم. يسمح لك بتصفح مكتبة مكون ، وعرض الحالات المختلفة لكل مكون ، وتطوير واختبار مكونات.
أولاً ، قم بتثبيت حزمة NPM التالية على مستوى العالم:
npm install -g @storybook/cliثم ، قم بتشغيل الأمر التالي داخل دليل التطبيق الخاص بك:
getstorybookبعد ذلك ، اتبع التعليمات على الشاشة.
تعرف على المزيد حول React Storybook:
يجمع StyleGuidist بين دليل الأناقة ، حيث يتم تقديم جميع مكوناتك على صفحة واحدة مع وثائق الدعائم الخاصة بهم وأمثلة الاستخدام ، مع بيئة لتطوير المكونات بمعزل ، على غرار كتاب القصص. في StyleGuidist ، تكتب أمثلة في Marmdown ، حيث يتم تقديم كل مقتطف رمز كملعب قابل للتحرير.
أولا ، تثبيت styleguidist:
npm install --save react-styleguidist بدلاً من ذلك ، يمكنك استخدام yarn :
yarn add react-styleguidist ثم ، أضف هذه البرامج النصية إلى package.json الخاصة بك. json:
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",ثم ، قم بتشغيل الأمر التالي داخل دليل التطبيق الخاص بك:
npm run styleguideبعد ذلك ، اتبع التعليمات على الشاشة.
تعرف على المزيد حول React StyleGuidist:
لا يوفر إنشاء تطبيق React أي وظيفة مدمجة لنشر مكون إلى NPM. إذا كنت مستعدًا لاستخراج مكون من مشروعك حتى يتمكن الآخرون من استخدامه ، فإننا نوصي بنقله إلى دليل منفصل خارج مشروعك ثم استخدام أداة مثل NWB لإعدادها للنشر.
بشكل افتراضي ، يعد بناء الإنتاج تطبيق ويب تدريجيًا بالكامل غير متصل بالإنترنت.
تطبيقات الويب التقدمية أسرع وأكثر موثوقية من صفحات الويب التقليدية ، وتوفر تجربة جذابة للجوال:
تم دمج sw-precache-webpack-plugin في تكوين الإنتاج ، وسيهتم بإنشاء ملف عامل خدمة يتقدم تلقائيًا من جميع أصولك المحلية والحفاظ على تحديثها أثناء نشر التحديثات. سيستخدم عامل الخدمة استراتيجية ذاكرة التخزين المؤقت الأولى للتعامل مع جميع طلبات الأصول المحلية ، بما في ذلك HTML الأولي ، مع التأكد من أن تطبيق الويب الخاص بك سريع بشكل موثوق ، حتى على شبكة بطيئة أو غير موثوقة.
إذا كنت تفضل عدم تمكين عمال الخدمة قبل نشر الإنتاج الأولي الخاص بك ، فقم بإزالة المكالمة إلى registerServiceWorker() من src/index.js .
إذا كنت قد قمت سابقًا بتمكين عمال الخدمة في نشر الإنتاج الخاص بك وقررت أنك ترغب في تعطيلهم لجميع مستخدميك الحاليين ، فيمكنك تبديل المكالمة إلى registerServiceWorker() في src/index.js أولاً عن طريق تعديل استيراد عامل الخدمة :
import { unregister } from './registerServiceWorker' ; ثم استدعاء unregister() بدلا من ذلك. بعد أن يزور المستخدم صفحة تحتوي على unregister() ، سيتم إلغاء تثبيت عامل الخدمة. لاحظ أنه بناءً على كيفية تقديم /service-worker.js ، قد يستغرق الأمر ما يصل إلى 24 ساعة حتى يتم إبطال ذاكرة التخزين المؤقت.
يحتاج عمال الخدمة إلى HTTPS ، على الرغم من تسهيل الاختبارات المحلية ، فإن هذه السياسة لا تنطبق على localhost . إذا كان خادم الويب الخاص بك لا يدعم HTTPS ، فسوف يفشل تسجيل عامل الخدمة ، لكن بقية تطبيق الويب الخاص بك سيبقى وظيفيًا.
لا يتم دعم عمال الخدمة حاليًا في جميع متصفحات الويب. لن تتم محاولة تسجيل عامل الخدمة في المتصفحات التي تفتقر إلى الدعم.
يتم تمكين عامل الخدمة فقط في بيئة الإنتاج ، على سبيل المثال إخراج npm run build . يوصى بعدم تمكين عامل خدمة في وضع عدم الاتصال في مجال التطوير ، حيث يمكن أن يؤدي إلى الإحباط عند استخدام الأصول المخزنة في السابق ولا تتضمن أحدث التغييرات التي أجريتها محليًا.
إذا كنت بحاجة إلى اختبار عامل الخدمة غير المتصل بالإنترنت محليًا ، فقم بإنشاء التطبيق (باستخدام npm run build ) وتشغيل خادم HTTP بسيط من دليل الإنشاء الخاص بك. بعد تشغيل برنامج Build Script ، سيعطي create-react-app تعليمات لأحد الطرق لاختبار بناء الإنتاج محليًا ، وتتمتع تعليمات النشر بتعليمات لاستخدام طرق أخرى. تأكد من استخدام نافذة متخفية دائمًا لتجنب المضاعفات مع ذاكرة التخزين المؤقت للمتصفح.
إذا أمكن ، قم بتكوين بيئة الإنتاج الخاصة بك لخدمة service-worker.js الذي تم إنشاؤه مع تعطيل التخزين المؤقت HTTP. إذا لم يكن ذلك ممكنًا-على سبيل المثال ، لا تسمح لك صفحات Github ، بتغيير فترة ذاكرة التخزين المؤقت HTTP الافتراضية لمدة 10 دقائق-ثم تكون على علم بأنه إذا قمت بزيارة موقع الإنتاج الخاص بك ، ثم إعادة النظر مرة أخرى قبل انتهاء service-worker.js HTTP Cache ، ستستمر في الحصول على الأصول المخزنة مؤقتًا من عامل الخدمة. إذا كانت لديك حاجة فورية لعرض نشر الإنتاج المحدثة ، فإن أداء التحول الذي سيحترمه سيؤدي إلى تعطيل عامل الخدمة مؤقتًا واسترداد جميع الأصول من الشبكة.
المستخدمون ليسوا على دراية بتطبيقات الويب دون اتصال بالإنترنت. قد يكون من المفيد إخبار المستخدم بموعد انتهاء عامل الخدمة من ملء ذاكرة التخزين المؤقت الخاصة بك (عرض رسالة "يعمل تطبيق الويب هذا في وضع عدم الاتصال في المرة القادمة يقومون بتحميل الصفحة (يعرض "محتوى جديد متاح ؛ يرجى التحديث." رسالة). يُترك إظهار هذه الرسائل حاليًا كتمرين للمطور ، ولكن كنقطة انطلاق ، يمكنك الاستفادة من المنطق المدرج في src/registerServiceWorker.js ، والذي يوضح أحداث دورة حياة عامل الخدمة للاستماع لاكتشاف كل سيناريو ، و وهو أمر افتراضي ، ما عليك سوى تسجيل الرسائل المناسبة إلى وحدة تحكم JavaScript.
بشكل افتراضي ، لن يعترض ملف عامل الخدمة الذي تم إنشاؤه أو يعترض أي حركة مرور عبر الأصل ، مثل طلبات HTTP API أو الصور أو التضمين المحملة من مجال مختلف. إذا كنت ترغب في استخدام استراتيجية التخزين المؤقت في وقت التشغيل لتلك الطلبات ، فيمكنك eject خيار runtimeCaching ثم تكوينه في قسم SWPrecacheWebpackPlugin في webpack.config.prod.js .
يتضمن التكوين الافتراضي بيان تطبيق الويب الموجود في public/manifest.json ، يمكنك التخصيص مع التفاصيل الخاصة بتطبيق الويب الخاص بك.
عندما يضيف المستخدم تطبيق ويب إلى HomeScreen باستخدام Chrome أو Firefox على Android ، تحدد البيانات الوصفية في manifest.json أي الرموز والأسماء وألوان العلامات التجارية التي يجب استخدامها عند عرض تطبيق الويب. يوفر دليل بيان تطبيق الويب مزيدًا من السياق حول معنى كل حقل ، وكيف ستؤثر التخصيصات على تجربة المستخدمين الخاصة بك.
يحلل مستكشف خريطة المصدر حزم JavaScript باستخدام خرائط المصدر. هذا يساعدك على فهم من أين يأتي الكود.
لإضافة مستكشف خريطة المصدر إلى مشروع إنشاء تطبيق React ، اتبع الخطوات هذه:
npm install --save source-map-explorer بدلاً من ذلك ، يمكنك استخدام yarn :
yarn add source-map-explorer ثم في package.json ، أضف السطر التالي إلى scripts :
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",ثم لتحليل الحزمة قم بتشغيل بناء الإنتاج ثم قم بتشغيل البرنامج النصي.
npm run build
npm run analyze
يقوم npm run build بإنشاء دليل build مع إنشاء إنتاج لتطبيقك. قم بإعداد خادم /static/js/main.<hash>.js /static/js/main.<hash>.js لديك بحيث يتم تقديم زائر إلى موقعك index.html /static/js/main.<hash>.js .
بالنسبة للبيئات التي تستخدم العقدة ، ستكون أسهل طريقة للتعامل مع هذا لتثبيت الخدمة والسماح لها بالتعامل مع الباقي:
npm install -g serve
serve -s build سيخدم الأمر الأخير الموضح أعلاه موقعك الثابت على المنفذ 5000 . مثل العديد من الإعدادات الداخلية للخدمة ، يمكن تعديل المنفذ باستخدام أعلام -p أو --port .
قم بتشغيل هذا الأمر للحصول على قائمة كاملة بالخيارات المتاحة:
serve -hلا تحتاج بالضرورة إلى خادم ثابت لتشغيل مشروع تطبيق React في الإنتاج. إنه يعمل بنفس القدر من الاندماج في ديناميكية حالية.
إليك مثال برمجي باستخدام العقدة والتعبير:
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;اختيار برنامج الخادم الخاص بك ليس مهمًا أيضًا. نظرًا لأن Create React App هو نظام أساسي تمامًا ، فلا داعي لاستخدام العقدة بشكل صريح.
مجلد build ذو الأصول الثابتة هو الإخراج الوحيد الذي ينتج عن إنشاء تطبيق React.
However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like /todos/42 in your single-page app.
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory ), many static file servers will fail. For example, if you used React Router with a route for /todos/42 , the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
More information here.
على سبيل المثال:
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployThen run:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ) . Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| عامل | تطوير | إنتاج | الاستخدام |
|---|---|---|---|
| المتصفح | ✅ | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension. | |
| يستضيف | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| ميناء | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| سي.آي | ؟ | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it completely. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
على سبيل المثال:
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build fails to minifySome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
