カテゴリー: React

先日のサンプルを動かしていて気づいたこと、

propsとstate(@React)

%npm startでサーバー起動してブラウザの開発者ツール(Chrome)で見ているとサーバー停止後に以下のようなメッセージが出てきます。

public/srcディレクトリに該当しそうなソースは無いからnode_modulesの中？しかしライブラリが勝手に通信はしないだろうから今のところはアンノーンな出来事です。

admin

propsとstateというのはReactで重要な役割を果たします。props（properties）は親のコンポーネント（ここでは一つの関数がコンポーネントに相当、常に大文字で定義されます）から子のコンポーネントに値（値の型はなんでも受け入れそうなので型定義する仕掛けが必要でしょう）を渡し、stateはReact内での状態保持のための仕組みです。

以下非常に単純なbuttonをクリックするとカウントアップする仕組みをpropsとstateを使って作ってみたものです。

ただし、button className="square"に対応するCSSは定義していません。

<App.js>

import { useState } from "react";

function Value() {
  let [value, setValue] = useState(0);

  function handleClick() {
    value += 1;
    setValue(value);
  }

  return (
    <button className="square" onClick={handleClick}>
      {value}
    </button>
  );
}

function Message({ mes }) {
  return <p>{mes}</p>;
}

export default function Count() {
  return (
    <>
      <Message mes="Hello counter" />
      <Value />
    </>
  ); // mes is a 'props'
}

% rpm startでブラウザ起動され、ボタンをクリックすると数字がカウントアップされます。

おそらくReactでインタラクティブに動作する最もシンプルなサンプルだろうと思います。

もう少し複雑になるとtutorialの三目並べですが、

https://ja.react.dev/learn/tutorial-tic-tac-toe

ここでも機能として使っているのはpropsとstateですが、JavaScriptは関数も引数で渡せるので、それを多用しています。

また、handleClick()：関数、onClick：プロパティの命名則はhandleXxx/onYyyのようにhandleとonで始めるのだそうです。

admin

フロントエンドではReactを使うのが標準になっているようで、特に最近流行のSPAなどとの相性が良いらしい。

Reactが優れている点はいくつかあるようですが、個人的には仮想DOMを使うことでページの更新が速やかにできる（レンダリングコストの低減）はメリットだと思う。

Reactを学ぶサイトにはいくつかありますが、標準的なところでは、

https://ja.react.dev/learn

あるいは、

https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/react-beginners-tutorial

あたりが良さそうです。いずれにしても全体構造をさっと解説してあるようなサイトはなさそうで、ステップバイステップか。

ReactはJavaScriptのライブラリに過ぎないのですが、裏の仕組みとしてはNode.jsが主要な役割を果たしているようです。

% npx create-react-app some_app_name

で作成されるディレクトリ構造を見るとNode.jsに似ている（そっくり）ように思うし、

% npm start

でWebサーバーを起動するのも同じじゃないかと思う。Webサーバーを起動しているからサーバーサイドとクライアント間の通信もできるはず。

プロダクションビルドは、

% npm start

ではなく、

% npm run build

を使えと言われて、このコマンドを実行すると新たにbuildディレクトが作成されました。（以下の図(hello_reactディレクト)はVScodeから見えるbuildディレクトリ存在前のディレクトリ構造）中身を見ると、そのままサーバーに配置すれば使えるようになっているようだし、npm run buildの実行時のメッセージには以下のような出力がされるので、serveをインストールして起動するとnpm startと同様なページが表示されます。

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Reactの環境を作るのはコマンド一発で作成されますが、そこから作成されるファイル構造は上の図のようになっています。

webサーバー起動して表示される画面はこんな画面。

react.devの最初のtutorial(三目並べ)をbuildするのもNode.jsで変換されるんだろうと思いますが、以下のreact.devのtutorialのサンドボックスから見えるディレクトリ構造は、

/public/index.html、App.js/index.jsという同じ作りになっているから、この構造がスタートポイントと思えば良さそうです。index.html -> index.js -> App.jsと呼び出しているようです。

左上のメニューを選択して、File -> Export to ZIPでFilesメニューに見えるプロダクションビルドがZIPファイルでダウンロードできます。

admin