ES6 היא נפלאה כי היא פותרת הרבה מהבעיות העתיקות של JavaScript. זוהי המהפכה הכי גדולה של JavaScript מאז גירסא 3 (שנת 1999). אומנם לא כל היכולות של ES6 נתמכות כבר בדפדפנים, אבל מצד שני זכרו שבתור מפתחי ריאקט אתם כבר רגילים להריץ את Babel ו Webpack על הקוד שלכם כדי להמיר את קוד ה JSX— לכן שילוב יכולות אלו בקוד ריאקט שלכם לא ידרוש כל שינוי בהגדרות או שיטת העבודה. אותו מנגנון המרה גם ימיר את תחביר ES6 לקוד JavaScript רגיל שכל דפדפן יכול להריץ.

1. פונקציות חץ

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

var arr = [1,3,6,9,12,15,18,21,24,27];

// ES6 arrow
var even = arr.filter( item => item % 2 === 0 );

// ES6 arrow with parens
var even2 = arr.filter( (item) => item % 2 === 0 );

// ES6 arrow long form
var even3 = arr.filter ( (item) => {
  return item % 2 === 0;
});

var evenAsEs5 = arr.filter(function(item) {
  return item % 2 === 0;
});

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

שני מקומות טובים לשילוב פונקציות חץ וריאקט הם לולאות:

ו Stateless Components:

2. סוגריים מרובעים בהגדרת מפתח

צריכים להגדיר מפתח באוביקט לפי תוכן של משתנה? ES6 דאגה גם לכם. נתחיל בלי ריאקט:

var key = "name";
var val = "bob";

var data = {
  [key]: val
};

// Same as
var dataEs5 = {};
dataEs5[key] = val;

// result: { name: "bob" }

בשני המקרים התוצאה זהה: אוביקט עם מפתח אחד בשם name וערכו המחרוזת bob. ומה בריאקט? בדוגמא הבאה הפונקציה handleClick מקבלת מזהה כפתור ומעדכנת את ה state בהתאם.

3. אופרטור spread

שכפול אוביקט מעולם לא היה קל יותר. למי שעבד עם underscore או jQuery בעבר חשבו על הפונקציה extend, רק בלי הפונקציה. כך זה נראה ללא ריאקט:

var a = { name: "bob" };
var b = { ...a, color: "blue" };

// prints: { name: "bob" }
console.log(a);

// prints: { name: "bob", color: "blue" }
console.log(b);

זכרו את אופרטור השכפול בפעם הבאה שתצטרכו להעביר state לילדים, כמו ביצירה של MyButton בדוגמא הבאה.

4. ומה הלאה?

שתי יכולות נוספות שתראו המון בדוגמאות של ריאקט הן Modules ו ES6 Classes, על שתיהן אני ממליץ לקרוא מהתיעוד. מודולים פותרים את הבעיה של חלוקת התוכנית לקבצים ואני מאוד ממליץ להשתמש בהם. ממחלקות אני דוקא ממליץ להזהר: מדובר בסוכר תחבירי שקל מדי להשתמש בו לא נכון.

גם אתם התחלתם לשלב קוד ES6 בתוכניות ריאקט? מכירים יכולות נוספות שלא הזכרתי כאן אבל ממש שימושיות ביישומי ריאקט? ספרו על זה בתגובות.