trot下载 - trot源代码下载

trot

三方组件

ES 6 - PropTypes and Set State update.

下载

概要

这是一个创建React组件的命令线助手。

安装

 npm install -g trot

用法

 trot comp -c Parent     /* Creates new react components 'Parent' */
trot nest Parent Child  /* Nests child components in render function of parent */

帮助

 trot --h

代码示例

使用“ Comp”创建组件

命令行

 trot comp -c ComponentName

输出在工作目录中创建一个文件（ES5选项可提供-v 5标志）：

 import React, { Component } from 'react'
import PropTypes from 'prop-types' //ES6


class ComponentName extends Component {
    constructor(props){
        super(props) 
        this.state = {
        
        }
    }

    render(){
        return (
            <div>
                <h1>ComponentName</h1>
            </div>
        )
    }
}

ComponentName.propTypes = {

};

export default ComponentName

其他标志

 trot comp -c ComponentName -v 5      /* Outputs ES5 Syntax */
trot comp -c ComponentName -v 6      /* Outputs ES6 Syntax */
trot comp -c ComponentName -f src    /* Specifies output folder */
trot comp -c ComponentName -s y      /* Creates matching CSS file */

-v标志允许您指定ES5或ES6语法。如果没有使用版本标志，则ES6是默认值

-f标志允许您指定输出文件夹以匹配项目体系结构

-c标志将创建一个与组件相同名称的匹配的CSS文件。 CSS文件将导入到组件文件中， <div>将获得“ component-componentName”的类名称。

例如：

 trot -c Test -f src -s Y

将在./src目录中创建一个Test.js组件文件，并在同一目录中创建一个test.css文件。渲染函数中的主<div>将具有className='component-test'

此方法是根据安德鲁·法默（Andrew Farmer）的CSS方法进行反应组件的模型。

使用“巢”巢组件

命令行CD进入创建组件的目录（例如 /src）

 trot nest Parent Child1 Child2

输出

进口child1，child2进入父组件
在父组件中搜索渲染功能（）函数，并嵌套子组件。
儿童组件必须已经存在于同一目录中

这使您可以快速看到嵌套应用程序的粗略草图。

ES5示例（ES6默认，请参见上文）：

 Parent.js


import React from 'react'
import Child1 from 'Child1'
import Child1 from 'Child2'

var Parent = React.createClass({
  render: function(){
   return (
      <div >
        <h1>Parent</h1>
        <Child1 />
        <Child2 />
      </div>
    )
  }
})

export default Parent

** nest命令上的注释**