前端-【学习心得】-react初识

刚写好的文章一不小心点错界面被覆盖掉，那种心情真tm酸爽，好了都怪自己不小心。

发完牢骚还是要继续重来。

在介绍react之前首先要说说为什么用它。

我最初发现他时在material ui这个前端实现框架里面。这个框架的实现使用的正式react,

react是由facebook 工程师提出来的前端组件化思想的实现。

前端组件化的思想出现是因为大型项目需求的刺激。为了优雅的实现大型项目，我们必须把它一块一块的分离出来再去实现。

这里给大家一篇关于探讨界面组件化的文章：

http://bradfrost.com/blog/post/atomic-web-design/#pages

就好比自然世界的组成是由原子到分在再到更大的组织一样。

我们的界面设计也同样可以遵循这一原理。

Atoms 原子

类似于输入标签按钮等网页基础元素

Molecules分子

将多个原子组合起来，具有一定的功能

比如一个搜索框，包括标签，输入框和搜索按钮。

Organisms  组织

类似于我们的header。它包括，欢迎内容，登录注册链接，等等

Templates  模板

 这个跟axure做的原型线框是一个道理，把组织组织到一起，实现一个简要的线框图。

Pages  界面

最后就是具体实现的界面。专业术语叫做高保真。

同理还有网易的nec 前端 css 框架

官网是http://nec.netease.com/

推崇的也是组件化思想。它将css 进行了内部分类

包括重置，布局，模块，原件，功能等，推荐大家看看这个网站，虽然现在不是很有名气，但是真心很棒。

也就是说前端组件化是众望所归，大家都在努力去实现。而react无疑是一个先驱。

react官网http://facebook.github.io/react/  给出了十分详细的实现。

这里我只是简单翻译一下给大家。但是前面的基础介绍需要大家自己去翻阅。

首先是第一个组件：

组件之间可以相互依赖，示例结构如下：

- CommentBox 

     - CommentList

      - Comment 

    - CommentForm

接下来创建一个组件：

// tutorial1.js

var CommentBox = React.createClass(

{ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); }

});

React.render( <CommentBox />, document.getElementById(‘content‘));

可以看到,使用React.createClass定义一个组件，然后使用React.render（组件，dom元素）渲染到元素上

接下来是另一种方式：

// tutorial1-raw.js

var CommentBox = React.createClass(

{

     displayName: ‘CommentBox‘,

     render: function() { return ( React.createElement(‘div‘, {className: "commentBox"}, "Hello, world! I am a CommentBox." ) );

}

});

React.render( React.createElement(CommentBox, null), document.getElementById(‘content‘));

定义组件名，然后渲染时候可以使用React.createElement(组件名，参数),动态定义

React使用React.createClass()创建组件，官网解释是，向这个函数传递了许多方法，最重要的是render,这个方法反悔了React组件树，最终会在html中渲染出来

注意里面的<div>标签已经不是原生的dom标签，因此可以和组件进行数据绑定，因为属于react控制的，也可以理解成react很安全，毕竟是虚拟的dom。

ok,今天就到这里我先保存，以免又重新要再写。

原文：http://www.cnblogs.com/wq123/p/4396428.html