进击的前端--刘健兰

阅读数:2194 发布时间:2016-12-15 00:08:41

作者:w5ljl 标签: 爱用宝 Babel React

Babel

什么是Babel


    input.map(item => item + 1);   //转码前
    input.map(function(item){
         return item + 1;
    });

Babel做了什么


    {
       "presets":["es2015", "react"],   //根据自身的需求下载规则集,将这些加入到配置文件中
       "plugin":[]
    }

如何下载使用Babel


--- mkdir mybabel     //新建mybabel文件夹
--- cd mybabel        //进入mybabel文件夹
--- npm init          //初始化npm,一路点击enter进行
--- npm install       //安装npm
--- sudo npm install --save -dev babel-d    
--- sudo install --save -dev babe l-preset-es2015
--- npm run build             //运行该指令,将src下的ES6代码自动转为并生成lib文件夹下的ES5代码
--- babel-node src/main.js     //运行src下的main.js文件

React

-react小组件代码

import React from 'react';
import 'qnui/lib/DatePicker/index.css';
import DatePicker, { RangePicker } from 'qnui/lib/DatePicker';

class CalendarComponent extends React.Component {
  render() {
    return (
      <div>
        <RangePicker  />
      </div>
    );
  }
}

module.exports =  CalendarComponent;

ES6

英文单词

module n 模块,组件 deploy v 施展,使展开 optimize vt最优化 optimized a 最优化的 derivation n 衍生物 minified a 微小的 disclaimer n 免责声明书 plugin n 插件 compose v 组成 preset v 预设值 annotation n 注释 transformation n 转换 parse v 从语法上分析 compiler n 编译器 ratify v批准 许可 proposal n 提议 strawman n 起草 candidate v 申请 n 候选人 mutator n 设置方法

相关文章推荐: