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

出力は、Working Directoryにファイルを作成します（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アプローチのReact成分のアプローチをモデルにしています。

「ネスト」を使用した巣のコンポーネント

コンポーネントが作成されたディレクトリにコマンドラインCD（EG /SRC）

 trot nest Parent Child1 Child2

出力

child1、child2を親コンポーネントにインポートします
親コンポーネントでrender（）関数を検索し、子コンポーネントをネストします。
子コンポーネントは、同じディレクトリに既に存在する必要があります

これにより、ネストされたアプリケーションの大まかなスケッチをすばやく見ることができます。

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コマンドに関するメモ**