Help us understand the problem. What is going on with this article?

第1回 2020年版 Node.js+Reactのインストール

1.概要

MacbookにNode.jsとReactをインストールし、アプリを開発するための環境を構築するための手順について。

2.前提条件

事前作業

作業日時

  • 2020年2月

環境

  • MacBook Pro
  • macOS Catalina

ソフトウェアのバージョン

ソフトウェア バージョン
nodebrew 1.0.1
Homebrew 2.1.11
yarn 1.21.1

3.インストール手順

Node.jsをインストールする

以下の流れでインストールする。

  1. Homebrewのインストール
  2. nodebrewのインストール
  3. Node.jsのインストール

Homebrewのインストール

以下のコマンドでHomebrewをインストールする。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodebrewのインストール

Homebrewを使用してインストールする。

brew install nodebrew

インストール後は以下コマンドでnodebrewのバージョンが確認できます。

nodebrew -v
nodebrew 1.0.1

node.jsのインストール

$ mkdir -p ~/.nodebrew/src

最新版を取得する際は

$ nodebrew install-binary latest

安定版を取得する際は

$ nodebrew install-binary stable

インストールされたnodeを有効化

$ nodebrew ls

上記、コマンドでインストールされたバージョンが一覧できる。

v7.1.0

current: none

インストール直後はcurrent: noneとなっているため、必要なバージョンを有効化する。

$ nodebrew use v7.1.0

もう一度nodebrew lsを試すと

v7.1.0

current: v7.1.0

v7.1.0が設定されました。

参考記事

ちなみに、Windowsの場合は、以下のインストーラでインストール可能。

https://nodejs.org/en/download/

yarnのインストール

npmの代わりのパッケージマネージャ。
yarn addでパッケージをインストールできる。

$ npm install -g yarn

Reactのアプリの作成

以下コマンドでReactアプリのフォルダが作成される。
Typescriptで開発を行うため、--template typescriptのオプションを設定する。

npx create-react-app <app name> --template typescript

各種ライブラリのインストール

作成したフォルダに移動して、各種ライブラリをインストールする。

$ cd my-react-app

Reduxのインストール

プロジェクトルートフォルダで以下コマンドを実行する。
reduxはreduxそのもの、react-reduxはreactとreduxをつなぐライブラリです

$ yarn add redux react-redux typescript-fsa typescript-fsa-reducers

typescript-fsaはAction側、typescript-fsa-reducersがReducer側で利用するライブラリです。

  • typescript-fsa → ActionCreatorを簡単に生成するライブラリ
  • typescript-fsa-reducers → Reducerを簡単に作成するためのライブラリ

開発ツール(redux-devtools)のインストール

redux-devtoolsは、Reduxで開発する際に利用できる便利な開発ツールで、アクション実行時のstoreの状態を確認するのに利用する。
これに加えてChromeの拡張機能でRedux DevToolsを追加するとツールでRedux上のStoreの状態が確認でき、非常にデバッグしやすくなります。

yarn add --dev redux-devtools

Prettierのインストール

整形ツールのPrettier(-Dで開発版のみにインストールされる)
設定はこちら
https://qiita.com/awakia/items/3a05edfa135762d7952c

# yarn add -D prettier

Eslintのインストール

# yarn add -D eslint  \
   @typescript-eslint/eslint-plugin  \
   eslint-plugin-prettier  \
   eslint-config-prettier

Material-ui

Materialデザインを利用するためのパッケージ。
@material-ui/iconsは、表示も早く、綺麗なSVGアイコンを利用するためにインストールする。

# yarn add @material-ui/core @material-ui/icons

react-router-dom

react-routerの代わりにConnected React Routerを使う。
URLに応じて、表示するコンテンツを変更するルーティングを行うためにインストールする。

# yarn add react-router-dom connected-react-router
# yarn add -D @types/react-router-dom

date-fns

dateオブジェクトのライブラリ。
momentより軽いらしい。

$ yarn add date-fns

4.コマンド

ローカルでサーバーを起動する

以下コマンドでローカルでサーバーを起動できる。
http://localhost:8080/でアクセスできる。

$ yarn start

ビルドする

$ yarn build

5.終わりに

次回はMaterial UI V4を利用した画面の作成方法について説明します。

6. 関連記事

Reactに関する記事です。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした