ES6-sız React

These docs are old and won’t be updated. Go to react.dev for the new React docs.

Normalda, React komponenti sadə JavaScript sinfi kimi təyin edilir:

class Greeting extends React.Component {
  render() {
    return <h1>Salam, {this.props.name}</h1>;
  }
}

ES6 işlətmədikdə create-react-class modulundan istifadə edə bilərsiniz:

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Salam, {this.props.name}</h1>;
  }
});

ES6 siniflərinin API-ı bəzi istinasları çıxmaqla createReactClass()-ın API-na bənzəyir.

Təyin Edilməyən Propların Müəyyənləşdirilməsi

defaultProps parametri, funksiya və ES6 siniflərində komponentin parametri kimi təyin edilir:

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

Greeting.defaultProps = {
  name: 'Ayşən'
};

createReactClass() işlətdikdə isə təyin edilməyən propları qaytamaq üçün getDefaultProps() funksiyası təyin edilməlidir:

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'Ayşən'
    };
  },

  // ...

});

İlkin State-in Təyin Edilməsi

ES6 siniflərində ilkin state-i təyin etmək üçün konstruktordan this.state-i təyin etmək kifayətdir:

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

createReactClass() funksiyasında isə ilkin state-i qaytaran getInitialState funksiyası təyin edilməlidir:

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

Avtomatik Binding

ES6 sinifləri ilə təyin olunan React siniflərinin funksiyaları standart ES6 siniflərinin semantikası ilə eynidir. Bu deməkdir ki, sinif funksiyalarında this instansiyasını avtomatik bind edilmir. Bu səbəbdən, konstruktorda açıq formada .bind(this) yazmalısınız:

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // Bu sətr vacibdir!
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // `this.handleClick` sinfə bind olduğundan biz bu funksiyanı hadisə işləyicisi kimi işlədə bilərik.
    return (
      <button onClick={this.handleClick}>
        Salam de
      </button>
    );
  }
}

createReactClass() işlətdikdə isə bütün daxili funksiyalar avtomatik olaraq bind olunur:

var SayHello = createReactClass({
  getInitialState: function() {
    return {