مستخدم:X7md/ملعب

هذه صفحة مستخدم على ويكي الكتب. هذه صفحة خاصة للتعريف بمستخدمي ويكي الكتب ولسيت صفحة من كتاب. إذا وجدت هذه الصفحة على موقع غير http://ar.wikibooks.org فأنت موجود على مرآة للموقع الرئيسي. كن على علم أن الصفحة ربما تكون قديمة وأن المستخدم الذي تنتمي إليه هذه الصفحة ربما لا تكون له علاقة شخصية بأي موقع غير ويكي كتب. الصفحة الأصلية توجد على هذه الوصلة.

ar.wikibooks

مكتبة رياكت

معايير الكتاب

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

كما لن يتطرق هذا الكتاب لشرح تقنية React Native الخاصة بتطوير تطبيقات متعددة المنصات… ولكن ربما قد تستفيد من بعض محتواه في رحلة تعلمك لتقنية React Native.

سيقوم هذا الكتاب بشرح تقنية React JS الخاصة بتطبيقات الويب، وسيركز الشرح على المكونات بالطريقة الوظيفية (functional component).

متطلبات ما قبل القراءة

• معرفة أساسيات بتطوير واجهات الويب الأمامية (FrontEnd)، جافاسكربت و HTML و CSS.
• خلفية ونظرة عامة عن التغيرات في جافاسكربت ES6.
• تثبيت NodeJS إصدار 12 أو أحدث.

ما قبل تعلم رياكت

عليك أن تدرك قبل تعلمك لرياكت أنها أتت بمفاهيم مختلفة بعض الشيء عن تلك التي واجهتها في مشاريع بسيطة باستعمال HTML و JS و CSS فحسب.

لذلك ركز على المفاهيم الأساسية في رياكت وجدد طريقة تفكيرك البرمجي.

تهدف رياكت بشكل أساسي إلى تبسط عملية برمجة واجهات مستخدم تفاعلية وذلك بطريقة صريحة و واضحة أكثر من الطريقة الأمرية المُعتادة، على سبيل المثال لإنشاء عنصر HTML "برمجيًا" في جافاسكربت ستفعل شيء مشابه لهذا تقريبًا:

function myElement(name, content){
const _element = document.createElement(name);
  if (content){
    if (typeof content == "string"){
     _element.append(document.createTextNode(content));
    } else {
     _element.append(content);
    }
  }
  return _element;
}
/* نستخدم الدالة أعلاه لصنع عُنصر اتش تي أم أل برمجيًا */
let element_ = myElement("div", myElement("button", "Test"));
document.body.append(element_);
console.log(element_);

حيث بتقوم بعمل دالة تصنع لك العناصر HTML، وناتج الكود أعلاه سيكون:

<div>
	<button>Test</button>
</div>

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

في هذه الحالة ستحتاج إلى التعامل مع كل هذه المشاكل وإيجاد حلول لها.

لهذا جاءت مكتبات مثل React.JS وغيرها لتحل هذه المشاكل لتسهل عليك هذه العملية.

مصطلحات مستخدمة في رياكت

قاموس لمجموعة مصطلحات إنجليزية تتعلق بمكتبة رياكت مع تعريفها:

مصطلحات إنجليزية متعلقة بمكتبة ريأكت
المصطلح	التّعريف	ملاحظة
DOM	هي اختصار Document Object Model، وتعني نموذج كائن المستند يقصد بها الهيكل الشجري الخاص بالعناصر في صفحة الويب.
UI Component	مُكون واجهة المستخدم، وهو مصطلح يشاع استعماله أثناء مرحلة تصميم واجهة مستخدم رسومية حيث يتم تقسيم الصفحة إلى أقسام وعناصر أساسية ومن ثم تصميمها، بدلًا من التعامل مع الصفحة كقالب واحد كامل بحد ذاته.	مثال: الشريط الجانبي في ويكيبيديا يعد مُكونًا منفصلًا يعاد استخدامه في العديد من الصفحات.
React Component	مُكون رياكت، مصطلح يقصد به عنصر واجهة مستخدم تم بناءُه باستخدام مكتبة رياكت، وهي الطريقة المستخدمة لفصل كل مكون عن المكون الأخر في رياكت، وهذا المفهوم في علوم الحاسب يطلق عليه فصل الإهتمامات.	تُركز رياكت في مفهوم فصل العناصر في الصفحة إلى المُكونات.
JSX	اختصار JavaScript Syntax Extension، وهي طريقة للتعبير عن عناصر HTML داخل جافاسكربت، ويتم ترجمتها في ريأكت إلى الوظيفة createElement().	JSX تم ابتكارها من أجل تسهيل برمجة واجهات المستخدم عبر لغة جافاسكربت.
Single Page	تطبيق الصفحة الواحدة، أحد الطرق برمجة وتصميم صفحات الويب، وغالبًا ما تعتمد تطبيقات الصفحة الواحدة على مفهوم توليد الصفحة من جهة العميل Client Side Rendering.	تستخدم رياكت عادةً في هذا النوع من المواقع.
Rotuing	التوجيّه، هو مفهوم في الويب يقصد به التنقل بين صفحة ويب الموجودة في الموقع نفسه، وبما أن تركيز رياكت هو إنشاء موقع بمفهوم الصفحة الواحدة يجب استخدام حلول من أجل التنقل بين الصفحات، فمكتبة رياكت لا تقدم حلًا مباشرًا، وغالبًا ما تتم هذه العملية بمساعدة مكتبات طرف ثالث مثل ReactRouter أو بإنشاء حلول خاصة.
Client Side	جهة العميل، أي العمليات التي تجري على المتصفح من خلال جافاسكربت.	تعمل رياكت بشكل أساسي في جهة العميل.
Server Side	جهة الخادم، العمليات التي تجري في جهة الخادم (سيرفر الويب).
Client Side Rendering	التصيير من جهة العميل، يقصد أن الصفحة يتم توليدها في جهة العميل. حيث يقوم المتصفح بنزيل صفحة فارغة مع ملف جافاسكربت يحوي على الموقع، ويتم توليد الصفحة بالكامل من خلال جافاسكربت على المتصفح.	بشكل أساسي رياكت تقوم بتوليد الصفحة من جهة المستخدم.
Server Side Rendering	التصيير من جهة الخادم، يقصد به توليد الصفحة من جهة الخادوم (سيرفر الويب). حيث يتم إرسال صفحة HTML كاملة البيانات إلى العميل.	يستخدم هذا المفهوم لتحسين الظهور في محركات البحث، ومن أجل تسريع عرض الصفحة للمستخدم. لتوليد الصفحات في جهة الخادم، يتم استخدام أُطر عمل أو مكتبات مساعدة مثل NextJS، أو إنشاء حلول خاصة.
Two Way Data Binding	ربط البيانات في كلا الإتجاهين، هو مفهوم في تصميم واجهات المستخدم يهدف لربط المكون الذي يظهر في واجهة المستخدم مع البيانات الموجودة في الكود البرمجي، بحيث لو تغيرت القيمة في الكود أو تلك المعروضة في واجهة المستخدم تتغير القيم في كليهما.	غالبًا ما يستخدم هذا النمط البرمجي على صفحات الويب، ولكن جاءت رياكت بمفهوم مُختلف.
Virtual DOM	نموذج كائن المستند الظاهري هو مفهوم برمجي وخوارزمية تستخدمها مكتبة رياكت من أجل تتبع التغيرات التي تطرأ في الحالة (State)، لعمل التغيرات اللازمة على مكونات الصفحة، ومن ثم تطبيق التغيرات على نموذج كائن المستند (DOM) الفعلي في الصفحة.	تعد رياكت أوائل المكتبات التي استخدمت هذا المفهوم، وقد أُستحدث هذا المفهوم لزيادة أداء وفاعلية مكتبة رياكت كونها تعتمد على مفهوم إعادة التصير (Re-Rendering).
Props أو Prop	خصائص/ خاصية، يُستخدم هذا المصطلح إشارةٍ إلى البيانات التي يتم نقلها من مكون إلى آخر وتسمى "بُرُوب/ بُرُوبس" وتعد الطريقة التي تتبعها مكتبة رياكت في التعامل مع البيانات المتبادلة بين مُكون رياكت ومُكون رياكت آخر.
PascalCase	باسكال كيس طريقة مُتبعة في التسمية، حيث يجب أن تبدأ كل كلمة حرف لاتيني كبير وتليها الكلمة الاخرى أيضًا بحرف لاتيني كبير بدون مسافات، وهي الطريقة التي تُتبع عادةً أثناء تسمية مُكونات رياكت.	مثال UserCard، أو Navbar يعد اسمًا صالحًا لمُكون رياكت.

ما هي مكتبة رياكت

مُقدمة

رياكت هي مكتبة جافاسكربت، متخصصة بواجهات المستخدم التفاعلية (Interactive UI) تُستخدم بشكل شائع في الكثير من المواقع وحتى في تطوير تطبيقات الهواتف. تم إتاحة المكتبة كمشروع مفتوح المصدر في عام 2013، وكما تم العمل على تطوير تقنية رياكت نتيف في 2015 وإتاحتها كمشروع مفتوح المصدر كذلك، من خلال مُجتمع مفتوح المصدر تطورت المكتبة وطورت معها طرق التفكير والبرمجة في واجهات المستخدم.

وببساطة رياكت عبارة عن مكتبة تُتيح صنع واجهات مُستخدم على المتصفح.

مفاهيم أساسية

تعتمد رياكت على مفهوم تقسيم عناصر الواجهة إلى "مكونات".