不使用 JSX 開發 React

JSX 對於使用 React 並不是不可或缺的。當你不想在開發環境中設置編譯時，不使用 JSX 開發 React 格外方便。

每個 JSX 元素都只是呼叫 React.createElement(component, props, ...children) 的語法糖。所有任何你能用 JSX 做的事，你都能用純 JavaScript 做到。

比如，這段用 JSX 寫成的編碼：

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);

可以編譯成這段沒有 JSX 的程式碼：

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

如果你想看更多 JSX 是如何轉換成 JavaScript 的範例，你可以嘗試線上 Babel 編譯器。

Component 可以是一個字串、可以是 React.Component 的 subclass，或是個 plain function。

如果你已經疲於不斷重複寫 React.createElement，一個常見的方式是賦予一個縮寫：

const e = React.createElement;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(e('div', null, 'Hello World'));

如果你使用這個 React.createElement 縮寫的格式，他可以跟不使用 JSX 開發 React 一樣方便。

此外，你也可以參考社群專案像是 react-hyperscript 和 hyperscript-helpers，這些專案提供了更為簡潔的語法。

Is this page useful?Edit this page