JSX 的原理

4月 5 2022 React

原來如此。

簡述

就只是 babel 而已

對，其實 JSX 背後只是透過 babel 來做轉譯而已：

1	<Button name="cool" onClick={() => console.log('yo')}>yo</Button>

React.createElement(Button, {
  name: "cool",
  onClick: function onClick() {
    return console.log('yo');
  }
}, "yo");

兩個東西是等價的，所以 JSX 不是什麼黑魔法，真的就只是 Babel 而已！