はじめに
Udemyの学習をするために自身でReactとTypescriptの環境構築を行いました。
現場ではViteが主流という話もあるので、それでも問題ないという方はこのやり方でやってみてください。
手順
具体的な手順をまとめています。
事前準備
nodeとyarnがインストールされているか確認
$ node -v
$ yarn -v
インストールされていない場合は、以下のリンクからインストールします。
- nodeのインストール
- yarnのインストール
Reactのプロジェクトを作成
ターミナルにてcdコマンドでプロジェクトの作成先に移動します。
$ cd [フォルダ名]
プロジェクト先に移動したら以下のコマンドを実行してプロジェクトを作成します。
$ npx create-react-app [プロジェクト名] --template typescript
[プロジェクト名] は変更してください。
Happy hacking! というメッセージが出たら完了です。
プロジェクト起動
1.VS Code起動
ターミナルで下記を打ってVS Codeを起動します。
$ code .
起動できない方は下記のような記事を参考にvscodeで設定を行ってください。
2.ローカル表示
VS Code上で「Command + J」でターミナルを開いて、下記コマンドを打ちます。
$ yarn start
これで http://localhost:3000/ を開いて下記のような表示ができていると成功です。
3.停止
「control + C」でローカル表示を停止にすることができます。
4.フレームワークの導入
各種フレームワークの公式サイトを参考に下記のようにyarnでインストールすると成功します。
yarn add ライブラリ名 ライブラリ名 ライブラリ名
package.jsonにインストールしたライブラリがあれば成功です。
5.Github連携
1.リポジトリ作成
Repository nameを入力し、PublicとPrivateはどちらでも良いので選択し「Create repository」ボタンを押して作成します。
2.連携
1.Gitの初期化
$ git init
次のようなメッセージが出ます。
Reinitialized existing Git repository in プロジェクトパス
2.全てのファイルをステージに追加
$ git add .
3.コミット
$ git commit -m "first commit"
4.GitHubリポジトリをリモートとして追加
$ git remote add origin [SSHをコピペ]
5.連携の確認
$ git remote -v
次のように表示されたら成功です。
origin git@github.com:アカウント名/プロジェクト名.git (fetch)
origin git@github.com:アカウント名/プロジェクト名.git (push)
6.プッシュ
プッシュします。
git push -u origin main
次のようなエラーが発生したらローカルにmainブランチがないことでエラーになっています。
error: src refspec main does not match an
メインブランチを切って、プッシュします。
git checkout -b main
git push -u origin main
これで問題なく草も生やせます。
おわりに
Reactのバージョンによってはうまく起動しないこともありますが、この記事を参考に環境構築がスムーズに進められればと思っております。
参考