Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8934

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

$
0
0

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デザインを利用するためのパッケージ。
タッチ、タップ、クリックなどのイベントを使うためにreact-tap-event-pluginのインストールも必要。

#yarn add material-ui react-tap-event-plugin 
#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.終わりに

  • firebaseの設定は別途。

以上。


Viewing all articles
Browse latest Browse all 8934

Trending Articles