• 前端-【学习心得】-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标签

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

     

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

  • 相关阅读:
    pip install selenium==版本号 报错
    解决phantomjs输出中文乱码
    phantomjs学习之网页访问测速
    phantomjs学习之截图
    bzoj1069-最大土地面积
    hdu4372-Count the Buildings
    bzoj3786-星系探索
    Codeforces633H-Fibonacci-ish II
    hdu3625-Rooms
    斯特林数
  • 原文地址:https://www.cnblogs.com/wq123/p/4396430.html
Copyright © 2020-2023  润新知