久々に REACT をセットアップしてみる

REACT のデフォルトプロジェクトを作成

既存プロジェクトに入れるのではなく、基本セットとしてセットアップします。
npx create-next-app を打っとけばなんとかなるっぽい。

react.dev

設定は Typescripr 使わない、ESLint 使わない、Tailwind CSS 要らん、src ディレクトリよこせ、ルーターは欲しい、デフォルトの alias なんていちいち変更しません。

$ npx create-next-app
√ What is your project named? ... react-sample
√ Would you like to use TypeScript with this project? ... No / Yes
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use Tailwind CSS with this project? ... No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
√ Use App Router (recommended)? ... No / Yes
√ Would you like to customize the default import alias? ... No / Yes
Creating a new Next.js app in D:\OneDrive\workspace\sandbox\REACT_Sample\react-sample.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next


added 20 packages, and audited 21 packages in 37s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created react-sample at D:\OneDrive\workspace\sandbox\REACT_Sample\react-sample

普通に REACT もくっついてくる。
これでセットアップはできたか？

とりあえず動かしてみるか

npm run dev っとすると、http://localhost:3000 でサーバが起動する。

REACT の特性

REACT の最も特徴的な機能は、JSX だろう。
JSX は JavaScript の中に、HTML タグを直接書ける機能だ。

例えばデフォルトソースは次の様に書かれている。

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>
          Get started by editing&nbsp;
          <code className={styles.code}>src/app/page.js</code>
        </p>
        <div>
          <a
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{' '}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className={styles.vercelLogo}
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>

      <div className={styles.center}>
        <Image
          className={styles.logo}
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
      </div>

      <div className={styles.grid}>
        <a
          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className={styles.card}
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2>
            Docs <span>-&gt;</span>
          </h2>
          <p>Find in-depth information about Next.js features and API.</p>
        </a>

        <a
          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className={styles.card}
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2>
            Learn <span>-&gt;</span>
          </h2>
          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
        </a>

        <a
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className={styles.card}
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2>
            Templates <span>-&gt;</span>
          </h2>
          <p>Explore the Next.js 13 playground.</p>
        </a>

        <a
          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className={styles.card}
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2>
            Deploy <span>-&gt;</span>
          </h2>
          <p>
            Instantly deploy your Next.js site to a shareable URL with Vercel.
          </p>
        </a>
      </div>
    </main>
  )
}

この src/app/page.js を編集してみる

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
    <main className={styles.main}>
      <div>Example message!</div>
    </main>
  )
}

すると画面は

ルーティング

URL はファイル配置で決定しますので、こんな感じにファイルを置きます。

• src/app
  • test
    • page.js

保存してアクセスすればこんな感じに

挙動

生成されたタグを確認してみると、次の様に生成されている。

デフォルト設定の REACT でプロジェクトを作成すると、タグは shadow-dom ではなく、素の HTML で出力されるようだ。
つまり、親コンポーネントの CSS はそのまま伝播するし、子要素で発生したイベントを親コンポーネントでも拾えるという事だ。

shadow-dom があった方がボックス化できるが、スタイルの共通性を担保するという意味ではこちらの方が便利なケースはありそう。

リリース

基本的に npm run start で運用サーバが起動するようだ。
各種サーバにデプロイする場合の手順は公式を参照

nextjs.org

REACT の濃い作り

REACT の根っこには FLUX の考え方がある。

www.npmjs.com

平たく言えば、処理フローの流れが常に一方通行になるという事。
逆を言うと双方向バインドの様な機構がない事を意味する。

ただし自分はこの考え方が好きだ。
処理の流れが一方通行ということは、何かあったときに追跡がしやすい…要するにデバッグしやすいためだ。

この考え方が出来ればREACTの扱いはやりやすくなるはず…

とはいえ、 LWC でも似たような作りになっているので、Salesforce エンジニアなら、jsx の書き方にさえ慣れれば、扱いやすいフレームワークかもしれない。