はじめに
「Reactで開発をしてみたい！でもまず何をすれば良いの？」
という人向け
環境
OS:Windows 10
IDE:VS Code
何をするか
目次を見た通りですがこの記事では↓の手順をやっていきます
①VS Codeのインストール
②VS Codeの初期設定
③ワークスペースの作成(パッケージのインストール)
④Githubへコミット
今回は、Reactの公式チュートリアルを目指してやってみようと思います
参考
VS Codeのインストール
Visual Stadio Code、通称VS Codeをインストールしましょう
Microsoftの公式サイトからインストールします
(10年後...)
完了しました！
ちなみに
コードを書いたりデバッグに使用するツールを「IDE(統合開発環境)」と呼びます。
本当はメモ帳などでコードを書くこともできるのですが、ワークスペースの表示、開発中のコード保管機能がなかったり、デバッグが大変だったりと、開発難易度があがります。
また、IDEは「VS Code」以外にも「Eclipse(日本語版は Preiades と名称が変わる)」やApple製品向けのSwiftを使用して開発する「X Code」などがありますが、Type Scriptを使用する場合にはVS Codeがおすすめです。
どちらも開発元がMicrosoftなので親和性が高い(はず！)
VS Code設定編
起動後、まずは言語設定を変更しましょう
コマンドパレット(VS Code)の上部にある枠から設定を変更します
>language
下記のようにやって....
こうやってこう(日本語を選びます)
Restartします
すると、日本語に変わっていると思います。
変わってなかったらどんまいです
Reactのインストール
Reactをインストールする手順は少し長いです！
最終的にnpxでいくつかのパッケージをインストールするわけなのですが、npxを使用するためにはNode.jsのインストールが必要なわけですね
Node.jsのインストール
ということで、まずは公式サイトからNode.jsインストールしてください！
(10年後....)
これでVS Codeからnpxを使用する準備ができました
ターミナルの表示
npxを実行するためにターミナルを表示します
表示→ターミナルで表示します
Reactのインストール
ワークスペースに移動する
cd C:\workspace
ターミナルでnpxを実行します
npx create-react-app react-tutorial --template typescript
プロジェクト名はreact-tutorialとしておきましょうか
Ok to proceed? (y) y
"Success"が表示されたら成功です！
....
Success! Created react-tutorial at C:\workspace\react-tutorial
おまけ
ローカルホストを立ち上げてみましょうか！モチベーションが上がりますね！
やりかたは簡単、コマンドを実行するだけ！
※別にやらなくても良いです(やってるのはサーバー立ち上げてアクセスするだけなので)
npm start
その後localhost:3000にアクセスすると確認できます
確認できたら、Ctrl + C で停止できます
Githubにコミット
紐づけを解除
まずは今のgitからの紐づけを外します
.gitフォルダを削除するだけ
下記コマンドを実行してください(プロジェクト名を変更してる人はそれに合わせて変更)
cd react-tutorial
rm -r -force .git
エクスプローラーを開いて.gitフォルダを直接削除しても良いです
Githubにリポジトリを作成
Githubにアカウントを作成
Github公式サイトからサインアップしてください
Googleアカウントなどを持っていればサインインからGoogoleアカウントなどでログインすることもできます
GitHubに公開
ここでVS Codeに戻り、左側のタブにあるソース管理のボタンを押します
GitHubに公開をクリックします
Authorizeをクリックします
VS Codeに戻るとリポジトリの候補がでてくるので、Private/Public好きな方を選びます
困ったらPublic Repositoryで良いです
そのごブランチの発行を押すとmainブランチが作成されGitHubにプッシュされます
GitHubでリポジトリを確認してみましょう
できてそうですね！
おわり