trot

Sinopse

Este é um auxiliar de linha de comando para criar componentes do React.

Instalação

 npm install -g trot

Uso

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

Ajuda

 trot --h

Exemplos de código

Crie componentes usando 'comp'

Linha de comando

 trot comp -c ComponentName

A saída cria um arquivo no diretório de trabalho (opção ES5 disponível com -v 5 sinalizador):

 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

Sinalizadores adicionais

 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 */

O sinalizador -v permite especificar sintaxe ES5 ou ES6. ES6 é o padrão se nenhum sinalizador de versão for usado

A bandeira -f permite especificar a pasta de saída para corresponder à sua arquitetura do projeto

O sinalizador -c criará um arquivo CSS correspondente com o mesmo nome do componente. O arquivo CSS será importado para o arquivo de componente e o <div> receberá um nome de classe de "componente-componenteName".

Por exemplo:

 trot -c Test -f src -s Y

Criará um arquivo de componente Test.js no diretório ./src e um arquivo test.css no mesmo diretório. className='component-test' principal <div> na função Render

Essa metodologia é modelada após a abordagem CSS de Andrew Farmer para componentes do React.

Componentes do ninho usando 'ninho'

CD da linha de comando no diretório onde seus componentes foram criados (por exemplo, SRC)

 trot nest Parent Child1 Child2

Saída

1. Importa Child1, Child2 para o componente pai
2. Procura a função render () no componente pai e aninha os componentes filhos.
3. Os componentes infantis já devem existir no mesmo diretório

Isso permite que você veja rapidamente um esboço aproximado do seu aplicativo aninhado.

Exemplo ES5 (ES6 é padrão, veja acima para obter a saída):

 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

** Notas no comando ninho **

1. Se você não estiver no diretório que contém os arquivos do componente, você receberá um erro

Motivação

Eu criei isso enquanto aprendi reagir porque fiquei frustrado digitando o mesmo caldeira para cada componente, geralmente introduzindo erros de digitação também.

Eu procurei um gerador de linha de comando semelhante para reagir, mas não consegui encontrar um, então comecei a codificar.

Trot economiza em pressões de teclas repetidas, simplificam o desenvolvimento do projeto e reduzem o tempo necessário para criar um aplicativo de trabalho. Ao usar essa interface da linha de comando, pude pensar em codificar, em vez de pensar em sintaxe e versões (ES5 vs ES6). '

Ainda sou relativamente novo no desenvolvimento de JavaScript, Node e React. Ainda estou aprendendo ES6. Se você tiver sugestões de melhorias, recursos ou anotar quaisquer erros ou correções, envie um problema ou bifurque o repositório e envie uma solicitação de tração.

Colaboradores

Justin Clagg

Jay Hayse

Suzanne Atkinson

As contribuições para este projeto são bem -vindas e serão reconhecidas aqui, sinta -se à vontade para criar um problema com sugestões para modelos ou sinalizadores de linha de comando para incluir funcionalidade adicional para acelerar o desenvolvimento do React.

Abra um problema ou bifurque o repo aqui trote no github

Alterar log

Veja Wiki na página do Github: Log Wiki-Change

Licença

ISC