كيفية تثبيت React على نظام Windows؟ الدليل الكامل

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

من المثير للاهتمام أن كل ما نكتبه في ReactJS قد يبدو مثل HTML ، لكنه ليس كذلك. يُعرف باسم JSX ، ملف JavaScript XML. ينتج JSX هذا "عناصر" React ، والتي يتم تقديمها في نموذج كائن المستند. بعبارات الشخص العادي ، تسمح لنا JSX بكتابة منطق JavaScript داخل نص HTML. مما يجعل React أكثر بساطة وسهولة في الفهم.

من أجل الاستفادة منه بشكل مثالي ، دعنا نتعمق لمعرفة كيفية تثبيت React JS في Windows.

كيفية تثبيت React JS على نظام Windows؟

متطلبات النظام لنظام التشغيل Windows

أثناء استخدام ReactJs غير مؤلم تمامًا ، يمكن أن تكون عملية تثبيت React JS في Windows مملة للغاية. نظرًا لأن ReactJS هو مشروع مفتوح المصدر ، فهو ليس بسيطًا مثل تنزيل البرنامج من الإنترنت. أولاً وقبل كل شيء ، هناك بعض المتطلبات الأساسية لاستخدام ReactJS على نظام Windows الخاص بك.

1. إصدار Windows: Windows XP أو Windows 7 (32/64 بت) أو أعلى.
2. مطلوب 4 جيجا بايت كحد أدنى من ذاكرة الوصول العشوائي.
3. ما لا يقل عن 10 غيغابايت من مساحة القرص على محرك الأقراص الثابتة.
4. متصفح إنترنت مثل Chrome و Microsoft Edge و Firefox وما إلى ذلك.
5. محرر واحد لتصحيح واختبار الكود المكتوب في ReactJS.

تعلم دورات تطوير البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.

تنزيل وتثبيت Node.js

Node.js هو الخادم الذي يساعدك على تشغيل كود ReactJS على نظامك. مثل ReactJS إلى حد كبير ، فهو أيضًا مفتوح المصدر. يشتمل مثبت Node.js على NPM (مدير حزمة Node) ، والذي يحتوي على وحدات عقدة مختلفة يستخدمها المطورون لاستضافة ونشر الوحدات النمطية الخاصة بهم في مجتمعات مفتوحة المصدر. وبالتالي تعمل Node جنبًا إلى جنب مع سجل NPM ، مما يسهل تثبيت أي حزمة باستخدام NPM CLI. تقوم Node أيضًا بتغليف تطبيق ReactJS في حزم ويب واحدة باستخدام حزم ويب لسهولة التثبيت.

إليك الإجراء التدريجي لتنزيل Node.js وتثبيته:

1. لتثبيت Node.js ، انتقل إلى https://nodejs.org/en/ .
2. اعتمادًا على إصدار نظام التشغيل Windows الخاص بك ، يجب عليك اختيار مثبت مناسب.
3. توصي الصفحة الرئيسية لـ Node.js بإصدار LTS اعتمادًا على نظام التشغيل الخاص بك. سيؤدي النقر فوقه إلى بدء التنزيل تلقائيًا.
4. ستجد المثبت في مجلد التنزيلات. قم بتشغيل المثبت.
5. سيظهر معالج الإعداد على الشاشة ، والذي سيطلب اتفاقية ترخيص المستخدم النهائي. اقبل الشروط والأحكام لمتابعة التثبيت.
6. ثم يجب على المستخدم تحديد مجلد وجهة بالمسار الافتراضي للمثبت. انقر فوق التالي للمتابعة.
7. ثم يعرض المثبت الميزات التي سيتم تثبيتها كما يقوم بتعيين متغيرات مسار البيئة إلى موجه الأوامر. انقر فوق التالي لبدء التثبيت.
8. بعد اكتمال التثبيت ، تحقق من Node.js في نظامك باستخدام موجه الأوامر.
9. اكتب “node -v” في موجه الأوامر للتحقق من إصدار Node.js المثبت.
10. اكتب "npm -v" في موجه الأوامر للتحقق من تثبيت npm أيضًا.

تثبيت React

بعد تثبيت Node.js ، يمكننا تثبيت React JS على نظام Windows باستخدام طريقتين:

• باستخدام حزمة الويب وبابل

1. إنشاء مجلد جذر

قبل تثبيت ReactJS ، أنشئ مجلدًا جذرًا باسم "ملف رد الفعل" باستخدام الأوامر التالية في موجه الأوامر.

C: \ Users \ username \ Desktop> mkdir رد فعل الملف

C: \ Users \ username \ Desktop> cd رد فعل الملف

بعد إنشاء الدليل ، قم بإنشاء ملف package.json باستخدام الأمر التالي في موجه الأوامر. يساعد ملف package.json في إنشاء وحدات.

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب> ملف رد الفعل> npm init

يطلب موجه الأوامر بعد ذلك معلومات تتعلق بالوحدة النمطية ؛ تخطيه بتحديد الخيار "-y".

2. تثبيت React و reaction-dom

قم بتثبيت حزم React و reaction-dom باستخدام أوامر npm التالية وأضف الحزم إلى ملف package.json باستخدام الأمر "-save".

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب> ملف رد الفعل> npm تثبيت رد فعل حفظ

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب> ملف رد الفعل> npm تثبيت رد فعل دوم – حفظ

استكشف دوراتنا المجانية في تطوير البرمجيات

3. تثبيت Webpack

قم بتثبيت webpack و webpack-dev-server و webpack-cli باستخدام الأوامر التالية.

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب> ملف رد الفعل> npm تثبيت حزمة الويب webpack-dev-server webpack-cli –save

4. تثبيت بابل

Babel هو مترجم يقوم بتحويل كود JavaScript إلى شيء يفهمه المتصفح. وبالتالي ، فإن تثبيت Babel والإضافات التالية ، وهي babel-loader ، و babel-preset-env ، و babel-preset-response ، و html-webpack-plugin ، مهم للغاية.

استخدم الأمر التالي لتثبيت جميع ملحقات babel مرة واحدة.

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب \ رد فعل الملف> npm تثبيت babel-core babel-loader babel-preset-env babel-preset-reaction html-webpack-plugin -save-dev

5. إنشاء ملفات ReactJS

لإنهاء عملية التثبيت ، يجب علينا إنشاء ملفات معينة يدويًا باستخدام موجه الأوامر.

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب \ ملف رد الفعل> اكتب nul> index.html

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب \ ملف رد الفعل> اكتب nul> App.js

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب \ ملف رد الفعل> اكتب nul> main.js

C: \ المستخدمون \ اسم المستخدم \ سطح المكتب \ ملف رد الفعل> اكتب nul> webpack.config.js

C: \ Users \ username \ سطح المكتب \ رد فعل> اكتب nul> .babelrc

6. إعداد المترجم والخوادم واللوادر

بمجرد إنشاء ملفات ReactJS هذه داخل مجلد "ملف رد الفعل" ، يمكنك تجهيز خادم النشر لإعداده في المنفذ 8001 أو أي منفذ تريده في webpack.-config.js.

استخدم الكود التالي في ملف webpack-config.js ،

مسار ثابت = يتطلب ('مسار') ؛

const HtmlWebpackPlugin = تتطلب ('html-webpack-plugin') ؛

module.exports = {

الإدخال: "./main.js" ،

انتاج: {

المسار: path.join (__ dirname، '/ bundle') ،

اسم الملف: "index_bundle.js"

} ،

devServer: {

مضمنة: صحيح ،

المنفذ: 8001

} ،

وحدة: {

قواعد: [

{

الاختبار: /\.jsx؟$/،

استبعاد: / node_modules / ،

محمل: 'babel-loader' ،

استفسار: {

الإعدادات المسبقة: ['es2015'، 'رد فعل']

}

}

]

} ،

المكونات الإضافية: [

HtmlWebpackPlugin الجديد ({

النموذج: "./index.html"

})

]

}

7. إعداد index.html

داخل index.html ، اكتب كود HTML عادي مع div id = ”app” كعنصر جذر ثم أضف النص index_bundle.js في نص HTML.

مهارات تطوير البرمجيات عند الطلب

8. إعداد App.js و main.js

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

قم بإنشاء ملف ".babelrc" وأدخل سطور التعليمات البرمجية التالية ،

{

"الإعدادات المسبقة": ["env" ، "رد فعل"]

}

9. عرض المحتوى على صفحة الويب

اكتمل الإعداد أخيرًا ، وسيتم تشغيل الخادم بمجرد كتابة الأمر التالي في موجه الأوامر.

C: \ Users \ username \ سطح المكتب \ ملف رد الفعل> npm بدء

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

• باستخدام أمر create-reaction-app

1. قم بتثبيت تطبيق create-react-app

افتح موجه الأوامر واكتب الكود التالي لتثبيت تطبيق create-react-app.

C: \ Users \ username \ Desktop> npx إنشاء تطبيق ماي تطبيقي

يقوم هذا الأمر بتثبيت جميع الملفات والمجلدات المطلوبة داخل مجلد "my-app" على سطح المكتب. ينتهي سطر التعليمات البرمجية هذا من تثبيت React في نظامك في غضون بضع دقائق.

2. قم بتشغيل الخادم

انتقل إلى موجه الأوامر واكتب

C: \ Users \ username \ Desktop> cd my-app

C: \ المستخدمون \ Tutorialspoint \ سطح المكتب> تطبيقي> بدء npm

مشروع React الخاص بك يعمل على متصفحك بمساعدة localhost ، الذي يستضيف مشروعك على المنفذ المتاح.

استكشف دوراتنا التدريبية الشهيرة في هندسة البرمجيات

خاتمة

لقد غيرت ReactJS لعبة تطوير الواجهة الأمامية منذ إصدارها ونمت لتصبح واحدة من أكثر مكتبات JavaScript مفتوحة المصدر شيوعًا. تستخدم العديد من الشركات ، مثل Meta و Netflix و Slack ، ReactJS. واحدة من أكبر المزايا هي إعادة استخدام المكونات لتقديم التغييرات في صفحة الويب. يتم نشر العديد من تطبيقات React في تطبيق Azure Web باستخدام Azure DevOps. هذه واحدة من أكثر المهارات المطلوبة في صناعة تكنولوجيا المعلومات الآن.

إذا كنت مطور React ، فيمكنك تحسين مجموعة المهارات الخاصة بك من خلال معرفة Azure DevOps من خلال برنامج الشهادات المتقدمة من upGrad في DevOps من IIIT Bangalore . تقدم الدورة أكثر من 250 ساعة من وحدات التعلم جنبًا إلى جنب مع دليل التحضير للمقابلة. ستحضر أيضًا جلسات الإرشاد المهني مع خبراء DevOps الذين يمكنهم منحك خريطة طريق واضحة لما تتوقعه الصناعة. تتلقى شهادة وحالة خريجي IIITB في نهاية الدورة ، مما يجعلها إضافة استثنائية لسيرتك الذاتية!