5
チャプター5
コンポーネントによるUI構築
Reactのコアコンセプト
Reactアプリケーションの構築を開始するために、Reactの3つのコアコンセプトを理解しておく必要があります。これらは次のとおりです。
- コンポーネント
- Props
- State
次のチャプターでは、これらのコンセプトについて説明し、学習を続けるためのリソースを提供します。これらのコンセプトに慣れた後、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 />);追加リソース
これは役に立ちましたか？