🖥
#React を #Codepen で始める ( フロント苦手意識の克服、あるいは愚直な試行錯誤の赤裸々な公開 )
ぐぐったらだいたい出てくるっしょ？
これこれ。
HTML CSS JS の3セット
Js 以外は大したこと書かれていなさそうなのでしまっとく
js
class Button extends React.Component {
constructor() {
super();
this.state = {
count: 1,
};
}
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
}
React.render(<Button />, document.getElementById('app'));
Fork すると自分用のURLが割り振られて好きに使えるよ！
ボタンを押すたびカウントが増えるよね
ぽちぽち推して6まで増やしたぜ！
なんか construction が初期値とかを決めてそうだな！
count 1 って書いてあるし。
updateCount っていうメソッドがあるぞ！
メソッドって呼ぶの？知らんけど。
prevState.count に対して '+1` しているな！
render って書いてあるのがボタン表示部分だよね！
変数的なものはブレースで囲ってあるみたいだね
{this.state.count}
ってことはもちろん並べても書けるよね！
並んで increment するようになったよ！
Codepenで Save -> Run しておこう
こっちも増やしたら 3ずつ増えるようにならないかなー！
ならなかったけど今までどおり動いてるみたいだよ。謎いよね。
で、この最後の render ってなんなの？
HTMLの閉じみたいに見えるけど。
あと HTML 側の id に何かを全部渡してるような気もするけれど？
この名前変えたら、ボタンも表示されなくなるみたいだな！
もしかしてこの一番上のクラス名？
たしかに両方の名前を、てきとうに変えてみると、元通りに動くな！
HTML部品的にクラス名さえ記述するのかー！ 確かに Button の際しの文字が大文字だよね。
噂通りですね react さん！
ということで
一瞬触るだけでずいぶん苦手意識が克服できるよね！
フロント開発にまよったらとりあえずググってCodepenでも触ってみると良いよね！
Original by Github issue
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2019-04-21
Discussion