React بدون ES6

نُعرِّف عادةً مُكوّنات React كأصناف JavaScript مُجرَّدة:

class Greeting extends React.Component {
  render() {
    return <h1>أهلًا {this.props.name}</h1>;
  }
}

إن لم تكن تستخدم ES6 بعد، فبإمكانك استخدام الوحدة create-react-class بدلًا من ذلك:

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>أهلًا {this.props.name}</h1>;
  }
});

تُشبِه واجهة برمجة التطبيقات لأصناف ES6 الصنف createReactClass()‎ مع بعض الاستثناءات.

تعريف الخاصيات الافتراضية

تُعرَّف الخاصيّات الافتراضيّة defaultProps في أصناف ودوال ES6 كخاصيّة ضمن المُكوّن نفسه:

class Greeting extends React.Component {
  // ...
}

Greeting.defaultProps = {
  name: 'Mary'
};

أمّا باستخدام createReactClass()‎ فتحتاج لتعريف الدالة getDefaultProps()‎ كدالة ضمن الكائن المُمرَّر:

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'Mary'
    };
  },

  // ...

});

تعيين الحالة المبدئية

في أصناف ES6 تستطيع تعريف الحالة المبدئية عن طريق تعيين this.state  في الدالة البانية:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

يجب عليك مع الدالة createReactClass()‎ تزويدها بتابع getInitialState منفصل والذي يُعيد الحالة المبدئية:

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});