purotoko  2021/02/18更新

create-react-appで環境構築をする


create-react-appに必要なもの
* node 8.10以上
* npm 5.6以上

これらをインストールするために

まず、homebrewをインストールし、次に homebrewを使用しnodebrewをインストールする。

その後、nodebrewを使用しnodeをインストールするみたい。

ややこしや〜

参考にさせていただいた記事

https://qiita.com/sugasaki/items/ad4d5d88965057840a04

以下、やったこと

homebrew、nodebrew、node、npmのインストール

  • homebrewのインストール
    https://brew.sh/index_jaのトップページのコマンドをコピペ
    bash
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

    インストールされたかの確認
    bash
    brew -v

  • nodebrewのインストール

    brew install nodebrew

    インストールされたか確認する
    bash
    nodebrew -v

  • nodebrew で nodeをインストールする
    stable は安定バージョンをインストールするらしい。安定バージョンは8.1以上みたいなのでOK
    bash
    nodebrew install stable

    ここでエラーが出た。

    Fetching: https://nodejs.org/dist/v14.15.5/node-v14.15.5-darwin-x64.tar.gz
    Warning: Failed to create the file

    Warning: /Users/aaa/.nodebrew/src/v14.15.5/node-v14.15.5-darwin-x64.tar.gz:
    Warning: No such file or director

調べたところフォルダがないよってエラーだったので

ディレクトリ作成してみたところnodeのインストール成功した。

  • インストールしたnodeをカレントにする。
    多分インストールしたnodeを使用できる状態にすることかなと思っている
nodebrew ls
v14.15.5

current: none

nodebrew use 14.15.5
nodebrew ls
v14.15.5

current: v14.15.5
  • nodeを使用できるようにpathを通す
    bash
    echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

    viで~/.bash_profileを編集

    以下の形式にする、、らしいが正直何やってるかわからん。なんでパスを通すのにif文がいるん
    bash
    export PATH=$HOME/.nodebrew/current/bin:$PATH
    if [ -f ~/.bashrc ] ; then
    . ~/.bashrc
    fi


    source ~/.bash_profile
    node -v

    ifのところが本当に分かってないがとりあえずnodeを認識するようになった。

    今度要調査!

  • npmがインストールされている確認する
    nodeをインストールするとnpmも自動でインストールされる

    npm -v

create-react-appをようやく使用する

インストールしたいディレクトリに移動してnpxでインストール

npx create-react-app firstReact

エラー出た。

Cannot create a project named firstReact because of npm naming restrictions:
* name can no longer contain capital letters
Please choose a different project name.

翻訳したらディレクトリ名に大文字使えないよって書いてあったので小文字にした。

vscodeでworkディレクトリを開く

下記コマンドでbuildディレクトリを作成する。

これはsrcとpublic内のファイルをまとめてbuildディレクトリに出力するやつ

npm run build

下記、コマンドでローカル環境を実行できる

ブラウザが立ち上がる


npm start

手動で環境を作るのはかなり難しい

*→create-react-appなら簡単に環境作れる! *

タイトルとURLをコピーしました