⓪ Node.jsをダウンロードし、インストールする。npmも同時にインストールされる。
これでnpmコマンドが使えるようになりました。
①create-react-appを利用して、Reactのプロジェクトを作成します。
>npm install -g create-react-app と記載してEnterを押す。
これで、create-react-appコマンドが使えるようになりました。
ここで作成するReact.jsのプロジェクト名をreact-firstとし、ホームディレクトリ下に作成しようとすると、
>create-react-app react-first と記載してEnterを押す。
②Firebaseのコンソールに移動する。
Firebaseのプロジェクトを作成する。ここではこのプロジェクト名を、fire-reactとします。FirebaseはSpark版を使う※。
Google Analyticsは適応させておく。
③Firebase CLIを利用します。
>npm install -g firebase-tools と記載してEnterを押す。
これで、firebaseコマンドが使えるようになりました。
④ ローカルPCとFirebaseを連携させる
cdコマンドで、react-firstディレクトリに移動する。
>firebase login と記載しEnterを押す。
Googleアカウントへのログインが求められるので応じる。
>firebase init と記載してEnterを押す。
この後いくつか質問がありますが、そのやりとりの一例を以下に挙げておきます。
? Are you ready to proceed? Yes
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to
confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: fire-react-1ddb9 (fire-react)
i Using project fire-react-1ddb9 (fire-react)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
+ Wrote public/404.html
? File public/index.html already exists. Overwrite? No
i Skipping write of public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
これで、react-firstディレクトリ内に、.firebasercとfirebase.jsonが追加されました。
このうち、firebase.jsonを下記のように修正します。
（Windowsでは、デフォルトが、"public":"public"になってます。このあと、serveコマンドで、その次deployとしているものが多かったですが、serveコマンドは非推奨のようです。 "public":"build"にして、npm run build にして、次にdeployします。これはMacと共通なやり方のようです。）
https://www.youtube.com/watch?v=MNs4I0g7MQM
>npm run build を記載し、Enterを押す
>firebase deploy を記載し、Enterを押す
Deploy Complete!と表示され、その下にURLが表示される。
ブラウザでそのURLを記入しEnterを押すと、Reactのロゴの画面が出てくる。
これで完成。
https://qiita.com/junara/items/74801923ca108b328b26
