كيفية إعداد تطبيق React من البداية في 36 خطوة سهلة.

الصورة سيزار كارليفارينو أراغون على أونسبلاش
* سجل نقطة الصفر "مرحبًا ، اسمي $ {اسم المستخدم} ، وربما تتساءل كيف انتهى بي الأمر هنا ..."

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

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

لقد كنت هناك بنفسي. وهذا هو السبب في أنني قررت إصدار دليل لإعداد تطبيق React حديث وذكي. ستكون هناك بعض الخطوات البسيطة المتصاعدة مع الميمات وصور متحركة.

الكشف الكامل: أقوم بذلك لمعرفة المزيد من خلال مشاركة ما أعرفه بالفعل. لذلك إذا كنت تعرف أن شيئًا ما قمت به هنا هو خطأ خاطئ أو أنه يمكن القيام به بشكل أفضل ، فأخبرني في قسم التعليقات ، وسأقوم بتحديثه وفقًا لذلك ... أو أبلغكم عن إساءة الاستخدام

يفترض هذا الدليل:

  • لديك جهاز كمبيوتر
  • هذا الكمبيوتر بعد تثبيت العقدة و npm
  • لديك الإلمام بالأوامر الطرفية وجافا سكريبت

ربط حزام الأمان!

TL، DR:

  1. استنساخ هذا الريبو: https://github.com/timmaloshtan/react-just-add-water
  2. npm i؛ npm البداية
  3. تطوير تطبيق رد فعلك

1. قم بتمرير CLI المفضل لديك واكتب الأوامر التالية:

مقددر مشروعك
مؤتمر نزع السلاح الخاص بك المشروع
المس index.html

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

2. افتح محرر الكود المفضل وقم بملء index.html. يمكنك حفظ الكثير من السعرات الحرارية عند القيام بذلك إذا كنت تستخدم القصاصات في VS Code. فقط اكتب ! و صف صف "علامة تبويب":

حفظ الطاقة دات!

3. قم بإنشاء أول ملف JavaScript. قم بتشغيل هذه الأوامر في جهازك:

mkdir src
المس src / index.js

ملاحظة: على افتراض أنك في المجلد الرئيسي للمشروع ، سيؤدي ذلك إلى إنشاء دليل فرعي src.

4. اكتب بعض JavaScript هنا:

5. لتشغيل جافاسكريبت الذي تم إنشاؤه حديثًا على صفحتنا ، أضف عنصرًا نصيًا بين العلامات الأساسية لصفحتك:

في هذه المرحلة ، يبدو هيكل مشروعك كما يلي:

مشروعك
| -src
  | -index.js
| -index.html

وهل هذا:

الآن لا تريد أن تكون عالقًا في كتابة كل JavaScript في ملف واحد أو إضافة نصوص لكل ملف .js. لذلك تحتاج إلى تجميعه. دعنا ننتقل من العلامات البسيطة والبرامج النصية إلى تثبيت حزمة الوحدة النمطية الخاصة بك وتكوينها.

6. تهيئة مشروع npm عن طريق تشغيل هذا الأمر واتباع المطالبات:

npm init

ملاحظة: سيتم إنشاء ملف package.json لك لوصف مشروعك والاحتفاظ بقائمة تبعياته.

7. قم بإنشاء ملف .npmrc وقم بتكوينه بطريقة تقوم عمليات التثبيت الخاصة بك بإنشاء package-lock.json فقط عندما تخبره بذلك:

المس .npmrc

ملاحظة: يضمن package-lock.json أن تقوم بتثبيت نفس الإصدارات من التبعيات الخاصة بك في كل مرة لتحقيق الاتساق.

ملاحظة: إذا تابعت ذلك فسوف تلاحظ إنشاء الكثير من الملفات التي تنتهي بـ rc. عادة ، يقومون بتكوين الأدوات المساعدة المناظرة لهم: .babelrc ، .eslintrc ، إلخ.

8. قم بتثبيت webpack محليًا عن طريق تشغيل:

npm i -D webpack

ملاحظة: - العلم يحفظه إلى devDependencies المشروع الخاص بك

إذا حاولت تشغيله الآن بكتابة:

node_modules /. بن / webpack

سوف تتلقى إشعارًا:

9. اتفق فقط واتركهم يفعلون ما يفعلونه.

10. في النهاية ، سئمت من كتابة node_modules / .bin / ... في كل مرة. اجعله أكثر قابلية للتطبيق من خلال إضافة نصوص npm في package.json. تحديث خاصية البرامج النصية وفقًا لذلك:

بمجرد تكوين البنية الخاصة بك ، ستتمكن من تشغيلها عن طريق تشغيل:

تشغيل npm بناء

11. قم بإنشاء webpack.config.js اللعين:

المس webpack.config.js

ملاحظة: يصدر هذا الملف تكوينًا يستخدمه webpack لإنشاء الحزمة الخاصة بك.

12. أخبره عن مكان إدخال التطبيق الخاص بك لبدء إنشاء رسم بياني تبعية ومكان وضع الحزمة الناتجة:

13. من الملائم أيضًا التحكم في حزمة الويب لإنشاء ملف html في الحزمة الخاصة بك إما من القالب الافتراضي أو القالب الذي تقدمه. نستخدم html-webpack-plugin لذلك:

npm i -D html-webpack-plugin

14. تكوين هذا الولد الشرير:

الآن سيحصل على index.html ، وربط أي حزمة قمت بإنشائها بها ، ثم أرسل ملفًا يحمل الاسم نفسه داخل مجلد البناء الخاص بنا.

15. منذ أن تم إدخال الحزمة التي تم إنشاؤها تلقائيًا ، يمكنك إسقاط هذا الخط من index.html:

تعرف على المزيد حول هذا البرنامج المساعد هنا.

ملاحظة: على طول الطريق إلى هنا ، كنت أحاول كسر عملية الإنشاء من خلال تقديم ميزات JS الحديثة مثل وظائف الأسهم والواردات ES6 إلى الكود. لكنها لن تفشل. اتضح أن webpack لا يتطلب ملف تهيئة افتراضيًا في الإصدار 4. لكننا سنستمر في إضافة محوِّل خاص لأغراض التعلم فقط. انت تعيش وتتعلم!

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

16. لنقم بتثبيت بابل محمل والحزم ذات الصلة لتحويل وظائف السهم الخاص بك ، والواردات ، غير المتزامن / في انتظار ، والتدمير ، وما إلى ذلك في gobbledygook عصور ما قبل التاريخ التي تفهم المتصفحات القديمة.

npm i -D babel-loader @ babel / core @ babel / cli @ babel / runtime @ babel / plugin-propos-class-properties @ babel / preset-env @ babel / plugin-convert-runtime

17. الرجوع إلى webpack.config.js نذهب:

18. قم بإنشاء ملف .babelrc وأخبر babel-loader ماذا تفعل بكل هذه المكتبات:

المس

إذا حاولت تشغيل عملية تجميع الآن ، فسترى تحذيرًا كهذا:

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

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

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

19. Webpack يأتي مع خادم تطوير مخصص. تثبيته عن طريق تشغيل:

npm i -D webpack-dev-server

20. أضف خاصية devServer إلى كائن التكوين الخاص بك لتحديد سلوك الخادم:

21. أضف برنامج نصي إلى package.json لتشغيل خادم التطوير:

الآن مع مجرد بسيطة:

npm البداية

ستحصل على خادم تطوير مع إعادة الشحن المباشر على http: // localhost: 8080 /.

أنيق هاه؟

22. كيف تدع حزمة الويب تدرك قيمة env؟ بسيط. فقط قم بتغيير module.exports من كائن إلى دالة تأخذ env كوسيطة وتقوم بإرجاع كائن تكوين. دعونا نتعرف على قيمة خاصية devtool بناءً على ذلك:

لقد حان الوقت لالتقاط أنفاس صغيرة لجرد.

تبدو شجرة مشروعك الآن كما يلي:

مشروعك
| -node_modules
| -src
  | -index.js
| -.babelrc
| -.npmrc
| -index.html
| -package.json
| -webpack.config.js

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

ومع ذلك ، إذا لم تثير ماما أي قلق ، دعنا نعيد ذلك.

23. تثبيت رد فعل و رد فعل دوم:

npm i -S رد فعل رد فعل دوم

24. أضف عقدة متزايدة إلى قالب HTML الخاص بك:

ملاحظة: هذا المعرف يمكن أن يكون ما تريد بالمناسبة. قيمة "التطبيق" تعسفية.

25. قم بتعديل src / index.js للاستفادة من إطار React:

بابل مرتبك تمامًا حولك الآن باستخدام صيغة HTML التي تبحث عنها هي ملف .js.

لقد كبر تطبيقك الآن وحان الوقت لتثقيفه حول JSX. من الأفضل أن تتعلمها منك أكثر من الشوارع.

26. تثبيت المقابلة مسبقا بابل:

npm i -D @ babel / preset-response

27. أضفه إلى .babelrc:

وقمنا بالفعل بإضافة قاعدة للملفات ذات الامتداد .jsx إلى webpack.config.js

28. من الواضح أن العنصر البصري مهم وسنتولى تصميم تطبيقنا. وأيضًا يوجد فنان في كل واحد منا ...

npm i -D node-sass css-loader sass-loader-loader-loader

29. أضف قاعدة لوحدات .scss إلى webpack.config.js:

ملاحظة: تأكد من الحفاظ على ترتيب اللوادر. هو في الواقع مقلوب: يحمّل أول محمل sass ملف Sass / SCSS ويجمعه إلى CSS ، ثم يحل css-loader الاستيراد ، وأخيراً يضيف محمل الأنماط CSS إلى DOM عن طريق حقن علامة