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啦。

之后有机会写一下最佳实践。