/React-Hands-on-Stopwatch

技育CAMP用のリポジトリになります!

Primary LanguageTypeScript

React-Hands-on-Stopwatch

技育CAMP用のリポジトリになります!

環境構築手順

Node.jsとnpmが入っていない方は以下のURLを参考にダウンロードをしてください。

https://kinsta.com/jp/blog/how-to-install-node-js/

バージョンは基本的に最新のLTS版(長期サポートバージョン、いわゆる安定版)をダウンロードしていただければ良いかと思います。 (私は今回ver17.9.0のものを使用してプロジェクトを作成しています。)

1.Nodeのバージョンを確認する

node -v

スクリーンショット 2023-04-22 10 48 19

2.適宜ディレクトリを作成し、その中に今回私が作成したGitHubリポジトリの内容をcloneしてください。

// mkdirコマンドでディレクトリ作成(名前はなんでもok🙆)
mkdir CAMP
git clone https://github.com/miyakei1225/React-Hands-on-Stopwatch.git

3.react-hands-onディレクトリに移動し、lsコマンドでファイル群があることを確認する。

cd react-hands-on
ls

スクリーンショット 2023-04-22 23 28 13

3.VS Codeでプロジェクトフォルダを開く(未ダウンロードの方は各自ダウンロードしていただけると幸いです。)

【※もし実行するのであれば設定必須🙆】 code . コマンドで現在のディレクトリのフォルダを開く便利なコマンドがあるため、ぜひこちらを参考に設定してみてください!

code .

https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c

4.npm installでpackage.jsonの内容をインストールする(スクショ内では省略形のnpm iでインストールしています👍)

npm install

スクリーンショット 2023-04-22 23 37 50

5.プロジェクトを立ち上げる

npm start

スクリーンショット 2023-04-22 23 39 07

6. 環境構築完了🙌

localhost:3000/homeにアクセスし、画面が表示出来れば環境構築終了です!構築お疲れ様でした💪