ReactのJSXとは何ですか

react JSX は、React アーキテクチャで使用される JavaScript 構文拡張機能です。その形式はテンプレート言語に似ていますが、実際には完全に JavaScript 内に実装されています。JSX は、react.js 構文用に開発されたセットです。 Sugar は React.js の基礎でもあります。

#この記事の動作環境: Windows10 システム、React 16、Thinkpad t480 コンピューター。

推奨: 「

react ビデオ チュートリアル 」

react の JSX とは何ですか?

JSX は JavaScript XML であり、JavaScript と XML を組み合わせた形式です。

JSX は React アーキテクチャで使用される JavaScript の構文拡張であり、その形式はテンプレート言語に似ていますが、実際には完全に JavaScript 内に実装されています。要素は React アプリケーションを構成する最小単位であり、React では要素の宣言に JSX が使用され、React ではユーザー インターフェイスの記述に JSX が使用されます。

JSX は、react.js 用に開発された糖衣構文のセットであり、react.js の基礎でもあります。 React は JSX を使用しなくても動作しますが、JSX を使用するとコンポーネントの可読性が向上するため、JSX の使用をお勧めします。

こちらは公式サイトです: http://facebook.github.io/jsx/

JSXの特徴

HTML言語を書くことができます引用符なしの JavaScript 言語では、これは JSX の構文であり、HTML と JavaScript の混合が可能です。

JSX を使用すると、JavaScript 変数をテンプレートに直接挿入できます。この変数が配列の場合、配列のすべてのメンバーが展開されます。

アンチインジェクション攻撃

ユーザー入力を JSX に埋め込むのは安全です;

React DOM は、レンダリング前にデフォルトですべての受信値をフィルターします。これにより、アプリケーションがインジェクション攻撃に対して脆弱ではなくなります。すべてのコンテンツはレンダリング前に文字列に変換されます。これにより、XSS (クロスサイト スクリプティング攻撃) を効果的に防ぐことができます。

Babel トランスレーターは、JSX を React.createElement() というメソッド呼び出しに変換します。

React 独自の JSX 構文は JavaScript と互換性がないため、通常の HTML で jsx 構文を記述したい場合は、スクリプトの種類を text/jsx に変更する必要があります。 JSX が使用される場合は常に、type="text/jsx" を追加する必要があります。次に、React には、react.js と JSXTransformer.js という 2 つのライブラリが用意されており、最初にロードする必要があります。このうち、JSXTransformer.js の機能は、JSX 構文を JavaScript 構文に変換することです。この手順は非常に時間がかかるため、実際にオンラインになっているサーバー上で実行する必要があります。

以上がReactのJSXとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。