お母さんでもわかるReact「レンダリング、JSX、Fragment」

大前提

大前提としてReactは、関数をコンポーネントとして扱っています。
つまり関数を一つのブロックとして、それをうまい具合に積み重ねてUIを作っていくということ。

react-domの必要性

react-domをimportする理由を調べてみました。
どうやら、React要素をDOMにレンダリングするためのReactDOM.render()メソッドを使用することができなくなってしまうみたいです。
※レンダリングとはReact要素（JavaScriptオブジェクト）をブラウザのDOMに変換して表示することを意味するので、「React要素をブラウザに表示することができない」

ということでreact-domのimportはしましょう！

レンダリングの方法

//ReactDOMという名前でreact-domをインポートしている
import ReactDOM from "react-dom";

const APP = () => {
  return <h1>こんにちは！</h1>;
}

//これがレンダリング。ReactDOM.render(<レンダリングの対象 />, レンダリングする場所);
ReactDOM.render(<APP />, document.getElementById("root"));

上記はSPA（シングルページアプリケーション）の場合の記述方法です。
（SPAは基本HTMLlファイルが一つなのですが、複数ファイルになることもあるそうで、そのときはJSで必要なHTMLファイルを非同期で読み込むことができます。詳しくはもう少しわかってから共有します）

JSXのルール

JSX（JavaScript eXtensible Markup Language）にはいくつかルールがあります。
①returnの中にHTMLを記述していくが、HTML要素が複数になる場合はreturn()の（）に記述していきます。
②return以降のHTMLは親タグの兄弟要素は記述できない

const APP = () => {
  return (
    <h1>こんにちは！</h1>
    <p>清水です</p>
  );
}

このコードはエラーが出ます。
一番上の階層divが2つあるためです。

const APP = () => {
  return (
    <div>
      <h1>こんにちは！</h1>
      <p>清水です</p>
    </div>
  );
}

このコードは問題ありません。
<h1><p>は兄弟要素ですが、一番上の階層<div>　が１つしかないためです。

Fragment

上記の②を回避する方法が2つあります。

import { Fragment } from "react";

const APP = () => {
  return (
    <Fragment>
      <h1>こんにちは！</h1>
      <p>清水です</p>
    </Fragment>
  );
}

const APP = () => {
  return (
    <>
      <h1>こんにちは！</h1>
      <p>清水です</p>
    <>
  );
}

無闇に<div>を追加するのは可読性に欠けるので、有効な手段となります。