これは何?

個人的に素のReactを使おうと思ったのですが，どうやら公式ドキュメントによると素のReactを使うよりもフレームワークを使うことが推奨らしいです。

React だけで新しいアプリやウェブサイトを作りたい場合は、コミュニティで人気のある React フレームワークから、ひとつを選ぶことをおすすめします。
フレームワークなしで React を使うことも可能ですが、ほとんどのアプリやサイトにおいては、コード分割、ルーティング、データ取得、HTML 生成といった問題に対処するための開発が必要であることが分かっています。これらは React に限らずあらゆる UI ライブラリに共通の問題です。
フレームワークを使ってスタートすることで React での開発を素早く立ち上げ、後で実質的に独自フレームワークのようなものを作ってしまわずに済むようになるでしょう。

ですが，自分が初めてReactを使うので素のReactを触っておきたいなという気持ちがあり，素のReactのセットアップをしました。

本記事では素のReactの環境構築でやったことを書いておきます。

素のReactのセットアップする方法

疑問: create-react-appは非推奨らしいがこれを使わずにプロジェクトを作ってみればよいのでは?

create-react-appが非推奨になった話が気になる方は以下を参照してください。

そこで，create-react-appコマンドを使わずにreactプロジェクトを作ればよいのでは?と思い，試してみました(結論から言うとダメそうです)。

公式ドキュメントのForkを押すとcode sandboxが開くのでこれを雛形としてセットアップしてみます。

動作自体は問題なくしますが，npm auditを実行するとhighの脆弱性が6つ残っています

npm audit
# npm audit report

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack
          Depends on vulnerable versions of resolve-url-loader
          node_modules/react-scripts

postcss  <8.4.31
Severity: moderate
PostCSS line return parsing error - https://github.com/advisories/GHSA-7fh5-64p2-3v2j
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/resolve-url-loader/node_modules/postcss
  resolve-url-loader  0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/resolve-url-loader

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

問題のありそうな

nth-check
postcss
のバージョンを最新にすることを試みますがうまくいかず。

rm package-lock.json
rm -rf node_modules
npm install nth-check@latest
npm install postcss@latest

上記のライブラリがreact-scriptsに依存していることが原因のようです。
(一応，react-scripts`も最新にしてみましたがダメそう)

This package includes scripts and configuration used by Create React App. react-scripts - npmより

と記載があり，react-scriptsはcreate-react-appで使用するスクリプトのようです。
このため，create-react-appを使わなくてもreact-scriptsを使う時点で非推奨であることには代わりがないです。

Viteを使ってみる

フレームワークなしで React を使うことは可能？を見ると，フレームワークを使わない場合の選択肢はViteやParcelのようです。

そこでviteを試してみます。

Vite Getting Startedに沿って進めます。

react-tsを指定し，React，TypeScript + SWCを選択しました。

npm create vite@latest frontend2 -- -- template react-ts

> npx
> create-vite frontend2 -- template react-ts

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

 Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC
    React Router v7 ↗

SWC is an extensible Rust-based platform for the next generation of fast developer tools. It's used by tools like Next.js, Parcel, and Deno, as well as companies like Vercel, ByteDance, Tencent, Shopify, Trip.com, and more.
SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by all major browsers. SWCより

SWCとはRustベースのTypeScriptからJavaScriptへの変換を高速にするRust製のツールらしい。

ls
eslint.config.js  package-lock.json  tsconfig.app.json
index.html        public/            tsconfig.json
node_modules/     README.md          tsconfig.node.json
package.json      src/               vite.config.ts

とりあえず，雛形はできました。

tsconfigがやたらたくさんあるのが気になりましたが，以下のようにしてTSのルールを定めているだけでした。

tsconfig.jsonはtsconfig.node.jsonとtsconfig.app.jsonのパスを指定しているだけ。
tsconfig.app.jsonはsrc/配下が対象
tsconfig.node.jsonはnode_modules/配下が対象

npm audit
found 0 vulnerabilities

脆弱性もreact-scriptを使っている時と比べて0になりました。