גירסת ES6 של JavaScript הוסיפה תמיכה בכתיב חדש שנקרא כתיב המחלקות, מה שאומר שאפשר להגדיר class כמו בשפות אחרות שאולי אתם מכירים. ריאקט עושה שימוש בכתיב המחלקות כדי לאפשר כתיב חלופי להגדרת פקדים.

1. הגדרת פקד באמצעות מחלקה

הקוד הבא מגדיר פקד HelloWorld פשוט באמצעות כתיב המחלקות של ES6:

class HelloWorld extends React.Component {
    render() {
        return <p>Hello World</p>
    }
}

class App extends React.Component {
    render() {
        return (<div>
                <HelloWorld />
                <HelloWorld />
                <HelloWorld />
            </div>);
    }
}

ReactDOM.render(<App />, document.querySelector('main'));

2. הגדרת Properties

תחביר ES7 שגם הוא נתמך ב Babel הוסיף את התמיכה בשדות מידע סטטיים למחלקות וריאקט עושה שימוש ביכולת זו כדי להגדיר את propTypes ו defaultProps. הקוד הבא מוסיף הגדרות אלו לפקד שכתבנו:

class HelloWorld extends React.Component {
  static propTypes = {
    name: React.PropTypes.string
  };

  static defaultProps = {
    name: "Guest"
  };

  render() {
    return <p>Hello: {this.props.name} </p>
  }
}

3. ניהול מצב הפקד

ההיבט האחרון של כתיב המחלקות הוא ניהול State. הפתרון כאן הוא הגדרת פונקציה בשם השמור constructor. פונקציה זו נקראת עם יצירת הפקד ותפקידה לאתחל את אוביקט state.

בדרך כלל הגדרת State מגיעה יחד עם מנגנון טיפול בפעולות. במקרה של ES6 יש עוד הבדל מהותי הנוגע למנגנון זה והוא שבכתיב המחלקות ריאקט לא מבצע bind באופן אוטומטי לפונקציות. לכן כדי להפעיל פונקציות מהפקד בתגובה לאירועים חיצוניים תוך שמירת הערך הנכון של משתנה this נשתמש בפונקציות חץ.

הקוד הבא משלב את כל שלושת הסעיפים ומציג פקד React מלא בכתיב המחלקות. שימו לב להגדרת ה constructor וכן להגדרת הטיפול בלחיצה על הכפתור:

4. תקציר הפקודות שהוצגו בפרק

קוד הפקד שהוצג: