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

تعرف على كيفية دمج React مع تقنيات مختلفة وستحصل على فوائد من مصادر متعددة.

1. رد فعل + إعادة

Redux هي مكتبة إدارة حالة تُستخدم جنبًا إلى جنب مع React. يسهل Redux إدارة حالة التطبيق المركزية. عند إنشاء تطبيقات معقدة مع العديد من الحالات ، يعمل React و Redux معًا بشكل جيد.

فيما يلي توضيح لكيفية استخدام Redux مع React:

يستورد تتفاعل من'تتفاعل';
يستورد {createStore} من"إعادة";
يستورد { مزود } من"رد فعل - إعادة";
مقدار ثابت initialState = { عدد: 0 };
وظيفةمخفض(state = initialState ، action) {
يُحوّل (نوع الإجراء) {
قضية'زيادة راتب':
يعود { عدد: state.count + 1 };
قضية"قرار":
يعود { عدد: state.count - 1 };
تقصير:
يعود ولاية؛
 }
}
مقدار ثابتيستورد تتفاعل من'تتفاعل';
يستورد {useQuery، gql} من"@ أبولو / العميل";
مقدار ثابت GET_USERS = gql





instagram viewer

`
 الاستعلام عن GetUsers {
 المستخدمون {
 بطاقة تعريف
 اسم
 }
 }
;
وظيفةالمستخدمون() {
مقدار ثابت {تحميل ، خطأ ، بيانات} = useQuery (GET_USERS) ،
لو (تحميل) يعود<ص>تحميل...ص>;
لو (خطأ) يعود<ص>خطأ :(ص>;
يعود (
store = createStore (مخفض) ؛
وظيفةعداد() {
مقدار ثابت العد = useSelector (ولاية => state.count) ؛
مقدار ثابت إرسال = useDispatch () ،
يعود (


العدد: {عدد} </p>
 إرسال({ يكتب: 'زيادة راتب' })}>+</button>
 إرسال({ يكتب: "قرار" })}>-</button>
 </div>
 );
}
وظيفةبرنامج() {
يعود (


 </Provider>
 );
}
يصدّرتقصير برنامج؛

ينشئ هذا المثال متجر Redux بحالة أولية تبلغ 0. ثم تتولى وظيفة المخفض زيادة راتب و قرار عمليات. يستخدم الرمز useSelector و useDispatch الخطافات للحصول على العد المستمر وإرسال الأنشطة بشكل فردي.

أخيرًا ، لجعل المتجر متاحًا للتطبيق بأكمله ، قم بلف مكون العداد في مكون الموفر.

2. عرض جانب الخادم باستخدام Next.js

Next.js هو إطار عمل تطوير يعمل على تحسين سرعة موقع الويب و SEO التكتيكات عن طريق إرسال HTML إلى العملاء واستخدام عرض من جانب الخادم لمكونات React.

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

// الصفحات / index.js
يستورد تتفاعل من'تتفاعل';
وظيفةبيت() {
يعود (


مرحبًا بالعالم!/h1>


هذا هو مكون React الذي يقدمه الخادم/p>
 </div>
 );
}
يصدّرتقصير بيت؛

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

3. جلب البيانات باستخدام GraphQL

GraphQL هي لغة استعلام لواجهات برمجة التطبيقات تقدم بديلاً كفؤًا وقويًا وقابلًا للتكيف لـ REST. باستخدام GraphQL ، يمكنك الحصول على البيانات بشكل أسرع وتحديث واجهة المستخدم بسرعة أكبر.

هذا توضيح لطريقة استخدام GraphQL مع React:

يستورد تتفاعل من'تتفاعل';
يستورد {useQuery، gql} من"@ أبولو / العميل";
مقدار ثابت GET_USERS = gql`
 الاستعلام عن GetUsers {
 المستخدمون {
 بطاقة تعريف
 اسم
 }
 }
;
وظيفةالمستخدمون() {
مقدار ثابت {تحميل ، خطأ ، بيانات} = useQuery (GET_USERS) ،
لو (تحميل) يعود<ص>تحميل...ص>;
لو (خطأ) يعود<ص>خطأ :(ص>;
يعود (


 خريطة {data.users.map (مستخدم => (
{user.name} </li>
 ))}
 </ul>
 );
}
وظيفةبرنامج() {
يعود (


المستخدمون </h1>

 </div>
 );
}
يصدّرتقصير برنامج؛

هذا النموذج يستدعي useQuery وظيفة من @ أبولو / العميل مكتبة لجلب المتهدمة من العملاء من واجهة برمجة GraphQL. ثم يتم عرض قائمة المستخدمين في واجهة المستخدم.

4. التصميم باستخدام CSS-in-JS

CSS-in-JS هي طريقة تعتمد على JavaScript لتصميم مكونات React. فهو يجعل إدارة أوراق الأنماط المعقدة أسهل ويتيح لك كتابة الأنماط بأسلوب معياري وقائم على المكونات.

فيما يلي توضيح لكيفية استخدام CSS-in-JS مع React:

يستورد تتفاعل من'تتفاعل';
يستورد على غرار من"مكونات على غرار";
مقدار ثابت زر = زر على غرار`
 لون الخلفية: #007فرنك بلجيكي؛
 اللون: #fff ؛
 حشوة: 10مقصف 20مقصف ؛
 نصف قطر الحد: 5مقصف ؛
 حجم الخط: 16مقصف ؛
 المؤشر: المؤشر.
 &:يحوم {
 لون الخلفية: #0069د 9 ؛
 }
;
وظيفةبرنامج() {
يعود (


انقر فوق لي!/Button>
 </div>
 );
}
يصدّرتقصير برنامج؛

هذا المثال ينشئ ملف زر على غرار المكون باستخدام على غرار وظيفة. وهي تحدد نغمة تجربة الزر ونغمة النص والتوسيد واكتساح الخط وبُعد النص والمؤشر.

يتم أيضًا تحديد حالة التمرير التي تغير لون الخلفية عندما يحوم المستخدم فوق الزر. يتم عرض الزر أخيرًا باستخدام مكون React.

5. التكامل مع D3 لتصور البيانات

D3 هي مكتبة JavaScript لمعالجة البيانات والتصور. يمكنك عمل تصورات قوية وتفاعلية للبيانات باستخدام React. فيما يلي توضيح لكيفية استخدام D3 مع React:

يستورد رد فعل ، {useRef، useEffect} من'تتفاعل';
يستورد * مثل د 3 من"d3";
وظيفةشريط الرسم البياني({ بيانات }) {
مقدار ثابت المرجع = useRef () ؛
 useEffect (() => {
مقدار ثابت svg = d3.select (المرجع الحالي) ؛
مقدار ثابت العرض = svg.attr ('عرض');
مقدار ثابت الارتفاع = svg.attr ('ارتفاع');
مقدار ثابت س = d3.scaleBand ()
 .domain (data.map ((د) => د. التسمية))
 .يتراوح([0، عرض])
 .حشوة(0.5);
مقدار ثابت ص = d3.scaleLinear ()
 .اِختِصاص([0، d3.max (data، (d) => d.value)])
 .range ([height، 0]);
 svg.selectAll ("مستقيم")
 .data (بيانات)
 .يدخل()
 .ألحق("مستقيم")
 .attr ("x"، (د) => س (تسمية د))
 .attr ("y"، (د) => ص (قيمة د))
 .attr ('عرض'، x.bandwidth ())
 .attr ('ارتفاع'، (د) => الارتفاع - ص (قيمة د))
 .attr ('يملأ', "# 007bff");
 }، [بيانات])؛
يعود (
400}>
 {/ * تنتقل المحاور هنا * /}
 </svg>
 );
}
يصدّرتقصير شريط الرسم البياني؛

يحدد هذا الرمز أ شريط الرسم البياني المكون الذي يقبل أ بيانات دعم في مقتطف الشفرة السابق. يستدعي ال استخدم ربط للإشارة إلى مكون SVG الذي سيستخدمه لرسم المخطط التفصيلي.

بعد ذلك ، يعرض أشرطة الرسم البياني ويحدد المقاييس بامتداد خطاف useEffect ()، الذي يرسم قيم البيانات إلى إحداثيات الشاشة.

6. إضافة وظائف في الوقت الحقيقي مع WebSockets

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

تستخدم WebSockets بالطريقة التالية مع React:

يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد io من"socket.io-client";
وظيفةغرفة الدردشة() {
مقدار ثابت [messages، setMessages] = useState ([]) ،
مقدار ثابت [inputValue، setInputValue] = useState ('');
مقدار ثابت مقبس = io (' http://localhost: 3001');
 useEffect (() => {
 socket.on ('رسالة'، (رسالة) => {
 setMessages ([... الرسائل ، الرسالة]) ؛
 });
 } ، [رسائل ، مقبس]) ؛
مقدار ثابت مقبض (ه) => {
 e.preventDefault () ؛
 socket.emit ('رسالة'، قيمة المدخلات)؛
 setInputValue ('');
 };
يعود (




 خريطة {messages.map ((رسالة ، أنا) => (
{رسالة} </li>
 ))}
 </ul>


 اكتب ="نص"
 القيمة = {inputValue}
 onChange = {(e) => setInputValue (e.target.value)}
 />
"يُقدِّم"> إرسال </button>
 </form>
 </div>
 );
}
يصدّرتقصير غرفة الدردشة؛

في هذا المثال ، تقوم بتعريف ملف غرفة الدردشة المكون الذي يستخدم socket.io- العميل مكتبة للاتصال بخادم WebSocket. يمكنك استخدام ال useState ربط للتعامل مع المتهدمة من الرسائل واحترام المعلومات.

عند تلقي رسالة جديدة ، فإن useEffect الخطاف يسجل المستمع لتشغيل تحديث حدث الرسالة في قائمة الرسائل. لمسح وإرسال قيمة إدخال لرسالة الحدث ، يوجد ملف مقبض وظيفة.

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

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

7. التكامل مع React Native لتطوير الأجهزة المحمولة

React Local هو نظام لبناء تطبيقات عالمية محلية باستخدام React ، والتي تتصل لتعزيز التطبيقات المحمولة لمراحل iOS و Android.

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

إدخال البرمجة والمكتبات الحيوية ، مثل Node.js, استجابة CLI المحلية، و Xcode أو بيئة تطوير أندرويد، أمر أساسي للمصممين الذين يتعاملون مع iOS و Android بشكل منفصل. أخيرًا ، تتيح مكونات React Native البسيطة للمطورين إنشاء تطبيقات محمولة قوية وغنية بالميزات لمنصات iOS و Android.

ادمج React مع تقنيات أخرى

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

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