trot

Sinopsis

Este es un ayudante de línea de comando para crear componentes React.

Instalación

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

Ayuda

 trot --h

Ejemplos de código

Crear componentes usando 'comp'

Línea de comando

 trot comp -c ComponentName

La salida crea un archivo en el directorio de trabajo (opción ES5 disponible con -v 5 indicador):

 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

Banderas adicionales

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

El indicador -v le permite especificar la sintaxis ES5 o ES6. ES6 es el valor predeterminado si no se usa el indicador de la versión

El indicador -f le permite especificar la carpeta de salida para que coincida con la arquitectura de su proyecto

El indicador -c creará un archivo CSS coincidente con el mismo nombre que el componente. El archivo CSS se importará al archivo de componentes, y el <div> recibirá un nombre de clase de "componente componente".

Por ejemplo:

 trot -c Test -f src -s Y

Creará un archivo de componente Test.js en el directorio ./src , y un archivo test.css en el mismo directorio. El principal <div> en la función de renderizado tendrá un className='component-test'

Esta metodología se modela después del enfoque CSS de Andrew Farmer para los componentes React.

Componentes de nido usando 'nido'

CD de línea de comando en el directorio donde se crearon sus componentes (por ejemplo /SRC)

 trot nest Parent Child1 Child2

Producción

1. Importa Child1, Child2 en el componente principal
2. Búsqueda de la función Render () en el componente principal y anesta los componentes infantiles.
3. Los componentes infantiles ya deben existir en el mismo directorio

Esto le permite ver rápidamente un bosquejo aproximado de su aplicación anidada.

Ejemplo de ES5 (ES6 es predeterminado, ver arriba para la salida):

 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 sobre el comando nido **

1. Si no está en el directorio que contiene los archivos de componentes, recibirá un error

Motivación

Creé esto mientras aprendía reaccionar porque me sentí frustrado escribiendo la misma caldera para cada componente, a menudo introduciendo errores tipográficos.

Busqué un generador de línea de comandos similar para React, pero no pude encontrar uno, así que comencé a codificar.

Trot guarda las teclas repetidas, simplifica el desarrollo del proyecto y reduce el tiempo requerido para crear una aplicación de trabajo. Al usar esta interfaz de línea de comando, pude pensar en la codificación en lugar de pensar en la sintaxis y las versiones (ES5 vs ES6). '

Todavía soy relativamente nuevo en el desarrollo de JavaScript, Node y React. Todavía estoy aprendiendo ES6. Si tiene sugerencias de mejoras, características o nota cualquier error o corrección, envíe un problema o bifurca el repositorio y envíe una solicitud de extracción.

Colaboradores

Justin Clagg

Jay Hayse

Suzanne Atkinson

Las contribuciones a este proyecto son bienvenidas y serán reconocidas aquí, no dude en crear un problema con sugerencias para plantillas o banderas de línea de comandos para incluir funcionalidad adicional para acelerar el desarrollo de reacción.

Abra un problema o bifurca el repositorio aquí trot en Github

Registro de cambio

Ver wiki en la página de GitHub: Wiki-Change Log

Licencia

ISC