# MacのReact環境構築 ## nodenvのインストール https://github.com/nodenv/nodenv node18.16.0をインストールする ## homebrewをインストール ターミナルを開いて以下のコードを入力します。（DockでLaunchpadのアイコンをクリックして、検索フィールドに「ターミナル」と入力するとターミナルがあります。https://support.apple.com/ja-jp/guide/terminal/apd5265185d-f365-44cb-8b09-71a064a42125/mac） ``` /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` パスワードを聞かれたら入力し、「return」キーを押すように指示されたら「return（いわゆるエンターキー）」を押してください。 インストールが完了したら、パスを通します（以下を入力）。「ユーザー名」はご自身の環境に合わせて書き換えてください。 ``` echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/user/.zprofile ``` 続いて以下を入力 ``` eval $(/opt/homebrew/bin/brew shellenv) ``` 以下を実行してバージョン情報が出れば成功です。 ``` brew -v ``` ## Nodenvのインストール homebrewでnodenvをインストールします。以下を入力する。 ``` brew install nodenv ``` コマンドを実行できるようにパスを通します。以下を続けて入力 ``` echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc ``` ``` echo 'eval "$(nodenv init -)"' >> ~/.zshrc ``` 以下を入力してバージョン情報が出たらインストール完了 ``` nodenv -v ``` ## ViteでReact環境を作る 今後ReactやTypeScriptの環境を作るときはViteを使います。 ※Viteとは モダンな開発環境に対応したビルドツール。 従来のツールに比べ以下のメリットがあります。 - 開発サーバの起動・更新がとにかく早い - TypeScriptやSass使用時の設定がほぼ不要 np ```jsx $ npm create vite@latest // 今回はproject名をsample-viteにしてみる // React + JavaScriptを作れればOK $ ls // sample-viteというディレクトリができているかを確認 $ cd sample-vite $ npm i // package.jsonの内容をインストール // node_modulesというディレクトリができている //今いる場所をVSCodeでひらく // ターミナルをひらく(デフォルトはPowerShellなのでWSLのターミナルをひらく) $ npm run dev ``` https://localhost:5173を開ければ成功です！お疲れさまでした。 ## Githubで管理する 課題1を先ほど作成したViteの上で動くようにします(コピペ) Githubにリポジトリを作成して管理します 先ほど作成したディレクトリをGitubにPushしてください Gitに関しては手を動かしながら仕組みを学んでほしいです(教材などを買ったりすることはせずにpushまでを調べて実施してみてください) [ここに手順をまとめてください] ①Github上でリポジトリを作成 ②ローカルターミナルでクローンを作成 ③クローン作成後にプロジェクト作成 ④作業に入る前にブランチをきる git branch branch名 ⑤ブランチをきって作業に入る　 ⑥作業が終わったらgithubへソースをあげる git add * git push origin branch名 ⑦github画面に行ってプルリクエストをmergeする（個人開発の場合) branchを削除する(後続作業がない場合) ⑧github上でマージ確認したらローカルでもブランチを削除する(後続作業がない場合) 参考 https://www.sejuku.net/blog/70775