React
 

【React】初めての人でもわかる初級編

       

はじめに

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について触れていきたいと思いますのでよろしくお願いします。
 
  • このエントリーをはてなブックマークに追加