0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[1行で完了]最速でReact環境構築

Posted at

※自分のアウトプット用(メモ)です

結論だけ知りたい人用

1行のコマンドでReactの環境構築を完了する。
[条件]
1.Node.js 8.10以上
2.npm 5.6以上

$ npx create-react-app プロジェクト名

順番通り説明していきます。

必要なパッケージのインストール方法

1. brewをインストール

Macのパッケージ管理システムであるbrewをインストール。
brew公式サイト

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

2. nodebrewbrewでインストール

nodeのバージョン管理ができるnodebrewをインストール。
(brewでインストールするので先にbrewをインストールした)。

$ brew install nodebrew

3. Node.jsnodebrewを使ってインストール

Node.jsはnodebrewで管理した方が使いやすいと思います。他のバージョンに移るの簡単ですし、普通にインストールすると削除するのに手間なんですよね...
ほとんどの場合、安定版をインストールしておけば問題ないと思います。

// リモートにあるインストールできるNode.jsの一覧表示
$ nodebrew ls-remote

// 安定版をローカル(自分のMac)にインストール
$ nodebrew install stable

// ローカルにインストールされている`Node.js`のバージョンを一覧表示
$ nodebrew ls

// インストールしたバージョンの`Node.js`を選択する
$ nodebrew use 使用したいバージョン番号

4. Node.jsのパスを通す

// "~/.bash_profile"にパスを追記する(bashの場合)
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

// ターミナルを再起動して反映
// または以下を実行して反映
$ source ~/.bash_profile

5. nodenpmが使用可能か確認

Node.jsをインストールした時点でnpm(node package manager)もインストールされているので、うまくいっていればこの時点で使用可能になっているはずです。

// Node.js
$ node -v

// npm
$ npm -v

これで準備は整いました。

create-react-appReactの環境構築

任意の場所で以下のコマンドを叩いてください。
npxコマンドを簡潔に説明すると、パッケージをローカルにインストールすることなく実行できるコマンドです。
環境を汚染しないので手軽に実行して見たいときに便利です。
詳細はこちら

$npx create-react-app プロジェクト名

これでカレントディレクトリにreactのプロジェクトが作成されました。
以下のコマンドでブラウザ表示します。

$ npm start

スクリーンショット 2020-06-25 15.21.19.png

お疲れ様でした。

0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?