今回の目標

画面に簡単なボタンを一つ追加して、ページの背景の色をランダムに変える簡単なReactを作ってみましょう〜
ボタンを押すとボタンを持っているDIVの背景の色がランダムに変わる。

学ぶこと

コンポーネントを作れる。
stateを使ってみる。
イベント処理をしてみる。
propsを使ってみる。

Stateとは

コンポーネント内で使用できる状態を管理します。
値が変更されるとrenderが走って画面を更新してくれます。
HashでKey,Valueのデータを管理
更新する時は直接更新した場合、renderは走らないので画面が更新されないので使わないでください〜
this.state.key='test'

constructor(props) {
  super(props);
  this.state={
      key: 'value',
      ....
  };
}

Propsとは

コンポーネントの属性
親コンポーネントでPropsに設定した情報を子コンポーネントで使う

親コンポーネントでタイトルを入力

App.js

<ColorControl title="色を変えます！クリックしてください。"/>

子コンポーネントからタイトル取得

ColorControl.js

this.props.title

プロジェクト生成

`create-react-app`を使って

$ create-react-app backgroud-button
$ cd background-button

`components`フォルダと作ってColorControl生成してボタン追加

ColorControl.js

import React,{ Component } from 'react';

class ColorControl extends Component {
    constructor(props) {
        super(props);
        // reactではデータの保存にstateを使います。
        // App.jsで設定したtitleをこのように取得できます。(this.props.title)
        this.state = {
            title: this.props.title,
            color: [0,0,0]
        }
        // イベントハンドラーでthisを使いたい場合はBindする必要があるのでConstructorに定義する
        this.handleClickButton = this.handleClickButton.bind(this);
    }

    handleClickButton() {
        const new_color = [
            Math.floor((Math.random()*55) + 200),
            Math.floor((Math.random()*55) + 200),
            Math.floor((Math.random()*55) + 200)
        ];
        //stateを変更するときは必ずsetStateで変更、stateが変更されるとViewはレンダリングされる
        this.setState(
            {
                color: new_color
            }
        );
    }

    render() {
        const title = this.state.title; 
        const color = this.state.color;
        const style = {
            background: `rgb(${color[0]},${color[1]},${color[2]}`
        };

        return (
            <div style={style}>
                <button onClick={this.handleClickButton}>{title}</button>
            </div>
        )
    }
}

export default ColorControl;

`App.js`にColorControlコンポーネント追加

コンポーネントを別のフォルダに作ったのでimportする時はフォルダパスを追加
titleがpropsです。ColorControlでthis.props.titleでデータ取得できます。
ボタンのタイトルをこちらから設定しました。

App.js


import React from 'react';
import ColorControl from './components/ColorControl';

function App() {
  return (
    <div>
      <ColorControl title="色を変えます！クリックしてください。"/>
    </div>
  );
}

export default App;

完成！

次は子コンポネートのイベントを親のリスナーから受け取って処理してみます〜