ReactもしくはNext.jsで環境構築する際のtipsです。

多くの場合はnpxコマンドを使用して環境構築をすると思いますが、新しいフォルダーを作成せずに指定のフォルダー内で環境構築するコマンドを忘れがちなのでまとめておきます。

※場合によってはViteを使用した環境構築も人気で最近ではよく使われています

Viteとは何？Viteやcreate-react-appで使うコマンドを全て紹介

通常のよくあるコマンド

React.js

npx create-react-app { プロジェクト名 } --template typescript

Next.js

npx create-next-app { プロジェクト名 } --typescript

コマンドの最後に–typescriptを入れることでTypeScriptの環境を作成できます。

{ プロジェクト名 }は環境構築後のフォルダー名と同じになります。

指定フォルダー内で環境構築するコマンド

React.js

// { プロジェクト名 }を.に変更
npx create-react-app . --template typescript

Next.js

// { プロジェクト名 }を.に変更
npx create-next-app . --typescript

{ プロジェクト名 }を . に変更することで新たなフォルダーを作成せずに指定フォルダー内に展開してくれます。

※ここで言う指定フォルダーとはnpxコマンドを発火させるフォルダーのこと

関連記事:

知っておくと良いJavaScript/TypeScriptで最後にセミコロン(;)をつける意味 useStateの配列を更新しても再描画/表示されないときの解決法 TS2305: Module ‘”react-router-dom”‘ has no exported member ‘RouteComponentProps’.が表示された時の解決方法 Reactで「Warning: Each child in a list should have a unique “key” prop.」が出た時の解決法