React嚐鮮

好吧，其實不該該叫嚐鮮了，畢竟你們都在喊，因此算一個正在火的東西。

一年前當AMD/CMD還在很流行的時候，我給我本身的github-pages上的兩個API使用seajs組織了下，感覺了下模塊化的魅力，而現在當Angular/React大行其道的時候，不對他們進行一個瞭解實在也說不過去。So，趁着今天空閒，把github-page上的前端組件所有用react進行了替換，算一個入門的學習。

這是個人github-pages repo: https://github.com/coffeesherk/coffeesherk.github.io

若是clone下來就能看見基本的文件結構啦。

---

JSX

第一次接觸react的時候，被新穎的jsx文件吸引，畢竟這也是個很不錯的發明，把模板引擎和js代碼混淆在了一塊。在render模塊是挺讓人開心的，有點Web components寫法（Custom Tag）

jsxvar MyTag = React.createClass({
    render: function () {
        return (


<div>
                {this.state.username}
            </div>


        );
    }
});

React.render(
    <MyTag />,
    containerNode
)

好吧，這個「不三不四」的就是jsx啦。我認爲這個東西最大的好處就是能夠在js文件裏寫好模板，而不須要用字符串的形式存在另外的地方。

固然，壞處就是jsx不是瀏覽器默認支持的格式，須要用JSXTransformer轉成javascript才行；也可使用即時編譯的方式，固然，編譯的時間就要浪費在瀏覽器裏了，因此最好是先編譯好再發布出去。

React和MVC

官方介紹說，React最多算MVC裏面的V，它只是專一於爲咱們提供一套UI和交互的解決方案，爲了Web Components一統天下的夢想，能夠把每一個組件和相關的API封裝成一個組件，而後咱們能夠針對組件進行重用，再次解放前端工程師的生產力。

React和Module

React能夠AMD/CMD化，緣由就是它的組件能夠導出，利用RequireJS或者SeaJS也能夠很好的管理jsx編譯出來的js啦。

之後有機會寫一下最佳實踐。