React 碎碎念: 艱困的新手之路

其實關注 React 的東西已經很久，直到最近剛好有機會就在新的專案跳坑下來，寫了兩個星期之後有很多事情覺得應該要寫下來做個紀錄。

至於為什麼叫碎碎念而不叫做筆記呢？因為文章中個人抒發感想的部分可能也不在少數，又或著可能我沒有真心喜歡它(React)吧。

碎碎念大部分是個人意見，客觀部分敘述有錯誤歡迎指證。

正文

我真心覺得現在的 React 超難上手。

在 JS 的生態系統推進，以及各種工程師大大們的持續努力之下，想要上手現在的 React (可謂是 modern React)大概需要了解、會操作下面這些東西：

再補上一些可選的項目

ESLint
Redux

當然如果上述這些都有統一而且很直覺的學習路徑也就罷了(用現在的英文說是 opinionated)，但我想現在的 JS 精神就是要把所有東西都 modulize，所以往往我們光是 configure 環境就要花掉大把的精神與時間。

可以看一下 AngularClass 在去年年底對 React developers 做的調查，就知道是一個多麼充滿選擇的環境(菸)。

這邊稍微對每一個項目介紹一下。

npm

現代 JS developer 必須要會使用的東西，大部分的 React 相關 package 都得靠 npm 來裝，值得投資學習。

Webpack

有著打包一切的精神，不過也不是什麼東西都打包就最好。

因為 React 本身特性的關係(Component-based)，可謂是與 React 搭配的 bundler 首選(另一套通常是 browserify)，然而它本身功能太強造成了 configuration 的複雜度暴增，而 documentation 方面又跟不上這個複雜度，所以往往讓人花很多時間在與它奮鬥。

Babel + ES6(ES2015)

其實 Babel 本身的學習本來是可以忽略不計，畢竟它可以單純的只是個 transpiler，你只需要知道 ES6 怎麼寫就好了；不過那是在 Babel 曾經如此平易近人的年代(Babel 5 以前)，現在的 Babel 在 modulize 精神的加持下已經變成了可以透過加上各種 plugin 而進行各種 transform 的怪獸。

我想他們也有注意到如果全部都自己選實在太累人，於是有出了配套的 preset 們，選用 preset 等於一次選用大量的 plugin，當然，你還是要花時間挑一下 preset 就是了。

然而挑 plugin 的同時就決定了你可以使用的 syntax，做為一個新手可能連會用到什麼 syntax 或哪個 syntax 覺得很好用都不知道，更何況是叫他自己挑呢？

舉例來說，如果你裝的 preset 只有到 stage-3，那麼你就沒辦法用 https://github.com/sebmarkbage/ecmascript-rest-spread 的功能啦！

ES6 的部分除了嶄新 syntax 的學習/使用之外，它的 module import/export 也要花上不少時間理解。推薦閱讀: ECMAScript 6 modules: the final syntax

ESLint

其實 codebase 變大之後就會發現就算不跑 test，起碼還是要 lint 一下，不然太容易出問題。就我所知目前如果要好好做 ES6 的 lint，除了 ESLint 好像沒有什麼別家選擇？

ESLint 也是高度 modulize，可以安裝各種 rule，而針對 rule 可以自訂的部分除了 rule 本身的 warning level 之外，有些 rule 還有額外的參數。

好在它也有提共預設的 config preset plugin (e.g. airbnb)，不過依然免不了一個套用並且修改到適用自己的 coding-style 的過程。

尤其在裝了 react plugin 之後要改的東西又更多了…

/* file: 我的 .eslintrc.json */

{
    "extends": "airbnb",
    "plugins": [
        "react"
    ],
    "ecmaFeatures": {
        "experimentalObjectRestSpread": true
    },
    "rules": {
        "comma-dangle": [2, "never"],
        "new-cap": [1, {"newIsCap": true, "capIsNew": false}],
        "no-use-before-define": [2, "nofunc"],
        "no-multi-spaces": 0,
        "func-names": 0,
        "brace-style": [2, "stroustrup"],
        "no-unused-vars": [1, {"args": "none"}],
        "key-spacing": 0,
        "no-console": 1,
        "no-else-return": 0,

        "react/prop-types": 1,
        "react/jsx-boolean-value": 0,
        "react/jsx-closing-bracket-location": [0,
            {
                "selfClosing": "props-aligned",
                "nonEmpty": "after-props"
            }
        ],
        "react/no-multi-comp": [1, {"ignoreStateless": true}]
    }
}

Redux

老實說 redux 就像是另外一個世界來的東西，它有太多的 functional programming 在裡面，搭配 ES6 的 arrow function 之後可以出現各種反人類的 code，學起來超痛苦。

而在使用 ES6 蔚為潮流之後，Facebook 官方表示以後會 deprecate mixin 的使用，然後又推出了 stateless component ，讓你可以用純 function 的方式描述 React component，對 redux 可謂有推波助瀾的效果。

於是 redux 界蓬勃發展，出現了越來越多高深莫測的 package。

reselect
recompose
redux-saga
… and more

小結

曾經前端開發是這麼的平易近人，現在呢？

以前我喜歡 AngularJS，不是說它設計得有多麼好，而是就平易近人的程度來說實在勝過 React 太多，就算到了後期的學習曲線比較陡峭，起碼你願意起頭。

所以才有日前的 Pete Hunt 之新手上路困難疑問，一下子引出了好多人出來 complain，一直接到 JavaScript Fatigue 一文，甚至是最近充滿戰力的 The Sad State of Web Development，其實都是息息相關。

我自己是比較覺得 web development 應該要是 accesible 的。

當然我還是會繼續寫 React 啦… 畢竟這只是最近有感的碎碎念。

補充

我自己不是在開始用 React 的這個專案才一次性開始學習/使用上面提到的那些工具，是經歷了好幾個小專案的學習：

Webapck + ES6 + AngularJS + Redux (用 ng-redux)
Webapck 更上一層樓 + ES6 + jQuery
(目前) Webpack + ESLint + ES6 + React + Redux

說真的如果一次全下，我感覺頭腦會爆。尤其是第一次用 ES6 + Redux 實在太傷腦了…