React JSX が舞台裏で JavaScript に変換される仕組み

React を作成しているとき、JavaScript コード内の HTML に似た構文である JSX をよく目にします。しかし、このコードがブラウザでどのように実行されるのか疑問に思ったことはありますか?

これが魔法です: JSX は有効な JavaScript ではありません!ブラウザはそれを直接理解できません。舞台裏では、Babel のようなツールが介入して、JSX を通常の JavaScript に変換 (または「トランスパイル」) します。

プロセス:

1.JSX を作成します – これは HTML のように見えますが、React コンポーネント内に存在します。例:

const element = <h1 id="Hello-World">Hello, World!</h1>;

2.Babel がそれを変換します – ビルド プロセス中に、Babel は React.createElement:
を使用して JSX を純粋な JavaScript に変換します。

const element = React.createElement('h1', null, 'Hello, World!');

3.ブラウザの JavaScript – 最後に、この標準 JavaScript はブラウザが実行するものであり、DOM を動的に構築します。

バベルはどのように機能しますか?

Babel は、さまざまなブラウザーや環境間での互換性を確保しながら、最新の JavaScript 機能 (React の JSX を含む) を使用できるようにする強力な JavaScript コンパイラーです。 Babel の仕組みを詳しく説明します:
1.解析中
Babel は、最新の JavaScript または JSX コードを解析して 抽象構文ツリー (AST) を作成することから始まります。 AST は、Babel (およびその他のツール) にとって使いやすい方法でコードを表す詳細なツリー状の構造です。分析して操作すること。このステップ中に、Babel はコードを読み取りますが、まだ変更しません。
たとえば、Babel は次の JSX コードを受け取ります:

const element = <h1 id="Hello-World">Hello, World!</h1>;

そして、このコードの構造を表す AST を生成します。
2.変身
次に、Babel は一連の プラグイン を AST に適用します。各プラグインは、定義されているルールに従ってASTの特定の部分を変換する責任があります。これらの変換には、最新の JavaScript 構文 (アロー関数や async/await など) をブラウザ互換の古いバージョンに変換することが含まれる場合があります。
JSX の場合、Babel は次のように変換します。

const element = <h1 id="Hello-World">Hello, World!</h1>;

const element = React.createElement('h1', null, 'Hello, World!');

3。 コード生成
すべての変換が完了すると、Babel は変換された AST から JavaScript コードを生成します。これは、人間が判読できる出力が生成される最後のステップであり、ブラウザーまたは Node.js で実行できます。

結論にしましょう...

なぜ重要なのか:

JSX を使用すると、より直感的なコンポーネントベースの UI コードを作成できますが、それを実現するのは Babel と JavaScript ランタイムです。この変換を理解すると、トラブルシューティングを改善し、より最適化された React アプリを作成するのに役立ちます。

以上がReact JSX が舞台裏で JavaScript に変換される仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。