LoginSignup
1
0

More than 3 years have passed since last update.

まっさらなMacにReactの環境構築〜HelloWorldまで

Last updated at Posted at 2019-09-19
jQueryオワコンと言われて早n年という感じですが

モダンなJavaScriptフレームワークをググってみると・・・
- React
- Vue
- Angular

このあたりが主流だそう。
詳細な比較については下記を参考にさせていただきました。
https://qiita.com/gumiTECH/items/13eb7da8224bf93c67b5

Reactを業務で触る可能性が出てきたので、自分自身でも環境構築してみました。
何番煎じかわかりませんが、備忘録としてまとめておきます。

環境構築

マシンに何も入っていないことを想定してゼロからスタートします。

1.Nodeのインストール(Nodebrewを使用)

Reactでの開発ではNodejsが必須です。
Nodeをインストール済みの場合skipします。

$ brew install nodebrew

パスを通すため~/.bash_profileに下記を記述

`export PATH=$HOME/.nodebrew/current/bin:$PATH`
`source ~/.bash_profile`

バージョン指定してNodeをインストール

nodebrew install v8.9.4

エラー😢

#省略
fetch: http://nodejs.org/hogehoge
Warning: Failed to create the file 
#省略

ローカルにそんなディレクトリないよ!って言われて保存できないので、

$ touch mkdir -p ~/.nodebrew/src

でディレクトリを作ったのち$ brew install nodebrewを再実行。

$ nodebrew use v8.9.4

またエラー😭

#省略
Use of uninitialized value $b1 in numeric comparison (<=>)
#省略

https://github.com/hokaccha/nodebrew/issues/36
↑いわく/Users/username/.nodebrew/node配下にある.DS_Storeを消せとのこと。

2.Reactの環境構築

create-react-appをインストール

詳細は下記記事を参考にさせていただきました。
https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614

npm install -g create-react-app

任意のディレクトリでcreate-react-appコマンドを実行

create-react-app my-app

起動してみる

$npm start

localhost:3000をブラウザで開き下記画面が表示されれば成功です。
スクリーンショット 2019-09-13 13.52.34.png

実践的な内容については今後学習しながらアウトプットしていく予定です・・・

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0