前端-【学习心得】-react2

标签：

今天是除夕，首先恭祝大家新年快乐。新年的确是值得开心的，过去一年过得不好就把它抛到后面，过得好就期待新一年过得更好。

好了，下面继续我们的react之旅。

我们的界面是有许多简单组件组成的，就像我们的身体是由各个器官组成的一样。我们想做一个可以复用的接口，定义它的名字CommentBox，定义这个盒子的组成由标题，列表项和表单组件构成。标题我们直接写在CommentBox里面，对于列表项和表单已经不是单元级别的，所以也把它们定义为组件。

定以组件列表

CommentList

var CommentList = React.createClass(

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

});

定义表单

var CommentForm = React.createClass({ render: function() { return ( <div className="commentForm"> Hello, world! I am a CommentForm. </div> );}

});

其实这两项都非常简单，这里的目的还是为了说明组件化思想。

最后看看完整的box

var CommentBox = React.createClass(

{ render: function() { return (

<div className="commentBox"> <h1>Comments</h1> <CommentList /> <CommentForm /> </div> ); }

});

可以看到这里混合了组件和html标签

以上的教程代码全部都来自于官网教程。

有时候我会想我们学习是不是应该从最高级的整体框架入手，先明白我们要做什么，然后再去学怎么做，但是现在学习方式貌似都是先教你怎么做，自己再取摸索到底要做什么，当然这只是我个人看法，不过不管如何，我们都应该孜孜不倦的去追求我们不了解却渴望了解的东西。无论如何，追求自己喜欢的东西都是正确的，假如你不太喜欢金钱至上的观念，却又无法摆脱世俗的看法，那么你就做自己喜欢的就行了。就像阿甘那样，当然能赚到钱也是极好的，不是吗。

前端-【学习心得】-react2

标签：

原文地址：http://www.cnblogs.com/wq123/p/4396430.html