反応jsxとは何ですか-jsチュートリアル-php.cn

反応jsxとは何ですか

藏色散人

リリース： 2020-11-30 15:54:35

オリジナル

2208 人が閲覧しました

react jsx は、XML によく似た JavaScript 構文拡張機能です。React は、JSX を使用して通常の JavaScript を置き換えます。JSX の利点は次のとおりです: 1. JSX の実行速度が速い、2. タイプセーフです。エラーが発生する可能性があります。コンパイルプロセス中に検出される; 3. JSX を使用してテンプレートを作成する方が高速です。

反応jsxとは何ですか

このチュートリアルの動作環境: Windows10 システム、react16、この記事はすべてのブランドのコンピューターに適用されます。

推奨: 「プログラミングビデオ」

React JSX

React は、JSX を使用して通常の JavaScript を置き換えます。

JSX は、XML によく似た JavaScript 構文拡張機能です。

JSX を使用する必要は必ずしもありませんが、JSX には次のような利点があります。

JSX は JavaScript コードにコンパイルされた後に最適化されるため、より高速に実行されます。
これはタイプセーフであり、コンパイルプロセス中にエラーが見つかる可能性があります。
JSX を使用してテンプレートを作成する方が簡単かつ高速です。

まず次のコードを見てみましょう:

const element = <h1>Hello, world!</h1>;

ログイン後にコピー

これは奇妙に思えるかもしれませんが、タグ構文は文字列でも HTML でもありません。

これは JSX と呼ばれ、JavaScript の構文拡張です。 React でユーザーインターフェイスを記述するには JSX を使用することをお勧めします。

JSX は JavaScript 内に実装されます。

要素は React アプリケーションを構成する最小単位であり、React で要素を宣言するために JSX が使用されることはわかっています。

ブラウザ DOM 要素とは異なり、React の要素は実際には通常のオブジェクトです。React DOM は、ブラウザ DOM のデータコンテンツが React 要素と一致していることを保証します。

React 要素をルート DOM ノードにレンダリングするには、両方を ReactDOM.render() メソッドに渡してページにレンダリングします。

React の例

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById(&#39;example&#39;));

ログイン後にコピー

注:

JSX は JavaScript であるため、class や for などの一部の識別子は XML 属性名として推奨されません。代わりに、React DOM は対応する属性に className と htmlFor を使用します。

JSX の使用

JSX は HTML に似ています。例を見てみましょう:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById(&#39;example&#39;)
);

ログイン後にコピー

上記のコードでは複数の HTML タグをネストできます。 div 要素はそれをラップします。例の p 要素はカスタム属性 data-myattribute を追加します。カスタム属性を追加するには、data- プレフィックスを使用する必要があります。

React の例

ReactDOM.render(
    <div>
    <h1>PHP中文网</h1>
    <h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

ログイン後にコピー

独立したファイル

React JSX コードは独立したファイルに配置できます。たとえば、次のコードを含む helloworld_react.js ファイルを作成します。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
);

ログイン後にコピー

次に、HTML ファイルに JS ファイルを導入します。

反応例

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

ログイン後にコピー

JavaScript 式

JSX では JavaScript 式を使用できます。式は中括弧 {} 内に記述します。例は次のとおりです。

React の例

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

ログイン後にコピー

If else ステートメントは JSX では使用できませんが、代わりに条件 (三項演算) 式を使用できます。次の例では、変数 i が 1 に等しい場合、ブラウザは true を出力します。i の値が変更されると、false を出力します。

反応例

ReactDOM.render(
    <div>
      <h1>{i == 1 ? &#39;True!&#39; : &#39;False&#39;}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

ログイン後にコピー

Style

React はインラインスタイルを推奨します。キャメルケース構文を使用してインラインスタイルを設定でき、要素番号を指定すると React が自動的に px を追加します。次の例は、h1 要素に myStyle インラインスタイルを追加する方法を示しています:

React Example

var myStyle = {
    fontSize: 100,
    color: &#39;#FF0000&#39;
};
ReactDOM.render(
    <h1 style = {myStyle}>PHP中文网</h1>,
    document.getElementById(&#39;example&#39;)
);

ログイン後にコピー

Comments

コメントは中かっこで記述する必要があります。例は次のとおりです。 :

React の例

ReactDOM.render(
    <div>
    <h1>PHP中文网</h1>
    {/*注释...*/}
     </div>,
    document.getElementById(&#39;example&#39;)
);

ログイン後にコピー

Array

JSX ではテンプレートに配列を挿入でき、配列はすべてのメンバーを自動的に展開します:

React の例

リーリー

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