【初学者向け】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