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命令上的註釋**