初めてのReact-準備編

# はじめに
「Reactで開発をしてみたい！でもまず何をすれば良いの？」
という人向け

# 環境
OS:Windows 10
IDE:VS Code

# 何をするか
目次を見た通りですがこの記事では↓の手順をやっていきます
①VS Codeのインストール
②VS Codeの初期設定
③ワークスペースの作成(パッケージのインストール)
④Githubへコミット

今回は、Reactの公式チュートリアルを目指してやってみようと思います

### 参考

https://ja.react.dev/learn/tutorial-tic-tac-toe

# VS Codeのインストール
Visual Stadio Code、通称VS Codeをインストールしましょう
Microsoftの公式サイトからインストールします

https://azure.microsoft.com/ja-jp/products/visual-studio-code

(10年後...)
完了しました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/96f1950c-23af-de50-7fa3-8f601514ec3c.png)

### ちなみに
コードを書いたりデバッグに使用するツールを「IDE(統合開発環境)」と呼びます。
本当はメモ帳などでコードを書くこともできるのですが、ワークスペースの表示、開発中のコード保管機能がなかったり、デバッグが大変だったりと、開発難易度があがります。
また、IDEは「VS Code」以外にも「Eclipse(日本語版は Preiades と名称が変わる)」やApple製品向けのSwiftを使用して開発する「X Code」などがありますが、Type Scriptを使用する場合にはVS Codeがおすすめです。
どちらも開発元がMicrosoftなので親和性が高い(はず！)

# VS Code設定編
起動後、まずは言語設定を変更しましょう
コマンドパレット(VS Code)の上部にある枠から設定を変更します
```terminal:VSCode Command Pallet
>language
```

下記のようにやって....
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/5a18dd0f-5808-ba68-9c4f-0eb2233e5302.png)

こうやってこう(日本語を選びます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/94c59ead-0449-690b-6d1e-ac7806d9ddd5.png)

Restartします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/982a154b-1dba-9469-790a-0eaa8a62c677.png)

すると、日本語に変わっていると思います。
変わってなかったらどんまいです

# Reactのインストール
Reactをインストールする手順は少し長いです！
最終的にnpxでいくつかのパッケージをインストールするわけなのですが、npxを使用するためにはNode.jsのインストールが必要なわけですね

## Node.jsのインストール
ということで、まずは公式サイトからNode.jsインストールしてください！

https://nodejs.org/en/

(10年後....)
これでVS Codeからnpxを使用する準備ができました

## ターミナルの表示
npxを実行するためにターミナルを表示します
表示→ターミナルで表示します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/9157f494-f052-3d0f-b413-b98618ca2a5c.png)

## Reactのインストール
ワークスペースに移動する
```terminal:Terminal
cd C:\workspace
```

ターミナルでnpxを実行します
```terminal:Terminal
npx create-react-app react-tutorial --template typescript
```

プロジェクト名はreact-tutorialとしておきましょうか
```terminal:Terminal
Ok to proceed? (y) y
```

"Success"が表示されたら成功です！
```terminal:Output
....
Success! Created react-tutorial at C:\workspace\react-tutorial
```

### おまけ
ローカルホストを立ち上げてみましょうか！モチベーションが上がりますね！
やりかたは簡単、コマンドを実行するだけ！
※別にやらなくても良いです(やってるのはサーバー立ち上げてアクセスするだけなので)
```terminal:Terminal
npm start
```

その後localhost:3000にアクセスすると確認できます

http://localhost:3000/

確認できたら、Ctrl + C で停止できます

# Githubにコミット
## 紐づけを解除
まずは今のgitからの紐づけを外します
`.git`フォルダを削除するだけ
下記コマンドを実行してください(プロジェクト名を変更してる人はそれに合わせて変更)
```terminal:Terminal
cd react-tutorial
rm  -r -force .git
```
エクスプローラーを開いて`.git`フォルダを直接削除しても良いです

# Githubにリポジトリを作成
## Githubにアカウントを作成
Github公式サイトからサインアップしてください
Googleアカウントなどを持っていればサインインからGoogoleアカウントなどでログインすることもできます

https://github.co.jp/

## GitHubに公開
ここでVS Codeに戻り、左側のタブにあるソース管理のボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/e146035b-e84e-177d-bd04-7cbd3db92c8f.png)

GitHubに公開をクリックします
Authorizeをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/f95a9ec1-273c-48e8-b5cd-1bd841e84859.png)

VS Codeに戻るとリポジトリの候補がでてくるので、`Private`/`Public`好きな方を選びます
困ったらPublic Repositoryで良いです
そのご`ブランチの発行`を押すと`main`ブランチが作成されGitHubにプッシュされます

GitHubでリポジトリを確認してみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/87298a95-c0e4-8a3f-a2cd-1be2f1b63f85.png)

できてそうですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/f0664c39-ca41-5313-be77-e59b771cad2f.png)

おわり