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

ホームページ

ウェブフロントエンド

jsチュートリアル

反応jsxとは何ですか

藏色散人

Nov 10, 2020 am 11:47 AM

react

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7526

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

React と WebSocket を使用してリアルタイムチャットアプリを構築する方法 Sep 26, 2023 pm 07:46 PM

React と WebSocket を使用してリアルタイムチャットアプリケーションを構築する方法はじめに: インターネットの急速な発展に伴い、リアルタイムコミュニケーションがますます注目を集めています。ライブチャットアプリは、現代の社会生活や仕事生活に不可欠な部分になっています。この記事では、React と WebSocket を使用して簡単なリアルタイムチャットアプリケーションを構築する方法と、具体的なコード例を紹介します。 1. 技術的な準備リアルタイムチャットアプリケーションの構築を開始する前に、次のテクノロジとツールを準備する必要があります。 React: 構築用の 1 つ

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法 Sep 28, 2023 am 10:48 AM

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、特定のコード例が必要です今日の Web 開発環境では、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンドコードとバックエンドコードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されています。

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法 Sep 27, 2023 am 11:09 AM

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法はじめに: インターネットの発展に伴い、Web アプリケーションのニーズはますます多様化および複雑化しています。使いやすさとパフォーマンスに対するユーザーの要件を満たすために、最新のテクノロジースタックを使用してネットワークアプリケーションを構築することがますます重要になっています。 React と Flask は、フロントエンドおよびバックエンド開発用の 2 つの非常に人気のあるフレームワークであり、うまく連携してシンプルで使いやすい Web アプリケーションを構築します。この記事では、React と Flask を活用する方法について詳しく説明します。

React と RabbitMQ を使用して信頼性の高いメッセージングアプリを構築する方法 Sep 28, 2023 pm 08:24 PM

React と RabbitMQ を使用して信頼性の高いメッセージングアプリケーションを構築する方法はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザーインターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージングミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージングアプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:

React レスポンシブデザインガイド: アダプティブフロントエンドレイアウト効果を実現する方法 Sep 26, 2023 am 11:34 AM

React レスポンシブデザインガイド: アダプティブフロントエンドレイアウト効果を実現する方法モバイルデバイスの人気と、マルチスクリーンエクスペリエンスに対するユーザーの需要の高まりに伴い、レスポンシブデザインは最新のフロントエンド開発における重要な考慮事項の 1 つとなっています。 React は、現在最も人気のあるフロントエンドフレームワークの 1 つであり、開発者がアダプティブレイアウト効果を実現するのに役立つ豊富なツールとコンポーネントを提供します。この記事では、React を使用してレスポンシブデザインを実装するためのガイドラインとヒントをいくつか紹介し、参考として具体的なコード例を示します。 Reactを使用したファイル

React コードデバッグガイド: フロントエンドのバグをすばやく見つけて解決する方法 Sep 26, 2023 pm 02:25 PM

React コードデバッグガイド: フロントエンドのバグをすばやく見つけて解決する方法はじめに: React アプリケーションを開発するとき、アプリケーションをクラッシュさせたり、不正な動作を引き起こしたりする可能性のあるさまざまなバグに遭遇することがよくあります。したがって、デバッグスキルを習得することは、すべての React 開発者にとって不可欠な能力です。この記事では、フロントエンドのバグを見つけて解決するための実践的なテクニックをいくつか紹介し、読者が React アプリケーションのバグをすばやく見つけて解決できるようにする具体的なコード例を示します。 1. デバッグツールの選択: In Re

React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 Sep 29, 2023 pm 05:45 PM

ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティングライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンドルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法 Sep 26, 2023 pm 06:12 PM

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法はじめに: 今日の情報爆発の時代において、データ分析はさまざまな業界で不可欠なリンクとなっています。中でも、高速かつ効率的なデータ分析アプリケーションを構築することは、多くの企業や個人が追求する目標となっています。この記事では、React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法を紹介し、詳細なコード例を示します。 1. 概要 React はビルドするためのツールです

See all articles

反応jsxとは何ですか

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック