構成

Reactでは対象のページにアクセスされると
public/index.html->src/index.js->src->App.js
の順番に読み込まれていきます。

public/index.htmlはタイトルなどのhead部の設定
src/index.jsはファイルの読み込み、ルートの設定、
src/App.jsはルートの表示内容

ルートはsrc/index.jsで
const root = ReactDOM.createRoot(document.getElementById('root'));

このように定義されており、デフォルトではpublic/index.htmlのroot部に表示されるようになっています。


root.render(
<react.strictmode>
<App />
</react.strictmode>
);

この部分はrootに対してApp.jsのApp関数で定義された内容を埋め込むようになっています。

また、root.render()内に、直接表示内容を記入することもできます。
その場合は、Reactでは使用されていないクラスを読み込んでいるとエラーとなるため、一番下に追記もしくは
import React from 'react';
import App from './App';

の2行を削除してください。
const name = 'test';
root.render(<React.Fragment>
<p>{name}</p>
<p>test2</p>
</React.Fragment>)

のようにすると画面に
test
test2
と表示されるはずです。
ここでの注意点は、render関数では複数の要素を入れるとエラーになるという点です。
複数要素を表示したいときは上の例のようにReact.Fragmentもしくはdivの中に入れるようにしてください。
また{変数名}とすることで変数を埋め込むことも可能となっています。

App関数は初期状態ではreturn()のみ記入されており、この()内の内容がpublic/index.htmlのidがrootの要素に表示されるようになっています。
デフォルトだと
<img src={logo} className="App-logo" alt="logo" />

を削除するとエラーになるため、書き直すときは
import logo from './logo.svg';

を削除してください。