# 初めての React Component

[参考コード](https://codesandbox.io/s/846w9l4vw2)

## 一般的に Component とは

![](https://257536070-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9tnw93pnZdkHLUb_HG%2F-LAHHQ_21ecke8cKuOZu%2F-LAHHYzn7GRbs4KzfROw%2Freact-component.001.png?generation=1523946510939023\&alt=media)

Component とは、input (入力) を受け取って、それを元に Operation (なんらかの操作) をした結果を、Output (出力) する部品のこと。

これを組み合わせて、より大きなアプリケーションを構築する。

## React における Component

React におけるコンポーネントは、基本的には React Element を返す単なる Function です。ただし、ファンクションとは異なるのは、名前の冒頭が大文字でなければいけないことと、使用する際には `<Component />` とカスタムタグのように記述することです。

```javascript
// 単なる関数
const returnReactElement = () => {
  return <h2>name</h2>;
};

// 関数なので以下のように実行して使う
// returnReactElement()

// React Component にするには、
// 全く同じ内容のまま、冒頭を大文字にする
const ReturnReactElement = props => {
  return (
    <h2>
      {props.name} {props.music}
    </h2>
  );
};

// Component なので以下のようにタグを記述して使う
// 閉じタグを忘れないように
// <ReturnReactElement />
```

## Input を受けつける

ただし、単に React Element を返すだけでは、広義の Component とはいえませんし、あまり便利ではありません。では Input を受け取って、それを元に Output する Component を作成してみましょう。

Component に入力される値は、`<ReturnReactElement name="nakanishi" music="jazz" />` のように、attribute と同じ形で渡します。

```javascript
render(
  <ReturnReactElement name="nakanishi" music="jazz" />,
  document.getElementById('root')
);
```

受け取った値は、コンポーネントの引数にオブジェクトとして入ってきます。

```javascript
props = {
  name: 'nakanishi',
  music: 'jazz'
};
```

受け取った値は `props.name` のようにオブジェクトにアクセスして使用します。

```javascript
import React from 'react'
import { render } from 'react-dom'

const ReturnReactElement = props => {
  return (
    <h2>
      {props.name} {props.music}
    </h2>
  );
};

render(
  <ReturnReactElement name="nakanishi" music="jazz" />,
  document.getElementById('root')
)
```

### `({})` タイプの引数の受け取り方

また、`({name, music})` として引数を受け取ると、直接、`name` と `music` にオブジェクトが展開して代入されます。

```javascript
name = 'nakanishi'
music = 'jazz'
```

```javascript
const ReturnReactElement = ({ name, music }) => {
  return (
    <h2>
      {name} {music}
    </h2>
  );
};
```

## コード全体像

```javascript
import React from "react";
import { render } from "react-dom";

// 関数
const returnReactElement = () => {
  return <h2>name</h2>;
};

// React Component にするには、
// 全く同じ内容のまま、冒頭を大文字にする
const ReturnReactElement = props => {
  return (
    <h2>
      {props.name} {props.music}
    </h2>
  );
};

const ReturnReactElement2 = ({ name, music }) => {
  return (
    <h2>
      {name} {music}
    </h2>
  );
};

render(
  <ReturnReactElement2 name="nakanishi" music="jazz" />,
  document.getElementById("root")
);
```
