スタートページ＞ Javascript＞ React
Reactの概要 →文法の基本（１）

Reactの概要

React 利用環境の設定

Ｗｅｂページを動的に操作すること、特に一画面内で多様な操作を行うＳＰＡ(Single Page Aprication)が広く用いられています。React は、ＳＰＡのページ作成を支援するJavaScript拡張言語です。

React の利用環境を設定するには、
　　１　必要なアプリをインストールする。
　　２　公開されているＣＤＮをリンクする。
　　３　Ｗｅｂ上での実行環境を利用する。
ことができます。

ここでは、３の代表的なサイトである、CodeSandbox を利用します。

設定方法や特徴: @nishiurahiroki「CodeSandboxでReact学習用の開発環境をサクっと作ろう」
https://qiita.com/nishiurahiroki/items/279041447ef1415804c2
使い方（ファイルの新規作成や保存なども含む）: CodeSandbox ガイド（https://csb-jp.github.io/docs/usage)
初期画面: https://codesandbox.io/s/react-new?file=/src/App.js

CodeSandboxによるReactの概要説明

CodeSandbox を開くと、次の初期画面が表示されます。
これを例にして、React の概要を説明します。
　　

３つのファイルが自動的に生成されます。

App.js: 画面を構成する部品（<h1>, <img>, <button> などを集めたもの）をＵＩコンポーネントといいます。
ここでは、React でのＵＩコンポーネントを JSX 記法で記述しています。
一つのコンポーネントを一つのファイルにしています。
実際には、このようなファイルが複数個あるのですが、ここでは一つにしています。
index.js: App.jsからのコンポーネントを受け取り、Ｗｅｂページでの表示位置と結びつけて、ブラウザに渡す機能を持ちます。
実際には、複数のコンポーネントを配置することになりますが、ここでは一つのコンポーネントを定位置に配置するだけにします。
style.css: 通常の css ファイルです。

画面のリスト

これらの内容は次のようになっています。

●App.js

import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

●index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

●styles.css
.App {
  font-family: sans-serif;
  text-align: center;
}

説明

説明の都合上、これらを次のように書き換えます。流れの概要が理解できましょう。
この内容は、普通の HTML + JavaScript　では、次の操作をしていることになります。

    <link rel=stylesheet href="styles.css">
    <script>
        var 部品 ="<h1 class="red">ようこそ</h1>"
                 + "<p>CodeSandbox へ</p>";
        document.getElementById("表示場所") = 部品;
    </script>
    <div id="表示場所"></div>

●App.js
import "./styles.css";  // <link rel=stylesheet href="styles.css" ～ に相当

export default function 部品() {  // export：関数 部品() の値を index に渡す
                                  // default：名前なし　「部品」の名称は任意
  return (            // 戻り値　部品()の内容　HTMLの文字列になる
    <div>
      <h1 className="red">ようこそ</h1>  // cssのclassは className で指定
      <p>CodeSandbox へ</p>
    </div>
  );
}

●index.js
import { StrictMode } from "react";            // この２行は React を利用するために必要
import { createRoot } from "react-dom/client"; // 　　　{ } は用途により異なる

import 表示部品 from "./App";    // Appファイルで作成したコンポーネントを「表示部品」とする
                                 // 「部品」は index では使われない。汎用化措置
// 以下で表示場所を設定するらしいのですが、私は理解できていません。
const コンテナ = document.getElementById("root");
const 表示場所 = createRoot(コンテナ);

表示場所.render(
  <StrictMode>
    <表示部品 />      // Appファイルで作成した内容
  </StrictMode>
);

●styles.css
.red {color: red}