0
1

【初心者】React アプリの作成方法

Last updated at Posted at 2023-12-30

仕事で、TypeScriptReactを使用するプロジェクトに携わる予定なので、それの予習用です。

コマンド実行

プロジェクト作成用コマンド(JavaScript用)

npx create-react-app 「アプリ名」

※事前にNode.js のインストールが必要
※「ユーザー\AppData\Roaming\npm」のディレクトリが無いみたいなエラーが出ますが、「npm」フォルダを作成すれば解消される場合があります。

プロジェクト作成用コマンド(TypeScript用)

--template typescriptオプションを引数に追加することで、TypeScript用としてプロジェクトを作成することができます。

npx create-react-app --template typescript 「アプリ名」

アプリの開始用コマンド(Node アプリの共通コマンド)

npm start

一応これで、サンプルページが表示できます!

「npm start」できない...

新規に環境構築したパソコンで、作成済のプロジェクトでnpm startを実行しても、以下のエラーが発生してアプリが起動できない場合があります。

'react-scripts' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

この場合は以下のコマンドで、エラーが解消できます。
バージョン指定が必要であれば、バージョンx.x.xnpm install react-scripts@x.x.x --saveで指定する。
(エラーが残る場合は、npm audit fix --forceを実行する。)

npm install react-scripts --save
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1