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

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

プロセス:

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

const element = 
Hello, World!
;

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 = 
Hello, World!
;

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

Hello, World!

const element = 
Hello, World!
;

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

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

結論にしましょう...