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

export default {
  data() {
    return {
      value: 0
    };
  },

  methods: {
    inc(amount) {
      this.value += amount;
    }
  },

  render() {
    return (
      <div class="counter">
        <p>
          You clicked {this.value} times.
          <button onClick={this.inc.bind(null, 1)}>+1</button>
          <button onClick={this.inc.bind(null, -1)}>-1</button>
        </p>
      </div>
    );
  }
};

ואפשר לראות את מונה הלחיצות שלי בפעולה בקודסנדבוקס הבא: https://codesandbox.io/s/mystifying-leavitt-2iobe

הכתיב הזה בהחלט מרגיש בבית למתכנתי ריאקט. הכל פה חוץ מהשטויות של ריאקט, כלומר אנחנו כותבים class ולא className, ו for במקום htmlFor. בנוסף יש תמיכה גם ב Custom Directives של Vue, והכי מרגש שאפשר לכתוב את כל הקוד בקובץ js רגיל וכך לכתוב מספר קומפוננטות באותו קובץ. וכן למרות שהדוגמה שלי כאן היא מהכתיב הישן, גם Composition API תומך בסיפור הזה ומאפשר להחזיר JSX מ setup.

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

פרטים נוספים בתיעוד הקרוב אליכם בקישור: https://github.com/vuejs/jsx-next/tree/dev/packages/babel-plugin-jsx#readme.