JSX

Javascript XML sytnax

JSXの紹介

フレームワーク「React.js」を使用してウェブアプリを実装したことがある場合は、React.jsコンポーネントを作成するための構文が他のJavascriptコードと少し異なっていることに気付いたかもしれません。ほとんど同じですが、Reactコンポーネントは、特別な角かっこ、つまり左右の山かっこで記述されています。これらは、XMLの構文である「ExtensibleMarkupLanguage」と同じように見えます。 React.jsでは、この構文は同様に「JSX」と呼ばれ、「JavascriptXML」を意味します。

この構文の主な目的は、Reactコードの記述を簡素化することです。 JSXコードはJVMで解釈できないため、使用する前に実際のJavascriptコードにコンパイルする必要があります。これは通常、BabelやWebpackなどのバンドラーによって実行されるタスクです。

おそらく書いたことがないReactコード

これは事実上、JSXコードから生成されるような「真の」React.jsコンポーネントを作成したことがない可能性が非常に高いことを意味します。しかし、心配しないでください。これは、それほど面倒なことなく簡単に実行できます。実際、JSXを使用せずに完全なReactWebアプリケーションを作成することもできます。次のコードスニペットは、Javascriptのみを使用した真のReact.jsコンポーネントがどのように見えるかを示しています。

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

ソフトウェアをインストールせずに、ブラウザでこれを試すこともできます。このページの最後までスクロールして、補遺のリンクを使用してください。

JSXを使用してコードを簡素化する

ご覧のとおり、JSX構文の主な利点は、XMLのような構文がコードのドメインを明確に示すため、UI関連のコードを記述しやすくし、アプリケーションの他の部分と区別しやすくすることです。

JSXのもう1つの大きな特徴は、コンパイルステップの後で式になることです。したがって、if-else-statementsで使用したり、結果を変数に格納したりすることもできます。また、React.jsコンポーネントには子自体として式を含めることができるため、非常に構成しやすいUIコードを記述できます。

すべてのJSXファイルのデフォルトのインポート

このインポートされた変数を直接呼び出すことは決してないかもしれませんが、さまざまなチュートリアル、ガイド、そしておそらくあなた自身のコードのすべてのJSXファイルにReactライブラリからのデフォルトのインポートが含まれていることに気付いたかもしれません。その背後にある理由は、前のコード例で見たように、コンパイルステップの後、すべてのJSX式が「React.createElement」呼び出しになるためです。したがって、デフォルトのインポートの「React」変数をすべてのファイルのスコープに含める必要があります。

HTMLのように見えますが、そうではありません

JSX構文でコーディングする際の重要な制約の1つは、コンポーネントの名前の表記です。バンドラーがコンポーネントを正しく識別するには、構文が同じであるため、コンポーネントは標準のHTMLタグから一意である必要があります。

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

したがって、JSX要素は常に大文字でコーディングする必要があります。つまり、最初の文字は大文字にする必要があります。

Typescriptバリアント

多くのプロジェクトがReact.jsコンポーネントファイルのファイルサフィックスとしてTSXも使用していることに気付いたかもしれません。これは、Typescriptと互換性のある元のJSXの単なる拡張です。 TSXファイルを使用すると、JSX表記コンポーネントと一緒にTypescriptコードを記述できます。

ほんの始まり

この記事では、ReactコンポーネントをコーディングするためのJSXの簡単な紹介を提供しました。主な利点は、Web環境で自然に感じる非常に簡潔な構文です。非常に構成可能な要素を非常に少ないコードで記述できます。これは、Reactの現在の有名で人気のある状態の重要な要素の1つであることは間違いありません。 Reactチームによるより多くの優れた詳細ガイドがサイトにあることに興味がある場合は、このページの最後にある補遺にリンクがあります。

提案

関連する

追加事項

言語