■目次

環境構築

React × JavaScript

1. ターミナルを開き、プロジェクトフォルダに移動する。

   移動の際は cd Desktop/該当フォルダ名 コマンドを打てばOK

   <aside> 💫 ちなみにターミナルの現在地を確認するには pwd コマンドを叩けばOK

   </aside>

2. npx create-react-app 新規フォルダ名 コマンドを叩く

   ※1. の該当フォルダ内に直接作成する場合は、該当フォルダ名を入力すればOK

   以下文章が出たらy でOK

   Need to install the following packages: create-react-app

   Ok to proceed? (y)

3. success!となればOK！VSCode経由で該当フォルダを開いてみよう

4. VSCodeのターミナルでnpm start を叩き、ローカルサーバーが立ち上がれば環境構築は無事完了！（少し時間かかるかも）

   public > index.htmlなど、各ファイルで不要なコードやコメントアウトなどあれば適宜削除しておこう

   サーバーの動きを止めたい場合は、control + C でOK

5. srcフォルダ直下のindex.jsに記載の<React.StrictMode></React.StrictMode> は<></> に変えておこう！！！（そのままだとブラウザ読み込み時に2回レンダリングされて、要素によっては重複表示される場合があるため）

   → 変えちゃダメよ。今後のReactアップデートに耐えられないアプリになっちゃうかもしれないからಠ_ಠ

   詳しくはStrictModeの挙動 を見てね

https://www.youtube.com/watch?v=Ym4If5W9SS0&list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k&index=3

本番環境にはbuildディレクトリをアップロードする（？）

<aside> ⚠️ npm run eject は色々面倒なので、基本的に触らない・いじらないのが吉！

</aside>

React × TypeScript

1. ターミナルを開き、プロジェクトフォルダに移動する。

   移動の際は cd Desktop/該当フォルダ名 コマンドを打てばOK

   <aside> 💫 ちなみにターミナルの現在地を確認するには pwd コマンドを叩けばOK

   </aside>

2. npx create-react-app 新規フォルダ名 --template typescript コマンドを叩く

   ※1. の該当フォルダ内に直接作成する場合は、該当フォルダ名を入力すればOK

   以下文章が出たらy でOK

   Need to install the following packages: create-react-app

   Ok to proceed? (y)

3. success!となればOK！VSCode経由で該当フォルダを開いてみよう

4. VSCodeのターミナルでnpm start を叩き、ローカルサーバーが立ち上がれば環境構築は無事完了！（少し時間かかるかも）

   src > app.tsxのreturn部分など、各ファイルで不要なコードやコメントアウトなどあれば適宜削除しておこう

   サーバーの動きを止めたい場合は、control + C でOK

5. srcフォルダ直下のindex.jsに記載の<React.StrictMode></React.StrictMode> は<></> に変えておこう！！！（そのままだとブラウザ読み込み時に2回レンダリングされて、要素によっては重複表示される場合があるため）

   → 変えちゃダメよ。今後のReactアップデートに耐えられないアプリになっちゃうかもしれないからಠ_ಠ

   詳しくはStrictModeの挙動 を見てね

https://www.youtube.com/watch?v=Ym4If5W9SS0&list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k&index=3

本番環境にはbuildディレクトリをアップロードする（？）