في هذه المقالة ، نود أن نقدم لك الخطافات المرغوبة في عالم React المعروف باسم useEffect & useState الخطاف الذي يستخدم على نطاق واسع في برمجة React ، ولجعلك تبدأ نحو مسار إضافة أنواع إضافية لمعايير ترميز TypeScript الخاصة بك. لذا ، لنبدأ.
في عالم React Developers ، تعد واجهات برمجة تطبيقات الويب (APIs) أجزاء داخلية من التعليمات البرمجية في تصميم تطبيق أحادي الصفحة (SPA). واجهات برمجة التطبيقات (API) هي المرحلة الأولى للتطبيقات للتفاعل برمجيًا مع الخوادم لتزويد المبرمجين ببيانات في الوقت الفعلي وحفظ تغييرات المبرمج. في تطبيق React ، يمكنك استخدام واجهات برمجة التطبيقات لتحميل تفضيلات المبرمج وعرض تفاصيل تكوين جلب معلومات المستخدم أو معلومات الأمان وحفظ تحديثات أو تغييرات حالة التطبيق.
وسوف نستخدم استخدام التأثير و استخدام ربط لجلب وعرض المعلومات في تطبيق الويب الوهمي الخاص بنا باستخدام واجهة برمجة تطبيقات JSON Placeholder لغرض التعلم لدينا. سنحتاج إلى تحميل المعلومات عند تثبيت المكون أولاً وحفظ مدخلات العميل بواجهة برمجة التطبيقات. يمكننا أن نؤكد لك أنه بعد نهاية هذه المدونة ستتمكن من إنشاء تطبيق React الخاص بك لمجموعة متنوعة من واجهات برمجة التطبيقات.
أشياء يجب معرفتها أولاً ، قبل الانتقال إلى التنفيذ العملي:
ما هو useEffect؟
• استخدام التأثير الخطاف هو رابط في React يسمح لك بتنفيذ الآثار الجانبية في مكونات React الخاصة بك.
أمثلة على الآثار الجانبية مثل:
1. جلب البيانات من مكان ما.
2. تحديث شيء ما مباشرة إلى DOM.
3. ضبط أو إزالة الموقتات مثل setTimeout or تعيين الفاصل.
استخدام التأثير الخطافات تقبل الحجتين. الحجة الأولى هي أ وظيفة هذا إلزامي ، والحجة الثانية هي الاعتماد، أو يسميها البعض أ مجموعة التبعية من خلال هذا الهيكل [] على الرغم من أنه اختياري ولكنه مفيد جدًا وسهل الاستخدام.
إذا لم يتم تمرير أي مصفوفة تبعية ، فحينئذٍ:
useEffect(() => {
//It will Run or Execute on every render or every time.
});
إذا تم تمرير مصفوفة فارغة:
useEffect(() => {
//It will Run or Execute only on the first render or for just one time.
}, []);
على سبيل المثال:
import React, { useState, useEffect } from 'react';
export const App = () => {
const [result, setResult] = useState<number | undefined>();
useEffect(() => {
add();
});
function add() {
const a: number = 5;
const b: number = 10;
setResult(a + b);
}
return (
<div className="p-3">
<h3>Added Sum is: {result}</h3>
</div>
);
};
رابط CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-xtuqtv?file=App.tsx
الإخراج:
أيضا ، اقرأ: تطبيق Laravel Web في تطبيق الجوال - أفضل سيناريوهات التحول
ما هو useState؟
• استخدام يسمح لنا Hook in React بتتبع الحالة في مكون دالة.
تشير الحالة أساسًا إلى البيانات المهمة أو جزء معين من المعلومات في التطبيق.
مثال: إذا كان مفتاح مروحة في وضع الإيقاف ، فإن حالتها في وضع إيقاف التشغيل ولن يتم تدويرها بعد الآن.
بنفس الطريقة ، إذا قمت بتشغيله ، فستتغير حالته السابقة من OFF الآن إلى ON وستستمر المروحة في الدوران ، أليس كذلك؟
مرة أخرى، استخدام يأخذ الخطاف حجتين:
اولا متغيرحيث سيتم تخزين البيانات.
ثانيًا ، أ المسمى الوظيفي لتحديد قيمة هذا المتغير بعينه.
على سبيل المثال:
import React, { useState } from 'react';
export const App = () => {
const [name, setName] = useState<string>('Akshay Bisht');
return (
<div className="p-4">
<h3>My Name is {name} 😎</h3>
</div>
);
};
رابط CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-yekrro?file=App.tsx
الإخراج:
ما هي RESTful API؟
RESTful API ، من المؤكد أنك سمعت هذا المصطلح في كثير من الأحيان عندما قابلت شخصًا تم تعيينه كمطور Backend. كنت ستسأل نفسك (ما هو الشيء API هذا؟ لماذا نحتاج إلى استخدامه؟ كيف سيساعدني ذلك؟)
حسنًا ، دعنا نوضح لك الآن بإيجاز ونوضح شكوكك:
تُعرف API باسم واجهة برمجة التطبيقات. في الوقت الحاضر ، يعد التفاعل مع بيانات المستخدم أسلوبًا شائعًا ومفيدًا للغاية. في وقت سابق ، اعتدنا على تحديث قاعدة البيانات الخاصة بنا عن طريق كتابة أوامر SQL مملة ، والتي ليس من السهل على كل شخص في العالم تذكرها.
لذلك ، كبديل ، تم تقديم قواعد بيانات NoSQL مثل MongoDB و Cassandra و Redis و CouchDB و Riak وغيرها الكثير. لذا ، إذا كان هناك NoSQL ، فلماذا تحتاجه؟ كيف ستتفاعل معها؟ حسنًا ، إذا كانت قاعدة البيانات هي NoSQL ، فهناك بالتأكيد طريقة بديلة للوصول إلى هذا النوع من قواعد البيانات وبهذه الطريقة هي RESTful API.
نعم ، لقد سمعتها بشكل صحيح. هذا كيف مريح تم تقديم API للمبرمجين وكان منهجًا أكثر سهولة وقوة وملاءمة للتعليمات البرمجية.
لذلك ، منذ ذلك الحين ، أصبح الآن اتجاهًا لاستخدام API ، حيث تستخدمها معظم الشركات في الوقت الحاضر. ويعرف الشخص الذي يتفاعل مع API باسم مطور Backend.
في API ، الجزء الممتع هو أنه يمنحك ملف HTTP رمز الحالة الذي يمكنك من خلاله تحديد مكان جلب البيانات أم لا ، ونوع الخطأ الذي تحصل عليه.
طرق HTTP التي يتم اتخاذها بواسطة أي واجهة برمجة تطبيقات:
للحصول على - إنها طريقة تستخدم للحصول على البيانات من قاعدة البيانات.
سأعين - إنها طريقة تستخدم لإنشاء أو إدخال البيانات في قاعدة البيانات.
ضع - إنها طريقة يمكننا من خلالها تحديث أو تصحيح حقل معين من البيانات ثم إرسال تلك البيانات المحدثة إلى قاعدة البيانات.
حذف - إنها طريقة يمكننا من خلالها حذف سجل أو بيانات مستخدم من قاعدة البيانات.
فيما يلي رموز حالة HTTP:
- 200 - حسنًا
- 201 - تم إنشاؤه
- 302 - وجدت
- 400 طلب سىء
- 401 - غير مصرح به
- 403 - ممنوع
- 404 غير موجود
- 500 - خطأ خادم داخلي
- 502 مدخل غير صالح
أيضا ، اقرأ: Microservices vs API - تعرف على ما هو مناسب لعملك
أبحث عن خدمات تطوير تطبيقات الويب
أرسل لنا متطلباتك ، وسنعاود الاتصال بك مع عرض أسعار
ما هو DOM؟
يُعرف DOM باسم نموذج كائن المستند ؛ يتم إنشاؤه أساسًا بواسطة المتصفح عندما نقوم بتحميل أي صفحة ويب. إنه يتبع الهيكل الشجري لمستند HTML ، بحيث يمكنه تجميعه ، ويمكن أن يكون من السهل على مطوري الواجهة الأمامية فحص المكون المحدد والعثور عليه بسهولة بالغة. تتبع React DOM الظاهري ، وهي تمثيل خفيف جدًا لـ DOM الفعلي. لذلك ، سنركز بشكل أقل على هذه الموضوعات.
هكذا يبدو DOM:
إذن هنا يأتي الجزء العملي:
سنبدأ تشغيل الكود الخاص بك أولاً. بعد ذلك سنشرح لك كل نقطة حتى تتمكن من فهم ما كتبناه في الكود بوضوح.
لذا ، دعنا ننتقل إلى الكود. ثم جزء الشرح.
الخطوات 1:
أنشئ تطبيق React TypeScript على نظامك عن طريق الأمر التالي:
npx- إنشاء-رد فعل-التطبيق - نص قالب مطبوع
الخطوات 2:
اذهب إلى حسابك على دليل تطبيق React Typescript وقم بتثبيت ملف ألبس الحذاء الحزمة باتباع الأمر:
npm تثبيت bootstrap
الخطوات 3:
في الخاص App.tsx ملف ، امسح كل الكود والصق الكود أدناه:
import React, { useEffect, useState } from 'react';
interface user {
map(arg0: (item: any) => JSX.Element): import('react').ReactNode;
name: string;
email: string;
phone: number;
}
export const App = (): React.FC<user[]> => {
const [user, setUser] = useState<user | undefined>();
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((json) => setUser(json));
}, []);
return (
<div className="p-2">
<table className="table table-bordered">
<thead>
<tr>
<th scope="col">S.no</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tbody>
{user?.map((item) => (
<tr>
<th scope="row">{item.id}</th>
<td>{item?.name}</td>
<td>{item?.email}</td>
<td>{item?.phone}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
الخطوات 4:
الآن لتبدأ ورؤية مخرجاتك النهائية على الشاشة ، فقط اكتب الأمر التالي:
npm البداية
الخطوات 5:
الآن فقط انتظر الإخراج وبعد مرور بعض الوقت ، سترى الإخراج مثل هذا:
رابط CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-emeoep?file=App.tsx
التفسير:
اذا ماذا يحدث هنا؟ لقد أظهرنا للتو جدول Bootstrap الخاص بنا مع 10 بيانات وهمية للمستخدمين بامتداد JSON واجهة برمجة تطبيقات المستخدم.
في البداية ، أنشأنا للتو واجهة حتى نتمكن من إخبارنا بأن ما سنحصل عليه هو هذه البيانات في استجابة مثل اسم السلسلة والبريد الإلكتروني لسلسلة ورقم هاتف لرقم.
بعد ذلك ، أعلنا عن متغير وقمنا بتعيين وظيفة a استخدام ربط لتخزين الاستجابة القادمة من API ولاستخدامها لاحقًا. وفي استخدام hook ، أخبرنا النص المطبوع عليه الذي يتبع واجهتنا المسماة "user" وبعد ذلك قمت بتعيين بيانات الاستجابة على تعيين وظيفة حتى نتمكن من استخدامه أدناه في جدول التمهيد الخاص بنا.
بعد ذلك ، في جدول Bootstrap أدناه ، نقوم فقط بالتكرار فوق كائن والوصول إليه باستخدام المتغير الذي حددناه أعلاه في استخدام التأثير طريقة الخطاف. ونحن فقط نصل إلى قيم الكائن. وأخيرًا ، عندما نحفظ الشفرة ، يتم تقديمها.
أيضا ، اقرأ: Laravel 8 - برنامج تعليمي لاستيراد Excel و CSV إلى قاعدة البيانات
وفي الختام
في النهاية ، نود فقط أن نختتم الأمور بالقول إن استدعاءات واجهة برمجة التطبيقات سهلة حتى وما لم تقم باللعب مع استخدام التأثير و استخدام ربط في رد الفعل المطبوع ومارسه في روتينك اليومي. كلا الخطافين ضروريان جدًا لتخزين مكالمات API أو التفاعل معها. نأمل الآن أن تصبح مفاهيمك أكثر وضوحًا وإيجازًا.
شكرًا جزيلاً على قراءة هذه المدونة بصبر 😊 أتمنى لك يومًا سعيدًا.
خدمات تطوير الويب
هل تبحث عن شركة تطوير ويب موثوقة؟ يمكّننا مطورو الويب ذوو المهارات العالية لدينا من تقديم خدمات تطوير الويب الموجهة نحو النتائج. اتصل بفريقنا لفهم كيف يمكننا مساعدتك في تحقيق أهداف عملك.
