5
チャプター5
コンポーネントを使った UI 構築
React のコアコンセプト
React アプリケーションの構築を始めるために、理解しておく必要がある 3 つのコアコンセプトがあります。それは、
- コンポーネント
- Props
- 状態
次のチャプターでは、これらのコンセプトについて説明し、さらに学習するためのリソースを提供します。 これらのコンセプトを理解した後、Next.js のインストール方法と、サーバーコンポーネントやクライアントコンポーネントなどの新しい React 機能の使用方法を紹介します。
コンポーネント
ユーザーインターフェースは、**コンポーネント**と呼ばれる小さな構成要素に分解できます。
コンポーネントを使用すると、自己完結型で再利用可能なコードスニペットを作成できます。コンポーネントを**レゴブロック**と考えてみてください。個々のブロックを組み合わせて、より大きな構造物を形成できます。UI の一部を更新する必要がある場合は、特定のコンポーネントまたはブロックを更新できます。
このモジュール性により、アプリケーションの他の部分に触れることなくコンポーネントを追加、更新、削除できるため、コードの保守性が向上します。
React コンポーネントの優れた点は、JavaScript であるということです。JavaScript の観点から、React コンポーネントを作成する方法を見てみましょう。
コンポーネントの作成
React では、コンポーネントは**関数**です。 `script` タグ内に、`header` という新しい関数を作成します。
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
}
const root = ReactDOM.createRoot(app);
root.render(<h1>Develop. Preview. Ship.</h1>);
</script>コンポーネントは**UI 要素を返す**関数です。関数の return 文の中に、JSX を記述できます。
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
return (<h1>Develop. Preview. Ship.</h1>)
}
const root = ReactDOM.createRoot(app);
root.render(<h1>Develop. Preview. Ship.</h1>);
</script>このコンポーネントを DOM にレンダリングするには、`root.render()` メソッドの最初の引数として渡します。
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
return (<h1>Develop. Preview. Ship.</h1>)
}
const root = ReactDOM.createRoot(app);
root.render(header);
</script>しかし、ちょっと待ってください。上記のコードをブラウザで実行しようとすると、エラーが発生します。これを動作させるには、2 つのことを行う必要があります。
まず、React コンポーネントは、プレーン HTML や JavaScript と区別するために、大文字で始める必要があります。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
// Capitalize the React Component
root.render(Header);次に、React コンポーネントは、通常の HTML タグと同じように、山かっこ `<>` を使用して使用します。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);ブラウザでコードをもう一度実行しようとすると、変更が表示されます。
コンポーネントのネスト
アプリケーションには、通常、単一のコンポーネントよりも多くのコンテンツが含まれています。通常の HTML 要素と同様に、React コンポーネントを互いに**ネスト**できます。
例では、`HomePage` という新しいコンポーネントを作成します。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return <div></div>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);次に、新しい `<HomePage>` コンポーネント内に `<Header>` コンポーネントをネストします。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return (
<div>
{/* Nesting the Header component */}
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);コンポーネントツリー
このように React コンポーネントをネストし続けることで、コンポーネントツリーを形成できます。
たとえば、トップレベルの `HomePage` コンポーネントは、`Header`、`Article`、`Footer` コンポーネントを保持できます。 また、これらの各コンポーネントは、それぞれ独自の子コンポーネントを持つことができます。たとえば、`Header` コンポーネントには、`Logo`、`Title`、`Navigation` コンポーネントを含めることができます。
このモジュール形式により、アプリ内のさまざまな場所でコンポーネントを再利用できます。
プロジェクトでは、`<HomePage>` がトップレベルのコンポーネントになったため、`root.render()` メソッドに渡すことができます。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return (
<div>
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);追加リソース
これは役に立ちましたか？