JavaScriptのクラスを勉強して、React.Componentを使ってみよう
クラスの基本を勉強しよう
前回までの実装で気になったところは、値を変更するたびにrenderCounterApp関数を呼び出さなければいけないところです。そこを修正していきたいのですが、その前にjavascriptのクラスの概念を勉強しましょう。
クラスとは設計図のようなもので、ポイントは以下の通りです。
● classというキーワードで宣言
● newというキーワードで、クラスを使う。
● constructorはnewが使われた時に、実行される。
例として、Animalクラスを作成してみます。
class Animal {
constructor(name) {
this.name = name;
}
bark() {
console.log(this.name + "が吠えています");
}
}
animal = new Animal('動物');
animal.bark();
//動物が吠えています
クラスは継承することもできます。
● extendsキーワードを使って継承します。
● 継承することによって、親クラスのメソッドも実行できます。
class Dog extends Animal {
constructor(name) {
super(name)
}
}
dog = new Dog('犬');
dog.bark();
//犬が吠えています
Reactのクラスを使ってみよう
● React.Componentを継承したクラスを作ります。今回はCounterクラスです。
● 作成したクラスは、CounterというタグでReactDOMに渡すことができます。
src/app.jsを作成してみましょう。
class Counter extends React.Component {
handleAddOne() {
console.log('handleAddOne');
}
handleMinusOne() {
console.log('handleMinusOne');
}
handleReset() {
console.log('handleReset');
}
render() {
return (
<div>
<h1>Count: </h1>
<button onClick={this.handleAddOne}>+1</button>
<button onClick={this.handleMinusOne}>-1</button>
<button onClick={this.handleReset}>reset</button>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById('app'));
この状態だと、このように表示されるはずです。
この記事が気に入ったらサポートをしてみませんか?