始めよう React（基礎編）！ Part 6 - 複数のコンポネントを使おう！

前回仕事の関係で大分空白があきましたが、
今週から落ち着くはずなので、引き続き頑張ります！！！:sunny:

前回では、create-react-appで初めてのコンポネントを作りました。

本編は複数のコンポネントを作成して、
更に実際のReact開発のイメージに近付きましょー！

#:one: 新しいコンポネントのファイルを作リます
こちらでは下記の3つ作ります！
①Header.js
②Content.js
③footer.js
![newJS.png](https://qiita-image-store.s3.amazonaws.com/0/293426/ce9fda24-271d-2162-1827-01438dea9141.png)

#:two: **`components`**のディレクトリを作る
作ったファイルを一つのディレクトリに入れます！
一般的にReactの開発では`/src/components`というファイルにまとめてます。
:arrow_down: :arrow_down: こんな感じになります。
![newComponents.png](https://qiita-image-store.s3.amazonaws.com/0/293426/0c04dcca-af32-26c0-ec31-5746bdd1f0df.png)

現在JSファイル内は何も入っていない状態ですが、
それぞれ前回でご紹介しましたコンポネントの内容を元に作っていきましょう！

#:three:各パーツの中身を作る
それぞれにReactのルールを従って、下記の様に書き込みましょうー
:asterisk:実はは`export default`の書き方は２パターンあります。
個人的に**パターン**:two:のほうが慣れてますが、
こちらで軽く紹介します！

パターン①↓↓

```javascript:/src/components/Header.js

// ↓↓react固定の書き方
import React, { Component } from 'react'

// パターン１
export default class Header extends Component {
    render() {
        return (
            <div>
                <h1>Header</h1>
                <p>I'm Header's Children</p> 
            </div>
        )
    }
}

```
パターン②↓↓

```javascript:/src/components/Content.js
import React, { Component } from 'react'

class Content extends Component {
    render() {
        return (
            <div>
                <h1>Content</h1>
                <p>僕はコンテンツの子だよ！</p>
            </div>
        )
    }
}
// パターン２
export default Content;
```
```javascript:/src/components/Footer.js
import React, { Component } from 'react'

class Footer extends Component {
    render() {
        return (
            <div>
                <h1>Footer</h1>
                <p>我是Footer的子項目喔！</p>
            </div>
        )
    }
}
export default Footer;
```
パーツが用意できましたので、
`/src/App.js`にimportしましよう！

#:four:作ったコンポネントをViewで出しましょう！
ここでは**`/src/App.js`**を開いて、
下記の通りに書き込みましょうー

```javascript:/src/App.js

import React, { Component } from 'react';
// ================変更箇所=================
import Header from './components/Header'
import Content from './components/Content'
import Footer from './components/Footer'
// ================変更箇所=================

class App extends Component {
  render() {
    return (
// ================変更箇所=================
      <div className="container">
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <Content />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <Footer />
          </div>
        </div>
      </div>
// ================変更箇所=================
    );
  }
}

export default App;
```
それでは`yarn start` or `npm start`で実行しましょ！
:arrow_down: :arrow_down: のように表示出来ます！
![view.png](https://qiita-image-store.s3.amazonaws.com/0/293426/6f2c675c-bd1d-c4da-30d6-6d34642a22c2.png)
これで3つのコンポネントを導入したReactで作った静的ページが出来ました！
基本的に**React**はこのように複数のコンポネントを組み込んでapplicationを作ります。


#:five:複階層のコンポネントを作って見よう！

上記にも書いた通りにReactの開発というのは、
多数のコンポネントを組合わせて作成して、一つWeb applicationを構成しています。
こちらで実際に作ってみましょう。

こちらのコンテンツ内に、
![content.png](https://qiita-image-store.s3.amazonaws.com/0/293426/0184b273-3bb0-61e1-4a73-394bc48ca587.png)　
多数のcomponentを入れて、ウェブアプリケーションをつくります。


:arrow_down: :arrow_down: このようなイメージでつくります！
**親コンポネント**の中に、**子コンポネント**を入れます。
![content.png](https://qiita-image-store.s3.amazonaws.com/0/293426/ca7e98ef-5d48-1cec-2df3-2902ad0fc769.png)


ファイル構成は:arrow_down::arrow_down:のようになります。
![content_dir.png](https://qiita-image-store.s3.amazonaws.com/0/293426/4d62ce7a-7bcc-3b22-fb27-b1aa316917ef.png)
**`/components/Content`**というディレクトリを作り、
その配下に先程の`Content.js`を移動し、更に`ContentChid.js`のファイルを作成します。
**親コンポネント**のディレクトリを作成して、その中でまとめて管理するイメージになります。

:one:**子コンポネント**`ContentChild.js`を作る
(名前はあくまでも例なので、自由に設定すること出来ます。)

```javascript:/src/components/ContentChild.js
import React, { Component } from 'react'

class ContentChild extends Component {
    render() {
        return (
            <p>僕はコンテンツの子だよ！</p>
        )
    }
}

export default ContentChild;

export default Content;
```
:two:**親コンポネント**`Content.js`に**子コンポネント**をimportする

```javascript:/src/components/Content.js
import React, { Component } from 'react'
// ↓↓ContentChildをimport
import ContentChild from './ContentChild'

class Content extends Component {
    render() {
        return (
            <div>
                <h1>Content</h1>
                // ↓↓ContentChildを使う
                <ContentChild />
            </div>
        )
    }
}

export default Content;
```
:three:`Content.js`を導入している`App.js`内のパスを変える

```javascript:/src/App.js
import React, { Component } from 'react';
import Header from './components/Header'
// ↓↓この部分のパスを変更して
import Content from './components/Content/Content'
import Footer from './components/Footer'

class App extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <Content />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <Footer />
          </div>
        </div>
      </div>
    );
  }
}

export default App;
```
これでViewの効果は同じですが、ソースで確認してみましょう。
こちらのReactの開発ツール(chrome拡張機能)を使えばReact内の関係がわかります。
(後程紹介します！)
![react_souce_tool.png](https://qiita-image-store.s3.amazonaws.com/0/293426/86496d2e-0826-42e6-2c65-f87140c9fe52.png)

これで複数のコンポネントを入れて、
Reactのページを作成出来ました！！


###React Developer Tools
React Developer Toolsを下記のURLからChromeに入れて、
ソースを開いてみましょう。
[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
![react-dev-tools.png](https://qiita-image-store.s3.amazonaws.com/0/293426/d54c3b5c-7e3c-c84c-9e6c-1a9647285795.png)
一番右の方にReactの項目が出ていると思います！
そこでReactの構成を確認できます！
こちらの方の記事はかなり詳しく書きこんだので、
興味がある方はぜひ！
[React Developer ToolsでReactで作ったページをデバッグする](https://qiita.com/pepo/items/beccd5f1e83ce2b93376)


#最後に
いかがでしょうか？
こちらはReactの静的ページの書き方になります！

次回はReactのコンポネント間のデータの渡し方(**props** **state**など)について書きます！
興味がある方は是非引続き読んで頂ければ幸いです！