今回の目標
画面に簡単なボタンを一つ追加して、ページの背景の色をランダムに変える簡単な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;
完成!

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