はじめに
HTML,CSS,Javascriptの基礎を学習済みの方向けのブログとなります。
今回は前回の入門編の続きとなっております。
今回のゴール
ボタンを押して1~6までの数字をランダムで表示すること。
開発環境
・macOSで作業します。
・開発ではVisual Studio Code（以下VSCode）を使用します。
ダウンロードがまだの方はこちらからをダウンロードしてください。
・Bootstrapを使用します。こちらにアクセスし、「BootstrapCDN」に記載されている
<link rel="stylesheet"〜〜〜〜〜〜
<script src="https://〜〜〜〜〜〜
の部分をコピーしておきます。
実装
前回使用した「sample01.html」を使用します。
1.数字をランダムで表示させるボタンを作成します。
コードの記述場所はdivタグのクラスcontainerの中に以下コードを書きます。
<div class="text-center"> <buttonclass="btn btn-primary"onclick="refresh()">PUSH</button> </div>
2.ボタンの上に余白を入れて見やすくするためにmarginを入れてあげます。
そうすると変更後のクラスcontainerは
<div class="container mt-5">
となります。
3.数字をランダムに表示させるために<script>の中を書き直します。
コードは以下となります。
<script>
let dom = document.getElementById('display')
let refresh = () => {
let num = Math.flor(Math.random() * 6) + 1;
let el = React.createElement(
'p', {}, num
)
ReactDOM.render(el, dom);
}
</script>
4.「sample01.html」をブラウザで開くとボタンと0が表示されていると思います。
ボタンを押すと1~6の数字がランダムで表示されます。
最後に
今回は短かったですが以上となります。
自分が書いたプログラムが動くと気持ち良いですよね！
次回はもう少し深くReactについて触れていきたいと思いますのでよろしくお願いします。
最近のコメント