دليل تعلم react ما هي React؟

React.js هي مكتبة JavaScript التي يمكن أن تستخدم لبناء واجهات المستخدم؛ فباستخدام React يمكن للمستخدمين إنشاء مكوِّنات قابلة لإعادة الاستخدام، وهذه المكونات تظهر البيانات أثناء تغيِّرها مع الزمن. يسمح لنا React Native بإنشاء تطبيقات أصيلة للهواتف الذكية باستخدام React. بكلمات أخرى، React هي أداة في JavaScript التي تُسهِّل إنشاء وصيانة واجهات المستخدم ذات الحالة (stateful) وعديمة الحالة (stateless)، وتوفر القدرة على تعريف وتقسيم واجهة المستخدم إلى مكوِّنات منفصلة (تسمى أيضًا بمكونات React) باستخدام عقد شبيهة بلغة HTML تسمى عقد React (أي React nodes). ستتحول عقد React في النهاية إلى صيغة قابلة للعرض في واجهات المستخدم (مثل HTML/DOM أو canvas أو SVG …إلخ.).

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

استخدام React لإنشاء مكونات شبيهة بعنصر ‎select>‎>

ما يلي هو عنصر <select> يحتوي على عناصر <option>. لحسن الحظ، الغرض من العنصر <select> معروفٌ لديك:

<select size="4">
  <option>Volvo</option>
  <option>Saab</option>
  <option selected>Mercedes</option>
  <option>Audi</option>
</select>

عندما يفسِّر المتصفح الشجرة السابقة من العناصر فسيُنتِج واجهة مستخدم تحتوي على قائمة نصية من العناصر التي يمكن اختيارها.

أما في المتصفح، فشجرة DOM وشجرة DOM الظل (shadow DOM) تعملان معًا خلف الكواليس لتحويل العنصر <select> إلى مكوِّن UI. لاحظ أنَّ المكوِّن <select> يسمح للمستخدم باختيار أحد العناصر وبالتالي سيُخزِّن حالة ذاك الاختيار (أي انقر على Volvo وستختارها بدلًا من Mercedes).

يمكننا باستخدام React إنشاء مكوِّن <select> خاص بنا باستخدام عقد React لإنشاء مكوِّن React والذي في النهاية سيُنتِج عناصر HTML في شجرة DOM.

لنُنشِئ مكوِّنًا خاصًا بنا شبيهًا بالعنصر <select> باستخدام React.

تعريف مكون React (أي React Component)

سنُنشِئ فيما يلي مكوِّن React باشتقاق الصنف (class‎) ‏React.Component لإنشاء المكوِّن MySelect.

كما ترى، المكوِّن MySelect مُنشَأ من عدِّة أنماط إضافةً إلى عقدة <div> فارغة:

class MySelect extends React.Component {
  // MySelect تعريف المكوِّن 
  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
      // JSX استخدام {} للإشارة إلى متغير جافاسكربت داخل 
      // JSX باستخدام <div> سنعيد عنصر
      return <div style={mySelectStyle}></div>; 
    }
};

العنصر <div> السابق شبيهٌ بعناصر HTML العادية، وهو موجودٌ داخل شيفرة JavaScript التي تسمى JSX! صيغة JSX هي صياغة JavaScript اختيارية ومخصصة التي تستخدمها مكتبة React للتعبير عن عقد React التي يمكن أن ترتبط مع عناصر HTML حقيقية، أو عناصر مخصصة، أو عقد نصية. علينا ألّا نفترض أنَّ عقد React المُعرَّفة باستخدام JSX مماثلة تمامًا لعناصر HTML، فهنالك بعض الاختلافات بينها، وبعض القصور أيضًا.

يجب تحويل صياغة JSX إلى شيفرات JavaScript حقيقية التي يمكن تفسيرها من محركات ECMAScript 5، فإن لم تحوّل الشيفرة السابقة فستسبب خطأً في JavaScript.

الأداة الرسمية لتحويل شيفرات JSX إلى شيفرات JavaScript تسمى Babel. بعد أن يحوِّل Babel العنصر <div> في الشيفرة السابقة إلى شيفرة JavaScript فستبدو كما يلي:

return React.createElement('div', { style: mySelectStyle });

بدلًا من:

return <div style={mySelectStyle}></div>;

في الوقت الحالي، ضع في ذهنك أنَّه عندما تكتب عناصر شبيهة بعناصر HTML في شيفرة React فستحوَّل في نهاية المطاف إلى شيفرة JavaScript حقيقية، إضافةً إلى تحويل أي شيفرة مكتوبة تحتوي على ميزات ECMAScript 6 وما بعدها إلى ECMAScript 5.

المكوِّن <MySelect> يحتوي -عند هذه النقطة- على عقدة <div> فارغة فقط، أي أنَّ مكوِّن دون أي فائدة، لذا دعونا نغيِّر ذلك.

سنُعرِّف مكونًا آخر باسم <MyOption> وسنستخدم المكوِّن <MyOption> داخل المكوِّن <MySelect> (ويسمى ذلك التركيب أي composition).

تفحَّص شيفرة JavaScript المُحدَّثة الآتية التي تُعرِّف كلًا من مكونَي <MySelect> و <MyOption>:

class MySelect extends React.Component {
  // MySelect تعريف المكوِّن 
  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    // JSX استخدام {} للإشارة إلى متغير جافاسكربت داخل
    // <MyOption> يحتوي على المكون JSX باستخدام <div> إعادة عنصر
    return ( 
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    // MyOption تعريف المكون 
    render(){
      // JSX باستخدام <div> إعادة عنصر
      return <div>{this.props.value}</div>;    
    }
};

يفترض أنَّك لاحظت وجود المكوِّن <MyOption> داخل المكوِّن <MySelect> والذين أنشأناهما باستخدام JSX.

تمرير خيارات المكون باستخدام خاصيات React

لاحظ أنَّ المكوِّن <MyOption> يتألف من عنصر <div> يحتوي على التعبير {this.props.value}. تُستخدَم الأقواس المعقوفة {} داخل JSX للإشارة أنَّ محتواها هو تعبيرٌ صالحٌ في JavaScript. بعبارة أخرى، يمكننا أن نكتب شيفرات JavaScript عادية داخل القوسين {}.

استخدمنا القوسين {} للوصول إلى الخاصيات المُمرَّرة إلى المكوِّن <MyOption>. بعبارةٍ أخرى، عندما يعرض المكوِّن <MyOption> فستوضع قيمة الخيار value التي جرى تمريرها عبر خاصيةٍ شبيهةٍ بخاصيات HTML (أي value="Volvo"‎) داخل عنصر <div>. هذه الخاصيات التي تشبه خاصيات HTML تسمى خاصيات React، وتستخدمها مكتبة React لتمرير الخيارات التي لا تتغير إلى المكوِّنات، ومرَّرنا في مثالنا الخاصية value إلى المكوِّن <MyOption>، والأمر لا يختلف عن تمرير وسيط إلى دالة JavaScript، وهذا ما تفعله JSX خلف الكواليس.

تصيير (Render) مكوِّن إلى شجرة DOM الافتراضية (Virtual DOM) ثم إلى شجرة DOM

في هذه المرحلة، عرَّفنا مكوِّنين من مكونات React، لكننا لم نصيِّرها إلى شجرة DOM الافتراضية ومنها إلى شجرة HTML DOM.

قبل أن نفعل ذلك، أود أن أشير إلى أنَّ كل ما فعلناه هو تعريف مكونين باستخدام JavaScript. وكل ما فعلناه -نظريًا- هو تعريف مكونات UI، وليس من الضروري أن تذهب هذه المكونات إلى شجرة DOM أو حتى إلى شجرة DOM الافتراضية (Virtual DOM). ويمكننا -نظريًا- أن نصيّر (render) هذه المكونات إلى منصة من منصات الهواتف الذكية أو إلى العنصر <canvas>)، لكننا لن نفعل ذلك هنا. تذكّر أنَّ استخدام React يمنحنا تنظيمًا لعناصر واجهة المستخدم التي يمكن تحويلها إلى شجرة DOM أو تطبيقاتٍ أخرى.

لنصيّر الآن المكوِّن <MySelect> إلى شجرة DOM الافتراضية والتي بدورها ستصيّر إلى شجرة DOM الأساسية داخل صفحة HTML.

في شيفرة JavaScript التالية، ستلاحظ أننا أضفنا استدعاءً للدالة ReactDOM.render()‎ في آخر سطر، ومررنا إلى الدالة ReactDOM.render()‎ المكوِّن الذي نريد تصييره (وهو <MySelect>) ومرجعية إلى عنصر HTML موجودٌ في شجرة HTML DOM (وهو <div id="app"></div>) الذي نريد عرض المكوِّن <MySelect> فيه.

class MySelect extends React.Component {
  // MySelect تعريف المكوِّن 
  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    // JSX استخدام {} للإشارة إلى متغير جافاسكربت داخل 
    // <MyOption> يحتوي على المكون JSX باستخدام <div> إعادة عنصر
    return ( 
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    // MyOption تعريف المكون 
    render(){
      // JSX باستخدام <div> إعادة عنصر
      return <div>{this.props.value}</div>; 
    }
};

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

لاحظ أنَّ كل ما فعلناه هو إخبار React أين ستبدأ بتصيير المكونات وما هي المكونات التي عليها بدء التصيير بها. بعد ذلك ستصيّر React أيّة مكونات محتواة داخل المكوِّن الأصلي (مثل المكوِّن <MyOption> داخل <MySelect>).

انتظر لحظة! ربما تفكِّر الآن أننا لم نُنشِئ العنصر <select> أصلًا، وكل ما فعلناه هو إنشاء قائمة ثابتة عديم الحالة من السلاسل النصية. سنصلح ذلك في الخطوة القادمة.

قبل أن نكمل إلى الخطوة القادمة، أحب أن أشير إلى عدم وجود أي تعاملات ضمنية مع شجرة DOM لكي نعرض المكوِّن في شجرة DOM. بعبارةٍ أخرى، لم نستدعِ شيفرة jQuery أثناء إنشاء هذا المكوِّن؛ وجميع التعاملات مع شجرة DOM الفعلية قد أصبحت مجردةً (abstract) عبر استعمال شجرة DOM الافتراضية الخاصة بمكتبة React. في الواقع، عندما نستخدم React فما نفعله هو وصف شجرة DOM الافتراضية التي تأخذها React وتحوِّلها إلى شجرة DOM الفعلية لنا.

استخدام حالة React (أي React state)

لكي نجعل عنصر <MySelect> الخاص بنا يحاكي عنصر <select> الأصلي في HTML فعلينا أن نضيف حالةً (state) له. فما فائدة عنصر <select> المخطط إذا لم يكن قادرًا على الاحتفاظ بقيمة الاختيار الذي اخترناه.

تأتي الحالة (state) عندما يحتوي المكوِّن على نسخة من المعلومات. وبخصوص عنصر <MyOption> المخصص، الحالة هي النص المختار حاليًا أو عدم وجود نص مختار من الأساس. لاحظ أنَّ الحالة تتضمن عادةً أحداثًا تابعة للمستخدم (مثل الفأرة أو لوحة المفاتيح أو حافظة النسخ …إلخ.) أو أحداثًا تابعة للشبكة (أي AJAX) وتستخدم قيمتها لتحديد إن كانت واجهة المستخدم للمكوِّن تحتاج إلى إعادة تصيير (re-render، فتغيير القيمة سيؤدي إلى إعادة التصيير).

ترتبط الحالة عادةً بأعلى مكوِّن الذي يُنشِئ مكوِّن UI. كنا في السابق نستخدم الدالة getInitialState()‎ في React لنستطيع ضبط الحالة الافتراضية، فلو أردنا ضبط حالة المكون إلى false (أي لا يوجد أي نص مختار) فسنعيد كائن حالة عند استدعاء الدالة getInitialState()‎ (أي return {selected: false};‎). دورة حياة الدالة getInitialState()‎ هي استدعاء الدالة مرةً قبل تركيب المكوِّن، وستُستخدَم القيمة المعادة منها كقيمة افتراضية للخاصية this.state.

الطريقة السابقة قديمة ولم تعد مستخدمةً إلا إذا كنتَ من محبي الوحدة create-react-class والتي سنأتي على ذكرها لاحقًا، أما في الأصناف في ES6، فنحن نستعمل this.state ضمن الدالة البانية (constructor) للصنف الخاص بالمكون. أي أننا سنكتب في الدالة البانية للصنف MySelect تعريفًا للحالة التي نريدها.

هذه نسخة مُحدَّثة من الشيفرة أضفنا فيها الحالة إلى المكوِّن، أنصحك بقراءة التعليقات التي أضعها في الشيفرة والتي تجذب انتباهك إلى التغييرات التي حدثت في الشيفرة.

class MySelect extends React.Component {
  constructor(){ // إضافة الحالة الافتراضية
    super();
    this.state = {selected: false}; // this.state.selected = false;
  }
  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    return (
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    render(){
      return <div>{this.props.value}</div>;
    }
};

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

بعد ضبط الحالة الافتراضية، سنستدعي دالة رد نداء (callback function) باسم select التي ستُطلَق عندما يضغط المستخدم على خيارٍ ما. داخل هذه الدالة سنحصل على نص الخيار الذي اختاره المستخدم (عبر المعامل event) وسنستخدمه لضبط الحالة setState للمكوِّن الحالي. لاحظ أننا نستخدم تفاصيل الكائن event المُمرَّر إلى دالة رد النداء select. يُفترَض أنَّ هذا النمط من البرمجة مألوفٌ لديك إن كانت لديك أيّ خبرة مع مكتبة jQuery من قبل.

من أهم ما يجب ملاحظته في الشيفرة الآتية هو اتباع التوابع في مكوّنات React المُعرَّفة كأصناف ES6 لنفس القواعد في أصناف ES6 الاعتيادية، يعني هذا أنّها لا تربط this بنسخة الكائن، بل يجب عليك أن تستخدم بشكل صريح التابع ‎.bind(this)‎ في الدالة البانية:

class MySelect extends React.Component {
  constructor(){ // إضافة الحالة الافتراضية
    super();
    this.state = {selected: false}; // this.state.selected = false;
    this.select = this.select.bind(this); // هذا السطر مهم، راجع الشرح أعلاه
  }
  select(event){ // select إضافة الدالة 
    if(event.target.textContent === this.state.selected){ // إزالة التحديد
        this.setState({selected: false}); // تحديث الحالة
    }else{ // إضافة التحديد
        this.setState({selected: event.target.textContent}); // تحديث الحالة
    }   
  }

  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    return (
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    render(){
      return <div>{this.props.value}</div>;
    }
};

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

ولكي تحصل مكوِّنات <MyOption> على وصولٍ للدالة select فمررنا إشارةً مرجعيةً إليها عبر خاصيات React (‏props) من المكوِّن <MySelect> إلى المكوِّن <MyOption>. ولفعل ذلك أضفنا select={this.select}‎ إلى مكونات <MyOption>.

بعد ضبط ما سبق، يمكننا إضافة onClick={this.props.select}‎ إلى المكوِّن <MyOption>. أرجو أن يكون واضحًا أنَّ ما فعلناه هو ربط الحدث click الذي سيستدعي الدالة select. تتكفّل React بربط دالة التعامل مع حدث النقر الحقيقي في شجرة DOM نيابةً عنّا.

class MySelect extends React.Component {
  constructor(){
    super();
    this.state = {selected: false};
    this.select = this.select.bind(this);
  }
  select(event){
    if(event.target.textContent === this.state.selected){
        this.setState({selected: false});
    }else{
        this.setState({selected: event.target.textContent});
    }   
  }

  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    return (
      <div style={mySelectStyle}>
        <MyOption select={this.select} value="Volvo"></MyOption>
        <MyOption select={this.select} value="Saab"></MyOption>
        <MyOption select={this.select} value="Mercedes"></MyOption>
        <MyOption select={this.select} value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    render(){
      return <div onClick={this.props.select}>{this.props.value}</div>;
    }
};

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

بعد فعلنا لذلك، يمكننا الآن ضبط الحالة بالنقر على أحد الخيارات؛ وبعبارةٍ أخرى، عندما تنقر على خيارٍ ما فستستدعى الدالة select وتضبط حالة المكوِّن <MySelect>. لكن مستخدم المكوِّن لن يعرف أبدًا أنَّ ذلك قد حصل لأنَّ كل ما فعلناه حتى الآن هو تغيير حالة المكوِّن، ولا توجد أي تغذية بصرية تشير إلى اختيار أي عنصر. لذا لنصلح ذلك.

ما علينا فعله الآن هو تمرير الحالة الراهنة إلى المكوِّن <MyOption> لكي يستجيب -بصريًا- إلى تغيير حالة المكوِّن.

باستخدام الخاصيات عبر props، سنُمرِّر الحالة selected من المكوِّن <MySelect> إلى المكوِّن <MyOption> بوضع الخاصية state={this.state.selected}‎ في جميع مكونات <MyOption>. أصبحنا نعلم الآن ما هي الحالة (أي this.props.state) والقيمة الحالية (أي this.props.value) للخيار لكي نتحقق إذا كانت الحالة تُطابِق القيمة الموجودة في مكوِّن <MyOption> ما. وإذا كانت تطابقها، فسنعلم أنَّه يجب تحديد هذا الخيار، وسنفعل ذلك باستخدام عبار if بسيطة التي تضيف أنماط تنسيق (selectedStyle) إلى عنصر <div> في JSX إذا كانت الحالة تُطابِق قيمة الخيار الحالي. وفيما عدا ذلك، سنعيد عنصر React مع النمط unSelectedStyle:

class MySelect extends React.Component {
  constructor(){
    super();
    this.state = {selected: false};
    this.select = this.select.bind(this);
  }
  select(event){
    if(event.target.textContent === this.state.selected){
        this.setState({selected: false});
    }else{
        this.setState({selected: event.target.textContent});
    }   
  }

  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    return (
      <div style={mySelectStyle}>
        <MyOption state={this.state.selected} select={this.select} value="Volvo"></MyOption>
        <MyOption state={this.state.selected} select={this.select} value="Saab"></MyOption>
        <MyOption state={this.state.selected} select={this.select} value="Mercedes"></MyOption>
        <MyOption state={this.state.selected} select={this.select} value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
  render(){
    var selectedStyle = {backgroundColor:'red', color:'#fff',cursor:'pointer'};
    var unSelectedStyle = {cursor:'pointer'};
    if(this.props.value === this.props.state){
      return <div style={selectedStyle} onClick={this.props.select}>{this.props.value}</div>;
    }else{
      return <div style={unSelectedStyle} onClick={this.props.select}>{this.props.value}</div>;
    }
  }
};
ReactDOM.render(<MySelect />, document.getElementById('app'));

صحيحٌ أنَّ عنصر <select> الذي أنشأناه ليس جميلًا أو كاملًا كما كنتَ ترجو، لكنني أظن أنَّك ترى ما الغرض الذي حققناه. مكتبة React تسمح لك بالتفكير بالعناصر بطريقة منظمة ومهيكلة هيكليةً صحيحة.

قبل الانتقال إلى شرح دور شجرة DOM الافتراضية، أود أنَّ أوضِّح أنَّه من غير الضروري استخدام JSX و Babel. يمكنك تخطي هذه الأدوات واستخدام شيفرات JavaScript مباشرة. سأريك نسخةً أخيرةً من الشيفرة بعد تحويل JSX باستخدام Babel. إذا لم ترغب باستخدام JSX فيمكنك أن تكتب الشيفرة الآتية يدويًا بدلًا من الشيفرة التي كتبناها خلال هذا المقال:

class MySelect extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: false
    };
    this.select = this.select.bind(this);
  }

  select(event) {
    if (event.target.textContent === this.state.selected) {
      this.setState({
        selected: false
      });
    } else {
      this.setState({
        selected: event.target.textContent
      });
    }
  }

  render() {
    var mySelectStyle = {
      border: '1px solid #999',
      display: 'inline-block',
      padding: '5px'
    };
    return React.createElement("div", {
      style: mySelectStyle
    }, React.createElement(MyOption, {
      state: this.state.selected,
      select: this.select,
      value: "Volvo"
    }), React.createElement(MyOption, {
      state: this.state.selected,
      select: this.select,
      value: "Saab"
    }), React.createElement(MyOption, {
      state: this.state.selected,
      select: this.select,
      value: "Mercedes"
    }), React.createElement(MyOption, {
      state: this.state.selected,
      select: this.select,
      value: "Audi"
    }));
  }
};

class MyOption extends React.Component {
  render() {
    var selectedStyle = {
      backgroundColor: 'red',
      color: '#fff',
      cursor: 'pointer'
    };
    var unSelectedStyle = {
      cursor: 'pointer'
    };

    if (this.props.value === this.props.state) {
      return React.createElement("div", {
        style: selectedStyle,
        onClick: this.props.select
      }, this.props.value);
    } else {
      return React.createElement("div", {
        style: unSelectedStyle,
        onClick: this.props.select
      }, this.props.value);
    }
  }

};
ReactDOM.render(React.createElement(MySelect, null), document.getElementById('app'));

فهم دور شجرة DOM الافتراضية (virtual DOM)

سأنهي جولتنا بأكثر جوانب React حديثًا بين المطورين، إذ سأتحدث عن شجرة DOM الافتراضية (React virtual DOM).

لاحظنا -عبر الأمثلة في هذا المقال- أنَّ التعامل الوحيد مع شجرة DOM الحقيقية أثناء إنشائنا لعنصر <select> خاص بنا هو عندما أخبرنا الدالة ReactDOM.render()‎ أين ستعرض مكوِّنات UI في صفحة HTML (أي عندما عرضناها في <div id="app"></div>). من المرجح أن يكون هذا تعاملك الوحيد مع شجرة DOM الحقيقية عندما تبني تطبيق React من شجرة من المكوِّنات. وهنا تأتي قيمة مكتبة React. فعند استخدامك لها، ليس عليك أن تفكر بشجرة DOM بنفس الطريقة التي كنتَ تفكِّر فيها عند كتابتك لشيفرة jQuery. فمكتبة React تستبدل jQuery عبر تجريد استخدام شجرة DOM.

ولأنَّ شجرة DOM الافتراضية حلّت محل شجرة DOM الحقيقية، سمح ذلك بإجراء تحديثات لشجرة DOM الحقيقية مع أداءٍ ممتاز. تبقي شجرة DOM الافتراضية سجلًا بجميع التغيرات في واجهة المستخدم اعتمادًا على الحالة والخاصيات (state و props)، ثم تقارنها بشجرة DOM الحقيقية وتجري أقل مقدار ممكن من التعديلات عليها. بصيغةٍ أخرى، لا تُحدَّث شجرة DOM الحقيقية إلا بأقل قدر ممكن وذلك عند تغيير الحالة أو الخاصيات.

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

أرغب أن أنهي هذه المقدمة بالقول أنَّ استخدام React يلغي تقريبًا الحاجة إلى استخدام أي مكتبات أخرى مثل jQuery. واستخدام شجرة DOM الافتراضية يريحنا من كثيرٍ من التفاصيل الدقيقة، لكن قيمة مكتبة React لا تكمن في شجرة DOM الافتراضية فقط، وإنما يمكننا أن نعدّ شجرة DOM الافتراضية على أنها الفستق الحلبي المبشور فوق الحلوى؛ فببساطة، قيمة مكتبة React تكون في أنها توفِّر طريقةً سهلةً الإنشاء والصيانة لإنشاء شجرة من مكوِّنات الواجهة الرسومية. ‎تخيل بساطة إنشاء واجهة رسومية إذا بنيتَ تطبيقك باستخدام مكوِّنات React القابلة لإعادة الاستخدام.

تذكر هذه السلسلة عندما تريد أن تعرِّف ما هي React. مكتبة React.js هي مكتبة JavaScript التي يمكن استخدامها لبناء واجهات المستخدم، وباستخدام React يمكن للمطورين إنشاء مكونات قابلة لإعادة الاستخدام، وهذه المكونات تُظهِر البيانات وتستطيع تغييرها مع الزمن؛ وتوجد أيضًا مكتبة React Native لبناء تطبيقات للهواتف الذكية باستخدام React.

ترجمة وبتصرف للفصل What is React?‎ من كتاب React Enlightenment