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

REACT のデフォルトプロジェクトを作成
REACT の特性
ルーティング
挙動
リリース
REACT の濃い作り

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

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

設定は 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>
  )
}

すると画面は