環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0
Reactで画面要素を関数で出力する理由
Reactはコンポーネントベースのアーキテクチャを推奨しているから
では、なぜコンポーネントベースのアーキテクチャを推奨しているのか??
- 再利用性の向上
- 状態やプロパティに応じた動的レンダリング
- 宣言的UIの実現
- コンポーネントの分割によるモジュール化
HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
</body>
</html>
JavaScript
関数を使用しない場合
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<h1>こんにちは!</h1>
</StrictMode>
);
関数を使用する場合
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
+const App = () => {
+ return (
+ <>
+ <h1>こんにちは!</h1>
+ </>
+ );
+};
root.render(
<StrictMode>
+ <App />
</StrictMode>
);