دليل المبتدئين الشامل إلى React.js: رحلتك الأولى في بناء واجهات المستخدم

مقدمة إلى عالم React.js: بوابتك لتطوير الواجهات الأمامية

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

بحلول نهاية هذا الدليل، ستكون قد اكتسبت فهمًا أساسيًا لما يلي:

• ما هي React ولماذا تحظى بشعبية هائلة.
• كيفية إعداد بيئة عمل React وتثبيتها.
• المكونات (React Components) وكيفية استخدامها.
• الحالة (React State) ودورها في إدارة البيانات.
• الخصائص (React Props) وكيفية تمرير البيانات بين المكونات.
• التعامل مع أحداث المستخدم (User Events) في React.
• أحداث دورة حياة المكون (Lifecycle Events).

ستشكل هذه المواضيع القاعدة الصلبة التي ستبني عليها معرفتك في دروس React الأكثر تقدمًا. هذا الكتاب موجه خصيصًا لمبرمجي JavaScript الجدد على React. فلنبدأ رحلتنا!

ما هي React ولماذا هي الخيار الأمثل؟

React هي مكتبة JavaScript تهدف إلى تبسيط عملية تطوير الواجهات المرئية. تم تطويرها بواسطة Facebook وإطلاقها للعالم في عام 2013، وهي الآن تدعم بعضًا من أكثر التطبيقات استخدامًا على نطاق واسع، مثل Facebook و Instagram، إلى جانب عدد لا يحصى من التطبيقات الأخرى.

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

تُبسّط React العديد من الأمور، كما أن نظامها البيئي غني بالمكتبات والأدوات الرائعة. تتميز React بامتلاكها واجهة برمجة تطبيقات (API) صغيرة جدًا، وتحتاج بشكل أساسي إلى فهم أربعة مفاهيم رئيسية للبدء:

• المكونات (Components)
• JSX
• الحالة (State)
• الخصائص (Props)

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

كم تحتاج من معرفة JavaScript لاستخدام React؟

قبل الغوص مباشرة في عالم React، يجب أن يكون لديك فهم جيد لبعض مفاهيم JavaScript الأساسية. لا يلزم أن تكون خبيرًا في JavaScript، ولكن من الضروري أن يكون لديك نظرة عامة جيدة على ما يلي:

• المتغيرات (Variables)
• دوال الأسهم (Arrow functions)
• العمل مع الكائنات والمصفوفات باستخدام Rest و Spread
• تفكيك الكائنات والمصفوفات (Object and array destructuring)
• قوالب الحرفية (Template literals)
• دوال رد الاتصال (Callbacks)
• وحدات ES Modules

إذا كانت هذه المفاهيم تبدو غير مألوفة، فمن المستحسن مراجعتها قبل الشروع في تعلم React.

لماذا يجب عليك تعلم React؟

نوصي بشدة بأن يمتلك أي مطور ويب فهمًا أساسيًا على الأقل لمكتبة React، وذلك لعدة أسباب وجيهة:

1. الشعبية الهائلة: تُعد React شائعة للغاية في صناعة تطوير الويب. كمطور، من المحتمل جدًا أن تعمل على مشروع يعتمد على React في المستقبل، سواء كان مشروعًا قائمًا أو تطبيقًا جديدًا كليًا.
2. أساس للأدوات الحديثة: تعتمد الكثير من الأدوات والأطر الحديثة على React في جوهرها. أطر عمل شائعة مثل Next.js و Gatsby، والعديد غيرها، تستخدم React تحت الغطاء.
3. مطلب في سوق العمل: كمطور واجهات أمامية (frontend engineer)، من المرجح أن تظهر React في مقابلات العمل، مما يجعل فهمها ضروريًا لفرص التوظيف.
4. جودة الممارسات: بالإضافة إلى الأسباب المذكورة أعلاه، تُعد React بحد ذاتها أداة رائعة. إنها تشجع على العديد من ممارسات التطوير الجيدة، بما في ذلك قابلية إعادة استخدام الكود (code reusability) والتطوير المعتمد على المكونات (component-driven development).
5. الأداء وتدفق البيانات: React سريعة وخفيفة الوزن، والطريقة التي تجعلك تفكر بها في تدفق البيانات داخل تطبيقك تتناسب تمامًا مع العديد من السيناريوهات الشائعة والمعقدة.

كيفية تثبيت React وبدء مشروعك الأول

هناك عدة طرق لتثبيت React. للبدء، نوصي بشدة باتباع النهج الموصى به رسميًا باستخدام الأداة المسماة create-react-app.

أداة create-react-app: بداية سريعة

create-react-app هو تطبيق سطر أوامر يهدف إلى تسريع عملية البدء مع React في وقت قصير جدًا. تبدأ باستخدامه عبر npx، وهي طريقة سهلة لتنزيل وتنفيذ أوامر Node.js دون الحاجة إلى تثبيتها مسبقًا.

يأتي npx مدمجًا مع npm (منذ الإصدار 5.2). إذا لم يكن لديك npm مثبتًا بالفعل، فقم بتثبيته الآن من https://nodejs.org (يتم تثبيت npm مع Node). إذا كنت غير متأكد من إصدار npm لديك، قم بتشغيل الأمر npm -v للتحقق مما إذا كنت بحاجة إلى التحديث.

عند تشغيل الأمر npx create-react-app <app-name>، سيقوم npx بتنزيل أحدث إصدار من create-react-app، وتشغيله، ثم إزالته من نظامك. هذا رائع لأنه يضمن لك دائمًا استخدام أحدث وأفضل إصدار متاح من الأداة.

لنبدأ بإنشاء تطبيق قائمة مهام (todolist):

npx create-react-app todolist

هذه هي النتيجة بعد انتهاء عملية التشغيل:

قام create-react-app بإنشاء هيكل ملفات في المجلد الذي حددته (todolist في هذه الحالة)، وقام بتهيئة مستودع Git. كما أضاف بعض الأوامر في ملف package.json:

يمكنك الآن بدء تشغيل التطبيق على الفور بالانتقال إلى مجلد التطبيق الذي تم إنشاؤه حديثًا وتشغيل الأمر npm start.

بشكل افتراضي، يقوم هذا الأمر بتشغيل التطبيق على المنفذ المحلي 3000، ويفتح متصفحك لعرض شاشة الترحيب:

أنت الآن جاهز للبدء في تطوير تطبيقك!

المكونات (React Components): اللبنات الأساسية لتطبيقك

في القسم السابق، رأيت كيف تنشئ أول تطبيق React لك. يأتي هذا التطبيق مع مجموعة من الملفات التي تؤدي وظائف مختلفة، معظمها يتعلق بالتكوين، ولكن هناك ملف واحد يبرز بشكل خاص: App.js.

App.js هو أول مكون React ستصادفه. الكود الخاص به يبدو كالتالي:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App ( ) {
  return (
    <div className = "App" >
      <header className = "App-header" >
        <img src = {logo} className = "App-logo" alt = "logo" />
        <p >
          Edit <code > src/App.js </ code > and save to reload.
        </p >
        <a className = "App-link" href = "https://reactjs.org" target = "_blank" rel = "noopener noreferrer" >
          Learn React
        </a >
      </header >
    </div >
  )
}

export default App

يتكون التطبيق المبني باستخدام React، أو أحد أطر العمل الأمامية الشائعة الأخرى مثل Vue و Svelte، من عشرات المكونات. لكن دعنا نبدأ بتحليل هذا المكون الأول. سنقوم بتبسيط كود هذا المكون بالشكل التالي:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App ( ) {
  return /* something */
}

export default App

يمكنك ملاحظة عدة أمور هنا. نقوم باستيراد بعض الأشياء، ونقوم بتصدير دالة تسمى App. الأشياء التي نستوردها في هذه الحالة هي مكتبة JavaScript (حزمة npm المسماة react)، وصورة SVG، وملف CSS. تم إعداد create-react-app بطريقة تسمح لنا باستيراد الصور وملفات CSS لاستخدامها في JavaScript، ولكن هذا ليس شيئًا تحتاج إلى القلق بشأنه الآن.

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

بالإضافة إلى تعريف بعض JSX للعودة، يمتلك المكون عدة خصائص أخرى. يمكن للمكون أن يمتلك حالته الخاصة (state)، مما يعني أنه يغلف بعض المتغيرات التي لا يمكن للمكونات الأخرى الوصول إليها ما لم يكشف هذا المكون هذه الحالة لبقية التطبيق.

يمكن للمكون أيضًا تلقي البيانات من مكونات أخرى. في هذه الحالة، نتحدث عن الخصائص (props). لا تقلق، سنتناول جميع هذه المصطلحات (JSX، State، و Props) بالتفصيل قريبًا.

مقدمة إلى JSX: لغة React السحرية

لا يمكننا التحدث عن React دون شرح JSX أولاً. في القسم الأخير، تعرفت على أول مكون React لك، وهو مكون App المحدد في التطبيق الافتراضي الذي أنشأته أداة create-react-app. كان الكود الخاص به كالتالي:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App ( ) {
  return (
    <div className = "App" >
      <header className = "App-header" >
        <img src = {logo} className = "App-logo" alt = "logo" />
        <p >
          Edit <code > src/App.js </ code > and save to reload.
        </p >
        <a className = "App-link" href = "https://reactjs.org" target = "_blank" rel = "noopener noreferrer" >
          Learn React
        </a >
      </header >
    </div >
  )
}

export default App

لقد تجاهلنا سابقًا كل ما كان داخل عبارة return، ولكن في هذا القسم سنتحدث عنها. نسمي JSX كل ما هو ملفوف داخل الأقواس التي يعيدها المكون:

<div className= "App" >
  <header className = "App-header" >
    <img src = {logo} className = "App-logo" alt = "logo" />
    <p > Edit <code > src/App.js </ code > and save to reload. </p >
    <a className = "App-link" href = "https://reactjs.org" target = "_blank" rel = "noopener noreferrer" > Learn React </a >
  </header >
</div>

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

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

استخدام JSX لتكوين واجهة المستخدم

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

يتم إنشاء مكون React عادةً في ملف خاص به، لأن هذه هي الطريقة التي يمكننا بها إعادة استخدامه بسهولة (عن طريق استيراده) في مكونات أخرى. ولكن يمكن أيضًا إنشاء مكون React في نفس ملف مكون آخر، إذا كنت تخطط لاستخدامه فقط في هذا المكون. لا توجد "قاعدة" هنا، يمكنك فعل ما تشعر أنه الأفضل لك. عادةً ما أستخدم ملفات منفصلة عندما يزداد عدد الأسطر في الملف بشكل كبير.

لتبسيط الأمور، دعنا ننشئ مكونًا في نفس ملف App.js. سنقوم بإنشاء مكون WelcomeMessage:

function WelcomeMessage ( ) {
  return <p > Welcome! </p >
}

هل ترى؟ إنها دالة بسيطة تعيد سطرًا من JSX يمثل عنصر HTML من نوع p. سنقوم بإضافتها إلى ملف App.js. الآن داخل JSX الخاص بمكون App، يمكننا إضافة <WelcomeMessage /> لعرض هذا المكون في واجهة المستخدم:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function WelcomeMessage ( ) {
  return <p > Welcome! </p >
}

function App ( ) {
  return (
    <div className = "App" >
      <header className = "App-header" >
        <img src = {logo} className = "App-logo" alt = "logo" />
        <p >
          Edit <code > src/App.js </ code > and save to reload.
        </p >
        <WelcomeMessage />
        <a className = "App-link" href = "https://reactjs.org" target = "_blank" rel = "noopener noreferrer" >
          Learn React
        </a >
      </header >
    </div >
  )
}

export default App

وهنا النتيجة. هل يمكنك رؤية رسالة "Welcome!" على الشاشة؟

نقول إن WelcomeMessage هو مكون فرعي (child component) لـ App، و App هو مكونه الأب (parent component). نحن نضيف المكون <WelcomeMessage /> كما لو كان جزءًا من لغة HTML. هذا هو جمال مكونات React و JSX: يمكننا تكوين واجهة تطبيق واستخدامها كما لو كنا نكتب HTML، مع بعض الاختلافات، كما سنرى في القسم التالي.

الاختلافات الجوهرية بين JSX و HTML

يبدو JSX شبيهًا بـ HTML، لكنه ليس كذلك تمامًا. في هذا القسم، سنقدم لك بعض أهم الأمور التي تحتاج إلى تذكرها عند استخدام JSX.

className مقابل class

أحد الاختلافات قد يكون واضحًا إذا نظرت إلى JSX الخاص بمكون App: هناك سمة غريبة تسمى className. في HTML، نستخدم السمة class. إنها على الأرجح السمة الأكثر استخدامًا، لأسباب مختلفة، أحدها هو CSS. تسمح لنا سمة class بتنسيق عناصر HTML بسهولة، وتضع أطر عمل CSS مثل Tailwind هذه السمة في صميم عملية تصميم واجهة المستخدم CSS.

ولكن هناك مشكلة. نحن نكتب كود واجهة المستخدم هذا في ملف JavaScript، وكلمة class في لغة برمجة JavaScript هي كلمة محجوزة (reserved word). هذا يعني أننا لا نستطيع استخدام هذه الكلمة المحجوزة كما نريد. إنها تخدم غرضًا محددًا (تعريف فئات JavaScript)، وكان على مطوري React اختيار اسم مختلف لها. هكذا انتهى بنا المطاف بـ className بدلاً من class.

يجب أن تتذكر هذا بشكل خاص عندما تقوم بنسخ/لصق بعض HTML الموجود. ستبذل React قصارى جهدها لضمان عدم تعطل الأمور، لكنها ستثير الكثير من التحذيرات في أدوات المطور (Developer Tools):

هذه ليست الميزة الوحيدة في HTML التي تعاني من هذه المشكلة، لكنها الأكثر شيوعًا.

صرامة JSX

فرق كبير آخر بين JSX و HTML هو أن HTML متسامح جدًا، يمكننا القول. حتى لو كان لديك خطأ في بناء الجملة، أو أغلقت علامة خاطئة، أو كان لديك عدم تطابق، سيحاول المتصفح قصارى جهده لتفسير HTML دون أن يتعطل. إنها إحدى الميزات الأساسية للويب. إنه متسامح جدًا.

JSX ليس متسامحًا. إذا نسيت إغلاق علامة، فستحصل على رسالة خطأ واضحة:

عادةً ما تقدم React رسائل خطأ جيدة جدًا ومفيدة توجهك في الاتجاه الصحيح لإصلاح المشكلة.

تضمين JavaScript داخل JSX: قوة التفاعل

إحدى أفضل ميزات React هي أننا نستطيع بسهولة تضمين JavaScript داخل JSX. بينما تمتلك أطر عمل الواجهة الأمامية الأخرى، مثل Angular و Vue، طرقها الخاصة لطباعة قيم JavaScript في القوالب أو تنفيذ حلقات تكرارية، فإن React لا تضيف أشياء جديدة. بدلاً من ذلك، تسمح لنا باستخدام JavaScript مباشرة في JSX، وذلك باستخدام الأقواس المعقوفة (curly brackets).

المثال الأول الذي سنعرضه لك يأتي مباشرة من مكون App الذي درسناه حتى الآن. نستورد ملف SVG الخاص بالشعار باستخدام:

import logo from './logo.svg'

ثم في JSX، نقوم بتعيين ملف SVG هذا لسمة src الخاصة بعلامة img:

<img src={logo} className= "App-logo" alt= "logo" />

دعنا نأخذ مثالاً آخر. لنفترض أن مكون App يحتوي على متغير يسمى message:

function App ( ) {
  const message = 'Hello!'
  //...
}

يمكننا طباعة هذه القيمة في JSX عن طريق إضافة {message} في أي مكان داخل JSX. داخل الأقواس المعقوفة { }، يمكننا إضافة أي عبارة JavaScript، ولكن عبارة واحدة فقط لكل كتلة أقواس معقوفة. ويجب أن تعيد العبارة شيئًا.

على سبيل المثال، هذه عبارة شائعة ستجدها في JSX. لدينا عامل ثلاثي (ternary operator) حيث نحدد شرطًا (message === 'Hello!')، ونطبع قيمة واحدة إذا كان الشرط صحيحًا، أو قيمة أخرى (محتوى message في هذه الحالة) إذا كان الشرط خاطئًا:

{ message === 'Hello!' ? 'The message was "Hello!"' : message }

إدارة الحالة (State) في React: ديناميكية واجهة المستخدم

يمكن لكل مكون React أن يمتلك حالته الخاصة (state). ماذا نعني بالحالة؟ الحالة هي مجموعة البيانات التي يديرها المكون. فكر في نموذج (form) على سبيل المثال. كل عنصر إدخال فردي في النموذج مسؤول عن إدارة حالته: ما هو مكتوب بداخله. الزر مسؤول عن معرفة ما إذا كان يتم النقر عليه أم لا، وما إذا كان في حالة تركيز. الرابط مسؤول عن معرفة ما إذا كان مؤشر الماوس يحوم فوقه.

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

استخدام useState لإدارة الحالة

ندير الحالة باستخدام الأداة المساعدة useState التي توفرها React. إنها تقنيًا "خطاف" (hook) (لا تحتاج إلى معرفة تفاصيل الخطافات الآن، ولكن هذا ما هي عليه). يمكنك استيراد useState من React بهذه الطريقة:

import React, { useState } from 'react'

عند استدعاء useState()، ستحصل على متغير حالة جديد، ودالة يمكننا استدعاؤها لتغيير قيمته. تقبل useState() القيمة الأولية لعنصر الحالة وتعيد مصفوفة تحتوي على متغير الحالة، والدالة التي تستدعيها لتغيير الحالة. مثال:

const [count, setCount] = useState( 0 )

هذا مهم. لا يمكننا ببساطة تغيير قيمة متغير الحالة مباشرة. يجب علينا استدعاء دالة التعديل الخاصة به (modifier function). وإلا فلن يقوم مكون React بتحديث واجهة المستخدم الخاصة به لتعكس تغييرات البيانات. استدعاء دالة التعديل هو الطريقة التي يمكننا بها إخبار React أن حالة المكون قد تغيرت.

بناء الجملة غريب بعض الشيء، أليس كذلك؟ بما أن useState() تعيد مصفوفة، فإننا نستخدم تفكيك المصفوفة (array destructuring) للوصول إلى كل عنصر فردي، مثل هذا: const [count, setCount] = useState(0).

إليك مثال عملي:

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState( 0 )

  return (
    <div >
      <p > You clicked {count} times </p >
      <button onClick = {() => setCount(count + 1)}>Click me </button >
    </div >
  )
}

ReactDOM.render(
  <Counter /> ,
  document .getElementById( 'app' )
)

يمكنك إضافة العديد من استدعاءات useState() كما تريد، لإنشاء العديد من متغيرات الحالة كما تريد:

const [count, setCount] = useState( 0 )
const [anotherCounter, setAnotherCounter] = useState( 0 )

خصائص المكونات (Component Props) في React: تمرير البيانات

نطلق على props (اختصار لـ properties) القيم الأولية التي يتم تمريرها إلى المكون. لقد أنشأنا سابقًا مكون WelcomeMessage:

function WelcomeMessage ( ) {
  return <p > Welcome! </p >
}

واستخدمناه هكذا:

<WelcomeMessage />

هذا المكون لا يحتوي على أي قيمة أولية. لا يحتوي على props. يمكن تمرير props كسمات إلى المكون في JSX:

<WelcomeMessage myprop={ 'somevalue' } />

وداخل المكون، نستقبل props كمعاملات:

function WelcomeMessage ( props ) {
  return <p > Welcome! </p >
}

من الشائع استخدام تفكيك الكائنات (object destructuring) للحصول على props بالاسم:

function WelcomeMessage ( { myprop } ) {
  return <p > Welcome! </p >
}

الآن بعد أن أصبح لدينا الخاصية (prop)، يمكننا استخدامها داخل المكون. على سبيل المثال، يمكننا طباعة قيمتها في JSX:

function WelcomeMessage ( { myprop } ) {
  return <p > {myprop} </p >
}

الأقواس المعقوفة هنا لها معانٍ مختلفة. في حالة معامل الدالة، تُستخدم الأقواس المعقوفة كجزء من بناء جملة تفكيك الكائنات. ثم نستخدمها لتعريف كتلة كود الدالة، وأخيرًا في JSX لطباعة قيمة JavaScript.

يُعد تمرير props إلى المكونات طريقة رائعة لتمرير القيم في تطبيقك. المكون إما يحتفظ بالبيانات (لديه حالة state) أو يتلقى البيانات عبر خصائصه (props). يمكننا أيضًا إرسال الدوال كـ props، بحيث يمكن للمكون الفرعي استدعاء دالة في المكون الأب.

هناك خاصية مميزة تسمى children. تحتوي هذه الخاصية على قيمة أي شيء يتم تمريره بين علامتي الفتح والإغلاق للمكون، على سبيل المثال:

<WelcomeMessage > Here is some message </ WelcomeMessage >

في هذه الحالة، داخل WelcomeMessage، يمكننا الوصول إلى القيمة Here is some message باستخدام الخاصية children:

function WelcomeMessage ( { children } ) {
  return <p > {children} </p >
}

تدفق البيانات في تطبيق React: من الأب إلى الابن

في تطبيق React، تتدفق البيانات عادةً من المكون الأب (parent component) إلى المكون الفرعي (child component)، باستخدام props كما رأينا في القسم السابق:

<WelcomeMessage myprop={ 'somevalue' } />

إذا قمت بتمرير دالة إلى المكون الفرعي، يمكنك مع ذلك تغيير حالة المكون الأب من مكون فرعي:

const [count, setCount] = useState( 0 )
<Counter setCount={setCount} />

داخل مكون Counter، يمكننا الآن الحصول على الخاصية setCount واستدعائها لتحديث حالة count في المكون الأب، عندما يحدث شيء ما:

function Counter ( { setCount } ) {
  //...
  setCount( 1 )
  //...
}

يجب أن تعلم أن هناك طرقًا أكثر تقدمًا لإدارة البيانات، والتي تشمل واجهة برمجة تطبيقات السياق (Context API) ومكتبات مثل Redux. لكن هذه الطرق تقدم تعقيدًا أكبر، وفي 90% من الحالات، فإن استخدام الطريقتين اللتين شرحتهما للتو هما الحل الأمثل.

التعامل مع أحداث المستخدم (User Events) في React

توفر React طريقة سهلة لإدارة الأحداث التي تنطلق من أحداث DOM مثل النقرات وأحداث النماذج والمزيد. دعنا نتحدث عن أحداث النقر (click events)، وهي بسيطة جدًا للفهم.

يمكنك استخدام السمة onClick على أي عنصر JSX:

<button onClick={ ( event ) => { /* handle the event */ }} > Click here </button>

عند النقر على العنصر، يتم تشغيل الدالة التي تم تمريرها إلى السمة onClick. يمكنك تعريف هذه الدالة خارج JSX:

const handleClickEvent = ( event ) => {
  /* handle the event */
}

function App ( ) {
  return <button onClick = {handleClickEvent} > Click here </button >
}

عندما يتم تشغيل حدث click على الزر، تستدعي React دالة معالج الحدث. تدعم React كمية هائلة من أنواع الأحداث، مثل onKeyUp و onFocus و onChange و onMouseDown و onSubmit وغيرها الكثير.

أحداث دورة حياة المكون (Lifecycle Events) في React

حتى الآن، رأينا كيفية إدارة الحالة باستخدام خطاف useState. هناك خطاف آخر أريد أن أقدمه في هذا الكتاب: useEffect.

خطاف useEffect: التفاعل مع دورة حياة المكون

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

تقوم React أولاً بتحديث DOM، ثم تستدعي أي دالة تم تمريرها إلى useEffect(). كل ذلك دون حظر عرض واجهة المستخدم، حتى على الكود الذي قد يكون معيقًا. إليك مثال:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState( 0 )

  useEffect( () => {
    console .log( `You clicked ${count} times` )
  })

  return (
    <div >
      <p > You clicked {count} times </p >
      <button onClick = {() => setCount(count + 1)}>Click me </button >
    </div >
  )
}

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

useEffect( () => {
  console .log( `Hi ${name} you clicked ${count} times` )
}, [name, count])

وبالمثل، يمكنك إخبار React بتنفيذ التأثير الجانبي مرة واحدة فقط (وقت التحميل)، عن طريق تمرير مصفوفة فارغة:

useEffect( () => {
  console .log( `Component mounted` )
}, [])

قد تجد نفسك تستخدم هذا الخيار كثيرًا. useEffect() رائع لإضافة السجلات، والوصول إلى واجهات برمجة تطبيقات الطرف الثالث (3rd party APIs)، وغير ذلك الكثير.

إلى أين تتجه من هنا؟ خطواتك التالية في تعلم React

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

• تعلم المزيد من النظرية حول Virtual DOM، وكتابة الكود الإعلاني (declarative code)، وتدفق البيانات أحادي الاتجاه (unidirectional data flow)، وعدم القابلية للتغيير (immutability)، والتركيب (composition).
• ابدأ ببناء بعض تطبيقات React البسيطة. على سبيل المثال، قم ببناء عداد بسيط أو تفاعل مع واجهة برمجة تطبيقات عامة (public API).
• تعلم كيفية إجراء العرض الشرطي (conditional rendering)، وكيفية إجراء الحلقات التكرارية في JSX، وكيفية استخدام أدوات مطور React (React Developer Tools).
• تعلم كيفية تطبيق CSS في تطبيق React، باستخدام CSS العادي أو Styled Components.
• تعلم كيفية إدارة الحالة باستخدام Context API، و useContext، و Redux.
• تعلم كيفية التفاعل مع النماذج (forms).
• تعلم كيفية استخدام React Router.
• تعلم كيفية اختبار تطبيقات React.
• تعلم إطار عمل تطبيقات مبنيًا على React، مثل Gatsby أو Next.js.

الأهم من ذلك كله، تأكد من الممارسة عن طريق بناء تطبيقات نموذجية لتطبيق كل ما تعلمته.

الخلاصة التقنية

يمثل هذا الدليل نقطة انطلاق ممتازة لأي مطور JavaScript يتطلع لدخول عالم React.js. لقد استعرضنا المفاهيم الأساسية التي تشكل العمود الفقري لأي تطبيق React، بدءًا من فهم المكونات كعناصر بناء أساسية، مرورًا بـ JSX كلغة لإنشاء واجهات المستخدم بشكل إعلاني، وصولاً إلى إدارة الحالة (State) والخصائص (Props) التي تمنح تطبيقاتنا ديناميكية وتفاعلية.

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