trot

Synopsis

Il s'agit d'une aide à ligne de commande pour créer des composants React.

Installation

 npm install -g trot

Usage

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

Aide

 trot --h

Exemples de code

Créer des composants à l'aide de 'comp'

Ligne de commande

 trot comp -c ComponentName

La sortie crée un fichier dans le répertoire de travail (option ES5 disponible avec -v 5 indicateur):

 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

Drapeaux supplémentaires

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

L'indicateur -v vous permet de spécifier la syntaxe ES5 ou ES6. ES6 est la valeur par défaut si aucun indicateur de version n'est utilisé

L'indicateur -f vous permet de spécifier le dossier de sortie pour correspondre à l'architecture de votre projet

L'indicateur -c créera un fichier CSS correspondant au même nom que le composant. Le fichier CSS sera importé dans le fichier composant et le <div> recevra un nom de classe de "composant-composantName".

Par exemple:

 trot -c Test -f src -s Y

Créera un fichier de composant Test.js dans le répertoire ./src et un fichier test.css dans le même répertoire. La <div> principale de la fonction de rendu aura un className='component-test'

Cette méthodologie est modélisée après l'approche CSS d'Andrew Farmer pour les composants React.

Composants de nid utilisant «nid»

CD de ligne de commande dans le répertoire où vos composants ont été créés (par exemple / src)

 trot nest Parent Child1 Child2

Sortir

1. Importe un enfant 1, Child2 dans le composant parent
2. Recherche la fonction render () dans le composant parent et niche les composants de l'enfant.
3. Les composants enfants doivent déjà exister dans le même répertoire

Cela vous permet de voir rapidement une esquisse approximative de votre application imbriquée.

ES5 Exemple (ES6 est par défaut, voir ci-dessus pour la sortie):

 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

** Remarques sur la commande Nest **

1. Si vous n'êtes pas dans le répertoire contenant les fichiers des composants, vous obtiendrez une erreur

Motivation

J'ai créé cela pendant que l'apprentissage réagit parce que je suis devenu frustré en tapant le même passe-partout pour chaque composant, introduisant souvent des fautes de frappe.

J'ai recherché un générateur de ligne de commande similaire pour réagir mais je n'ai pas pu en trouver un, alors j'ai commencé à coder.

Trot économise sur des touches répétées, simplifiez le développement du projet et réduisez le temps nécessaire pour créer une application de travail. En utilisant cette interface de ligne de commande, j'ai pu penser au codage plutôt qu'à penser à la syntaxe et aux versions (ES5 vs ES6). '

Je suis encore relativement nouveau dans le développement JavaScript, Node et React. J'apprends toujours ES6. Si vous avez des suggestions d'améliorations, de fonctionnalités ou de noter des erreurs ou des corrections, veuillez soumettre un problème ou fourrer le dépôt et soumettre une demande de traction.

Contributeurs

Justin Clagg

Jay Hayse

Suzanne Atkinson

Les contributions à ce projet sont les bienvenues et seront reconnues ici, n'hésitez pas à créer un problème avec des suggestions pour des modèles ou des drapeaux de ligne de commande pour inclure des fonctionnalités supplémentaires pour accélérer le développement de la réaction.

Ouvrez un problème ou fourrez le repo ici trot sur github

Modifier le journal

Voir Wiki sur la page GitHub: journal de changement Wiki-

Licence

Isc