React.js 14 أدوات وموارد لمطوري الويب

ال شعبية React.js كان ينمو بسرعة منذ أن أصدر Facebook المكتبة لأول مرة في عام 2013. إنها الخامس الأكثر تميزا نجمة مشروع مفتوح المصدر على Github ، والإعلانات الوظيفية لمطوري React في ارتفاع كبير أيضًا. الرد هو إطار جافا سكريبت خفيف الوزن إلى عن على بناء واجهات المستخدم - وأبرز الأمثلة هي Facebook و Instagram.

رد فعل يقدم بديل لأطر MVC, مثل الزاوي أو العمود الفقري ، مع هيكل أكثر وضوحا و التركيز على تحسين الأداء. نظرًا لأن React ستحدد بالتأكيد مشهد تطوير الويب في السنوات القادمة ، في هذه المقالة نود أن نقدم لك مجموعة أدوات المطور لمساعدتك في وضع قدمك في عالم تطوير React.

مستندات React.js الرسمية من Facebook

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

React.js جيثب ريبو

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

مرحبا العالم كاتب رمز

إذا كنت ترغب في إعطاء محاولة سريعة للرد ، يمكنك البدء بهذا “مرحبا بالعالم” عرض تفاعلي على Codepen. ويشمل جميع الأصول اللازمة و ال رمز بداية كذلك. كما بابل هو أيضا ، يمكنك استخدامها كلا ECMAScript 6 و بناء جملة JSX. كل ما عليك هو شوكة هذا القلم ، ويمكنك المضي قدمًا دون الحاجة إلى إعداد البيئة بأكملها بنفسك.

رد فعل كاتب كيت

ال رد فعل كاتب كيت هو متشابكة على شبكة الإنترنت التطبيق المرجل بنيت من Node.js ، Express ، GraphQL ، React, وحفنة أدوات تطوير الشبكة ، مثل Webpack ، بابل, و Browsersync. يوفر لك يستخدم كومة الواجهة الأمامية نفس Facebook ويتيح لك القفز إلى كامل كومة رد فعل التنمية دون الكثير من المتاعب.

ReactCSS

ReactCSS يجعل من الممكن ل أضف أنماط CSS مضمنة في JavaScript. ReactCSS يأتي مع دعم React ، Redux ، React Native (إطار عمل لإنشاء تطبيقات المحمول الأصلية باستخدام React) ، الإصلاح التلقائي ، التحويم ، العناصر الزائفة ، واستعلامات الوسائط. يمكنك بسرعة تثبيته مع npm.

تفاعل تكامل JSFiddle (مع وبدون JSX)

هذا عظيم ملعب على الانترنت إذا كنت تريد مكانًا حيث يمكنك البدء في ممارسة React. انها استضافت على JSFiddle, ولديه نسختين: واحد مع JSX و واحد دون JSX, اختر أيهما أكثر راحة لك.

رد فعل مولد دليل النمط

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

حسناء مكونات رد الفعل شكلي

حسناء هو تتفاعل مكتبة المكونات أن يجهز لك مجموعة من مكونات التفاعل قد ترغب في استخدامها في مشروعك ، مثل “زر”, “بطاقة”, “الغزال”, “تبديل”, “تقييم”, مكونات شكل مختلف ، وغيرها. المكونات العمل سواء على الهاتف المحمول أو سطح المكتب, و هم تخصيص كذلك.

الحسناء هو ليس فقط مكتبة مكون React هناك ، يمكنك أن تجد غيرها كبيرة على جيثب ، مثل تتفاعل الحاجيات أو عنصري.

رد فعل قصة بيئة تطوير واجهة المستخدم

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

الرد-التمهيد

الرد-التمهيد يدمج تتفاعل مع الشعبية Bootstrap 3 إطار الواجهة الأمامية. أعاد مطوروها بناء مكونات Bootstrap بشكل أساسي باستخدام React.js. هذه النتائج في قاعدة رمز نظافة مع أقل التكرار ، و أداء أعلى.

لاحظ أنه بما أن الريبو قيد التطوير النشط ، فستتغير واجهات برمجة التطبيقات في المستقبل. ل الوضع الحالي للتنمية, تفحص ال خارطة الطريق للمشروع.

تتفاعل أدوات المطور لكروم

الرد DevTools لكروم امتداد لأدوات مطوري Chrome ويسمح لك بذلك فحص التسلسل الهرمي للمكون. كان تم إنشاؤها بواسطة Facebook مع السعي لمساعدة مجتمع المطورين في بناء تطبيقات React جديدة. يمكنك ببساطة إضافته كملحق كروم لمتصفحك يمكنك تصفح ينتمون شفرة المصدر على جيثب كذلك.

تتفاعل أدوات المطور لفايرفوكس

هذا ال نسخة فايرفوكس من نفسه React Developer Tools التي أنشأتها Facebook. فقط أضفه كإضافة إلى متصفح Firefox الخاص بك, وابدأ فحص شجرة التسلسل الهرمي لتطبيق React في آن واحد.

حزمة React.js لـ Atom

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

React.js أساسيات - بالطبع مجانية على الانترنت

هناك العديد من الدورات التدريبية الممتازة وغير المكلفة إلى حد ما حيث يمكنك ذلك تعلم تطوير رد الفعل, ومع ذلك يمكنك تسجيل هذا React.js أساسيات بالطبع على الانترنت مجانا تماما. انها تتكون من 12 درس, يبدأ مع أساسيات رد الفعل, ولديه منهج لطيف الذي يغطي جميع الأشياء المهمة.