まずは、基本となるコードを再掲。わかりやすいコードを基本とします。
コピペできるように貼り付けてます。
＜index.js＞
（index.cssはデフォルトです）
＜Grid.js＞
import './grid.css';
import GridContent from'./GridContent';
function Grid(){
return(
<div className="container" id="container">
<GridContent buttonText="1"></GridContent>
<GridContent buttonText="2"></GridContent>
<GridContent buttonText="3"></GridContent>
<GridContent buttonText="4"></GridContent>
<GridContent buttonText="5"></GridContent>
<GridContent buttonText="6"></GridContent>
<GridContent buttonText="7"></GridContent>
<GridContent buttonText="8"></GridContent>
<GridContent buttonText="9"></GridContent>
</div>
)
}
export default Grid;
＜grid.css＞
@charset "utf-8";
.container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
border:solid 1px #00FF00;
border-width:2px 2px 2px 2px;
}
.container div{
font-size: 40px;
height:100px;
border:solid 1px #FF0000;
border-width:2px 2px 2px 2px;
}
＜GridContent.js＞
import './gridcontent.css';
const GridContent = function(props){
return(
<>
<button>{props.buttonText}</button>
</>
)
}
export default GridContent;
＜gridcontent.css＞
@charset "utf-8";
button{
width:35em;
height:10em;
}
最終的には、
『STARTボタン⇒9⇒８⇒・・・・・・⇒１⇒STOPボタンまでのタイムを測定しリスト表示する』というのをしたいですが、
ここは一つづつやっていきます。
まずは、押したボタンの数字を表示させるようにします。その次に、
『9⇒８⇒・・・・・・⇒１』とボタンを押していく中で、押したボタンは次押せないようにします。（黒っぽい色に変化させてもいいかもしれません）
ただし、これを使って自分が作りたいものや追加したい機能を作成していけばよいと思いますので、無理にこのブログの方向に合わせなくても結構です。
その前に、すこし勉強してみます。
まずはカウンターを作りました。[未掲載]（公式リファレンスにも載ってます）
次はトグルボタンを作ります。
また、下記HPを読みました。
