Help us understand the problem. What is going on with this article?

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

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

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away