ホーム » Reactチュートリアル » React JSX

React JSX

概要: このチュートリアルでは、React JSXと、ReactアプリケーションでJSX要素を適切に記述する方法について学びます。

React JSX入門

JSXはJavaScript XMLの略です。

JSXは、JavaScript内でHTMLのようなコードを直接記述できるようにするJavaScriptの構文拡張機能を提供します。

JSXは、JavaScriptの強力さとHTMLのシンプルさを組み合わせることで、Reactアプリケーションでユーザーインターフェースを構築するプロセスを簡素化する表現力豊かな構文を提供します。

Webブラウザに応答を返す前に、ReactはBabelを使用してJSXをネイティブなJavaScriptコードに変換します。

有効なJSXを返す

JSXの1行を返したい場合は、JSXブロックの開始タグをreturnステートメントと同じ行に記述できます。例：

const App = () => {
  return <h1>Hello, React!</h1>;
};Code language: JavaScript (javascript)

また、括弧()のセットを使用してJSXをラップできます。この場合、開始括弧(はreturnステートメントと同じ行にある必要があります

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};Code language: JavaScript (javascript)

開始括弧をreturnステートメントと同じ行に記述しない場合、JavaScriptは関数がundefinedを返すと想定することに注意してください。

複数のJSX要素を返す場合は、divなどの包含要素でラップする必要があります。例：

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>I love React.</p>
    </div>
  );
};Code language: JavaScript (javascript)

この例では、h1要素とp要素をラップするためにdivを使用しています。

これらの要素を包含要素でラップしないと、コンパイルエラーが発生します。たとえば、次のコードはエラーになります

const App = () => {
  return (
      <h1>Hello, React!</h1>
      <p>I love React.</p>
  );
};Code language: JavaScript (javascript)

CSSルールと競合する可能性があるため、包含要素を使用しない場合は、空のJSX要素でラップできます

const App = () => {
  return (
    <>
      <h1>Hello, React!</h1>
      <p>I love React.</p>
    </>
  );
};Code language: JavaScript (javascript)

空の角括弧はReactフラグメントと呼ばれます。

JSX要素を記述する

JSXはHTMLから構文を継承するため、HTMLのようにJSXを記述できます。例：

<p>This is a message</p>Code language: JavaScript (javascript)

<input>要素など、一部のHTML要素は自己終了します。この場合、開始タグの最後にスラッシュ（/）を追加する必要があります

<input type="text" />Code language: JavaScript (javascript)

JSXで変数を使用する

JSXでJavaScript変数を表示するには、中括弧でラップします。例：

const App = () => {
  const name = 'John';
  return <p>Hello, {name}!</p>;
};Code language: JavaScript (javascript)

この例では、変数nameを宣言し、その値を'John'に初期化します。さらに、JSX内でname変数を使用します。

コンポーネントは次のHTMLを出力します

<p>Hello, John!</p>Code language: JavaScript (javascript)

JSXは文字列と数値を表示できます。例：

const App = () => {
  const name = 'John';
  const age = 25;
  return (
    <p>
      Hi, I'm {name}. I'm {age} years old.
    </p>
  );
};Code language: JavaScript (javascript)

出力

Hi, I'm John. I'm 25 years old.Code language: JavaScript (javascript)

ただし、JSXはブール値（true、false）、null、undefinedを表示できません

const App = () => {
  const name = 'John';
  const age = 25;
  const active = true;
  let jobTitle = null;

  return (
    <ul>
      <li>Name: {name}</li>
      <li>Age: {age}</li>
      <li>Status: {active}</li>
      <li>Job Title: {jobTitle}</li>
    </ul>
  );
};Code language: JavaScript (javascript)

出力

  • 名前：ジョン
  • 年齢：25
  • ステータス
  • 役職

JavaScript配列を表示すると、JSXはすべての要素を単一の文字列に連結します

const App = () => {
  const name = 'John';
  const skills = ['JS', 'React', 'Node.js'];

  return (
    <ul>
      <li>Name: {name}</li>
      <li>Skills: {skills}</li>
    </ul>
  );
};Code language: JavaScript (javascript)

出力

  • 名前：ジョン
  • スキル：JSReactNode.js

この例では、JSXはJS、React、およびNode.jsを単一の文字列JSReactNode.jsに連結して表示します。

JSXはJavaScriptオブジェクトを表示できないことにも注意することが重要です。そうしようとすると、Webブラウザでエラーが発生します。例：

const App = () => {
  const person = {
    name: 'John',
    age: 25,
  };
  return <p>{person}</p>;
};Code language: JavaScript (javascript)

エラー

Uncaught Error: Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.Code language: JavaScript (javascript)

JSXで式を使用する

JSXで式を使用するには、中括弧のペアで囲みます。例：

const App = () => {
  const name = 'John';
  const age = 25;
  const active = true;

  return (
    <ul>
      <li>Name: {name}</li>
      <li>Age: {age}</li>
      <li>Status: {active ? 'Active' : 'Inactive'}</li>
    </ul>
  );
};Code language: JavaScript (javascript)

出力

  • 名前：ジョン
  • 年齢：25
  • ステータス：アクティブ

この例では、三項演算子（?:）を使用して、active変数の値に基づいて異なる文字列を返します

<li>Status: {active ? 'Active' : 'Inactive'}</li>Code language: JavaScript (javascript)

要素プロパティの追加

Reactでは、JSX要素の属性はpropsと呼ばれます。

JSXでは、任意のプロパティをJSX要素に割り当てることができます。ただし、プロパティが文字列を受け入れる場合は、二重引用符で囲む必要があります。例：

const App = () => {
  return (
    <form>
      <div>
        <label for="event">Event Name: </label>
        <input name="event" type="text" />
      </div>
      <div>
        <label for="event">Event Date: </label>
        <input name="email" type="date" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
};Code language: JavaScript (javascript)

出力

JavaScript変数をプロパティに割り当てる場合は、二重引用符を使用せず、中括弧を使用するだけです

const App = () => {
  const type = 'range';
  return (
    <div>
      <label for="zoom">Zoom Level:</label>
      <input id="zoom" name="zoom" type={type} min="0" max="100" />
    </div>
  );
};Code language: JavaScript (javascript)

出力

CSSの適用

JavaScriptでは、classはクラスを定義するキーワードです。したがって、JSX要素のプロパティとしてclassキーワードを使用することはできません。代わりに、classNameを使用します。例：

const App = () => {
  return (
    <button className="btn" type="button">
      OK
    </button>
  );
};Code language: JavaScript (javascript)

出力

JSX要素にインラインスタイルを追加するには、CSSプロパティと同じプロパティを持つJavaScriptオブジェクトを定義します。

ただし、margin-top、background-colorなど、名前にダッシュが含まれるプロパティがある場合は、ダッシュ（-）を削除し、次の文字を大文字にする必要があります。例：

const App = () => {
  return (
    <button
      type="button"
      style={{
        padding: '0.25rem 0.75rem',
        backgroundColor: '#F9DC5C',
        border: 'None',
        display: 'inline-block',
        minWidth: '80px',
        cursor: 'pointer',
      }}
    >
      OK
    </button>
  );
};Code language: JavaScript (javascript)

出力

styleプロパティの値に2組の中括弧があることに注意してください

  • 外側のペアは、JSXでJavaScriptを使用しようとしていることを示します。
  • 内側のペアはJavaScriptオブジェクトを示します。

次のコンポーネントは同じボタンを表示しますが、JavaScriptオブジェクトを保持する変数としてstyleプロパティの値を使用します

const App = () => {
  const btnStyle = {
    padding: '0.25rem 0.75rem',
    backgroundColor: '#F9DC5C',
    border: 'None',
    display: 'inline-block',
    minWidth: '80px',
    cursor: 'pointer',
  };
  return (
    <button type="button" style={btnStyle}>
      OK
    </button>
  );
};Code language: JavaScript (javascript)

同様に、forはJavaScriptのキーワードであるため、<label>要素のプロパティとして使用することはできません

<label for="email">
    <input type="email" id="email" />
</label>Code language: HTML, XML (xml)

代わりに、htmlForプロパティを使用します

<label htmlFor="email">
    <input type="email" id="email" />
</label>Code language: HTML, XML (xml)

概要

  • JSXはJavaScript XMLの略です
  • JSXは、JavaScriptコード内でHTMLのようなコードを直接記述できるようにするJavaScriptの構文拡張機能です。
  • JSXは、ReactアプリケーションのUI構築を高速化するのに役立ちます。
このチュートリアルは役に立ちましたか？
React Hello World
前へ
React Hello World
次へ
React Props
React Props