Reactは最初に読み込まれるJavaScriptだけ特殊な記述だが、それ以外は全コンポーネント共通です。

Reactのプロジェクトを作成する際は、だいたい以下のコマンドを使用することと思います。

npx create-react-app my-app

プロジェクトを作成すると、主に二つのフォルダが作成されます。
・public
・src

publicで重要なのは「index.html」

<div id="root"></div>

この要素にReactで作成したコンポーネントが描画されていきます。

そして、srcでまず重要なのは「index.js」「App.js」

index.js は、index.html で指定された要素に最初に読み込まれるファイルなので以下のように記述しましょう。

import ReactDom from "react-dom";
import { App } from "./App";
ReactDom.render(<App />, document.getElementById("root"));

ソースコードにもあるように、このときに読み込ませるのは「App.js」なのでApp.jsファイルは以下のように記述してあげましょう。

export const App = () => {
 return (
   <>
     <p>こんにちは。</p>
   </>
 );
};

他のコンポーネントもこのフォーマットに従う形となります。

思いの外、シンプルですね。

今回は、以上となります。