【React】Reactの環境構築（M1 mac）

Reactの環境構築（M1 mac）

Node.jsをインストール

まず、以下の手順でNode.jsがインストールされているか確認します。

ターミナル

$ node -v
v16.14.0

node -vを実行して上記のようにバージョンが表示された場合には、すでにNode.jsがインストールされていますので、Node.jsのインストールはスキップしてください。
表示されない場合にはインストールが必要になりますので次の手順でインストールを行なってください。
尚、Node.jsのインストール方法には今回記載する方法の他にnodebrewを使用する方法等がありますので、興味のある方は調べてみてください。
今回は、Node.jsのホームページからインストールする方法をご紹介します。

まず、以下のURLにアクセスしてください。

下画像のページが表示されると思いますので赤枠の推奨版をクリックします。

すると、.pkgファイルがダウンロードされますのでファイルを実行します。
「Node.jsをインストール」というウィンドウが開きますので内容を確認しながらインストールまで進めます。

インストールが完了したら、最後にインストールされているか確認します。
ターミナルで以下のコマンドを実行してください。

ターミナル

$ node -v
v16.14.0

上記のようにバージョンが表示されればインストールができています。

create-react-appを実行

Node.jsのインストールが完了したらcreate-react-appを実行します。
create-react-appの詳細については以下のページをご参照ください。

create-react-appを実行するには、ターミナルで以下のコマンドを実行します。

ターミナル

$ npx create-react-app test-app

npx create-react-app 任意のアプリケーション名を実行することで新たにアプリケーションを作成することができます。

次に作成したアプリケーションのフォルダに移動し、以下の手順で動作確認を行います。

ターミナル

$ cd my-app
$ npm start

上記コマンドを実行後にブラウザで http://localhost:3000/ にアクセスします。（自動でブラウザが開かれると思います。）

以下の画面が表示されれば正常に動作しています。