FizzBuzz問題から始めるReact.js
はじめに
React.jsを始めるにあたって、FizzBuzz問題をしながら学んでいきます。
Reactとは
FizzBuzz問題とは
準備
手軽に触りたかったのでCodepenを使用しました。
上記設定に加えて、bootstrapも使用したかったので、codepenのPen Settings > CSSで以下を追加してください。
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
HTML
HTMLは中央に配置したいので以下で設定。
<div id="app" class="d-flex justify-content-center align-items-center"></div>
CSS
画面いっぱいで設定します。
#app {
height: 100vh;
width: 100%;
}
実際に書いてみる
まずはクラスの作成をして、表示用のテキストボックスとカウントアップ用のボタンを配置します。
class app extends React.Component {
render() {
return (
<div class="text-center">
<h1></h1>
<button
class="btn btn-lg btn-primary">
<i class="bi bi-plus"></i>
</button>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app'));
次にカウントの変数宣言とカウントアップ処理をするメソッドを作成します。
class app extends React.Component {
+ constructor() {
+ super();
+ this.state = {
+ count: 1,
+ }
+ }
render() {
return (
<div class="text-center">
- <h1></h1>
+ <h1>{this.state.count}</h1>
<button
+ onClick={this._countUp.bind(this)}
class="btn btn-lg btn-primary">
<i class="bi bi-plus"></i>
</button>
</div>
);
}
+ _countUp() {
+ this.setState({
+ count: ++this.state.count,
+ });
+ }
}
ReactDOM.render(<App />, document.querySelector('#app'));
FizzBuzz処理も加えていきます。
class app extends React.Component {
constructor() {
super();
this.state = {
count: 1,
+ text: "",
}
}
render() {
return (
<div class="text-center">
- <h1>{this.state.count}</h1>
+ <h1>{ this.state.text || this.state.count }</h1>
<button
onClick={this._countUp.bind(this)}
class="btn btn-lg btn-primary">
<i class="bi bi-plus"></i>
</button>
</div>
);
}
+ _fizzBuzz(num) {
+ let text = "";
+ if ( num % 3 === 0 ) {
+ text += "Fizz";
+ }
+ if ( num % 5 === 0 ) {
+ text += "Buzz";
+ }
+ this.setState({text: text});
+ }
_countUp() {
this.setState({
count: ++this.state.count,
});
+ this._fizzBuzz(this.state.count);
}
}
ReactDOM.render(<App />, document.querySelector('#app'));
これで基本的なFizzBuzz問題は完成です。
実行結果
最終的にカウントダウンとリセットのメソッドを追加して、完成したのがこちら。
おわりに
今回はReact.jsでFizzBuzz問題をやってみました。
他の言語だと動きそうなものなのにReactではうまくいかないということが多々あったので苦戦しました。
次回は実際に開発環境を整えていきたいと思います。
Author And Source
この問題について(FizzBuzz問題から始めるReact.js), 我々は、より多くの情報をここで見つけました https://zenn.dev/mmorichika/articles/mmorichika-react-fizzbuzz著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol