reactプロジェクトを作成する時のnpm installするパッケージ

プロジェクトディレクトリを作成

プロジェクトディレクトリ作成

mkdir project

npm init

npm initはnpmを使用して対象プロジェクトのパッケージ管理をするために必要なpackage.jsonを作成するためのコマンド。
先ほど作成したプロジェクトディレクトリに移動して実行する。

cd project
npm init

実行すると、下記の項目について何を設定するか聞かれる。
何も入力せずEnterを押せばデフォルトの項目が設定される。
※全てデフォルトで良いのであればnpm init -yで実行することがおすすめ。-yはyesの意味。
もし、入力を間違えたとしても後でpackage.jsonを修正すれば良い。

項目	意味	デフォルト値
name	プロジェクト名	プロジェクトディレクトリ名
version	プロジェクトバージョン	1.0.0
description	パッケージの説明	空文字
main	プログラムへの主要なエントリポイント	index.js
script	テスト用のコマンド	"test": "echo "Error: no test specified" && exit 1"
keywords	キーワード ※プロジェクトを公開した時に検索の手助けとなるワードを設定	空配列
author	著者	空文字
license	プロジェクトのライセンス	ISC

ちなみにISCライセンスは、簡単に言ってしまえば「自由に使っていいよ。ただし、このプロジェクトのコピーライトは記載してね」というライセンス。原文はこちら。

コマンド実行後、下記のようなpackage.jsonが作成される。

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

reactプロジェクトのためのパッケージインストール

パッケージはローカルインストールで行う。

npm install --save-dev パッケージ名

--save-devを指定すると、package.jsonのdevDependenciesに追記してくれる。
本番環境で環境構築や、他のメンバにプロジェクトを手伝ってもらうときに簡単に環境構築できるように--save-devは必ず指定する。

あとは、下記リストのパッケージをインストールすればとりあえずreactは動く。
reduxとか使用したければ別途インストール。

パッケージ名	役割
@babel/core	Babel本体
@babel/preset-env	サポートされている環境に基づいて必要なBabelプラグインを自動で決定する
babel-loader	webpackでコードを変換するためにBabelを使用するよう指示する
babel-plugin-add-module-exports	Node.jsの変換時に使用する
@babel/preset-react	全てのReactプラグイン用のBabelプリセット
babel-plugin-react-html-attrs	JSX内でclassNameではなくclassを使えるようにする
babel-plugin-transform-class-properties	クラス外でクラスプロパティが定義された時に正常にBabelで変換できるようにする
react	react本体
react-dom	reactでDOMを操作する
react-router-dom	React Routerのコアルーティング機能を提供する
webpack	webpack本体
webpack-cli	webpackコマンドを使用できるようにする
webpack-dev-server	webpackを用いたフロントエンド開発のときに利用できる開発用のwebサーバー
axios	非同期でHTTP通信を行う

参考サイト

@babel/preset-env (Babel 7)をハンズオンでちゃんと理解する
react-routerとreact-router-domの違い
Babelの設定を見直すための逆引きガイド
npm install の --save-dev って何？
Babeljs-babel-plugins
BabelJS-Babelプラグイン