環境

macOS Big Sur バージョン11.4
VS Code

アプリ作成

プロジェクト作成

// ターミナル

npx create-react-app sample-app
cd sample-app
npm start

「http://localhost:3000/」へアクセスし、以下のような画面が表示されることを確認 f:id:Toshiki2968:20220403164247p:plain

srcフォルダの中身を削除
srcフォルダにindex.jsファイルを作成

// src/index.js

// render関数を使うため以下のライブラリをインポート
import ReactDOM from "react-dom";

// アロー関数Appを定義
const App = () => {
  return <h1>Hello world!</h1>;
};

// index.htmlのdivタグ(id="root")へApp(コンポーネント)をレンダリングする
ReactDOM.render(<App/>, document.getElementById("root"));

// public/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Sample App</title>
  </head>
  <body>
    <div id="root"></div> <!--ここにレンダリングされる -->
  </body>
</html>