【React入門①】Node.js・Reactパッケージインストール事始め

こちらの記事は、React入門チュートリアルです。

Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。

Reactを始めるために、まずはNode.jsとnpmをインストールしておきましょう。

以下が参考になるはずです。
node.jsをVSCodeに導入したい - Laravelとねころっけくん5.8

Node.jsをインストールすると、同時にnpmもインストールされますので、Node.jsのインストールが終わった後、ターミナルで以下のようにバージョンが表示されればOKです！

$ node -v
v10.16.3
$ npm -v
6.9.0

作業用ディレクトリの準備

まずは作業用ディレクトリを用意していきます。

$ mkdir my-app  // ディレクトリの作成
$ cd my-app/  // my-appディレクトリに移動
$ npm init  // npmを初期化

初期化コマンドを実行することによって、自動的にnpm経由でインストールされたパッケージの管理に必要な構成を行ってくれます。

npm init が行われるといくつか質問がなされますが、今回は全て空欄で進めます。

そして、初期化が行われることによってpackage.jsonというファイルが生成されます。
このファイルはnpm経由でインストールしたパッケージを管理するファイルです。

ただし先ほど初期化する際に全ての質問をスキップした場合には、package.jsonは空になっています。

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Reactのインストール

続いてReactのインストールです。

$ npm install --save react

そうすると先ほどのpackage.jsonにreactが追加されていることがわかります。

  "dependencies": {
    "react": "^16.9.0"
  }

またreactをインストールした後はmy-appディレクトリの直下に「node-modules」というreactパッケージ一式が入っています。

npmを利用する意味

最後にnpmというパッケージ管理マネージャーを経由して、パッケージのインストールを行う意味について記しておきます。

それはチーム開発においても、共通の環境に揃えることができるから、です。

どういうことかと言うと、npmを経由してインストールされたパッケージは依存パッケージとしてpackage.jsonに記述されることになります。

そのため、package.jsonさえ揃えれば、インストールコマンドを使用して、全員が同じパッケージを揃えることができるのです。

npmを経由せずともパッケージのインストールは可能ですが、プロジェクト構成の共有のしやすさを念頭に入れた上でnpmを利用するという選択肢が推奨されています。