yuri admin
1.0.0
هذا حل إدارة وسطى وخلفية يعتمد على React+React-router4+anötd3.
حل متوسط وخلفي يعتمد على React+react-router+antd، جاهز للاستخدام خارج الصندوق، بدون أي تكوين ويحتفظ فقط بـ json
تم تمهيد هذا المشروع باستخدام تطبيق 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.
إنها غير مطلوبة لإجراء الفحص، يجب أن ترى مخرجات الوبر مباشرة في جهازك الطرفي بالإضافة إلى وحدة تحكم المتصفح، ومع ذلك، إذا كنت تفضل ظهور نتائج الوبر مباشرة في المحرر الخاص بك، فهناك بعض الخطوات الإضافية التي يمكنك القيام بها.
ستحتاج إلى تثبيت ملحق 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، راجع منشور المدونة هذا حول lint-staged لمعرفة المزيد حول هذا الموضوع.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 ثابت يتم تحميله بعد ذلك حزمة جافا سكريبت، والتي يتم تناولها هنا.
يتضمن المشروع المُولَّد React وReactDOM كتبعيات، ويتضمن أيضًا مجموعة من البرامج النصية المستخدمة بواسطة إنشاء تطبيق 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 و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، إذا كنت في حاجة إليها، يمكنك دمجها مع إنشاء تطبيق 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 مخصص يتبع هذه الخطوات.
التدفق عبارة عن مدقق للنوع الثابت يساعدك على كتابة التعليمات البرمجية بأخطاء أقل. راجع هذه المقدمة حول استخدام الأنواع الثابتة في 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_ .
يتم تضمين متغيرات البيئة أثناء وقت الإنشاء . نظرًا لأن تطبيق Create 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 و/أو منصة الاستضافة الخاصة بك إلى هذه التعريفات أيضًا.
.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() fetch() توفرها المتصفح. القلق بشأن دعم المتصفح.
تسمح وظيفة fetch العالمية بتقديم طلبات Response fetch Promise
يشتمل هذا المشروع أيضًا على Promise Polyfill الذي fetch() تنفيذًا كاملاً للوعود/A+. async / await
يمكنك معرفة المزيد حول تقديم طلبات AJAX من مكونات React في إدخال الأسئلة الشائعة على موقع React.
ستساعدك هذه البرامج التعليمية على دمج تطبيقك مع الواجهة الخلفية API التي تعمل على منفذ آخر ، باستخدام fetch() للوصول إليه.
تحقق من هذا البرنامج التعليمي.
تحقق من هذا البرنامج التعليمي.
ملاحظة: تتوفر هذه الميزة مع
[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 ) ، ويعود الأمر إلى التأكد من /api عناوين URL مثل /api/todos تشير إلى الشيء الصحيح في الإنتاج. text/html proxy
يدعم خيار proxy اتصالات HTTP و HTTPS و WebSocket.
إذا لم يكن خيار proxy مرنًا بما يكفي لك ، فيمكنك بدلاً من ذلك:
عندما تقوم بتمكين خيار proxy ، فإنك تختار مجموعة أكثر صرامة من الشيكات المضيفة.
لا ينبغي أن يؤثر هذا عليك عند التطوير على 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 .
إذا كنت بحاجة إلى تحديد وكلاء متعددة ، فيمكنك القيام بذلك عن طريق تحديد إدخالات إضافية.
{
// ...
"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 خادمًا يمكنك استخدامه كهدف من المقبس. .Io للعمل مع اختبار WebSocket.org Echo.
هناك بعض الوثائق الجيدة المتاحة لإعداد خادم Socket.io.
ستعمل WebSockets القياسية مع خادم WebSocket قياسي بالإضافة إلى اختبار WebSocket.org.
في كلتا الحالتين ، يمكنك وكيل 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.
للقيام بذلك ، قم بتعيين متغير بيئة HTTPS إلى true ، ثم ابدأ خادم DEV كالمعتاد مع npm start :
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(ملاحظة: عدم وجود مسافة بيضاء مقصودة.)
HTTPS=true npm startلاحظ أن الخادم سيستخدم شهادة موقعة ذاتيا ، لذلك سيعرض متصفح الويب الخاص بك بالتأكيد تحذيرًا عند الوصول إلى الصفحة.
<meta> على الخادم نظرًا لأن Create React App لا تدعم تقديم الخادم ، فقد تتساءل عن كيفية جعل علامات <meta> ديناميكية وتعكس عنوان URL الحالي.
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > بعد ذلك ، على الخادم __OG_TITLE__ بغض النظر __OG_DESCRIPTION__ الواجهة الخلفية التي تستخدمها ، يمكنك قراءة index.html . القيم بحيث تكون آمنة للتضمين في 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 > ثم ، على الخادم window.SERVER_DATA يمكنك استبدال __SERVER_DATA__ json من البيانات الحقيقية قبل إرسال رمز العميل. تطبيقك عرضة لهجمات XSS.
ملاحظة: تتوفر هذه الميزة مع
[email protected]وأعلى.
اقرأ دليل الترحيل لمعرفة كيفية تمكينه في المشاريع القديمة!
Create React App يستخدم Jest كعداء للاختبار.
Jest هو عداء قائم على العقدة.
على الرغم من أن Jest يوفر كرات المتصفح مثل window بفضل JSDOM ، إلا أنها مجرد تقريبية لسلوك المتصفح الحقيقي.
نوصيك باستخدام أداة منفصلة للاختبارات الشاملة للمتصفح إذا كنت في حاجة إليها.
سيبحث Jest عن ملفات اختبار مع أي من اتفاقيات التسمية الشائعة التالية:
.js لاحقة في مجلدات __tests__ ..test.js لاحقة..spec.js لاحقة. يمكن أن تكون ملفات .test.js / .spec.js (أو مجلدات __tests__ ) في أي عمق تحت مجلد المستوى العلوي src .
نوصي بوضع App.js الاختبار (أو __tests__ المجلدات) بجانب الكود الذي يختبرونه بحيث تظهر الواردات النسبية App.test.js سبيل المثال. import App from './App' بدلاً من مسار نسبي طويل.
عند تشغيل npm test npm start سيتم تشغيل Jest في وضع الساعة.
يتضمن المراقب واجهة خط الأوامر التفاعلية مع القدرة على إجراء جميع الاختبارات ، أو التركيز على نمط البحث. لاحظ "شاهد الاستخدام" أن المراقب يطبع بعد كل تشغيل:
بشكل افتراضي ، عندما تقوم بتشغيل npm test ، ستدير Jest فقط الاختبارات المتعلقة بالملفات منذ الالتزام الأخير. في كثير من الأحيان يرتكب الرمز الذي لا يجتاز الاختبارات.
سوف يذكر Jest دائمًا بشكل a أنه تم إجراء اختبارات تتعلق بالملفات التي تم تغييرها منذ الالتزام الأخير.
ستقوم Jest دائمًا بتشغيل جميع الاختبارات على خادم التكامل المستمر أو إذا لم يكن المشروع داخل مستودع GIT أو Mercurial.
لإنشاء اختبارات ، أضفه describe() it() (أو test() ) مع اسم الاختبار والرمز الخاص به.
يوفر 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 . 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 الذي تستخدمه.
ستحتاج المحول أيضًا إلى تكوينه في ملف الإعداد العالمي الخاص بك:
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 /> ) ;
} ) ; <App> عكس اختبار الدخان السابق <Button> ReactDom <App> ReactDOM.render() أمر mount() لاختبارات الوحدة المعزولة ، ولكن قد لا تزال ترغب في إنشاء بعض اختبارات العرض الكاملة لضمان دمج المكونات بشكل صحيح.
يمكنك قراءة وثائق الإنزيم لمزيد jest.fn() تقنيات الاختبار expect()
فيما يلي مثال من وثائق الإنزيم التي تؤكد إخراجًا محددًا ، أعيد كتابته لاستخدام مطابقة 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() للجواسيس. ، على سبيل المثال ، عناصر رد الفعل الجميلة مثل 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 " ]
}
} بشكل افتراضي CI يقوم npm test بتشغيل المراقب مع CLI التفاعلية.
عند إنشاء تحذيرات بناء npm test CI npm run build بشكل افتراضي. .
تضع خوادم 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 of the Box. ، البدء وإيقاف المراقب تلقائيًا ، وتقديم تحديثات لقطة بنقرة واحدة.
هناك طرق مختلفة لإعداد تصحيح الأخطاء للاختبارات الخاصة بك.
ملاحظة: تتطلب اختبارات تصحيح الأخطاء العقدة 8 أو أعلى.
أضف ما يلي إلى قسم scripts في package.json مشروعك. json
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} وضع debugger; البيانات في أي اختبار وتشغيل:
$ npm run test:debugسيبدأ هذا في إجراء اختباراتك ، ولكن يتوقف قبل التنفيذ للسماح لتصحيح الأخطاء بالتعلق بالعملية.
افتح ما يلي في الكروم
about:inspect
بعد فتح inspect الرابط ، سيتم عرض أدوات مطور Chrome. من التنفيذ قبل أن يكون لديك وقت للقيام بذلك). يمكنك فحص النطاق الحالي والاتصال كومة.
ملاحظة: يتأكد خيار -Runinband CLI من اختبار Jest في نفس العملية بدلاً من التفريخ للاختبارات الفردية.
يتم دعم اختبارات التصحيح الدائرية خارج المربع لرمز 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 أي أدوات لهذا الافتراضي ، ولكن يمكنك بسهولة إضافة قصة React (Source) أو React StyleGuidist (المصدر) لمشروعك. الدول بمعزل عن تطبيقك .
يمكنك أيضًا نشر دليل القصص أو النمط كطبق ثابت.
Storybook هي بيئة تطوير لمكونات واجهة المستخدم.
أولاً ، قم بتثبيت حزمة NPM التالية على مستوى العالم:
npm install -g @storybook/cliثم ، قم بتشغيل الأمر التالي داخل دليل التطبيق الخاص بك:
getstorybookبعد ذلك ، اتبع التعليمات على الشاشة.
تعرف على المزيد حول React Storybook:
يجمع StyleGuidist بين دليل الأناقة ، حيث يتم تقديم جميع مكوناتك على صفحة واحدة مع وثائق الدعائم والاستخدام ، مع بيئة لتطوير المكونات في عزلة ، على غرار القصة. المقدمة كملعب قابل للتحرير.
أولا ، تثبيت 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:
لا يوفر Create React أي وظيفة مدمجة لنشر مكون إلى NPM. ثم استخدام أداة مثل NWB لإعدادها للنشر.
بشكل افتراضي ، يعد بناء الإنتاج تطبيق ويب تدريجيًا بالكامل غير متصل بالإنترنت.
تطبيقات الويب التقدمية أسرع وأكثر موثوقية من صفحات الويب التقليدية ، وتوفر تجربة جذابة للجوال:
تم دمج sw-precache-webpack-plugin في تكوين الإنتاج ، وسيعتني بإنشاء ملف عامل الخدمة تلقائيًا من جميع أصولك المحلية ويبقيها على تحديث التحديثات. استراتيجية قبل ذاكرة التخزين المؤقت للتعامل مع جميع طلبات الأصول المحلية ، بما في ذلك HTML الأولي ، مما يضمن أن تطبيق الويب الخاص بك سريع بشكل موثوق ، حتى على شبكة بطيئة أو غير موثوق بها.
إذا كنت تفضل عدم تمكين عمال الخدمة قبل نشر الإنتاج الأولي الخاص بك ، فقم بإزالة المكالمة إلى registerServiceWorker() من src/index.js .
إذا كنت قد قمت سابقًا بتمكين عمال الخدمة في نشر الإنتاج الخاص بك وقررت أنك ترغب في تعطيلهم لجميع مستخدميك الحاليين ، فيمكنك تبديل المكالمة إلى registerServiceWorker() في src/index.js أولاً عن طريق تعديل استيراد عامل الخدمة :
import { unregister } from './registerServiceWorker' ; ثم اتصل بـ unregister() /service-worker.js unregister() ذلك. ذاكرة التخزين المؤقت ليتم إبطالها.
يحتاج عمال الخدمة إلى HTTPS ، على الرغم من تسهيل الاختبار المحلي ، لا تنطبق هذه السياسة على localhost .
لا يتم دعم عمال الخدمة حاليًا في جميع متصفحات الويب.
يتم تمكين عامل الخدمة فقط في بيئة الإنتاج ، على سبيل المثال إخراج npm run build . لا تتضمن أحدث التغييرات التي أجريتها محليًا.
إذا كنت بحاجة إلى اختبار عامل الخدمة في وضع عدم الاتصال الخاص بك محليًا ، فقم بإنشاء التطبيق (باستخدام npm run build ) وقم بتشغيل خادم HTTP بسيط من دليل الإنشاء بعد تشغيل البرنامج النصي للبناء ، وسيعطي create-react-app تعليمات لطريقة واحدة بطريقة واحدة. لاختبار بناء الإنتاج محليًا ، تحتوي تعليمات النشر على تعليمات لاستخدام طرق أخرى.
إذا كان ذلك ممكنًا ، قم بتكوين بيئة الإنتاج الخاصة بك لخدمة service-worker.js الذي تم إنشاؤه مع تعطيل التخزين المؤقت HTTP. إذا قمت بزيارة موقع الإنتاج الخاص بك ، ثم إعادة النظر مرة أخرى قبل انتهاء service-worker.js . النشر ، سيؤدي أداء التحول إلى تعطيل عامل الخدمة مؤقتًا واسترداد جميع الأصول من الشبكة.
لا يعرف المستخدمون دائمًا تطبيقات الويب غير المتاحة للإنترنت. جلب عامل الخدمة آخر التحديثات التي ستكون متاحة في المرة القادمة التي يقومون فيها بتحميل الصفحة (تُظهر "محتوى جديد متاحًا ؛ يرجى التحديث." رسالة). نقطة انطلاق ، يمكنك الاستفادة من المنطق المدرج في src/registerServiceWorker.js ، والذي يوضح أحداث دورة حياة عامل الخدمة التي يجب الاستماع إليها للكشف عن كل سيناريو ، والتي تقوم فقط بتسجيل الرسائل المناسبة إلى وحدة تحكم JavaScript.
بشكل افتراضي ، لن يعترض ملف عامل الخدمة الذي تم إنشاؤه أو تخزينه على أي حركة مرور ، مثل طلبات HTTP API ، أو التضمينات المحملة من مجال مختلف. eject خيار runtimeCaching ثم تكوينه في قسم SWPrecacheWebpackPlugin في webpack.config.prod.js .
يتضمن التكوين الافتراضي بيان تطبيق الويب الموجود في public/manifest.json ، يمكنك التخصيص مع التفاصيل الخاصة بتطبيق الويب الخاص بك.
عندما يضيف المستخدم تطبيقًا على شبكة الإنترنت إلى HomeScreen باستخدام Chrome أو Firefox على Android ، فإن البيانات الوصفية في manifest.json تحدد الرموز والأسماء وألوان العلامات التجارية التي يتم استخدامها عند عرض تطبيق الويب. ما يعنيه كل حقل ، وكيف ستؤثر تخصيصاتك على تجربة المستخدمين.
حزم JavaScript 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
يقوم index.html npm run build بإنشاء دليل build مع إنتاج تنشيطك /static/js/main.<hash>.js يتم تقديم /static/js/main.<hash>.js مع محتويات /static/js/main.<hash>.js .<hash>.js.
بالنسبة للبيئات التي تستخدم العقدة ، ستكون أسهل طريقة للتعامل مع هذا لتثبيت الخدمة والسماح لها بالتعامل مع الباقي:
npm install -g serve
serve -s build سيخدم الأمر الأخير المذكور أعلاه موقعك الثابت على المنفذ 5000. مثل العديد من الإعدادات الداخلية للخدمة ، يمكن تعديل المنفذ باستخدام أعلام -p أو --port .
قم بتشغيل هذا الأمر للحصول على قائمة كاملة بالخيارات المتاحة:
serve -hلا تحتاج بالضرورة إلى خادم ثابت من أجل تشغيل مشروع Create 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 ) ;اختيار برنامج الخادم الخاص بك ليس مهمًا أيضًا.
مجلد build ذو الأصول الثابتة هو الإخراج الوحيد الذي ينتج عن إنشاء تطبيق React.
ومع ذلك /todos/42 فإن هذا لا يكفي إذا كنت تستخدم التوجيه من جانب العميل.
إذا كنت تستخدم أجهزة التوجيه التي تستخدم API HTML5 pushState تحت الغطاء (على سبيل المثال ، توجيه جهاز التوجيه مع browserHistory ) ، ستفشل العديد من خوادم الملفات /todos/42 . سوف يستجيب الخادم إلى localhost:3000/todos/42 بشكل صحيح ، ولكن خدمة الإنتاج السريع على النحو الوارد أعلاه لن تكون كذلك.
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 التالي:
{
"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.
| عامل | تطوير | إنتاج | الاستخدام |
|---|---|---|---|
| BROWSER | ✅ | 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 بالكامل. | |
| 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 في التصغيرSome 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!
