はじめに
「npx create-react-app」を使用したReactアプリのプロジェクトの作成、起動方法についてまとめました。
※「Vite」を使用した方法は下記に記載してます。
Reactの環境構築、Viteを使用したプロジェクトの作成、起動方法
事前準備
Node.jsとVSCode(Visual Studio Code)を事前にインストールしておく。
手順は下記の記事に記載。
Reactの環境構築、Viteを使用したプロジェクトの作成、起動方法
Reactのプロジェクトを作成
参考資料
Reactの基礎【環境構築編】
新しい React アプリを作る – React
npxコマンドとは？ 何ができるのか？
①VSCodeからターミナルを開く。ターミナルから、cdコマンドでプロジェクトを作成したい場所（任意のパス）に移動する。
cd {任意の場所}
➁ ①で指定した場所の配下にReactアプリのプロジェクトを作成する。
- 以下のコマンドを入力する。
npx create-react-app {プロジェクトフォルダ名}
- 以下の通り、開発に必要なファイルが作成される。
＜フォルダ構成＞
※「npx create-react-app」を実行すると、
「create-react-app」のインストール、実行、アンインストールが実行される。
- npxコマンド
:インストールしていないモジュールのインストール、実行、アンインストールをしてくれるコマンド。
開発サーバーを起動する
作成したプロジェクトフォルダに移動して、開発サーバーを起動する。
- 以下のコマンドを入力する。
cd {プロジェクトフォルダ名}
npm start
- ブラウザから初期画面が表示される。
インストールの際、「このシステムではスクリプトの実行が無効になっている」というエラーが出た場合の対応方法
参考資料
Reactのプロジェクト作成の所で実行が無効と出た...解決法 #初心者 - Qiita
PowerShellでこのシステムではスクリプトの実行が無効になっているため、ファイル hoge.ps1 を読み込むことができません。となったときの対応方法 - Qiita
Powershellを「管理者で実行」で起動して、以下のコマンドを実行する
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned