Deploy react app by create-react-app

Follow this guide to deploy react app to github pages.
React Create App Readme

Do something to let github pages OK with SPA

Github pages does not support SPA routings now, so you have to do followings:
Follow this guide to make SPA OK with github pages
spa github pages

Comment and share

A Simple Higher Order Component example

Simple example

For loading spinner with different Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// HOC declaration
function withLoadingSpinner(Component) {
  return function EnhancedComponent({ isLoading, ...props }) {
    if (!isLoading) {
      return <Component { ...props } />;
    }
    return <LoadingSpinner />;
  };
}
// Usage
const ListItemsWithLoadingIndicator = withLoadingSpinner(ListItems);
<ListItemsWithLoadingIndicator
  isLoading={props.isLoading}
  list={props.list}
/>

Recompose

https://github.com/rafrex/spa-github-pages
A React Library for HOC

Comment and share

Node.js 的套件搜尋機制：

當 require 一個套件的時候，Node.js 會搜尋當前目錄的 node_modules 子資料夾和 NODE_PATH 環境變數所設定的目錄。所以套件可以選擇安裝在全域，也就是 NODE_PATH 所指定的目錄，或當前目錄的 node_modules 子資料夾。npm 也因此分成兩種模式：全域模式 (Global Mode) 管理 NODE_PATH 所指定的目錄套件，及本地模式 (Local Mode) 管理當前目錄的 node_modules子資料夾內的套件。

如果安裝 Node.js 時沒有另外設定 prefix 參數，NODE_PATH 應設定為 /usr/local/lib/node_modules

npm 最大的優點可能也是最大的缺點，即透過冗餘安裝來解決套件相依性問題。如果要安裝套件 A 和套件 B，而兩者都相依於套件 C，則 npm 會在套件 A 和套件 B 的 node_modules 資料夾內同時安裝套件 C。換句話說，套件 C 被安裝了兩次。這種設計的好處是不會有相依性問題，但缺點就是同樣的套件會被安裝多次，當有需要編譯的套件被冗餘安裝多次時，更新會變得很緩慢，幸好絕大多數的套件都不需要編譯。

以上轉貼http://www.openfoundry.org/tw/tech-column/8537-npm-node-package-manager

指令

1
2
3
4
5
6
7
8
9

#以下指令預設為全域安裝，若想執行local安裝的話把-g拿掉即可
npm search [關鍵字]
npm install [套件名稱] -g
npm uninstall [套件名稱] -g
npm ls -g
npm uninstall [套件名稱] -g
npm outdated -g
npm update [套件名稱] -g
npm update -g

dependency管理

詳情可見https://docs.npmjs.com/files/package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "name": "hexo-blog",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.1.1"
  },
  "dependencies": {
    "hexo": "^3.1.0",
    "hexo-deployer-git": "0.0.4",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.2",
    "hexo-generator-feed": "^1.0.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.0.1",
    "hexo-generator-tag": "^0.1.1",
    "hexo-renderer-ejs": "^0.1.1",
    "hexo-renderer-marked": "^0.2.8",
    "hexo-renderer-org": "git+https://github.com/CodeFalling/hexo-renderer-org.git#emacs",
    "hexo-renderer-stylus": "^0.3.0",
    "hexo-server": "^0.1.3"
  }
}

在安裝package時加上–safe表示安裝的同時自動更新package.json

1
2

npm install [套件名稱] --safe
npm update [套件名稱] --safe

Comment and share

簡介

可做到node.js的多版本環境切換，類似pyenv

安裝

1

brew install nvm

bash_profile加上

1
2

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

以上設定會將node安裝在~/.nvm/versions/node/v4.2.2
npm的global library在~/.nvm/versions/node/v4.2.2/lib/node_modules/

指令

1
2
3
4
5
6
7
8
9

nvm ls-remote
nvm ls
nvm install v4.2.2
nvm deactivate
nvm current
nvm use v4.2.2
nvm use system
nvm alias default v4.2.2
nvm unalias default

Comment and share