【初心者】Reactのコンポーネントとは

コンポーネントとは

アプリのための再利用可能な UI 要素。

例

React では、マークアップと CSS と JavaScript を、独自の “コンポーネント” と呼ばれる、再利用可能な UI 要素にまとめることができる。

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

上記にある目次のためのコードを、TableOfContents と呼ばれるコンポーネントにすることができるのだ。

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents> <!-TableOfContentsコンポーネントを実装した–>
    <DocumentationText />
  </PageContent>
</PageLayout>

既に書いたコンポーネントを再利用することで構築できるようになり、開発速度がアップする。

参考