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
Help us understand the problem. What is going on with this article?

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

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

結論だけ知りたい人用

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

お疲れ様でした。

yukiyohure0923
海外移住するのが目標のひよっこプログラマです。
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