これは何?
個人的に素の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になりました。