邹青 5天小节

阅读数:462 发布时间:2016-12-15 00:30:14

作者:w5zq 标签: react 组件 千牛UI

短短五天,收获不小

    离开的时间越来越近,课程也越来越紧张,前一段时间大量的接触了后端,这五天学习了前端的知识,前一天是用react大家写了简单的组件,后几天学习了千牛UI,写了大量的组件,最后进行页面拼接。

    react让编程更加颗粒化,分工明确,和传统的编程思想完全不一样,充分发挥了团队的优势,每个人只做自己的组件,大大的提高了工作的效劳,最大程度上让工程更加工程化。相当于一次技术的革新,让不同的页面进行统一化的开发。下面是用react写一个简单的组件:


var React = require('react');

var XYTss = require('../XYT_UI/Styles/XYTss');

var XYT_profileList = require('./XYT_profileList');

var XYT_button = require('../XYT_UI/Button/XYT_button');

var XYT_registeredList = React.createClass({

    render: function(){

        return (
                <div style={XYTss.registeredList}>

                    <div style={XYTss.registeredTime}>

                        <XYT_profileList />

                    </div>

                    <div style={XYTss.registeredButton}>

                        <XYT_button value="未支付"/>

                    </div>

                </div>

            )

    }

})

注意:react书写组件的使用样式的方式和之前是不一样的。

    对于千牛,我是第一次接触组件的形式写页面,开始觉得不如直接用css写,link到原页面中,何必导入组件,那么麻烦,渐渐学习,发现react和组件的相结合,让无经验的人能很快的进入开发,并且最大的程度上互不影响。形成零件式开发。下面是一个简单的使用千牛中的组件的例子:


/**

 * @authorzq

 * @time 2016-12-14

 * @description页面底部的选项卡,点击不同的a,链接到不同的页面

 * TODO:::

 */

import React from 'react';

import Tab from 'qnui/lib/Tab';

import 'qnui/lib/Tab/index.css';

class Bottom_Tab extends React.Component {

  render() {

    return (

      <Tab type="text" style={Tab_ss.Tab}>

      <a tab="路线" key="1" href=""></a>

      <a tab="约团ing" key="2" href=""></a>

      <a tab="我的" key="3" href=""></a>

    </Tab>

    );

  }

}

Bottom_Tab.defaultProps = {

};

export default Bottom_Tab;

词汇积累

asynchronously adv 异步方式,异步处理

invoke v 激活,激发

compiler n 编译器,编译

nifty n 俏皮话, 漂亮的

camel case n 驼峰式大小写

widget n 小部件

hood n 头巾,覆盖 v 罩上

相关文章推荐: