رد فعل هو مكتبة جافا سكريبت لتطوير واجهات المستخدم. يسمح لك بإنشاء تطبيقات ويب جميلة وفعالة وقابلة للتطوير. ولكن قبل البدء في إنشاء مشروعك على رد الفعل ، تحتاج إلى إعداد البيئة بشكل صحيح.
تحتاج أولا إلى تثبيت العقدة.شبيبة والآلية الوقائية الوطنية. عقدة.جس هو النظام الأساسي الذي رد فعل يعمل ، والآلية الوقائية الوطنية هو مدير حزمة لتثبيت وحدات طرف ثالث اللازمة للتنمية.
بعد تثبيت العقدة.شبيبة والآلية الوقائية الوطنية تحتاج إلى إنشاء مشروع جديد. ويمكن القيام بذلك باستخدام الأمر إنشاء رد فعل التطبيق ، والتي سيتم تثبيت جميع التبعيات اللازمة وتكوين الهيكل الأساسي للمشروع.
بعد التثبيت الناجح وإنشاء المشروع ، يمكنك البدء في تطوير أول تطبيق رد فعل. افتح مجلد المشروع في محرر التعليمات البرمجية وابدأ في إجراء تغييرات على ملفات المكونات وإضافة مكونات جديدة وتكوين التوجيه. سيتم تحديث جميع التعليمات البرمجية المكتوبة في رد الفعل تلقائيا في المتصفح دون الحاجة إلى إعادة تحميل الصفحة.
رد فعل شبيبة هو أداة قوية لخلق واجهات المستخدم. يعد التكوين المناسب للبيئة وهيكل المشروع خطوات مهمة قبل البدء في التطوير. باستخدام تطبيق إنشاء رد فعل ، يمكنك إنشاء مشروع جديد بسرعة والبدء في تطويره.
- رد فعل شبيبة: التحضير لإطلاق المشروع
- رد فعل شبيبة: تثبيت العقدة.شبيبة وإنشاء دليل المشروع
- رد فعل شبيبة: تثبيت إنشاء رد فعل التطبيق وإنشاء مشروع جديد
- رد فعل شبيبة: هيكل الملفات والمجلدات الرئيسية للمشروع
- رد فعل شبيبة: إضافة مكونات والتفاعل بينهما
- رد فعل شبيبة: إطلاق واختبار المشروع
- رد فعل شبيبة: نشر مشروع على خادم الويب
- سؤال وجواب
رد فعل شبيبة: التحضير لإطلاق المشروع
قبل البدء في تطوير مشروع في رد فعل جس ، تحتاج إلى اتخاذ عدة خطوات تحضيرية:
- تثبيت العقدة.شبيبة
- إنشاء مشروع جديد
- تكوين بيئة التطوير
1. تثبيت العقدة.شبيبة
للعمل مع رد فعل جس ، تحتاج إلى تثبيت العقدة.شبيبة ، كما هو منصة القائم على جافا سكريبت التي تسمح لك لتنفيذ التعليمات البرمجية على الخادم. لتثبيت العقدة.شبيبة اللازمة:
- انتقل إلى موقع العقدة الرسمي.شبيبة (https://nodejs.org/)
- قم بتنزيل وتثبيت الإصدار الحالي من العقدة.شبيبة لنظام التشغيل الخاص بك
2. إنشاء مشروع جديد
بعد تثبيت العقدة.جس يمكنك البدء في إنشاء مشروع جديد في رد فعل جس. للقيام بذلك ، افتح المحطة وقم بتشغيل الأمر التالي:
نكس إنشاء رد فعل التطبيق بلدي التطبيق
حيث بلدي التطبيق هو اسم المشروع الخاص بك. بعد تنفيذ الأمر ، سيتم إنشاء دليل جديد باسم مشروعك والملفات التي تم تكوينها لبدء التطوير.
3. تهيئة بيئة تطوير
بعد إنشاء المشروع ، تحتاج إلى تكوين البيئة لتطوير رد فعل شبيبة. للقيام بذلك ، يمكنك استخدام محرر التعليمات البرمجية مثل فيسوال ستوديو كود وتثبيت الإضافات والإضافات اللازمة ، على سبيل المثال:
- إسلينت-للتحكم في جودة التعليمات البرمجية الخاصة بك
- أجمل-لتنسيق التعليمات البرمجية
- رد فعل أدوات المطور-لتصحيح مكونات رد الفعل
- وغيرها من الملحقات حسب تقديرك
أيضا ، للعمل مع بوابة ، يمكنك تهيئة مستودع داخل دليل المشروع الخاص بك والبدء في إصدار التعليمات البرمجية الخاصة بك. للقيام بذلك ، قم بتشغيل الأوامر التالية:
مؤتمر نزع السلاح بلدي التطبيق
بوابة الحرف الأول
بعد الانتهاء من جميع الخطوات التحضيرية ، كنت على استعداد للبدء في تطوير المشروع الخاص بك في رد فعل شبيبة.
رد فعل شبيبة: تثبيت العقدة.شبيبة وإنشاء دليل المشروع
للعمل مع رد فعل جس ، تحتاج إلى تثبيت العقدة.شبيبة وإنشاء دليل للمشروع.
- تثبيت العقدة.شبيبة:
- قم بتنزيل مثبت العقدة.شبيبة من الموقع الرسمي (https://nodejs.org ).
- قم بتشغيل المثبت واتبع التعليمات التي تظهر على الشاشة.
- إنشاء دليل المشروع:
- افتح موجه الأوامر أو المحطة الطرفية.
- انتقل إلى المجلد حيث تريد إنشاء دليل.
- حيث "اسم الدليل" هو اسم المشروع الخاص بك.
الخطوة الأولى هي تثبيت العقدة.شبيبة إلى جهاز الكمبيوتر الخاص بك. عقدة.شبيبة يسمح لك لتشغيل شفرة جافا سكريبت على الخادم ويوفر أدوات لإدارة تبعيات المشروع.
لتثبيت العقدة.شبيبة ضروري:
بعد تثبيت العقدة.شبيبة يحتاج إلى إنشاء دليل للمشروع الخاص بك. سيتم تخزين جميع التعليمات البرمجية وملفات المشروع في هذا الدليل.
لإنشاء دليل مشروع ، يجب عليك:
مبارك! لقد قمت بتثبيت العقدة بنجاح.شبيبة وخلق دليل للمشروع الخاص بك.
رد فعل شبيبة: تثبيت إنشاء رد فعل التطبيق وإنشاء مشروع جديد
لتطوير تطبيقات التفاعل من البداية ، غالبا ما يتم استخدام أداة إنشاء تطبيق التفاعل. انها تسمح لك بسرعة وسهولة إنشاء مشروع جديد مع الإعدادات الافتراضية.
لتثبيت تطبيق إنشاء رد فعل ، اتبع الخطوات التالية:
- افتح موجه الأوامر (المحطة الطرفية) على جهاز الكمبيوتر الخاص بك.
- في سطر الأوامر. إذا كانت العقدة.لم يتم تثبيت شبيبة ، تحميل وتثبيته من الموقع الرسمي.
- . سيؤدي هذا إلى تثبيت تطبيق إنشاء رد فعل عالميا على جهاز الكمبيوتر الخاص بك.
بعد تثبيت تطبيق إنشاء رد فعل ، يمكنك إنشاء مشروع جديد باتباع الخطوات التالية:
- حدد مجلدا للمشروع وافتح موجه الأوامر (المحطة الطرفية) داخل هذا المجلد.
- ، حيث بلدي التطبيق هو اسم المشروع الخاص بك. استبدال بلدي التطبيق مع الاسم المطلوب.
- انتظر حتى تكتمل عملية إنشاء مشروع جديد.
بعد الانتهاء من الأمر ، إنشاء رد فعل والتطبيق إنشاء وتكوين مشروع رد فعل جديد في مجلد مع الاسم المحدد (بلدي التطبيق أو الاسم الذي اخترته).
ستكون معظم الإعدادات وهياكل المجلدات جاهزة بالفعل ، ويمكنك البدء في تطوير تطبيق التفاعل الخاص بك عن طريق إجراء تغييرات على الملفات داخل مجلد المشروع.
(استبدال بلدي التطبيق مع اسم المشروع الخاص بك).
مبارك! أنت الآن جاهز لبدء العمل على مشروع رد الفعل الجديد باستخدام تطبيق إنشاء رد فعل.
رد فعل شبيبة: هيكل الملفات والمجلدات الرئيسية للمشروع
عند إنشاء مشروع في رد فعل جس ، يمكنك مواجهة بسرعة مسألة كيفية تنظيم هيكل الملفات والمجلدات بشكل صحيح. يمكن للهيكل المصمم جيدا أن يسهل إلى حد كبير تطوير ودعم المشروع. وهنا هي الملفات والمجلدات الرئيسية التي يمكنك أن تجد في مشروع رد فعل شبيبة نموذجي:
- سرك هو المجلد الرئيسي مع شفرة المصدر من التطبيق الخاص بك
- . العامة هو مجلد مع الموارد العامة مثل ملفات هتمل والصور والملفات الثابتة الأخرى.
- وحدات العقدة هي المجلد الذي تم تثبيت تبعيات المشروع فيه باستخدام الآلية الوقائية الوطنية أو الغزل
- يتم تخزين الحزمة.ملف تكوين مشروع جسون يحتوي على معلومات حول التبعيات والبرامج النصية والإعدادات الأخرى
- README.md -ملف توثيق يحتوي على معلومات حول المشروع وإرشادات التثبيت وبدء التشغيل
- .جيتينور هو ملف يخبر نظام التحكم في إصدار جيت الملفات والمجلدات التي يجب تجاهلها
- بواسطة حزمة-قفل.جسون (أو الغزل.قفل) هو ملف تم إنشاؤه تلقائيا بواسطة الآلية الوقائية الوطنية أو مدير حزم الغزل ، والذي يحتوي على الإصدارات الدقيقة من الحزم المثبتة وتبعياتها
- بابل.التكوين.شبيبة/.ملفات بابلرك التي تحتوي على تكوين بابل ، وهي أداة تستخدم لتحويل جافا سكريبت الحديثة إلى بناء الجملة القديم (على سبيل المثال ، إكماسكريبت 6 إلى إكماسكريبت 5) بحيث يمكن تنفيذها في متصفحات مختلفة
- .إسلينترك (أو .(إسلينترك).شبيبة/.(إسلينترك).جسون) هو ملف مع إعدادات لينتر إسلينت ، أداة تستخدم للتحقق من نمط التعليمات البرمجية وتحديد الإمكانات
- حزمة الويب.أخطاء التكوين.ملف جس مع إعدادات منشئ وحدة ويبباك ، الذي يجمع ويحسن شفرة المصدر من التطبيق الخاص بك ، وخلق جاهزة للنشر
- المزاح.ملفات التكوين.ملف جس مع إعدادات الإطار للاختبار على جافا سكريبت جيست
هذه هي الملفات والمجلدات الرئيسية التي يتم تضمينها عادة في هيكل المشروع في رد فعل شبيبة. قد تختلف حسب احتياجاتك وتفضيلاتك. عند إنشاء مشروع جديد ، فمن المستحسن استخدام أدوات مثل إنشاء رد فعل التطبيق ، والتي سوف إعداد هيكل المشروع القياسية تلقائيا وجعل عملك أسهل.
رد فعل شبيبة: إضافة مكونات والتفاعل بينهما
في رد فعل جس ، يمكنك إنشاء العديد من المكونات التي تتفاعل مع بعضها البعض لتشكيل التسلسل الهرمي. المكون هو وحدة مستقلة من التعليمات البرمجية التي يمكن إعادة استخدامها وإدارة حالتها.
لإضافة مكون إلى مشروع رد الفعل الخاص بك ، يجب اتباع الخطوات التالية:
- إنشاء ملف جديد.شبيبة للمكون الخاص بك. على سبيل المثال ، ميكومبوننت.شبيبة .
- مرحبا ، أنا مكون!
أتفاعل مع المكونات الأخرى.
);
}
}
تصدير الافتراضي ميكومبوننت;
استيراد المكون الخاص بك في الملف حيث تريد استخدامه وإضافته داخل مكون آخر أو إلى ملف التطبيق الرئيسي.
عند إضافة المكونات وتعريفها ، يمكن أن تتفاعل مع بعضها البعض.
يمكنك استخدام الدعائم والدولة للتفاعل مع المكونات في رد فعل شبيبة.
الدعائم هي وسيطات يتم تمريرها إلى مكون عند استخدامه. يمكن استخدامها لنقل البيانات من مكون رئيسي إلى مكون تابع. الدعائم غير قابلة للتغيير ولا يمكن تغييرها داخل المكون.
الدولة هي الحالة الداخلية للمكون. عندما تتغير الحالة ، يتم إعادة رسم المكون ليعكس الحالة الجديدة. يمكن تغيير الحالة داخل المكون باستخدام طريقة سيتستات ().
لتمرير التمريرات إلى المكون الفرعي ، استخدم السمات في علامة جسك عند استخدامه. على سبيل المثال:
استيراد رد فعل من 'رد فعل';
استيراد مكون الطفل من './ مكون الطفل';
الطبقة الوالدالمكون يمتد رد فعل.العنصر {
تقديم () {
عودة (
Родительский компонент
);
}
}
تصدير الوالد الافتراضيمكون;
This هذا.الدعائم. Например:
استيراد رد فعل من 'رد فعل';
فئة الطفلمكون يمتد رد فعل.العنصر {
تقديم () {
عودة (
{this.props.name}
);
}
}
تصدير الافتراضي تشايلدكومبوننت;
Set ، set سيتستات ().. Например:
استيراد رد فعل من 'رد فعل';
فئة ميكومبوننت يمتد رد فعل.العنصر {
منشئ (الدعائم) {
سوبر (الدعائم);
- هذا.الدولة = {
- عداد: 0
- };
- }
- هاندلكليك () {
- هذا.سيتستات ({
- عداد: هذا.الدولة.عداد + 1
- });
- }
- تقديم () {
عودة (
- Компонент с состоянием
- {: {هذا.الدولة.عداد}
- هذا.انقر ()} > + 1
);
}
}
- تصدير الافتراضي ميكومبوننت;
- في هذا المثال ، عند النقر فوق الزر ، تتغير حالة المكون ، ويتم إعادة رسم المكون بقيمة عداد جديدة.
- الآن أنت تعرف كيفية إضافة مكونات والتفاعل معها في رد فعل شبيبة.
- رد فعل شبيبة: إطلاق واختبار المشروع
رد فعل جس هي واحدة من المكتبات الأكثر شعبية لتطوير واجهات المستخدم. بعد إنشاء مشروع في رد فعل جس ، تحتاج إلى تشغيله واختباره للتأكد من أنه يعمل بشكل صحيح.
خطوات لإطلاق واختبار مشروع في رد فعل شبيبة: