React使う際の始動手順

この記事はZennに書いてましたが、難易度的にはQiita向けっぽく思えてきたため、こっちにもも同じもの投稿してちょっと反応見させてもらいます

やるときいつも「あーなんだっけ」となるので、後で見返したりうっかり忘れたりした時のためにまとめておきます

TL;DR

React使ってプロダクト作ったりする際の、サーバ起動あたりのコマンド軽くまとめ

前提条件（環境）

・Windows10
・npm

結論だけ

PowerShell開いて、プロジェクトのディレクトリ置きたいディレクトリにcdとかで入って以下のコマンド

create-react-app プロダクト名
cd 今作ったプロダクト名
npm start

これを実行することで、 http://localhost:3000/ （環境により違うかも）で作ったページが見れる

詳細な過程

Windows PowerShellを起動

コマンド叩いて実行する必要があるので、Windows環境ゆえWindows PowerShellを起動する必要があります
（Macだったらコマンドプロンプト、また使用するIDEによってはIDE上でできることも）
なので、検索欄なりスタートメニューなりからWindows PowerShellを起動します

対象のディレクトリに移動

起動コマンドについては、 create-react-app プロダクト名 で用意し、作っているReactプロダクトのあるディレクトリで起動する必要があります
そのため、まずcdコマンドで対象のディレクトリ（ package.json のあるところ）に移動します

cd Reactプロダクト置いてるディレクトリ

環境によりますが、PowerShell開いたときのドライブ（たいていCドライブのはず）と別のドライブにディレクトリ置いてあるなら先にドライブ移動の必要もある（自分はDドライブに置いている）ので、その場合は以下の例のようなドライブ移動コマンドを先に打ってドライブを移る過程が必要です

D:

試してみたら、ドライブまたぐ場合であってもこれ無しにcdで普通に飛べました

コマンド実行制限の部分解除（場合による）

セキュリティのために、Set-ExecutionPolicyコマンドレットによってスクリプト実行の制限がなされていることがあります（「~ cannot be loaded because running scripts
is disabled on this system.」「このシステムではスクリプトの実行が無効になっているため、～を読み込むことができません」とか出てきたらこれ）
その場合は、以下のコマンド叩いてスクリプト実行の制限を、とりあえずローカルのファイルからは許可するように「RemoteSigned」に設定し、制限を部分解除すれば実行できるようになります

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

やり終えたら

Set-ExecutionPolicy -ExecutionPolicy Restricted -Scope Process

あたりで戻しておくと安全かもしれません
（状態に関しては Get-ExecutionPolicy コマンドで確認可能。今回の本題とは外れるので詳しく調べたい場合はググって）

サーバ起動

頻出なのでわざわざ言うことは無いと思う以下のコマンドで起動します

npm start

yarn使ってる場合はまた変わってきます（ yarn run とか）

ページ確認

ここまでやれば http://localhost:3000/ （環境により違うかも）で、対象Reactプロダクトのページが標準ブラウザに設定しているブラウザで自動的に開きます
あとは確認しながらReactいじってください

素のHTMLなら特に前準備なくてもHTMLファイルをブラウザにドラッグするとかで見れるので、最初の頃はやや面倒に感じました（たまに今でも）
多分自動化する手段とかはありそう