【初学者向け】Reactについて
React: UI development framework
ウェブアプリケーションのUIを開発するにあたっては，TypeScriptやJavaScript(JS)で直接コーディングするのは大変なので，Reactや，Vue，Angularなどのライブラリが主に利用される[1]．
ここでは，React に関して少し踏み込んでみておこう[2]．
React: https://ja.react.dev/learn
React basics
React の特徴として，コンポーネントによる記述がある．
Components
React では，コンポーネント（すでにUIが実装された部品）を組み合わせてアプリ開発を行なっていく．
Reactコードにおけるコンポーネントは，マークアップを返すJavaScript関数のことを指します．
ファイル拡張子は，Reactコードが XML (Extensible Markup Language, 拡張マークアップ言語)であることを明示するため， .tsx(TypeScript)，.jsx(JavaScript) が与えられます．
Reactのコンポーネントは大文字で定義し，XML/HTML のタグは小文字を持つことに注意しましょう．
MyButton というコンポーネントを定義してみます：
function MyButton(){
return (
<button>Click this!</button>
);
}
MyButtonをMyAppコンポーネント内にネスト（入れ子）してみます：
export default function MyApp() {
return(
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
export defaultはファイル内のメインコンポーネントを指定している．
JavaScript構文に関しては，リファレンス，MDNや，javascript.infoを随時参照しよう．
Responce to events： Event hundler function
コンポーネント中にイベントハンドラ関数を宣言すると，イベント（ここではボタンのクリック）に応答する：
function MyButton(){
function handleClick() {
alert(`You clicked me!`)
}
return (
<button onClick={handleClick}>
Click me!
</button>
);
}
これで，ユーザーがクリックした際に，イベントハンドラ関数 handleClick が呼び出される．
より詳細は，また別途ノートにするとして，ここでは以上のコンポーネントを用いた記述によって，XML/HTMLライクな構文が使えて，JavaScript/TypeScriptで実現しようとすると煩雑になってしまうコードが簡素かつ簡略に実装できることだけを抑えておきます．
Discussion