環境

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>
);

参考リンク