【React】create-react-appするまでの環境構築手順

Reactの学習記録

こちらを使って勉強中。まずは環境構築手順の記録

youtu.be

はじめに

• macで作業
• create-react-app を使ってお手軽に環境構築していく
  • このコマンドを使うためには、 node と npm が必要。まずそれらをインストールする。
  • チュートリアルにも書いてある（https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app）

Create React App は React を学習するのに快適な環境であり、React で新しいシングルページアプリケーションを作成するのに最も良い方法です。

開発環境をセットアップして最新の JavaScript の機能を使えるようにし、快適な開発体験を提供し、そして本番環境用の最適化を行います。あなたのマシンに Node >= 14.0.0 及び npm >= 5.6 の環境が必要です。プロジェクトを作成するには次を実行します：

概要

• create-react-appをするためにはnpmが必要
• npmをインストールするためにはnodeが必要
• nodeを使うにはnodebrewが必要
• nodebrewをインストールするためにはhomebrewが必要 だからまずはmacにhomebrewをインストールするところから

手順

1. Homebrewをインストール

    // インストールの確認
    % brew -v                         
    Homebrew 4.0.1
   

2. nodebrewをインストール

    % brew install nodebrew
   
    % nodebrew -v 
    nodebrew 1.2.0
   

3. nodeをインストール

    // インストールできるバージョン一覧を確認
    % nodebrew ls-remote
   
    // 安定バージョンをインストール
    % nodebrew install-binary stable
   
    // エラーが出てインストールできなければ
    % nodebrew setup
   
    // もう一度
    % nodebrew install-binary stable
   
    // インストールしたバージョンの確認
    % nodebrew ls
    v18.14.1
   
    current: none
   
    // インストールしたバージョンを使う
    % nodebrew use v18.14.1
   
    // もう一度確認 currentが設定されている
    % nodebrew ls
    v18.14.1
   
    current: v18.14.1
   

4. nodeの環境パスを通す

    // パスを確認（シェルはzsh）
    % echo $SHELL
    /bin/zsh
   
    // パスを通す
    echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
   

5. 環境パスを通したら必ずターミナルを再起動

6. nodeとnpmのバージョン確認。

    % node -v 
    v18.14.1
   
    % npm -v
    9.3.1
   

7. create-react-app コマンドを使うのに 必要なバージョンを満たしているのでOK。

8. 作業フォルダへ移動

    % cd workspace
   

9. npm とは、ネットワーク上にある npm のコマンドを実行するということ

    % npx create-react-app react-basic
   

10. ローカルサーバー起動

    % cd react-basic
    % npm start
    

11. 自動で localhost3000 でブラウザが開いて無事完了！