Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What is going on with this article?
@spice

macで1からReactの環境構築をするのだ

More than 3 years have passed since last update.

Mac book proを購入したので、
1からの環境構築をしてみました。

備忘録を兼ねて、書きます。
参考になれば幸いです。

Home brew のインストール

ターミナルを開き、公式サイトにあるスクリプトをそのままコピペ。

terminal
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew
==> The following new directories will be created:
/usr/local/Cellar
/usr/local/Homebrew
/usr/local/Frameworks
/usr/local/bin
/usr/local/etc
/usr/local/include
/usr/local/lib
/usr/local/opt
/usr/local/sbin
/usr/local/share
/usr/local/share/zsh
/usr/local/share/zsh/site-functions
/usr/local/var

と、こんな感じでバンバン進んでいく。
途中でエンターキーと、パスワードの入力が要求されるので、入力する。

五分〜六分くらい待って、インストール完了

異常がないか確認する。

terminal
$ brew doctor
Your system is ready to brew.

エラーなし。
優秀。

nodebrewのインストール

次に、
nodebrew なるものをインストールする。
node.jsのバージョン管理とか、楽になるらしい。

terminal
$ brew install nodebrew
Updating Homebrew...
==> Downloading https://github.com/hokaccha/nodebrew/archive/v0.9.7.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v0.9.7
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/0.9.7: 8 files, 38.2KB, built in 5 seconds

簡単。
ここで、環境変数を設定しなきゃいけない。
上で追加してねと言われたPATHを追加。

terminal
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ export NODEBREW_ROOT=/usr/local/var/nodebrew

そしてパスを通すのだけれど、ファイルがないと言われた。

terminal
$ source /.bash_profile
-bash: /.bash_profile: No such file or directory

ないなら作れば良い。ということでファイル作成。

terminal
$ sudo vi .bash_profile

パスワードを要求されるので、入力する。
すると、ファイルが開くので、『:wq』(ファイルを保存して終了という意味のvimコマンド)をうちこんでenterキーをおす。

そして、再度パスを通してみる。

terminal
$ source /.bash_profile

これで、パスの設定は完了。※注意1

次に、セットアップ。

terminal
$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

node.jsなどのインストール

最新のnode.jsをインストールする。

terminal
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v8.5.0/node-v8.5.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

成功したらしい。

インストールしたnode.jsのバージョンを確かめて

terminal
$ nodebrew ls
v8.5.0

current: none

そのバージョンを使うよう設定する。
ここでは、自分のターミナルで表示されたバージョンを指定すれば良い。
僕がやった時は、v8.5.0であった。

terminal
$ nodebrew use v8.5.0
use v8.5.0

一応、ちゃんと設定ができているか確認。

terminal
$ node -v
v8.5.0

npmも自動で入ってるらしいので、確認。

terminal
$ npm -v
5.3.0

入っていた。よろしい。

Reactの便利なコマンドを使えるようにする

reactが使えるように設定する。

terminal
$ npm install -g create-react-app
/Users/yugo/.nodebrew/node/v8.5.0/bin/create-react-app -> /Users/yugo/.nodebrew/node/v8.5.0/lib/node_modules/create-react-app/index.js
+ create-react-app@1.4.0
added 104 packages in 10.515s

良いらしい。

やっとこさ、
アプリを作成してみる。
アプリ名はなんでも良い。ここでは"new_world"

terminal
$ create-react-app new_world

Creating a new React app in /Users/[ユーザー名]/new_world.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> fsevents@1.1.2 install /Users/[ユーザー名]/new_world/node_modules/fsevents
> node install

[fsevents] Success: "/Users/[ユーザー名]/new_world/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/[ユーザー名]/new_world/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-scripts@1.0.13
+ react-dom@15.6.1
+ react@15.6.1
added 1237 packages in 105.505s

Success! Created new_world at /Users/[ユーザー名]/new_world
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd new_world
  npm start

Happy hacking!

行けた!
あとは、アプリのディレクトリに移動して起動するだけ。

teminal
$cd new_world 
$npm start 

すると、ブラウザが起動して成功!
サーバを止めたい場合は、ctrl+cで可能。

結構簡単にいけました〜!
初めてmacを使っているのですが、環境構築の手間が窓に比べるととんでもなく楽ですね。
これは開発捗るわ。。。

※注意1
ここで環境変数を設定しても、ターミナルを再起動すると、環境変数がなくなっていることがある。(というか、普通無くなる)
なので、自分で直接.bash_profileのの中に環境変数などを設定しておく必要がある。

terminal
$ vi .bash_profile

でファイルを開いた後、『i』を押して編集モードにしてから、

PATH=$HOME/.nodebrew/current/bin:$PATH
export PATH
export NODEBREW_ROOT=/usr/local/var/nodebrew

と書き足して保存。
そうすると、ターミナルを再起動しても、npmなどのコマンドが使える。

22
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
spice
東京でフロントエンドエンジニアやってまふ
eure
オンラインデーティングサービス「Pairs」の運営・開発をしている企業。様々なモダンな技術を駆使してビジネスを成長させています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
22
Help us understand the problem. What is going on with this article?