إنشاء تطبيق React: احصل على React Projects جاهزة بسرعة

بدء مشروع React جديد ليس بهذه البساطة. بدلاً من الغوص مباشرة في الكود وإضفاء الحيوية على تطبيقك ، عليك قضاء الوقت في تكوين أدوات البناء المناسبة لإعداد بيئة تطوير محلية ، واختبار الوحدة ، وبناء الإنتاج. لحسن الحظ ، المساعدة في متناول اليد في شكل تطبيق Create React.

إنشاء-رد- التطبيق هي أداة سطر أوامر من Facebook تتيح لك إنشاء مشروع React جديد واستخدام حزمة ويب معدّة مسبقًا للتطوير. لقد أصبح منذ فترة طويلة جزءًا لا يتجزأ من نظام React البيئي الذي يلغي الحاجة إلى الحفاظ على خطوط أنابيب معقدة في مشروعك ، مما يتيح لك التركيز على التطبيق نفسه.

كيف يعمل إنشاء تطبيق React؟

إن إنشاء تطبيق React هو أداة قائمة بذاتها يمكن تشغيلها باستخدام إما npm أو Yarn.

يمكنك إنشاء وتشغيل مشروع جديد باستخدام npm فقط باستخدام أمرين:

npx create-react-app new-app
cd new-app
npm start

إذا كنت تفضل الغزل ، فيمكنك القيام بذلك على النحو التالي:

yarn create react-app new-app
cd new app
yarn start

سيعمل إنشاء تطبيق React على إنشاء هيكل المشروع التالي:

new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

سيضيف أيضًا ملف react-scripts حزمة لمشروعك والتي سوف تحتوي على جميع التكوين وبناء البرامج النصية. بمعنى آخر ، يعتمد مشروعك على react-scripts، ليس على create-react-app بحد ذاتها. بمجرد اكتمال التثبيت ، يمكنك تشغيل خادم dev وبدء العمل في مشروعك.

الميزات الأساسية

خادم التنمية المحلية

أول شيء ستحتاجه هو بيئة تطوير محلية. ادارة npm start سيقوم بتشغيل خادم تطوير webpack مع مراقب سيعيد تحميل التطبيق تلقائيًا بمجرد تغيير شيء ما. بدءًا من الإصدار 4 ، يدعم تطبيق Create React التحديث السريع لـ React كبديل لاستبدال Hot Module. مثل سابقه ، يسمح لنا هذا بتحديث أجزاء من التطبيق بسرعة بعد إجراء تغييرات في قاعدة التعليمات البرمجية ، ولكن لديه بعض الميزات الجديدة أيضًا. سيحاول Fast Reload إعادة تحميل الجزء المعدل فقط من التطبيق ، والحفاظ على حالة المكونات الوظيفية والخطافات ، وإعادة تحميل التطبيق تلقائيًا بعد تصحيح خطأ نحوي.

يمكنك أيضًا تقديم تطبيقك عبر HTTPS ، من خلال تعيين ملف HTTPS متغير ل true قبل تشغيل الخادم.

سيتم إنشاء التطبيق مع العديد من الميزات المضمنة فيه.

ES6 و ES7

يأتي التطبيق مع إعداد Babel المسبق الخاص به – تطبيق babel-preset-reaction – لدعم مجموعة من ميزات ES6 و ES7. بعض الميزات المدعومة هي:

  • غير متزامن / انتظار
  • خصائص بقية / انتشار الكائن
  • استيراد ديناميكي ()
  • حقول التصنيف والخصائص الثابتة

لاحظ أن Create React App لا يوفر أي polyfills لميزات وقت التشغيل ، لذلك إذا كنت بحاجة إلى أي منها ، فأنت بحاجة إلى تضمينها بنفسك.

استيراد الأصول

يمكنك استيراد ملفات CSS أو الصور أو الخطوط من وحدات JavaScript النمطية التي تسمح لك بتجميع الملفات المستخدمة في تطبيقك. بمجرد إنشاء التطبيق ، سيقوم Create React App بنسخ هذه الملفات إلى مجلد الإنشاء. فيما يلي مثال على استيراد صورة:

import image from './image.png';

console.log(image); 

يمكنك أيضًا استخدام هذه الميزة في CSS:

.image {
  background-image: url(./image.png);
}

التصميم

كما ذكرنا في القسم السابق ، يسمح لك تطبيق Create React بإضافة أنماط بمجرد استيراد ملفات CSS المطلوبة. عند إنشاء التطبيق ، سيتم تجميع جميع ملفات CSS في حزمة واحدة وإضافتها إلى مجلد الإنشاء.

يدعم إنشاء تطبيق React أيضًا وحدات CSS. حسب الاصطلاح ، الملفات المسماة باسم *.module.css يتم التعامل معها كوحدات CSS. تسمح لنا هذه التقنية بتجنب تعارض محددات CSS ، لأن Create React App سينشئ محددات فئة فريدة في ملفات CSS الناتجة.

بدلاً من ذلك ، إذا كنت تفضل استخدام معالجات CSS الأولية ، فيمكنك استيراد ملفات ساس .scss الملفات. ومع ذلك ، ستحتاج إلى تثبيت ملف node-sass الحزمة بشكل منفصل.

بالإضافة إلى ذلك ، يوفر إنشاء تطبيق React طريقة للإضافة يعيد CSS بإضافة @import-normalize; في أي مكان في ملفات CSS الخاصة بك. تخضع الأنماط أيضًا للمعالجة اللاحقة ، والتي تقللها ، وتضيف بادئات البائع باستخدام Autoprefixer ، وميزات polyfill غير المدعومة ، مثل all الخاصية والخصائص المخصصة ونطاقات الاستعلام عن الوسائط.

تشغيل اختبارات الوحدة

التنفيذ npm test سيجري اختبارات باستخدام Jest ويبدأ مراقب لإعادة تشغيلها كلما قمت بتغيير شيء ما:

 PASS  src/App.test.js
  ✓ renders learn react link (19 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.995 s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

دعابة هو عداء اختبار تم تطويره أيضًا بواسطة Facebook كبديل لـ Mocha أو Karma. يقوم بإجراء الاختبارات في بيئة Node بدلاً من متصفح حقيقي ، ولكنه يوفر بعضًا من استخدامات globals الخاصة بالمتصفح jsdom.

يأتي Jest أيضًا مدمجًا مع نظام التحكم في الإصدار الخاص بك ، وبشكل افتراضي لن يقوم إلا بإجراء اختبارات على الملفات التي تم تغييرها منذ آخر التزام لك. لمزيد من المعلومات حول هذا الموضوع ، راجع “كيفية اختبار مكونات التفاعل باستخدام الدعابة”.

ESLint

أثناء التطوير ، سيتم أيضًا تشغيل التعليمات البرمجية الخاصة بك من خلال ESLint ، وهو محلل كود ثابت سيساعدك على اكتشاف الأخطاء أثناء التطوير.

إنشاء حزمة الإنتاج

عندما يكون لديك أخيرًا شيء لنشره ، يمكنك إنشاء حزمة إنتاج باستخدام npm run build. سيؤدي ذلك إلى إنشاء بنية محسّنة لتطبيقك ، وجاهزة للنشر في بيئتك. سيتم وضع العناصر التي تم إنشاؤها في مجلد الإنشاء:

build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── main.ab7136cd.chunk.css
    │   └── main.ab7136cd.chunk.css.map
    ├── js
    │   ├── 2.8daf1b57.chunk.js
    │   ├── 2.8daf1b57.chunk.js.LICENSE.txt
    │   ├── 2.8daf1b57.chunk.js.map
    │   ├── 3.d75458f9.chunk.js
    │   ├── 3.d75458f9.chunk.js.map
    │   ├── main.1239da4e.chunk.js
    │   ├── main.1239da4e.chunk.js.map
    │   ├── runtime-main.fb72bfda.js
    │   └── runtime-main.fb72bfda.js.map
    └── media
        └── logo.103b5fa1.svg

تعيين

نظرًا لأن إنشاء تطبيق Create React App يتكون من ملفات ثابتة فقط ، فهناك طرق مختلفة يمكنك من خلالها نشرها في بيئتك البعيدة. يمكنك استخدام خادم Node.js إذا كنت تعمل في بيئة Node.js ، أو تخدم التطبيق باستخدام خادم ويب مختلف ، مثل NGINX.

ال قسم النشر في الوثائق الرسمية يوفر نظرة عامة حول كيفية نشر التطبيق على Azure و AWS و Heroku و Netlify وبيئات الاستضافة الشائعة الأخرى.

ميزات التطوير

متغيرات البيئة

يمكنك استخدام متغيرات بيئة العقدة لإدخال القيم في التعليمات البرمجية الخاصة بك في وقت الإنشاء. سيبحث Create React App تلقائيًا عن أي متغيرات بيئة تبدأ بـ REACT_APP_ وإتاحتها تحت العالمية process.env. يمكن أن تكون هذه المتغيرات بتنسيق .env ملف للراحة:

REACT_APP_BACKEND=http://my-api.com
REACT_APP_BACKEND_USER=root

يمكنك بعد ذلك الرجوع إليها في الكود الخاص بك:

fetch({process.env.REACT_APP_SECRET_CODE}/endpoint)

الوكلاء إلى النهاية الخلفية

إذا كان التطبيق الخاص بك سيعمل مع نهاية خلفية بعيدة ، فقد تحتاج إلى أن تكون قادرًا على طلبات الوكيل أثناء التطوير المحلي لتجاوز CORS. يمكن إعداد هذا عن طريق إضافة حقل وكيل إلى ملف package.json ملف:

"proxy": "http://localhost:4000",

بهذه الطريقة ، سيعيد الخادم توجيه أي طلب لا يشير إلى ملف ثابت إلى العنوان المحدد.

تقسيم الكود

يدعم تطبيق Create React تقسيم الكود باستخدام امتداد استيراد ديناميكي () التوجيه. بدلاً من إرجاع القيم التي تم تصديرها بواسطة الوحدة النمطية ، فإنها ستعيد بدلاً من ذلك وعدًا يتم حله في هذه القيم. نتيجة لذلك ، لن يتم تضمين الوحدات التي تم استيرادها بهذه الطريقة في الحزمة النهائية ، ولكنها مضمنة في ملفات منفصلة. يتيح لك ذلك تقليل حجم الحزمة النهائية وتحميل المحتوى عند الطلب.

دعم TypeScript

يمكنك تمكين تيبسكريبت للحصول على فوائد تحليل النوع الثابت عند إنشاء مشروع جديد. يمكن القيام بذلك باستخدام نموذج مختلف غير افتراضي لإنشاء المشروع:

npx create-react-app my-app --template typescript

يمكنك أيضًا إضافة دعم TypeScript إلى مشروع موجود ، كما هو موضح في ملف توثيق.

تطبيقات الويب التقدمية

وبالمثل ، يمكنك إضافة دعم تطبيق الويب التدريجي. يمكنك استخدام عمال الخدمة عن طريق إضافة src/service-worker.js ملف. بدءًا من الإصدار 4 ، سيتم إدخال هذا في التطبيق باستخدام امتداد صندوق العمل مكتبة.

لتمكين عمال الخدمة في مشروع جديد ، يجب أن يتم إنشاؤها من قالب مخصص:

npx create-react-app my-app --template cra-template-pwa


npx create-react-app my-app --template cra-template-pwa-typescript

حيوية الويب

يتيح لك إنشاء تطبيق React قياس أداء واستجابة تطبيقك. يتم ذلك عن طريق تتبع المقاييس المحددة بواسطة حيوية الويب وقياسها باستخدام مكتبة حيوية الويب. تشمل المقاييس أكبر رسم محتوىالتي تقيس أداء التحميل ، أول تأخير في الإدخالو و التحول في التخطيط التراكمي للاستجابة.

يوفر إنشاء تطبيق React وظيفة ملائمة لتتبع جميع المقاييس المتاحة:



reportWebVitals(console.log);

الانسحاب

إذا شعرت في وقت ما أن الميزات المتوفرة لم تعد كافية لمشروعك ، فيمكنك دائمًا إلغاء الاشتراك في الاستخدام react-scripts عن طريق الركض npm run eject. سيؤدي هذا إلى نسخ تكوين حزمة الويب وبناء نصوص برمجية من react-scripts في مشروعك وإزالة التبعية. بعد ذلك ، يمكنك تعديل التكوين كما تراه مناسبًا.

كبديل ، يمكنك أيضًا مفترق الطرق react-scripts والمحافظة على فرعك بالمميزات التي تحتاجها. قد يكون هذا أسهل ، إذا كان لديك العديد من المشاريع للحفاظ عليها.

فى الختام

إذا كنت تتطلع إلى بدء مشروع React جديد ، فلا تبحث عن المزيد. سيسمح لك إنشاء تطبيق React ببدء العمل بسرعة على تطبيقك بدلاً من كتابة تهيئة حزمة ويب أخرى. كما أنه يجعل من السهل تحديث أدوات البناء الخاصة بك بأمر واحد (npm install [email protected]) – شيء عادة ما يكون مهمة شاقة وتستغرق وقتًا طويلاً.

أصبح إنشاء تطبيق React جزءًا لا يتجزأ من نظام React البيئي. سواء كنت تستخدمه لتجميع نموذج أولي سريع ، أو لدعم مشروعك الرئيسي التالي ، فإنه سيوفر لك ساعات عديدة من وقت التطوير.

المصدر

أضف تعليق