1. Reactの新規プロジェクトの立ち上げ
 2. コンポーネントのプロパティ(props)とステート(state) ←今ここ
3. Class Components と Function Components
4. 条件分岐 (if) と繰り返し (loop)
5. フォームと親子間のデータのやり取り
 6. コンポーネントのライフサイクル
7. スタイル (準備中)
8. Higher-Order Component (準備中)
9. Portalを利用したモーダル (準備中)
10. refによるエレメントの取得 (準備中)
11. Contextを利用したテーマの変更 (準備中)

今回の学習内容

今回は、

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

をやっていきます。

この記事のソースコード

ソースコードはGitHubで公開しています。

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

YouTubeでの解説動画

YouTubeでも解説しています。
動画で確認したい方はこちらもどうぞ。
【YouTube動画】未経験から1週間でをマスターするReact入門 #02. コンポーネントのプロパティ(props)とステート(state)

コンポーネントの作成

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

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

src/List.js

export const List = () => {
  return (
    <div>リストです</div>
  )
}

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

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

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

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

src/App.js

import { List } from "./List"; // 追加

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

export default App;

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

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

とても簡単ですね。

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

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

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

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 を修正します。

src/List.js

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

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

function ComponentFunc(props) {}

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

const title = props.title;

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

コミット

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

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

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

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

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

stateを使ってみる

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

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 を変更する関数を返り値で返します。

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

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

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

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

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

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 関数を呼ぶボタンを追加しました。

onClick={changeDescription}

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

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

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

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

ここまでのコミット

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

今日やったこと

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

コンポーネントの作り方

export const ComponentFunc = () => {
  return <div></div>
}

親コンポーネントから子コンポーネントへのプロパティの渡し方

<List title="値">

子コンポーネントからプロパティの参照方法

const ComponentFunc = (props) => {}

stateによるコンポーネントの状態の変更

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

目次

今回の学習内容

この記事のソースコード

YouTubeでの解説動画

コンポーネントの作成

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

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

コミット

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

stateを使ってみる

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

ここまでのコミット

今日やったこと

コンポーネントの作り方

親コンポーネントから子コンポーネントへのプロパティの渡し方

子コンポーネントからプロパティの参照方法

stateによるコンポーネントの状態の変更

おわりに

次の記事