JSX なしで React を使う

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。

JSX は React を使うための必須事項ではありません。JSX なしで React を使うことは、あなたのビルド環境で JSX のコンパイルの設定をしたくない時には便利です。

各 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 コンパイラで試すことができます。

コンポーネントは文字列、React.Component のサブクラス、もしくはプレーンな関数のいずれかで指定されます。

たくさんの React.createElement をタイピングするのにうんざりした場合、一般的なパターンの 1 つは以下のショートハンドを割り当てることです。

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?このページを編集する