コンポーネントの基礎

コンポーネントは、再利用可能なコードの断片であり、UI(ユーザーインターフェース：見た目)の特定の部分です。HTML、CSS、JavaScriptの組み合わせで記述され、再利用可能なコードのブロックとして機能します。そして、HTML要素を返します。

コンポーネントは、アプリケーションのロジックとUIを分離するのに役立ち、アプリケーションの開発と保守を容易にします。

コンポーネントの2つの作り方

クラスベースのコンポーネントの例

class HelloWorld extends React.Component {
	render() {
		return (
			<div>
				Hello, World!
			</div>
		);
	}
}

関数ベースのコンポーネントの例

const HelloWorld = () => {
	return (
		<div>
			Hello, World!
		</div>
	);
};

コンポーネントは再利用できる

作ったコンポーネントは再利用可能で、組み合わせて複雑なユーザーインターフェイスを作成できます。また、他の人が作ったコンポーネントを導入して使うこともできます。

1度作ったコンポーネントを使う例

import React from "react";
import ReactDOM from "react-dom";

const Button = () => {
	return (
		<button onClick={() => alert("ボタンが押されました")}>ボタン</button>
	);
};

const App = () => {
	return (
		<div>
			<Button />
			<Button />
			<Button />
			<Button />
			<Button />
		</div>
	);
};

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

コンポーネントを再利用しないと面倒になる

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
	return (
		<div>
			<button onClick={() => alert("ボタンが押されました")}>ボタン</button>
			<button onClick={() => alert("ボタンが押されました")}>ボタン</button>
			<button onClick={() => alert("ボタンが押されました")}>ボタン</button>
			<button onClick={() => alert("ボタンが押されました")}>ボタン</button>
			<button onClick={() => alert("ボタンが押されました")}>ボタン</button>
		</div>
	);
};

ReactDOM.render(
	<App />,
	document.getElementById('root')
);