はじめに
この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。
動作環境
- PC：Macbook
- CPU：Intel
- OS：MacOS Ventura 13.3.1
Homebrewをインストール
まず、パッケージマネージャーのHomebrewが入っていない場合は、インストールする必要があります。
インストール済みかどうかは、以下のコマンドで確認できます。
brew -v
Homebrewのサイトの「インストール」の下にあるコマンドをコピーし、ターミナルに貼り付け実行します。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
バージョン確認のコマンドを実行し、インストールされていることを確認します。
brew -v
> Homebrew 4.0.15
nodebrewをインストール
nodebrewは、node.js(npm)のバージョン管理ツールです。
コマンドひとつで特定バージョンのnodeのインストールや、バージョンの切り替えを行えるようになります。
以下のコマンドを実行し、インストールします。
brew install nodebrew
インストールが完了したら、セットアップを行います。
nodebrew setup
セットアップ完了後、PATH情報が出力されるので、PATH情報を.zshrcに反映させます。
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
source ~/.zshrc
node.jsをインストール
node.jsの公式サイトからLTS版のバージョンを調べます。
以下のコマンドを実行して、node.jsのLTS版をインストールします。
nodebrew install v18.16.0
インストールが完了したら、以下のコマンドでnode.jsを有効化します。
nodebrew use v18.16.0
最後に、以下のコマンドでnode.jsの動作確認をします。
node -v
npm -n
Reactのプロジェクトを作成
Reactのプロジェクトを作成するには以下のコマンドを実行します。
cd [プロジェクトを作成する場所]
npx create-react-app [プロジェクト名]
完了したら、[プロジェクト名]で指定したフォルダが作成され、その直下に様々なファイル等が格納されます。
Reactアプリケーションを実行する
以下のコマンドを実行して、Reactのアプリケーションを実行します。
cd [プロジェクトの場所]
npm start
このコマンドを実行すると、Webブラウザが開かれ、「 http://localhost:3000/ 」にアクセスします。
動作を確認できたら、ターミナル上で「Ctrl+C」を押して終了します。