React入門 未経験から1週間でReactをマスターする #02. コンポーネントのプロパティ(props)とステート(state)

# 目次

[1. Reactの新規プロジェクトの立ち上げ](https://qiita.com/yassun-youtube/items/2ae26050efd2133c2286)
[2. コンポーネントのプロパティ(props)とステート(state)](https://qiita.com/yassun-youtube/items/ca91e2f9905fb8ca62d0) <font color="Red">←今ここ</font>
[3. Class Components と Function Components](https://qiita.com/yassun-youtube/items/2ed8601e4fa477726705)
[4. 条件分岐 (if) と繰り返し (loop)](https://qiita.com/yassun-youtube/items/9474b1681958e2ab0f25)
[5. フォームと親子間のデータのやり取り](https://qiita.com/yassun-youtube/items/545e7d9c98fe919dc394)
[6. コンポーネントのライフサイクル](https://qiita.com/yassun-youtube/items/372464404ae6855e6d78)
7. スタイル (準備中)
8. Higher-Order Component (準備中)
9. Portalを利用したモーダル (準備中)
10. refによるエレメントの取得 (準備中)
11. Contextを利用したテーマの変更 (準備中)

# 今回の学習内容

今回は、

- コンポーネントの作成
- コンポーネント内で他のコンポーネントを利用する方法
- propsとstate
- コンポーネント内のクリックイベントで画面を変更する

をやっていきます。

# この記事のソースコード
ソースコードはGitHubで公開しています。

https://github.com/yassun-youtube/ReactTutorial

本記事の内容は下記コミットになります。

![スクリーンショット 2020-11-10 22.45.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/96ba7e46-f238-2922-357f-6b3fe2605f82.png)

# YouTubeでの解説動画
YouTubeでも解説しています。
動画で確認したい方はこちらもどうぞ。
[【YouTube動画】 未経験から1週間でをマスターするReact入門 #02. コンポーネントのプロパティ(props)とステート(state)](https://youtu.be/8KV1CBcB2Yg)
[![【YouTube動画】 未経験から1週間でをマスターするReact入門](https://img.youtube.com/vi/8KV1CBcB2Yg/0.jpg)](https://youtu.be/8KV1CBcB2Yg)

# コンポーネントの作成

まずは新しいコンポーネントを作成していきます。

ただ `div` 要素が一つだけあるすごく簡単なコンポーネントを `src/List.js` に作ります。

```jsx:src/List.js
export const List = () => {
  return (
    <div>リストです</div>
  )
}
```

すごく簡単ですね。
Reactはとてもシンプルにコンポーネントを作成できます。

内容としては、 `List` という関数（変数）を定義してそれを `export` しているだけです。

# コンポーネント内で他のコンポーネントを利用する

では、今作成したコンポーネントを `App.js` から呼び出してみましょう。


```jsx:src/App.js
import { List } from "./List"; // 追加

function App() {
  return (
    <div>
      ゼロから始めるReact入門
      <List/> { /* 追加 */ }
    </div>
  );
}

export default App;
```

このように簡単にコンポーネントを利用できます。

Webページは下記のようになります。

![スクリーンショット 2020-10-31 14.15.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/d13d4436-dd69-9759-6bde-822c6466baac.png)

とても簡単ですね。

## コンポーネントにタイトルを渡す

今は単純に `App.js` から `List.js` を呼び出しただけでした。
次に、 `App.js` から `List.js` を呼び出すときにタイトルを渡してみましょう。

まず、 `App.js` を修正します。

```jsx:src/App.js
import { List } from "./List";

function App() {
  return (
    <div>
      ゼロから始めるReact入門
      <List title="取り扱い言語一覧"/>  // 変更
    </div>
  );
}

export default App;
```

`List` に `title` 属性でタイトルを渡すようにしました。
この時点ではまだ `List.js` 側にそれを受け取る処理がないのでWebページに変更はありません。


次に、 `List.js` を修正します。

```jsx:src/List.js
export const List = ({ title }) => { // 変更
  return (
    <div>
      <h4>{ title }</h4> // 追加
      <div>リストです</div>
    </div>
  )
}
```

先程渡した `title` 属性を `List.js` が処理できるようにしました。
Reactのコンポーネントでは、関数の最初の引数がHTMLでいう属性値を受け取るようになります。
これを `プロパティ` と呼びます。よく `props` と表現されることが多いです。

```jsx
function ComponentFunc(props) {}
```

このようにコンポーネントの最初の引数は `props` になっていて、それが `Object` の形で渡されるので、 `({ title })` として `title` 属性を取れたことになります。
JavaScriptに詳しくない人に説明すると、

```js
const title = props.title;
```

と同じことをしたので `title` に値が入ったわけですね。

![スクリーンショット 2020-10-31 14.30.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/e2d62853-7b76-3985-0484-4173cf0f6fdd.png)

## コミット
ここまでのコミットはこちらです。

https://github.com/yassun-youtube/ReactTutorial/commit/00f8aed2c3658104f4e602e76a2356cac159b230

# プロパティとステート(propsとstate)

先程利用した `props` は親のコンポーネントから子供のコンポーネントを呼び出す時に使うものです。
親から渡されるもので、読み込み専用です。

先程の `title` のように利用します。

`props` とは別に、 Reactには`state` という概念があります。
これはコンポーネントの状態を表します。
`state` は `props` とは違って変更が可能です。
例えばコンポーネントは、状態によって表示を変更したいということがあります。
そのような場合に `state` を利用します。

# stateを使ってみる

`state` を学習するために「ボタンを押すと画面表示が変わる」コンポーネントを作ってみます。

```jsx:src/App.js
import { useState } from 'react'; // 追加
import { List } from "./List";

function App() {
  const [description, setDescription] = useState('クリック前の表示'); // 追加
  
  return (
    <div>
      { description } { /* 変更 */ }
      <List title="取り扱い言語一覧"/>
    </div>
  );
}

export default App;
```

Reactには `useState` という関数が用意されていてそれを利用することで `state` を定義できます。

今回は下記で `description` という `state` を定義しています。 `useState` は初期値を引数に持ち、
`state` と `state` を変更する関数を返り値で返します。

```jsx
  const [description, setDescription] = useState('クリック前の表示'); // 追加
```

この部分で `description` には 初期値として `クリック前の表示` という文字列が入ります。

コンポーネント中にこの `description` を表示するようにしたので、画面は下記のように変わりました。


![スクリーンショット 2020-10-31 21.47.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/34763e8d-0f64-313a-7907-dda3a9a94510.png)


## クリックして画面表示が変わるようにする。

今度は画面をクリックすると先程定義した `state` が変わるようにしてみます。


```jsx:src/App.js
import { useState } from 'react';
import { List } from "./List";

function App() {
  const [description, setDescription] = useState('クリック前の表示');

  const changeDescription = () => { // 追加
    setDescription('クリック後の表示です。')
  }

  return (
    <div>
      { description }
      <List title="取り扱い言語一覧"/>
      <button onClick={changeDescription}>ボタン</button> // 追加
    </div>
  );
}

export default App;
```

`changeDescription` という関数を追加しました。
この関数は実行されると画面表示が変わります。

また、クリックされると `changeDescription` 関数を呼ぶボタンを追加しました。

```jsx
onClick={changeDescription}
```

Reactでは、クリックイベントは上記のように定義します。 `{}` 内は関数への参照を定義できます。

上記は、下記でも同じものになります。

```jsx
onClick={() => setDescription('クリック後の表示です') }
```

ボタンを押すと、Webページは下図のように表示されます。

![スクリーンショット 2020-10-31 21.55.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/e15047de-b332-dfd6-943d-e8762e514c7a.png)

## ここまでのコミット

ここまでのコミットは下記です。

https://github.com/yassun-youtube/ReactTutorial/commit/4a94041ae463129246d572dcbee1b3cd909d3b2f

# 今日やったこと

今日やったことをまとめます。

## コンポーネントの作り方
```jsx
export const ComponentFunc = () => {
  return <div></div>
}
```
## 親コンポーネントから子コンポーネントへのプロパティの渡し方
```jsx
<List title="値">
```

## 子コンポーネントからプロパティの参照方法
```jsx
const ComponentFunc = (props) => {}
```
## stateによるコンポーネントの状態の変更
```jsx
const [value, setValue] = useState('initial')
```

# おわりに

今日はコンポーネントの作成とプロパティ、ステートについて学びました。
まだよくわからない部分がありそうと思ったら、再度記事を読み返していただけると嬉しいです。

次回は、 Reactの `Function Components` と `Class Components` の書き方についてお話していきます。

# 次の記事

[React入門 未経験から1週間でReactをマスターする #03. Class ComponentsとFunction Componentsの書き方](https://qiita.com/yassun-youtube/items/2ed8601e4fa477726705)
https://qiita.com/yassun-youtube/items/2ed8601e4fa477726705