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

React文法の基本（１）

お詫び

ここでは、CodeSandbox で前回で設定した環境を用いて、いくつかの解説Ｗｅｂサイトの例をコピペしながら理解した内容を整理したものです。
理解している事項があまりにも乏しく、次のようなことすらできていません。

CodeSandboxの初期画面で生成されている、App.js, index.js, styles.com 以外のファイルの作成や保管ができていません。
そのため、複数のＵＩコンポーネントを用いて表示することができません。
DOM の知識がほとんどありません。
そのため、一つのコンポーネントでも、画面の相対位置を編集することができません。

基本文法

import 外部からのコンポーネント取得

次の input ファイルは、同じ処理をしています。

●{ } なし
１　import React from "react";
２　import ReactDOM from "react-dom";
３　import 表示部品 from "./App";
４　const コンテナ = document.getElementById("root");
５　const 表示場所 = ReactDOM.createRoot(コンテナ);
６　表示場所.render(
７　  <React.StrictMode>
８　    <表示部品 />
９　  </React.StrictMode>
10　);

●{ } あり
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import 表示部品 from "./App";
const コンテナ = document.getElementById("root");
const 表示場所 = createRoot(コンテナ);
表示場所.render(
  <StrictMode>
    <表示部品 />
  </StrictMode>
);

一般形　import 関数 from "外部ファイル名"
「外部ファイルがもつ全てのモジュールをこのファイルで使えるようにする」ということです。
１，２の２行は、React を使うときの常套句です。必ず先頭にこの通り記述します。
　１　import React from "react";
　２　import ReactDOM from "react-dom";
このページのなかで、StrictMode, createRoot が使われていますが、それらは React, ReactDOM の中にある機能です。それを示すために、React.StrictMode, ReactDOM.createRoot とします。
逆にいえば、このファイルで用いる機能だけを import すればよいことになります。
　１　import { StrictMode } from "react";
　２　import { createRoot } from "react-dom/client";
のように、必要な関数を {　} で囲みます。複数の関数を指定することもできます。
StrictMode, createRoot など多様な関数がありますが、私はその名称や機能を知りません。
３行目も（名称が任意ですが）必須です。
　３　import 表示部品 from "./App";
は「このページはらの相対ＵＲＬのファイル "./App.js" で作成したコンポーネントを「表示部品」として受け取る」ことです。
拡張子は js, jsx など React での標準形式ならば省略できるようです。
CodeSandbox では、Appファイルが./App.js に固定されているので、この通り記述することになります。
（他名称のApppファイルを作成することもできますが、ここでは省略します。
App ファイルにある
　　import "./styles.css";
は、上の説明とやや異なりますが
　　<link rel=stylesheet href="./styles.css" type="text/css">
と同じことになります。

表示部品と表示場所の結びつけ

以下のステップで、表示部品と表示場所の結びつけているようなのですが、私には理解ができないので、説明は省略します。

４　const コンテナ = document.getElementById("root");
５　const 表示場所 = ReactDOM.createRoot(コンテナ);
６　表示場所.render(
７　  <React.StrictMode>
８　    <表示部品 />
９　  </React.StrictMode>
10　);

Appファイルの変形

次の Appファイルは同じ処理をしています。

●通常記述
import "./styles.css";
export default function 部品() {
  return (
    <div>
      <h1 className="red">ようこそ</h1>
      <p>CodeSandbox へ</p>
    </div>
  );
}

●アロー関数表示（１）
import "./styles.css";
export default 部品 = () => {
  return (
     <div>
       <h1 className="red">ようこそ</h1>
       <p>CodeSandboxへ</p>
     </div>
  );
}

●アロー関数表示（２）
import "./styles.css";
const 部品 = () => {
  return (
    <>
      <h1 className="red">ようこそ</h1>
      <p>CodeSandboxへ</p>
    </>
  );
  export default 部品;

return 表示コンポーネントの設定

return ( ～ ) の間が、表示コンポーネントになります。
その要素は複数になる場合は、全体を一つの <div>～ </div>で囲みます。
これは <>～ </> と省略記述できます。
要素は単一の場合は、<div>, </div> で囲む必要はありません。
要素のタグは <h1> や <p> だけでなく、<img>, <a>, <button> などの表示タグが使えます。
タグは必ず終端記号が必要です。例えば <img ～ /> のようにしなければなりません。

変数を含む文

return ( ～ ) の間に表示以外のタグを記述してはなりません。
変数を表示するには、次のように { } で囲みます。

    import "./styles.css";
    export default function 部品() {
      const 変数 = "CodeSandbox";  // export 文の上でもよい
      return (
        <div>
          <h1 className="red">ようこそ</h1>
          <p>{変数} へ</p>
        </div>
      );
    }

className

class="red" ではなく、className="red" とします。
cssファイルを用いるときは、先頭に import "./styles.css"; とします。
JavaScript での <link rel=stylesheet href="./styles.css" type="text/css"> と同じです。

export default コンポーネントの index への引き渡し

一つの Appファイルで複数のコンポーネントを定義して exportする（名前付き）こともできますが、ここでは省略します。
通常は、一つの App ファイルで一つのコンポーネントを定義します。
それを export で他ファイルで読み込むできるようにします。
indexファイルでは「import 表示部品 from "./App"」で受け取り「表示部品」とします。
このとき、Appファイルでの「部品」の名称はどこでも使われていません。
それは、 defoult（名前なし）で渡しているからです。これにより、「部品」の名称を任意にでき、indexファイルのの汎用化が実現できます。
コンポーネントを変数として定義しておき、それを export することができます。→アロー関数表示（２）

応用例

ここまでの知識で作成できる例を列挙します。

<img ～ >, <a href ～ >

相手のファイルを登録していないので、実行結果が示せないのですが・・・

export default 部品 = () => {
  return (
    <div>
        <p>画像の説明文</p>
        <img src= '画像.jpeg' /><br />
        <a href="リンク先.html">リンク</a>
    </div>
  )
}

次のようにも記述できます。

export default 画像 = () => {
  const 説明文  = '画像の説明文';
  const 画像ＵＲＬ = '画像.jpeg';
  const リンク先 = 'リンク先.html':
  return (
      <div>
          <p>{説明文}</p>
          <img src= {画像ＵＲＬ} /><br />
          <a href= {リンク先}</a>
      </div>
  )
}

button

ボタンを表示し、クリックすると関数が呼び出されます。

    const 関数 = () => {
      return (
        <h4>ボタンがクリックされました。</h4>
      );
    };
    export default ボタン部品 = () => {
      return (
        <div>
          <button onClick={関数}>関数実行</button>
          <p>クリックするとこの下に関数結果が表示されます。</p>
          <関数 />
        </div>
      );
    };