React Component構造

Reactは、UI(またはView)を複数の構成要素(Component)に分割する.
1ページでは、Header、Footerなどの各セクションを独立したコンポーネントとして作成し、これらのコンポーネントを再アセンブリすることで画面を整理できます.
素子ベースはReactの大きな利点である.
構成部品のみをインポートし、複数の画面で繰り返し使用するコードを繰り返し入力する必要はありません.
また、アプリケーションが複雑になっても、機能ユニットとUIユニットでコードを管理し、コードのメンテナンスが容易になります.

import React, { Component } from "react";
import Header from "./component/Header";
import Footer from "./component/Footer";
import PostList from "./component/Contents";

class App extends Component {
  render() {
    return(
      <div>
        <Header />
        <Contents />
        <Footer />
      </div>
    )
  }
}

export default App;

たとえば、HeaderまたはFooter Contentsは、ルート構成部品を再結合して作成する構造です.