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

출력 작업 디렉토리에서 파일을 만듭니다 (-v 5 플래그에서 사용 가능한 ES5 옵션) :

 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' 가 있습니다.

이 방법론은 RECT 구성 요소에 대한 Andrew Farmer의 CSS 접근 방식을 모델로합니다.

'Nest'를 사용한 둥지 구성 요소

구성 요소가 생성 된 디렉토리로 명령 줄 CD (예 : /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 Command에 대한 메모 **