JSX を使ったマークアップの書き方：React ドキュメント入門

はじめに

React ドキュメントへようこそ！この実験では、JSX を使ってマークアップを書く方法を紹介します。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 84%です。学習者から 100% の好評価を得ています。

JSX を使ったマークアップの書き方

VM には既に React プロジェクトが用意されています。一般的には、App.js にコードを追加するだけです。

依存関係をインストールするには、次のコマンドを使用してください。

npm i

上で見たマークアップ構文は JSX と呼ばれます。必須ではありませんが、ほとんどの React プロジェクトでは便利さから JSX を使用しています。

JSX は HTML よりも厳格です。<br /> のようなタグを閉じる必要があります。また、コンポーネントは複数の JSX タグを返すこともできません。<h1>...</h1> や空の <>...</> ラッパーのような共有の親要素にラップする必要があります。

// App.js
export default function Profile() {
  return (
    <>
      <h1>Hedy Lamarr</h1>
    </>
  );
}

大量の HTML を JSX に移植する必要がある場合は、オンラインコンバータを使用できます。

プロジェクトを実行するには、次のコマンドを使用してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

npm start

データの表示

JSX を使うと、マークアップを JavaScript に埋め込むことができます。波括弧を使うと、JavaScript に戻ることができるので、コード内の変数を埋め込んでユーザーに表示することができます。たとえば、これは user.name を表示します。

// App.js
const user = {
  name: "Hedy Lamarr"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
    </>
  );
}

また、JSX 属性からも JavaScript に「脱出」できますが、クォートの代わりに波括弧を使う必要があります。たとえば、className="avatar" は CSS クラスとして "avatar" 文字列を渡しますが、src={user.imageUrl} は JavaScript の user.imageUrl 変数の値を読み取り、その値を src 属性として渡します。

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img className="avatar" src={user.imageUrl} />
    </>
  );
}

スタイルの追加

React では、className を使って CSS クラスを指定します。これは HTML の class 属性と同じように機能します。

<img className="avatar" />

その後、別の CSS ファイルに CSS ルールを記述します。

/* App.css */
.avatar {
  border-radius: 50%;
}

React では、CSS ファイルを追加する方法を規定していません。最も簡単な場合、HTML に <link> タグを追加します。ビルドツールやフレームワークを使用する場合は、そのドキュメントを参照して、プロジェクトに CSS ファイルを追加する方法を学んでください。

// App.js
import "./App.css";

JSX の波括弧の中には、より複雑な式を記述することもできます。たとえば、文字列連結です。

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
  imageSize: 90
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

上の例では、style={{}} は特殊な構文ではなく、style={ } の JSX の波括弧の中の通常の {} オブジェクトです。スタイルが JavaScript 変数に依存する場合、style 属性を使用できます。

まとめ

おめでとうございます！JSX を使ったマークアップの実験を完了しました。技術力を向上させるために、LabEx でさらに実験を行って練習してください。