邹青 5天小节

短短五天，收获不小

    离开的时间越来越近，课程也越来越紧张，前一段时间大量的接触了后端，这五天学习了前端的知识，前一天是用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 罩上